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
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/controls/Switch.qml b/src/controls/Switch.qml
index 8fd01b2a..993d79a8 100644
--- a/src/controls/Switch.qml
+++ b/src/controls/Switch.qml
@@ -23,6 +23,12 @@ 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
*/
@@ -43,8 +49,8 @@ Controls.Switch {
backgroundColor: control.enabled ? control.checked ? control.color
: darkBackground ? "#BDBDBD"
: "#FAFAFA"
- : darkBackground ? "#424242"
- : "#BDBDBD"
+ : darkBackground ? "#424242"
+ : "#BDBDBD"
}
groove: Item {
@@ -59,8 +65,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 {
@@ -70,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 e659d762..3641b434 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,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
@@ -232,7 +256,7 @@ Item {
}
color: Theme.lightDark(actionBar.backgroundColor, Theme.light.iconColor,
- Theme.dark.iconColor)
+ Theme.dark.iconColor)
size: iconSize
action: backAction
@@ -262,13 +286,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
}
@@ -285,38 +309,52 @@ Item {
spacing: 24 * Units.dp
Repeater {
- model: __internal.visibleActions.length > maxActionCount
- ? maxActionCount - 1
- : __internal.visibleActions.length
+ id : actionsRepeater
- delegate: IconButton {
- id: iconAction
+ function updateActions() {
+ for(var i=0; i < count;i++){
- objectName: "action/" + action.objectName
+ if(itemAt(i).item.action !== __internal.visibleActions[i])
+ itemAt(i).item.action = __internal.visibleActions[i]
- action: __internal.visibleActions[index]
+ if(itemAt(i).item.objectName !== "action/" + itemAt(i).item.action.objectName)
+ itemAt(i).item.objectName = "action/" + itemAt(i).item.action.objectName
+ }
+ }
- color: Theme.lightDark(actionBar.backgroundColor, Theme.light.iconColor,
- Theme.dark.iconColor)
- size: iconSize
+ model: __internal.visibleActions.length > maxActionCount
+ ? maxActionCount - 1
+ : __internal.visibleActions.length
+ 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 {
@@ -392,3 +430,4 @@ Item {
}
}
}
+