Updated Comfy Theme

- Added custom text input element
- Uupdated settings declarations

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;
+}

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"
 }

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();