lexgui 0.5.0 → 0.5.1

package/build/components/timeline.js

@@ -169,7 +169,6 @@ class Timeline {
         }
 
         let header = this.header;
-        LX.DEFAULT_NAME_WIDTH = "50%";
         header.sameLine();
 
         if( this.name )
@@ -177,32 +176,54 @@ class Timeline {
             header.addTitle(this.name );
         }
 
-        header.addButton('', '<i class="fa-solid fa-'+ (this.playing ? 'pause' : 'play') +'"></i>', (value, event) => {
+        const buttonContainer = LX.makeContainer(["auto", "100%"], "", { display: "flex" });
+
+        header.queue( buttonContainer );
+
+        header.addButton("playBtn", '<i class="fa-solid fa-'+ (this.playing ? 'pause' : 'play') +'"></i>', (value, event) => {
            this.changeState();
-        }, { width: "40px", buttonClass: "accept", title: "Play" });
+        }, { buttonClass: "accept", title: "Play", hideName: true });
 
-        header.addButton('', '<i class="fa-solid fa-rotate"></i>', ( value, event ) => {
+        header.addButton("toggleLoopBtn", '<i class="fa-solid fa-rotate"></i>', ( value, event ) => {
             this.loop = !this.loop;
             if( this.onChangePlayMode )
             {
                 this.onChangePlayMode( this.loop );
             }
-        }, { width: "40px", selectable: true, selected: this.loop, title: 'Loop' });
+        }, { selectable: true, selected: this.loop, title: 'Loop', hideName: true });
         
         if( this.onBeforeCreateTopBar )
         {
             this.onBeforeCreateTopBar( header );
         }
 
+        header.clearQueue( buttonContainer );
+
+        header.addContent( "header-buttons", buttonContainer );
+
         header.addNumber("Current Time", this.currentTime, (value, event) => {
-            this.setTime(value)}, {signal: "@on_set_time_" + this.name, step: 0.01, min: 0, precision: 3, skipSlider: true});        
+            this.setTime(value)
+        }, {
+            units: "s",
+            signal: "@on_set_time_" + this.name,
+            step: 0.01, min: 0, precision: 3,
+            skipSlider: true
+        });
 
         header.addNumber("Duration", + this.duration.toFixed(3), (value, event) => {
-            this.setDuration(value, false)}, {step: 0.01, min: 0, signal: "@on_set_duration_" + this.name
+            this.setDuration(value, false)
+        }, {
+            units: "s",
+            step: 0.01, min: 0,
+            signal: "@on_set_duration_" + this.name
         });    
 
         header.addNumber("Speed", + this.speed.toFixed(3), (value, event) => {
-            this.setSpeed(value)}, {step: 0.01, signal: "@on_set_speed_" + this.name});    
+            this.setSpeed(value)
+        }, {
+            step: 0.01,
+            signal: "@on_set_speed_" + this.name
+        });
            
         if( this.onAfterCreateTopBar )
         {
@@ -211,12 +232,12 @@ class Timeline {
 
         if( this.onShowOptimizeMenu )
         {
-            header.addButton("", '<i class="fa-solid fa-filter"></i>', (value, event) => {this.onShowOptimizeMenu(event)}, { width: "40px", title: "Optimize" });
+            header.addButton(null, '<i class="fa-solid fa-filter"></i>', (value, event) => {this.onShowOptimizeMenu(event)}, { title: "Optimize" });
         }
 
         if( this.onShowConfiguration )
         {
-            header.addButton("", '<i class="fa-solid fa-gear"></i>', (value, event) => {
+            header.addButton(null, '<i class="fa-solid fa-gear"></i>', (value, event) => {
                 if(this.configurationDialog){
                     this.configurationDialog.close();
                     this.configurationDialog = null;
@@ -231,11 +252,10 @@ class Timeline {
                         root.remove();
                     }
                 })
-            }, { width: "40px" })
+            }, { title: "Settings" })
         }
 
         header.endLine();
-        LX.DEFAULT_NAME_WIDTH = "30%";
     }
 
     /**
@@ -263,9 +283,9 @@ class Timeline {
         
         if( !this.disableNewTracks ) 
         {
-            panel.addButton('', '<i class = "fa-solid fa-plus"></i>', (value, event) => {
+            panel.addButton("addTrackBtn", '<i class = "fa-solid fa-plus"></i>', (value, event) => {
                 this.addNewTrack();
-            }, {width: "40px", height: "40px"});            
+            }, { hideName: true, title: "Add Track" });
         }
 
         panel.endLine();
@@ -2758,9 +2778,9 @@ class ClipsTimeline extends Timeline {
         let title = titleWidget.root;
         if(!this.disableNewTracks) 
         {
-            panel.addButton('', '<i class = "fa-solid fa-plus"></i>', (value, event) => {
+            panel.addButton("addTrackBtn", '<i class = "fa-solid fa-plus"></i>', (value, event) => {
                 this.addNewTrack();
-            }, {width: "40px", height: "40px"});            
+            }, { hideName: true, title: "Add Track" });
         }
         panel.endLine();
         const styles = window.getComputedStyle(title);

package/build/lexgui.css

@@ -366,7 +366,7 @@ svg, svg path {
     display: block;
 }
 
-svg path {
+a svg, svg path {
     pointer-events: none;
 }
 
@@ -1262,6 +1262,8 @@ svg path {
 
 .lexinlinewidgets {
     display: flex;
+    gap: 0.1rem;
+    justify-content: space-around;
 }
 
 .lexwidgetseparator div {
@@ -1291,6 +1293,11 @@ svg path {
     color: var(--global-text-secondary);
 }
 
+.lexinlinewidgets .lexwidgetname {
+    width: fit-content !important;
+    padding-inline: 0.4rem;
+}
+
 .lexwidget input:not(.lexcheckbox, .lextoggle, .lexrangeslider) {
     font-family: var(--global-font);
     background: none;
@@ -1300,13 +1307,13 @@ svg path {
     outline: none;
     border-radius: 6px;
     border: 2px solid var(--global-color-transparent);
-    transition: border-color 0.1s linear;
+    transition: background-color 0.2s linear, border-color 0.15s linear;
 }
 
 .lexwidget .lextext {
     border-radius: 6px;
     position: relative;
-    transition: 0.1s linear;
+    transition: 0.2s linear;
 }
 
 .lexwidget .lextext.formlabel {
@@ -1493,6 +1500,7 @@ svg path {
 .lexbutton.primary { --button-color: var(--global-selected) !important; color: #f9f9f9 !important; }
 .lexbutton.secondary { --button-color: var(--global-selected-light) !important; color: #f9f9f9 !important;  }
 .lexbutton.accent { --button-color: var(--global-color-accent) !important; color: #f9f9f9 !important;  }
+.lexbutton.contrast { --button-color: var(--global-text-primary) !important; color: var(--global-color-primary) !important;  }
 .lexbutton.warning { --button-color: var(--global-color-warning) !important; color: #793205 !important;  }
 .lexbutton.error { --button-color: var(--global-color-error) !important; color: #52020d !important;  }
 /* Few Sizes */
@@ -1562,11 +1570,6 @@ svg path {
     color: #DDD;
 }
 
-.lexbutton.noname {
-    margin-left: 0px;
-    margin-top: 0px;
-}
-
 /* Combo Buttons */
 
 .lexcombobuttons .lexcombobuttonsbox {
@@ -1784,7 +1787,8 @@ dialog .lexselect .lexselectoptions {
 /* Check box */
 
 .lexcheckbox {
-    --checkbox-color: var(--global-selected);
+    --checkbox-bg-color: var(--global-selected);
+    --checkbox-fg-color: #fff;
     vertical-align: middle;
     flex-shrink: 0;
     transition: background-color .2s,box-shadow .2s;
@@ -1794,10 +1798,10 @@ dialog .lexselect .lexselectoptions {
     padding: 0.12rem;
     display: inline-block;
     background-color: var(--global-color-primary);
-    color: #fff;
+    color: var(--checkbox-fg-color);
     border-width: 1px;
     border-style: solid;
-    border-color: color-mix(in srgb, var(--checkbox-color) 50%, transparent);
+    border-color: color-mix(in srgb, var(--checkbox-bg-color) 50%, transparent);
     border-radius: 4px;
     margin: auto 4px;
     text-align: center;
@@ -1808,11 +1812,12 @@ dialog .lexselect .lexselectoptions {
 }
 
 /* Colors */
-.lexcheckbox.primary { --checkbox-color: var(--global-selected); }
-.lexcheckbox.secondary { --checkbox-color: var(--global-selected-light); }
-.lexcheckbox.accent { --checkbox-color: var(--global-color-accent); }
-.lexcheckbox.warning { --checkbox-color: var(--global-color-warning); }
-.lexcheckbox.error { --checkbox-color: var(--global-color-error); }
+.lexcheckbox.primary { --checkbox-bg-color: var(--global-selected); }
+.lexcheckbox.secondary { --checkbox-bg-color: var(--global-selected-light); }
+.lexcheckbox.accent { --checkbox-bg-color: var(--global-color-accent); }
+.lexcheckbox.contrast { --checkbox-bg-color: var(--global-text-primary); --checkbox-fg-color: var(--global-color-primary); }
+.lexcheckbox.warning { --checkbox-bg-color: var(--global-color-warning); }
+.lexcheckbox.error { --checkbox-bg-color: var(--global-color-error); }
 
 .lexcheckbox:before {
     content: "";
@@ -1828,8 +1833,7 @@ dialog .lexselect .lexselectoptions {
 }
 
 .lexcheckbox:checked,.lexcheckbox[aria-checked=true] {
-    background-color: var(--checkbox-color);
-    color: #fff !important;
+    background-color: var(--checkbox-bg-color);
 }
 
 .lexcheckbox:checked:before, .lexcheckbox[aria-checked=true]:before {
@@ -1838,11 +1842,18 @@ dialog .lexselect .lexselectoptions {
 }
 
 .lexcheckboxcont {
-    display: inline-flex;
-    gap: 8px;
+    display: flex;
+    gap: 0.4rem;
     margin: 0 auto;
 }
 
+.lexcheckboxcont span {
+    width: 95%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 .lexcheckboxsubmenu {
     width: 100%;
     padding: 4px;
@@ -1857,9 +1868,10 @@ dialog .lexselect .lexselectoptions {
 /* Toggle Widget */
 
 .lextoggle {
-    --toggle-color: #1a1a1a;
+    --toggle-bg-color: #1a1a1a;
+    --toggle-fg-color: #f9f9f9;
     border: 1px solid transparent;
-    color: #f9f9f9;
+    color: var(--toggle-fg-color);
     background-color: var(--global-color-quaternary);
     cursor: pointer;
     -webkit-appearance: none;
@@ -1887,11 +1899,12 @@ dialog .lexselect .lexselectoptions {
 }
 
 /* Colors */
-.lextoggle.primary { --toggle-color: var(--global-selected); }
-.lextoggle.secondary { --toggle-color: var(--global-selected-light);  }
-.lextoggle.accent { --toggle-color: var(--global-color-accent);  }
-.lextoggle.warning { --toggle-color: var(--global-color-warning);  }
-.lextoggle.error { --toggle-color: var(--global-color-error);  }
+.lextoggle.primary { --toggle-bg-color: var(--global-selected); }
+.lextoggle.secondary { --toggle-bg-color: var(--global-selected-light);  }
+.lextoggle.accent { --toggle-bg-color: var(--global-color-accent);  }
+.lextoggle.contrast { --toggle-bg-color: var(--global-text-primary); --toggle-fg-color: var(--global-color-primary); }
+.lextoggle.warning { --toggle-bg-color: var(--global-color-warning);  }
+.lextoggle.error { --toggle-bg-color: var(--global-color-error);  }
 
 .lextoggle > * {
     z-index: 1;
@@ -1954,12 +1967,12 @@ dialog .lexselect .lexselectoptions {
 
 .lextoggle:checked, .lextoggle[aria-checked=true], .lextoggle:has(>input:checked) {
     border: 1px solid var(--global-color-secondary);
-    background-color: var(--toggle-color);
+    background-color: var(--toggle-bg-color);
     grid-template-columns: 1fr 1fr 0fr;
 }
 
 .lextoggle.outline:checked, .lextoggle.outline[aria-checked=true], .lextoggle.outline:has(>input:checked) {
-    color: var(--toggle-color);
+    color: var(--toggle-bg-color);
     border: 1px solid currentColor;
     background-color: var(--global-color-primary);
 }
@@ -1969,7 +1982,7 @@ dialog .lexselect .lexselectoptions {
 }
 
 .lextoggle:indeterminate {
-    grid-template-columns: .5fr 1fr .5fr
+    grid-template-columns: 0.5fr 1fr 0.5fr;
 }
 
 .lextoggle:disabled {
@@ -1983,13 +1996,17 @@ dialog .lexselect .lexselectoptions {
 
 .lextogglecont {
     font-weight: bold;
-    display: inline-flex;
-    gap: 8px;
+    display: flex;
+    gap: 0.4rem;
     margin: 0 auto;
 }
 
 .lextogglecont .toggletext {
     font-weight: bold;
+    width: 95%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .lextogglesubmenu {
@@ -1999,7 +2016,7 @@ dialog .lexselect .lexselectoptions {
     margin-top: -1px;
 }
 
-/* Toggle Widget */
+/* Radio Group Widget */
 
 .lexradiogroup {
     width: 100% !important;
@@ -2024,15 +2041,15 @@ dialog .lexselect .lexselectoptions {
 }
 
 .lexradiogroup .lexradiogroupitem button {
-    width: 14px;
-    height: 14px;
-    min-width: 14px !important;
-    min-height: 14px !important;
+    width: 16px;
+    height: 16px;
+    min-width: 16px !important;
+    min-height: 16px !important;
     padding: 0;
     margin: auto 0;
-    border-radius: 7px;
+    border-radius: 8px;
     background-color: var(--global-intense-background);
-    border: 1px solid var(--global-text-secondary) !important;
+    border: 1px solid var(--global-text-tertiary) !important;
 }
 
 .lexradiogroup .lexradiogroupitem button:disabled {
@@ -2057,6 +2074,7 @@ dialog .lexselect .lexselectoptions {
 .lexradiogroup.primary .lexradiogroupitem button.checked span { background-color: var(--global-selected); }
 .lexradiogroup.secondary .lexradiogroupitem button.checked span { background-color: var(--global-selected-light); }
 .lexradiogroup.accent .lexradiogroupitem button.checked span { background-color: var(--global-color-accent); }
+.lexradiogroup.contrast .lexradiogroupitem button.checked span { background-color: var(--global-text-primary); }
 .lexradiogroup.warning .lexradiogroupitem button.checked span { background-color: var(--global-color-warning); }
 .lexradiogroup.error .lexradiogroupitem button.checked span { background-color: var(--global-color-error); }
 
@@ -2220,6 +2238,7 @@ input[type=number] {
     border-radius: 6px;
     margin-right: 2px;
     position: relative;
+    overflow-x: hidden;
     transition: 0.1s linear;
 }
 
@@ -2233,7 +2252,6 @@ input[type=number] {
 
 .lexwidget .numberbox span {
     position: absolute;
-    top: 1px;
     pointer-events: none;
 }
 
@@ -2300,10 +2318,6 @@ input[type=number] {
     right: 0.8em;
 }
 
-.lexwidget .lock {
-    /* color: red; */
-}
-
 /* Range Widget */
 
 .lexrangeslider {
@@ -2312,7 +2326,7 @@ input[type=number] {
     --range-progress: currentColor;
     --range-fill: 1;
     --range-thumb-padding: 0.15rem;
-    --range-bg: color-mix(in oklab,currentColor 10%,#0000);
+    --range-bg: color-mix(in oklab,currentColor 20%,#0000);
     --range-dir: 1;
     --radius-selector: 0.5rem;
     -webkit-appearance: none;
@@ -2325,7 +2339,7 @@ input[type=number] {
     height: var(--range-thumb-size);
     border: none;
     outline: none;
-    color: var(--global-text-secondary);
+    color: var(--global-text-tertiary);
     background-color: #0000;
     overflow: hidden;
     padding: 0;
@@ -2336,10 +2350,15 @@ input[type=number] {
     vertical-align: middle;
 }
 
+.lexrangeslider:disabled {
+    cursor: default;
+}
+
 /* Colors */
 .lexrangeslider.primary { color: var(--global-selected); }
 .lexrangeslider.secondary { color: var(--global-selected-light); }
 .lexrangeslider.accent { color: var(--global-color-accent); }
+.lexrangeslider.contrast { color: var(--global-text-primary); }
 .lexrangeslider.warning { color: var(--global-color-warning); }
 .lexrangeslider.error { color: var(--global-color-error); }
 
@@ -2370,6 +2389,10 @@ input[type=number] {
     height: calc(var(--range-thumb-size)*0.5);
 }
 
+.lexrangeslider:disabled::-webkit-slider-runnable-track {
+    color: var(--global-color-quaternary);
+}
+
 .lexrangeslider::-webkit-slider-thumb {
     box-sizing: border-box;
     border-radius: calc(var(--radius-selector) + min(var(--range-thumb-padding),var(--radius-selector-max)));
@@ -2531,6 +2554,10 @@ input[type=number] {
     padding-left: 8px;
 }
 
+.lextree .lextreetools input:hover {
+    background: none;
+}
+
 .lextree .lextreetools.notitle {
     padding-top: 14px;
     border-top-left-radius: 8px;
@@ -2592,6 +2619,15 @@ input[type=number] {
     user-select: none;
 }
 
+.lextree .lextreeitem input {
+    padding: 0;
+    border: none;
+}
+
+.lextree .lextreeitem input:hover {
+    background: none;
+}
+
 .lextree .lextreeitem div {
     display: flex;
     gap: 0.25rem;
@@ -2757,7 +2793,6 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 .lexbadge {
     border-radius: 0.35rem;
     color: #fff;
-    font-weight: 500;
     border: 1px solid var(--badge-color, #14171a);
     width: fit-content;
     justify-content: center;
@@ -2773,6 +2808,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 .lexbadge.primary { --badge-color: var(--global-selected); }
 .lexbadge.secondary { --badge-color: var(--global-selected-light); }
 .lexbadge.accent { --badge-color: var(--global-color-accent); }
+.lexbadge.contrast { --badge-color: var(--global-text-primary); color: var(--global-color-primary); }
 .lexbadge.warning { --badge-color: var(--global-color-warning); }
 .lexbadge.error { --badge-color: var(--global-color-error); }
 /* Styles */
@@ -3640,7 +3676,6 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
-    transition: 0.2s;
     line-height: 16px;
 }
 
@@ -3648,6 +3683,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     position: absolute;
     background: light-dark(var(--global-selected-light), var(--global-selected));
     z-index: 0;
+    transition: linear transform 0.15s;
 }
 
 .lexareatabs.row {
@@ -4040,6 +4076,10 @@ th {
     user-select: none;
 }
 
+th a {
+    pointer-events: none;
+}
+
 th a, td a {
     font-size: var(--global-font-size-xs) !important;
     display: flex;
@@ -4059,7 +4099,15 @@ th, td {
     padding: 6px;
     padding-inline: 12px;
     text-align: left;
-    vertical-align: top;
+    align-content: center;
+}
+
+th.centered, td.centered {
+    text-align: center;
+}
+
+.lextable.centered th, .lextable.centered td {
+    text-align: center;
 }
 
 th.sm, td.sm {
@@ -4067,14 +4115,15 @@ th.sm, td.sm {
 }
 
 th .lexcheckbox, td .lexcheckbox {
-    margin-top: 3px;
     width: 1.25em;
     height: 1.25em;
 }
 
 td {
-    align-content: center;
+    justify-items: center;
     border-top: 2px solid;
+    overflow: hidden;
+    white-space: nowrap;
     border-color: light-dark(#dbd8d8c0, #5c5b5b7a);
 }
 
@@ -4367,10 +4416,6 @@ thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td
     margin: 0px;
 }
 
-.lextimeline .lextitle {
-    padding-left: 24px;
-}
-
 .lextimeline .lextree ul {
     margin: 0;
     padding-bottom: 0px;