[PCCompat > Components > Settings] Category: rewrite

moduleWrappers/powercord/components/settings/buttonItem.js

@@ -0,0 +1,36 @@
+const { React } = goosemodScope.webpackModules.common;
+
+import FormItem from './formItem';
+
+const OriginalButton = goosemodScope.webpackModules.findByProps('Sizes', 'Colors', 'Looks', 'DropdownSizes');
+
+const Tooltip = goosemodScope.webpackModules.findByDisplayName('Tooltip');
+
+
+export default class ButtonItem extends React.PureComponent {
+  render() {
+    const title = this.props.children;
+    delete this.props.children;
+
+    return React.createElement(FormItem, {
+        title,
+        note: this.props.note,
+        required: this.props.required
+      },
+
+      React.createElement(Tooltip, {
+        text: this.props.tooltipText,
+        position: this.props.tooltipPosition,
+        shouldShow: this.props.tooltipText !== ''
+      }, () => React.createElement(OriginalButton,
+        {
+          color: this.props.success ? OriginalButton.Colors.GREEN : (this.props.color || OriginalButton.Colors.BRAND),
+          disabled: this.props.disabled,
+          onClick: () => this.props.onClick(),
+          style: { marginLeft: 5 }
+        },
+        this.props.button
+      ))
+    );
+  }
+}

moduleWrappers/powercord/components/settings/category.js

@@ -0,0 +1,59 @@
+const { React } = goosemodScope.webpackModules.common;
+
+import FormItem from './formItem';
+
+const FormClasses = goosemodScope.webpackModules.findByProps('title', 'dividerDefault');
+const FormTextClasses = goosemodScope.webpackModules.findByProps('formText', 'placeholder');
+
+const FormText = goosemodScope.webpackModules.findByDisplayName('FormText');
+
+export default class Category extends React.PureComponent {
+  render() {
+    const children = this.props.opened ? this.props.children : [];
+
+    return React.createElement(FormItem, {
+        title: React.createElement('div', {},
+          React.createElement('svg', {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            width: "24",
+            height: "24",
+            style: {
+              transform: this.props.opened ? 'rotate(90deg)' : '',
+              marginRight: '10px'
+            }
+          },
+            React.createElement('path', {
+              fill: 'var(--header-primary)',
+              d: 'M9.29 15.88L13.17 12 9.29 8.12c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3c-.39.39-1.02.39-1.41 0-.38-.39-.39-1.03 0-1.42z'
+            }),
+          ),
+
+          React.createElement('label', {
+            class: FormClasses.title,
+            style: {
+              textTransform: 'none',
+              display: 'inline',
+              verticalAlign: 'top',
+            }
+          },
+            this.props.name,
+
+            React.createElement(FormText, {
+              className: FormTextClasses.description,
+              style: {
+                marginLeft: '34px'
+              }
+            }, this.props.description)
+          ),
+        ),
+
+        onClick: () => {
+          this.props.onChange(!this.props.opened);
+        }
+      },
+
+      ...children
+    );
+  }
+}

moduleWrappers/powercord/components/settings/divider.js

@@ -0,0 +1,12 @@
+const { React } = goosemodScope.webpackModules.common;
+
+const FormDivider = goosemodScope.webpackModules.findByDisplayName('FormDivider');
+const SettingsFormClasses = goosemodScope.webpackModules.findByProps('dividerDefault', 'titleDefault');
+
+export default class Divider extends React.PureComponent {
+  render() {
+    return React.createElement(FormDivider, {
+      className: SettingsFormClasses.dividerDefault
+    });
+  }
+}

moduleWrappers/powercord/components/settings/formItem.js

@@ -1,6 +1,6 @@
 const { React } = goosemodScope.webpackModules.common;
 
-const OriginalTextInput = goosemodScope.webpackModules.findByDisplayName('TextInput');
+import Divider from './divider';
 
 const OriginalFormItem = goosemodScope.webpackModules.findByDisplayName('FormItem');
 const OriginalFormText = goosemodScope.webpackModules.findByDisplayName('FormText');
@@ -9,23 +9,15 @@ const Flex = goosemodScope.webpackModules.findByDisplayName('Flex');
 const Margins = goosemodScope.webpackModules.findByProps('marginTop20', 'marginBottom20');
 const FormClasses = goosemodScope.webpackModules.findByProps('formText', 'description');
 
-const FormDivider = goosemodScope.webpackModules.findByDisplayName('FormDivider');
-const SettingsFormClasses = goosemodScope.webpackModules.findByProps('dividerDefault', 'titleDefault');
-
-class Divider extends React.PureComponent {
-  render() {
-    return React.createElement(FormDivider, {
-      className: SettingsFormClasses.dividerDefault
-    });
-  }
-}
-
-class FormItem extends React.PureComponent {
+export default class FormItem extends React.PureComponent {
   render() {
     return React.createElement(OriginalFormItem, {
         title: this.props.title,
         required: this.props.required,
-        className: [Flex.Direction.VERTICAL, Flex.Justify.START, Flex.Align.STRETCH, Flex.Wrap.NO_WRAP, Margins.marginBottom20].join(' ')
+        className: [Flex.Direction.VERTICAL, Flex.Justify.START, Flex.Align.STRETCH, Flex.Wrap.NO_WRAP, Margins.marginBottom20].join(' '),
+        onClick: () => {
+          this.props.onClick();
+        }
       },
 
       this.props.children,
@@ -37,29 +29,4 @@ class FormItem extends React.PureComponent {
       React.createElement(Divider)
     );
   }
-}
-
-class TextInput extends React.PureComponent {
-  render() {
-    const title = this.props.children;
-    delete this.props.children;
-
-    return React.createElement(FormItem, {
-        title,
-        note: this.props.note,
-        required: this.props.required,
-
-        noteHasMargin: true
-      },
-
-      React.createElement(OriginalTextInput, {
-        ...this.props
-      })
-    );
-  }
-}
-
-module.exports = {
-  FormItem,
-  TextInput
-};
+}

moduleWrappers/powercord/components/settings/index.js

@@ -0,0 +1,8 @@
+export { default as FormItem } from './formItem';
+export { default as TextInput } from './textInput';
+export { default as SliderInput } from './sliderInput';
+export { default as Divider } from './divider';
+export { default as ButtonItem } from './buttonItem';
+export { default as Category } from './category';
+
+export const SwitchItem = goosemodScope.webpackModules.findByDisplayName('SwitchItem');

moduleWrappers/powercord/components/settings/sliderInput.js

@@ -0,0 +1,25 @@
+const { React } = goosemodScope.webpackModules.common;
+
+import FormItem from './formItem';
+
+const OriginalSlider = goosemodScope.webpackModules.findByDisplayName('Slider');
+const Margins = goosemodScope.webpackModules.findByProps('marginTop20', 'marginBottom20');
+
+export default class TextInput extends React.PureComponent {
+  render() {
+    const title = this.props.children;
+    delete this.props.children;
+
+    return React.createElement(FormItem, {
+        title,
+        note: this.props.note,
+        required: this.props.required
+      },
+
+      React.createElement(OriginalSlider, {
+        ...this.props,
+        className: Margins.marginTop20 + (this.props.className ? (' ' + this.props.className) : '')
+      })
+    );
+  }
+}

moduleWrappers/powercord/components/settings/textInput.js

@@ -0,0 +1,25 @@
+const { React } = goosemodScope.webpackModules.common;
+
+import FormItem from './formItem';
+
+const OriginalTextInput = goosemodScope.webpackModules.findByDisplayName('TextInput');
+
+export default class TextInput extends React.PureComponent {
+  render() {
+    const title = this.props.children;
+    delete this.props.children;
+
+    return React.createElement(FormItem, {
+        title,
+        note: this.props.note,
+        required: this.props.required,
+
+        noteHasMargin: true
+      },
+
+      React.createElement(OriginalTextInput, {
+        ...this.props
+      })
+    );
+  }
+}

moduleWrappers/powercord/entities.js

@@ -5,12 +5,10 @@ export class Plugin {
     this.stylesheets = [];
   }
 
-  loadStylesheet(path) {
-    const url = `https://raw.githubusercontent.com/${this.github.repo}/HEAD/${path}`; // HEAD essentially means default branch
-
+  loadStylesheet(css) {
     const el = document.createElement('style');
 
-    el.appendChild(document.createTextNode(`@import url(${url})`)); // Load the stylesheet via style element w/ CSS @import
+    el.appendChild(document.createTextNode(css)); // Load the stylesheet via style element w/ CSS text
 
     document.head.appendChild(el);
   

moduleWrappers/powercord/global/commands.js

@@ -1,5 +1,5 @@
 const sendMessage = goosemodScope.webpackModules.findByProps('sendMessage', 'receiveMessage').sendMessage;
-const getChannelId = goosemod.webpackModules.findByProps('getChannelId').getChannelId;
+const getChannelId = goosemodScope.webpackModules.findByProps('getChannelId').getChannelId;
 
 export const registerCommand = ({ command, alias, description, usage, executor }) => {
   // TODO: implement alias

moduleWrappers/powercord/util.js

@@ -1,3 +1,16 @@
+const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+
 module.exports = {
+  sleep,
+
+  waitFor: async (query) => {
+    while (true) {
+      const el = document.querySelector(query);
+      if (el) return el;
+
+      await sleep(5);
+    }
+  },
+
   ...goosemodScope.reactUtils // Export GooseMod React utils
 };

package.json

@@ -33,7 +33,7 @@
     "powercord/injector": "./moduleWrappers/powercord/injector.js",
     "powercord/webpack": "./moduleWrappers/powercord/webpack.js",
     "powercord/util": "./moduleWrappers/powercord/util.js",
-    "powercord/components/settings": "./moduleWrappers/powercord/components/settings.js",
+    "powercord/components/settings": "./moduleWrappers/powercord/components/settings/index.js",
 
     "_powercord/global": "./moduleWrappers/powercord/global/index.js"
   },

src/preprocessors/pcPlugin.js

@@ -1,4 +1,5 @@
 import { readFileSync, writeFileSync, mkdirSync, rmSync } from 'fs';
+import sass from 'sass';
 
 export default (manifestPath, repo) => {
   const pcManifest = JSON.parse(readFileSync(manifestPath, 'utf8'));
@@ -17,9 +18,26 @@ export default (manifestPath, repo) => {
   rmSync(manifestPath);
   mkdirSync(manifestPath);
 
-  const content = readFileSync(pcManifest.main || 'index.js', 'utf8');//.replace(/\\/g, '\\\\').replace(/`/g, '\\`');
+  let content = readFileSync(pcManifest.main || 'index.js', 'utf8');//.replace(/\\/g, '\\\\').replace(/`/g, '\\`');
 
-  const jsCode = `import powercord from '_powercord/global';\n` + content.replace(`module.exports = class`, `export default new class`);
+  content = content.replace(`module.exports = `, `export default new `);
+  content = content.replace(/this\.loadStylesheet\(['"`](.*)['"`]\)/g, (_, relative) => {
+    const path = manifestPath.split('/').slice(0, -1).concat('').join('/') + relative;
+
+    let css;
+
+    if (path.split('.').pop() === 'scss') {
+      css = (sass.renderSync({ file: path })).css.toString('utf8');
+    } else {
+      css = readFileSync(sync);
+    }
+
+    css = css.replace(/\\/g, '\\\\').replace(/\`/g, '\`'); // Escape backticks
+
+    return `this.loadStylesheet(\`${css}\`)`;
+  });
+
+  const jsCode = `import powercord from '_powercord/global';\n` + content;
 
   writeFileSync(`${manifestPath}/goosemodModule.json`, JSON.stringify(manifest));
   writeFileSync(`${manifestPath}/../index.js`, jsCode);