Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Improve Styling #36

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

[WIP] Improve Styling #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b72347a
Add documentation for keyboard shortcuts in admin docs
erosselli Aug 17, 2024
67d7765
Improve some styling on keyboard shortcuts dialog
erosselli Aug 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions django_admin_keyboard_shortcuts/static/admin/css/admin-doc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
#content-main {
float: none;
}

#keyboard-shortcuts-docs {
padding: 1.25em 0em;
}
32 changes: 27 additions & 5 deletions django_admin_keyboard_shortcuts/static/admin/css/shortcuts.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,15 @@

html[data-theme="light"],
:root {
/* In light mode, this is the same as --darker-bg */
--keyboard-shortcuts-bg: #f8f8f8;
}

html[data-theme="dark"] {
/* In dark mode, this is a bit lighter than --darker-bg */
--keyboard-shortcuts-bg: #292929;
}

kbd {
background-color: var(--body-bg);
border-radius: 3px;
Expand All @@ -14,26 +26,31 @@ kbd {
}

dialog {
background-color: var(--darkened-bg);
background-color: var(--keyboard-shortcuts-bg);
color: var(--body-fg);
min-width: 20em;
padding: 1em;
height: 50vh;
height: 65vh;
width: 40vw;

border: 1px solid var(--border-color);
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);

.dialog-heading {
align-items: center;
display: flex;
justify-content: space-between;

h2 {
margin: 0;
color: var(--body-fg);
}
}

h3 {
background: var(--header-bg);
color: var(--header-color);
color: var(--header-link-color);
margin: 0;
padding: 0.5em 1em;
}
Expand All @@ -58,13 +75,18 @@ dialog {
column-gap: 1em;
display: flex;
justify-content: space-between;
border-top: 1px solid var(--border-color);
border-top: 0.5px solid var(--body-quiet-color);
padding: 1em;
font-size: 1em;
}

li:first-child {
border-top: none;
}
}
}

#model-list-dialog-search {
margin: 0.5em 0em;
width: 12vw;
}
}
12 changes: 9 additions & 3 deletions django_admin_keyboard_shortcuts/static/admin/js/shortcuts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,10 +56,16 @@ function isFocusedTextField() {
}

function handleKeyDown(event) {
console.log("keydown")
if (isFocusedTextField()) { return; }
console.log("keydown", event.key);
if (isFocusedTextField()) {
return;
}

if (event.key === "?") {
showShortcutsDialog();
return;
}
const shortcut = previousKey ? `${previousKey} ${event.key}` : event.key;
console.log(shorcutFunctions);
if (shortcutFunctions.has(shortcut)) {
console.log("has shortcut");
shortcutFunctions.get(shortcut)();
Expand Down
21 changes: 21 additions & 0 deletions django_admin_keyboard_shortcuts/templates/admin_doc/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{% extends "admin_doc/index.html" %}
{% load static i18n %}

{% block extrahead_shortcuts %}
{{ block.super }}
<link rel="stylesheet" href="{% static "admin/css/admin-doc.css" %}">
{% endblock extrahead_shortcuts %}

{% block content %}
{{ block.super }}

<div id="keyboard-shortcuts-docs">
<h1>
Keyboard shortcuts
</h1>

<p> You can access keyboard shortcuts on any page by pressing the <kbd>?</kbd> key. </p>

</div>

{% endblock content %}