popout

replugged-org · Sep 20, 2023 · 1437d03 · 1437d03
1 parent a1380df
commit 1437d03
Show file tree

Hide file tree

Showing 4 changed files with 169 additions and 22 deletions.
diff --git a/i18n/en-US.json b/i18n/en-US.json
@@ -62,6 +62,9 @@
     "REPLUGGED_PLUGIN": "Plugin",
     "REPLUGGED_PLUGINS": "Plugins",
     "REPLUGGED_QUICKCSS": "Quick CSS",
+    "REPLUGGED_QUICKCSS_CHANGES_APPLY": "Apply Changes",
+    "REPLUGGED_QUICKCSS_FOLDER_OPEN": "Open Quick CSS Folder",
+    "REPLUGGED_QUICKCSS_POPPED_OUT": "Quick CSS Editor has been popped out",
     "REPLUGGED_SETTINGS_ADVANCED_DESC": "Don't touch stuff in here if you don't know what you're doing. Unexpected things can happen to your cat.",
     "REPLUGGED_SETTINGS_BACKEND": "Backend URL",
     "REPLUGGED_SETTINGS_BACKEND_DESC": "URL used to fetch some assets and to query Replugged's REST API.",
@@ -167,7 +170,6 @@
     "REPLUGGED_LIST_RESULTS": "{count, plural, =1 {# match} other {# matches}}",
     "REPLUGGED_NO_ADDON_RESULTS": "No {type} matched your search.",
     "REPLUGGED_NO_ADDONS_INSTALLED": "No {type} installed.",
-    "REPLUGGED_QUICKCSS_CHANGES_APPLY": "Apply Changes",
     "REPLUGGED_SEARCH_FOR_ADDON": "Search for a {type}",
     "REPLUGGED_TOAST_ADDON_DISABLE_SUCCESS": "Disabled {name}",
     "REPLUGGED_TOAST_ADDON_ENABLE_SUCCESS": "Enabled {name}",
@@ -189,7 +191,6 @@
     "REPLUGGED_TOAST_INSTALLER_ADDON_INSTALL_SUCCESS": "{name} installed successfully.",
     "REPLUGGED_TOAST_INSTALLER_ADDON_FETCH_INFO_FAILED": "Failed to get info for addon.",
     "REPLUGGED_TOAST_INSTALLER_ADDON_CANCELED_INSTALL": "Install canceled.",
-    "REPLUGGED_QUICKCSS_FOLDER_OPEN": "Open Quick CSS Folder",
     "REPLUGGED_ADDON_AUTHORS_ONE": "by {author1}",
     "REPLUGGED_ADDON_AUTHORS_TWO": "by {author1} and {author2}",
     "REPLUGGED_ADDON_AUTHORS_THREE": "by {author1}, {author2}, and {author3}",

diff --git a/src/renderer/coremods/settings/index.tsx b/src/renderer/coremods/settings/index.tsx
@@ -4,7 +4,7 @@ import { Injector } from "@replugged";
 import { filters, waitForModule } from "src/renderer/modules/webpack";
 import type { Section as SectionType } from "src/types/coremods/settings";
 import { Divider, Header, Section, insertSections, settingsTools } from "./lib";
-import { General, Plugins, QuickCSS, Themes, Updater } from "./pages";
+import { General, Plugins, ConnectedQuickCSS, Themes, Updater } from "./pages";
 
 const injector = new Injector();
 
@@ -47,7 +47,7 @@ export function start(): void {
     Section({
       name: "rp-quickcss",
       label: () => Messages.REPLUGGED_QUICKCSS,
-      elem: QuickCSS,
+      elem: ConnectedQuickCSS as unknown as (args: unknown) => React.ReactElement,
     }),
     Section({
       name: "rp-plugins",

diff --git a/src/renderer/coremods/settings/pages/QuickCSS.css b/src/renderer/coremods/settings/pages/QuickCSS.css
@@ -1,3 +1,11 @@
+#replugged-quickcss-wrapper {
+  color: var(--text-normal);
+}
+
+#replugged-quickcss-wrapper[data-popout=true] {
+  width: 100% !important;
+}
+
 #replugged-quickcss-wrapper .cm-editor {
   border: 1px solid transparent;
   border-radius: 4px;
@@ -28,6 +36,11 @@
   max-height: 75vh;
 }
 
+/* TODO: Fix the height not working in popout */
+#replugged-quickcss-wrapper[data-popout=true] .cm-scroller {
+  max-height: 95vh;
+}
+
 #replugged-quickcss-wrapper .cm-scroller::-webkit-scrollbar {
   width: 10px;
   height: 0px;
@@ -38,3 +51,24 @@
   background-color: var(--scrollbar-thin-thumb);
   border-radius: 10px;
 }
+
+.replugged-quickcss-header {
+  height: 30px;
+  color: var(--text-normal);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding: 7px 15px;
+  background-color: var(--background-secondary);
+}
+/* Why do these have to be different in different windows.. */
+#replugged-quickcss-wrapper[data-popout=true] .replugged-quickcss-header {
+  height: 16px;
+}
+
+.replugged-quickcss-header span,
+.replugged-quickcss-header svg {
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/renderer/coremods/settings/pages/QuickCSS.tsx b/src/renderer/coremods/settings/pages/QuickCSS.tsx
@@ -1,13 +1,17 @@
-import { React, toast } from "@common";
+import { React, flux, toast } from "@common";
 import { Messages } from "@common/i18n";
 import { EditorView, basicSetup } from "codemirror";
 import { EditorState } from "@codemirror/state";
 import { css } from "@codemirror/lang-css";
 import { githubDark, githubLight } from "./codemirror-github";
 import { webpack } from "@replugged";
-import { Button, Divider, Flex, Text } from "@components";
+import { Button, ButtonItem, Divider, Flex, Text, Tooltip } from "@components";
 import "./QuickCSS.css";
 import { generalSettings } from "./General";
+import { ReactComponent } from "src/types";
+import { Store } from "@common/flux";
+
+const { connectStores } = flux;
 
 interface UseCodeMirrorOptions {
   value?: string;
@@ -22,6 +26,30 @@ type ThemeModule = {
   removeChangeListener: (listener: () => unknown) => unknown;
 };
 
+const PopoutModule = await webpack.waitForModule(
+  webpack.filters.bySource('type:"POPOUT_WINDOW_OPEN"'),
+);
+// eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
+const openPopout = webpack.getFunctionBySource(PopoutModule, "POPOUT_WINDOW_OPEN") as (
+  key: string,
+  render: ReactComponent<unknown>,
+  features: Record<string, string>,
+) => void;
+// eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
+const closePopout = webpack.getFunctionBySource(PopoutModule, "POPOUT_WINDOW_CLOSE") as (
+  key: string,
+) => void;
+// eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
+const PopoutWindowStore = webpack.getByStoreName("PopoutWindowStore") as Store & {
+  getWindow: (key: string) => Window;
+  getWindowOpen: (key: string) => boolean;
+};
+
+// eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
+const DnDProvider = webpack.getBySource(
+  ".EMBEDDED_ACTIVITIES_ARE_YOU_SURE_WANT_TO_LEAVE",
+) as ReactComponent<unknown>;
+
 function useTheme(): "light" | "dark" {
   const [theme, setTheme] = React.useState<"light" | "dark">("dark");
 
@@ -110,7 +138,7 @@ function useCodeMirror({ value: initialValueParam, onChange, container }: UseCod
   return { value, setValue: customSetValue };
 }
 
-export const QuickCSS = (): React.ReactElement => {
+const QuickCSS = (props: { popout: boolean } & Record<string, boolean>): React.ReactElement => {
   const ref = React.useRef<HTMLDivElement>(null);
   const { value, setValue } = useCodeMirror({
     container: ref.current,
@@ -170,24 +198,108 @@ export const QuickCSS = (): React.ReactElement => {
     if (autoApply) setReloadTimer(setTimeout(reload, 500));
   }, [value]);
 
+  if (props.popout) {
+    React.useEffect(() => {
+      const window = PopoutWindowStore?.getWindow("DISCORD_REPLUGGED_QUICKCSS");
+
+      let el = window.document.createElement("link");
+      el.rel = "stylesheet";
+      el.href = `replugged://renderer.css?t=${Date.now()}`;
+      window.document.head.appendChild(el);
+    }, []);
+  }
+
   return (
     <>
-      <Flex justify={Flex.Justify.BETWEEN} align={Flex.Align.START}>
-        <Text.H2>{Messages.REPLUGGED_QUICKCSS}</Text.H2>
-        <div style={{ display: "flex" }}>
-          {autoApply ? null : (
-            <Button onClick={reloadAndToast}>{Messages.REPLUGGED_QUICKCSS_CHANGES_APPLY}</Button>
-          )}
-          <Button
-            onClick={() => window.RepluggedNative.quickCSS.openFolder()}
-            color={Button.Colors.PRIMARY}
-            look={Button.Looks.LINK}>
-            {Messages.REPLUGGED_QUICKCSS_FOLDER_OPEN}
-          </Button>
+      {!props.popout ? (
+        <>
+          <Flex justify={Flex.Justify.BETWEEN} align={Flex.Align.START}>
+            <Text.H2>{Messages.REPLUGGED_QUICKCSS}</Text.H2>
+            <div style={{ display: "flex" }}>
+              {autoApply ? null : (
+                <Button onClick={reloadAndToast}>
+                  {Messages.REPLUGGED_QUICKCSS_CHANGES_APPLY}
+                </Button>
+              )}
+              <Button
+                onClick={() => window.RepluggedNative.quickCSS.openFolder()}
+                color={Button.Colors.PRIMARY}
+                look={Button.Looks.LINK}>
+                {Messages.REPLUGGED_QUICKCSS_FOLDER_OPEN}
+              </Button>
+            </div>
+          </Flex>
+          <Divider style={{ margin: "20px 0px" }} />
+        </>
+      ) : null}
+
+      {!props.popout && props.isPopoutOpen ? (
+        <ButtonItem
+          button="Close Popout"
+          onClick={() => {
+            closePopout("DISCORD_REPLUGGED_QUICKCSS");
+          }}>
+          {Messages.REPLUGGED_QUICKCSS_POPPED_OUT}
+        </ButtonItem>
+      ) : (
+        <div id="replugged-quickcss-wrapper" data-popout={props.popout}>
+          <div className="replugged-quickcss-header">
+            <Tooltip text={Messages.SETTINGS}>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" onClick={() => {}}>
+                <path
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M19.738 10H22V14H19.739C19.498 14.931 19.1 15.798 18.565 16.564L20 18L18 20L16.565 18.564C15.797 19.099 14.932 19.498 14 19.738V22H10V19.738C9.069 19.498 8.203 19.099 7.436 18.564L6 20L4 18L5.436 16.564C4.901 15.799 4.502 14.932 4.262 14H2V10H4.262C4.502 9.068 4.9 8.202 5.436 7.436L4 6L6 4L7.436 5.436C8.202 4.9 9.068 4.502 10 4.262V2H14V4.261C14.932 4.502 15.797 4.9 16.565 5.435L18 3.999L20 5.999L18.564 7.436C19.099 8.202 19.498 9.069 19.738 10ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z"
+                />
+              </svg>
+            </Tooltip>
+
+            <Tooltip text={props.popout ? Messages.CLOSE : Messages.POPOUT_PLAYER}>
+              {!props.popout ? (
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  onClick={() => {
+                    openPopout(
+                      "DISCORD_REPLUGGED_QUICKCSS",
+                      () => (
+                        <DnDProvider windowKey="DISCORD_REPLUGGED_QUICKCSS">
+                          <QuickCSS popout={true}></QuickCSS>
+                        </DnDProvider>
+                      ),
+                      {},
+                    );
+                  }}>
+                  <path
+                    fill="currentColor"
+                    d="M10 5V3H5.375C4.06519 3 3 4.06519 3 5.375V18.625C3 19.936 4.06519 21 5.375 21H18.625C19.936 21 21 19.936 21 18.625V14H19V19H5V5H10Z M21 2.99902H14V4.99902H17.586L9.29297 13.292L10.707 14.706L19 6.41302V9.99902H21V2.99902Z"
+                  />
+                </svg>
+              ) : (
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 12 12"
+                  onClick={() => {
+                    closePopout("DISCORD_REPLUGGED_QUICKCSS");
+                  }}>
+                  <g fill="currentColor">
+                    <path d="M9.5 3.205L8.795 2.5 6 5.295 3.205 2.5l-.705.705L5.295 6 2.5 8.795l.705.705L6 6.705 8.795 9.5l.705-.705L6.705 6"></path>
+                  </g>
+                </svg>
+              )}
+            </Tooltip>
+          </div>
+          <div ref={ref}></div>
         </div>
-      </Flex>
-      <Divider style={{ margin: "20px 0px" }} />
-      <div ref={ref} id="replugged-quickcss-wrapper" />
+      )}
     </>
   );
 };
+
+export const ConnectedQuickCSS = connectStores<{ popout: boolean }, { popout: boolean; isPopoutOpen: boolean }>([PopoutWindowStore], (props) => {
+  return {
+    isPopoutOpen: PopoutWindowStore.getWindowOpen("DISCORD_REPLUGGED_QUICKCSS"),
+    ...props
+  }
+})(QuickCSS);