Leatherface/mastodon
1
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2025-12-15 16:59:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add keyboard shortcut info banner to the boosting preferences section (#36506)

Browse Source
This commit is contained in:
diondiondion
2025-10-16 16:53:23 +02:00
committed by GitHub
parent 63dc426fae
commit 20961c7538
6 changed files with 29 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/javascript/mastodon/components/hotkeys/hotkeys.stories.tsx
View File

@@ -139,24 +139,24 @@ export const Default = {
Last pressed hotkey: <output>{matchedHotkey ?? 'None'}</output>
</p>
<p>
Click within the dashed border and press the &quot;<kbd>n</kbd>
&quot; or &quot;<kbd>/</kbd>&quot; key. Press &quot;
<kbd>Backspace</kbd>&quot; to clear the displayed hotkey.
Click within the dashed border and press the <kbd>n</kbd>
or <kbd>/</kbd> key. Press
<kbd>Backspace</kbd> to clear the displayed hotkey.
</p>
<p>
Try typing a sequence, like &quot;<kbd>g</kbd>&quot; shortly
followed by &quot;<kbd>h</kbd>&quot;, &quot;<kbd>n</kbd>&quot;, or
&quot;<kbd>f</kbd>&quot;
Try typing a sequence, like <kbd>g</kbd> shortly followed by{' '}
<kbd>h</kbd>, <kbd>n</kbd>, or
<kbd>f</kbd>
</p>
<p>
Note that this playground doesn&apos;t support all hotkeys we use in
the app.
</p>
<p>
When a <button>Button</button> is focused, &quot;
When a <button>Button</button> is focused,
<kbd>Enter</kbd>
&quot; should not trigger &quot;open&quot;, but &quot;<kbd>o</kbd>
&quot; should.
should not trigger open, but <kbd>o</kbd>
should.
</p>
<p>
When an input element is focused, hotkeys should not interfere with

4
app/javascript/styles/mastodon-light/diff.scss
View File

@@ -524,3 +524,7 @@ a.sparkline {
opacity: 0.25;
}
}
kbd {
background-color: color.change($ui-highlight-color, $alpha: 0.1);
}

8
app/javascript/styles/mastodon/admin.scss
View File

@@ -488,6 +488,14 @@ body,
}
}
kbd {
font-family: Courier, monospace;
background-color: color.change($ui-secondary-color, $alpha: 0.1);
padding: 4px;
padding-bottom: 2px;
border-radius: 5px;
}
.filters {
display: flex;
flex-wrap: wrap;

6
app/javascript/styles/mastodon/forms.scss
View File

@@ -755,6 +755,12 @@ code {
display: none;
}
&.hidden-on-touch-devices {
@media screen and (pointer: coarse) {
display: none;
}
}
a {
display: inline-block;
color: $darker-text-color;