Changeset 101996 in webkit

Timestamp:

Dec 5, 2011, 6:47:46 AM (15 years ago)

Author:

kenneth@webkit.org

Message:

[Qt] Make the UI of the MiniBrowser slightly nicer

Rubberstamped by Simon Hausmann.

• Add proper padding
• Show feedback when pressing on the toolbar icons
• Make the text entry better looking

• MiniBrowser/qt/qml/BrowserWindow.qml:

Location:

trunk/Tools

Files:

• ChangeLog (modified) (1 diff)
• MiniBrowser/qt/qml/BrowserWindow.qml (modified) (12 diffs)

trunk/Tools/ChangeLog

@@ +1 @@
+2011-12-05  Kenneth Rohde Christiansen  <kenneth@webkit.org>
+
+        [Qt] Make the UI of the MiniBrowser slightly nicer
+
+        Rubberstamped by Simon Hausmann.
+
+        - Add proper padding
+        - Show feedback when pressing on the toolbar icons
+        - Make the text entry better looking
+
+        * MiniBrowser/qt/qml/BrowserWindow.qml:
+
 2011-12-05  Kristóf Kosztyó  <kkristof@inf.u-szeged.hu>
 

trunk/Tools/MiniBrowser/qt/qml/BrowserWindow.qml

@@ -49 +49 @@
         id: navigationBar
         color: "#efefef"
-        height: 30
+        height: 38
         anchors {
             top: parent.top
@@ -57 +57 @@
 
         Row {
+            height: parent.height - 6
+            anchors {
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+                leftMargin: 3
+            }
+            spacing: 3
             id: controlsRow
-            spacing: 4
             Rectangle {
                 id: backButton
-                height: navigationBar.height - 2
+                height: parent.height
                 width: height
                 color: "#efefef"
+                radius: 6
+
+                property alias enabled: webView.canGoBack
 
                 Image {
@@ -72 +81 @@
                 Rectangle {
                     anchors.fill: parent
-                    color: reloadButton.color
+                    color: parent.color
+                    radius: parent.radius
                     opacity: 0.8
-                    visible: !webView.canGoBack
+                    visible: !parent.enabled
                 }
 
                 MouseArea {
                     anchors.fill: parent
+                    onPressed: { if (parent.enabled) parent.color = "#cfcfcf" }
+                    onReleased: { parent.color = "#efefef" }
                     onClicked: {
-                        console.log("going back")
-                        webView.goBack()
+                        if (parent.enabled) {
+                            console.log("MiniBrowser: Going backward in session history.")
+                            webView.goBack()
+                        }
                     }
                 }
@@ -87 +101 @@
             Rectangle {
                 id: forwardButton
-                height: navigationBar.height - 2
+                height: parent.height
                 width: height
                 color: "#efefef"
+                radius: 6
+
+                property alias enabled: webView.canGoForward
 
                 Image {
@@ -98 +115 @@
                 Rectangle {
                     anchors.fill: parent
-                    color: forwardButton.color
+                    color: parent.color
+                    radius: parent.radius
                     opacity: 0.8
-                    visible: !webView.canGoForward
+                    visible: !parent.enabled
                 }
 
                 MouseArea {
                     anchors.fill: parent
+                    onPressed: { if (parent.enabled) parent.color = "#cfcfcf" }
+                    onReleased: { parent.color = "#efefef" }
                     onClicked: {
-                        console.log("going forward")
-                        webView.goForward()
+                        if (parent.enabled) {
+                            console.log("MiniBrowser: Going forward in session history.")
+                            webView.goForward()
+                        }
                     }
                 }
@@ -113 +135 @@
             Rectangle {
                 id: reloadButton
-                height: navigationBar.height - 2
+                height: parent.height
                 width: height
                 color: "#efefef"
+                radius: 6
 
                 Image {
@@ -124 +147 @@
                 MouseArea {
                     anchors.fill: parent
+                    onPressed: { parent.color = "#cfcfcf" }
+                    onReleased: { parent.color = "#efefef" }
                     onClicked: {
                         if (webView.canStop) {
@@ -138 +163 @@
         Rectangle {
             color: "white"
-            height: navigationBar.height - 4
+            height: 26
             border.width: 1
+            border.color: "#bfbfbf"
+            radius: 3
             anchors {
                 left: controlsRow.right
                 right: parent.right
-                margins: 2
+                margins: 6
                 verticalCenter: parent.verticalCenter
             }
@@ -152 +179 @@
                     left: parent.left
                 }
+                radius: 3
                 width: parent.width / 100 * webView.loadProgress
                 color: "blue"
@@ -157 +185 @@
                 visible: webView.loadProgress != 100
             }
-
             TextInput {
                 id: addressLine
@@ -163 +190 @@
                 selectByMouse: true
                 font {
-                    pointSize: 14
-                    family: "Helvetica"
+                    pointSize: 11
+                    family: "Sans"
                 }
                 anchors {
@@ -170 +197 @@
                     left: parent.left
                     right: parent.right
-                    margins: 2
+                    margins: 6
                 }