diff --git a/index.tsx b/index.tsx index 5f87586..7b764c9 100644 --- a/index.tsx +++ b/index.tsx @@ -1,3 +1,5 @@ +import "./style.css"; + import { definePluginSettings } from "@api/Settings"; import { Devs } from "@utils/constants"; import definePlugin, { OptionType } from "@utils/types"; @@ -110,11 +112,20 @@ function InputDeviceComponent() { } function VoiceSettings() { + const [showSettings, setShowSettings] = useState(Settings.plugins.VCPanelSettings.uncollapseSettingsByDefault); return
- {Settings.plugins.VCPanelSettings.outputVolume && } - {Settings.plugins.VCPanelSettings.inputVolume && } - {Settings.plugins.VCPanelSettings.outputDevice && } - {Settings.plugins.VCPanelSettings.inputDevice && } +
+ { setShowSettings(!showSettings); }}>{!showSettings ? "► Settings" : "▼ Hide"} +
+ + { + showSettings && <> + {Settings.plugins.VCPanelSettings.outputVolume && } + {Settings.plugins.VCPanelSettings.inputVolume && } + {Settings.plugins.VCPanelSettings.outputDevice && } + {Settings.plugins.VCPanelSettings.inputDevice && } + + }
; } @@ -123,46 +134,67 @@ export default definePlugin({ description: "Control voice settings right from the voice panel", authors: [Devs.nin0dev], settings: definePluginSettings({ - showOutputVolumeHeader: { + title1: { + type: OptionType.COMPONENT, + component: () => Appearance, + description: "" + }, + uncollapseSettingsByDefault: { type: OptionType.BOOLEAN, - default: true, - description: "Show header above output volume slider" + default: false, + description: "Automatically uncollapse voice settings by default" + }, + title2: { + type: OptionType.COMPONENT, + component: () => Settings to show, + description: "" }, outputVolume: { type: OptionType.BOOLEAN, default: true, description: "Show an output volume slider" }, - showInputVolumeHeader: { - type: OptionType.BOOLEAN, - default: true, - description: "Show header above input volume slider" - }, inputVolume: { type: OptionType.BOOLEAN, default: true, description: "Show an input volume slider" }, - showOutputDeviceHeader: { - type: OptionType.BOOLEAN, - default: false, - description: "Show header above output device slider" - }, outputDevice: { type: OptionType.BOOLEAN, default: true, description: "Show an output device selector" }, + + inputDevice: { + type: OptionType.BOOLEAN, + default: true, + description: "Show an input device selector" + }, + title3: { + type: OptionType.COMPONENT, + component: () => Headers to show, + description: "" + }, + showOutputVolumeHeader: { + type: OptionType.BOOLEAN, + default: true, + description: "Show header above output volume slider" + }, + showInputVolumeHeader: { + type: OptionType.BOOLEAN, + default: true, + description: "Show header above input volume slider" + }, + showOutputDeviceHeader: { + type: OptionType.BOOLEAN, + default: false, + description: "Show header above output device slider" + }, showInputDeviceHeader: { type: OptionType.BOOLEAN, default: false, description: "Show header above input device slider" }, - inputDevice: { - type: OptionType.BOOLEAN, - default: true, - description: "Show an input device selector" - } }), renderVoiceSettings() { return ; }, patches: [ diff --git a/style.css b/style.css new file mode 100644 index 0000000..f546574 --- /dev/null +++ b/style.css @@ -0,0 +1,3 @@ +.vc-panelsettings-underline-on-hover:hover { + text-decoration: underline; +}