Merge lp:~ibelieve/ubuntu-ui-toolkit/themeImprovements into lp:ubuntu-ui-toolkit

[Michael Spencer]

Improves and fixes various visual inconsistencies

This fixes some visual inconsistencies and also improves the style of sheets.

It contains the following changes:

 * Fixes the text colors for list items in a Popover (no longer black and is now the color that list items are outside of a Popover using the non-Suru theme)
 * Fixes the background color of OptionSelectors and Pickers to match that of TextFields
 * Fixes the text color for TextFields and TextAreas when the text area is not focused in the SuruGradient theme
 * Fixes the unselected color of CheckBoxes to look awesome with a dark Suru background
 * A new style for Sheets based on the UbuntuShape
 * Fixes the text for Sheet buttons so they are properly capitalized

Screenshot of the Sheet design: http://i.imgur.com/33rOPE3.png

[lp:~ibelieve/ubuntu-ui-toolkit/themeImprovements]

975. By Michael Spencer on 2014-03-11

Fixed text field color for SuruGradient theme when text field is not focused

[Zsombor Egri (zsombi)]

Has these changes been confirmed by the UI team?

review: Needs Information

[Tim Peeters (tpeeters)]

Please get confirmation from the design team and resubmit for merging into lp:~ubuntu-sdk-team/ubuntu-ui-toolkit/staging

review: Needs Resubmitting

Unmerged revisions

975. By Michael Spencer on 2014-03-11

Fixed text field color for SuruGradient theme when text field is not focused

974. By Michael Spencer on 2014-03-11

Improved checkbox color

973. By Michael Spencer on 2014-03-11

Lots of color fixes and other visual improvements

972. By Tim Peeters on 2014-03-11

move TabBar into HeaderStyle

971. By Tim Peeters on 2014-03-10

link bug

970. By Tim Peeters on 2014-03-10

fix unit tests

969. By Tim Peeters on 2014-03-10

move selectedIndex property to the tabs model

968. By Launchpad Translations on behalf of ubuntu-sdk-team on 2014-03-09

Launchpad automatic translations update.

=== modified file 'modules/Ubuntu/Components/ListItems/LabelVisual.qml'
--- modules/Ubuntu/Components/ListItems/LabelVisual.qml	2013-08-29 18:47:30 +0000
+++ modules/Ubuntu/Components/ListItems/LabelVisual.qml	2014-03-11 22:48:48 +0000
@@ -32,7 +32,7 @@
 
     fontSize: "medium"
     elide: Text.ElideRight
-    color: selected ? UbuntuColors.orange : secondary ? overlay ? Theme.palette.normal.overlayText : Theme.palette.normal.backgroundText
-                                                      : overlay ? Theme.palette.selected.overlayText : Theme.palette.selected.backgroundText
+    color: selected ? UbuntuColors.orange : secondary ? overlay ? Theme.palette.selected.overlayText : Theme.palette.normal.backgroundText
+                                                      : overlay ? Theme.palette.normal.overlayText : Theme.palette.selected.backgroundText
     opacity: label.enabled ? 1.0 : 0.5
 }

=== modified file 'modules/Ubuntu/Components/Popups/ComposerSheet.qml'
--- modules/Ubuntu/Components/Popups/ComposerSheet.qml	2013-11-05 00:34:46 +0000
+++ modules/Ubuntu/Components/Popups/ComposerSheet.qml	2014-03-11 22:48:48 +0000
@@ -74,9 +74,10 @@
     signal confirmClicked
 
     __leftButton: Button {
-        text: i18n.dtr("ubuntu-sdk", "cancel")
+        text: i18n.dtr("ubuntu-sdk", "Cancel")
         objectName: "cancelButton"
         /*! \internal */ // avoid warning when generating documentation
+        color: "gray"
         onClicked: {
             composer.cancelClicked();
             composer.hide();
@@ -84,9 +85,8 @@
     }
 
     __rightButton: Button {
-        text: i18n.dtr("ubuntu-sdk", "confirm")
+        text: i18n.dtr("ubuntu-sdk", "Confirm")
         objectName: "confirmButton"
-        color: UbuntuColors.orange
         /*! \internal */ // avoid warning when generating documentation
         onClicked: {
             composer.confirmClicked();

=== modified file 'modules/Ubuntu/Components/Popups/DefaultSheet.qml'
--- modules/Ubuntu/Components/Popups/DefaultSheet.qml	2013-07-01 05:54:33 +0000
+++ modules/Ubuntu/Components/Popups/DefaultSheet.qml	2014-03-11 22:48:48 +0000
@@ -82,8 +82,9 @@
     signal doneClicked
 
     __leftButton: Button {
-        text: i18n.dtr("ubuntu-sdk", "close")
+        text: i18n.dtr("ubuntu-sdk", "Close")
         visible: !doneButton
+        color: "gray"
         /*! \internal */
         onClicked: {
             sheet.closeClicked();
@@ -92,8 +93,7 @@
     }
 
     __rightButton: Button {
-        text: i18n.dtr("ubuntu-sdk", "done")
-        color: UbuntuColors.orange
+        text: i18n.dtr("ubuntu-sdk", "Done")
         visible: doneButton
         /*! \internal */
         onClicked: {

=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/CheckBoxStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/CheckBoxStyle.qml	2014-02-05 19:59:43 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/CheckBoxStyle.qml	2014-03-11 22:48:48 +0000
@@ -65,7 +65,7 @@
             }
             PropertyChanges {
                 target: background
-                color: Theme.palette.normal.foreground
+                color: Qt.rgba(0,0,0,0.2)
             }
         }
     ]

=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/OptionSelectorStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/OptionSelectorStyle.qml	2013-08-28 10:43:46 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/OptionSelectorStyle.qml	2014-03-11 22:48:48 +0000
@@ -24,6 +24,7 @@
     property url chevron: "../../artwork/[e-mail]"
     property url tick: "../../artwork/[e-mail]"
     property bool colourComponent: true
+    property color backgroundColor: Theme.palette.normal.field
 
     UbuntuShape {
         id: background
@@ -31,5 +32,6 @@
         width: styledItem.width
         height: styledItem.height
         radius: "medium"
+        color: backgroundColor
     }
 }

=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/Palette.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/Palette.qml	2013-07-05 12:21:32 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/Palette.qml	2014-03-11 22:48:48 +0000
@@ -28,7 +28,7 @@
         overlay: "#FDFDFD"
         overlayText: "#888888"
         field: "#1A000000"
-        fieldText: "#888888"
+        fieldText: baseText
     }
     selected: PaletteValues {
         /* FIXME: 'background' does not come from design
@@ -39,6 +39,8 @@
         backgroundText: "#888888"
         foreground: "#DD4814"
         foregroundText: "#F3F3E7"
+        overlay: "#FDFDFD"
+        overlayText: "#81888888"
         field: "#FFFFFF"
         fieldText: "#888888"
     }

=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/PickerStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/PickerStyle.qml	2013-12-12 14:10:17 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/PickerStyle.qml	2014-03-11 22:48:48 +0000
@@ -24,7 +24,7 @@
     /*!
       Specifies the background color
       */
-    property color backgroundColor: "#0A000000"
+    property color backgroundColor: Theme.palette.normal.field
     /*!
       Background color for highlight.
       */

=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/SheetForegroundStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/SheetForegroundStyle.qml	2013-06-27 15:20:12 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/SheetForegroundStyle.qml	2014-03-11 22:48:48 +0000
@@ -16,13 +16,14 @@
 
 import QtQuick 2.0
 import Ubuntu.Components 0.1
+import Ubuntu.Components.ListItems 0.1 as ListItem
 
 Item {
     id: visuals
     // styling properties
-    property color backgroundColor: "lightgray"
-    property color headerColor: "darkgray"
-    property real headerHeight: units.gu(8)
+    property color backgroundColor: Qt.rgba(0.2,0.2,0.2,0.97)
+    property color headerColor: Qt.rgba(0,0,0,0.2)
+    property real headerHeight: units.gu(6)
     property real buttonContainerWidth: units.gu(14)
 
     implicitWidth: MathUtils.clamp(styledItem.contentsWidth, styledItem.minWidth, styledItem.maxWidth)
@@ -30,16 +31,61 @@
 
     property alias contentItem: containerItem
 
+    property bool maximized: styledItem.contentsWidth > styledItem.maxWidth
+
+    UbuntuShape {
+        id: background
+        color: backgroundColor
+        visible: !maximized
+        anchors {
+            left: parent.left
+            right: parent.right
+            top: header.top
+            bottom: containerItem.bottom
+        }
+    }
+
     Rectangle {
+        color: backgroundColor
+        visible: maximized
+        anchors {
+            left: parent.left
+            right: parent.right
+            top: header.top
+            bottom: containerItem.bottom
+        }
+    }
+
+    Item {
         id: header
-        color: visuals.headerColor
         height: visuals.headerHeight
+        clip: true
+
         anchors {
             top: parent.top
             left: parent.left
             right: parent.right
         }
 
+        UbuntuShape {
+            anchors {
+                fill: parent
+                bottomMargin: -units.gu(2)
+            }
+
+            visible: !maximized
+            color: visuals.headerColor
+        }
+
+        Rectangle {
+            anchors {
+                fill: parent
+            }
+
+            visible: maximized
+            color: visuals.headerColor
+        }
+
         Label {
             id: headerText
             anchors {
@@ -51,6 +97,8 @@
             elide: Text.ElideRight
             horizontalAlignment: Text.AlignHCenter
             text: styledItem.title
+            fontSize: "large"
+            color: "#F3F3E7"
         }
 
         Item {
@@ -91,10 +139,9 @@
         }
     }
 
-    Rectangle {
+    Item {
         id: containerItem
-        color: visuals.backgroundColor
-        height: MathUtils.clamp(styledItem.contentsHeight, styledItem.minHeight - header.height, styledItem.maxHeight - header.height)
+        height: false ? styledItem.maxHeight - header.height : MathUtils.clamp(styledItem.contentsHeight, styledItem.minHeight - header.height, styledItem.maxHeight - header.height)
         anchors {
             top: header.bottom
             left: parent.left

=== modified file 'modules/Ubuntu/Components/Themes/SuruDark/Palette.qml'
--- modules/Ubuntu/Components/Themes/SuruDark/Palette.qml	2013-07-05 14:34:00 +0000
+++ modules/Ubuntu/Components/Themes/SuruDark/Palette.qml	2014-03-11 22:48:48 +0000
@@ -28,13 +28,15 @@
         overlay: "#F2F2F2"
         overlayText: "#888888"
         field: "#19000000"
-        fieldText: "#7F7F7F7F"
+        fieldText: baseText
     }
     selected: PaletteValues {
         background: "#88D6D6D6" // FIXME: not from design
         backgroundText: "#F3F3E7"
         foreground: "#DD4814"
         foregroundText: "#F3F3E7"
+        overlay: "#FDFDFD"
+        overlayText: "#81888888"
         field: "#FFFFFF"
         fieldText: "#888888"
     }

=== modified file 'modules/Ubuntu/Components/Themes/SuruGradient/Palette.qml'
--- modules/Ubuntu/Components/Themes/SuruGradient/Palette.qml	2013-07-05 14:34:00 +0000
+++ modules/Ubuntu/Components/Themes/SuruGradient/Palette.qml	2014-03-11 22:48:48 +0000
@@ -28,13 +28,15 @@
         overlay: "#F5F5F5"
         overlayText: "#888888"
         field: "#19000000"
-        fieldText: "#7F7F7F7F"
+        fieldText: baseText
     }
     selected: PaletteValues {
         background: "#88D6D6D6" // FIXME: not from design
         backgroundText: "#F3F3E7"
         foreground: "#DD4814"
         foregroundText: "#F3F3E7"
+        overlay: "#FDFDFD"
+        overlayText: "#81888888"
         field: "#FFFFFF"
         fieldText: "#888888"
     }