Implement Quick Filters

TeroStyle/Button.qml

@@ -6,37 +6,55 @@ import QtQuick.Templates as T
 T.Button {
     id: control
 
+    /**
+     * 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
-    )
-    padding: Dimensions.s - (icon.source.toString() === "" ? 0 : 1)
+    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: I.IconLabel {
-        spacing: Dimensions.s
-        mirrored: control.mirrored
-        display: control.display
-        icon: control.icon
-        text: control.text
-        font: control.font
         color: Colors.primaryContrast
-    }
-
-    onIconChanged: () => {
-        // console.log("ICON '" + JSON.stringify(icon.source) + "' " + (icon.source.toString() === "") + " ");
+        display: control.display
+        font: control.font
+        icon: control.icon
+        mirrored: control.mirrored
+        spacing: Dimensions.s
+        text: control.text
     }
 
     MouseArea {

TeroStyle/Colors.qml

@@ -15,6 +15,7 @@ QtObject {
     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/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

@@ -17,4 +17,22 @@ T.TextField {
     placeholderTextColor: Colors.interactive
     font: Typography.body
     padding: Dimensions.m
+
+    /**
+     * 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

@@ -6,4 +6,5 @@ Button Button.qml
 ComboBox ComboBox.qml
 Field Field.qml
 Label Label.qml
+QuickFilter QuickFilter.qml
 TextField TextField.qml