Give setting components a facelift
This commit is contained in:
Zerebos
parent
25d3dcfac6
commit
db908b71e4
|
|
@ -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);
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ export default function Color({value: initialValue, onChange, colors = defaultCo
|
|||
const intValue = resolveColor(value, false);
|
||||
return <div className={`bd-color-picker-container ${disabled ? "bd-color-picker-disabled" : ""}`}>
|
||||
<div className="bd-color-picker-controls">
|
||||
<DiscordModules.Tooltip text="Default" position="bottom">
|
||||
{defaultValue && <DiscordModules.Tooltip text="Default" position="bottom">
|
||||
{props => (
|
||||
<div {...props} className="bd-color-picker-default" style={{backgroundColor: resolveColor(defaultValue)}} onClick={() => change({target: {value: defaultValue}})}>
|
||||
{intValue === resolveColor(defaultValue, false)
|
||||
|
|
@ -77,7 +77,7 @@ export default function Color({value: initialValue, onChange, colors = defaultCo
|
|||
}
|
||||
</div>
|
||||
)}
|
||||
</DiscordModules.Tooltip>
|
||||
</DiscordModules.Tooltip>}
|
||||
<DiscordModules.Tooltip text={Strings.Settings.customColor} position="bottom">
|
||||
{props => (
|
||||
<div className="bd-color-picker-custom">
|
||||
|
|
@ -87,7 +87,7 @@ export default function Color({value: initialValue, onChange, colors = defaultCo
|
|||
)}
|
||||
</DiscordModules.Tooltip>
|
||||
</div>
|
||||
<div className="bd-color-picker-swatch">
|
||||
{colors?.length > 0 && <div className="bd-color-picker-swatch">
|
||||
{
|
||||
colors.map((int, index) => (
|
||||
<div key={index} className="bd-color-picker-swatch-item" style={{backgroundColor: resolveColor(int)}} onClick={() => change({target: {value: int}})}>
|
||||
|
|
@ -98,6 +98,6 @@ export default function Color({value: initialValue, onChange, colors = defaultCo
|
|||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>}
|
||||
</div>;
|
||||
}
|
||||
|
|
@ -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 <div className={`bd-file-input-wrap ${disabled ? "bd-file-input-disabled" : ""}`}>
|
||||
<Button size={Button.Sizes.ICON} look={Button.Looks.FILLED} color={Button.Colors.PRIMARY} className="bd-file-input-browse" onClick={onClick}>Browse</Button>
|
||||
<input onChange={change} type="file" className="bd-file-input" multiple={multiple} accept={accept} disabled={disabled} ref={inputRef} />
|
||||
{clearable && <Button size={Button.Sizes.ICON} look={Button.Looks.BLANK} onClick={clear} className="bd-file-input-clear"><Close size="24px" /></Button>}
|
||||
</div>;
|
||||
|
|
|
|||
|
|
@ -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 <div className={"bd-keybind-wrap" + (state.isRecording ? " recording" : "") + (disabled ? " bd-keybind-disabled" : "")} onClick={onClick}>
|
||||
<input readOnly={true} type="text" className="bd-keybind-input" value={displayValue} disabled={disabled} />
|
||||
<div className="bd-keybind-controls">
|
||||
<Button size={Button.Sizes.ICON} look={Button.Looks.FILLED} color={state.isRecording ? Button.Colors.RED : Button.Colors.BRAND} className="bd-keybind-record" onClick={onClick}><Keyboard size="24px" /></Button>
|
||||
<Button size={Button.Sizes.ICON} look={Button.Looks.FILLED} color={state.isRecording ? Button.Colors.RED : Button.Colors.PRIMARY} className="bd-keybind-record" onClick={onClick}><Keyboard size="24px" /></Button>
|
||||
<input readOnly={true} type="text" className="bd-keybind-input" value={displayValue} placeholder="No keybind set" disabled={disabled} />
|
||||
{clearable && <Button size={Button.Sizes.ICON} look={Button.Looks.BLANK} onClick={clearKeybind} className="bd-keybind-clear"><Close size="24px" /></Button>}
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
|
|
@ -17,7 +17,7 @@ export default function Radio({name, value, options, onChange, disabled}) {
|
|||
|
||||
function renderOption(opt, i) {
|
||||
const isSelected = index === i;
|
||||
return <label className={"bd-radio-option" + (isSelected ? " bd-radio-selected" : "")}>
|
||||
return <label className={"bd-radio-option" + (isSelected ? " bd-radio-selected" : "")} style={{borderColor: opt.color ?? "transparent"}}>
|
||||
<input onChange={change} type="radio" name={name} checked={isSelected} value={i} disabled={disabled} />
|
||||
{/* <span className="bd-radio-button"></span> */}
|
||||
<RadioIcon className="bd-radio-icon" size="24" checked={isSelected} />
|
||||
|
|
|
|||
|
|
@ -47,5 +47,5 @@ export function buildSetting(setting) {
|
|||
if (setting.type == "color") children = <Color {...setting} />;
|
||||
if (setting.type == "custom") children = setting.children;
|
||||
if (!children) return null;
|
||||
return <Item id={setting.id} inline={setting.hasOwnProperty("inline") ? setting.inline : setting.type !== "radio" && setting.type !== "color" && setting.type !== "slider"} key={setting.id} name={setting.name} note={setting.note}>{children}</Item>;
|
||||
return <Item id={setting.id} inline={setting.hasOwnProperty("inline") ? setting.inline : setting.type !== "radio"} key={setting.id} name={setting.name} note={setting.note}>{children}</Item>;
|
||||
}
|
||||
Loading…
Reference in New Issue