Qmlmat 1 enable switch insert in action bar

demo/demo.qrc

@@ -35,8 +35,7 @@
 	<file>icons/file_file_download.svg</file>
 	<file>icons/image_color_lens.svg</file>
 	<file>icons/maps_place.svg</file>
-	<file>icons/navigation_arrow_drop_down.svg</file>
-	<file>icons/navigation_menu.svg</file>
+        <file>icons/navigation_arrow_drop_down.svg</file>
 	<file>icons/social_share.svg</file>
 	<file>images/balloon.jpg</file>
 	<file>images/go-last.color.svg</file>

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
+    }
 }

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)
+        }
+    }
 }

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 {
         }
     }
 }
+