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

improvement(options): hide hotkey tables when hotkeys are disabled #39

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

improvement(options): hide hotkey tables when hotkeys are disabled #39

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
17 changes: 12 additions & 5 deletions src/options/App.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,13 +196,17 @@
label="⌨️ {getMessage('enableHotkeys')}"
bind:checked={settings.enableHotkeys}
/>
<!-- TODO how about we hide the table entirely? But keep in mind that it would make it possible to save
invalid settings as the table inputs would stop being validated. Consider replacing it with
<!-- Using `{#if}` instead of `display: none;` would make it possible to save invalid settings
as the table inputs would stop being validated. Same goes for the `popupSpecificHotkeys` table below.
TODO but if the user makes some inputs invalid inside a block and then makes that block hidden (by unchecking)
"enable hotkeys", the form would stay invalid, but you wan't be able to see what exactly is invalid.
It's a rare occurance though, so it's fine for now.
Consider replacing this with
`<fieldset disabled={...}`. and rewriting saving logic so that `saveSettings` is called on form submit
and new values are constructed from FormData (so disabled fields are ignored and don't have effect on the
settings). This would require us to provide inputs with names though.
https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects#Retrieving_a_FormData_object_from_an_HTML_form. -->
<div style={settings.enableHotkeys ? '' : 'opacity: 0.5;'}>
<div style={settings.enableHotkeys ? '' : 'display: none;'}>
<ul>
<!-- TODO do we need "Hotkeys are also active when the popup is open" here (see localization)?
Maybe it can be understood from inputs' labels? -->
Expand Down Expand Up @@ -293,7 +297,9 @@
<p>{getMessage('rangeSlidersAttributesNote')}</p>
<table>
<thead>
<th>{getMessage('input')}</th>
<th
style="min-width: 24ch;"
>{getMessage('input')}</th>
{#each [
getMessage('min'),
getMessage('step'),
Expand Down Expand Up @@ -339,7 +345,8 @@
label="🔗 {getMessage('alwaysShowOpenLocalFileLink', getMessage('openLocalFile'))}"
bind:checked={settings.popupAlwaysShowOpenLocalFileLink}
/>
<section>
<!-- See the main hotkeys table above on why `display: none` instead of `{#if }`. -->
<section style={settings.enableHotkeys ? '' : 'display: none;'}>
<h4>{getMessage('popupSpecificHotkeys')}</h4>
<HotkeysTable
bind:hotkeys={settings.popupSpecificHotkeys}
Expand Down