From db908b71e4ca52fb8fc7d7fd9365e0d24d37fe11 Mon Sep 17 00:00:00 2001 From: Zerebos Date: Sun, 8 Dec 2024 20:40:57 -0500 Subject: [PATCH] Give setting components a facelift --- renderer/src/modules/api/ui.js | 4 +- renderer/src/modules/webpackmodules.js | 8 +-- renderer/src/styles/ui/colorpicker.css | 35 ++++++++--- renderer/src/styles/ui/file.css | 61 +++++++++++-------- renderer/src/styles/ui/keybind.css | 29 +++++---- renderer/src/styles/ui/radio.css | 3 +- renderer/src/ui/settings/components/color.jsx | 8 +-- renderer/src/ui/settings/components/file.jsx | 5 ++ .../src/ui/settings/components/keybind.jsx | 12 ++-- renderer/src/ui/settings/components/radio.jsx | 2 +- renderer/src/ui/settings/group.jsx | 2 +- 11 files changed, 102 insertions(+), 67 deletions(-) diff --git a/renderer/src/modules/api/ui.js b/renderer/src/modules/api/ui.js index b3a8d53e..9ba2f8ab 100644 --- a/renderer/src/modules/api/ui.js +++ b/renderer/src/modules/api/ui.js @@ -155,10 +155,10 @@ const UI = { * @param {ReactElement} [setting.children] Only used for "custom" type * @param {CallableFunction} [setting.onChange] Callback when the value changes (only argument is new value) * @param {boolean} [setting.disabled=false] Whether this setting is disabled - * @param {boolean} [setting.inline=true] Whether the input should render inline with the name (this is false by default for slider, color, and radio types) + * @param {boolean} [setting.inline=true] Whether the input should render inline with the name (this is false by default for radio type) * @returns A SettingItem with a an input as the child */ - buildSetting(setting) { + buildSettingItem(setting) { return buildSetting(setting); }, diff --git a/renderer/src/modules/webpackmodules.js b/renderer/src/modules/webpackmodules.js index 674642af..13db3e25 100644 --- a/renderer/src/modules/webpackmodules.js +++ b/renderer/src/modules/webpackmodules.js @@ -119,8 +119,8 @@ export class Filters { * @returns {module:WebpackModules.Filters~filter} - Combinatory filter of all arguments */ static combine(...filters) { - return module => { - return filters.every(filter => filter(module)); + return (exports, module, id) => { + return filters.every(filter => filter(exports, module, id)); }; } } @@ -515,7 +515,7 @@ export default class WebpackModules { const listeners = [...this.listeners]; for (let i = 0; i < listeners.length; i++) { - try {listeners[i](exports);} + try {listeners[i](exports, module, module.id);} catch (error) { Logger.stacktrace("WebpackModules", "Could not fire callback listener:", error); } @@ -525,7 +525,7 @@ export default class WebpackModules { Logger.stacktrace("WebpackModules", "Could not patch pushed module", error); } finally { - require.m[moduleId] = originalModule; + require.m[moduleId] = originalModule; } }; diff --git a/renderer/src/styles/ui/colorpicker.css b/renderer/src/styles/ui/colorpicker.css index b0b46aa2..3aac2fbf 100644 --- a/renderer/src/styles/ui/colorpicker.css +++ b/renderer/src/styles/ui/colorpicker.css @@ -1,5 +1,6 @@ .bd-color-picker-container { display: flex; + justify-content: center; } .bd-color-picker-container.bd-color-picker-disabled { @@ -20,8 +21,8 @@ .bd-color-picker-default { cursor: pointer; - width: 72px; - height: 54px; + width: 75px; + height: 60px; border-radius: 4px; margin-right: 9px; display: flex; @@ -39,13 +40,14 @@ position: absolute; top: 5px; right: 5px; + pointer-events: none; } .bd-color-picker { outline: none; - width: 70px; + width: 75px; border: none; - height: 54px; + height: 60px; margin-top: 1px; border-radius: 4px; cursor: pointer; @@ -60,16 +62,35 @@ flex-wrap: wrap; align-content: flex-start; margin-left: 5px !important; - max-width: 340px; + max-width: 330px; } .bd-color-picker-swatch-item { cursor: pointer; border-radius: 4px; - width: 23px; - height: 23px; + width: 15px; + height: 15px; margin: 4px; display: flex; align-items: center; justify-content: center; +} + + +.bd-setting-item.inline .bd-color-picker-swatch { + max-width: 220px; + margin-top: 1px; +} + + +.bd-setting-item.inline .bd-color-picker-default, +.bd-setting-item.inline .bd-color-picker { + width: 50px; + height: 40px +} + +.bd-setting-item.inline .bd-color-picker-swatch-item { + height: 18px; + width: 18px; + margin: 2px 2px; } \ No newline at end of file diff --git a/renderer/src/styles/ui/file.css b/renderer/src/styles/ui/file.css index 53caff84..4c3ebe6b 100644 --- a/renderer/src/styles/ui/file.css +++ b/renderer/src/styles/ui/file.css @@ -1,48 +1,54 @@ +.bd-setting-item.inline .bd-file-input-wrap { + max-width: 300px; +} + .bd-file-input-wrap { + display: flex; + align-items: center; + gap: 5px; position: relative; + min-width: 250px; + box-sizing: border-box; + border-radius: 3px; + background-color: hsla(0, calc(var(--saturation-factor, 1)*0%), 0%, .1); + border: 1px solid hsla(0, calc(var(--saturation-factor, 1)*0%), 0%, .3); + padding: 0 4px; + height: 40px; } .bd-file-input { + flex: 1; + outline: none; color: var(--text-normal); - background-color: var(--input-background); - min-width: 250px; - width: 100%; font-size: 16px; - border-radius: 3px; - padding: 10px; - height: 40px; - box-sizing: border-box; - overflow: hidden; - border: none; + font-weight: 600; + width: 100%; + cursor: pointer; } .bd-file-input::-webkit-file-upload-button { - color: white; - background: #3E82E5; - outline: 0; - border: 0; - padding: 12px 16px!important; - margin-top: -10px; - margin-left: -10px; - margin-right: 10px; - bottom: 0; - border-radius: 3px 0 0 3px; - font-size: 14px; - font-weight: 500; - cursor: pointer; + height: 0; + width: 0; + padding: 0 !important; + margin: 0; + visibility: hidden; user-select: none; + pointer-events: none; +} + +.bd-file-input-wrap .bd-file-input-browse { + padding: 7px 16px; } .bd-file-input-wrap .bd-file-input-clear { - position: absolute; - top: 50%; - right: 5px; - transform: translateY(-50%); + margin-left: 5px; + /* background: none!important; */ opacity: 0.5; + padding-right: 4px!important; } .bd-file-input-wrap .bd-file-input-clear:hover { - background: none; + /* background: none; */ opacity: 1; } @@ -56,6 +62,7 @@ opacity: 0.5; } +.bd-file-input-wrap.bd-file-input-disabled .bd-file-input-browse, .bd-file-input-wrap.bd-file-input-disabled .bd-file-input, .bd-file-input-wrap.bd-file-input-disabled .bd-file-input-clear { pointer-events: none; diff --git a/renderer/src/styles/ui/keybind.css b/renderer/src/styles/ui/keybind.css index ae019e19..c3659652 100644 --- a/renderer/src/styles/ui/keybind.css +++ b/renderer/src/styles/ui/keybind.css @@ -1,11 +1,14 @@ .bd-keybind-wrap { + display: flex; + align-items: center; + gap: 5px; position: relative; min-width: 250px; box-sizing: border-box; border-radius: 3px; background-color: hsla(0, calc(var(--saturation-factor, 1)*0%), 0%, .1); border: 1px solid hsla(0, calc(var(--saturation-factor, 1)*0%), 0%, .3); - padding: 10px; + padding: 0 4px; height: 40px; cursor: pointer; } @@ -20,6 +23,7 @@ } .bd-keybind-wrap input { + flex: 1; outline: none; border: none; pointer-events: none; @@ -27,7 +31,11 @@ background: none; font-size: 16px; text-transform: uppercase; - font-weight: 700; + font-weight: 600; +} + +.bd-keybind-wrap input::placeholder { + text-transform: capitalize; } .bd-keybind-wrap.recording { @@ -38,28 +46,23 @@ box-shadow: 0 0 6px hsla(359, calc(var(--saturation-factor, 1)*82.6%), 59.4%, .3); } -.bd-keybind-controls { - position: absolute; - right: 5px; - top: 3px; - display: flex; - align-items: center; - gap: 5px; +.bd-keybind-wrap.recording input { + color: hsl(359, calc(var(--saturation-factor, 1)*82.6%), 59.4%) } -.bd-keybind-controls .bd-keybind-record { - padding: 4px 8px; +.bd-keybind-wrap .bd-keybind-record { + padding: 3px 8px; } .bd-keybind-clear { margin-left: 5px; - background: none!important; + /* background: none!important; */ opacity: 0.5; padding-right: 4px!important; } .bd-keybind-clear:hover { - background: none; + /* background: none; */ opacity: 1; } diff --git a/renderer/src/styles/ui/radio.css b/renderer/src/styles/ui/radio.css index 6bfc2c6f..ad47f66e 100644 --- a/renderer/src/styles/ui/radio.css +++ b/renderer/src/styles/ui/radio.css @@ -5,7 +5,8 @@ .bd-radio-option { display: flex; align-items: center; - padding: 10px; + border-left: 3px solid transparent; + padding: 10px 10px 10px 7px; margin-bottom: 8px; cursor: pointer; user-select: none; diff --git a/renderer/src/ui/settings/components/color.jsx b/renderer/src/ui/settings/components/color.jsx index b655b9d7..e0b10b43 100644 --- a/renderer/src/ui/settings/components/color.jsx +++ b/renderer/src/ui/settings/components/color.jsx @@ -68,7 +68,7 @@ export default function Color({value: initialValue, onChange, colors = defaultCo const intValue = resolveColor(value, false); return
- + {defaultValue && {props => (
change({target: {value: defaultValue}})}> {intValue === resolveColor(defaultValue, false) @@ -77,7 +77,7 @@ export default function Color({value: initialValue, onChange, colors = defaultCo }
)} - + } {props => (
@@ -87,7 +87,7 @@ export default function Color({value: initialValue, onChange, colors = defaultCo )}
-
+ {colors?.length > 0 &&
{ colors.map((int, index) => (
change({target: {value: int}})}> @@ -98,6 +98,6 @@ export default function Color({value: initialValue, onChange, colors = defaultCo
)) } -
+
}
; } \ No newline at end of file diff --git a/renderer/src/ui/settings/components/file.jsx b/renderer/src/ui/settings/components/file.jsx index beb4d1ec..c071b5d7 100644 --- a/renderer/src/ui/settings/components/file.jsx +++ b/renderer/src/ui/settings/components/file.jsx @@ -28,7 +28,12 @@ export default function Filepicker({multiple, accept, clearable, onChange, disab actions.clear = clear; }, [clear, actions]); + const onClick = useCallback(() => { + inputRef.current?.click(); + }, []); + return
+ {clearable && }
; diff --git a/renderer/src/ui/settings/components/keybind.jsx b/renderer/src/ui/settings/components/keybind.jsx index dfd2d2f1..5d04cbe8 100644 --- a/renderer/src/ui/settings/components/keybind.jsx +++ b/renderer/src/ui/settings/components/keybind.jsx @@ -7,7 +7,7 @@ import Close from "@ui/icons/close"; const {useState, useCallback, useEffect} = React; -export default function Keybind({value: initialValue, onChange, max = 4, clearable = true, disabled}) { +export default function Keybind({value: initialValue, onChange, max = 4, clearable = false, disabled}) { const [state, setState] = useState({value: initialValue, isRecording: false, accum: []}); useEffect(() => { @@ -60,12 +60,10 @@ export default function Keybind({value: initialValue, onChange, max = 4, clearab }, [state, clearKeybind, disabled]); - const displayValue = state.isRecording ? "Recording..." : !state.value.length ? "N/A" : state.value.join(" + "); + const displayValue = !state.value.length ? "" : state.value.map(k => k === "Control" ? "Ctrl" : k).join(" + "); return
- -
- - {clearable && } -
+ + + {clearable && }
; } \ No newline at end of file diff --git a/renderer/src/ui/settings/components/radio.jsx b/renderer/src/ui/settings/components/radio.jsx index 6ec87205..5a6ef03b 100644 --- a/renderer/src/ui/settings/components/radio.jsx +++ b/renderer/src/ui/settings/components/radio.jsx @@ -17,7 +17,7 @@ export default function Radio({name, value, options, onChange, disabled}) { function renderOption(opt, i) { const isSelected = index === i; - return