new header (#26)

wirekang · Jan 29, 2024 · 987df9a · 987df9a
1 parent 90360d6
commit 987df9a
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 7 deletions.
diff --git a/src/assets/color.css b/src/assets/color.css
@@ -109,6 +109,7 @@
 #more-popup > .item > .button-container > .name {
   border-color: var(--fg);
 }
+
 #more-popup > .item > .button-container:hover > .name {
   background-color: var(--header-hover);
 }

diff --git a/src/assets/style.css b/src/assets/style.css
@@ -161,6 +161,7 @@ body {
 
 #more-popup > .item > .text {
   font-size: 0.7rem;
+  white-space: pre;
 }
 
 #more-popup > .item > .button-container {

diff --git a/src/bootstrap.ts b/src/bootstrap.ts
@@ -183,11 +183,13 @@ function setupSettingsController() {
     });
   }
 
+  const actionKey = DomUtils.isMac() ? "Cmd" : "Ctrl";
   D.morePopupController.appendText("To share a playground, press 'Save'");
   D.morePopupController.appendHeading("commands");
-  D.morePopupController.appendButton("Save", "Ctrl-S", save.bind(null, false));
-  D.morePopupController.appendButton("Save and shorten link", "Ctrl-Shift-S", save.bind(null, true));
-  D.morePopupController.appendButton("Toggle type-editor", "Ctrl-Q", toggleTypeEditor);
+  D.morePopupController.appendButton("Save", `${actionKey}-S`, save.bind(null, false));
+  D.morePopupController.appendButton("Save and shorten link", `${actionKey}-Shift-S`, save.bind(null, true));
+  D.morePopupController.appendButton("Toggle type-editor", `${actionKey}-Q`, toggleTypeEditor);
+  D.morePopupController.appendText(" ");
 
   D.morePopupController.appendHeading("typescript-format");
   append("semi", "ts-format:semi", formatEditors);
@@ -390,10 +392,8 @@ async function setupMonaco() {
 function setupHotKeys() {
   HotkeyUtils.register(["ctrl"], "s", save.bind(null, false));
   HotkeyUtils.register(["ctrl", "shift"], "s", save.bind(null, true));
-  HotkeyUtils.register([], "f1", () => {
-    D.morePopupController.toggle();
-  });
   HotkeyUtils.register(["ctrl"], "q", toggleTypeEditor);
+  HotkeyUtils.register([], "f1", D.morePopupController.toggle.bind(D.morePopupController));
 }
 
 async function save(shorten: boolean) {

diff --git a/src/lib/utility/dom-utils.ts b/src/lib/utility/dom-utils.ts
@@ -6,4 +6,8 @@ export class DomUtils {
       return true;
     }
   }
+
+  static isMac() {
+    return navigator.userAgent.toLowerCase().includes("mac");
+  }
 }
diff --git a/src/lib/utility/hotkey-utils.ts b/src/lib/utility/hotkey-utils.ts
@@ -6,7 +6,7 @@ export class HotkeyUtils {
     window.addEventListener("keydown", (e) => {
       if (
         e.key.toLowerCase() === key.toLowerCase() &&
-        ctrl === e.ctrlKey &&
+        (ctrl === e.ctrlKey || ctrl === e.metaKey) &&
         shift === e.shiftKey &&
         alt === e.altKey
       ) {