Improve search textfield UI

images/system-search-symbolic.svg

@@ -0,0 +1,8 @@
+<svg width="22" height="22" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <defs>
+  <style id="current-color-scheme" type="text/css">
+   .ColorScheme-Text { color:#ffffff; } .ColorScheme-Highlight { color:#4285f4; }
+  </style>
+ </defs>
+ <path d="m8.873 3c-3.233 0-5.873 2.64-5.873 5.873s2.64 5.874 5.873 5.874c1.287 0 2.417-0.502 3.387-1.21l5.462 5.463 1.278-1.278-5.463-5.462c0.708-0.97 1.21-2.1 1.21-3.387 0-3.233-2.64-5.873-5.874-5.873zm0 1.807c2.256 0 4.066 1.81 4.066 4.066s-1.81 4.066-4.066 4.066a4.053 4.053 0 0 1-4.066-4.066 4.053 4.053 0 0 1 4.065-4.066z" class="ColorScheme-Text" fill="currentColor"/>
+</svg>

qml.qrc

@@ -4,5 +4,6 @@
         <file>qml/GridItemDelegate.qml</file>
         <file>qml/AllAppsView.qml</file>
         <file>qml/CategoryView.qml</file>
+        <file>images/system-search-symbolic.svg</file>
     </qresource>
 </RCC>

qml/main.qml

@@ -167,7 +167,7 @@ Item {
 
             TextMetrics {
                 id: fontMetrics
-                text: textField.placeholderText
+                text: _placeLabel.text
             }
 
             TextField {
@@ -176,31 +176,49 @@ Item {
                 width: searchItem.width * 0.2
                 height: parent.height
 
-                leftPadding: FishUI.Units.largeSpacing
+                leftPadding: textField.activeFocus ? _placeImage.width + FishUI.Units.largeSpacing : FishUI.Units.largeSpacing
                 rightPadding: FishUI.Units.largeSpacing
 
                 selectByMouse: true
 
-                placeholderText: qsTr("Search")
+                // placeholderText: qsTr("Search")
                 wrapMode: Text.NoWrap
 
                 color: "white"
 
-                Label {
-                    id: placeholder
-                    x: textField.leftPadding
-                    y: textField.topPadding
-                    width: textField.width - (textField.leftPadding + textField.rightPadding)
-                    height: textField.height - (textField.topPadding + textField.bottomPadding)
-                    text: textField.placeholderText
-                    font: textField.font
-                    color: "white"
-                    opacity: 0.65
-                    visible: !textField.length && !textField.preeditText && (!textField.activeFocus || textField.horizontalAlignment !== Qt.AlignHCenter)
-                    elide: Text.ElideRight
-                    wrapMode: Text.NoWrap
-                    horizontalAlignment: Text.AlignLeft
-                    verticalAlignment: textField.verticalAlignment
+                Item {
+                    id: placeHolderItem
+                    height: textField.height
+                    width: _placeHolderLayout.implicitWidth
+                    opacity: 0.6
+                    x: textField.activeFocus ? FishUI.Units.smallSpacing : (textField.width - placeHolderItem.width) / 2
+                    y: 0
+
+                    Behavior on x {
+                        NumberAnimation {
+                            duration: 200
+                        }
+                    }
+
+                    RowLayout {
+                        id: _placeHolderLayout
+                        anchors.fill: parent
+
+                        Image {
+                            id: _placeImage
+                            height: placeHolderItem.height - FishUI.Units.largeSpacing
+                            width: height
+                            sourceSize: Qt.size(width, height)
+                            source: "qrc:/images/system-search-symbolic.svg"
+                        }
+
+                        Label {
+                            id: _placeLabel
+                            color: "white"
+                            text: qsTr("Search")
+                            visible: !textField.length && !textField.preeditText && (!textField.activeFocus || textField.horizontalAlignment !== Qt.AlignHCenter)
+                        }
+                    }
                 }
 
                 background: Rectangle {

translations/en_US.ts

@@ -27,26 +27,15 @@
         <translation>Launcher</translation>
     </message>
 </context>
-<context>
-    <name>LauncherGridDelegate</name>
-    <message>
-        <source>Open</source>
-        <translation type="vanished">Open</translation>
-    </message>
-    <message>
-        <source>Uninstall</source>
-        <translation type="vanished">Uninstall</translation>
-    </message>
-</context>
 <context>
     <name>main</name>
     <message>
-        <location filename="../qml/main.qml" line="184"/>
+        <location filename="../qml/main.qml" line="218"/>
         <source>Search</source>
         <translation>Search</translation>
     </message>
     <message>
-        <location filename="../qml/main.qml" line="275"/>
+        <location filename="../qml/main.qml" line="293"/>
         <source>Not found</source>
         <translation>Not found</translation>
     </message>

translations/zh_CN.ts

@@ -27,34 +27,15 @@
         <translation>启动器</translation>
     </message>
 </context>
-<context>
-    <name>LauncherGridDelegate</name>
-    <message>
-        <source>Open</source>
-        <translation type="vanished">打开</translation>
-    </message>
-    <message>
-        <source>Send to dock</source>
-        <translation type="vanished">发送到程序坞</translation>
-    </message>
-    <message>
-        <source>Remove from dock</source>
-        <translation type="vanished">在程序坞中移除</translation>
-    </message>
-    <message>
-        <source>Uninstall</source>
-        <translation type="vanished">卸载</translation>
-    </message>
-</context>
 <context>
     <name>main</name>
     <message>
-        <location filename="../qml/main.qml" line="184"/>
+        <location filename="../qml/main.qml" line="218"/>
         <source>Search</source>
         <translation>搜索</translation>
     </message>
     <message>
-        <location filename="../qml/main.qml" line="275"/>
+        <location filename="../qml/main.qml" line="293"/>
         <source>Not found</source>
         <translation>未找到</translation>
     </message>