Ubuntu Settings Components

Merge lp:~3v1n0/ubuntu-settings-components/touch+pointer-styles into lp:ubuntu-settings-components

touch+pointer-styles
Merge into trunk

Proposed by Marco Trevisan (Treviño) on 2016-10-03

Status:	Merged
Approved by:	Lukáš Tinkl on 2016-10-11
Approved revision:	290
Merged at revision:	169
Proposed branch:	lp:~3v1n0/ubuntu-settings-components/touch+pointer-styles
Merge into:	lp:ubuntu-settings-components
Prerequisite:	lp:~3v1n0/ubuntu-settings-components/slots-layouts
Diff against target:	1390 lines (+475/-138) 39 files modified debian/changelog (+17/-0) debian/control (+1/-1) examples/MessageComponents.qml (+5/-0) examples/OtherComponents.qml (+19/-15) examples/SettingsComponents.qml (+15/-0) examples/TransferComponents.qml (+3/-0) plugins/Ubuntu/Settings/Components/MessageHeader.qml (+23/-4) plugins/Ubuntu/Settings/Menus/AccessPointMenu.qml (+3/-4) plugins/Ubuntu/Settings/Menus/BaseLayoutMenu.qml (+7/-11) plugins/Ubuntu/Settings/Menus/BaseMenu.qml (+23/-15) plugins/Ubuntu/Settings/Menus/ButtonMenu.qml (+18/-5) plugins/Ubuntu/Settings/Menus/CMakeLists.txt (+2/-0) plugins/Ubuntu/Settings/Menus/CalendarMenu.qml (+3/-2) plugins/Ubuntu/Settings/Menus/CheckableMenu.qml (+2/-1) plugins/Ubuntu/Settings/Menus/EventMenu.qml (+2/-0) plugins/Ubuntu/Settings/Menus/GroupedMessageMenu.qml (+2/-2) plugins/Ubuntu/Settings/Menus/MediaPlayerMenu.qml (+17/-4) plugins/Ubuntu/Settings/Menus/ModemInfoItem.qml (+20/-10) plugins/Ubuntu/Settings/Menus/PlaybackButton.qml (+1/-1) plugins/Ubuntu/Settings/Menus/PlaybackItemMenu.qml (+8/-3) plugins/Ubuntu/Settings/Menus/ProgressBarMenu.qml (+3/-0) plugins/Ubuntu/Settings/Menus/ProgressValueMenu.qml (+1/-1) plugins/Ubuntu/Settings/Menus/SectionMenu.qml (+0/-2) plugins/Ubuntu/Settings/Menus/SimpleMessageMenu.qml (+3/-2) plugins/Ubuntu/Settings/Menus/SliderMenu.qml (+11/-11) plugins/Ubuntu/Settings/Menus/SnapDecisionMenu.qml (+2/-1) plugins/Ubuntu/Settings/Menus/StandardMenu.qml (+2/-2) plugins/Ubuntu/Settings/Menus/Style/BaseStyle.qml (+35/-0) plugins/Ubuntu/Settings/Menus/Style/CMakeLists.txt (+1/-0) plugins/Ubuntu/Settings/Menus/Style/MenuPaddings.qml (+26/-0) plugins/Ubuntu/Settings/Menus/Style/PointerStyle.qml (+38/-0) plugins/Ubuntu/Settings/Menus/Style/TouchStyle.qml (+40/-0) plugins/Ubuntu/Settings/Menus/Style/qmldir (+5/-0) plugins/Ubuntu/Settings/Menus/StyledSlotsLayout.qml (+32/-0) plugins/Ubuntu/Settings/Menus/TimeZoneMenu.qml (+2/-0) plugins/Ubuntu/Settings/Menus/TransferMenu.qml (+9/-5) plugins/Ubuntu/Settings/Menus/UserSessionMenu.qml (+2/-2) tests/qmltests/Menus/tst_BaseMenu.qml (+43/-26) tests/qmltests/Menus/tst_ButtonMenu.qml (+29/-8)
To merge this branch:	bzr merge lp:~3v1n0/ubuntu-settings-components/touch+pointer-styles
Related bugs:	Link a bug report

Reviewer	Review Type	Date Requested	Status
Unity8 CI Bot	continuous-integration		Approve on 2016-11-07
Lukáš Tinkl (community)		2016-10-03	Approve on 2016-10-11
Review via email: mp+307447@code.launchpad.net

Commit Message

Menus: add Pointer and Touch styles to be used depending on the user interaction with components

Menu items now have a new Style property that defines some common properties such as shared colors and
sizes that change depending on the UX journey. I'm only defining Pointer and TouchStyles for now, but they
can be easily overridden in case.

Removed some deprecated properties and adapted colors and sizes to new style.

Description of the Change

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

Unity8 won't work with this without lp:~3v1n0/unity8/menuitems-slots-cleanup

The examples client won't update the menu items size on the fly (without resizing the window) unless without using lp:~3v1n0/ubuntu-ui-toolkit/slotslayout-paddings-changes-updates-size (not needed for other components for now)

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

Yep, ran in both laptop and phone

* 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?

I'm updating the paddings and sizes matching the new design specs

* If you changed localized strings, has the POT file been updated?

N/A

Unity8 CI Bot (unity8-ci-bot) wrote on 2016-10-03:

Click here to trigger a rebuild:
https://unity8-jenkins.ubuntu.com/job/lp-ubuntu-settings-components-ci/81/rebuild

review: Needs Fixing (continuous-integration)

Unity8 CI Bot (unity8-ci-bot) wrote on 2016-10-05:

Click here to trigger a rebuild:
https://unity8-jenkins.ubuntu.com/job/lp-ubuntu-settings-components-ci/83/rebuild

review: Needs Fixing (continuous-integration)

lp:~3v1n0/ubuntu-settings-components/touch+pointer-styles updated on 2016-10-05

282. By Marco Trevisan (Treviño) on 2016-10-05: Merging with lp:~3v1n0/ubuntu-settings-components/slots-layouts
283. By Marco Trevisan (Treviño) on 2016-10-05: testButtonMenu: fix failures on vivid because of SignalSpy unrealiability

Unity8 CI Bot (unity8-ci-bot) wrote on 2016-10-05:

Click here to trigger a rebuild:
https://unity8-jenkins.ubuntu.com/job/lp-ubuntu-settings-components-ci/84/rebuild

review: Approve (continuous-integration)

lp:~3v1n0/ubuntu-settings-components/touch+pointer-styles updated on 2016-10-06

284. By Marco Trevisan (Treviño) on 2016-10-06: BaseMenu: bind ListItem height to menuHeight or it won't work because of bug #1630683
285. By Marco Trevisan (Treviño) on 2016-10-06: SimpleMessageMenu: animate menuHeight
286. By Marco Trevisan (Treviño) on 2016-10-06: Merging with lp:~3v1n0/ubuntu-settings-components/slots-layouts again

Unity8 CI Bot (unity8-ci-bot) wrote on 2016-10-06:

Click here to trigger a rebuild:
https://unity8-jenkins.ubuntu.com/job/lp-ubuntu-settings-components-ci/85/rebuild

review: Needs Fixing (continuous-integration)

lp:~3v1n0/ubuntu-settings-components/touch+pointer-styles updated on 2016-10-06

287. By Marco Trevisan (Treviño) on 2016-10-06: testBaseMenu: adapt to use height instead of implicitHeight

Unity8 CI Bot (unity8-ci-bot) wrote on 2016-10-06:

Click here to trigger a rebuild:
https://unity8-jenkins.ubuntu.com/job/lp-ubuntu-settings-components-ci/86/rebuild

review: Approve (continuous-integration)

lp:~3v1n0/ubuntu-settings-components/touch+pointer-styles updated on 2016-10-06

288. By Marco Trevisan (Treviño) on 2016-10-06: BaseStyle: use proper name for foregroud color

Unity8 CI Bot (unity8-ci-bot) wrote on 2016-10-06:

Click here to trigger a rebuild:
https://unity8-jenkins.ubuntu.com/job/lp-ubuntu-settings-components-ci/87/rebuild

review: Approve (continuous-integration)

lp:~3v1n0/ubuntu-settings-components/touch+pointer-styles updated on 2016-10-10

289. By Marco Trevisan (Treviño) on 2016-10-10: CheckableMenu: make the checkbox size to adapt to style

Unity8 CI Bot (unity8-ci-bot) wrote on 2016-10-10:

Click here to trigger a rebuild:
https://unity8-jenkins.ubuntu.com/job/lp-ubuntu-settings-components-ci/94/rebuild

review: Approve (continuous-integration)

Lukáš Tinkl (lukas-kde) wrote on 2016-10-10:

Please get rid of specifying the font sizes using sth like:

font.pixelSize: menuStyle.buttonFontSize

This will break with DGU (ie when you plug into an external monitor)

review: Needs Fixing

Lukáš Tinkl (lukas-kde) wrote on 2016-10-10:

I'd go with:

Label.Medium (for the touch style, to stay backwards compatible) and
Label.Small (for the smaller pointer mode)

lp:~3v1n0/ubuntu-settings-components/touch+pointer-styles updated on 2016-10-11

290. By Marco Trevisan (Treviño) on 2016-10-11: PointerStyle: ignore the default SlotsLayout paddings or we'll take them in account twice

Unity8 CI Bot (unity8-ci-bot) wrote on 2016-10-11:

Click here to trigger a rebuild:
https://unity8-jenkins.ubuntu.com/job/lp-ubuntu-settings-components-ci/96/rebuild

review: Approve (continuous-integration)

Marco Trevisan (Treviño) (3v1n0) wrote on 2016-10-11:

> Please get rid of specifying the font sizes using sth like:
>
> font.pixelSize: menuStyle.buttonFontSize
>
> This will break with DGU (ie when you plug into an external monitor)

Well, since menuStyle.buttonFontSize is defined in grid units this should work anyway... I was asking to Gerry again and so he told me:

11:09:49 <Trevinho> greyback: hey, yesterday you were talking with ltinkl abou the label scaling when using pixelSize...
11:10:09 <greyback> yep?
11:10:11 <Trevinho> greyback: I was wondering why that doesn't happen when the pixelSize is bound to an units.gu value...
11:10:36 <Trevinho> isn't that like any other sized element?
11:11:03 <greyback> Trevinho: it would, if you did font.pixelSize: units.gu(2)
11:11:13 <Trevinho> greyback: so I did...
11:11:35 <Trevinho> greyback: I mean I've font.pixelSize: menuStyle.fontSize where fontSize is defined in GU's...
11:12:07 <greyback> Trevinho: ok, that should be fine
11:12:57 <Trevinho> greyback: ah, good then... As from yesterday's discussion it looked like it wasn't working properly when attaching a different monitor... But I wasn't understanding why :-)
11:13:54 <greyback> Trevinho: ack. I didn't know that the theme sizes were dynamic like that.
11:14:32 <Trevinho> greyback: that's something I defined for menu items only...
11:14:36 <Trevinho> so not generic solution
11:14:44 <Trevinho> but in my case it is

Lukáš Tinkl (lukas-kde) wrote on 2016-10-11:

Good, no objections from me then.

review: Approve

lp:~3v1n0/ubuntu-settings-components/touch+pointer-styles updated on 2016-10-28

291. By Marco Trevisan (Treviño) on 2016-10-11: Menus: ensure that labels will use proper style foreground color
292. By Marco Trevisan (Treviño) on 2016-10-11: BaseStyle: foregroundColor should use backgroundText by default
293. By Marco Trevisan (Treviño) on 2016-10-11: MediaPlayerMenu: use proper colors for title and subtitle elements
294. By Marco Trevisan (Treviño) on 2016-10-11: ButtonMenu: use a custom button implementation in order to have better sizing
295. By Marco Trevisan (Treviño) on 2016-10-26: GroupedMessageMenu: use proper color for count number
296. By Marco Trevisan (Treviño) on 2016-10-27: Merging with lp:ubuntu-settings-components
297. By Marco Trevisan (Treviño) on 2016-10-27: debian: bump revision and breaks old unity8 versions
298. By Marco Trevisan (Treviño) on 2016-10-27: debian/changelog: add correct commit message here
299. By Marco Trevisan (Treviño) on 2016-10-28: SliderMenu: consider the whole column content as the height of the menu item

Unity8 CI Bot (unity8-ci-bot) wrote on 2016-11-07:

Click here to trigger a rebuild:
https://unity8-jenkins.ubuntu.com/job/lp-ubuntu-settings-components-ci/113/rebuild

review: Approve (continuous-integration)

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk

Subscribers

People subscribed via source and target branches

to all changes:

Marco Trevisan (Treviño)

Unity Team

 === modified file 'debian/changelog'
 --- debian/changelog	2016-10-24 11:32:23 +0000
 +++ debian/changelog	2016-10-28 10:23:24 +0000
@@ -1,3 +1,20 @@
++ubuntu-settings-components (0.11) UNRELEASED; urgency=medium
++
++  * Menus: add Pointer and Touch styles to be used depending on the user
++    interaction with components
++
++    Menu items now have a new Style property that defines some common properties
++    such as shared colors and sizes that change depending on the UX journey. I'm
++    only defining Pointer and TouchStyles for now, but they can be easily
++    overridden in case.
++
++    Removed some deprecated properties and adapted colors and sizes to new
++    style.
++
++  * Bump package version as there's a new API for various components
++
++ -- Marco Trevisan (Treviño) <marco@ubuntu.com>  Thu, 27 Oct 2016 13:46:39 +0200
++
  ubuntu-settings-components (0.10+17.04.20161024-0ubuntu1) zesty; urgency=medium
    [ Marco Trevisan (Treviño) ]
 === modified file 'debian/control'
 --- debian/control	2016-09-22 11:39:11 +0000
 +++ debian/control	2016-10-28 10:23:24 +0000
@@ -48,7 +48,7 @@
           suru-icon-theme,
           ${misc:Depends},
           ${shlibs:Depends},
--Breaks: qtdeclarative5-ubuntu-settings-components (<< 0.9),
++Breaks: qtdeclarative5-ubuntu-settings-components (<< 0.9), unity8 (<< 8.15)
  Replaces: qtdeclarative5-ubuntu-settings-components (<< 0.9),
  Description: Ubuntu settings Components
   Ubuntu settings components for Unity8
 === modified file 'examples/MessageComponents.qml'
 --- examples/MessageComponents.qml	2016-10-05 14:08:27 +0000
 +++ examples/MessageComponents.qml	2016-10-28 10:23:24 +0000
@@ -22,7 +22,9 @@
  import Ubuntu.Settings.Menus 0.1
  Item {
++    id: page
      property string title: "MessageComponents"
++    property bool pointerMode: false
      width: units.gu(42)
      height: units.gu(75)
@@ -88,6 +90,7 @@
                      body: model.body
                      time: model.time
                      removable: true
++                    pointerMode: page.pointerMode
                      onIconActivated: {
                          print("Icon Activated")
@@ -103,6 +106,7 @@
                      title: model.title
                      body: model.body
                      time: model.time
++                    pointerMode: page.pointerMode
                      removable: true
                      replyHintText: "Reply"
@@ -124,6 +128,7 @@
                      title: model.title
                      body: model.body
                      time: model.time
++                    pointerMode: page.pointerMode
                      removable: true
                      replyHintText: "Reply"
 === modified file 'examples/OtherComponents.qml'
 --- examples/OtherComponents.qml	2016-09-22 09:58:10 +0000
 +++ examples/OtherComponents.qml	2016-10-28 10:23:24 +0000
@@ -22,7 +22,9 @@
  import Ubuntu.Settings.Menus 0.1
  Item {
++    id: page
      property string title: "Settings Components"
++    property bool pointerMode: false
      width: parent && parent.width ? parent.width : units.gu(42)
      height: parent && parent.width ? parent.height : units.gu(75)
@@ -66,17 +68,10 @@
                  onTriggered: console.log("Triggered")
+             }
--            StandardMenu {
--                id: dividerToggleMenu
++            ButtonMenu {
                  text: i18n.tr("Toggle divider menu.")
--                showDivider: false
--
--                slots: [
--                    Button {
--                        text: dividerToggleMenu.showDivider ? i18n.tr("Hide") : i18n.tr("Show")
--                        onClicked: dividerToggleMenu.showDivider = !dividerToggleMenu.showDivider
--                    }
--                ]
++                buttonText: divider.visible ? i18n.tr("Hide") : i18n.tr("Show")
++                onButtonClicked: divider.visible = !divider.visible
+             }
              StandardMenu {
@@ -96,11 +91,10 @@
                  iconName: "calendar"
                  iconColor: "red"
                  text: i18n.tr("Standard Menu with Component")
--                component: Component {
--                    Button {
--                        text: "Press Me"
--                        onClicked: print("Button pressed!")
--                    }
++                slots: Button {
++                    text: "Press Me"
++                    onClicked: print("Button pressed!")
++                    color: theme.palette.normal.foreground
+                 }
+             }
@@ -260,6 +254,7 @@
                      TimeZoneMenu {
                          city: model.city
                          time: model.time
++                        pointerMode: page.pointerMode
+                     }
+                 }
+             }
@@ -279,6 +274,15 @@
                          eventColor: model.eventColor
                          time: model.time
                          enabled: false
++                        pointerMode: page.pointerMode
++                    }
++                }
++            }
++
++            Component.onCompleted: {
++                for (var i = 0; i < children.length; ++i) {
++                    if (children[i].pointerMode !== undefined) {
++                        children[i].pointerMode = Qt.binding(function() { return page.pointerMode })
+                     }
+                 }
+             }
 === modified file 'examples/SettingsComponents.qml'
 --- examples/SettingsComponents.qml	2016-09-17 00:12:01 +0000
 +++ examples/SettingsComponents.qml	2016-10-28 10:23:24 +0000
@@ -29,6 +29,8 @@
      width: units.gu(50)
      height: units.gu(100)
++    property bool pointerMode: true
++
      Component.onCompleted: {
          theme.name = "Ubuntu.Components.Themes.SuruDark"
+     }
@@ -45,6 +47,14 @@
          header: PageHeader {
              id: header
              title: listView.currentItem ? listView.currentItem.item.title : "Components"
++
++            leadingActionBar.actions: [
++                Action {
++                    iconName: mainView.pointerMode ? "input-mouse-symbolic" : "input-touchpad-symbolic"
++                    text: mainView.pointerMode ? "Pointer mode" : "Touch mode"
++                    onTriggered: mainView.pointerMode = !mainView.pointerMode
++                }
++            ]
+         }
          clip: true
@@ -65,6 +75,11 @@
                  height: ListView.view.height
                  source: model.source
++                onStatusChanged: {
++                    if (status == Loader.Ready) {
++                        item.pointerMode = Qt.binding(function() { return mainView.pointerMode })
++                    }
++                }
+             }
+         }
+     }
 === modified file 'examples/TransferComponents.qml'
 --- examples/TransferComponents.qml	2016-02-11 11:23:02 +0000
 +++ examples/TransferComponents.qml	2016-10-28 10:23:24 +0000
@@ -22,7 +22,9 @@
  import Ubuntu.Settings.Menus 0.1
  Item {
++    id: page
      property string title: "Transfer Components"
++    property bool pointerMode: false
      width: units.gu(42)
      height: units.gu(75)
@@ -78,6 +80,7 @@
                  progress: model.progress
                  iconSource: model.image
                  active: model.active
++                pointerMode: page.pointerMode
+             }
+         }
+     }
 === modified file 'plugins/Ubuntu/Settings/Components/MessageHeader.qml'
 --- plugins/Ubuntu/Settings/Components/MessageHeader.qml	2016-10-06 10:02:38 +0000
 +++ plugins/Ubuntu/Settings/Components/MessageHeader.qml	2016-10-28 10:23:24 +0000
@@ -30,6 +30,7 @@
      property alias time: timeText.text
      property alias title: itemLayout.title
      property alias body: itemLayout.summary
++    property QtObject menuStyle
      signal iconClicked()
@@ -43,8 +44,15 @@
      ListItemLayout {
          id: itemLayout
++        padding {
++            top: menuStyle.padding.top
++            bottom: menuStyle.padding.bottom
++            leading: menuStyle.padding.leading
++            trailing: menuStyle.padding.trailing
++        }
++
          UbuntuShape {
--            width: units.gu(6)
++            width: menuStyle.avatarSize
              height: width
              SlotsLayout.position: SlotsLayout.Leading
@@ -60,24 +68,34 @@
                  Binding on color {
                      when: String(avatarImage.source).match(/^image:\/\/theme/)
--                    value: theme.palette.normal.backgroundText
++                    value: menuStyle.iconColor
+                 }
+             }
+         }
++        padding {
++            top: menuStyle.padding.top
++            bottom: menuStyle.padding.bottom
++            leading: menuStyle.padding.leading
++            trailing: menuStyle.padding.trailing
++        }
++
          title.objectName: "title"
++        title.color: menuStyle.foregroundColor
          title.font.weight: Font.DemiBold
++        title.font.pixelSize: menuStyle.fontSize
          title.anchors.rightMargin: timeText.width > iconImage.width ? timeText.width - iconImage.width : 0
          summary.objectName: "body"
          summary.maximumLineCount: 3
          summary.wrapMode: Text.WordWrap
          summary.elide: Text.ElideRight
++        summary.font.pixelSize: menuStyle.subtitleFontSize
          Icon {
              id: iconImage
              objectName: "icon"
--            color: theme.palette.normal.backgroundText
++            color: menuStyle.iconColor
              width: units.gu(3)
              height: width
              SlotsLayout.position: SlotsLayout.Trailing
@@ -116,7 +134,8 @@
              rightMargin: itemLayout.padding.trailing
+         }
--        fontSize: "x-small"
++        color: menuStyle.foregroundColor
++        textSize: Label.XSmall
          maximumLineCount: 1
+     }
+ }
 === modified file 'plugins/Ubuntu/Settings/Menus/AccessPointMenu.qml'
 --- plugins/Ubuntu/Settings/Menus/AccessPointMenu.qml	2016-09-17 02:09:13 +0000
 +++ plugins/Ubuntu/Settings/Menus/AccessPointMenu.qml	2016-10-28 10:23:24 +0000
@@ -29,8 +29,7 @@
      property alias secure: iconSecure.visible
      icon.objectName: "iconSignal"
--    iconSize: Math.min(units.gu(3), parent.height - units.gu(1))
--    iconColor: ap.active ? theme.palette.normal.positive : theme.palette.normal.backgroundText
++    iconColor: ap.active ? theme.palette.normal.positive : menuStyle.iconColor
      iconName: {
          if (adHoc) {
              return "nm-adhoc";
@@ -52,8 +51,8 @@
          objectName: "iconSecure"
          visible: false
          name: "network-secure"
--        color: ap.active ? theme.palette.normal.positive : theme.palette.normal.backgroundText
++        color: ap.active ? theme.palette.normal.positive : menuStyle.iconColor
          width: height
--        height: Math.min(units.gu(3), ap.parent.height - units.gu(1))
++        height: menuStyle.iconSize
+     }
+ }
 === modified file 'plugins/Ubuntu/Settings/Menus/BaseLayoutMenu.qml'
 --- plugins/Ubuntu/Settings/Menus/BaseLayoutMenu.qml	2016-10-04 11:53:25 +0000
 +++ plugins/Ubuntu/Settings/Menus/BaseLayoutMenu.qml	2016-10-28 10:23:24 +0000
@@ -29,24 +29,20 @@
      property alias summary: layoutItem.summary
      property alias slots: layoutItem.children
--    // These fields are for retro-compatibility with ListItem.Empty based MenuItems
--    property alias trailingComponent: trailingComponentLoader.sourceComponent
--    property alias trailingComponentItem: trailingComponentLoader.item
--    property alias component: menu.trailingComponent
--
--    implicitHeight: layoutItem.height + (divider.visible ? divider.height : 0)
++    menuHeight: layoutItem.height
      ListItemLayout {
          id: layoutItem
          objectName: "menuLayoutItem"
          title.text: menu.text
          title.color: menu.foregroundColor
++        title.font.pixelSize: menuStyle.fontSize
--        Loader {
--            id: trailingComponentLoader
--            asynchronous: false
--            visible: status == Loader.Ready
--            SlotsLayout.position: SlotsLayout.Trailing
++        padding {
++            top: menuStyle.padding.top
++            bottom: menuStyle.padding.bottom
++            leading: menuStyle.padding.leading
++            trailing: menuStyle.padding.trailing
+         }
+     }
+ }
 === modified file 'plugins/Ubuntu/Settings/Menus/BaseMenu.qml'
 --- plugins/Ubuntu/Settings/Menus/BaseMenu.qml	2016-10-24 11:25:45 +0000
 +++ plugins/Ubuntu/Settings/Menus/BaseMenu.qml	2016-10-28 10:23:24 +0000
@@ -18,27 +18,17 @@
  import QtQuick 2.4
  import Ubuntu.Components 1.3
++import Ubuntu.Settings.Menus.Style 0.1
  ListItem {
      id: menu
++    property bool pointerMode: false
      property bool highlightWhenPressed: true
--    property color foregroundColor: theme.palette.normal.baseText
++    property real menuHeight: -1
++    property BaseStyle menuStyle: pointerMode ? PointerStyle : TouchStyle
      property alias backColor: menu.color
--
--    // Can't create an alias for divider.visible here, see QTBUG-50407
--    // Thus this hack is needed not to override the default divider.visible value
--    property bool showDivider: false
--    divider.visible: false
--    Component.onCompleted: {
--        if (showDivider != divider.visible)
--            showDivider = divider.visible;
--
--        divider.visible = Qt.binding(function() { return showDivider })
--        showDivider = Qt.binding(function() { return divider.visible })
--    }
--
--    highlightColor: highlightWhenPressed ? theme.palette.highlighted.background : backColor
++    property color foregroundColor: menuStyle.foregroundColor
      // This is for retro-compatibility with ListItem.Empty, adding support to override the callback
      signal triggered(var value)
@@ -50,6 +40,24 @@
      onConfirmRemovalChanged: console.error(menu+": confirmRemoval property is deprecated")
      signal itemRemoved()
++    divider.visible: false
++
++    // FIXME: this is should use implicitHeight, but we can't yet due to lp:1630683
++    Binding on height {
++        when: menuHeight >= 0
++        value: Math.max(menuStyle.minimumHeight, menuHeight) + (divider.visible ? divider.height : 0)
++    }
++
++    Binding on highlightColor {
++        when: !highlightWhenPressed
++        value: backColor
++    }
++
++    Binding on highlightColor {
++        when: highlightWhenPressed && menuStyle
++        value: menuStyle.highlightColor
++    }
++
      ListItemActions {
          id: removeAction
          actions: [
 === modified file 'plugins/Ubuntu/Settings/Menus/ButtonMenu.qml'
 --- plugins/Ubuntu/Settings/Menus/ButtonMenu.qml	2016-09-17 02:09:13 +0000
 +++ plugins/Ubuntu/Settings/Menus/ButtonMenu.qml	2016-10-28 10:23:24 +0000
@@ -22,15 +22,28 @@
  StandardMenu {
      id: menu
--    property alias buttonText: button.text
++    property alias buttonText: buttonLabel.text
++    signal buttonClicked()
      slots: [
          Button {
--            id: button
              objectName: "button"
--            width: Math.max(units.gu(5), implicitWidth)
--
--            onClicked: menu.clicked()
++            color: menuStyle.buttonColor
++            width: Math.max(units.gu(menu.pointerMode ? 5 : 8), buttonLabel.paintedWidth + units.gu(4))
++            height: menuStyle.buttonHeight
++
++            Label {
++                id: buttonLabel
++                font.pixelSize: menuStyle.buttonFontSize
++                color: theme.palette.normal.foregroundText
++                anchors.centerIn: parent
++                scale: parent.pressed ? 0.98 : 1
++            }
++
++            onClicked: {
++                menu.buttonClicked()
++                menu.clicked()
++            }
+         }
+     ]
+ }
 === modified file 'plugins/Ubuntu/Settings/Menus/CMakeLists.txt'
 --- plugins/Ubuntu/Settings/Menus/CMakeLists.txt	2016-01-29 00:44:43 +0000
 +++ plugins/Ubuntu/Settings/Menus/CMakeLists.txt	2016-10-28 10:23:24 +0000
@@ -1,3 +1,5 @@
++add_subdirectory(Style)
++
  project(UbuntuSettingsMenusQml)
  add_definitions(-DUBUNTUSETTINGSCOMPONENTS_LIBRARY)
 === modified file 'plugins/Ubuntu/Settings/Menus/CalendarMenu.qml'
 --- plugins/Ubuntu/Settings/Menus/CalendarMenu.qml	2016-10-03 08:48:34 +0000
 +++ plugins/Ubuntu/Settings/Menus/CalendarMenu.qml	2016-10-28 10:23:24 +0000
@@ -30,11 +30,12 @@
      property alias minimumDate: calendar.minimumDate
      property alias selectedDate: calendar.selectedDate
--    implicitHeight: slotsLayout.height + (divider.visible ? divider.height : 0)
++    menuHeight: slotsLayout.height
--    SlotsLayout {
++    StyledSlotsLayout {
          id: slotsLayout
          objectName: "calenderMenuSlotsLayout"
++        style: menuStyle
          mainSlot: Column {
              id: column
 === modified file 'plugins/Ubuntu/Settings/Menus/CheckableMenu.qml'
 --- plugins/Ubuntu/Settings/Menus/CheckableMenu.qml	2016-09-16 10:22:51 +0000
 +++ plugins/Ubuntu/Settings/Menus/CheckableMenu.qml	2016-10-28 10:23:24 +0000
@@ -35,7 +35,8 @@
          id: checkbox
          objectName: "checkbox"
          onClicked: menu.triggered(checked)
--        SlotsLayout.padding.trailing: units.gu(2.0)
++        width: menuStyle.iconSize
++        height: width
          SlotsLayout.position: SlotsLayout.Leading
+     }
+ }
 === modified file 'plugins/Ubuntu/Settings/Menus/EventMenu.qml'
 --- plugins/Ubuntu/Settings/Menus/EventMenu.qml	2016-09-21 13:06:31 +0000
 +++ plugins/Ubuntu/Settings/Menus/EventMenu.qml	2016-10-28 10:23:24 +0000
@@ -31,5 +31,7 @@
      iconName: "calendar"
      slots: Label {
          id: dateLabel
++        color: menu.foregroundColor
++        font.pixelSize: menuStyle.fontSize
+     }
+ }
 === modified file 'plugins/Ubuntu/Settings/Menus/GroupedMessageMenu.qml'
 --- plugins/Ubuntu/Settings/Menus/GroupedMessageMenu.qml	2016-09-15 11:37:30 +0000
 +++ plugins/Ubuntu/Settings/Menus/GroupedMessageMenu.qml	2016-10-28 10:23:24 +0000
@@ -48,10 +48,10 @@
+                 }
                  horizontalAlignment: Text.AlignRight
                  font.weight: Font.DemiBold
--                fontSize: "medium"
++                font.pixelSize: menuStyle.fontSize
                  text: "0"
--                color: theme.palette.normal.foregroundText
++                color: theme.palette.normal.foreground
+             }
+         }
+     ]
 === modified file 'plugins/Ubuntu/Settings/Menus/MediaPlayerMenu.qml'
 --- plugins/Ubuntu/Settings/Menus/MediaPlayerMenu.qml	2016-10-04 11:54:00 +0000
 +++ plugins/Ubuntu/Settings/Menus/MediaPlayerMenu.qml	2016-10-28 10:23:24 +0000
@@ -34,15 +34,15 @@
      property string album
      highlightWhenPressed: false
--    implicitHeight: (albumLayout.visible ? albumLayout.height : layout.height) + (divider.visible ? divider.height : 0)
--    Behavior on implicitHeight { UbuntuNumberAnimation {} }
++    menuHeight: albumLayout.visible ? albumLayout.height : layout.height
++    Behavior on menuHeight { UbuntuNumberAnimation {} }
      layout.visible: !albumLayout.visible
      layout.objectName: "player"
      slots: Image {
          id: playerIcon
--        height: units.gu(5)
++        height: menuStyle.avatarSize
          width: height
          SlotsLayout.position: SlotsLayout.Leading
+     }
@@ -51,12 +51,25 @@
          id: albumLayout
          objectName: "albumArt"
          visible: showTrack
++
++        padding {
++            top: menuStyle.padding.top
++            bottom: menuStyle.padding.bottom
++            leading: menuStyle.padding.leading
++            trailing: menuStyle.padding.trailing
++        }
++
          title.text: menu.song
++        title.font.pixelSize: menuStyle.fontSize
++        title.color: menu.foregroundColor
          subtitle.text: menu.artist
++        subtitle.color: menu.foregroundColor
++        subtitle.font.pixelSize: menuStyle.fontSize
          summary.text: menu.album
++        summary.font.pixelSize: menuStyle.subtitleFontSize
          UbuntuShape {
--            width: units.gu(8)
++            width: units.gu(7)
              height: width
              SlotsLayout.position: SlotsLayout.Leading
 === modified file 'plugins/Ubuntu/Settings/Menus/ModemInfoItem.qml'
 --- plugins/Ubuntu/Settings/Menus/ModemInfoItem.qml	2016-10-03 08:48:34 +0000
 +++ plugins/Ubuntu/Settings/Menus/ModemInfoItem.qml	2016-10-28 10:23:24 +0000
@@ -31,11 +31,12 @@
      property bool roaming: false
      signal unlock
--    implicitHeight: slotsLayout.height + (divider.visible ? divider.height : 0)
++    menuHeight: slotsLayout.height
--    SlotsLayout {
++    StyledSlotsLayout {
          id: slotsLayout
          objectName: "menuItemInfoSlotsLayout"
++        style: menuStyle
          mainSlot: ColumnLayout {
              spacing: units.gu(0.5)
@@ -44,8 +45,10 @@
                  id: labelSimIdentifier
                  elide: Text.ElideRight
                  visible: text !== ""
++                opacity: menu.locked ? 0.6 : 1.0
++                color: menu.foregroundColor
                  font.bold: true
--                opacity: menu.locked ? 0.6 : 1.0
++                font.pixelSize: menuStyle.fontSize
+             }
              Row {
@@ -57,6 +60,8 @@
                      id: labelStatus
                      elide: Text.ElideRight
                      opacity: 0.6
++                    color: menu.foregroundColor
++                    font.pixelSize: menuStyle.fontSize
+                 }
                  Row {
@@ -64,9 +69,9 @@
                      height: parent.height
                      Icon {
                          id: statusIcon
--                        color: theme.palette.normal.backgroundText
++                        color: menuStyle.iconColor
--                        height: labelStatus.height
++                        height: menuStyle.iconSize
                          width: height
                          visible: name !== ""
@@ -74,9 +79,9 @@
                      Icon {
                          id: iconConnectivity
--                        color: theme.palette.normal.backgroundText
++                        color: menuStyle.iconColor
--                        width: statusIcon.width // fix lp:1585645 by breaking the binding loop
++                        width: menuStyle.iconSize
                          height: width
                          visible: name !== ""
@@ -91,17 +96,18 @@
                          id: labelRoaming
                          visible: menu.roaming
                          elide: Text.ElideRight
--                        fontSize: "x-small"
                          text: i18n.dtr("ubuntu-settings-components", "Roaming")
++                        font.pixelSize: menuStyle.subtitleFontSize
++                        color: menu.foregroundColor
                          opacity: 0.6
+                     }
                      Icon {
                          id: iconRoaming
--                        color: theme.palette.normal.backgroundText
++                        color: menuStyle.iconColor
                          visible: menu.roaming
--                        height: labelStatus.height
++                        height: menuStyle.iconSize
                          width: height
                          name: "network-cellular-roaming"
@@ -113,9 +119,13 @@
                  id: buttonUnlock
                  objectName: "buttonUnlockSim"
                  visible: menu.locked
++                color: menuStyle.buttonColor
                  text: i18n.dtr("ubuntu-settings-components", "Unlock SIM")
++                font.pixelSize: menuStyle.buttonFontSize
                  Layout.preferredWidth: implicitWidth + units.gu(5)
++                Layout.preferredHeight: menuStyle.buttonHeight
++                height: menuStyle.buttonHeight
                  onTriggered: menu.unlock()
+             }
 === modified file 'plugins/Ubuntu/Settings/Menus/PlaybackButton.qml'
 --- plugins/Ubuntu/Settings/Menus/PlaybackButton.qml	2016-09-15 15:45:00 +0000
 +++ plugins/Ubuntu/Settings/Menus/PlaybackButton.qml	2016-10-28 10:23:24 +0000
@@ -23,7 +23,7 @@
      id: button
      objectName: "playbackButton"
--    property real size: units.gu(5)
++    property real size: units.gu(3)
      property alias iconName: icon.name
      width: size
 === modified file 'plugins/Ubuntu/Settings/Menus/PlaybackItemMenu.qml'
 --- plugins/Ubuntu/Settings/Menus/PlaybackItemMenu.qml	2016-10-03 08:48:34 +0000
 +++ plugins/Ubuntu/Settings/Menus/PlaybackItemMenu.qml	2016-10-28 10:23:24 +0000
@@ -33,20 +33,22 @@
      signal previous()
      highlightWhenPressed: false
--    implicitHeight: layout.height + (divider.visible ? divider.height : 0)
++    menuHeight: layout.height
--    SlotsLayout {
++    StyledSlotsLayout {
          id: layout
          objectName: "playbackMenuLayout"
++        style: menuStyle
          Row {
              anchors.centerIn: parent
--            spacing: units.gu(3)
++            spacing: units.gu(pointerMode ? 2 : 2.5)
              PlaybackButton {
                  objectName: "previousButton"
                  iconName: "media-skip-backward"
                  enabled: canGoPrevious
++                anchors.verticalCenter: parent.verticalCenter
                  onClicked: menu.previous()
+             }
@@ -54,6 +56,8 @@
                  objectName: "playButton"
                  iconName: playing ? "media-playback-pause" : "media-playback-start"
                  enabled: canPlay
++                size: menuStyle.avatarSize
++                anchors.verticalCenter: parent.verticalCenter
                  onClicked: menu.play(!playing)
+             }
@@ -61,6 +65,7 @@
                  objectName: "nextButton"
                  iconName: "media-skip-forward"
                  enabled: canGoNext
++                anchors.verticalCenter: parent.verticalCenter
                  onClicked: menu.next()
+             }
+         }
 === modified file 'plugins/Ubuntu/Settings/Menus/ProgressBarMenu.qml'
 --- plugins/Ubuntu/Settings/Menus/ProgressBarMenu.qml	2016-09-15 11:52:10 +0000
 +++ plugins/Ubuntu/Settings/Menus/ProgressBarMenu.qml	2016-10-28 10:23:24 +0000
@@ -36,6 +36,9 @@
              minimumValue: 0.0
              maximumValue: 1.0
              value: 0.0
++
++            SlotsLayout.overrideVerticalPositioning: true
++            anchors.verticalCenter: parent.verticalCenter
+         }
+     ]
+ }
 === modified file 'plugins/Ubuntu/Settings/Menus/ProgressValueMenu.qml'
 --- plugins/Ubuntu/Settings/Menus/ProgressValueMenu.qml	2016-09-15 14:01:32 +0000
 +++ plugins/Ubuntu/Settings/Menus/ProgressValueMenu.qml	2016-10-28 10:23:24 +0000
@@ -32,8 +32,8 @@
              objectName: "progress"
              text: menuItem.value + " %"
--            fontSize: "medium"
              color: menuItem.foregroundColor
++            font.pixelSize: menuStyle.fontSize
+         }
+     ]
+ }
 === modified file 'plugins/Ubuntu/Settings/Menus/SectionMenu.qml'
 --- plugins/Ubuntu/Settings/Menus/SectionMenu.qml	2016-09-15 11:57:30 +0000
 +++ plugins/Ubuntu/Settings/Menus/SectionMenu.qml	2016-10-28 10:23:24 +0000
@@ -24,9 +24,7 @@
  StandardMenu {
      id: menuItem
      property alias busy: indicator.running
--
      divider.visible: true
--    foregroundColor: theme.palette.normal.backgroundText
      slots: ActivityIndicator {
          id: indicator
 === modified file 'plugins/Ubuntu/Settings/Menus/SimpleMessageMenu.qml'
 --- plugins/Ubuntu/Settings/Menus/SimpleMessageMenu.qml	2016-10-24 11:25:45 +0000
 +++ plugins/Ubuntu/Settings/Menus/SimpleMessageMenu.qml	2016-10-28 10:23:24 +0000
@@ -39,7 +39,7 @@
      property alias footer: footerContainer.children
      property real _animationDuration: UbuntuAnimation.FastDuration
--    height: layout.height + (divider.visible ? divider.height : 0)
++    menuHeight: layout.height
      clip: leadingActions || trailingActions || heightAnimation.running
      Column {
@@ -52,6 +52,7 @@
              avatar: menu.avatar != "" ? menu.avatar : "image://theme/contact"
              icon: menu.icon != "" ? menu.icon : "image://theme/message"
              state: menu.state
++            menuStyle: menu.menuStyle
              title.text: menu.title
              body.text: menu.body
@@ -76,7 +77,7 @@
+         }
+     }
--    Behavior on height {
++    Behavior on menuHeight {
          NumberAnimation {
              id: heightAnimation
              duration: _animationDuration
 === modified file 'plugins/Ubuntu/Settings/Menus/SliderMenu.qml'
 --- plugins/Ubuntu/Settings/Menus/SliderMenu.qml	2016-10-03 08:48:34 +0000
 +++ plugins/Ubuntu/Settings/Menus/SliderMenu.qml	2016-10-28 10:23:24 +0000
@@ -32,9 +32,6 @@
      property alias minIcon: leftButton.source
      property alias maxIcon: rightButton.source
--    // These fields are for retro-compatibility with ListItem.Empty
--    property string iconSource
--
      signal updated(real value)
      property QtObject d: QtObject {
@@ -97,25 +94,28 @@
+         }
+     }
--    implicitHeight: slotsLayout.height + (divider.visible ? divider.height : 0)
++    menuHeight: column.childrenRect.height + column.anchors.topMargin + column.anchors.bottomMargin
      highlightWhenPressed: false
      Column {
          id: column
          anchors.fill: parent
--        anchors.topMargin: units.gu(0.5)
++        anchors.topMargin: label.visible ? menuStyle.padding.top : 0
          spacing: -units.gu(1.5)
          Label {
              id: label
              visible: text != ""
++            color: menu.foregroundColor
++            font.pixelSize: menuStyle.fontSize
              x: Qt.application.layoutDirection == Qt.LeftToRight ?
                      leftButton.x : rightButton.x + rightButton.width - width
+         }
--        SlotsLayout {
++        StyledSlotsLayout {
              id: slotsLayout
              objectName: "sliderMenuSlotsLayout"
++            style: menuStyle
              mainSlot: Slider {
                  id: slider
@@ -154,9 +154,9 @@
                  id: leftButton
                  objectName: "leftButton"
                  visible: source !== ""
--                height: slider.height - units.gu(2)
++                height: menuStyle.iconSize
                  width: height
--                color: theme.palette.normal.backgroundText
++                color: menuStyle.iconColor
                  AbstractButton {
                      anchors.fill: parent
@@ -172,13 +172,13 @@
                  id: rightButton
                  objectName: "rightButton"
                  visible: source !== ""
--                height: slider.height - units.gu(2)
++                height: menuStyle.iconSize
                  width: height
--                color: theme.palette.normal.backgroundText
++                color: menuStyle.iconColor
                  AbstractButton {
                      anchors.fill: parent
--                    onClicked: slider.value =  slider.maximumValue
++                    onClicked: slider.value = slider.maximumValue
+                 }
                  SlotsLayout.position: SlotsLayout.Trailing
 === modified file 'plugins/Ubuntu/Settings/Menus/SnapDecisionMenu.qml'
 --- plugins/Ubuntu/Settings/Menus/SnapDecisionMenu.qml	2016-10-03 08:48:34 +0000
 +++ plugins/Ubuntu/Settings/Menus/SnapDecisionMenu.qml	2016-10-28 10:23:24 +0000
@@ -50,8 +50,9 @@
                  right: parent.right
+             }
--            SlotsLayout {
++            StyledSlotsLayout {
                  id: slotsLayout
++                style: menuStyle
                  padding.top: 0
                  mainSlot: Row {
 === modified file 'plugins/Ubuntu/Settings/Menus/StandardMenu.qml'
 --- plugins/Ubuntu/Settings/Menus/StandardMenu.qml	2016-09-20 16:34:00 +0000
 +++ plugins/Ubuntu/Settings/Menus/StandardMenu.qml	2016-10-28 10:23:24 +0000
@@ -31,9 +31,9 @@
      slots: Icon {
          id: icon
          objectName: "standardMenuIcon"
--        color: theme.palette.normal.backgroundText
++        color: menuStyle.iconColor
          visible: source != ""
--        height: units.gu(3)
++        height: menuStyle.iconSize
          width: height
          SlotsLayout.position: SlotsLayout.Leading
+     }
 === added directory 'plugins/Ubuntu/Settings/Menus/Style'
 === added file 'plugins/Ubuntu/Settings/Menus/Style/BaseStyle.qml'
 --- plugins/Ubuntu/Settings/Menus/Style/BaseStyle.qml	1970-01-01 00:00:00 +0000
 +++ plugins/Ubuntu/Settings/Menus/Style/BaseStyle.qml	2016-10-28 10:23:24 +0000
@@ -0,0 +1,35 @@
++/*
++ * Copyright 2016 Canonical Ltd.
++ *
++ * This program is free software; you can redistribute it and/or modify
++ * it under the terms of the GNU Lesser 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 Lesser General Public License for more details.
++ *
++ * You should have received a copy of the GNU Lesser General Public License
++ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
++ *
++ * Author: Marco Trevisan <marco.trevisan@canonical.com>
++ */
++
++import QtQuick 2.4
++
++QtObject {
++    readonly property MenuPaddings padding: MenuPaddings {}
++    readonly property real subtitleFontSize: units.gu(1.4)
++    readonly property real avatarSize: units.gu(4)
++    readonly property color foregroundColor: theme.palette.normal.backgroundText
++    readonly property color highlightColor: theme.palette.highlighted.background
++    readonly property color iconColor: foregroundColor
++    readonly property color buttonColor: theme.palette.normal.foreground
++
++    property real minimumHeight
++    property real fontSize
++    property real iconSize
++    property real buttonFontSize
++    property real buttonHeight
++}
 === added file 'plugins/Ubuntu/Settings/Menus/Style/CMakeLists.txt'
 --- plugins/Ubuntu/Settings/Menus/Style/CMakeLists.txt	1970-01-01 00:00:00 +0000
 +++ plugins/Ubuntu/Settings/Menus/Style/CMakeLists.txt	2016-10-28 10:23:24 +0000
@@ -0,0 +1,1 @@
++add_usc_plugin(Ubuntu.Settings.Menus.Style 0.1 Ubuntu/Settings/Menus/Style)
 === added file 'plugins/Ubuntu/Settings/Menus/Style/MenuPaddings.qml'
 --- plugins/Ubuntu/Settings/Menus/Style/MenuPaddings.qml	1970-01-01 00:00:00 +0000
 +++ plugins/Ubuntu/Settings/Menus/Style/MenuPaddings.qml	2016-10-28 10:23:24 +0000
@@ -0,0 +1,26 @@
++/*
++ * Copyright 2016 Canonical Ltd.
++ *
++ * This program is free software; you can redistribute it and/or modify
++ * it under the terms of the GNU Lesser 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 Lesser General Public License for more details.
++ *
++ * You should have received a copy of the GNU Lesser General Public License
++ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
++ *
++ * Author: Marco Trevisan <marco.trevisan@canonical.com>
++ */
++
++import QtQuick 2.4
++
++QtObject {
++    property real top
++    property real bottom
++    property real leading
++    property real trailing
++}
 === added file 'plugins/Ubuntu/Settings/Menus/Style/PointerStyle.qml'
 --- plugins/Ubuntu/Settings/Menus/Style/PointerStyle.qml	1970-01-01 00:00:00 +0000
 +++ plugins/Ubuntu/Settings/Menus/Style/PointerStyle.qml	2016-10-28 10:23:24 +0000
@@ -0,0 +1,38 @@
++/*
++ * Copyright 2016 Canonical Ltd.
++ *
++ * This program is free software; you can redistribute it and/or modify
++ * it under the terms of the GNU Lesser 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 Lesser General Public License for more details.
++ *
++ * You should have received a copy of the GNU Lesser General Public License
++ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
++ *
++ * Author: Marco Trevisan <marco.trevisan@canonical.com>
++ */
++
++pragma Singleton
++import QtQuick 2.4
++import Ubuntu.Components 1.3
++
++BaseStyle {
++    id: style
++
++    padding {
++        top: units.gu(1) - SlotsLayout.padding.top
++        bottom: units.gu(0.9) - SlotsLayout.padding.bottom
++        leading: units.gu(3) - SlotsLayout.padding.leading
++        trailing: units.gu(2) - SlotsLayout.padding.trailing
++    }
++
++    minimumHeight: units.gu(3.9)
++    fontSize: units.gu(1.7)
++    iconSize: units.gu(2)
++    buttonFontSize: units.gu(1.4)
++    buttonHeight: units.gu(2)
++}
 === added file 'plugins/Ubuntu/Settings/Menus/Style/TouchStyle.qml'
 --- plugins/Ubuntu/Settings/Menus/Style/TouchStyle.qml	1970-01-01 00:00:00 +0000
 +++ plugins/Ubuntu/Settings/Menus/Style/TouchStyle.qml	2016-10-28 10:23:24 +0000
@@ -0,0 +1,40 @@
++/*
++ * Copyright 2016 Canonical Ltd.
++ *
++ * This program is free software; you can redistribute it and/or modify
++ * it under the terms of the GNU Lesser 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 Lesser General Public License for more details.
++ *
++ * You should have received a copy of the GNU Lesser General Public License
++ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
++ *
++ * Author: Marco Trevisan <marco.trevisan@canonical.com>
++ */
++
++pragma Singleton
++import QtQuick 2.4
++import Ubuntu.Components 1.3
++
++BaseStyle {
++    id: style
++
++    readonly property SlotsLayout __reference_layout: SlotsLayout {}
++
++    padding {
++        top: __reference_layout.padding.top
++        bottom: __reference_layout.padding.bottom
++        leading: __reference_layout.padding.leading
++        trailing: __reference_layout.padding.trailing
++    }
++
++    minimumHeight: units.gu(5.9)
++    fontSize: units.gu(2)
++    iconSize: units.gu(2.5)
++    buttonFontSize: units.gu(1.7)
++    buttonHeight: units.gu(3)
++}
 === added file 'plugins/Ubuntu/Settings/Menus/Style/qmldir'
 --- plugins/Ubuntu/Settings/Menus/Style/qmldir	1970-01-01 00:00:00 +0000
 +++ plugins/Ubuntu/Settings/Menus/Style/qmldir	2016-10-28 10:23:24 +0000
@@ -0,0 +1,5 @@
++module Ubuntu.Settings.Menus.Style
++
++BaseStyle 0.1 BaseStyle.qml
++singleton PointerStyle 0.1 PointerStyle.qml
++singleton TouchStyle 0.1 TouchStyle.qml
 === added file 'plugins/Ubuntu/Settings/Menus/StyledSlotsLayout.qml'
 --- plugins/Ubuntu/Settings/Menus/StyledSlotsLayout.qml	1970-01-01 00:00:00 +0000
 +++ plugins/Ubuntu/Settings/Menus/StyledSlotsLayout.qml	2016-10-28 10:23:24 +0000
@@ -0,0 +1,32 @@
++/*
++ * Copyright 2016 Canonical Ltd.
++ *
++ * This program is free software; you can redistribute it and/or modify
++ * it under the terms of the GNU Lesser 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 Lesser General Public License for more details.
++ *
++ * You should have received a copy of the GNU Lesser General Public License
++ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
++ *
++ * Author: Marco Trevisan <marco.trevisan@canonical.com>
++ */
++
++import QtQuick 2.4
++import Ubuntu.Components 1.3
++import Ubuntu.Settings.Menus.Style 0.1
++
++SlotsLayout {
++    property BaseStyle style
++
++    padding {
++        top: style.padding.top
++        bottom: style.padding.bottom
++        leading: style.padding.leading
++        trailing: style.padding.trailing
++    }
++}
 === modified file 'plugins/Ubuntu/Settings/Menus/TimeZoneMenu.qml'
 --- plugins/Ubuntu/Settings/Menus/TimeZoneMenu.qml	2016-09-15 11:08:17 +0000
 +++ plugins/Ubuntu/Settings/Menus/TimeZoneMenu.qml	2016-10-28 10:23:24 +0000
@@ -28,5 +28,7 @@
      slots: Label {
          id: timeLabel
          objectName: "timeLabel"
++        color: timeZoneMenu.foregroundColor
++        font.pixelSize: menuStyle.fontSize
+     }
+ }
 === modified file 'plugins/Ubuntu/Settings/Menus/TransferMenu.qml'
 --- plugins/Ubuntu/Settings/Menus/TransferMenu.qml	2016-10-03 08:48:34 +0000
 +++ plugins/Ubuntu/Settings/Menus/TransferMenu.qml	2016-10-28 10:23:24 +0000
@@ -31,15 +31,16 @@
      property alias maximum: progressBar.maximumValue
      property bool active: false
--    implicitHeight: slotsLayout.height + (divider.visible ? divider.height : 0)
++    menuHeight: slotsLayout.height
--    SlotsLayout {
++    StyledSlotsLayout {
          id: slotsLayout
          objectName: "transferMenuSlotsLayout"
++        style: menuStyle
          UbuntuShape {
              SlotsLayout.position: SlotsLayout.Leading
--            width: units.gu(6)
++            width: menuStyle.avatarSize
              height: width
              source: ShaderEffectSource {
@@ -52,7 +53,7 @@
                  color: {
                      if (String(source).match(/^image:\/\/theme/)) {
--                        return theme.palette.normal.backgroundText;
++                        return menuStyle.iconColor;
+                     }
                      return Qt.rgba(0.0, 0.0, 0.0, 0.0);
+                 }
@@ -68,7 +69,9 @@
                  anchors { left: parent.left; right: parent.right }
                  elide: Text.ElideRight
                  maximumLineCount: 1
++                color: menu.foregroundColor
                  font.weight: Font.DemiBold
++                font.pixelSize: menuStyle.fontSize
+             }
              ProgressBar {
@@ -85,8 +88,9 @@
                  id: stateLabel
                  objectName: "stateText"
                  anchors { left: parent.left; right: parent.right }
++                font.pixelSize: menuStyle.subtitleFontSize
++                color: menu.foregroundColor
                  visible: menu.active
--                fontSize: "x-small"
                  elide: Text.ElideRight
                  maximumLineCount: 1
+             }
 === modified file 'plugins/Ubuntu/Settings/Menus/UserSessionMenu.qml'
 --- plugins/Ubuntu/Settings/Menus/UserSessionMenu.qml	2016-09-15 11:43:42 +0000
 +++ plugins/Ubuntu/Settings/Menus/UserSessionMenu.qml	2016-10-28 10:23:24 +0000
@@ -34,13 +34,13 @@
              implicitHeight: checkMark.height + units.gu(1)
              radius: width / 2
              antialiasing: true
--            color: theme.palette.normal.backgroundText
++            color: menuStyle.iconColor
              visible: false
              Icon {
                  id: checkMark
                  name: "tick"
--                height: units.gu(2)
++                height: menuStyle.iconSize
                  width: height
                  anchors.centerIn: parent
+             }
 === modified file 'tests/qmltests/Menus/tst_BaseMenu.qml'
 --- tests/qmltests/Menus/tst_BaseMenu.qml	2016-09-22 10:09:54 +0000
 +++ tests/qmltests/Menus/tst_BaseMenu.qml	2016-10-28 10:23:24 +0000
@@ -20,6 +20,7 @@
  import QtTest 1.0
  import Ubuntu.Test 0.1
  import Ubuntu.Settings.Menus 0.1
++import Ubuntu.Settings.Menus.Style 0.1
  Item {
      width: units.gu(42)
@@ -38,11 +39,6 @@
+         }
          BaseMenu {
--            id: legacyDividerMenu
--            showDivider: true
--        }
--
--        BaseMenu {
              id: clickOverride
              property bool clicked: false
              function onClickedCallback() { clicked = true }
@@ -52,6 +48,21 @@
              id: removableMenu
              removable: true
+         }
++
++        BaseMenu {
++            id: pointerModeMenu
++            pointerMode: true
++        }
++
++        BaseMenu {
++            id: touchModeMenu
++            pointerMode: false
++        }
++
++        BaseMenu {
++            id: menuHeightMenu
++            menuHeight: units.gu(10)
++        }
+     }
      SignalSpy {
@@ -76,44 +87,42 @@
          function test_doHighlightWhenPressed() {
              baseMenu.highlightWhenPressed = true;
              mousePress(baseMenu, baseMenu.width/2, baseMenu.height/2)
--            compare(Qt.colorEqual(baseMenu.highlightColor, theme.palette.highlighted.background), true)
++            compare(Qt.colorEqual(baseMenu.highlightColor, baseMenu.menuStyle.highlightColor), true)
              mouseRelease(baseMenu)
+         }
          function test_showDivider() {
--            compare(baseMenu.showDivider, false)
              compare(baseMenu.divider.visible, false)
--            baseMenu.showDivider = true
--            compare(baseMenu.showDivider, true)
++            baseMenu.divider.visible = true
              compare(baseMenu.divider.visible, true)
--            baseMenu.showDivider = false
++            baseMenu.divider.visible = false
              compare(baseMenu.divider.visible, false)
--            compare(baseMenu.showDivider, false)
+         }
          function test_hideDivider() {
--            compare(dividerMenu.showDivider, true)
              compare(dividerMenu.divider.visible, true)
--            dividerMenu.showDivider = false
--            compare(dividerMenu.showDivider, false)
++            dividerMenu.divider.visible = false
              compare(dividerMenu.divider.visible, false)
--            dividerMenu.showDivider = true
++            dividerMenu.divider.visible = true
              compare(dividerMenu.divider.visible, true)
--            compare(dividerMenu.showDivider, true)
--        }
--
--        function test_hideDividerLegacy() {
--            legacyDividerMenu.showDivider = false
--            compare(legacyDividerMenu.showDivider, false)
--            compare(legacyDividerMenu.divider.visible, false)
--
--            legacyDividerMenu.showDivider = true
--            compare(legacyDividerMenu.divider.visible, true)
--            compare(legacyDividerMenu.showDivider, true)
++        }
++
++        function test_noMenuHeight() {
++            compare(baseMenu.height > baseMenu.menuHeight, true)
++        }
++
++        function test_dividerMenuHeight() {
++            menuHeightMenu.divider.visible = true
++            compare(menuHeightMenu.height, menuHeightMenu.menuHeight + dividerMenu.divider.height)
++        }
++
++        function test_noDividerMenuHeight() {
++            menuHeightMenu.divider.visible = false
++            compare(menuHeightMenu.height, menuHeightMenu.menuHeight)
+         }
          function test_clickEvent() {
@@ -178,5 +187,13 @@
              mouseClick(removeAction, removeAction.width/2, removeAction.height/2)
              tryCompare(signalSpy, "count", 1)
+         }
++
++        function test_pointerMode() {
++            compare(pointerModeMenu.menuStyle, PointerStyle, "menuStyle doesn't match Pointer")
++        }
++
++        function test_touchMode() {
++            compare(touchModeMenu.menuStyle, TouchStyle, "menuStyle doesn't match Touch")
++        }
+     }
+ }
 === modified file 'tests/qmltests/Menus/tst_ButtonMenu.qml'
 --- tests/qmltests/Menus/tst_ButtonMenu.qml	2016-02-11 11:23:02 +0000
 +++ tests/qmltests/Menus/tst_ButtonMenu.qml	2016-10-28 10:23:24 +0000
@@ -53,24 +53,45 @@
+     }
      SignalSpy {
--        id: signalSpy
++        id: menuItemClickSpy
++        target: buttonMenu
          signalName: "clicked"
++    }
++
++    SignalSpy {
++        id: buttonClickSpy
          target: buttonMenu
++        signalName: "buttonClicked"
+     }
      UbuntuTestCase {
          name: "ButtonMenu"
          when: windowShown
++        property var button
++        property var button2
++
++        function init() {
++            menuItemClickSpy.clear()
++            buttonClickSpy.clear()
++
++            button = findChild(buttonMenu, "button");
++            button2 = findChild(buttonMenu2, "button");
++
++            verify(button !== undefined);
++            verify(button2 !== undefined);
++        }
++
          function test_click() {
--            signalSpy.clear();
--
--            var button = findChild(buttonMenu, "button");
--            var button2 = findChild(buttonMenu2, "button");
--            verify(button !== undefined);
--
              mouseClick(button, button.width / 2, button.height / 2);
--            compare(signalSpy.count > 0, true, "signal clicked not triggered");
++            compare(menuItemClickSpy.count, 1, "signal clicked not triggered");
++            compare(buttonClickSpy.count, 1, "button signal clicked not triggered");
++        }
++
++        function test_clickOnItem() {
++            mouseClick(buttonMenu, 1, button.height / 2);
++            compare(menuItemClickSpy.count, 1, "signal clicked not triggered");
++            compare(buttonClickSpy.count, 0, "button signal clicked triggered");
+         }
+     }
+ }