Skip to content

Commit

Permalink
Fix bug with preferences keymaps not loading when not in local storage
Browse files Browse the repository at this point in the history
Fix styles for keymaps so that they are shown fine across themes
Add separate show shortcut item and change shortcut button
  • Loading branch information
Komediruzecki authored and Rokt33r committed May 4, 2021
1 parent 341d278 commit a4253d6
Show file tree
Hide file tree
Showing 3 changed files with 60 additions and 59 deletions.
35 changes: 14 additions & 21 deletions src/components/PreferencesModal/KeymapTab.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,9 @@ const KeymapTab = () => {
<KeymapHeaderSection>
<SectionHeader>{t('preferences.keymap')}</SectionHeader>
<SectionResetKeymap>
<ButtonContainer onClick={() => resetKeymap()}>Reset</ButtonContainer>
<KeymapItemButton onClick={() => resetKeymap()}>
Restore
</KeymapItemButton>
</SectionResetKeymap>
</KeymapHeaderSection>
<KeymapItemList>
Expand Down Expand Up @@ -71,8 +73,9 @@ const SectionResetKeymap = styled.div`
align-self: center;
`

export const ButtonContainer = styled.button`
width: 92px;
export const KeymapItemButton = styled.button`
min-width: 88px;
max-width: 120px;
height: 32px;
font-size: 15px;
display: flex;
Expand All @@ -81,29 +84,19 @@ export const ButtonContainer = styled.button`
cursor: pointer;
background: #214953;
border: 1px solid #214953;
background-color: ${({ theme }) => theme.primaryButtonBackgroundColor};
border: 1px solid ${({ theme }) => theme.borderColor};
border-radius: 4px;
transition: color 200ms ease-in-out;
color: ${({ theme }) => theme.navButtonColor};
&:hover {
color: ${({ theme }) => theme.navButtonHoverColor};
}
color: ${({ theme }) => theme.primaryButtonLabelColor};
&:active,
&.active {
color: ${({ theme }) => theme.navButtonActiveColor};
}
text-align: center;
padding: 5px;
&.disabled,
&:disabled {
color: ${({ theme }) => theme.disabledUiTextColor};
background: #12292e;
border: 1px solid #214953;
border-radius: 4px;
width: 88px;
height: 32px;
&:hover {
border-color: ${({ theme }) => theme.borderColor};
background: ${({ theme }) => theme.primaryButtonHoverBackgroundColor};
}
`

Expand Down
61 changes: 26 additions & 35 deletions src/components/atoms/KeymapItemSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
import { inputStyle } from '../../lib/styled/styleFunctions'
import cc from 'classcat'
import { useToast } from '../../lib/toast'
import { ButtonContainer } from '../PreferencesModal/KeymapTab'
import { KeymapItemButton } from '../PreferencesModal/KeymapTab'

const invalidShortcutInputs = [' ']
const rejectedShortcutInputs = [' ', 'control', 'alt', 'shift']
Expand Down Expand Up @@ -131,14 +131,17 @@ const KeymapItemSection = ({
}, [keymapKey, removeKeymap])

const shortcutString = useMemo(() => {
return currentShortcut != null
? getGenericShortcutString(currentShortcut)
return currentShortcut != null && currentKeymapItem != null
? getGenericShortcutString(currentKeymapItem)
: ''
}, [currentShortcut])
}, [currentKeymapItem, currentShortcut])
return (
<KeymapItemSectionContainer>
<div>{description}</div>
<KeymapItemInputSection>
{currentShortcut != null && currentKeymapItem != null && (
<ShortcutItemStyle>{shortcutString}</ShortcutItemStyle>
)}
{changingShortcut && (
<StyledInput
className={cc([inputError && 'error'])}
Expand All @@ -149,42 +152,30 @@ const KeymapItemSection = ({
onKeyDown={fetchInputShortcuts}
/>
)}

<InputKeymapChooser onClick={toggleChangingShortcut}>
<KeymapItemButton onClick={toggleChangingShortcut}>
{currentShortcut == null
? 'Assign'
: changingShortcut
? 'Apply'
: shortcutString}
</InputKeymapChooser>
: 'Change'}
</KeymapItemButton>
{changingShortcut && (
<ButtonContainer onClick={handleCancelKeymapChange}>
<KeymapItemButton onClick={handleCancelKeymapChange}>
Cancel
</ButtonContainer>
</KeymapItemButton>
)}

{currentShortcut != null && !changingShortcut && (
<ButtonContainer onClick={handleRemoveKeymap}>
<KeymapItemButton onClick={handleRemoveKeymap}>
Un-assign
</ButtonContainer>
</KeymapItemButton>
)}
</KeymapItemInputSection>
</KeymapItemSectionContainer>
)
}

const StyledInput = styled.input`
${inputStyle};
max-width: 120px;
min-width: 110px;
height: 1.3em;
&.error {
border: 1px solid red;
}
`

const InputKeymapChooser = styled.button`
const ShortcutItemStyle = styled.div`
min-width: 88px;
max-width: 120px;
height: 32px;
Expand All @@ -193,20 +184,20 @@ const InputKeymapChooser = styled.button`
align-items: center;
justify-content: center;
cursor: pointer;
background: #214953;
border: 1px solid #214953;
background-color: ${({ theme }) => theme.primaryButtonBackgroundColor};
color: ${({ theme }) => theme.primaryButtonLabelColor};
border: 1px solid ${({ theme }) => theme.borderColor};
border-radius: 4px;
`

transition: color 200ms ease-in-out;
color: ${({ theme }) => theme.navButtonColor};
text-align: center;
padding: 5px;
const StyledInput = styled.input`
${inputStyle};
max-width: 120px;
min-width: 110px;
height: 1.3em;
&:hover {
background: #2a5c69;
&.error {
border: 1px solid red;
}
`

Expand Down
23 changes: 20 additions & 3 deletions src/lib/preferences.ts
Original file line number Diff line number Diff line change
Expand Up @@ -340,7 +340,24 @@ function usePreferencesStore() {
])
}
}
}, [mergedPreferences])

// add new keymaps to preferences if weren't available before
let addedKeymap = false
for (const [key, keymapItem] of defaultKeymap) {
if (!keymap.has(key)) {
keymap.set(key, keymapItem)
addedKeymap = true
}
}
if (addedKeymap) {
setPreferences((preferences) => {
return {
...preferences,
'general.keymap': keymap,
}
})
}
}, [mergedPreferences, setPreferences])

const resetKeymap = useCallback(() => {
keymap.clear()
Expand All @@ -356,9 +373,9 @@ function usePreferencesStore() {
}, [keymap, setPreferences])

useEffect(() => {
savePreferences(preferences)
loadKeymaps()
}, [loadKeymaps, preferences])
savePreferences(preferences)
}, [loadKeymaps, mergedPreferences, preferences, resetKeymap])

return {
tab,
Expand Down

0 comments on commit a4253d6

Please sign in to comment.