diff --git a/angular.json b/angular.json index 54378449..ce68207b 100644 --- a/angular.json +++ b/angular.json @@ -21,7 +21,8 @@ "src/favicon.ico" ], "styles": [ - "src/sass/styles.scss" + "src/sass/styles.scss", + "node_modules/@ctrl/ngx-emoji-mart/picker.css" ], "stylePreprocessorOptions": { "includePaths": [ diff --git a/package-lock.json b/package-lock.json index b2d486d5..fd298c0d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "sengi", - "version": "0.11.0", + "version": "0.12.2", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -711,6 +711,14 @@ } } }, + "@ctrl/ngx-emoji-mart": { + "version": "0.17.0", + "resolved": "https://registry.npmjs.org/@ctrl/ngx-emoji-mart/-/ngx-emoji-mart-0.17.0.tgz", + "integrity": "sha512-gdHM/OPTbqWMIlFPAbjgAPo5BGsjkehILCInw5OttuT25HMZXJFjWVpi6vGixNVrAs8kz6sTYM/wbldS5GP9yQ==", + "requires": { + "tslib": "^1.9.0" + } + }, "@fortawesome/angular-fontawesome": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-0.3.0.tgz", diff --git a/package.json b/package.json index 9587540c..8428a8f6 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "@angular/platform-browser": "^7.2.7", "@angular/platform-browser-dynamic": "^7.2.7", "@angular/router": "^7.2.7", + "@ctrl/ngx-emoji-mart": "^0.17.0", "@fortawesome/angular-fontawesome": "^0.3.0", "@fortawesome/fontawesome-svg-core": "^1.2.13", "@fortawesome/free-brands-svg-icons": "^5.7.0", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c1c68b30..b7a78fbc 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -9,9 +9,11 @@ import { RouterModule, Routes } from "@angular/router"; import { NgxsModule } from '@ngxs/store'; import { NgxsStoragePluginModule } from '@ngxs/storage-plugin'; +import { OverlayModule } from '@angular/cdk/overlay'; import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; import { ContextMenuModule } from 'ngx-contextmenu'; +import { PickerModule } from '@ctrl/ngx-emoji-mart'; import { AppComponent } from "./app.component"; import { LeftSideBarComponent } from "./components/left-side-bar/left-side-bar.component"; @@ -64,78 +66,86 @@ import { ListAccountComponent } from './components/floating-column/manage-accoun import { PollComponent } from './components/stream/status/poll/poll.component'; import { TimeLeftPipe } from './pipes/time-left.pipe'; import { AutosuggestComponent } from './components/create-status/autosuggest/autosuggest.component'; +import { EmojiPickerComponent } from './components/create-status/emoji-picker/emoji-picker.component'; + const routes: Routes = [ - { path: "", redirectTo: "home", pathMatch: "full" }, - { path: "home", component: StreamsMainDisplayComponent }, - { path: "register", component: RegisterNewAccountComponent}, - { path: "**", redirectTo: "home" } + { path: "", redirectTo: "home", pathMatch: "full" }, + { path: "home", component: StreamsMainDisplayComponent }, + { path: "register", component: RegisterNewAccountComponent }, + { path: "**", redirectTo: "home" } ]; @NgModule({ - declarations: [ - AppComponent, - LeftSideBarComponent, - StreamsMainDisplayComponent, - StreamComponent, - StreamsSelectionFooterComponent, - StatusComponent, - RegisterNewAccountComponent, - AccountIconComponent, - FloatingColumnComponent, - ManageAccountComponent, - AddNewStatusComponent, - AttachementsComponent, - SettingsComponent, - AddNewAccountComponent, - SearchComponent, - ActionBarComponent, - WaitingAnimationComponent, - UserProfileComponent, - ThreadComponent, - HashtagComponent, - StreamOverlayComponent, - DatabindedTextComponent, - TimeAgoPipe, - StreamStatusesComponent, - StreamEditionComponent, - TutorialComponent, - NotificationHubComponent, - MediaViewerComponent, - CreateStatusComponent, - MediaComponent, - MyAccountComponent, - FavoritesComponent, - DirectMessagesComponent, - MentionsComponent, - NotificationsComponent, - AccountEmojiPipe, - CardComponent, - ListEditorComponent, - ListAccountComponent, - PollComponent, - TimeLeftPipe, - AutosuggestComponent - ], - imports: [ - FontAwesomeModule, - BrowserModule, - HttpModule, - HttpClientModule, - FormsModule, - RouterModule.forRoot(routes), + declarations: [ + AppComponent, + LeftSideBarComponent, + StreamsMainDisplayComponent, + StreamComponent, + StreamsSelectionFooterComponent, + StatusComponent, + RegisterNewAccountComponent, + AccountIconComponent, + FloatingColumnComponent, + ManageAccountComponent, + AddNewStatusComponent, + AttachementsComponent, + SettingsComponent, + AddNewAccountComponent, + SearchComponent, + ActionBarComponent, + WaitingAnimationComponent, + UserProfileComponent, + ThreadComponent, + HashtagComponent, + StreamOverlayComponent, + DatabindedTextComponent, + TimeAgoPipe, + StreamStatusesComponent, + StreamEditionComponent, + TutorialComponent, + NotificationHubComponent, + MediaViewerComponent, + CreateStatusComponent, + MediaComponent, + MyAccountComponent, + FavoritesComponent, + DirectMessagesComponent, + MentionsComponent, + NotificationsComponent, + AccountEmojiPipe, + CardComponent, + ListEditorComponent, + ListAccountComponent, + PollComponent, + TimeLeftPipe, + AutosuggestComponent, + EmojiPickerComponent + ], + entryComponents: [ + EmojiPickerComponent + ], + imports: [ + FontAwesomeModule, + BrowserModule, + HttpModule, + HttpClientModule, + FormsModule, + PickerModule, + OverlayModule, + RouterModule.forRoot(routes), - NgxsModule.forRoot([ - RegisteredAppsState, - AccountsState, - StreamsState, - SettingsState - ]), - NgxsStoragePluginModule.forRoot(), - ContextMenuModule.forRoot() - ], - providers: [AuthService, NavigationService, NotificationService, MastodonService, StreamingService], - bootstrap: [AppComponent], - schemas: [CUSTOM_ELEMENTS_SCHEMA] + NgxsModule.forRoot([ + RegisteredAppsState, + AccountsState, + StreamsState, + SettingsState + ]), + NgxsStoragePluginModule.forRoot(), + ContextMenuModule.forRoot() + ], + providers: [AuthService, NavigationService, NotificationService, MastodonService, StreamingService], + bootstrap: [AppComponent], + schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class AppModule { } diff --git a/src/app/components/create-status/create-status.component.html b/src/app/components/create-status/create-status.component.html index 3e428c2c..fa6e160f 100644 --- a/src/app/components/create-status/create-status.component.html +++ b/src/app/components/create-status/create-status.component.html @@ -2,12 +2,12 @@ - + -
Error: mentions must be placed closer to the +
Error: mentions must be placed closer to + the start in order to use multiposting.
- Public @@ -59,4 +58,8 @@ - \ No newline at end of file + + + +EMOJI +CLOSE \ No newline at end of file diff --git a/src/app/components/create-status/create-status.component.scss b/src/app/components/create-status/create-status.component.scss index e1a12d88..04f56362 100644 --- a/src/app/components/create-status/create-status.component.scss +++ b/src/app/components/create-status/create-status.component.scss @@ -6,6 +6,8 @@ $btn-send-status-width: 60px; $counter-width: 90px; +// @import "~@ctrl/ngx-emoji-mart/picker"; + .form-control { margin: 0 0 5px 5px; width: calc(100% - 10px); @@ -147,4 +149,21 @@ $counter-width: 90px; left: -3px; font-size: 12px; color: #1f1f1f; -} \ No newline at end of file +} + +.emojipicker { + + font-size: $default-font-size !important; + + + +} + +@import '~@angular/cdk/overlay-prebuilt.css'; +// ::ng-deep .cdk-overlay-backdrop { +// // width: 100%; +// // height: 100%; +// border: 3px solid greenyellow; +// background-color: black; +// min-height: 20px; +// } \ No newline at end of file diff --git a/src/app/components/create-status/create-status.component.ts b/src/app/components/create-status/create-status.component.ts index afe52198..c20b06cb 100644 --- a/src/app/components/create-status/create-status.component.ts +++ b/src/app/components/create-status/create-status.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, OnDestroy, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core'; +import { Component, OnInit, OnDestroy, Input, Output, EventEmitter, ElementRef, ViewChild, ViewContainerRef } from '@angular/core'; import { HttpErrorResponse } from '@angular/common/http'; import { Store } from '@ngxs/store'; import { Subscription, Observable } from 'rxjs'; @@ -16,6 +16,9 @@ import { AccountInfo } from '../../states/accounts.state'; import { InstancesInfoService } from '../../services/instances-info.service'; import { MediaService } from '../../services/media.service'; import { AutosuggestSelection, AutosuggestUserActionEnum } from './autosuggest/autosuggest.component'; +import { Overlay, OverlayConfig, FullscreenOverlayContainer, OverlayRef } from '@angular/cdk/overlay'; +import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal'; +import { EmojiPickerComponent } from './emoji-picker/emoji-picker.component'; @Component({ selector: 'app-create-status', @@ -155,7 +158,9 @@ export class CreateStatusComponent implements OnInit, OnDestroy { private readonly toolsService: ToolsService, private readonly mastodonService: MastodonService, private readonly instancesInfoService: InstancesInfoService, - private readonly mediaService: MediaService) { + private readonly mediaService: MediaService, + private readonly overlay: Overlay, + public viewContainerRef: ViewContainerRef) { this.accounts$ = this.store.select(state => state.registeredaccounts.accounts); } @@ -591,7 +596,7 @@ export class CreateStatusComponent implements OnInit, OnDestroy { } private autoGrow() { - let scrolling = (this.replyElement.nativeElement.scrollHeight); + let scrolling = (this.replyElement.nativeElement.scrollHeight); if (scrolling > 110) { this.replyElement.nativeElement.style.height = `0px`; @@ -609,4 +614,42 @@ export class CreateStatusComponent implements OnInit, OnDestroy { $event.preventDefault(); $event.stopPropagation(); } + + //https://stackblitz.com/edit/overlay-demo + @ViewChild('emojiButton') emojiButtonElement: ElementRef; + overlayRef: OverlayRef; + openEmojiPicker(e: MouseEvent): boolean { + console.warn(e); + + + let config = new OverlayConfig(); + config.positionStrategy = this.overlay.position() + .global() + .left(`${e.pageX}px`) + .top(`${e.pageY}px`); + config.hasBackdrop = true; + + + this.overlayRef = this.overlay.create(config); + this.overlayRef.backdropClick().subscribe(() => { + console.warn('wut?'); + this.overlayRef.dispose(); + }); + + // const filePreviewPortal = ; + //overlayRef.attach(new ComponentPortal(EmojiPickerComponent, this.viewContainerRef)); + // overlayRef.attach(new ComponentPortal(EmojiPickerComponent)); + this.overlayRef.attach(new ComponentPortal(EmojiPickerComponent)); + // overlayRef.backdropClick().subscribe(() => { + // console.warn('wut?'); + // overlayRef.dispose(); + // }); + + return false; + } + + closeEmoji(): boolean { + this.overlayRef.dispose(); + return false; + } } diff --git a/src/app/components/create-status/emoji-picker/emoji-picker.component.html b/src/app/components/create-status/emoji-picker/emoji-picker.component.html new file mode 100644 index 00000000..5fc6cd02 --- /dev/null +++ b/src/app/components/create-status/emoji-picker/emoji-picker.component.html @@ -0,0 +1,2 @@ + \ No newline at end of file diff --git a/src/app/components/create-status/emoji-picker/emoji-picker.component.scss b/src/app/components/create-status/emoji-picker/emoji-picker.component.scss new file mode 100644 index 00000000..fc2af6b6 --- /dev/null +++ b/src/app/components/create-status/emoji-picker/emoji-picker.component.scss @@ -0,0 +1,8 @@ +::ng-deep .emoji-mart { + border-radius: 0 !important; + font-size: 10px !important; +} + +::ng-deep .emoji-mart-emoji-native { + font-size: 16px !important; +} \ No newline at end of file diff --git a/src/app/components/create-status/emoji-picker/emoji-picker.component.spec.ts b/src/app/components/create-status/emoji-picker/emoji-picker.component.spec.ts new file mode 100644 index 00000000..6227ad9d --- /dev/null +++ b/src/app/components/create-status/emoji-picker/emoji-picker.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EmojiPickerComponent } from './emoji-picker.component'; + +xdescribe('EmojiPickerComponent', () => { + let component: EmojiPickerComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ EmojiPickerComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(EmojiPickerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/create-status/emoji-picker/emoji-picker.component.ts b/src/app/components/create-status/emoji-picker/emoji-picker.component.ts new file mode 100644 index 00000000..b15407bd --- /dev/null +++ b/src/app/components/create-status/emoji-picker/emoji-picker.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-emoji-picker', + templateUrl: './emoji-picker.component.html', + styleUrls: ['./emoji-picker.component.scss'] +}) +export class EmojiPickerComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +}