lexgui 0.1.34 → 0.1.36

package/README.md

@@ -1,6 +1,6 @@
 # lexgui.js
 
-**lexgui.js** is a lightweight JavaScript library that allows you to create web interfaces using only JavaScript, HTML, and CSS. This library provides an easy-to-use API for building dynamic and interactive user interfaces without the need for complex frameworks or libraries. With lexgui.js, you can create custom UI components, handle user interactions, and update the interface dynamically.
+**lexgui.js** is a lightweight JavaScript library that allows you to create web interfaces using only JavaScript, HTML, and CSS. It provides an easy-to-use API for building dynamic and interactive common and complex editor interfaces without the need for tedious frameworks or big libraries. With lexgui.js, you can create custom UI components, handle user interactions, and update the interface dynamically.
 
 <img src="data/Screenshot.png" alt="Screenshot" style="width: 100%"/>
 <img src="data/Screenshot_Godot.png"/>
@@ -8,6 +8,9 @@
 ### Code Editor
 <img src="data/Screenshot_Code.png"/>
 
+### Node Graph Editor (WIP)
+<img src="data/Screenshot_Graph.png"/>
+
 ## Docs
 
 The library documentation is in progress but you can check it [here](https://jxarco.github.io/lexgui.js/docs/).
@@ -20,8 +23,8 @@ Look at this [examples](https://jxarco.github.io/lexgui.js/examples/) to see how
 
 <table>
   <tr>
-    <td valign="top"><h3>Animics (EU H2020 SignON project)</h3><a href="https://github.com/upf-gti/SignON-editor">github.com/upf-gti/SignON-editor</a><br><br><img src="data/scriptAnimation_signon.png" alt="scriptAnimation_signon"/></td>
-    <td valign="top"><h3>Performs (EU H2020 SignON project)</h3><a href="https://github.com/upf-gti/SignON-realizer">github.com/upf-gti/SignON-realizer</a><br><br><img src="data/realizer_signon.png" alt="scriptAnimation_signon"/></td>
+    <td valign="top"><h3>Animics (EU H2020 SignON project)</h3><a href="https://github.com/upf-gti/animics">github.com/upf-gti/animics</a><br><br><img src="data/scriptAnimation_signon.png" alt="scriptAnimation_signon"/></td>
+    <td valign="top"><h3>Performs (EU H2020 SignON project)</h3><a href="https://github.com/upf-gti/performs">github.com/upf-gti/performs</a><br><br><img src="data/realizer_signon.png" alt="scriptAnimation_signon"/></td>
   </tr>
 </table>
 

package/build/lexgui.css

@@ -6,6 +6,7 @@
   --global-font: "Figtree", sans-serif;
   --global-title-font: "Poppins", sans-serif;
   --global-font-size: 12px;
+  --global-font-size-big: 14px;
   --global-color-primary: #212121;
   --global-color-secondary: #2c2c2c;
   --global-color-terciary: #444;
@@ -828,7 +829,7 @@ body.noevents * {
 }
 
 .lexbutton.array a {
-	margin-top: 3px;
+	margin-top: 2px;
 }
 
 .lexbutton:hover {
@@ -873,7 +874,8 @@ body.noevents * {
 }
 
 .lexcombobuttons .lexbutton.combo {
-  margin-left: 0px;
+  margin-left: 1px;
+  margin-right: 1px;
   border-radius: 0px;
   display: flex;
   padding-top: 0.35em;
@@ -882,13 +884,15 @@ body.noevents * {
 }
 
 .lexcombobuttons .lexbutton.combo:first-child {
- border-top-left-radius: 5px;
- border-bottom-left-radius: 5px;
+ border-top-left-radius: 4px;
+ border-bottom-left-radius: 4px;
+ margin-left: 0px;
 }
 
 .lexcombobuttons .lexbutton.combo:last-child {
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  margin-right: 0px;
 }
 
 .lexcombobuttons .lexbutton.combo.selected {
@@ -930,6 +934,10 @@ body.noevents * {
   padding: 2px 3px;
 }
 
+.lexdropdown .lexfilter a {
+  transform: translateX(-10px);
+}
+
 .lexdropdown .lexoptions .lexlistitem {
   font-size: 11px;
 }
@@ -956,7 +964,8 @@ body.noevents * {
 	background-color: var(--global-blur-background);
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
-  padding: 4px 0px;
+  padding: 0px;
+  transform: translateY(-4px);
   z-index: 10;
   margin-top: 5px;
   width: 100%;
@@ -1111,9 +1120,11 @@ input[type=checkbox]:checked:after {
 
 .lexcolor {
   display: flex;
+  /*
   flex-wrap: wrap;
   padding-left: 6px;
   padding-right: 6px;
+  */
   align-items: center;
 }
 
@@ -1146,6 +1157,10 @@ input[type=checkbox]:checked:after {
   cursor: pointer;
 }
 
+.lexcolor .lexwidget {
+  padding: 0px;
+}
+
 /* Vector Widgets */
 
 .lexvector {
@@ -1652,7 +1667,7 @@ meter::-webkit-meter-even-less-good-value {
 
 .lexcontextmenu {
   position: absolute;
-  padding-right: 14px;
+  padding-right: 8px;
   z-index: 1001;
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.63) !important;
   background-color: var(--global-blur-background);
@@ -1682,7 +1697,7 @@ meter::-webkit-meter-even-less-good-value {
   width: 100%;
   color: #d5d7dbee;
   padding: 4px;
-  padding-left: 14px;
+  padding-left: 8px;
   padding-right: 0px;
   padding-bottom: 6px;
   cursor: pointer;
@@ -1772,12 +1787,9 @@ meter::-webkit-meter-even-less-good-value {
   float: right;
   margin-top: 3px;
   font-weight: bold;
-  color: var(--global-button-color);
+  color: var(--global-text-primary);
   margin-right: 12px;
-}
-
-.lexcontextmenu .lexcontextmenuentry:hover .lexentryshort {
-  color: #f5f5f5;
+  text-align: right;
 }
 
 .lexmenubar .lexmenubuttons {
@@ -2078,9 +2090,9 @@ meter::-webkit-meter-even-less-good-value {
 }
 
 .lexoverlaybuttons .lexbutton {
-  padding: 14px 10px;
-  font-size: var(--global-font-size);
-  border-radius: 6px;
+  padding: 18px 12px;
+  font-size: var(--global-font-size-big);
+  border-radius: 10px;
   justify-content: center;
   background-color: #313132a5;
   -webkit-backdrop-filter: blur(6px);
@@ -2088,9 +2100,13 @@ meter::-webkit-meter-even-less-good-value {
   color: #d1d1d3bd;
 }
 
+.lexoverlaybuttons .lexbutton span {
+  font-size: var(--global-font-size-big);
+}
+
 .lexoverlaybuttons .lexbutton a {
   line-height: 19px;
-  font-size: var(--global-font-size);
+  font-size: var(--global-font-size-big);
 }
 
 .lexoverlaybuttons .lexbutton img {
@@ -2130,6 +2146,7 @@ meter::-webkit-meter-even-less-good-value {
   background: none;
   -webkit-backdrop-filter: none;
   backdrop-filter: none;
+  aspect-ratio: 1;
 }
 
 .lexoverlaybuttons.vertical .lexoverlaygroup {
@@ -2201,11 +2218,11 @@ meter::-webkit-meter-even-less-good-value {
 }
 
 .lexareatabs.row .lexareatab {
-  background-color: var(--global-color-secondary);
+  background-color: var(--global-color-terciary);
   padding-left: 16px;
   padding-right: 16px;
   margin-right: 4px;
-  border-radius: 6px;
+  border-radius: 4px;
 }
 
 .lexareatabs.fit {