Changeset 37574

Timestamp:

2023-03-27T11:34:46+13:00 (13 months ago)

Author:

davidb

Message:

Changed from specifying background to winbox, to using class, so theme changes update dynamically

Location:

gs3-extensions/tabletop-dl/trunk

Files:

• tabletop-theme-default.css (modified) (1 diff)
• tabletop.css (modified) (3 diffs)
• tabletop.js (modified) (3 diffs)
• winbox-interact.js (modified) (2 diffs)

gs3-extensions/tabletop-dl/trunk/tabletop-theme-default.css

@@ -47 +47 @@
 
 #gs-home-open {
+    /*
     background-color: var(--gs-tabletop-primary-bg-col);
     color: var(--gs-tabletop-primary-fg-col);
+   */
+    /* reverse colors */
+    background-color: var(--gs-tabletop-primary-fg-col);
+    color: var(--gs-tabletop-primary-bg-col);
 }
 

gs3-extensions/tabletop-dl/trunk/tabletop.css

@@ -140 +140 @@
 /* WinBox.js classes */
 
+.winbox-frame {
+    background-color: var(--gs-primary-bg-col);
+}
+
 /* inspired by interact.js drag demo div example */
-.winbox-info-window {
+.winbox-body {
     min-height: 6.5em;
     margin: 0.5em;
@@ -162 +166 @@
 
 .wb-header {
-    background-color: var(--gs-bg-primary-col);
+    background-color: var(--gs-primary-bg-col);
 }
 
@@ -189 +193 @@
 */
 
-/* Visual artefact turns up from box-shadow when roting */
+/* Visual artefact turns up from box-shadow when rotating */
 /* This is due to the parent div dtaying in the same fixed place, but the
    scaled and rotated inner elements breaking out of that shap */
 
-/* Perhaps we only want none, when its being rotated? */
-
-.winbox {
+
+.interact-rotatable-outer {
     background-color: transparent;
-}
-
-.winbox {
     box-shadow: none;
 }

gs3-extensions/tabletop-dl/trunk/tabletop.js

@@ -22 +22 @@
         title: 'Collections',
         //class: [ "no-min", "no-max", "no-full", "no-resize", "no-move" ],
-        class: [ "no-min", "no-max", "no-full" ],
+        class: [ "no-min", "no-max", "no-full", "winbox-frame" ],
         x: 80,
         y: 90,
@@ -28 +28 @@
         height: "585px",
         border: "0.3em",
-        background: gs_primary_bg_color,
+        // background: gs_primary_bg_color,
         html: data
         
@@ -36 +36 @@
         $($tabletop_win_id+" .wb-header").css("touch-action","none");
         
-        $($tabletop_win_id+" .wb-body").addClass("winbox-info-window");
+        $($tabletop_win_id+" .wb-body").addClass("winbox-body");
         
         let draggable_options = getCoreDraggableOptions();

gs3-extensions/tabletop-dl/trunk/winbox-interact.js

@@ -330 +330 @@
         title: 'Document: Drag, Scale and Rotate',
         //class: [ "no-min", "no-max", "no-full", "no-resize", "no-move" ],
-        class: [ "no-min", "no-max", "no-full" ],       
+        class: [ "no-min", "no-max", "no-full", "interact-rotatable-outer" ],       
         x: 1000,
         y: 80,
@@ -355 +355 @@
         $win2.empty().append($scale_element_div);
         
-        $('#my-winbox2 .wb-body').addClass("winbox-info-window");
+        $('#my-winbox2 .wb-body').addClass("winbox-body");