Merge main

TeroStyle/Button.qml

@@ -1,30 +1,68 @@
 import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls.impl as I
 import QtQuick.Templates as T
 
 T.Button {
     id: control
 
-    implicitHeight: implicitContentHeight
-    implicitWidth: contentItem.width
+    /**
+     * Set true when the button is supposed to be displayed in e.g. a TextField.
+     * You want to do this when this button is directly related to the TextField
+     * and the primary and only action for the TextField.
+     * Usually, you'd only want to display an icon in this button.
+     * If true, automatically sets height, width and position.
+     *
+     * ```qml
+     * TextField {
+     *   placeholderText: "Search..."
+     *   Button {
+     *     icon.source: "qrc:/images/MagnifyingGlass.svg"
+     *     isFieldButton: true
+     *   }
+     * }
+     * ```
+     */
+    property bool isFieldButton: false
+
+    height: isFieldButton ? parent.height : null
+    icon.color: Colors.primaryContrast
+    icon.height: 21
+    icon.width: 21
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitContentHeight + topPadding + bottomPadding)
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitContentWidth + leftPadding + rightPadding)
+    /**
+     * Icon is slightly larger than Text, so we need to reduce the padding a
+     * tiny bit to make sure all Buttons are still the same height.
+     */
+    padding: Dimensions.m - (icon.source.toString() === "" ? 0 : 1)
+    x: isFieldButton ? parent.x + parent.width - width : null
 
     background: Rectangle {
+        anchors.fill: parent
+        border.color: Colors.interactive
+        border.width: isFieldButton ? 1 : 0
+        bottomLeftRadius: topLeftRadius
         color: Colors.primary
         radius: Dimensions.radius
+        topLeftRadius: isFieldButton ? 0 : radius
     }
-    contentItem: Text {
-        color: Colors.foreground
+    contentItem: I.IconLabel {
+        color: Colors.primaryContrast
+        display: control.display
         font: control.font
-        padding: Dimensions.s + 2
+        icon: control.icon
+        mirrored: control.mirrored
+        spacing: Dimensions.s
         text: control.text
-        // Make sure the button is at least wide enough to be comfortably clickable
-        width: Math.max(implicitWidth, 120)
-        horizontalAlignment: Text.AlignHCenter
     }
 
     MouseArea {
         id: mouseArea
+
         anchors.fill: parent
         cursorShape: Qt.PointingHandCursor
-        onPressed: (mouse) => mouse.accepted = false
+
+        onPressed: mouse => mouse.accepted = false
     }
 }

TeroStyle/Colors.qml

@@ -6,14 +6,16 @@ QtObject {
     readonly property int dark: 0
     readonly property int light: 1
 
-    property int theme: dark
+    property int theme: Application.styleHints.colorScheme === Qt.ColorScheme.Light ? light : dark
 
-    readonly property color primary: "#b81a34"
-    readonly property color foreground: theme === dark ? "#fdfdfd" : "#110b0c"
+    property color primary: "#b81a34"
+    property color primaryContrast: "#fdfdfd"
+    property color foreground: theme === dark ? "#fdfdfd" : "#110b0c"
     readonly property color background: theme === dark ? "#303136" : "#eff1f5"
     readonly property color mantle: theme === dark ? "#1e1f22" : "#e7e9ef"
     readonly property color interactive: theme === dark ? "#878b97" : "#d9d9da"
     readonly property color error: theme === dark ? "#ff2264" : "#ff004b"
+    readonly property color transparent: "transparent"
 
     readonly property double highlightOpacity: .3
 }

TeroStyle/Label.qml

@@ -0,0 +1,5 @@
+import QtQuick.Controls
+
+Label {
+    color: Colors.foreground
+}

TeroStyle/QuickFilter.qml

@@ -0,0 +1,60 @@
+import QtQuick
+import QtCore
+import QtQuick.Layouts
+
+RowLayout {
+    id: root
+
+    required property ListModel model
+
+    signal selectedChanged(string name)
+
+    spacing: Dimensions.m
+
+    Repeater {
+        model: root.model
+
+        Item {
+            id: item
+
+            required property int index
+            required property var modelData
+            property real padding: Dimensions.m
+
+            height: text.height + padding * 2
+            width: text.width + padding * 2
+
+            Rectangle {
+                anchors.fill: parent
+                border.color: modelData.selected ? Colors.transparent : Colors.foreground
+                border.width: 2
+                color: modelData.selected ? Colors.primary : Colors.transparent
+                radius: parent.height
+            }
+            Text {
+                id: text
+
+                color: Colors.foreground
+                font: Typography.body
+                text: modelData.text
+                x: parent.padding
+                y: parent.padding
+            }
+            MouseArea {
+                anchors.fill: parent
+                cursorShape: Qt.PointingHandCursor
+
+                onPressed: {
+                    if (item.modelData.selected)
+                        return;
+                    const model = root.model;
+                    for (let i = 0; i < model.count; i++) {
+                        model.setProperty(i, "selected", false);
+                    }
+                    model.setProperty(item.index, "selected", true);
+                    selectedChanged(item.modelData.name)
+                }
+            }
+        }
+    }
+}

TeroStyle/TextField.qml

@@ -19,7 +19,28 @@ T.TextField
     placeholderTextColor: Colors.interactive
     font: Typography.body
     padding: Dimensions.m
+
     verticalAlignment: Text.AlignVCenter
 
 
+
+
+    /**
+     * Placeholder
+     */
+    Text {
+        x: control.leftPadding
+        y: control.topPadding
+        width: control.width - (control.leftPadding + control.rightPadding)
+        height: control.height - (control.topPadding + control.bottomPadding)
+
+        font: control.font
+        text: control.placeholderText
+        color: control.placeholderTextColor
+        verticalAlignment: control.verticalAlignment
+        visible: !control.length && !control.preeditText && (!control.activeFocus || control.horizontalAlignment !== Qt.AlignHCenter)
+        elide: Text.ElideRight
+        renderType: control.renderType
+    }
 }
+

TeroStyle/qmldir

@@ -7,3 +7,7 @@ ComboBox ComboBox.qml
 Field Field.qml
 TextField TextField.qml
 BarButton BarButton.qml
+Label Label.qml
+QuickFilter QuickFilter.qml
+
+