Change update method to sizing & positionning, add SplitButton Component and add favicon

Author: Kran67

apps/controls/css/carbon.css

@@ -34,4 +34,5 @@
 @import url('/themes/css/carbon/toolbars/toolbutton.css');
 @import url('/themes/css/carbon/extended/iphonebutton.css');
 @import url('/themes/css/carbon/extended/popupbutton.css');
-@import url('/themes/css/carbon/common/calendar.css');
+@import url('/themes/css/carbon/common/calendar.css');
+@import url('/themes/css/carbon/extended/splitbutton.css');

apps/controls/html/window1.html

@@ -71,7 +71,7 @@ import "/scripts/components/common/calendar.js";
 //import { dropDownTimePanel } from "/scripts/components/common/dropDownTimePanel.js";
 import "/scripts/components/extended/bitmapstatebutton.js";
 import "/scripts/components/common/busyindicator.js";
-//import { splitButton } from "/scripts/components/extended/splitButton.js";
+import "/scripts/components/extended/splitbutton.js";
 //import { commonDialog } from "/scripts/components/dialogs/commonDialog.js";
 //import { openDialog } from "/scripts/components/dialogs/openDialog.js";
 //import { findReplaceDialog } from "/scripts/components/dialogs/findReplaceDialog.js";

apps/controls/js/window1.js

@@ -1,24 +1,27 @@
-div.SplitButton {
+.Control.SplitButton {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
 }
 
-div.SplitButton button.BitmapButton {
-    flex: 1;
-    height: 100% !important;
-}
+    .Control.SplitButton > * {
+        position: relative;
+    }
 
-div.SplitButton button.BitmapButton,
-div.SplitButton button.PopupButton {
-    position: relative;
-}
+    .Control.SplitButton .BitmapButton {
+        flex: 1;
+    }
 
-div.SplitButton button.PopupButton {
-    width: 14px !important;
-    border-left: none;
-}
+    .Control.SplitButton .BitmapButton,
+    .Control.SplitButton .PopupButton {
+        position: relative;
+    }
 
-div.SplitButton div.PopupButtonArrow {
-    right: 3px;
-}
+    .Control.SplitButton .PopupButton {
+        width: 14px;
+        border-left: none;
+    }
+
+    .Control.SplitButton .PopupButtonArrow {
+        right: 3px;
+    }

css/components/extended/splitButton.css

@@ -41,7 +41,7 @@ class ColorBox extends GraphicControl {
     //#region Methods
     //#region update
     update() {
-        super.update();
+        //super.update();
         if (Core.isHTMLRenderer && this.HTMLElement) {
             this.HTMLElementStyle.boxShadow = `inset 0 0 0 1000px ${this.fillColor.toRGBAString()}`;
         }

favicon.ico

@@ -88,7 +88,7 @@ const ColorButton = (() => {
             //#region Variables déclaration
             const priv = internal(this);
             //#endregion Variables déclaration
-            super.update();
+            //super.update();
             if (this.textObj) {
                 this.textObj.innerHTML = String.EMPTY;
             }

scripts/components/color/colorbox.js

@@ -65,7 +65,7 @@ const ColorPicker = (() => {
                     let pos = ~~(priv.color.hue * htmlElement.offsetHeight / 360);
                     pos -= COLORPICKSIZE / 2;
                     priv.handle.y = (pos > htmlElement.offsetHeight - 5 ? htmlElement.offsetHeight - 5 : (pos < -5) ? -5 : pos);
-                    this._update();
+                    this.update();
                 }
             }
         }
@@ -158,7 +158,7 @@ const ColorPicker = (() => {
             const htmlElement = this.HTMLElement;
             const COLORPICKSIZE = Types.CONSTANTS.COLORPICKSIZE;
             //#endregion Variables déclaration
-            super.update();
+            //super.update();
             if (!point) {
                 point = new Point;
                 point.x = 0;

scripts/components/color/colorbutton.js

@@ -175,7 +175,7 @@ const ColorQuad = (() => {
             const COLORPICKSIZE = Types.CONSTANTS.COLORPICKSIZE;
             const PX = Types.CSSUNITS.PX;
             //#endregion Variables déclaration
-            super.update();
+            //super.update();
             if (!point) {
                 point = new Point;
                 let value;

scripts/components/color/colorpicker.js

@@ -167,7 +167,7 @@ const BatteryIndicator = (() => {
                 PPoleAfter.style.borderRadius = `${60 * ratioW}${PX}/${27 * ratioH}${PX}`;
                 NiMH.style.height = `${(priv.baseFluidHeight * battery.level) * ratioH}${PX}`;
             }
-            super.update();
+            //super.update();
         }
         loaded() {
             //#region Variables déclaration