Merge lp:~feng-kylin/unity8/AddSmallDropShadowOnText into lp:unity8

[handsome_feng]

Added a small drop shadow on the text on the Greeter and the Lockscreens.

Added a small drop shadow on the text on the Greeter and the Lockscreens to keep fonts readable wherever we allow the user setting his own background image.

* Are there any related MPs required for this MP to build/function as expected? Please list.

no

 * Did you perform an exploratory manual test run of your code change and any related functionality?

yes

 * Did you make sure that your branch does not contain spurious tags?

yes

 * If you changed the packaging (debian), did you subscribe the ubuntu-unity team to this MP?

n/a

 * If you changed the UI, has there been a design review?

no

[Michael Zanetti (mzanetti)]

There are some elements missing:

* The dots that appear when pressing a number
* The backspace button
* the close/cancel button
* The phone icon next to "Emergency call"

===

The checklist is missing

===

Also I'd like to have a review from design. I'll try to get hold of a designer.

review: Needs Fixing

[lp:~feng-kylin/unity8/AddSmallDropShadowOnText]

1794. By handsome_feng on 2015-06-02

Added the drop shadow on the icons

[handsome_feng (feng-kylin)]

> There are some elements missing:
>
> * The dots that appear when pressing a number
> * The backspace button
> * the close/cancel button
> * The phone icon next to "Emergency call"
>
>
> ===
>
> The checklist is missing
>
> ===
>
> Also I'd like to have a review from design. I'll try to get hold of a
> designer.

I added the drop shadow on the missing icons, and waiting for a further design.Thank you!

[Michael Zanetti (mzanetti)]

Added some inline comments.

Also, please add the checklist to the description

review: Needs Fixing

[lp:~feng-kylin/unity8/AddSmallDropShadowOnText]

1795. By handsome_feng on 2015-06-03

Modified the anchors statements

1796. By handsome_feng on 2015-06-30

merge trunk

[Michael Zanetti (mzanetti)]

Sorry... Jouni told me that they are trying to reduce usage of drop-shadows...

[Albert Astals Cid (aacid)]

Jouni should we disacard this then?

Unmerged revisions

1796. By handsome_feng on 2015-06-30

merge trunk

1795. By handsome_feng on 2015-06-03

Modified the anchors statements

1794. By handsome_feng on 2015-06-02

Added the drop shadow on the icons

1793. By handsome_feng on 2015-06-01

Add a small drop shadow on the text

=== modified file 'qml/Components/DelayedLockscreen.qml'
--- qml/Components/DelayedLockscreen.qml	2015-02-12 14:48:06 +0000
+++ qml/Components/DelayedLockscreen.qml	2015-06-30 09:26:14 +0000
@@ -15,6 +15,7 @@
  */
 
 import QtQuick 2.0
+import QtGraphicalEffects 1.0
 import Ubuntu.Components 0.1
 import "../Components"
 
@@ -37,7 +38,7 @@
         anchors.verticalCenter: parent.verticalCenter
         spacing: units.gu(2)
 
-        Label {
+        DropShadowText {
             id: deviceLockedLabel
             objectName: "deviceLockedLabel"
             anchors.left: parent.left
@@ -54,7 +55,7 @@
             height: units.gu(1)
         }
 
-        Label {
+        DropShadowText {
             anchors.left: parent.left
             anchors.right: parent.right
             horizontalAlignment: Text.AlignHCenter
@@ -65,7 +66,7 @@
                   i18n.tr("You have been locked out due to too many failed passcode attempts.")
         }
 
-        Label {
+        DropShadowText {
             anchors.left: parent.left
             anchors.right: parent.right
             horizontalAlignment: Text.AlignHCenter
@@ -81,14 +82,26 @@
             height: units.gu(1)
         }
 
-        Icon {
-            // It would be nice to use a less network-specific name,
-            // but this is the only lock icon we have.
-            name: "network-secure"
-            color: "#f3f3e7"
+        Item {
             height: units.gu(4)
             width: units.gu(4)
             anchors.horizontalCenter: parent.horizontalCenter
+            Icon {
+                // It would be nice to use a less network-specific name,
+                // but this is the only lock icon we have.
+                id: deviceLockedIcon
+                name: "network-secure"
+                anchors.fill: parent
+                color: "#f3f3e7"
+            }
+
+            DropShadow {
+                anchors.fill: deviceLockedIcon
+                radius: 4
+                samples: 8
+                color: "#80000000"
+                source: deviceLockedIcon
+            }
         }
     }
 }

=== added file 'qml/Components/DropShadowText.qml'
--- qml/Components/DropShadowText.qml	1970-01-01 00:00:00 +0000
+++ qml/Components/DropShadowText.qml	2015-06-30 09:26:14 +0000
@@ -0,0 +1,48 @@
+/*
+ * Copyright (C) 2015 Canonical, Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components 1.1
+import QtGraphicalEffects 1.0 
+
+Item {
+    id: root
+    property alias clip: label.clip
+    property alias color: label.color
+    property alias elide: label.elide
+    property alias font: label.font
+    property alias fontSize: label.fontSize
+    property alias text: label.text
+    property alias textFormat: label.textFormat
+    property alias wrapMode: label.wrapMode
+    property alias horizontalAlignment: label.horizontalAlignment
+    property alias verticalAlignment: label.verticalAlignment
+    implicitWidth:  label.implicitWidth
+    implicitHeight: label.implicitHeight
+
+    Label {
+        id: label
+        anchors.fill: parent
+    }
+
+    DropShadow {
+        anchors.fill: label
+        radius: 4
+        samples: 8
+        color: "#80000000"
+        source: label
+    }
+}

=== modified file 'qml/Components/Lockscreen.qml'
--- qml/Components/Lockscreen.qml	2015-03-18 17:27:30 +0000
+++ qml/Components/Lockscreen.qml	2015-06-30 09:26:14 +0000
@@ -15,6 +15,7 @@
  */
 
 import QtQuick 2.0
+import QtGraphicalEffects 1.0
 import Ubuntu.Components 1.0
 import Ubuntu.Components.Popups 1.0
 import Ubuntu.Telephony 0.1 as Telephony
@@ -237,7 +238,7 @@
             right: parent.right
         }
 
-        Label {
+        DropShadowText {
             id: emergencyCallLabel
             objectName: "emergencyCallLabel"
             anchors.horizontalCenter: parent.horizontalCenter
@@ -256,6 +257,14 @@
             color: root.foregroundColor
         }
 
+        DropShadow {
+            anchors.fill: emergencyCallIcon
+            radius: 4
+            samples: 8
+            color: "#80000000"
+            source: emergencyCallIcon
+        }
+
         MouseArea {
             anchors.top: emergencyCallLabel.top
             anchors.bottom: emergencyCallLabel.bottom

=== modified file 'qml/Components/PassphraseLockscreen.qml'
--- qml/Components/PassphraseLockscreen.qml	2015-03-18 17:27:30 +0000
+++ qml/Components/PassphraseLockscreen.qml	2015-06-30 09:26:14 +0000
@@ -15,6 +15,7 @@
  */
 
 import QtQuick 2.0
+import QtGraphicalEffects 1.0
 import Ubuntu.Components 0.1
 import "../Components"
 
@@ -50,7 +51,7 @@
         width: parent.width
         spacing: units.gu(2)
 
-        Label {
+        DropShadowText {
             id: infoField
             objectName: "infoTextLabel"
             fontSize: "x-large"
@@ -119,16 +120,29 @@
 
                 Repeater {
                     model: pinentryField.length
-                    delegate: Rectangle {
-                        color: root.foregroundColor
+                    delegate: Item {
                         width: dotRow.dotSize
                         height: width
-                        radius: width / 2
+                        Rectangle {
+                            id: dotItem
+                            color: root.foregroundColor
+                            anchors.fill: parent
+                            radius: width / 2
+                        }
+
+                        DropShadow {
+                            anchors.fill: dotItem
+                            radius: 4
+                            samples: 8
+                            color: "#80000000"
+                            source: dotItem
+                            transparentBorder: true
+                        }
                     }
                 }
             }
 
-            Label {
+            DropShadowText {
                 id: wrongNoticeLabel
                 objectName: "wrongNoticeLabel"
                 fontSize: "large"

=== modified file 'qml/Components/PinLockscreen.qml'
--- qml/Components/PinLockscreen.qml	2015-05-28 07:42:09 +0000
+++ qml/Components/PinLockscreen.qml	2015-06-30 09:26:14 +0000
@@ -15,6 +15,7 @@
  */
 
 import QtQuick 2.0
+import QtGraphicalEffects 1.0
 import Ubuntu.Components 0.1
 import Ubuntu.Components.ListItems 0.1
 import "../Components"
@@ -60,7 +61,7 @@
             width: parent.width
             spacing: units.gu(1)
 
-            Label {
+            DropShadowText {
                 id: infoField
                 objectName: "infoTextLabel"
                 fontSize: "large"
@@ -86,11 +87,24 @@
 
                     Repeater {
                         model: pinentryField.text.length
-                        delegate: Rectangle {
-                            color: root.foregroundColor
+                        delegate: Item {
                             width: Math.min(units.gu(2), (pinContainer.width - pinContainer.height*2 ) / (root.maxPinLength >= 0 ? root.maxPinLength : 16))
                             height: width
-                            radius: width / 2
+                            Rectangle {
+                                id: pinItem
+                                color: root.foregroundColor
+                                anchors.fill: parent
+                                radius: width / 2
+                            }
+
+                            DropShadow {
+                                anchors.fill: pinItem
+                                radius: 4
+                                samples: 8
+                                color: "#80000000"
+                                source: pinItem
+                                transparentBorder: true
+                            }
                         }
                     }
 
@@ -111,7 +125,7 @@
                         pinentryField.text = pinentryField.text.substring(0, pinentryField.text.length-1)
                     }
                 }
-                Label {
+                DropShadowText {
                     id: wrongNoticeLabel
                     objectName: "wrongNoticeLabel"
                     fontSize: "x-large"
@@ -130,11 +144,20 @@
                     enabled: root.entryEnabled
 
                     Icon {
+                        id: backspaceIcon
                         anchors.fill: parent
                         name: "erase"
                         color: root.foregroundColor
                     }
 
+                    DropShadow {
+                        anchors.fill: backspaceIcon
+                        radius: 4
+                        samples: 8
+                        color: "#80000000"
+                        source: backspaceIcon
+                    }
+
                     opacity: (pinentryField.text.length > 0 && !pinentryField.incorrectOverride) ? 1 : 0
 
                     Behavior on opacity {
@@ -145,7 +168,7 @@
                 }
             }
 
-            Label {
+            DropShadowText {
                 objectName: "retryLabel"
                 fontSize: "x-small"
                 color: root.foregroundColor

=== modified file 'qml/Components/PinPadButton.qml'
--- qml/Components/PinPadButton.qml	2015-03-18 17:27:30 +0000
+++ qml/Components/PinPadButton.qml	2015-06-30 09:26:14 +0000
@@ -15,6 +15,7 @@
  */
 
 import QtQuick 2.0
+import QtGraphicalEffects 1.0
 import Ubuntu.Components 1.1
 
 AbstractButton {
@@ -33,7 +34,7 @@
         }
     }
 
-    Label {
+    DropShadowText {
         id: label
         anchors.centerIn: parent
         horizontalAlignment: Text.AlignHCenter
@@ -60,4 +61,13 @@
             UbuntuNumberAnimation { duration: UbuntuAnimation.SlowDuration }
         }
     }
+
+    DropShadow {
+        anchors.fill: icon
+        radius: 4
+        samples: 8
+        color: "#80000000"
+        visible: icon.visible
+        source: icon
+    }
 }

=== modified file 'qml/Greeter/Clock.qml'
--- qml/Greeter/Clock.qml	2014-12-11 14:10:18 +0000
+++ qml/Greeter/Clock.qml	2015-06-30 09:26:14 +0000
@@ -17,6 +17,7 @@
 import QtQuick 2.0
 import Ubuntu.Components 0.1
 import "../Panel/Indicators"
+import "../Components"
 import Unity.Indicators 0.1 as Indicators
 
 Item {
@@ -66,7 +67,7 @@
     Column {
         spacing: units.gu(0.5)
 
-        Label {
+        DropShadowText {
             id: timeLabel
             objectName: "timeLabel"
 
@@ -78,7 +79,7 @@
             font.weight: Font.Light
         }
 
-        Label {
+        DropShadowText {
             id: dateLabel
             objectName: "dateLabel"
 

=== modified file 'qml/Greeter/CoverPage.qml'
--- qml/Greeter/CoverPage.qml	2015-05-11 14:36:03 +0000
+++ qml/Greeter/CoverPage.qml	2015-06-30 09:26:14 +0000
@@ -97,7 +97,7 @@
         }
     }
 
-    Label {
+    DropShadowText {
         id: swipeHint
         property real baseOpacity: 0.5
         opacity: 0.0

=== modified file 'qml/Greeter/Infographics.qml'
--- qml/Greeter/Infographics.qml	2015-02-12 14:48:06 +0000
+++ qml/Greeter/Infographics.qml	2015-06-30 09:26:14 +0000
@@ -356,7 +356,7 @@
             }
         }
 
-        Label {
+        DropShadowText {
             id: notification
             objectName: "label"
 

=== modified file 'qml/Greeter/LoginList.qml'
--- qml/Greeter/LoginList.qml	2015-02-01 19:53:29 +0000
+++ qml/Greeter/LoginList.qml	2015-06-30 09:26:14 +0000
@@ -150,7 +150,7 @@
                 return 1 - Math.min(1, (Math.abs(highlightDist) + root.cellHeight) / ((root.numAboveBelow + 1) * root.cellHeight))
             }
 
-            Label {
+            DropShadowText {
                 objectName: "username" + index
 
                 anchors {
@@ -195,7 +195,7 @@
         }
     }
 
-    Label {
+    DropShadowText {
         id: infoLabel
         objectName: "infoLabel"
         anchors {