style(Launcher): components to make it looks more dynamic

including contrasting coloring, scales

3 files changed, 21 insertions, 5 deletions

diff --git a/launcher/components/App.qml b/launcher/components/App.qml
index 5851d3c..9955811 100644
--- a/launcher/components/App.qml
+++ b/launcher/components/App.qml
@@ -144,6 +144,7 @@ IComponent {
 
                 RowLayout {
                     id: item
+                    scale: index === selectedIndex ? 1.01 : 0.99
                     anchors.left: parent.left
                     anchors.top: parent.top
                     anchors.margins: Launcher.innerMargin * 2
@@ -157,6 +158,11 @@ IComponent {
                     IText {
                         text: modelData.name
                         renderType: Text.QtRendering
+                        color: index === selectedIndex ? Colors.foreground1 : Colors.foreground2
+                    }
+
+                    Behavior on scale {
+                        ISpringAnimation {}
                     }
                 }
 
diff --git a/launcher/components/Clip.qml b/launcher/components/Clip.qml
index e14eae2..c64ca72 100644
--- a/launcher/components/Clip.qml
+++ b/launcher/components/Clip.qml
@@ -105,8 +105,13 @@ IComponent {
                         spacing: Launcher.innerMargin * 2
 
                         IconImage {
+                            scale: index === root.selectedIndex ? 1.01 : 0.9
                             source: modelData?.appIcon
                             implicitSize: parent.height
+
+                            Behavior on scale {
+                                ISpringAnimation {}
+                            }
                         }
 
                         Column {
@@ -114,6 +119,7 @@ IComponent {
                                 sourceComponent: modelData?.type === "image" ? img : text
                                 readonly property Component text: IText {
                                     text: modelData?.data || ""
+                                    color: index === root.selectedIndex ? Colors.foreground1 : Colors.foreground2
                                     font.pixelSize: Style.font.size.largerr
                                 }
                                 readonly property Component img: Image {
@@ -125,18 +131,18 @@ IComponent {
                                 property string sinceWhen: TimeDate.sinceWhen(modelData?.timestamp) || ""
                                 IText {
                                     text: modelData.type
-                                    color: Colors.foreground3
+                                    color: index === root.selectedIndex ? Colors.foreground2 : Colors.foreground3
                                     font.pixelSize: Style.font.size.normal
                                 }
                                 IText {
                                     visible: parent.sinceWhen
                                     text: '·'
-                                    color: Colors.foreground3
+                                    color: index === root.selectedIndex ? Colors.foreground2 : Colors.foreground3
                                     font.pixelSize: Style.font.size.normal
                                 }
                                 IText {
                                     text: parent.sinceWhen || ""
-                                    color: Colors.foreground3
+                                    color: index === root.selectedIndex ? Colors.foreground2 : Colors.foreground3
                                     font.pixelSize: Style.font.size.normal
                                 }
                             }
diff --git a/launcher/components/Spell.qml b/launcher/components/Spell.qml
index 6cd847c..52f32b1 100644
--- a/launcher/components/Spell.qml
+++ b/launcher/components/Spell.qml
@@ -145,8 +145,6 @@ IComponent {
                         flow: GridView.FlowLeftToRight
                         snapMode: GridView.NoSnap
 
-                        // Compute a reasonable cell width based on font size, keeping
-                        // roughly the same behavior as before.
                         cellWidth: Math.floor(width / Math.max(1, Math.floor(width / Math.max(1, Math.round(Launcher.widgetFontSize * 6)))))
                         cellHeight: Math.ceil(Launcher.widgetFontSize * 1.6) + Launcher.innerMargin * 2
 
@@ -156,6 +154,7 @@ IComponent {
 
                             width: grid.cellWidth
                             height: chipContent.implicitHeight + Launcher.innerMargin * 2
+                            scale: index === selectedIndex ? 1.03 : 0.97
 
                             IRect {
                                 anchors.fill: parent
@@ -168,6 +167,7 @@ IComponent {
                                     text: modelData
                                     font.pixelSize: Launcher.widgetFontSize
                                     elide: Text.ElideRight
+                                    color: index === selectedIndex ? Colors.foreground1 : Colors.foreground2
                                 }
 
                                 MouseArea {
@@ -181,6 +181,10 @@ IComponent {
                                     }
                                 }
                             }
+
+                            Behavior on scale {
+                                ISpringAnimation {}
+                            }
                         }
 
                         Component.onCompleted: {