Merge reusable components into ComponentLibrary, plus a load of impro…

…vements
emericg · Mar 28, 2024 · d5112b6 · d5112b6
1 parent d52b60e
commit d5112b6
Show file tree

Hide file tree

Showing 125 changed files with 3,019 additions and 2,281 deletions.
diff --git a/qml/ComponentLibrary/ComponentLibrary.qrc b/qml/ComponentLibrary/ComponentLibrary.qrc
@@ -0,0 +1,101 @@
+<RCC>
+    <qresource prefix="qml">
+        <file alias="DesktopHeaderItem.qml">menus/DesktopHeaderItem.qml</file>
+        <file alias="DesktopSidebarItem.qml">menus/DesktopSidebarItem.qml</file>
+        <file alias="MobileMenuItem_horizontal.qml">menus/MobileMenuItem_horizontal.qml</file>
+        <file alias="MobileMenuItem_vertical.qml">menus/MobileMenuItem_vertical.qml</file>
+        <file alias="ActionMenu_bottom.qml">menus/ActionMenu_bottom.qml</file>
+        <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="DrawerItem.qml">menus/DrawerItem.qml</file>
+        <file alias="DrawerButton.qml">menus/DrawerButton.qml</file>
+        <file alias="ListItem.qml">menus/ListItem.qml</file>
+        <file alias="ListItemClickable.qml">menus/ListItemClickable.qml</file>
+        <file alias="ListSeparator.qml">menus/ListSeparator.qml</file>
+        <file alias="ListSeparatorPadded.qml">menus/ListSeparatorPadded.qml</file>
+        <file alias="ListTitle.qml">menus/ListTitle.qml</file>
+        <file alias="SectionTitle.qml">menus/SectionTitle.qml</file>
+
+        <file alias="ButtonFlat.qml">wip/ButtonFlat.qml</file>
+        <file alias="ButtonSolid.qml">wip/ButtonSolid.qml</file>
+        <file alias="ButtonSunken.qml">wip/ButtonSunken.qml</file>
+        <file alias="ButtonWireframe.qml">wip/ButtonWireframe.qml</file>
+        <file alias="ButtonFab.qml">wip/ButtonFab.qml</file>
+        <file alias="SelectorMenu2.qml">wip/SelectorMenu2.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="AndroidButton.qml">generic/AndroidButton.qml</file>
+        <file alias="AndroidButtonIcon.qml">generic/AndroidButtonIcon.qml</file>
+        <file alias="AndroidTextField.qml">generic/AndroidTextField.qml</file>
+        <file alias="DataBarCompact.qml">generic/DataBarCompact.qml</file>
+        <file alias="DataBarSolid.qml">generic/DataBarSolid.qml</file>
+        <file alias="IconSvg.qml">generic/IconSvg.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="RoundButtonIcon.qml">generic/RoundButtonIcon.qml</file>
+        <file alias="RoundButtonText.qml">generic/RoundButtonText.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="SelectorMenuItem.qml">generic/SelectorMenuItem.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">controls/FrameThemed.qml</file>
+        <file alias="GroupBoxThemed.qml">controls/GroupBoxThemed.qml</file>
+        <file alias="PaneThemed.qml">controls/PaneThemed.qml</file>
+        <file alias="DrawerThemed.qml">controls/DrawerThemed.qml</file>
+
+        <file alias="ButtonIconThemed.qml">controls/ButtonIconThemed.qml</file>
+        <file alias="ButtonThemed.qml">controls/ButtonThemed.qml</file>
+        <file alias="CheckBoxThemed.qml">controls/CheckBoxThemed.qml</file>
+        <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="MiddleSliderThemed.qml">controls/MiddleSliderThemed.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="RangeSliderThemed.qml">controls/RangeSliderThemed.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="SelectorMenuThemed.qml">controls/SelectorMenuThemed.qml</file>
+        <file alias="SelectorMenuThemedItem.qml">controls/SelectorMenuThemedItem.qml</file>
+        <file alias="SliderThemed.qml">controls/SliderThemed.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="TumblerThemed.qml">controls/TumblerThemed.qml</file>
+
+        <file alias="DatePicker.qml">complex/DatePicker.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>
+        <file alias="SwipeArea.qml">utils/SwipeArea.qml</file>
+        <file alias="WindowGeometrySaver.qml">utils/WindowGeometrySaver.qml</file>
+    </qresource>
+
+    <qresource prefix="utils">
+        <file alias="UtilsNumber.js">utils/UtilsNumber.js</file>
+        <file alias="UtilsPath.js">utils/UtilsPath.js</file>
+        <file alias="UtilsString.js">utils/UtilsString.js</file>
+    </qresource>
+</RCC>
diff --git a/qml/components_generic/DatePicker6.qml → qml/ComponentLibrary/complex/DatePicker.qml b/qml/components_generic/DatePicker6.qml → qml/ComponentLibrary/complex/DatePicker.qml
diff --git a/...ponents_generic/TextField_FileDialog6.qml → ...Library/complex/TextField_FileDialog6.qml b/...ponents_generic/TextField_FileDialog6.qml → ...Library/complex/TextField_FileDialog6.qml
@@ -51,12 +51,12 @@ T.TextField {
     property int buttonWidth: (buttonChange.visible ? buttonChange.width + 2 : 2)
 
     // colors
-    property string colorText: Theme.colorComponentText
-    property string colorPlaceholderText: Theme.colorSubText
-    property string colorBorder: Theme.colorComponentBorder
-    property string colorBackground: Theme.colorComponentBackground
-    property string colorSelection: Theme.colorPrimary
-    property string colorSelectedText: "white"
+    property color colorText: Theme.colorComponentText
+    property color colorPlaceholderText: Theme.colorSubText
+    property color colorBorder: Theme.colorComponentBorder
+    property color colorBackground: Theme.colorComponentBackground
+    property color colorSelection: Theme.colorPrimary
+    property color colorSelectedText: "white"
 
     ////////////////
 

diff --git a/...nents_generic/TextField_FolderDialog6.qml → ...brary/complex/TextField_FolderDialog6.qml b/...nents_generic/TextField_FolderDialog6.qml → ...brary/complex/TextField_FolderDialog6.qml
@@ -49,12 +49,12 @@ T.TextField {
     property int buttonWidth: (buttonChange.visible ? buttonChange.width + 2 : 2)
 
     // colors
-    property string colorText: Theme.colorComponentText
-    property string colorPlaceholderText: Theme.colorSubText
-    property string colorBorder: Theme.colorComponentBorder
-    property string colorBackground: Theme.colorComponentBackground
-    property string colorSelection: Theme.colorPrimary
-    property string colorSelectedText: "white"
+    property color colorText: Theme.colorComponentText
+    property color colorPlaceholderText: Theme.colorSubText
+    property color colorBorder: Theme.colorComponentBorder
+    property color colorBackground: Theme.colorComponentBackground
+    property color colorSelection: Theme.colorPrimary
+    property color colorSelectedText: "white"
 
     ////////////////
 

diff --git a/qml/components_themed/ButtonIconThemed.qml → ...nentLibrary/controls/ButtonIconThemed.qml b/qml/components_themed/ButtonIconThemed.qml → ...nentLibrary/controls/ButtonIconThemed.qml
@@ -1,10 +1,10 @@
-import QtQuick 2.15
-import QtQuick.Controls.impl 2.15
-import QtQuick.Templates 2.15 as T
-import QtQuick.Layouts 1.15
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+import QtQuick.Layouts
 
-import ThemeEngine 1.0
-import "qrc:/js/UtilsNumber.js" as UtilsNumber
+import ThemeEngine
+import "qrc:/utils/UtilsNumber.js" as UtilsNumber
 
 T.Button {
     id: control
@@ -35,7 +35,7 @@ T.Button {
         implicitHeight: Theme.componentHeight
 
         radius: Theme.componentRadius
-        opacity: enabled ? 1 : 0.33
+        opacity: control.enabled ? 1 : 0.66
         color: control.down ? Theme.colorComponentDown : Theme.colorComponent
     }
 
@@ -55,7 +55,7 @@ T.Button {
             Layout.maximumHeight: control.sourceSize
             Layout.alignment: Qt.AlignVCenter
 
-            opacity: enabled ? 1.0 : 0.33
+            opacity: control.enabled ? 1 : 0.66
             color: Theme.colorComponentContent
         }
 
@@ -73,7 +73,7 @@ T.Button {
             horizontalAlignment: Text.AlignHCenter
             verticalAlignment: Text.AlignVCenter
 
-            opacity: enabled ? 1.0 : 0.33
+            opacity: control.enabled ? 1 : 0.66
             color: Theme.colorComponentContent
         }
     }

diff --git a/qml/components_themed/ButtonThemed.qml → ...omponentLibrary/controls/ButtonThemed.qml b/qml/components_themed/ButtonThemed.qml → ...omponentLibrary/controls/ButtonThemed.qml
@@ -1,8 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Controls.impl 2.15
-import QtQuick.Templates 2.15 as T
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
 
-import ThemeEngine 1.0
+import ThemeEngine
 
 T.Button {
     id: control
@@ -26,7 +26,7 @@ T.Button {
         implicitHeight: Theme.componentHeight
 
         radius: Theme.componentRadius
-        opacity: enabled ? 1 : 0.33
+        opacity: control.enabled ? 1 : 0.66
         color: control.down ? Theme.colorComponentDown : Theme.colorComponent
     }
 
@@ -42,7 +42,7 @@ T.Button {
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
 
-        opacity: enabled ? 1.0 : 0.33
+        opacity: control.enabled ? 1 : 0.66
         color: control.down ? Theme.colorComponentContent : Theme.colorComponentContent
     }
 

diff --git a/qml/components_themed/CheckBoxThemed.qml → ...ponentLibrary/controls/CheckBoxThemed.qml b/qml/components_themed/CheckBoxThemed.qml → ...ponentLibrary/controls/CheckBoxThemed.qml
@@ -1,8 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Controls.impl 2.15
-import QtQuick.Templates 2.15 as T
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
 
-import ThemeEngine 1.0
+import ThemeEngine
 
 T.CheckBox {
     id: control
@@ -32,9 +32,12 @@ T.CheckBox {
         height: 24
         radius: Theme.componentRadius
 
+        opacity: control.enabled ? 1 : 0.66
         color: Theme.colorComponentBackground
         border.width: Theme.componentBorderWidth
-        border.color: control.down ? Theme.colorSecondary : Theme.colorComponentBorder
+        border.color: (control.enabled && control.checkable &&
+                       (control.down || control.hovered)) ?
+                          Theme.colorSecondary : Theme.colorComponentBorder
 
         Rectangle {
             anchors.centerIn: parent
@@ -60,8 +63,8 @@ T.CheckBox {
         font: control.font
         wrapMode: Text.WordWrap
 
+        opacity: control.enabled ? 1 : 0.66
         color: control.checked ? Theme.colorText : Theme.colorSubText
-        opacity: enabled ? 1.0 : 0.33
     }
 
     ////////////////

diff --git a/qml/components_themed/ComboBoxThemed.qml → ...ponentLibrary/controls/ComboBoxThemed.qml b/qml/components_themed/ComboBoxThemed.qml → ...ponentLibrary/controls/ComboBoxThemed.qml
@@ -1,8 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Controls.impl 2.15
-import QtQuick.Templates 2.15 as T
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
 
-import ThemeEngine 1.0
+import ThemeEngine
 
 T.ComboBox {
     id: control
@@ -17,7 +17,6 @@ T.ComboBox {
     rightPadding: 16
 
     font.pixelSize: Theme.componentFontSize
-    opacity: enabled ? 1.0 : 0.4
 
     ////////////////
 
@@ -26,6 +25,7 @@ T.ComboBox {
         implicitHeight: Theme.componentHeight
 
         radius: Theme.componentRadius
+        opacity: control.enabled ? 1 : 0.66
         color: control.down ? Theme.colorComponentDown : Theme.colorComponent
         border.width: 2
         border.color: Theme.colorComponentBorder
@@ -41,6 +41,7 @@ T.ComboBox {
         elide: Text.ElideRight
         verticalAlignment: Text.AlignVCenter
 
+        opacity: control.enabled ? 1 : 0.66
         color: Theme.colorComponentContent
     }
 
@@ -51,6 +52,7 @@ T.ComboBox {
         y: control.topPadding + ((control.availableHeight - height) / 2)
         width: 12
         height: 8
+        opacity: control.enabled ? 1 : 0.66
         rotation: control.popup.visible ? 180 : 0
 
         Connections {

diff --git a/qml/components_themed/DialThemed.qml → qml/ComponentLibrary/controls/DialThemed.qml b/qml/components_themed/DialThemed.qml → qml/ComponentLibrary/controls/DialThemed.qml
@@ -1,8 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Controls.impl 2.15
-import QtQuick.Templates 2.15 as T
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
 
-import ThemeEngine 1.0
+import ThemeEngine
 
 T.Dial {
     id: control
@@ -19,7 +19,7 @@ T.Dial {
         height: width
         radius: width
 
-        opacity: control.enabled ? 1 : 0.3
+        opacity: control.enabled ? 1 : 0.66
         color: Theme.colorForeground
         border.width: Theme.componentBorderWidth
         border.color: Theme.colorPrimary
@@ -35,7 +35,7 @@ T.Dial {
         height: 16
         radius: 8
 
-        opacity: control.enabled ? 1 : 0.3
+        opacity: control.enabled ? 1 : 0.66
         color: control.pressed ? Theme.colorSecondary : Theme.colorPrimary
         antialiasing: true
 

diff --git a/qml/components_themed/DrawerThemed.qml → ...omponentLibrary/controls/DrawerThemed.qml b/qml/components_themed/DrawerThemed.qml → ...omponentLibrary/controls/DrawerThemed.qml
@@ -1,8 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Controls.impl 2.15
-import QtQuick.Templates 2.15 as T
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
 
-import ThemeEngine 1.0
+import ThemeEngine
 
 T.Drawer {
     id: control

diff --git a/qml/components_themed/FrameThemed.qml → ...ComponentLibrary/controls/FrameThemed.qml b/qml/components_themed/FrameThemed.qml → ...ComponentLibrary/controls/FrameThemed.qml
@@ -1,8 +1,8 @@
-import QtQuick 2.15
-import QtQuick.Controls.impl 2.15
-import QtQuick.Templates 2.15 as T
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
 
-import ThemeEngine 1.0
+import ThemeEngine
 
 T.Frame {
     id: control
@@ -15,16 +15,16 @@ T.Frame {
     padding: 12
 
     // colors
-    property string backgroundColor: Theme.colorForeground
-    property string borderColor: Theme.colorSeparator
+    property color colorBackground: Theme.colorForeground
+    property color colorBorder: Theme.colorSeparator
 
     ////////////////
 
     background: Rectangle {
         radius: Theme.componentRadius
-        color: control.backgroundColor
+        color: control.colorBackground
         border.width: 2
-        border.color: control.borderColor
+        border.color: control.colorBorder
     }
 
     ////////////////