[chore] update top-bar component style

ousc · Dec 19, 2023 · a943c4d · a943c4d
1 parent a4cefeb
commit a943c4d
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 25 deletions.
diff --git a/src/app/components/README.md b/src/app/components/README.md
@@ -21,3 +21,4 @@
 - emoji-menu
 - list-item
 - math-block
+- top-bar
diff --git a/src/app/components/diagram.component.ts b/src/app/components/diagram.component.ts
@@ -13,7 +13,11 @@ import {MatButtonModule} from "@angular/material/button";
   template: `
       <mat-tab-group contenteditable="false" [animationDuration]="150" [(selectedIndex)]="selectedIndex" preserveContent>
           <mat-tab label="Preview">
-              <div class="cursor-pointer border-2 border-gray-300 rounded-md p-2 flex justify-center items-center hover:bg-gray-100 diagram-ref"></div>
+              <div [style.min-height.px]="100" class="cursor-pointer border-2 border-gray-300 rounded-md p-2 flex justify-center items-center hover:bg-gray-100 diagram-ref">
+                  @if (!code || !rendering) {
+                      <span> (˚Δ˚)b</span>
+                  }
+              </div>
           </mat-tab>
           <mat-tab label="Source">
                 <textarea [(ngModel)]="code"

diff --git a/src/app/components/math-block.component.ts b/src/app/components/math-block.component.ts
@@ -12,9 +12,15 @@ import katex from 'katex';
 @Component({
   selector: 'math-block',
   template: `
-      <mat-tab-group contenteditable="false" [animationDuration]="150" [(selectedIndex)]="selectedIndex" preserveContent>
+      <mat-tab-group contenteditable="false" [animationDuration]="150" [(selectedIndex)]="selectedIndex"
+                     preserveContent>
           <mat-tab label="Preview">
-              <div class="cursor-pointer border-2 border-gray-300 rounded-md p-2 flex justify-center items-center hover:bg-gray-100 math-block-ref"></div>
+              <div [style.min-height.px]="100"
+                   class="cursor-pointer border-2 border-gray-300 rounded-md p-2 flex justify-center items-center hover:bg-gray-100 math-block-ref">
+                  @if (!code || !rendering) {
+                      <span> (˚Δ˚)b</span>
+                  }
+              </div>
           </mat-tab>
           <mat-tab label="Source">
                 <textarea [(ngModel)]="code"

diff --git a/src/app/components/table-selector/table-selector-widget.component.ts b/src/app/components/table-selector/table-selector-widget.component.ts
@@ -67,7 +67,7 @@ export class TableSelectorWidget extends NgProsemirrorWidget {
       };
       setTimeout(() => {
         tooltip.show();
-      }, 50)
+      }, 50);
     });
   }
 

diff --git a/src/app/components/tool-bar.component.ts b/src/app/components/tool-bar.component.ts
@@ -5,14 +5,25 @@ import {
 import {actionFactory} from "../../../projects/ng-milkdown/src/lib/actionFactory";
 import {redoCommand, undoCommand} from '@milkdown/plugin-history';
 import {Is, when} from "conditio";
-import {toggleStrongCommand} from "@milkdown/preset-commonmark";
-import { callCommand } from '@milkdown/utils';
+import {
+  createCodeBlockCommand,
+  insertHrCommand,
+  toggleEmphasisCommand,
+  toggleStrongCommand,
+  wrapInBlockquoteCommand,
+  wrapInBulletListCommand,
+  wrapInHeadingCommand,
+  wrapInOrderedListCommand
+} from "@milkdown/preset-commonmark";
+import {callCommand} from '@milkdown/utils';
+import {insertTableCommand, toggleStrikethroughCommand} from "@milkdown/preset-gfm";
+import {insertDiagramCommand} from "@milkdown/plugin-diagram";
 
 @Component({
   selector: 'nav-bar-button',
   standalone: true,
   template: `
-      <div class="flex h-10 w-10 cursor-pointer items-center justify-center rounded"
+      <div class="flex h-10 w-10 cursor-pointer items-center justify-center rounded hover:bg-gray-100"
            (mousedown)="onMouseDown($event)">
         <span class="material-symbols-outlined !text-base">
             <ng-content/>
@@ -34,18 +45,36 @@ export class NavBarBtnComponent {
       <div class="absolute top-0 h-10 w-full border-b border-nord4 dark:divide-gray-600 dark:border-gray-600">
           <div class="prose mx-auto flex">
               <nav-bar-button (onClick)="call('undo')">undo</nav-bar-button>
-              <nav-bar-button (click)="call('redo')">redo</nav-bar-button>
-              <nav-bar-button (click)="call('toggleStrong')">format_bold</nav-bar-button>
-              <nav-bar-button (click)="call('toggleEmphasis')">format_italic</nav-bar-button>
-              <nav-bar-button (click)="call('toggleStrikethrough')">format_strikethrough</nav-bar-button>
-              <nav-bar-button (click)="call('insertTable')">table</nav-bar-button>
-              <nav-bar-button (click)="call('wrapInBulletList')">format_list_bulleted</nav-bar-button>
-              <nav-bar-button (click)="call('wrapInOrderedList')">format_list_numbered</nav-bar-button>
-              <nav-bar-button (click)="call('wrapInBlockquote')">format_quote</nav-bar-button>
+              <nav-bar-button (onClick)="call('redo')">redo</nav-bar-button>
+              <nav-bar-button class="hidden-xs" (onClick)="call('wrapInHeading', 1)">looks_one</nav-bar-button>
+              <nav-bar-button class="hidden-sm" (onClick)="call('wrapInHeading', 2)">looks_two</nav-bar-button>
+              <nav-bar-button class="hidden-sm" (onClick)="call('wrapInHeading', 3)">looks_3</nav-bar-button>
+              <nav-bar-button (onClick)="call('toggleStrong')">format_bold</nav-bar-button>
+              <nav-bar-button (onClick)="call('toggleEmphasis')">format_italic</nav-bar-button>
+              <nav-bar-button (onClick)="call('toggleStrikethrough')">format_strikethrough</nav-bar-button>
+              <nav-bar-button class="hidden-xs" (onClick)="call('insertTable')">table</nav-bar-button>
+              <nav-bar-button (onClick)="call('insertHr')">horizontal_rule</nav-bar-button>
+              <nav-bar-button class="hidden-sm" (onClick)="call('insertDiagram')">rebase</nav-bar-button>
+              <nav-bar-button (onClick)="call('wrapInBulletList')">format_list_bulleted</nav-bar-button>
+              <nav-bar-button (onClick)="call('wrapInOrderedList')">format_list_numbered</nav-bar-button>
+              <nav-bar-button class="hidden-sm" (onClick)="call('wrapInCodeBlock')">data_object</nav-bar-button>
+              <nav-bar-button (onClick)="call('wrapInBlockquote')">format_quote</nav-bar-button>
           </div>
       </div>
   `,
-  styles: [],
+  styles: [`
+    @media(max-width: 768px){
+      .hidden-sm {
+        display: none;
+      }
+    }
+
+    @media(max-width: 640px){
+      .hidden-xs {
+        display: none;
+      }
+    }
+  `],
   imports: [
     NavBarBtnComponent
   ],
@@ -58,18 +87,22 @@ export class ToolBarComponent {
     return actionFactory(this.provider.editor);
   }
 
-  call(cmd: string) {
-    const cmdKey = when(cmd)(
+  call(cmd: string, payload?: any) {
+    const slice = when(cmd)(
       Is('undo', undoCommand.key),
       Is('redo', redoCommand.key),
       Is('toggleStrong', toggleStrongCommand.key),
-      Is('toggleEmphasis', toggleStrongCommand.key),
-      Is('toggleStrikethrough', toggleStrongCommand.key),
-      Is('insertTable', toggleStrongCommand.key),
-      Is('wrapInBulletList', toggleStrongCommand.key),
-      Is('wrapInOrderedList', toggleStrongCommand.key),
-      Is('wrapInBlockquote', toggleStrongCommand.key),
+      Is('toggleEmphasis', toggleEmphasisCommand.key),
+      Is('toggleStrikethrough', toggleStrikethroughCommand.key),
+      Is('insertTable', insertTableCommand.key),
+      Is('insertHr', insertHrCommand.key),
+      Is('insertDiagram', insertDiagramCommand.key),
+      Is('wrapInBulletList', wrapInBulletListCommand.key),
+      Is('wrapInOrderedList', wrapInOrderedListCommand.key),
+      Is('wrapInHeading', wrapInHeadingCommand.key),
+      Is('wrapInCodeBlock', createCodeBlockCommand.key),
+      Is('wrapInBlockquote', wrapInBlockquoteCommand.key),
     );
-    this.action(callCommand(cmdKey));
+    this.action(callCommand(slice, payload));
   }
 }
-Original file line number
+Diff line change
@@ Expand Up @@
           };
           setTimeout(() => {
             tooltip.show();
-          }, 50)
+          }, 50);
         });
       }
@@ Expand Down @@