Fix the settings dialogue

re621 · Mar 22, 2020 · 813d29a · 813d29a
1 parent 03ac1f9
commit 813d29a
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 45 deletions.
diff --git a/src/js/components/Modal.ts b/src/js/components/Modal.ts
@@ -18,6 +18,11 @@ export class Modal {
             .dialog({
                 autoOpen: false,
                 appendTo: "re-modal-container",
+
+                width: "auto",
+                minWidth: config.minWidth,
+                minHeight: config.minHeight,
+
                 position: {
                     my: config.position.my,
                     at: config.position.at,
@@ -46,6 +51,9 @@ export class Modal {
         if (config.triggers === undefined) config.triggers = [];
         if (config.triggerMulti === undefined) config.triggerMulti = false;
 
+        if (config.minWidth === undefined) config.minWidth = 150;
+        if (config.minHeight === undefined) config.minHeight = 150;
+
         if (config.disabled === undefined) config.disabled = false;
         if (config.position === undefined) config.position = { my: "center", at: "center" };
 
@@ -118,6 +126,9 @@ interface ModalConfig {
     triggers?: ModalTrigger[],
     triggerMulti?: boolean,
 
+    minWidth?: number,
+    minHeight?: number,
+
     disabled?: boolean,
     position?: {
         at: string,

diff --git a/src/js/modules/SettingsController.ts b/src/js/modules/SettingsController.ts
@@ -194,7 +194,7 @@ export class SettingsController extends RE6Module {
                     type: "checkbox",
                     value: module.fetchSettings("loadRedesignFixes"),
                     label: "Load Redesign Fixes",
-                }
+                },
             ]
         );
 

diff --git a/src/scss/layout/_modal.scss b/src/scss/layout/_modal.scss
@@ -17,6 +17,7 @@ re-modal-container {
 
         pointer-events: auto;
         border-radius: 6px;
+        min-width: fit-content;
 
         @include themable {
             border: 1px solid lighten(themed("color-section"), 10%) !important;
@@ -74,12 +75,17 @@ re-modal-container {
 
         div.ui-dialog-content {
             padding: 1em 1em;
+            min-width: fit-content;
 
             @include themable {
                 border: unset !important;
                 background-color: unset !important;
                 color: unset !important;
             }
+
+            div.ui-tabs {
+                margin-top: -1em;
+            }
         }
     }
 

diff --git a/src/scss/layout/_tabbed.scss b/src/scss/layout/_tabbed.scss
@@ -1,54 +1,48 @@
 /* Tab Group Styles */
-re-tab-group {
-    box-sizing: border-box;
-    display: flex;
-    flex-wrap: wrap;
-    width: fit-content;
-
-    .re-tab-input {
-        position: absolute;
-        opacity: 0;
-
-        &:focus+.re-tab-label {
-            z-index: 1;
-        }
+div.ui-widget-content.ui-tabs {
 
-        &:checked+.re-tab-label {
-            background: #00000050;
-        }
+    // Whoever desided to include JQuery-UI theming in e621.
+    // My hatred for you is ever increasing. Just why.
 
-        &:checked+.re-tab-label+.re-tab-panel {
-            display: block;
-        }
+    @include themable {
+        border: 1px solid lighten(themed("color-section"), 10%) !important;
+        background-color: lighten(themed("color-section"), 10%) !important;
+        color: themed("color-text") !important;
     }
 
-    .re-tab-label {
-        width: 100%;
-        cursor: pointer;
+    ul.ui-tabs-nav {
+        border: unset !important;
+        background-color: unset !important;
+        color: unset !important;
 
-        padding: 0.25rem 0.5rem;
-        margin-right: 0.5rem;
-        border-radius: 0 0 6px 6px;
+        margin-left: 0;
 
-        background: #00000030;
+        li.ui-tabs-tab {
+            display: inline-block;
 
-        &:hover,
-        &:active {
-            background: #00000050;
-        }
+            border: unset;
+            background: unset;
 
-        @media (min-width: 800px) {
-            width: auto;
-        }
-    }
+            padding: 0.5rem 0.25rem;
+            margin-right: 1rem;
 
-    .re-tab-panel {
-        display: none;
-        width: 100%;
-        padding-top: 0.5rem;
+            @include themable {
+                background-color: lighten(themed("color-section"), 10%) !important;
+                color: themed("color-text") !important;
+            }
 
-        @media (min-width: 600px) {
-            order: 99;
+            &.ui-tabs-active {
+                @include themable {
+                    background-color: themed("color-section") !important;
+                    color: themed("color-text") !important;
+                }
+            }
         }
     }
+
+    div.ui-tabs-panel {
+        border: unset !important;
+        background-color: unset !important;
+        color: unset !important;
+    }
 }
diff --git a/src/scss/style.scss b/src/scss/style.scss
@@ -9,7 +9,6 @@
 @import 'themes/!index';
 
 @import 'layout/modal';
-@import 'layout/modal2';
 @import 'layout/prompt';
 @import 'layout/tabbed';
 

diff --git a/src/scss/utilities/_form.scss b/src/scss/utilities/_form.scss
@@ -1,16 +1,19 @@
 /* Auto-generated forms */
 form.grid-form {
     display: grid;
-    grid-template-columns: auto 1fr;
+    grid-template-columns: 5rem 10rem;
     grid-row-gap: 1rem;
     grid-column-gap: 0.5rem;
+    width: 15rem;
 
     &.columns-2 {
-        grid-template-columns: repeat(2, auto 1fr);
+        grid-template-columns: repeat(2, 5rem 10rem);
+        width: 31.5rem;
     }
 
     &.columns-3 {
-        grid-template-columns: repeat(3, auto 1fr);
+        grid-template-columns: repeat(3, 5rem 10rem);
+        width: 48rem;
     }
 
     // Fill 2 columns