dashboard/media: improve ui

3 files changed, 19 insertions, 7 deletions

diff --git a/components/controls/IconButton.qml b/components/controls/IconButton.qml
index 590cd7d..dc3b04b 100644
--- a/components/controls/IconButton.qml
+++ b/components/controls/IconButton.qml
@@ -18,6 +18,7 @@ StyledRect {
     property real padding: type === IconButton.Text ? Appearance.padding.small / 2 : Appearance.padding.smaller
     property alias font: label.font
     property int type: IconButton.Filled
+    property bool disabled
 
     property alias stateLayer: stateLayer
     property alias label: label
@@ -36,13 +37,15 @@ StyledRect {
             return Colours.palette.m3onPrimary;
         return type === IconButton.Tonal ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurfaceVariant;
     }
+    property color disabledColour: Qt.alpha(Colours.palette.m3onSurface, 0.1)
+    property color disabledOnColour: Qt.alpha(Colours.palette.m3onSurface, 0.38)
 
     signal clicked
 
     onCheckedChanged: internalChecked = checked
 
     radius: internalChecked ? Appearance.rounding.small : implicitHeight / 2
-    color: type === IconButton.Text ? "transparent" : internalChecked ? activeColour : inactiveColour
+    color: type === IconButton.Text ? "transparent" : disabled ? disabledColour : internalChecked ? activeColour : inactiveColour
 
     implicitWidth: implicitHeight
     implicitHeight: label.implicitHeight + padding * 2
@@ -51,6 +54,7 @@ StyledRect {
         id: stateLayer
 
         color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour
+        disabled: root.disabled
 
         function onClicked(): void {
             if (root.toggle)
@@ -63,7 +67,7 @@ StyledRect {
         id: label
 
         anchors.centerIn: parent
-        color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour
+        color: root.disabled ? root.disabledOnColour : root.internalChecked ? root.activeOnColour : root.inactiveOnColour
         fill: !root.toggle || root.internalChecked ? 1 : 0
 
         Behavior on fill {
diff --git a/components/controls/Menu.qml b/components/controls/Menu.qml
index 7121536..c763b54 100644
--- a/components/controls/Menu.qml
+++ b/components/controls/Menu.qml
@@ -19,7 +19,7 @@ Elevation {
     radius: Appearance.rounding.small / 2
     level: 2
 
-    implicitWidth: column.implicitWidth
+    implicitWidth: Math.max(200, column.implicitWidth)
     implicitHeight: root.expanded ? column.implicitHeight : 0
     opacity: root.expanded ? 1 : 0
 
@@ -31,6 +31,8 @@ Elevation {
         ColumnLayout {
             id: column
 
+            anchors.left: parent.left
+            anchors.right: parent.right
             spacing: 0
 
             Repeater {
diff --git a/components/controls/SplitButton.qml b/components/controls/SplitButton.qml
index c601361..600821c 100644
--- a/components/controls/SplitButton.qml
+++ b/components/controls/SplitButton.qml
@@ -16,15 +16,21 @@ Row {
     property real verticalPadding: Appearance.padding.smaller
     property int type: SplitButton.Filled
     property bool disabled
+    property string fallbackIcon
+    property string fallbackText
+
     property alias menuItems: menu.items
     property alias active: menu.active
     property alias expanded: menu.expanded
     property alias menu: menu
+    property alias iconLabel: iconLabel
+    property alias label: label
+    property alias stateLayer: stateLayer
 
     property color colour: type == SplitButton.Filled ? Colours.palette.m3primary : Colours.palette.m3secondaryContainer
     property color textColour: type == SplitButton.Filled ? Colours.palette.m3onPrimary : Colours.palette.m3onSecondaryContainer
-    readonly property color disabledColour: Qt.alpha(Colours.palette.m3onSurface, 0.1)
-    readonly property color disabledTextColour: Qt.alpha(Colours.palette.m3onSurface, 0.38)
+    property color disabledColour: Qt.alpha(Colours.palette.m3onSurface, 0.1)
+    property color disabledTextColour: Qt.alpha(Colours.palette.m3onSurface, 0.38)
 
     spacing: Math.floor(Appearance.spacing.small / 2)
 
@@ -62,7 +68,7 @@ Row {
 
                 Layout.alignment: Qt.AlignVCenter
                 animate: true
-                text: root.active?.activeIcon ?? ""
+                text: root.active?.activeIcon ?? root.fallbackIcon
                 color: root.disabled ? root.disabledTextColour : root.textColour
                 fill: 1
             }
@@ -73,7 +79,7 @@ Row {
                 Layout.alignment: Qt.AlignVCenter
                 Layout.preferredWidth: implicitWidth
                 animate: true
-                text: root.active?.activeText ?? ""
+                text: root.active?.activeText ?? root.fallbackText
                 color: root.disabled ? root.disabledTextColour : root.textColour
                 clip: true