Work on components

emericg · Apr 4, 2024 · 3f66b11 · 3f66b11
1 parent 994999c
commit 3f66b11
Show file tree

Hide file tree

Showing 49 changed files with 837 additions and 435 deletions.
diff --git a/qml/ComponentLibrary/ComponentLibrary.qrc b/qml/ComponentLibrary/ComponentLibrary.qrc
@@ -10,7 +10,7 @@
         <file alias="ActionMenu_floating.qml">menus/ActionMenu_floating.qml</file>
         <file alias="ActionMenuItem.qml">menus/ActionMenuItem.qml</file>
         <file alias="ActionMenuSeparator.qml">menus/ActionMenuSeparator.qml</file>
-        <file alias="DrawerThemed.qml">controls/DrawerThemed.qml</file>
+        <file alias="DrawerThemed.qml">menus/DrawerThemed.qml</file>
         <file alias="DrawerItem.qml">menus/DrawerItem.qml</file>
         <file alias="DrawerButton.qml">menus/DrawerButton.qml</file>
         <file alias="ListItem.qml">menus/ListItem.qml</file>
@@ -20,30 +20,29 @@
         <file alias="ListTitle.qml">menus/ListTitle.qml</file>
         <file alias="SectionTitle.qml">menus/SectionTitle.qml</file>
 
-        <file alias="ButtonChip.qml">wip/Chip.qml</file>
-        <file alias="ButtonFab.qml">wip/FAB.qml</file>
-        <file alias="ButtonFabExtended.qml">wip/ExtendedFAB.qml</file>
-        <file alias="ButtonSunken.qml">wip/ButtonSunken.qml</file>
-
-        <file alias="ButtonDesktop.qml">wip/ButtonDesktop.qml</file>
-        <file alias="ButtonOutline.qml">wip/ButtonOutline.qml</file>
-        <file alias="ButtonClear.qml">wip/ButtonClear.qml</file>
-        <file alias="ButtonFlat.qml">wip/ButtonFlat.qml</file>
-        <file alias="ButtonSolid.qml">wip/ButtonSolid.qml</file>
-        <file alias="ButtonWireframe.qml">wip/ButtonWireframe.qml</file>
-        <file alias="ButtonImpl.qml">wip/ButtonImpl.qml</file>
-
-        <file alias="RoundButtonDesktop.qml">wip/RoundButtonDesktop.qml</file>
-        <file alias="RoundButtonOutline.qml">wip/RoundButtonOutline.qml</file>
-        <file alias="RoundButtonClear.qml">wip/RoundButtonClear.qml</file>
-        <file alias="RoundButtonFlat.qml">wip/RoundButtonFlat.qml</file>
-        <file alias="RoundButtonSolid.qml">wip/RoundButtonSolid.qml</file>
-        <file alias="RoundButtonWireframe.qml">wip/RoundButtonWireframe.qml</file>
-        <file alias="RoundButtonImpl.qml">wip/RoundButtonImpl.qml</file>
+        <file alias="ButtonChip.qml">buttons/ButtonChip.qml</file>
+        <file alias="ButtonFab.qml">buttons/ButtonFab.qml</file>
+        <file alias="ButtonFabExtended.qml">buttons/ButtonFabExtended.qml</file>
+        <file alias="ButtonSunken.qml">buttons/ButtonSunken.qml</file>
+        <file alias="ButtonDesktop.qml">buttons/ButtonDesktop.qml</file>
+        <file alias="ButtonOutline.qml">buttons/ButtonOutline.qml</file>
+        <file alias="ButtonClear.qml">buttons/ButtonClear.qml</file>
+        <file alias="ButtonFlat.qml">buttons/ButtonFlat.qml</file>
+        <file alias="ButtonSolid.qml">buttons/ButtonSolid.qml</file>
+        <file alias="ButtonWireframe.qml">buttons/ButtonWireframe.qml</file>
+        <file alias="ButtonImpl.qml">buttons/ButtonImpl.qml</file>
+        <file alias="RoundButtonDesktop.qml">buttons/RoundButtonDesktop.qml</file>
+        <file alias="RoundButtonOutline.qml">buttons/RoundButtonOutline.qml</file>
+        <file alias="RoundButtonClear.qml">buttons/RoundButtonClear.qml</file>
+        <file alias="RoundButtonFlat.qml">buttons/RoundButtonFlat.qml</file>
+        <file alias="RoundButtonSolid.qml">buttons/RoundButtonSolid.qml</file>
+        <file alias="RoundButtonWireframe.qml">buttons/RoundButtonWireframe.qml</file>
+        <file alias="RoundButtonImpl.qml">buttons/RoundButtonImpl.qml</file>
 
         <file alias="ButtonCompactable.qml">deprecated/ButtonCompactable.qml</file>
         <file alias="ButtonText.qml">deprecated/ButtonText.qml</file>
         <file alias="ButtonImage.qml">deprecated/ButtonImage.qml</file>
+        <file alias="ItemTagButton.qml">deprecated/ItemTagButton.qml</file>
         <file alias="RoundButtonIcon.qml">deprecated/RoundButtonIcon.qml</file>
         <file alias="RoundButtonText.qml">deprecated/RoundButtonText.qml</file>
 
@@ -55,22 +54,13 @@
         <file alias="IconSvg.qml">generic/IconSvg.qml</file>
         <file alias="ItemLicenseBadge.qml">generic/ItemLicenseBadge.qml</file>
         <file alias="ItemBadge.qml">generic/ItemBadge.qml</file>
-        <file alias="ItemTag.qml">generic/ItemTag.qml</file>
-        <file alias="ItemTagButton.qml">generic/ItemTagButton.qml</file>
-        <file alias="MiddleSliderArrow.qml">generic/MiddleSliderArrow.qml</file>
-        <file alias="MiddleSliderValueSolid.qml">generic/MiddleSliderValueSolid.qml</file>
         <file alias="ProgressArc.qml">generic/ProgressArc.qml</file>
         <file alias="ProgressCircle.qml">generic/ProgressCircle.qml</file>
-        <file alias="RangeSliderArrow.qml">generic/RangeSliderArrow.qml</file>
-        <file alias="RangeSliderValueSolid.qml">generic/RangeSliderValueSolid.qml</file>
         <file alias="SelectorMenu.qml">generic/SelectorMenu.qml</file>
         <file alias="SelectorMenuSunken.qml">generic/SelectorMenuSunken.qml</file>
         <file alias="SelectorMenuItem.qml">generic/SelectorMenuItem.qml</file>
         <file alias="SelectorMenuColorful.qml">generic/SelectorMenuColorful.qml</file>
         <file alias="SelectorMenuColorfulItem.qml">generic/SelectorMenuColorfulItem.qml</file>
-        <file alias="SliderArrow.qml">generic/SliderArrow.qml</file>
-        <file alias="SliderValueSolid.qml">generic/SliderValueSolid.qml</file>
-        <file alias="ToolTipFlat.qml">generic/ToolTipFlat.qml</file>
 
         <file alias="FrameBox.qml">layouts/FrameBox.qml</file>
         <file alias="FrameThemed.qml">layouts/FrameThemed.qml</file>
@@ -83,29 +73,43 @@
         <file alias="ComboBoxThemed.qml">controls/ComboBoxThemed.qml</file>
         <file alias="DialThemed.qml">controls/DialThemed.qml</file>
         <file alias="ItemDelegateThemed.qml">controls/ItemDelegateThemed.qml</file>
+        <file alias="MiddleSliderArrow.qml">controls/MiddleSliderArrow.qml</file>
         <file alias="MiddleSliderThemed.qml">controls/MiddleSliderThemed.qml</file>
+        <file alias="MiddleSliderValueSolid.qml">controls/MiddleSliderValueSolid.qml</file>
         <file alias="PageIndicatorThemed.qml">controls/PageIndicatorThemed.qml</file>
         <file alias="ProgressBarThemed.qml">controls/ProgressBarThemed.qml</file>
         <file alias="RadioButtonThemed.qml">controls/RadioButtonThemed.qml</file>
+        <file alias="RangeSliderArrow.qml">controls/RangeSliderArrow.qml</file>
         <file alias="RangeSliderThemed.qml">controls/RangeSliderThemed.qml</file>
+        <file alias="RangeSliderValue.qml">controls/RangeSliderValue.qml</file>
+        <file alias="RangeSliderValueSolid.qml">controls/RangeSliderValueSolid.qml</file>
         <file alias="RippleThemed.qml">controls/RippleThemed.qml</file>
         <file alias="RoundButtonThemed.qml">controls/RoundButtonThemed.qml</file>
         <file alias="RoundButtonIconThemed.qml">controls/RoundButtonIconThemed.qml</file>
         <file alias="ScrollBarThemed.qml">controls/ScrollBarThemed.qml</file>
+        <file alias="SliderArrow.qml">controls/SliderArrow.qml</file>
         <file alias="SliderThemed.qml">controls/SliderThemed.qml</file>
+        <file alias="SliderValueSolid.qml">controls/SliderValueSolid.qml</file>
         <file alias="SpinBoxThemedDesktop.qml">controls/SpinBoxThemed_desktop.qml</file>
         <file alias="SpinBoxThemedMobile.qml">controls/SpinBoxThemed_mobile.qml</file>
         <file alias="SwitchThemedDesktop.qml">controls/SwitchThemed_desktop.qml</file>
         <file alias="SwitchThemedMobile.qml">controls/SwitchThemed_mobile.qml</file>
         <file alias="TextAreaThemed.qml">controls/TextAreaThemed.qml</file>
         <file alias="TextEditThemed.qml">controls/TextEditThemed.qml</file>
         <file alias="TextFieldThemed.qml">controls/TextFieldThemed.qml</file>
+        <file alias="ToolTipFlat.qml">controls/ToolTipFlat.qml</file>
+        <file alias="ToolTipThemed.qml">controls/ToolTipThemed.qml</file>
         <file alias="TumblerThemed.qml">controls/TumblerThemed.qml</file>
 
         <file alias="DatePicker.qml">complex/DatePicker.qml</file>
         <file alias="TextField_FileDialog.qml">complex/TextField_FileDialog.qml</file>
         <file alias="TextField_FolderDialog.qml">complex/TextField_FolderDialog.qml</file>
 
+        <file alias="ItemTagClear.qml">wip/ItemTagClear.qml</file>
+        <file alias="ItemTagDesktop.qml">wip/ItemTagDesktop.qml</file>
+        <file alias="ItemTagFlat.qml">wip/ItemTagFlat.qml</file>
+        <file alias="ItemTagImpl.qml">wip/ItemTagImpl.qml</file>
+
         <file alias="CsdMac.qml">utils/CsdMac.qml</file>
         <file alias="CsdWindows.qml">utils/CsdWindows.qml</file>
         <file alias="CsdLinux.qml">utils/CsdLinux.qml</file>

diff --git a/qml/ComponentLibrary/ThemeEngine.qml b/qml/ComponentLibrary/ThemeEngine.qml
@@ -159,6 +159,8 @@ Item {
 
     property int componentFontSize: isHdpi ? 14 : 15
 
+    property int componentMarginXS: isHdpi ? 4 : 8
+    property int componentMarginS: isHdpi ? 8 : 12
     property int componentMargin: isHdpi ? 12 : 16
     property int componentMarginL: isHdpi ? 16 : 20
     property int componentMarginXL: isHdpi ? 20 : 24

diff --git a/qml/ComponentLibrary/wip/Chip.qml → qml/ComponentLibrary/buttons/ButtonChip.qml b/qml/ComponentLibrary/wip/Chip.qml → qml/ComponentLibrary/buttons/ButtonChip.qml
diff --git a/qml/ComponentLibrary/wip/ButtonClear.qml → qml/ComponentLibrary/buttons/ButtonClear.qml b/qml/ComponentLibrary/wip/ButtonClear.qml → qml/ComponentLibrary/buttons/ButtonClear.qml
diff --git a/qml/ComponentLibrary/wip/ButtonDesktop.qml → ...omponentLibrary/buttons/ButtonDesktop.qml b/qml/ComponentLibrary/wip/ButtonDesktop.qml → ...omponentLibrary/buttons/ButtonDesktop.qml
diff --git a/qml/ComponentLibrary/wip/FAB.qml → qml/ComponentLibrary/buttons/ButtonFab.qml b/qml/ComponentLibrary/wip/FAB.qml → qml/ComponentLibrary/buttons/ButtonFab.qml
diff --git a/qml/ComponentLibrary/wip/ExtendedFAB.qml → ...nentLibrary/buttons/ButtonFabExtended.qml b/qml/ComponentLibrary/wip/ExtendedFAB.qml → ...nentLibrary/buttons/ButtonFabExtended.qml
diff --git a/qml/ComponentLibrary/wip/ButtonFlat.qml → qml/ComponentLibrary/buttons/ButtonFlat.qml b/qml/ComponentLibrary/wip/ButtonFlat.qml → qml/ComponentLibrary/buttons/ButtonFlat.qml
diff --git a/qml/ComponentLibrary/wip/ButtonImpl.qml → qml/ComponentLibrary/buttons/ButtonImpl.qml b/qml/ComponentLibrary/wip/ButtonImpl.qml → qml/ComponentLibrary/buttons/ButtonImpl.qml
diff --git a/qml/ComponentLibrary/wip/ButtonOutline.qml → ...omponentLibrary/buttons/ButtonOutline.qml b/qml/ComponentLibrary/wip/ButtonOutline.qml → ...omponentLibrary/buttons/ButtonOutline.qml
diff --git a/qml/ComponentLibrary/wip/ButtonSolid.qml → qml/ComponentLibrary/buttons/ButtonSolid.qml b/qml/ComponentLibrary/wip/ButtonSolid.qml → qml/ComponentLibrary/buttons/ButtonSolid.qml
diff --git a/qml/ComponentLibrary/wip/ButtonSunken.qml → ...ComponentLibrary/buttons/ButtonSunken.qml b/qml/ComponentLibrary/wip/ButtonSunken.qml → ...ComponentLibrary/buttons/ButtonSunken.qml
diff --git a/qml/ComponentLibrary/wip/ButtonWireframe.qml → ...ponentLibrary/buttons/ButtonWireframe.qml b/qml/ComponentLibrary/wip/ButtonWireframe.qml → ...ponentLibrary/buttons/ButtonWireframe.qml
diff --git a/...ComponentLibrary/wip/RoundButtonClear.qml → ...onentLibrary/buttons/RoundButtonClear.qml b/...ComponentLibrary/wip/RoundButtonClear.qml → ...onentLibrary/buttons/RoundButtonClear.qml
diff --git a/...mponentLibrary/wip/RoundButtonDesktop.qml → ...entLibrary/buttons/RoundButtonDesktop.qml b/...mponentLibrary/wip/RoundButtonDesktop.qml → ...entLibrary/buttons/RoundButtonDesktop.qml
diff --git a/qml/ComponentLibrary/wip/RoundButtonFlat.qml → ...ponentLibrary/buttons/RoundButtonFlat.qml b/qml/ComponentLibrary/wip/RoundButtonFlat.qml → ...ponentLibrary/buttons/RoundButtonFlat.qml
diff --git a/qml/ComponentLibrary/wip/RoundButtonImpl.qml → ...ponentLibrary/buttons/RoundButtonImpl.qml b/qml/ComponentLibrary/wip/RoundButtonImpl.qml → ...ponentLibrary/buttons/RoundButtonImpl.qml
diff --git a/...mponentLibrary/wip/RoundButtonOutline.qml → ...entLibrary/buttons/RoundButtonOutline.qml b/...mponentLibrary/wip/RoundButtonOutline.qml → ...entLibrary/buttons/RoundButtonOutline.qml
diff --git a/...ComponentLibrary/wip/RoundButtonSolid.qml → ...onentLibrary/buttons/RoundButtonSolid.qml b/...ComponentLibrary/wip/RoundButtonSolid.qml → ...onentLibrary/buttons/RoundButtonSolid.qml
diff --git a/...onentLibrary/wip/RoundButtonWireframe.qml → ...tLibrary/buttons/RoundButtonWireframe.qml b/...onentLibrary/wip/RoundButtonWireframe.qml → ...tLibrary/buttons/RoundButtonWireframe.qml
diff --git a/...nentLibrary/generic/MiddleSliderArrow.qml → ...entLibrary/controls/MiddleSliderArrow.qml b/...nentLibrary/generic/MiddleSliderArrow.qml → ...entLibrary/controls/MiddleSliderArrow.qml
@@ -23,8 +23,9 @@ T.Slider {
     property int ticksCount: ((to - from) / stepSize)
 
     // colors
-    property color colorBackground: Theme.colorForeground
+    property color colorBackground: Theme.colorComponentBackground
     property color colorForeground: Theme.colorPrimary
+    property color colorTicks: Theme.colorComponentDown
 
     ////////////////
 
@@ -42,15 +43,15 @@ T.Slider {
         scale: control.horizontal && control.mirrored ? -1 : 1
 
         clip: true
-        Repeater {
+        Repeater { // ticks
             width: control.availableWidth
             model: (control.ticksCount - 1)
             Rectangle {
                 x: control.horizontal ? ((control.availableWidth / control.ticksCount) * (index+1)) : 0
                 y: control.horizontal ? 0 : ((control.availableHeight / control.ticksCount) * (index+1))
                 width: control.horizontal ? 2 : parent.height
                 height: control.horizontal ? parent.height : 2
-                color: Theme.colorComponentBorder
+                color: control.colorTicks
             }
         }
 
@@ -74,7 +75,7 @@ T.Slider {
         height: 12
         rotation: control.horizontal ? 0 : -90
         opacity: control.enabled ? 1 : 0.8
-        color: control.pressed ? Theme.colorSecondary : Theme.colorPrimary
+        color: control.pressed ? Theme.colorSecondary : control.colorForeground
 
         Rectangle {
             width: 10

diff --git a/...ibrary/generic/MiddleSliderValueSolid.qml → ...brary/controls/MiddleSliderValueSolid.qml b/...ibrary/generic/MiddleSliderValueSolid.qml → ...brary/controls/MiddleSliderValueSolid.qml
@@ -18,7 +18,7 @@ T.Slider {
     // settings
     property int hhh: 18
     property string unit
-    property int tofixed: 0
+    property int floatprecision: 0
     property bool kshort: false
 
     // colors
@@ -31,22 +31,22 @@ T.Slider {
     background: Rectangle {
         x: control.leftPadding + (control.horizontal ? 0 : (control.availableWidth - width) / 2)
         y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : 0)
-        implicitWidth: control.horizontal ? 200 : hhh
-        implicitHeight: control.horizontal ? hhh : 200
+        implicitWidth: control.horizontal ? 200 : control.hhh
+        implicitHeight: control.horizontal ? control.hhh : 200
         width: control.horizontal ? control.availableWidth : implicitWidth
         height: control.horizontal ? implicitHeight : control.availableHeight
 
-        radius: hhh
+        radius: control.hhh
         color: control.colorBackground
         scale: control.horizontal && control.mirrored ? -1 : 1
 
         Rectangle {
             x: control.horizontal ? ((control.visualPosition <= 0.5) ? handle.x : control.availableWidth / 2) : 0
             y: !control.horizontal ? ((control.visualPosition <= 0.5) ? handle.y : control.availableHeight / 2) : 0
-            width: control.horizontal ? Math.abs((control.width / 2) - handle.x - ((control.visualPosition > 0.5) ? handle.width : 0)) : hhh
-            height: !control.horizontal ? Math.abs((control.height / 2) - handle.y - ((control.visualPosition > 0.5) ? handle.height : 0)) : hhh
+            width: control.horizontal ? Math.abs((control.width / 2) - handle.x - ((control.visualPosition > 0.5) ? handle.width : 0)) : control.hhh
+            height: !control.horizontal ? Math.abs((control.height / 2) - handle.y - ((control.visualPosition > 0.5) ? handle.height : 0)) : control.hhh
 
-            radius: hhh
+            radius: control.hhh
             color: control.colorForeground
         }
     }
@@ -56,32 +56,32 @@ T.Slider {
     handle: Rectangle {
         x: control.leftPadding + (control.horizontal ? control.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
         y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height))
-        implicitWidth: hhh
-        implicitHeight: hhh
+        implicitWidth: control.hhh
+        implicitHeight: control.hhh
 
-        width: control.horizontal ? t1.contentWidth + 16 : hhh
-        height: hhh
-        radius: hhh
+        width: control.horizontal ? t1.contentWidth + 16 : control.hhh
+        height: control.hhh
+        radius: control.hhh
         color: control.colorForeground
         border.color: control.colorForeground
 
         Text {
             id: t1
-            width: hhh
-            height: hhh
+            width: control.hhh
+            height: control.hhh
             anchors.centerIn: parent
 
             text: {
                 var vvalue = control.value
                 if (control.unit === "°" && settingsManager.tempUnit === "F") vvalue = UtilsNumber.tempCelsiusToFahrenheit(vvalue)
-                vvalue = vvalue.toFixed(0)
+                vvalue = vvalue.toFixed(control.floatprecision)
                 return ((control.kshort && control.value > 999) ? (vvalue / 1000) : vvalue) + control.unit
             }
             textFormat: Text.PlainText
             font.bold: true
             font.pixelSize: isDesktop ? 12 : 13
             fontSizeMode: Text.Fit
-            minimumPixelSize: 10
+            minimumPixelSize: Theme.fontSizeContentVerySmall
             color: control.colorText
             horizontalAlignment: Text.AlignHCenter
             verticalAlignment: Text.AlignVCenter

diff --git a/...onentLibrary/generic/RangeSliderArrow.qml → ...nentLibrary/controls/RangeSliderArrow.qml b/...onentLibrary/generic/RangeSliderArrow.qml → ...nentLibrary/controls/RangeSliderArrow.qml
@@ -26,8 +26,9 @@ T.RangeSlider {
     property int ticksCount: ((to - from) / stepSize)
 
     // colors
-    property color colorBackground: Theme.colorForeground
+    property color colorBackground: Theme.colorComponentBackground
     property color colorForeground: Theme.colorPrimary
+    property color colorTicks: Theme.colorComponentDown
 
     ////////////////
 
@@ -45,15 +46,15 @@ T.RangeSlider {
         scale: control.horizontal && control.mirrored ? -1 : 1
 
         clip: true
-        Repeater {
+        Repeater { // ticks
             width: control.availableWidth
             model: (control.ticksCount - 1)
             Rectangle {
                 x: control.horizontal ? ((control.availableWidth / control.ticksCount) * (index+1)) : 0
                 y: control.horizontal ? 0 : ((control.availableHeight / control.ticksCount) * (index+1))
                 width: control.horizontal ? 2 : parent.height
                 height: control.horizontal ? parent.height : 2
-                color: Theme.colorComponentBorder
+                color: control.colorTicks
             }
         }
 
@@ -77,7 +78,7 @@ T.RangeSlider {
         height: 12
         rotation: control.horizontal ? 0 : -90
         opacity: control.enabled ? 1 : 0.8
-        color: first.pressed ? Theme.colorSecondary : Theme.colorPrimary
+        color: first.pressed ? Theme.colorSecondary : control.colorForeground
 
         Rectangle {
             width: 10
@@ -100,7 +101,7 @@ T.RangeSlider {
         height: 12
         rotation: control.horizontal ? 0 : -90
         opacity: control.enabled ? 1 : 0.8
-        color: second.pressed ? Theme.colorSecondary : Theme.colorPrimary
+        color: second.pressed ? Theme.colorSecondary : control.colorForeground
 
         Rectangle {
             width: 10