ubuntu-sdk-team team mailing list archive
-
ubuntu-sdk-team team
-
Mailing list archive
-
Message #00368
[Merge] lp:~tpeeters/ubuntu-ui-toolkit/toolbarScroll into lp:ubuntu-ui-toolkit/staging
Tim Peeters has proposed merging lp:~tpeeters/ubuntu-ui-toolkit/toolbarScroll into lp:ubuntu-ui-toolkit/staging.
Commit message:
Toolbar visual refresh to scroll the icons instead of using an overflow panel.
Requested reviews:
Tim Peeters (tpeeters)
ubuntu-sdk-build-bot (ubuntu-sdk-build-bot): continuous-integration
Zsombor Egri (zsombi)
Related bugs:
Bug #1558018 in ubuntu-ui-toolkit (Ubuntu): "Scrolling of icons in Toolbar"
https://bugs.launchpad.net/ubuntu/+source/ubuntu-ui-toolkit/+bug/1558018
For more details, see:
https://code.launchpad.net/~tpeeters/ubuntu-ui-toolkit/toolbarScroll/+merge/307847
Toolbar visual refresh to scroll the icons instead of using an overflow panel.
--
Your team Ubuntu SDK team is subscribed to branch lp:ubuntu-ui-toolkit/staging.
=== modified file 'components.api'
--- components.api 2016-09-17 05:48:25 +0000
+++ components.api 2017-01-20 11:43:20 +0000
@@ -1619,6 +1619,8 @@
property bool opened
property Item pageStack
Ubuntu.Components.Styles.ToolbarStyle 1.3: Item
+ property color backgroundColor
+ readonly property ActionItemProperties buttons
property Component defaultDelegate
Ubuntu.Components.Type: Enum
Bool
=== added file 'examples/ubuntu-ui-toolkit-gallery/Toolbars.qml'
--- examples/ubuntu-ui-toolkit-gallery/Toolbars.qml 1970-01-01 00:00:00 +0000
+++ examples/ubuntu-ui-toolkit-gallery/Toolbars.qml 2017-01-20 11:43:20 +0000
@@ -0,0 +1,253 @@
+/*
+ * 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/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.3
+
+Template {
+ objectName: "toolbarTemplate"
+ id: toolbarTemplate
+
+ property list<Action> actionList: [
+ Action {
+ iconName: "alarm-clock"
+ text: "Tick tock"
+ },
+ Action {
+ iconName: "appointment"
+ text: "Date"
+ },
+ Action {
+ iconName: "attachment"
+ text: "Attach"
+ },
+ Action {
+ iconName: "contact"
+ text: "Contact"
+ },
+ Action {
+ iconName: "like"
+ text: "Like"
+ },
+ Action {
+ iconName: "lock"
+ text: "Lock"
+ }
+ ]
+
+ property list<Action> longActionList: [
+ Action {
+ iconName: "alarm-clock"
+ text: "Tick tock"
+ onTriggered: print("tock")
+ },
+ Action {
+ iconName: "appointment"
+ text: "Date"
+ onTriggered: print("date")
+ },
+ Action {
+ iconName: "attachment"
+ text: "Attach"
+ onTriggered: print("attach")
+ },
+ Action {
+ iconName: "contact"
+ text: "Contact"
+ onTriggered: print("contact")
+ },
+ Action {
+ iconName: "like"
+ text: "Like"
+ onTriggered: print("+1")
+ },
+ Action {
+ iconName: "lock"
+ text: "Lock"
+ onTriggered: print("lock")
+ },
+ Action {
+ iconName: "camcorder"
+ text: "Camera"
+ onTriggered: print("cam")
+ },
+ Action {
+ iconName: "location"
+ text: "Location"
+ onTriggered: print("loc")
+ enabled: false
+ },
+ Action {
+ iconName: "message"
+ text: "Message"
+ onTriggered: print("msg")
+ },
+ Action {
+ iconName: "livetv"
+ text: "Television"
+ onTriggered: print("tv")
+ },
+ Action {
+ iconName: "lock-broken"
+ text: "Unlock"
+ onTriggered: print("unlock")
+ },
+ Action {
+ iconName: "compose"
+ text: "Edit"
+ onTriggered: print("edit")
+ },
+ Action {
+ iconName: "contact-new"
+ text: "Add user"
+ onTriggered: print("useradd")
+ },
+ Action {
+ iconName: "crop"
+ text: "Crop"
+ onTriggered: print("crop")
+ },
+ Action {
+ iconName: "edit-cut"
+ text: "Cut"
+ onTriggered: print("cut")
+ },
+ Action {
+ iconName: "image-quality"
+ text: "Image quality"
+ onTriggered: print("image quality")
+ },
+ Action {
+ iconName: "import"
+ text: "Import"
+ onTriggered: print("import")
+ },
+ Action {
+ iconName: "history"
+ text: "History"
+ onTriggered: print("history")
+ },
+ Action {
+ iconName: "media-eject"
+ text: "Eject"
+ onTriggered: print("eject")
+ }
+ ]
+
+ property list<Action> deleteActionList: [
+ Action {
+ iconName: "delete"
+ text: "Delete"
+ onTriggered: print("delete")
+ }
+ ]
+
+ header: PageHeader {
+ id: h
+ title: toolbarTemplate.title
+ property bool longList: false
+ extension: Toolbar {
+ id: headerToolbar
+ anchors {
+ left: parent.left
+ right: parent.right
+ bottom: parent.bottom
+ }
+ leadingActionBar.actions: deleteActionList
+ trailingActionBar.actions: h.longList ? longActionList : actionList
+ }
+ trailingActionBar.actions: [
+ Action {
+ iconName: h.longList ? "remove" : "add"
+ text: h.longList ? "less" : "more"
+ onTriggered: {
+ h.longList = !h.longList;
+ }
+ }
+ ]
+ }
+
+ TemplateSection {
+ title: "Toolbar"
+ className: "Toolbar"
+
+ TemplateRow {
+ width: parent.width
+ title: i18n.tr("Enabled")
+ Toolbar {
+ width: parent.width
+ trailingActionBar.actions: actionList
+ leadingActionBar.actions: deleteActionList
+ }
+ }
+ TemplateRow {
+ title: i18n.tr("Disabled")
+ Toolbar {
+ width: parent.width
+ trailingActionBar.actions: actionList
+ leadingActionBar.actions: deleteActionList
+ enabled: false
+ }
+ }
+ }
+
+ TemplateSection {
+ title: "Scrollable toolbar"
+ className: "Toolbar"
+
+ TemplateRow {
+ title: i18n.tr("Enabled")
+ Toolbar {
+ width: parent.width
+ trailingActionBar.actions: longActionList
+ leadingActionBar.actions: deleteActionList
+ }
+ }
+ TemplateRow {
+ title: i18n.tr("Disabled")
+ Toolbar {
+ width: parent.width
+ trailingActionBar.actions: longActionList
+ leadingActionBar.actions: deleteActionList
+ enabled: false
+ }
+ }
+ }
+
+ TemplateSection {
+ title: "Colored"
+ className: "ActionBarStyle"
+
+ TemplateRow {
+ title: "Green"
+ Toolbar {
+ width: parent.width
+ trailingActionBar.actions: longActionList
+ leadingActionBar.actions: deleteActionList
+ StyleHints {
+ ignoreUnknownProperties: false
+ backgroundColor: UbuntuColors.green
+ buttons {
+ foregroundColor: "white"
+ disabledForegroundColor: UbuntuColors.silk
+ pressedBackgroundColor: UbuntuColors.ash
+ disabledBackgroundColor: UbuntuColors.slate
+ }
+ }
+ }
+ }
+ }
+}
=== modified file 'examples/ubuntu-ui-toolkit-gallery/WidgetsModel.qml'
--- examples/ubuntu-ui-toolkit-gallery/WidgetsModel.qml 2016-01-20 20:15:42 +0000
+++ examples/ubuntu-ui-toolkit-gallery/WidgetsModel.qml 2017-01-20 11:43:20 +0000
@@ -143,6 +143,12 @@
source: "Toggles.qml"
}
ListElement {
+ objectName: "toolbarsElement"
+ label: "Toolbar"
+ source: "Toolbars.qml"
+ }
+
+ ListElement {
objectName: "ubuntuListViewElement"
label: "Ubuntu ListView"
source: "UbuntuListViews.qml"
=== modified file 'src/imports/Components/1.3/Toolbar.qml'
--- src/imports/Components/1.3/Toolbar.qml 2016-05-25 12:48:10 +0000
+++ src/imports/Components/1.3/Toolbar.qml 2017-01-20 11:43:20 +0000
@@ -1,5 +1,5 @@
/*
- * Copyright 2015 Canonical Ltd.
+ * 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
@@ -127,6 +127,17 @@
print("WARNING: Toolbar with more than one leading actions is not supported.");
}
}
+ StyleHints {
+ backgroundColor: "transparent" // background is drawn by the toolbarStyle
+ buttons {
+ foregroundColor: toolbar.__styleInstance.buttons.foregroundColor
+ pressedForegroundColor: toolbar.__styleInstance.buttons.pressedForegroundColor
+ disabledForegroundColor: toolbar.__styleInstance.buttons.disabledForegroundColor
+ backgroundColor: toolbar.__styleInstance.buttons.backgroundColor
+ pressedBackgroundColor: toolbar.__styleInstance.buttons.pressedBackgroundColor
+ disabledBackgroundColor: toolbar.__styleInstance.buttons.disabledBackgroundColor
+ }
+ }
}
/*!
@@ -150,19 +161,29 @@
readonly property alias trailingActionBar: trailing
ActionBar {
id: trailing
+ styleName: "ScrollingActionBarStyle"
anchors {
+ left: leading.right
right: parent.right
top: parent.top
bottom: parent.bottom
+ leftMargin: units.gu(1)
rightMargin: units.gu(1)
}
- numberOfSlots: 8
delegate: toolbar.__styleInstance.defaultDelegate
- Component.onCompleted: {
- if (actions && actions.length > 8) {
- print("WARNING: Toolbar with more than one leading actions is not supported.");
+ StyleHints {
+ backgroundColor: "transparent" // background is drawn by the toolbarStyle
+ buttons {
+ foregroundColor: toolbar.__styleInstance.buttons.foregroundColor
+ pressedForegroundColor: toolbar.__styleInstance.buttons.pressedForegroundColor
+ disabledForegroundColor: toolbar.__styleInstance.buttons.disabledForegroundColor
+ backgroundColor: toolbar.__styleInstance.buttons.backgroundColor
+ pressedBackgroundColor: toolbar.__styleInstance.buttons.pressedBackgroundColor
+ disabledBackgroundColor: toolbar.__styleInstance.buttons.disabledBackgroundColor
+ }
+ scrollButtons {
+ backgroundColor: toolbar.__styleInstance.backgroundColor // must be opaque to hide the icon buttons
}
}
-
}
}
=== modified file 'src/imports/Components/1.3/UbuntuListView.qml'
--- src/imports/Components/1.3/UbuntuListView.qml 2016-09-22 17:39:59 +0000
+++ src/imports/Components/1.3/UbuntuListView.qml 2017-01-20 11:43:20 +0000
@@ -199,10 +199,10 @@
color: root.activeFocus
? theme.palette.focused.background
: theme.palette.selected.background
- width: root.currentItem.width
- height: root.currentItem.height
+ width: root.currentItem ? root.currentItem.width : 0
+ height: root.currentItem ? root.currentItem.height : 0
// FIXME: use opacity yet, until we fix the palette's disabled.background color
- opacity: root.currentItem.enabled ? 1.0 : 0.5
+ opacity: root.currentItem && root.currentItem.enabled ? 1.0 : 0.5
}
highlightMoveDuration: 50
}
=== modified file 'src/imports/Components/Styles/1.3/ToolbarStyle.qml'
--- src/imports/Components/Styles/1.3/ToolbarStyle.qml 2015-12-02 13:02:44 +0000
+++ src/imports/Components/Styles/1.3/ToolbarStyle.qml 2017-01-20 11:43:20 +0000
@@ -1,5 +1,5 @@
/*
- * Copyright 2015 Canonical Ltd.
+ * 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
@@ -25,6 +25,16 @@
*/
Item {
/*!
+ The color of the background of the action bar.
+ */
+ property color backgroundColor
+
+ /*!
+ Configuration of the colors of the action buttons in the action bar.
+ */
+ readonly property ActionItemProperties buttons: ActionItemProperties { }
+
+ /*!
The default action delegate if the styled item does
not provide a different delegate.
*/
=== modified file 'src/imports/Components/Themes/Ambiance/1.3/ScrollingActionBarStyle.qml'
--- src/imports/Components/Themes/Ambiance/1.3/ScrollingActionBarStyle.qml 2016-10-03 14:07:38 +0000
+++ src/imports/Components/Themes/Ambiance/1.3/ScrollingActionBarStyle.qml 2017-01-20 11:43:20 +0000
@@ -113,7 +113,11 @@
model: listViewContainer.visibleActions
highlight: Rectangle {
- color: theme.palette.focused.background
+ color: "transparent"
+ border {
+ color: theme.palette.selected.focus
+ width: 2
+ }
visible: actionsListView.activeFocus
width: actionsListView.currentItem.width
height: actionsListView.currentItem.height
=== modified file 'src/imports/Components/Themes/Ambiance/1.3/ToolbarStyle.qml'
--- src/imports/Components/Themes/Ambiance/1.3/ToolbarStyle.qml 2016-09-19 07:24:45 +0000
+++ src/imports/Components/Themes/Ambiance/1.3/ToolbarStyle.qml 2017-01-20 11:43:20 +0000
@@ -1,5 +1,5 @@
/*
- * Copyright 2015 Canonical Ltd.
+ * 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
@@ -24,16 +24,49 @@
// reduce toolbar height on phone in landscape orientation:
implicitHeight: Screen.height > units.gu(50) ? units.gu(4) : units.gu(3)
+ backgroundColor: theme.palette.normal.background
+ buttons {
+ foregroundColor: theme.palette.normal.backgroundText
+ pressedForegroundColor: buttons.foregroundColor
+ disabledForegroundColor: theme.palette.disabled.backgroundText
+ backgroundColor: "transparent" // background is already colored
+ pressedBackgroundColor: theme.palette.highlighted.background
+ disabledBackgroundColor: buttons.backgroundColor
+ }
+
/*!
The default action delegate if the styled item does
not provide a delegate.
*/
- defaultDelegate: AbstractButton {
- style: IconButtonStyle { }
- objectName: action.objectName + "_button"
- height: parent ? parent.height : undefined
+ defaultDelegate: ListItem {
width: units.gu(4)
- action: modelData
- activeFocusOnTab: true
+ height: toolbarStyle.height
+ enabled: modelData.enabled
+ objectName: modelData.objectName + "_button"
+ onClicked: button.trigger()
+ AbstractButton {
+ id: button
+ anchors.fill: parent
+ style: IconButtonStyle {
+ foregroundColor: button.pressed ?
+ toolbarStyle.buttons.pressedForegroundColor :
+ button.enabled ?
+ toolbarStyle.buttons.foregroundColor :
+ toolbarStyle.buttons.disabledForegroundColor
+ backgroundColor: button.pressed ?
+ toolbarStyle.buttons.pressedBackgroundColor :
+ button.enabled ?
+ toolbarStyle.buttons.backgroundColor :
+ toolbarStyle.buttons.disabledBackgroundColor
+ }
+ action: modelData
+ activeFocusOnTab: false
+ }
+ divider.visible: false
+ }
+
+ Rectangle {
+ anchors.fill: parent
+ color: toolbarStyle.backgroundColor
}
}
References
