Work on components

emericg · Mar 29, 2024 · ddf35d6 · ddf35d6
1 parent 849d25c
commit ddf35d6
Show file tree

Hide file tree

Showing 10 changed files with 447 additions and 74 deletions.
diff --git a/qml/ComponentLibrary/ComponentLibrary.qrc b/qml/ComponentLibrary/ComponentLibrary.qrc
@@ -17,6 +17,7 @@
         <file alias="ListTitle.qml">menus/ListTitle.qml</file>
         <file alias="SectionTitle.qml">menus/SectionTitle.qml</file>
 
+        <file alias="ButtonChip.qml">wip/ButtonChip.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>
@@ -34,6 +35,7 @@
         <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="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>

diff --git a/...Library/complex/TextField_FileDialog6.qml → ...tLibrary/complex/TextField_FileDialog.qml b/...Library/complex/TextField_FileDialog6.qml → ...tLibrary/complex/TextField_FileDialog.qml
diff --git a/...brary/complex/TextField_FolderDialog6.qml → ...ibrary/complex/TextField_FolderDialog.qml b/...brary/complex/TextField_FolderDialog6.qml → ...ibrary/complex/TextField_FolderDialog.qml
diff --git a/qml/ComponentLibrary/generic/ItemBadge.qml b/qml/ComponentLibrary/generic/ItemBadge.qml
@@ -2,76 +2,34 @@ import QtQuick
 
 import ThemeEngine
 
-Item {
+Rectangle {
     id: control
-    width: leftText.contentWidth + rightText.contentWidth + 24
-    height: 22
 
-    property string legend: "legend"
-    property string text: "text"
+    implicitWidth: 48
+    implicitHeight: 20
 
-    signal clicked()
+    width: contentText.contentWidth + 12
 
-    Rectangle {
-        id: leftRect
-        anchors.top: parent.top
-        anchors.topMargin: 0
-        anchors.left: parent.left
-        anchors.leftMargin: 0
-        anchors.right: leftText.right
-        anchors.rightMargin: -6
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 0
+    radius: Theme.componentRadius
+    color: Theme.colorPrimary
 
-        color: "#555555"
-    }
-
-    Rectangle {
-        id: rightRect
-        anchors.top: parent.top
-        anchors.topMargin: 0
-        anchors.left: leftRect.right
-        anchors.leftMargin: 0
-        anchors.right: parent.right
-        anchors.rightMargin: 0
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 0
-
-        color: "#97ca00"
-    }
-
-    Text {
-        id: leftText
-        anchors.left: parent.left
-        anchors.leftMargin: 6
-        anchors.verticalCenter: parent.verticalCenter
-
-        color: "white"
-        text: control.legend
-        textFormat: Text.PlainText
-        horizontalAlignment: Text.AlignHCenter
-        font.pixelSize: Theme.fontSizeContentVerySmall
-    }
+    // settings
+    property string text: "0"
+    property color textColor: "white"
+    property int textSize: Theme.fontSizeContentVerySmall
+    property int textCapitalization: Font.Normal
+    property bool textBold: true
 
     Text {
-        id: rightText
-        anchors.left: rightRect.left
-        anchors.leftMargin: 6
-        anchors.right: rightRect.right
-        anchors.rightMargin: 6
-        anchors.verticalCenter: parent.verticalCenter
+        id: contentText
+        anchors.centerIn: parent
 
-        color: "white"
         text: control.text
         textFormat: Text.PlainText
-        horizontalAlignment: Text.AlignHCenter
-        font.pixelSize: Theme.fontSizeContentVerySmall
-        font.bold: true
-    }
 
-    MouseArea {
-        id: mouseArea
-        anchors.fill: parent
-        onClicked: control.clicked()
+        color: control.textColor
+        font.bold: control.textBold
+        font.pixelSize: control.textSize
+        font.capitalization: control.textCapitalization
     }
 }
diff --git a/qml/ComponentLibrary/generic/ItemLicenseBadge.qml b/qml/ComponentLibrary/generic/ItemLicenseBadge.qml
@@ -0,0 +1,77 @@
+import QtQuick
+
+import ThemeEngine
+
+Item {
+    id: control
+    width: leftText.contentWidth + rightText.contentWidth + 24
+    height: 22
+
+    property string legend: "legend"
+    property string text: "text"
+
+    signal clicked()
+
+    Rectangle {
+        id: leftRect
+        anchors.top: parent.top
+        anchors.topMargin: 0
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+        anchors.right: leftText.right
+        anchors.rightMargin: -6
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 0
+
+        color: "#555555"
+    }
+
+    Rectangle {
+        id: rightRect
+        anchors.top: parent.top
+        anchors.topMargin: 0
+        anchors.left: leftRect.right
+        anchors.leftMargin: 0
+        anchors.right: parent.right
+        anchors.rightMargin: 0
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 0
+
+        color: "#97ca00"
+    }
+
+    Text {
+        id: leftText
+        anchors.left: parent.left
+        anchors.leftMargin: 6
+        anchors.verticalCenter: parent.verticalCenter
+
+        color: "white"
+        text: control.legend
+        textFormat: Text.PlainText
+        horizontalAlignment: Text.AlignHCenter
+        font.pixelSize: Theme.fontSizeContentVerySmall
+    }
+
+    Text {
+        id: rightText
+        anchors.left: rightRect.left
+        anchors.leftMargin: 6
+        anchors.right: rightRect.right
+        anchors.rightMargin: 6
+        anchors.verticalCenter: parent.verticalCenter
+
+        color: "white"
+        text: control.text
+        textFormat: Text.PlainText
+        horizontalAlignment: Text.AlignHCenter
+        font.pixelSize: Theme.fontSizeContentVerySmall
+        font.bold: true
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        onClicked: control.clicked()
+    }
+}
diff --git a/qml/ComponentLibrary/generic/ItemTagButton.qml b/qml/ComponentLibrary/generic/ItemTagButton.qml
@@ -1,13 +1,15 @@
 import QtQuick
+import QtQuick.Effects
 
 import ThemeEngine
 
 Rectangle {
     id: control
+
     implicitWidth: 80
     implicitHeight: 28
-    width: contentRow.width + 20
 
+    width: contentRow.width
     radius: Theme.componentRadius
     color: backgroundColor
 
@@ -23,11 +25,19 @@ Rectangle {
 
     signal clicked()
 
+    ////////////////
+
     Row {
         id: contentRow
         anchors.centerIn: parent
         height: control.height
 
+        Item {
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            width: 10
+        }
+
         Text {
             anchors.top: parent.top
             anchors.bottom: parent.bottom
@@ -46,29 +56,65 @@ Rectangle {
         Item {
             anchors.top: parent.top
             anchors.bottom: parent.bottom
-            width: 20
+            width: 12
 
             Rectangle {
                 anchors.top: parent.top
                 anchors.bottom: parent.bottom
                 anchors.right: parent.right
-                anchors.rightMargin: 6
+                anchors.rightMargin: 0
                 width: 2
                 color: control.textColor
                 opacity: 0.5
             }
         }
 
-        IconSvg {
-            anchors.verticalCenter: parent.verticalCenter
-            source: control.source
-            width: control.sourceSize
-            color: control.sourceColor
+        Rectangle {
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            width: 40
+
+            color: {
+                if (mousearea.containsPress) return Qt.darker(control.color, 1.06)
+                if (mousearea.containsMouse) return Qt.darker(control.color, 1.03)
+                return control.color
+            }
+
+            IconSvg {
+                anchors.centerIn: parent
+                source: control.source
+                width: control.sourceSize
+                color: control.sourceColor
+            }
+
+            MouseArea {
+                id: mousearea
+                anchors.fill: parent
+                hoverEnabled: true
+                onClicked: control.clicked()
+            }
         }
     }
 
-    MouseArea {
-        anchors.fill: parent
-        onClicked: control.clicked()
+    ////////////////
+
+    layer.enabled: true
+    layer.effect: MultiEffect {
+        maskEnabled: true
+        maskInverted: false
+        maskThresholdMin: 0.5
+        maskSpreadAtMin: 1.0
+        maskSpreadAtMax: 0.0
+        maskSource: ShaderEffectSource {
+            sourceItem: Rectangle {
+                x: control.x
+                y: control.y
+                width: control.width
+                height: control.height
+                radius: control.radius
+            }
+        }
     }
+
+    ////////////////
 }