style: custom css module for keyboard shortcuts dialog

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

Hide file tree

Showing 5 changed files with 90 additions and 45 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>
-            <tr colspan="2">
-                <th class="w-flex w-samosa w-flex-row w-mb-2" scope="rowgroup">Actions</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>
-            </tr>
+
+        <tbody class="w-w-full">
+            {% for category, shortcuts in shortcuts.items %}
+                <tr colspan="2">
+                    <th class="keyboard_shortcut__category" scope="rowgroup">{{ category }}</th>
+                </tr>
+                {% 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
@@ -1297,12 +1297,52 @@ def workflow_status_with_date(workflow_state):
     return _("%(status_display)s %(task_name)s %(started_at)s") % translation_context
 
 
-@register.inclusion_tag("wagtailadmin/shared/keyboard_shortcuts_dialog.html", takes_context=True)
+@register.inclusion_tag(
+    "wagtailadmin/shared/keyboard_shortcuts_dialog.html", takes_context=True
+)
 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,
     }
 
 

diff --git a/wagtail/admin/wagtail_hooks.py b/wagtail/admin/wagtail_hooks.py
@@ -112,6 +112,7 @@ def register_keyboard_shortcuts_menu_item():
         url="#",
     )
 
+
 @hooks.register("register_admin_menu_item")
 def register_explorer_menu_item():
     return ExplorerMenuItem(