starting working on emoji-picker

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": [

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",

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",

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 { }

src/app/components/create-status/create-status.component.html

@@ -2,12 +2,12 @@
     <input [(ngModel)]="title" type="text" class="form-control form-control-sm status-editor__title" name="title"
         autocomplete="off" placeholder="Title, Content Warning (optional)" title="title, content warning (optional)" />
 
-    <textarea #reply [(ngModel)]="status" name="status"
-        class="form-control form-control-sm status-editor__content" rows="5" required
-        title="content" placeholder="What's in your mind?" (keydown.control.enter)="onCtrlEnter()"
-        (keydown)="handleKeyDown($event)" (blur)="statusTextEditorLostFocus()"></textarea>    
+    <textarea #reply [(ngModel)]="status" name="status" class="form-control form-control-sm status-editor__content"
+        rows="5" required title="content" placeholder="What's in your mind?" (keydown.control.enter)="onCtrlEnter()"
+        (keydown)="handleKeyDown($event)" (blur)="statusTextEditorLostFocus()"></textarea>
 
-    <div class="status-editor__mention-error" *ngIf="mentionTooFarAwayError">Error: mentions must be placed closer to the
+    <div class="status-editor__mention-error" *ngIf="mentionTooFarAwayError">Error: mentions must be placed closer to
+        the
         start in order to use multiposting.</div>
 
     <app-autosuggest class="status-editor__autosuggest" *ngIf="autosuggestData" [pattern]="autosuggestData"
@@ -43,7 +43,6 @@
         </a>
     </div>
 
-
     <context-menu #contextMenu>
         <ng-template contextMenuItem (execute)="changePrivacy('Public')">
             <fa-icon [icon]="faGlobeAmericas" class="context-menu-icon"></fa-icon> Public
@@ -59,4 +58,8 @@
         </ng-template>
     </context-menu>
     <app-media></app-media>
-</form>
+</form>
+
+
+<a #emojiButton href (click)="openEmojiPicker($event)">EMOJI</a>
+<a href (click)="closeEmoji()">CLOSE</a>

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;
-}
+}
+
+.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;
+// }

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;
+    }
 }

src/app/components/create-status/emoji-picker/emoji-picker.component.html

@@ -0,0 +1,2 @@
+<emoji-mart [showPreview]="false" [perLine]="7" [isNative]="true" [sheetSize]="16"
+class="emojipicker" title="Pick your emoji…" emoji="point_up"></emoji-mart>

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;
+}

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<EmojiPickerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EmojiPickerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EmojiPickerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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() {
+  }
+
+}