lightcordwarez
/
BetterDiscordApp-rauenzi
mirror of https://github.com/rauenzi/BetterDiscordApp.git
1
0
Fork 0
Code Issues 3 Releases Wiki Activity

Improve CSS editor 

fixes #1645
This commit is contained in:
Zack Rauen 2023-08-29 00:18:30 -04:00
parent 0df0093e6b
commit b0a44153d0
5 changed files with 14 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
renderer/src/builtins/customcss.js
View File

@ -134,7 +134,7 @@ export default new class CustomCSS extends Builtin {
save: this.saveCSS.bind(this),
update: this.insertCSS.bind(this),
openNative: this.openNative.bind(this),
onChange: this.onChange.bind(this)
onChange: Utilities.debounce(this.onChange.bind(this), 500)
});
FloatingWindows.open({

15
renderer/src/styles/builtins/customcss.css
View File

@ -55,19 +55,8 @@
align-items: center;
}
.controls-section .checkbox-inner {
width: 14px;
height: 14px;
}
.controls-section .checkbox-inner .checkbox:checked + span::after {
left: 2px;
top: -2px;
}
.controls-section .checkbox-label {
font-size: 14px;
font-weight: 500;
.controls-section.controls-right {
gap: 15px;
}
.monaco-editor:not(.rename-box),

23
renderer/src/ui/customcss/checkbox.jsx
View File

@ -1,23 +0,0 @@
import React from "@modules/react";
const {useState, useCallback} = React;
export default function Checkbox({checked: initialState, text, onChange: notifyParent}) {
const [checked, setChecked] = useState(initialState);
const onClick = useCallback(() => {
notifyParent?.(!checked);
setChecked(!checked);
}, [notifyParent, checked]);
return <div className="checkbox-item">
<div className="checkbox-label label-JWQiNe da-label">{text}</div>
<div className="checkbox-wrapper checkbox-3kaeSU da-checkbox checkbox-3EVISJ da-checkbox" onClick={onClick}>
<div className="checkbox-inner checkboxInner-3yjcPe da-checkboxInner">
<input className="checkbox checkboxElement-1qV33p da-checkboxElement" checked={checked} type="checkbox" />
<span></span>
</div>
<span></span>
</div>
</div>;
}

2
renderer/src/ui/customcss/csseditor.jsx
View File

@ -61,7 +61,7 @@ export default forwardRef(function CssEditor({css, openNative, update, save, onC
{label: <Refresh size="18px" />, tooltip: Strings.CustomCSS.update, onClick: updateCss},
{label: <Save size="18px" />, tooltip: Strings.CustomCSS.save, onClick: saveCss},
{label: <Edit size="18px" />, tooltip: Strings.CustomCSS.openNative, onClick: popoutNative},
{label: Strings.Collections.settings.customcss.liveUpdate.name, type: "checkbox", onChange: toggleLiveUpdate, checked: Settings.get("settings", "customcss", "liveUpdate"), side: "right"},
{label: Strings.Collections.settings.customcss.liveUpdate.name, type: "boolean", onChange: toggleLiveUpdate, checked: Settings.get("settings", "customcss", "liveUpdate"), side: "right"},
openDetached && {label: <Detach size="18px" />, tooltip: Strings.CustomCSS.openDetached, onClick: popout, side: "right"}
].filter(c => c)}
value={css}

15
renderer/src/ui/customcss/editor.jsx
View File

@ -3,7 +3,9 @@ import DiscordModules from "@modules/discordmodules";
import Settings from "@modules/settingsmanager";
import Button from "../base/button";
import Checkbox from "./checkbox";
import Flex from "../base/flex";
import Switch from "../settings/components/switch";
import Text from "@ui/base/text";
const {useState, useCallback, useEffect, forwardRef, useMemo, useImperativeHandle} = React;
const ThemeStore = DiscordModules.ThemeStore;
@ -18,13 +20,16 @@ function makeButton(button, value) {
}}
</DiscordModules.Tooltip>;
}
function makeCheckbox(checkbox) {
return <Checkbox text={checkbox.label} onChange={checkbox.onChange} checked={checkbox.checked} />;
// <Switch disabled={disabled} checked={isEnabled} onChange={onChange} />
function makeSwitch(control) {
return <Flex align={Flex.Align.CENTER} style={{gap: "10px"}}>
<Text>{control.label}</Text>
<Switch onChange={control.onChange} checked={control.checked} />
</Flex>;
}
function buildControl(value, control) {
if (control.type == "checkbox") return makeCheckbox(control);
if (control.type == "boolean") return makeSwitch(control);
return makeButton(control, value);
}