feat: pinned toolbars

juanfran · Jan 22, 2025 · 1784868 · 1784868
1 parent ae47594
commit 1784868
Show file tree

Hide file tree

Showing 11 changed files with 185 additions and 62 deletions.
diff --git a/apps/web/src/app/modules/board/actions/board-page.actions.ts b/apps/web/src/app/modules/board/actions/board-page.actions.ts
@@ -42,6 +42,7 @@ export const BoardPageActions = createActionGroup({
     Redo: emptyProps(),
     'Toggle user highlight': props<{ id: User['id'] }>(),
     'Set popup open': props<{ popup: string }>(),
+    'Set popup pinned': props<{ pinned: boolean }>(),
     'Ready to vote': emptyProps(),
     'Board not found': props<{ id: BoardUser['id'] }>(),
     'Select emoji': props<{ emoji: NativeEmoji }>(),

diff --git a/apps/web/src/app/modules/board/components/board-toolbar/board-toolbar.component.html b/apps/web/src/app/modules/board/components/board-toolbar/board-toolbar.component.html
@@ -79,58 +79,62 @@
 </div>
 
 @defer (prefetch on idle) {
-  <div class="toolbar-container">
-    @if (popup() === 'token') {
-      <tapiz-token-selector
-        (selectToken)="tokenSelected($event)"
-        class="toolbar-popup">
-      </tapiz-token-selector>
-    }
-
-    @if (popup() === 'tools') {
-      <tapiz-tools
-        (selectedTool)="toolsEvent($event)"
-        class="toolbar-popup">
-      </tapiz-tools>
-    }
-
-    @if (popup() === 'note') {
-      <tapiz-notes
-        class="toolbar-popup"
-        [(noteColor)]="noteColor">
-      </tapiz-notes>
-    }
-
-    @if (popup() === 'emoji') {
-      <emoji-picker
-        (emoji-click)="emojiSelected($event)"
-        class="light toolbar-popup">
-      </emoji-picker>
-    }
-
-    @if (popup() === 'templates') {
-      <tapiz-template-selector
-        (selected)="seletedTemplate()"
-        class="toolbar-popup">
-      </tapiz-template-selector>
-    }
-
-    @if (popup() === 'cocomaterial') {
-      <tapiz-cocomaterial class="toolbar-popup"></tapiz-cocomaterial>
-    }
-
-    @if (popup() === 'live-reaction') {
-      <tapiz-live-reaction class="toolbar-popup"></tapiz-live-reaction>
-    }
-
-    @if (popup() === 'image') {
-      <tapiz-add-image
-        class="toolbar-popup"
-        (newImageUrl)="newImageUrl($event)"
-        (newImageFile)="newImageFile($event)">
-      </tapiz-add-image>
-    }
-  </div>
+  @if (showPopup()) {
+    <div class="toolbar-container">
+      <div class="toolbar-popup">
+        @if (showPin()) {
+          <div class="toolbar-pinned">
+            <div class="pinned-wrapper">
+              <button
+                mat-icon-button
+                type="button"
+                [title]="pinned() ? 'Unpin' : 'Pin'"
+                (click)="togglePinned()">
+                @if (pinned()) {
+                  <lucide-icon [img]="icons.pinOff"></lucide-icon>
+                } @else {
+                  <lucide-icon [img]="icons.pin"></lucide-icon>
+                }
+              </button>
+            </div>
+          </div>
+        }
+
+        @switch (popup()) {
+          @case ('token') {
+            <tapiz-token-selector (selectToken)="tokenSelected($event)" />
+          }
+          @case ('tools') {
+            <tapiz-tools (selectedTool)="toolsEvent($event)" />
+          }
+          @case ('note') {
+            <tapiz-notes [(noteColor)]="noteColor" />
+          }
+          @case ('emoji') {
+            <emoji-picker
+              (emoji-click)="emojiSelected($event)"
+              class="light" />
+          }
+          @case ('templates') {
+            <tapiz-template-selector (selected)="seletedTemplate()" />
+          }
+          @case ('cocomaterial') {
+            <tapiz-cocomaterial
+              (cocomaterialSelected)="cocomaterialSelected()" />
+          }
+          @case ('live-reaction') {
+            <tapiz-live-reaction (reactionSelected)="reactionSelected()" />
+          }
+          @case ('image') {
+            <tapiz-add-image
+              class="toolbar-popup"
+              (newImageUrl)="newImageUrl($event)"
+              (newImageFile)="newImageFile($event)" />
+          }
+        }
+      </div>
+    </div>
+  }
 }
 
 <ng-template #noteButton>

diff --git a/apps/web/src/app/modules/board/components/board-toolbar/board-toolbar.component.scss b/apps/web/src/app/modules/board/components/board-toolbar/board-toolbar.component.scss
@@ -44,3 +44,8 @@ hr {
   padding: var(--spacing-4);
   box-shadow: 0 0 15px 3px rgba(66, 62, 82, 0.1);
 }
+
+.toolbar-pinned {
+  justify-items: end;
+  padding-block-end: var(--spacing-2);
+}
diff --git a/apps/web/src/app/modules/board/components/board-toolbar/board-toolbar.component.ts b/apps/web/src/app/modules/board/components/board-toolbar/board-toolbar.component.ts
@@ -5,6 +5,7 @@ import {
   inject,
   signal,
   HostListener,
+  computed,
 } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { BoardActions } from '../../actions/board.actions';
@@ -45,6 +46,9 @@ import { ToolsComponent } from '../tools/tools.component';
 import { defaultNoteColor } from '../note';
 import { NgTemplateOutlet } from '@angular/common';
 import { BoardToolbardButtonComponent } from './components/board-toolboard-button.component';
+import { LucideAngularModule, Pin, PinOff } from 'lucide-angular';
+
+export class AppModule {}
 @Component({
   selector: 'tapiz-board-toolbar',
   templateUrl: './board-toolbar.component.html',
@@ -63,6 +67,7 @@ import { BoardToolbardButtonComponent } from './components/board-toolboard-butto
     ToolsComponent,
     NgTemplateOutlet,
     BoardToolbardButtonComponent,
+    LucideAngularModule,
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   providers: [HotkeysService],
@@ -76,10 +81,44 @@ export class BoardToolbarComponent {
   #zoneService = inject(ZoneService);
   #fileUploadService = inject(FileUploadService);
 
+  icons = {
+    pin: Pin,
+    pinOff: PinOff,
+  };
+
   toolbarSubscription?: Subscription;
   boardMode = this.#store.selectSignal(boardPageFeature.selectBoardMode);
   popup = this.#store.selectSignal(boardPageFeature.selectPopupOpen);
+  pinned = this.#store.selectSignal(boardPageFeature.selectPopupPinned);
   noteColor = signal<string>(defaultNoteColor);
+  showPopup = computed(() => {
+    const withPopup = [
+      'token',
+      'tools',
+      'note',
+      'emoji',
+      'templates',
+      'cocomaterial',
+      'live-reaction',
+      'image',
+    ];
+
+    return withPopup.includes(this.popup());
+  });
+
+  showPin = computed(() => {
+    const withPin = [
+      'token',
+      'note',
+      'emoji',
+      'templates',
+      'cocomaterial',
+      'live-reaction',
+      'image',
+    ];
+
+    return withPin.includes(this.popup());
+  });
 
   @HostListener('document:keydown.alt', ['$event']) selectAreaShortcut(
     e: KeyboardEvent,
@@ -213,19 +252,29 @@ export class BoardToolbarComponent {
   }
 
   note() {
+    const createNote = () => {
+      console.log('create note');
+      this.toolbarSubscription = this.#zoneService
+        .select()
+        .subscribe(({ userId, position }) => {
+          this.#notesService.createNote(userId, position, this.noteColor());
+
+          if (!this.pinned()) {
+            this.popupOpen('');
+          } else {
+            createNote();
+          }
+        });
+    };
+
     if (this.popup() === 'note') {
       this.popupOpen('');
       return;
     }
 
     this.popupOpen('note');
 
-    this.toolbarSubscription = this.#zoneService
-      .select()
-      .subscribe(({ userId, position }) => {
-        this.#notesService.createNote(userId, position, this.noteColor());
-        this.popupOpen('');
-      });
+    createNote();
   }
 
   select() {
@@ -410,6 +459,7 @@ export class BoardToolbarComponent {
   }
 
   emojiSelected(emojiEvent: EmojiClickEvent) {
+    console.log(emojiEvent);
     this.#store.dispatch(
       BoardPageActions.selectEmoji({
         emoji: emojiEvent.detail.emoji as NativeEmoji,
@@ -466,7 +516,9 @@ export class BoardToolbarComponent {
     this.toolbarSubscription = this.#zoneService
       .select()
       .subscribe(({ position }) => {
-        this.popupOpen('');
+        if (!this.pinned()) {
+          this.popupOpen('');
+        }
 
         const tokenContent: Token = {
           ...token,
@@ -543,6 +595,14 @@ export class BoardToolbarComponent {
     this.popupOpen('');
   }
 
+  togglePinned() {
+    this.#store.dispatch(
+      BoardPageActions.setPopupPinned({
+        pinned: this.pinned() ? false : true,
+      }),
+    );
+  }
+
   templateSelector() {
     if (this.popup() === 'templates') {
       this.popupOpen('');
@@ -553,6 +613,20 @@ export class BoardToolbarComponent {
   }
 
   seletedTemplate() {
-    this.popupOpen('');
+    if (!this.pinned()) {
+      this.popupOpen('');
+    }
+  }
+
+  cocomaterialSelected() {
+    if (!this.pinned()) {
+      this.popupOpen('');
+    }
+  }
+
+  reactionSelected() {
+    if (!this.pinned()) {
+      this.popupOpen('');
+    }
   }
 }
diff --git a/apps/web/src/app/modules/board/components/cocomaterial/cocomaterial.component.scss b/apps/web/src/app/modules/board/components/cocomaterial/cocomaterial.component.scss
@@ -1,6 +1,6 @@
 :host {
   display: block;
-  padding: var(--spacing-4);
+  padding: 0 var(--spacing-4) var(--spacing-4) var(--spacing-4);
   inline-size: 495px;
 }
 

diff --git a/apps/web/src/app/modules/board/components/cocomaterial/cocomaterial.component.ts b/apps/web/src/app/modules/board/components/cocomaterial/cocomaterial.component.ts
@@ -6,6 +6,7 @@ import {
   computed,
   inject,
   signal,
+  output,
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
@@ -56,6 +57,7 @@ export class CocomaterialComponent {
   #boardMoveService = inject(BoardMoveService);
   #nodesActions = inject(NodesActions);
   tagInput = viewChild.required<ElementRef<HTMLInputElement>>('tagInput');
+  cocomaterialSelected = output<CocomaterialApiVector | null>();
 
   boardMode = this.#store.selectSignal(boardPageFeature.selectBoardMode);
 
@@ -197,6 +199,8 @@ export class CocomaterialComponent {
           ],
         }),
       );
+
+      this.cocomaterialSelected.emit(vector);
     }
   }
 

diff --git a/apps/web/src/app/modules/board/components/live-reaction/live-reaction.component.ts b/apps/web/src/app/modules/board/components/live-reaction/live-reaction.component.ts
@@ -3,6 +3,7 @@ import {
   Component,
   computed,
   inject,
+  output,
   signal,
 } from '@angular/core';
 import { BoardMoveService } from '../../services/board-move.service';
@@ -66,6 +67,8 @@ export class LiveReactionComponent {
   #http = inject(HttpClient);
   selected = signal<string>('');
 
+  reactionSelected = output<string>();
+
   category = signal('Smilies');
 
   normalizedCategory = computed(() => {
@@ -158,6 +161,8 @@ export class LiveReactionComponent {
           x: data.position.x - 50,
           y: data.position.y - 50,
         });
+
+        this.reactionSelected.emit(this.selected());
       });
   }
 

diff --git a/apps/web/src/app/modules/board/components/note/note.component.ts b/apps/web/src/app/modules/board/components/note/note.component.ts
@@ -36,6 +36,7 @@ import { NoteHeightCalculatorService } from './components/note-height-calculator
 import { defaultNoteColor } from '.';
 import { BoardFacade } from '../../../../services/board-facade.service';
 import { boardPageFeature } from '../../reducers/boardPage.reducer';
+import { BoardPageActions } from '../../actions/board-page.actions';
 
 @Component({
   selector: 'tapiz-note',
@@ -84,6 +85,7 @@ export class NoteComponent {
   #activeToolbarOption = this.#store.selectSignal(
     boardPageFeature.selectPopupOpen,
   );
+  #toolbarPinned = this.#store.selectSignal(boardPageFeature.selectPopupPinned);
   #mentions = this.#store.selectSignal(boardPageFeature.selectMentions);
   #emoji = this.#store.selectSignal(boardPageFeature.selectEmoji);
   #userHighlight = this.#store.selectSignal(
@@ -577,6 +579,10 @@ export class NoteComponent {
         }),
       );
     }
+
+    if (!this.#toolbarPinned()) {
+      this.#store.dispatch(BoardPageActions.setPopupOpen({ popup: '' }));
+    }
   }
 
   onDrop() {