antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-02 19:01:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Migrate to Mantine v8 and Design Changes (#961)

Browse source 
* mantine v8 migration

* various design changes and improvements
This commit is contained in:
Jeff 2025-06-24 00:04:36 -07:00 • committed by GitHub
parent bea55d48a8
commit c1330d92b2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
473 changed files with 12469 additions and 11607 deletions
Download patch file Download diff file Expand all files Collapse all files

69
src/renderer/features/settings/components/hotkeys/hotkey-manager-settings.tsx
View file

@ -1,16 +1,19 @@
import { Group } from '@mantine/core';
import isElectron from 'is-electron';
import debounce from 'lodash/debounce';
import { ChangeEvent, KeyboardEvent, useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { RiDeleteBinLine, RiEditLine, RiKeyboardBoxLine } from 'react-icons/ri';
import styled from 'styled-components';
import styles from './hotkeys-manager-settings.module.css';
import i18n from '/@/i18n/i18n';
import { Button, Checkbox, TextInput } from '/@/renderer/components';
import { SettingsOptions } from '/@/renderer/features/settings/components/settings-option';
import { useSettingSearchContext } from '/@/renderer/features/settings/context/search-context';
import { BindingActions, useHotkeySettings, useSettingsStoreActions } from '/@/renderer/store';
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
import { Checkbox } from '/@/shared/components/checkbox/checkbox';
import { Group } from '/@/shared/components/group/group';
import { Icon } from '/@/shared/components/icon/icon';
import { TextInput } from '/@/shared/components/text-input/text-input';
const ipc = isElectron() ? window.api.ipc : null;
@ -92,18 +95,6 @@ const BINDINGS_MAP: Record<BindingActions, string> = {
zoomOut: i18n.t('setting.hotkey', { context: 'zoomOut', postProcess: 'sentenceCase' }),
};
const HotkeysContainer = styled.div`
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: center;
width: 100%;
button {
padding: 0 1rem;
}
`;
export const HotkeyManagerSettings = () => {
const { t } = useTranslation();
const { bindings, globalMediaHotkeys } = useHotkeySettings();
@ -247,11 +238,11 @@ export const HotkeyManagerSettings = () => {
})}
title={t('setting.applicationHotkeys', { postProcess: 'sentenceCase' })}
/>
<HotkeysContainer>
<div className={styles.container}>
{filteredBindings.map((binding) => (
<Group
key={`hotkey-${binding}`}
noWrap
wrap="nowrap"
>
<TextInput
readOnly
@ -259,8 +250,8 @@ export const HotkeyManagerSettings = () => {
value={BINDINGS_MAP[binding as keyof typeof BINDINGS_MAP]}
/>
<TextInput
icon={<RiKeyboardBoxLine />}
id={`hotkey-${binding}`}
leftSection={<Icon icon="keyboard" />}
onBlur={() => setSelected(null)}
onChange={() => {}}
onKeyDownCapture={(e) => {
@ -268,6 +259,16 @@ export const HotkeyManagerSettings = () => {
handleSetHotkey(binding as BindingActions, e);
}}
readOnly
rightSection={
<ActionIcon
icon="edit"
onClick={() => {
setSelected(binding as BindingActions);
document.getElementById(`hotkey-${binding}`)?.focus();
}}
variant="transparent"
/>
}
style={{
opacity: selected === (binding as BindingActions) ? 0.8 : 1,
outline: duplicateHotkeyMap.includes(
@ -287,7 +288,7 @@ export const HotkeyManagerSettings = () => {
onChange={(e) =>
handleSetGlobalHotkey(binding as BindingActions, e)
}
size="xl"
size="md"
style={{
opacity: bindings[binding as keyof typeof BINDINGS_MAP]
.allowGlobal
@ -296,25 +297,19 @@ export const HotkeyManagerSettings = () => {
}}
/>
)}
<Button
onClick={() => {
setSelected(binding as BindingActions);
document.getElementById(`hotkey-${binding}`)?.focus();
}}
variant="default"
w={100}
>
<RiEditLine />
</Button>
<Button
onClick={() => handleClearHotkey(binding as BindingActions)}
variant="default"
>
<RiDeleteBinLine />
</Button>
{bindings[binding as keyof typeof BINDINGS_MAP].hotkey && (
<ActionIcon
icon="x"
iconProps={{
color: 'error',
}}
onClick={() => handleClearHotkey(binding as BindingActions)}
variant="transparent"
/>
)}
</Group>
))}
</HotkeysContainer>
</div>
</>
);
};