From 33cdc8ffc9bdddd601a98abc95a8df1a5bdf6133 Mon Sep 17 00:00:00 2001 From: Monio Date: Fri, 22 Apr 2016 07:44:39 +0200 Subject: [PATCH 1/5] Create a switch control for all checkable toolbar actions --- src/controls/Switch.qml | 17 +++++++++--- src/window/ActionBar.qml | 57 +++++++++++++++++++++++++++++----------- 2 files changed, 55 insertions(+), 19 deletions(-) diff --git a/src/controls/Switch.qml b/src/controls/Switch.qml index 8fd01b2a..1b6242b3 100644 --- a/src/controls/Switch.qml +++ b/src/controls/Switch.qml @@ -23,6 +23,15 @@ import Material 0.3 Controls.Switch { id: control + property Action action + + onCheckedChanged: { + if(action !== null){ + action.checked = checked + action.toggled(checked) + } + } + /*! The switch color. By default this is the app's accent color */ @@ -43,8 +52,8 @@ Controls.Switch { backgroundColor: control.enabled ? control.checked ? control.color : darkBackground ? "#BDBDBD" : "#FAFAFA" - : darkBackground ? "#424242" - : "#BDBDBD" + : darkBackground ? "#424242" + : "#BDBDBD" } groove: Item { @@ -59,8 +68,8 @@ Controls.Switch { color: control.enabled ? control.checked ? Theme.alpha(control.color, 0.5) : darkBackground ? Qt.rgba(1, 1, 1, 0.26) : Qt.rgba(0, 0, 0, 0.26) - : darkBackground ? Qt.rgba(1, 1, 1, 0.12) - : Qt.rgba(0, 0, 0, 0.12) + : darkBackground ? Qt.rgba(1, 1, 1, 0.12) + : Qt.rgba(0, 0, 0, 0.12) Behavior on color { ColorAnimation { diff --git a/src/window/ActionBar.qml b/src/window/ActionBar.qml index e659d762..130867e1 100644 --- a/src/window/ActionBar.qml +++ b/src/window/ActionBar.qml @@ -99,7 +99,7 @@ Item { The height of the extended content view. */ readonly property int extendedHeight: extendedContentView.height + - (tabBar.visible && !integratedTabBar ? tabBar.height : 0) + (tabBar.visible && !integratedTabBar ? tabBar.height : 0) /*! Set to true to hide the action bar. This is used when displaying an @@ -232,7 +232,7 @@ Item { } color: Theme.lightDark(actionBar.backgroundColor, Theme.light.iconColor, - Theme.dark.iconColor) + Theme.dark.iconColor) size: iconSize action: backAction @@ -262,13 +262,13 @@ Item { } visible: customContentView.children.length === 0 && - (!integratedTabBar || !tabBar.visible) + (!integratedTabBar || !tabBar.visible) textFormat: Text.PlainText text: actionBar.title style: "title" color: Theme.lightDark(actionBar.backgroundColor, Theme.light.textColor, - Theme.dark.textColor) + Theme.dark.textColor) elide: Text.ElideRight } @@ -286,22 +286,49 @@ Item { Repeater { model: __internal.visibleActions.length > maxActionCount - ? maxActionCount - 1 - : __internal.visibleActions.length + ? maxActionCount - 1 + : __internal.visibleActions.length - delegate: IconButton { - id: iconAction - objectName: "action/" + action.objectName + delegate:Loader{ + width:iconSize + height: iconSize + anchors.verticalCenter: parent ? parent.verticalCenter : undefined + sourceComponent: __internal.visibleActions[index].checkable?switchDelegate:iconAction + + + Component{ + id:switchDelegate + Switch{ + width: iconSize*2.5 + height: iconSize + action: __internal.visibleActions[index] + anchors{ + rightMargin: 15 + leftMargin: 15 + } + } + + } - action: __internal.visibleActions[index] + Component{ + id: iconAction + IconButton { - color: Theme.lightDark(actionBar.backgroundColor, Theme.light.iconColor, - Theme.dark.iconColor) - size: iconSize + objectName: "action/" + action.objectName - anchors.verticalCenter: parent ? parent.verticalCenter : undefined + action: __internal.visibleActions[index] + + color: Theme.lightDark(actionBar.backgroundColor, Theme.light.iconColor, + Theme.dark.iconColor) + size: iconSize + + anchors.verticalCenter: parent ? parent.verticalCenter : undefined + } + } } + + } IconButton { @@ -311,7 +338,7 @@ Item { objectName: "action/overflow" size: 27 * Units.dp color: Theme.lightDark(actionBar.backgroundColor, Theme.light.iconColor, - Theme.dark.iconColor) + Theme.dark.iconColor) visible: actionBar.overflowMenuAvailable anchors.verticalCenter: parent.verticalCenter From c77fd285563d3208675588ad673cd6e396bf5d44 Mon Sep 17 00:00:00 2001 From: Monio Date: Fri, 22 Apr 2016 23:42:04 +0200 Subject: [PATCH 2/5] add comment --- src/controls/Switch.qml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/controls/Switch.qml b/src/controls/Switch.qml index 1b6242b3..e1daa118 100644 --- a/src/controls/Switch.qml +++ b/src/controls/Switch.qml @@ -23,6 +23,9 @@ import Material 0.3 Controls.Switch { id: control + /*! + This action can be used when integrating switch to actionBar + */ property Action action onCheckedChanged: { From 8f73a83f09b6ee03acbb22c175c9b7f5786a8047 Mon Sep 17 00:00:00 2001 From: Monio Date: Tue, 26 Apr 2016 00:20:00 +0200 Subject: [PATCH 3/5] Add property to Action to choose if we display it as switch or tool button --- src/controls/Action.qml | 9 +++++++++ src/window/ActionBar.qml | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/controls/Action.qml b/src/controls/Action.qml index a8ad35b9..b083ca12 100644 --- a/src/controls/Action.qml +++ b/src/controls/Action.qml @@ -28,6 +28,11 @@ Controls.Action { */ property bool hasDividerAfter + /*! + used to display the action as switch control on the ActionBar + */ + property bool displayAsSwitch: false + /*! A URL pointing to an image to display as the icon. By default, this is a special URL representing the icon named by \l iconName from the Material Design @@ -63,4 +68,8 @@ Controls.Action { property alias text: action.name property alias tooltip: action.summary + + onDisplayAsSwitchChanged: { + if(displayAsSwitch == true)checkable = true + } } diff --git a/src/window/ActionBar.qml b/src/window/ActionBar.qml index 130867e1..4f414cf7 100644 --- a/src/window/ActionBar.qml +++ b/src/window/ActionBar.qml @@ -294,7 +294,7 @@ Item { width:iconSize height: iconSize anchors.verticalCenter: parent ? parent.verticalCenter : undefined - sourceComponent: __internal.visibleActions[index].checkable?switchDelegate:iconAction + sourceComponent: __internal.visibleActions[index].displayAsSwitch?switchDelegate:iconAction Component{ From f2fdc0561ec2ce91b8fb8a4fb8abda7a6ac12274 Mon Sep 17 00:00:00 2001 From: Monio Date: Tue, 26 Apr 2016 23:42:50 +0200 Subject: [PATCH 4/5] resolve icon bug --- demo/demo.qrc | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/demo/demo.qrc b/demo/demo.qrc index 69946138..ad8a6fe9 100644 --- a/demo/demo.qrc +++ b/demo/demo.qrc @@ -35,8 +35,7 @@ icons/file_file_download.svg icons/image_color_lens.svg icons/maps_place.svg - icons/navigation_arrow_drop_down.svg - icons/navigation_menu.svg + icons/navigation_arrow_drop_down.svg icons/social_share.svg images/balloon.jpg images/go-last.color.svg From a60bed901c272580d225d9b0683700b3617ccdb0 Mon Sep 17 00:00:00 2001 From: Issam Wakidi Date: Mon, 2 May 2016 14:58:13 +0200 Subject: [PATCH 5/5] exposed the iconButton and switch component used in the action bar, those can now be accessed vthrough properties, this provides the possibility to have different styles for the actionBar iconButtons and switches --- src/controls/Switch.qml | 13 ++--- src/window/ActionBar.qml | 106 ++++++++++++++++++++++----------------- 2 files changed, 66 insertions(+), 53 deletions(-) diff --git a/src/controls/Switch.qml b/src/controls/Switch.qml index e1daa118..993d79a8 100644 --- a/src/controls/Switch.qml +++ b/src/controls/Switch.qml @@ -28,12 +28,6 @@ Controls.Switch { */ property Action action - onCheckedChanged: { - if(action !== null){ - action.checked = checked - action.toggled(checked) - } - } /*! The switch color. By default this is the app's accent color @@ -82,4 +76,11 @@ Controls.Switch { } } } + + onCheckedChanged: { + if(action !== null){ + action.checked = checked + action.toggled(checked) + } + } } diff --git a/src/window/ActionBar.qml b/src/window/ActionBar.qml index 4f414cf7..3641b434 100644 --- a/src/window/ActionBar.qml +++ b/src/window/ActionBar.qml @@ -175,6 +175,30 @@ Item { property int leftKeyline: label.x + /*! + The switch Component if displayAsSwitch is used for actions + */ + + property Component switchDelegate : Component{ + Switch{ + } + } + + /*! + the iconButton component used for actions + */ + property Component iconButtonDelegate: Component{ + IconButton { + + color: Theme.lightDark(actionBar.backgroundColor, Theme.light.iconColor, + Theme.dark.iconColor) + size: actionBar.iconSize + + anchors.verticalCenter: parent ? parent.verticalCenter : undefined + + } + } + /*! \internal \qmlproperty bool overflowMenuShowing @@ -285,65 +309,52 @@ Item { spacing: 24 * Units.dp Repeater { - model: __internal.visibleActions.length > maxActionCount - ? maxActionCount - 1 - : __internal.visibleActions.length + id : actionsRepeater + function updateActions() { + for(var i=0; i < count;i++){ - delegate:Loader{ - width:iconSize - height: iconSize - anchors.verticalCenter: parent ? parent.verticalCenter : undefined - sourceComponent: __internal.visibleActions[index].displayAsSwitch?switchDelegate:iconAction - - - Component{ - id:switchDelegate - Switch{ - width: iconSize*2.5 - height: iconSize - action: __internal.visibleActions[index] - anchors{ - rightMargin: 15 - leftMargin: 15 - } - } + if(itemAt(i).item.action !== __internal.visibleActions[i]) + itemAt(i).item.action = __internal.visibleActions[i] + if(itemAt(i).item.objectName !== "action/" + itemAt(i).item.action.objectName) + itemAt(i).item.objectName = "action/" + itemAt(i).item.action.objectName } + } - Component{ - id: iconAction - IconButton { - - objectName: "action/" + action.objectName - - action: __internal.visibleActions[index] - - color: Theme.lightDark(actionBar.backgroundColor, Theme.light.iconColor, - Theme.dark.iconColor) - size: iconSize + model: __internal.visibleActions.length > maxActionCount + ? maxActionCount - 1 + : __internal.visibleActions.length - anchors.verticalCenter: parent ? parent.verticalCenter : undefined - } - } + delegate :Loader{ + // content is resized to the loaded item size + anchors.verticalCenter: parent ? parent.verticalCenter : undefined + sourceComponent: __internal.visibleActions[index].displayAsSwitch? + switchDelegate:iconButtonDelegate } - + Component.onCompleted: { + // first time setting repeater's actions + updateActions() + // bind the model changes to updating actions + modelChanged.connect(function(){updateActions()}) + } } + } - IconButton { - id: overflowButton - iconName: "navigation/more_vert" - objectName: "action/overflow" - size: 27 * Units.dp - color: Theme.lightDark(actionBar.backgroundColor, Theme.light.iconColor, - Theme.dark.iconColor) - visible: actionBar.overflowMenuAvailable - anchors.verticalCenter: parent.verticalCenter + IconButton { + id: overflowButton - onClicked: openOverflowMenu() - } + iconName: "navigation/more_vert" + objectName: "action/overflow" + size: 27 * Units.dp + color: Theme.lightDark(actionBar.backgroundColor, Theme.light.iconColor, + Theme.dark.iconColor) + visible: actionBar.overflowMenuAvailable + anchors.verticalCenter: parent.verticalCenter + + onClicked: openOverflowMenu() } Item { @@ -419,3 +430,4 @@ Item { } } } +