Skip to content

Commit 7f045e5

Browse files
author
Mark Harding
committed
Merge branch 'feat/emoji-picker-563' into 'master'
Feat/emoji picker 563 See merge request minds/front!1770
2 parents 6b60008 + 5c83172 commit 7f045e5

19 files changed

Lines changed: 1230 additions & 803 deletions

‎angular.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@
8181
"node_modules/material-design-lite/dist/material.blue_grey-amber.min.css",
8282
"node_modules/plyr/dist/plyr.css",
8383
"node_modules/highlight.js/styles/github.css",
84+
"node_modules/@ctrl/ngx-emoji-mart/picker.css",
8485
"src/main.css"
8586
],
8687
"scripts": [

‎package-lock.json‎

Lines changed: 863 additions & 799 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
"@angular/router": "~12.1.2",
4141
"@bhayward93/ckeditor5-build-minds": "^1.1.8",
4242
"@ckeditor/ckeditor5-angular": "^2.0.2",
43+
"@ctrl/ngx-emoji-mart": "^6.2.0",
4344
"@danielmoncada/angular-datetime-picker": "^12.0.0",
4445
"@growthbook/growthbook": "^0.16.1",
4546
"@mindsorg/ngx-universal": "^2.3.0",

‎src/app/common/common.module.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,6 +197,7 @@ import { AutofocusDirective } from './directives/autofocus.directive';
197197
import { SidebarMoreComponent } from './layout/sidebar-more/sidebar-more.component';
198198
import { SidebarMoreTriggerComponent } from './layout/sidebar-more/sidebar-more-trigger/sidebar-more-trigger.component';
199199
import { TagSelectorComponent } from './components/tag-selector/tag-selector.component';
200+
200201
import { ModalCloseButtonComponent } from './components/modal-close-button/modal-close-button.component';
201202
import { BlurhashDirective } from './directives/blurhash/blurhash.directive';
202203

‎src/app/common/components/emoji-picker/emoji-picker.component.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<div
2+
[popper]="popper"
3+
[popperPlacement]="'bottom'"
4+
[popperTrigger]="'click'"
5+
[popperModifiers]="popperModifiers"
6+
(popperOnShown)="onShowSelector()"
7+
(popperOnHidden)="onHideSelector()"
8+
>
9+
<i class="m-emojiPicker__icon material-icons">insert_emoticon</i>
10+
</div>
11+
12+
<popper-content #popper>
13+
<div class="m-emojiPicker__placeholder">
14+
<ng-template #emojiPickerOutlet></ng-template>
15+
</div>
16+
</popper-content>

‎src/app/common/components/emoji-picker/emoji-picker.component.scss‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
@import 'defaults.scss';
2+
3+
m-emojiPicker {
4+
text-align: left !important;
5+
6+
.emoji-mart-emoji,
7+
.emoji-mart-emoji span {
8+
cursor: pointer !important;
9+
}
10+
11+
.ngxp__container {
12+
border: none;
13+
padding: 0;
14+
z-index: 5;
15+
16+
.ngxp__arrow:before {
17+
@include m-theme() {
18+
background-color: themed($m-borderColor--primary);
19+
}
20+
}
21+
22+
.emoji-mart:not(.emoji-mart-dark) {
23+
border: none;
24+
}
25+
}
26+
27+
/*
28+
* Dark mode styles
29+
*/
30+
.emoji-mart-dark {
31+
@include m-theme() {
32+
color: themed($m-textColor--primary);
33+
border-color: themed($m-borderColor--primary);
34+
background-color: themed($m-bgColor--primary);
35+
}
36+
}
37+
38+
.emoji-mart-dark .emoji-mart-bar {
39+
@include m-theme() {
40+
border-color: themed($m-borderColor--primary);
41+
}
42+
}
43+
44+
.emoji-mart-dark .emoji-mart-search input {
45+
@include m-theme() {
46+
color: themed($m-textColor--primary);
47+
border-color: themed($m-borderColor--primary);
48+
background-color: themed($m-bgColor--secondary);
49+
}
50+
}
51+
52+
.emoji-mart-dark .emoji-mart-category .emoji-mart-emoji:hover:before {
53+
@include m-theme() {
54+
background-color: themed($m-bgColor--secondary);
55+
}
56+
}
57+
58+
.emoji-mart-dark .emoji-mart-category-label span {
59+
@include m-theme() {
60+
color: themed($m-textColor--primary);
61+
background-color: themed($m-bgColor--primary);
62+
}
63+
}
64+
65+
.emoji-mart-dark .emoji-mart-skin-swatches {
66+
@include m-theme() {
67+
border-color: themed($m-borderColor--primary);
68+
background-color: themed($m-bgColor--secondary);
69+
}
70+
}
71+
72+
.emoji-mart-search input {
73+
padding: 5px 25px 5px 10px;
74+
}
75+
76+
.emoji-mart-search-icon {
77+
top: 6px;
78+
}
79+
80+
.emoji-mart-preview {
81+
height: 50px;
82+
83+
.emoji-mart-title-label {
84+
font-size: 16px;
85+
}
86+
87+
.emoji-mart-preview-emoji .emoji-mart-emoji > span {
88+
font-size: 30px !important;
89+
}
90+
91+
.emoji-mart-preview-shortname {
92+
display: none;
93+
}
94+
}
95+
}
96+
97+
.m-emojiPicker__icon {
98+
cursor: pointer;
99+
transition: opacity 0.3s;
100+
101+
@include m-theme() {
102+
color: themed($m-textColor--secondary);
103+
}
104+
105+
&:hover {
106+
opacity: 0.7;
107+
}
108+
}
109+
110+
.m-emojiPicker__placeholder {
111+
height: 400px;
112+
}

‎src/app/common/components/emoji-picker/emoji-picker.component.ts‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import { ThemeService } from './../../services/theme.service';
2+
import {
3+
Component,
4+
Output,
5+
EventEmitter,
6+
ViewChild,
7+
Compiler,
8+
Injector,
9+
ChangeDetectorRef,
10+
ComponentFactoryResolver,
11+
ViewContainerRef,
12+
} from '@angular/core';
13+
import { NgxPopperjsContentComponent } from 'ngx-popperjs';
14+
import { Subscription } from 'rxjs';
15+
16+
@Component({
17+
selector: 'm-emojiPicker',
18+
templateUrl: './emoji-picker.component.html',
19+
})
20+
export class EmojiPickerComponent {
21+
popperPlacement: string = 'bottom';
22+
showSelector = false;
23+
24+
@ViewChild('emojiPickerOutlet', { read: ViewContainerRef })
25+
emojiPickerOutlet: ViewContainerRef;
26+
27+
/**
28+
* On Post event emitter
29+
*/
30+
@Output('emojiSelect') emojiSelectEmitter: EventEmitter<
31+
any
32+
> = new EventEmitter();
33+
popperModifiers: Array<any> = [];
34+
@ViewChild('popper') popper: NgxPopperjsContentComponent;
35+
36+
onSelectSubscription: Subscription;
37+
38+
constructor(
39+
public themeService: ThemeService,
40+
private compiler: Compiler,
41+
private injector: Injector,
42+
private cd: ChangeDetectorRef,
43+
private componentFactoryResolver: ComponentFactoryResolver
44+
) {}
45+
46+
emojiSelect($event) {
47+
this.emojiSelectEmitter.emit($event.emoji);
48+
this.popper?.hide();
49+
}
50+
51+
onShowSelector() {
52+
this.showSelector = true;
53+
this.detectChanges();
54+
this.loadEmojiMartComponent();
55+
}
56+
57+
onHideSelector() {
58+
this.showSelector = false;
59+
this.detectChanges();
60+
}
61+
62+
/**
63+
* Asyncronously loads in the emoji mark module
64+
*/
65+
async loadEmojiMartComponent() {
66+
// Import our module
67+
const { PickerComponent } = await import('@ctrl/ngx-emoji-mart');
68+
69+
// const moduleFactory = await this.compiler.compileModuleAsync(PickerModule);
70+
// const moduleRef = moduleFactory.create(this.injector);
71+
72+
// Resolves the available components
73+
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
74+
PickerComponent
75+
);
76+
77+
if (!this.emojiPickerOutlet) {
78+
console.error('Could not find emoji picker outlet');
79+
}
80+
81+
// Clear previous component
82+
this.emojiPickerOutlet.clear();
83+
84+
// Attach the component
85+
const componentRef = this.emojiPickerOutlet.createComponent(
86+
componentFactory
87+
);
88+
89+
componentRef.instance.autoFocus = true;
90+
componentRef.instance.isNative = true;
91+
componentRef.instance.title = 'Pick your emoji…';
92+
componentRef.instance.emoji = 'point_up';
93+
componentRef.instance.color = '#1b85d6';
94+
componentRef.instance.darkMode = this.themeService.isDark$.getValue();
95+
96+
this.onSelectSubscription?.unsubscribe();
97+
98+
this.onSelectSubscription = componentRef.instance.emojiSelect.subscribe(
99+
event => {
100+
this.emojiSelect(event);
101+
}
102+
);
103+
104+
// Trigger change detection
105+
this.detectChanges();
106+
}
107+
108+
ngOnDestroy() {
109+
this.onSelectSubscription?.unsubscribe();
110+
}
111+
112+
detectChanges() {
113+
this.cd.markForCheck();
114+
this.cd.detectChanges();
115+
}
116+
}

‎src/app/common/components/emoji-picker/emoji-picker.module.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { CommonModule as NgCommonModule } from '@angular/common';
2+
import { NgModule } from '@angular/core';
3+
import { CommonModule } from '../../common.module';
4+
import { EmojiPickerComponent } from './emoji-picker.component';
5+
6+
@NgModule({
7+
imports: [CommonModule, NgCommonModule],
8+
declarations: [EmojiPickerComponent],
9+
exports: [EmojiPickerComponent],
10+
})
11+
export class EmojiPickerModule {}

‎src/app/modules/comments/comments.component.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949

5050
.m-commentPoster__form {
5151
flex-grow: 2;
52-
max-width: calc(100% - 130px);
52+
max-width: calc(100% - 160px);
5353
margin-block-end: 0;
5454
minds-textarea {
5555
padding: 0;
@@ -86,7 +86,8 @@
8686
margin: 3px 10px 0;
8787
}
8888
.m-dropdown--v2 {
89-
margin: 0;
89+
margin: 0 $minds-margin;
90+
9091
.m-commentPoster__menuButton {
9192
i {
9293
font-size: 23px;

‎src/app/modules/comments/comments.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { CommentsService } from './comments.service';
1717
import { TextInputAutocompleteModule } from '../../common/components/autocomplete';
1818
import { CodeHighlightModule } from '../code-highlight/code-highlight.module';
1919
import { CommentsEntityOutletComponent } from './entity-outlet/entity-outlet.component';
20+
import { EmojiPickerModule } from '../../common/components/emoji-picker/emoji-picker.module';
2021

2122
@NgModule({
2223
imports: [
@@ -29,6 +30,7 @@ import { CommentsEntityOutletComponent } from './entity-outlet/entity-outlet.com
2930
ModalsModule,
3031
TextInputAutocompleteModule,
3132
CodeHighlightModule,
33+
EmojiPickerModule,
3234
],
3335
declarations: [
3436
CommentsScrollDirective,

0 commit comments

Comments
 (0)