techhub/mastodon
2
0
Fork 0
Code 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> Last pressed hotkey: <output>{matchedHotkey ?? 'None'}</output>
</p> </p>
<p> <p>
Click within the dashed border and press the &quot;<kbd>n</kbd> Click within the dashed border and press the <kbd>n</kbd>
&quot; or &quot;<kbd>/</kbd>&quot; key. Press &quot; or <kbd>/</kbd> key. Press
<kbd>Backspace</kbd>&quot; to clear the displayed hotkey. <kbd>Backspace</kbd> to clear the displayed hotkey.
</p> </p>
<p> <p>
Try typing a sequence, like &quot;<kbd>g</kbd>&quot; shortly Try typing a sequence, like <kbd>g</kbd> shortly followed by{' '}
followed by &quot;<kbd>h</kbd>&quot;, &quot;<kbd>n</kbd>&quot;, or <kbd>h</kbd>, <kbd>n</kbd>, or
&quot;<kbd>f</kbd>&quot; <kbd>f</kbd>
</p> </p>
<p> <p>
Note that this playground doesn&apos;t support all hotkeys we use in Note that this playground doesn&apos;t support all hotkeys we use in
the app. the app.
</p> </p>
<p> <p>
When a <button>Button</button> is focused, &quot; When a <button>Button</button> is focused,
<kbd>Enter</kbd> <kbd>Enter</kbd>
&quot; should not trigger &quot;open&quot;, but &quot;<kbd>o</kbd> should not trigger open, but <kbd>o</kbd>
&quot; should. should.
</p> </p>
<p> <p>
When an input element is focused, hotkeys should not interfere with 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; 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 { .filters {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;

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

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

1
app/views/settings/preferences/appearance/show.html.haml
View File

@@ -72,6 +72,7 @@
.fields-group .fields-group
= ff.input :'web.reblog_modal', wrapper: :with_label, hint: I18n.t('simple_form.hints.defaults.setting_boost_modal'), label: I18n.t('simple_form.labels.defaults.setting_boost_modal') = ff.input :'web.reblog_modal', wrapper: :with_label, hint: I18n.t('simple_form.hints.defaults.setting_boost_modal'), label: I18n.t('simple_form.labels.defaults.setting_boost_modal')
.flash-message.hidden-on-touch-devices= t('appearance.boosting_preferences_info_html', icon: material_symbol('repeat'))
%h4= t 'appearance.sensitive_content' %h4= t 'appearance.sensitive_content'

1
config/locales/en.yml
View File

@@ -1191,6 +1191,7 @@ en:
advanced_settings: Advanced settings advanced_settings: Advanced settings
animations_and_accessibility: Animations and accessibility animations_and_accessibility: Animations and accessibility
boosting_preferences: Boosting preferences boosting_preferences: Boosting preferences
boosting_preferences_info_html: "<strong>Tip:</strong> Regardless of settings, <kbd>Shift</kbd> + <kbd>Click</kbd> on the %{icon} Boost icon will immediately boost."
discovery: Discovery discovery: Discovery
localization: localization:
body: Mastodon is translated by volunteers. body: Mastodon is translated by volunteers.