style: custom css module for keyboard shortcuts dialog

Signed-off-by: Karthik Ayangar <karthik.ayangar7118@gmail.com>
wagtail · Mar 4, 2024 · 5133c6b · 5133c6b
1 parent ffdbb3c
commit 5133c6b
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 41 deletions.
diff --git a/client/scss/components/_keyboard-shortcuts.scss b/client/scss/components/_keyboard-shortcuts.scss
@@ -0,0 +1,32 @@
+.keyboard_shortcut {
+  width: 100%;
+
+  &__category {
+    font-size: 20px;
+    display: flex;
+    flex-direction: row;
+    font-weight: 400;
+    margin-bottom: 0.75rem;
+    margin-top: 1.2rem;
+  }
+
+  &__key {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    border-top: 1px solid rgb(134, 134, 134);
+
+    th {
+      font-size: 16px;
+      font-weight: 400;
+      padding: 0.5rem 0;
+      display: flex;
+      flex-direction: row;
+    }
+
+    td {
+      padding: 0.5rem 0;
+    }
+  }
+}
diff --git a/client/scss/core.scss b/client/scss/core.scss
@@ -115,6 +115,7 @@ These are classes for components.
 @import 'components/dropdown-button';
 @import 'components/help-block';
 @import 'components/button';
+@import 'components/keyboard-shortcuts';
 @import 'components/modals';
 @import 'components/chooser';
 @import 'components/tag';

diff --git a/wagtail/admin/templates/wagtailadmin/shared/keyboard_shortcuts_dialog.html b/wagtail/admin/templates/wagtailadmin/shared/keyboard_shortcuts_dialog.html
@@ -1,6 +1,6 @@
 {% load wagtailadmin_tags %}
 {% dialog icon_name='regex' id='keyboard-shortcuts-dialog' title=_("Keyboard shortcuts") %}
-    <table class="w-samosa">
+<table class="keyboard_shortcut">
         <caption class="w-sr-only">
             All keyboard shortcuts
         </caption>
@@ -11,48 +11,19 @@
                 <th scope="col">Keyboard shortcut</th>
             </tr>
         </thead>
-        <tbody>
+
+        <tbody class="w-w-full">
+        {% for category, shortcuts in shortcuts.items %}
             <tr colspan="2">
-                <th class="w-flex w-samosa w-flex-row w-mb-2" scope="rowgroup">Actions</th>
+                <th class="keyboard_shortcut__category" scope="rowgroup">{{ category }}</th>
             </tr>
-            <tr>
-              <th class="w-flex w-flex-row" scope="row">Save</th>
-              <td><kbd>{{ mod }} + s</kbd></td>
-            </tr>
-            <tr>
-              <th class="w-flex w-flex-row" scope="row">Preview</th>
-              <td><kbd>{{ mod }} + p</kbd></td>
-            </tr>
-        </tbody>
-        <tbody >
-            <tr colspan="2">
-                <th class="w-flex w-flex-row" scope="rowgroup">Common actions</th>
-            </tr>
-            <tr>
-                <th class="w-flex w-flex-row" scope="row">Copy</th>
-                <td><kbd>{{ mod }} + c</kbd></td>
-            </tr>
-            <tr>
-                <th class="w-flex w-flex-row" scope="row">Cut</th>
-                <td><kbd>{{ mod }} + x</kbd></td>
-            </tr>
-            <tr>
-                <th class="w-flex w-flex-row" scope="row">Paste</th>
-                <td><kbd>{{ mod }} + v</kbd></td>
-            </tr>
-            <tr>
-                <th class="w-flex w-flex-row" scope="row">Paste without formatting</th>
-                <td><kbd>{{ mod }} + shift + v</kbd></td>
-            </tr>
-            <tr>
-                <th class="w-flex w-flex-row" scope="row">Undo</th>
-                <td><kbd>{{ mod }} + z</kbd></td>
-            </tr>
-            <tr>
-                <th class="w-flex w-flex-row" scope="row">Redo</th>
-                <td><kbd>{{ mod }} + shift + z</kbd></td>
+            {% for shortcut in shortcuts %}
+            <tr class="keyboard_shortcut__key">
+                <th scope="row">{{ shortcut.Label }}</th>
+                <td><kbd>{{ shortcut.Shortcut }}</kbd></td>
             </tr>
+            {% endfor %}
+        {% endfor %}
         </tbody>
-
     </table>
 {% enddialog %}
diff --git a/wagtail/admin/templatetags/wagtailadmin_tags.py b/wagtail/admin/templatetags/wagtailadmin_tags.py
@@ -1301,8 +1301,34 @@ def workflow_status_with_date(workflow_state):
 def keyboard_shortcuts_dialog(context):
     user_agent = context["request"].headers.get("User-Agent", "")
     is_mac = re.search(r"Mac|iPod|iPhone|iPad", user_agent)
+    shortcuts_category = {
+    'Actions': [
+        {'Label': 'Save', "Shortcut": ("⌘" if is_mac else 'Ctrl') + ' + s'},
+        {'Label': 'Preview', "Shortcut": ("⌘" if is_mac else 'Ctrl') + ' + p'}
+    ],
+    'Common actions': [
+        {'Label': 'Copy', "Shortcut": ("⌘" if is_mac else 'Ctrl') + ' + c'},
+        {'Label': 'Cut', 'Shortcut': ("⌘" if is_mac else 'Ctrl') + ' + x'},
+        {'Label': 'Paste', 'Shortcut': ("⌘" if is_mac else 'Ctrl') + ' + v'},
+        {'Label': 'Paste without formatting', 'Shortcut': ("⌘" if is_mac else 'Ctrl') + ' + shift + v'},
+        {'Label': 'Undo', 'Shortcut': ("⌘" if is_mac else 'Ctrl') + ' + z'},
+        {'Label': 'Redo', 'Shortcut': ("⌘" if is_mac else 'Ctrl') + ' + y'}
+    ],
+    'Text formatting': [
+        {'Label': 'Bold', 'Shortcut': ("⌘" if is_mac else 'Ctrl') + ' + b'},
+        {'Label': 'Italic', 'Shortcut': ("⌘" if is_mac else 'Ctrl') + ' + i'},
+        {'Label': 'Underline', 'Shortcut': ("⌘" if is_mac else 'Ctrl') + ' + u'},
+        {'Label': 'Monospace (code)', 'Shortcut': ("⌘" if is_mac else 'Ctrl') + ' + j'},
+        {'Label': 'Strike-through', 'Shortcut': ("⌘" if is_mac else 'Ctrl') + ' + x'},
+        {'Label': 'Superscript', 'Shortcut': ("⌘" if is_mac else 'Ctrl') + ' + .'},
+        {'Label': 'Subscript', 'Shortcut': ("⌘" if is_mac else 'Ctrl') + ' + ,'}
+    ],
+    'Text content': [
+        {'Label': 'Insert or edit a link', 'Shortcut': ("⌘" if is_mac else 'Ctrl') + '+ k'}
+    ]
+}
     return {
-        "mod": "⌘" if is_mac else "Ctrl",
+        "shortcuts": shortcuts_category,
     }