From 33cdc8ffc9bdddd601a98abc95a8df1a5bdf6133 Mon Sep 17 00:00:00 2001 From: Monio Date: Fri, 22 Apr 2016 07:44:39 +0200 Subject: [PATCH 1/7] 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/7] 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/7] 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/7] 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/7] 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 { } } } + From 492952a4bca2c095fdce872cf5125cf45fe0f00f Mon Sep 17 00:00:00 2001 From: Issam Wakidi Date: Sat, 18 Jun 2016 20:18:48 +0200 Subject: [PATCH 6/7] Revert "Merge pull request #1 from Spateof-io/QMLMAT-1-enable-switch-insert-in-ActionBar" This reverts commit 12c45a7dbf14405e92662d102b0d3a5b21b64e02, reversing changes made to 0cada50ee5469efdeb37e9eb2f5e8de0194b6ba6. As we can use directly the customContent property of the actionBar, no need to provide such feature and properties to add switches to the actionbar. the icon bug correction will be restaured in a standalone branch for a separated pull requests. --- demo/demo.qrc | 3 +- src/controls/Action.qml | 9 ---- src/controls/Switch.qml | 21 ++-------- src/window/ActionBar.qml | 89 +++++++++++----------------------------- 4 files changed, 31 insertions(+), 91 deletions(-) diff --git a/demo/demo.qrc b/demo/demo.qrc index ad8a6fe9..69946138 100644 --- a/demo/demo.qrc +++ b/demo/demo.qrc @@ -35,7 +35,8 @@ icons/file_file_download.svg icons/image_color_lens.svg icons/maps_place.svg - icons/navigation_arrow_drop_down.svg + icons/navigation_arrow_drop_down.svg + icons/navigation_menu.svg icons/social_share.svg images/balloon.jpg images/go-last.color.svg diff --git a/src/controls/Action.qml b/src/controls/Action.qml index b083ca12..a8ad35b9 100644 --- a/src/controls/Action.qml +++ b/src/controls/Action.qml @@ -28,11 +28,6 @@ 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 @@ -68,8 +63,4 @@ Controls.Action { property alias text: action.name property alias tooltip: action.summary - - onDisplayAsSwitchChanged: { - if(displayAsSwitch == true)checkable = true - } } diff --git a/src/controls/Switch.qml b/src/controls/Switch.qml index 993d79a8..8fd01b2a 100644 --- a/src/controls/Switch.qml +++ b/src/controls/Switch.qml @@ -23,12 +23,6 @@ import Material 0.3 Controls.Switch { id: control - /*! - This action can be used when integrating switch to actionBar - */ - property Action action - - /*! The switch color. By default this is the app's accent color */ @@ -49,8 +43,8 @@ Controls.Switch { backgroundColor: control.enabled ? control.checked ? control.color : darkBackground ? "#BDBDBD" : "#FAFAFA" - : darkBackground ? "#424242" - : "#BDBDBD" + : darkBackground ? "#424242" + : "#BDBDBD" } groove: Item { @@ -65,8 +59,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 { @@ -76,11 +70,4 @@ 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 3641b434..e659d762 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 @@ -175,30 +175,6 @@ 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 @@ -256,7 +232,7 @@ Item { } color: Theme.lightDark(actionBar.backgroundColor, Theme.light.iconColor, - Theme.dark.iconColor) + Theme.dark.iconColor) size: iconSize action: backAction @@ -286,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 } @@ -309,52 +285,38 @@ Item { spacing: 24 * Units.dp Repeater { - id : actionsRepeater + model: __internal.visibleActions.length > maxActionCount + ? maxActionCount - 1 + : __internal.visibleActions.length - function updateActions() { - for(var i=0; i < count;i++){ + delegate: IconButton { + id: iconAction - if(itemAt(i).item.action !== __internal.visibleActions[i]) - itemAt(i).item.action = __internal.visibleActions[i] + objectName: "action/" + action.objectName - if(itemAt(i).item.objectName !== "action/" + itemAt(i).item.action.objectName) - itemAt(i).item.objectName = "action/" + itemAt(i).item.action.objectName - } - } + action: __internal.visibleActions[index] - model: __internal.visibleActions.length > maxActionCount - ? maxActionCount - 1 - : __internal.visibleActions.length + color: Theme.lightDark(actionBar.backgroundColor, Theme.light.iconColor, + Theme.dark.iconColor) + size: iconSize - 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 - 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 + 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() + onClicked: openOverflowMenu() + } } Item { @@ -430,4 +392,3 @@ Item { } } } - From 70d0ea37ee8c06ea67753de3469a95903581906d Mon Sep 17 00:00:00 2001 From: Issam Wakidi Date: Sun, 19 Jun 2016 06:48:48 +0200 Subject: [PATCH 7/7] added missing file to qrc --- demo/demo.qrc | 92 ++++++++++++++++++++++++--------------------------- 1 file changed, 44 insertions(+), 48 deletions(-) diff --git a/demo/demo.qrc b/demo/demo.qrc index 69946138..e475bc03 100644 --- a/demo/demo.qrc +++ b/demo/demo.qrc @@ -1,49 +1,45 @@ - - - - - BottomSheetDemo.qml - ButtonDemo.qml - CheckBoxDemo.qml - ColorPaletteDemo.qml - CustomIconsDemo.qml - DatePickerDemo.qml - DialogDemo.qml - FormsDemo.qml - ListItemsDemo.qml - PageStackDemo.qml - ProgressBarDemo.qml - RadioButtonDemo.qml - SidebarPage.qml - SliderDemo.qml - SubPage.qml - SwitchDemo.qml - TextFieldDemo.qml - TimePickerDemo.qml - TypographyDemo.qml - icons/action_account_circle.svg - icons/action_autorenew.svg - icons/action_delete.svg - icons/action_language.svg - icons/action_settings.svg - icons/alert_warning.svg - icons/communication_email.svg - icons/content_add.svg - icons/content_create.svg - icons/content_forward.svg - icons/device_access_alarm.svg - 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/social_share.svg - images/balloon.jpg - images/go-last.color.svg - images/list-add.color.svg - images/weather-pouring.svg - images/weather-sunset.svg - main.qml - - + + + BottomSheetDemo.qml + ButtonDemo.qml + CheckBoxDemo.qml + ColorPaletteDemo.qml + CustomIconsDemo.qml + DatePickerDemo.qml + DialogDemo.qml + FormsDemo.qml + ListItemsDemo.qml + PageStackDemo.qml + ProgressBarDemo.qml + RadioButtonDemo.qml + SidebarPage.qml + SliderDemo.qml + SubPage.qml + SwitchDemo.qml + TextFieldDemo.qml + TimePickerDemo.qml + TypographyDemo.qml + icons/action_account_circle.svg + icons/action_autorenew.svg + icons/action_delete.svg + icons/action_language.svg + icons/action_settings.svg + icons/alert_warning.svg + icons/communication_email.svg + icons/content_add.svg + icons/content_create.svg + icons/content_forward.svg + icons/device_access_alarm.svg + icons/file_file_download.svg + icons/image_color_lens.svg + icons/maps_place.svg + icons/navigation_arrow_drop_down.svg + icons/social_share.svg + images/balloon.jpg + images/go-last.color.svg + images/list-add.color.svg + images/weather-pouring.svg + images/weather-sunset.svg + main.qml +