From 63fd97d5577a0f4a44af108d4a8162d716aaf1ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=95=E3=82=BA=E3=82=AD?= Date: Fri, 5 Mar 2021 23:06:43 +0100 Subject: [PATCH] Updated Comfy Theme - Added custom text input element - Uupdated settings declarations --- comfy-theme/custom-settings.js | 57 +++++++++++++++++++++++++++++++++ comfy-theme/goosemodModule.json | 4 +-- comfy-theme/index.js | 25 ++++++++++++--- 3 files changed, 79 insertions(+), 7 deletions(-) create mode 100644 comfy-theme/custom-settings.js diff --git a/comfy-theme/custom-settings.js b/comfy-theme/custom-settings.js new file mode 100644 index 0000000..3beffd0 --- /dev/null +++ b/comfy-theme/custom-settings.js @@ -0,0 +1,57 @@ +export function textInputField(text, subtext, placeholder, onApply, initialValue) { + let el = document.createElement('div'); + el.classList.add('marginBottom20-32qID7'); + + // Text field + let textEl = document.createElement('span'); + textEl.classList.add('titleDefault-a8-ZSr', 'title-31JmR4'); + textEl.style.float = 'left'; + textEl.innerHTML = text; + + let subtextEl = document.createElement('div'); + subtextEl.classList.add('colorStandard-2KCXvj', 'size14-e6ZScH', 'description-3_Ncsb', 'formText-3fs7AJ', 'note-1V3kyJ', 'modeDefault-3a2Ph1'); + subtextEl.innerHTML = subtext; + subtextEl.style.clear = 'both'; + + // Input field + let inputWrapEl = document.createElement('div'); + inputWrapEl.classList.add('inputWrapper-31_8H8', 'codeRedemptionInput-3JOJea'); + inputWrapEl.style.float = 'right'; + + let inputEl = document.createElement('input'); + inputEl.classList.add('inputDefault-_djjkz', 'input-cIJ7To'); + inputEl.placeholder = placeholder; + inputEl.type = 'text'; + inputEl.value = initialValue ? initialValue : ''; + + inputWrapEl.appendChild(inputEl); + + // Button field + let buttonEl = document.createElement('div'); + buttonEl.classList.add('button-38aScr', 'lookFilled-1Gx00P', 'colorBrand-3pXr91', 'sizeSmall-2cSMqn', 'grow-q77ONN'); + buttonEl.style.cursor = 'pointer'; + buttonEl.style.float = 'right'; + + buttonEl.onclick = () => { + onApply(inputEl.value); + }; + + let buttonContentEl = document.createElement('div'); + buttonContentEl.classList.add('contents-18-Yxp'); + buttonContentEl.textContent = 'Apply'; + + buttonEl.appendChild(buttonContentEl); + + // Divider + let dividerEl = document.createElement('div'); + dividerEl.classList.add('divider-3573oO', 'dividerDefault-3rvLe-'); + dividerEl.style.marginTop = subtext ? '20px' : '45px'; + + el.appendChild(textEl); + el.appendChild(buttonEl); + el.appendChild(inputWrapEl); + el.appendChild(subtextEl); + el.appendChild(dividerEl); + + return el; +} diff --git a/comfy-theme/goosemodModule.json b/comfy-theme/goosemodModule.json index 8437e06..ee7d85a 100644 --- a/comfy-theme/goosemodModule.json +++ b/comfy-theme/goosemodModule.json @@ -2,10 +2,10 @@ "main": "index.js", "name": "Comfy Theme Pure", - "description": "Direct port of NYRI4's Comfy Discord theme to GooseMod", + "description": "Port of NYRI4's Comfy Discord theme to GooseMod", "tags": ["theme"], "authors": ["265924886461939712", "186496078273708033"], - "version": "1.0.0" + "version": "1.1.0" } diff --git a/comfy-theme/index.js b/comfy-theme/index.js index 16e2aa2..93c43b4 100644 --- a/comfy-theme/index.js +++ b/comfy-theme/index.js @@ -1,9 +1,11 @@ -import {version} from './goosemodModule.json'; - +import { createItem, removeItem } from '@goosemod/settings'; +import { version } from './goosemodModule.json'; +import { textInputField } from './custom-settings.js'; let comfy; let vars; +let settingsPage = "Comfy Theme"; let settings; let defaultSettings = { usrbgXoff: "-180px", @@ -99,12 +101,12 @@ export default { goosemodHandlers: { onImport: () => { comfy = document.createElement("style"); - comfy.innerText = "@import url('https://nyri4.github.io/Comfy/support/comfy.theme.css')"; + comfy.innerText = "@import url('https://nyri4.github.io/Comfy/betterdiscord/comfy.theme.css')"; document.head.appendChild(comfy); }, onLoadingFinished: () => { - goosemodScope.settings.createItem('Comfy Theme', [ + createItem(settingsPage, [ `(${version})`, { type: "header", @@ -115,6 +117,19 @@ export default { text: "USRBG modal x offset", subtext: `Default: ${defaultSettings.usrbgXoff}`, }, + { + type: "custom", + element: textInputField( + "USRBG modal x offset", + `Default: ${defaultSettings.usrbgXoff}`, + defaultSettings.usrbgXoff, + value => { + settings.usrbgXoff = value; + updateVars(); + }, + settings ? settings.usrbgXoff : "" + ), + }, { type: "text", text: "USRBG modal y offset", @@ -269,7 +284,7 @@ export default { }, onRemove: () => { - goosemodScope.settings.removeItem("Comfy Theme"); + removeItem(settingsPage); comfy.remove(); vars.remove();