src/app/common/common.module.ts

@@ -53,12 +53,12 @@ import { DropdownComponent } from './components/dropdown/dropdown.component';
 
 import { DynamicHostDirective } from './directives/dynamic-host.directive';
 import { MindsCard } from './components/card/card.component';
-import { MindsButton } from './components/button/button.component';
+import { MindsButton } from './components/button-v1/button.component';
 import { OverlayModalComponent } from './components/overlay-modal/overlay-modal.component';
 
 import { ChartComponent } from './components/chart/chart.component';
 import { DateSelectorComponent } from './components/date-selector/date-selector.component';
-import { AdminActionsButtonComponent } from './components/button/admin-actions/admin-actions.component';
+import { AdminActionsButtonComponent } from './components/button-v1/admin-actions/admin-actions.component';
 import { InlineEditorComponent } from './components/editors/inline-editor.component';
 import { AttachmentService } from '../services/attachment';
 import { MaterialBoundSwitchComponent } from './components/material/bound-switch.component';
@@ -146,6 +146,7 @@ import { FormInputCheckboxComponent } from './components/forms/checkbox/checkbox
 import { AttachmentPasteDirective } from './directives/paste/attachment-paste.directive';
 import { FileUploadComponent } from './components/file-upload/file-upload.component';
 import { IconComponent } from './components/icon/icon.component';
+import { ButtonComponent } from './components/button-v2/button.component';
 
 const routes: Routes = [
   {
@@ -275,6 +276,7 @@ const routes: Routes = [
     FormInputCheckboxComponent,
     FileUploadComponent,
     IconComponent,
+    ButtonComponent,
   ],
   exports: [
     MINDS_PIPES,
@@ -380,6 +382,7 @@ const routes: Routes = [
     FormInputCheckboxComponent,
     FileUploadComponent,
     IconComponent,
+    ButtonComponent,
   ],
   providers: [
     SiteService,

src/app/common/components/button-v2/button.component.html

+<a> </a>

src/app/common/components/button-v2/button.component.scss

+m-button {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  //m-button__
+}

src/app/common/components/button-v2/button.component.ts

+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  TemplateRef,
+} from '@angular/core';
+
+export interface ButtonComponentAction {
+  type: string;
+}
+
+@Component({
+  selector: 'm-button',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: 'button.component.html',
+})
+export class ButtonComponent {
+  @Input() dropdown: TemplateRef<any>;
+  @Output() onAction: EventEmitter<ButtonComponentAction> = new EventEmitter<
+    ButtonComponentAction
+  >();
+}

src/app/common/components/file-upload/file-upload.component.html

@@ -4,7 +4,9 @@
     type="file"
     [id]="id"
     [name]="id"
-    (change)="onSelect(file, $event)"
+    [multiple]="multiple"
+    [accept]="accept"
+    (change)="onSelect(file)"
     #file
   />
 </label>

src/app/common/components/file-upload/file-upload.component.ts

-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core';
 import { UniqueId } from '../../../helpers/unique-id.helper';
 
+export type FileUploadSelectEvent = File | File[];
+
 @Component({
   selector: 'm-file-upload',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -8,7 +16,24 @@ import { UniqueId } from '../../../helpers/unique-id.helper';
 })
 export class FileUploadComponent {
   @Input() wrapperClass: string = '';
+  @Input() accept: string = '*.*';
+  @Input() multiple: boolean = false;
+  @Output('onSelect') onSelectEmitter: EventEmitter<
+    FileUploadSelectEvent
+  > = new EventEmitter<FileUploadSelectEvent>();
+
   id: string = UniqueId.generate('m-file-upload');
 
-  onSelect(file, $event) {}
+  onSelect(file: HTMLInputElement): void {
+    if (!file || !file.files) {
+      this.onSelectEmitter.next(this.multiple ? [] : null);
+      return;
+    }
+
+    if (this.multiple) {
+      this.onSelectEmitter.next(Array.from(file.files));
+    } else {
+      this.onSelectEmitter.next(file.files[0] || null);
+    }
+  }
 }

src/app/modules/composer/composer.component.html

@@ -16,11 +16,19 @@
         i18n-placeholder
         [id]="id"
         (focus)="popOut()"
+        [ngModel]="service.message$ | async"
+        (ngModelChange)="service.message$.next($event)"
       ></textarea>
     </div>
 
+    <pre>{{ service.stream$ | async | json }}</pre>
+
     <div class="m-composer__toolBar">
-      <m-file-upload wrapperClass="m-composerToolbar__item">
+      <m-file-upload
+        wrapperClass="m-composerToolbar__item"
+        accept="image/*,video/*"
+        (onSelect)="service.attachment$.next($event)"
+      >
         <m-icon from="ion" iconId="image"></m-icon>
         <span>Upload</span>
       </m-file-upload>
@@ -40,9 +48,14 @@
         <span>Tag</span>
       </a>
 
-      <div class="m-composerToolbar__item">
+      <m-button [dropdown]="postButtonDropdown" (onAction)="onPost($event)">
         Post
-      </div>
+      </m-button>
+      <ng-template #postButtonDropdown>
+        <ul>
+          <li></li>
+        </ul>
+      </ng-template>
     </div>
   </div>
 </div>

src/app/modules/composer/composer.component.scss

@@ -33,7 +33,7 @@ m-composer {
     border-radius: 5px;
 
     @include m-theme() {
-      background: themed($m-secondary-bg);
+      background: themed($m-bgColor--primary);
     }
   }
 
@@ -67,7 +67,7 @@ m-composer {
     }
 
     @include m-theme() {
-      color: themed($m-primary-text);
+      color: themed($m-textColor--primary);
     }
   }
   .m-composerTitleBar__menuButton {
@@ -81,7 +81,7 @@ m-composer {
       font-size: 20px;
 
       @include m-theme() {
-        color: themed($m-primary-border);
+        color: themed($m-borderColor--primary);
       }
     }
   }
@@ -114,7 +114,7 @@ m-composer {
       }
 
       @include m-theme() {
-        color: themed($m-secondary-text);
+        color: themed($m-textColor--secondary);
       }
     }
   }
@@ -129,7 +129,7 @@ m-composer {
     user-select: none;
 
     @include m-theme() {
-      border-color: themed($m-primary-border);
+      border-color: themed($m-borderColor--primary);
     }
 
     .m-composerToolbar__item {
@@ -139,7 +139,7 @@ m-composer {
       padding: 8px 16px;
 
       @include m-theme() {
-        color: themed($m-secondary-text);
+        color: themed($m-textColor--secondary);
       }
 
       > m-icon + span {

src/app/modules/composer/composer.component.ts

-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
 import { UniqueId } from '../../helpers/unique-id.helper';
+import { ButtonComponentAction } from '../../common/components/button-v2/button.component';
+import { ComposerService } from './composer.service';
+import { FileUploadSelectEvent } from '../../common/components/file-upload/file-upload.component';
 
 @Component({
   selector: 'm-composer',
+  providers: [ComposerService],
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: 'composer.component.html',
 })
-export class ComposerComponent {
+export class ComposerComponent implements OnInit, OnDestroy {
   id: string = UniqueId.generate('m-composer');
-
   poppedOut: boolean = false;
 
+  constructor(public service: ComposerService) {}
+
+  ngOnInit(): void {}
+
+  ngOnDestroy(): void {}
+
+  onPost($event: ButtonComponentAction) {}
+
   popOut() {
     // this.poppedOut = true;
   }
 }
+
+// use combineLatest with

src/app/modules/composer/composer.module.ts

 import { NgModule } from '@angular/core';
+import { CommonModule as NgCommonModule } from '@angular/common';
 import { ComposerComponent } from './composer.component';
 import { CommonModule } from '../../common/common.module';
+import { FormsModule } from '@angular/forms';
 
 /**
  * Exported components
@@ -16,7 +18,7 @@ const INTERNAL_COMPONENTS = [];
  * Module definition
  */
 @NgModule({
-  imports: [CommonModule],
+  imports: [NgCommonModule, FormsModule, CommonModule],
   declarations: [...INTERNAL_COMPONENTS, ...COMPONENTS],
   exports: COMPONENTS,
 })

src/app/modules/composer/composer.service.ts

+import { Injectable } from '@angular/core';
+import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Injectable()
+export class ComposerService {
+  // TODO: TYPES!!!
+  readonly message$: BehaviorSubject<any> = new BehaviorSubject<any>(null);
+  readonly attachment$: BehaviorSubject<any> = new BehaviorSubject<any>(null);
+  readonly nsfw$: BehaviorSubject<any> = new BehaviorSubject<any>(null);
+  readonly monetization$: BehaviorSubject<any> = new BehaviorSubject<any>(null);
+  readonly scheduler$: BehaviorSubject<any> = new BehaviorSubject<any>(null);
+  readonly stream$: Observable<any>;
+
+  constructor() {
+    this.stream$ = combineLatest([
+      this.message$,
+      this.attachment$,
+      this.nsfw$,
+      this.monetization$,
+      this.scheduler$,
+    ]).pipe(
+      map(([message, attachment, nsfw, monetization, scheduler]) => ({
+        message,
+        attachment,
+        nsfw,
+        monetization,
+        scheduler,
+      }))
+    );
+  }
+}

src/stylesheets/themes.scss

@@ -85,15 +85,24 @@ $twitter: #03b3ee;
 $whatsapp: #25d366;
 $linkedin: #0071a1;
 
-$alert: #e03c20;
-$link: #1b85d6;
-$primary-button: #5dbac0;
-
 // Theme maps
 // e.g. m-grey-100 in light mode will become m-grey-900 in dark mode
 $themes: (
   light: (
-    m-grey-950: $grey-950,
+    m-textColor--primary: #4f4f50,
+    m-textColor--secondary: #7d7d82,
+    m-textColor--tertiary: #9b9b9b,
+    m-bgColor--primary: #ffffff,
+    m-bgColor--secondary: #f5f5f5,
+    m-bgColor--tertiary: #e3e4e9,
+    m-borderColor--primary: #dce2e4,
+    m-borderColor--secondary: #979797,
+    m-borderColor--tertiary: #ececec,
+    m-alert: #e03c20,
+    m-link: #1b85d6,
+    m-btn--primary: #1b85d6,
+    // legacy colors
+      m-grey-950: $grey-950,
     m-grey-900: $grey-900,
     m-grey-800: $grey-800,
     m-grey-700: $grey-700,
@@ -146,18 +155,22 @@ $themes: (
     m-twitter: $twitter,
     m-whatsapp: $whatsapp,
     m-linkedin: $linkedin,
-    // 2020 Design Palette
-      m-primary-text: #4f4f50,
-    m-secondary-text: #7d7d82,
-    m-primary-bg: #f5f5f5,
-    m-secondary-bg: #ffffff,
-    m-primary-border: #dce2e4,
-    m-alert: $alert,
-    m-link: $link,
-    m-primary-button: $primary-button,
   ),
   dark: (
-    m-grey-950: lighten($grey-50, $percent),
+    m-textColor--primary: #ffffff,
+    m-textColor--secondary: #aeb0b8,
+    m-textColor--tertiary: #797b82,
+    m-bgColor--primary: #252e31,
+    m-bgColor--secondary: #202527,
+    m-bgColor--tertiary: #404e53,
+    m-borderColor--primary: #404a4e,
+    m-borderColor--secondary: #979797,
+    m-borderColor--tertiary: #202527,
+    m-alert: #e03c20,
+    m-link: #1b85d6,
+    m-btn--primary: #1b85d6,
+    // legacy colors
+      m-grey-950: lighten($grey-50, $percent),
     m-grey-900: lighten($grey-100, $percent),
     m-grey-800: lighten($grey-200, $percent),
     m-grey-700: lighten($grey-300, $percent),
@@ -210,15 +223,6 @@ $themes: (
     m-twitter: $twitter,
     m-whatsapp: $whatsapp,
     m-linkedin: $linkedin,
-    // 2020 Design Palette
-      m-primary-text: #ffffff,
-    m-secondary-text: #aeb0b8,
-    m-primary-bg: #252e31,
-    m-secondary-bg: #202527,
-    m-primary-border: #404a4e,
-    m-alert: $alert,
-    m-link: $link,
-    m-primary-button: $primary-button,
   ),
 );
 
@@ -283,11 +287,19 @@ $m-twitter: 'm-twitter';
 $m-whatsapp: 'm-whatsapp';
 $m-linkedin: 'm-linkedin';
 
-$m-primary-text: 'm-primary-text';
-$m-secondary-text: 'm-secondary-text';
-$m-primary-bg: 'm-primary-bg';
-$m-secondary-bg: 'm-secondary-bg';
-$m-primary-border: 'm-primary-border';
+$m-textColor--primary: 'm-textColor--primary';
+$m-textColor--secondary: 'm-textColor--secondary';
+$m-textColor--tertiary: 'm-textColor--tertiary';
+$m-bgColor--primary: 'm-bgColor--primary';
+$m-bgColor--secondary: 'm-bgColor--secondary';
+$m-bgColor--tertiary: 'm-bgColor--tertiary';
+$m-borderColor--primary: 'm-borderColor--primary';
+$m-borderColor--secondary: 'm-borderColor--secondary';
+$m-borderColor--tertiary: 'm-borderColor--tertiary';
 $m-alert: 'm-alert';
 $m-link: 'm-link';
-$m-primary-button: 'm-primary-button';
+$m-btn--primary: 'm-btn--primary';
+
+$m-borderRadius: 2px;
+$m-boxShadowBlur: 10px;
+$m-boxShadowOffset: 2px;