adds MenuBar style

Author: Plaristote

background/Button.qml

@@ -1,48 +1,25 @@
 import QtQuick 2.0
+import "qrc:/.styles/Material/components"
 
 Rectangle {
   id: buttonBackground
-  color: parent.enabled ? parent.Material.primary : "#E0E0E0"
+  color: parent.enabled ? parent.Material.background : "#E0E0E0"
   radius: 4
   clip: true
 
   Component.onCompleted: {
     buttonBackground.dom.style.boxShadow = "rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px";
-    buttonBackground.dom.style.cursor = "pointer";
   }
 
-  // Ripple
-  Rectangle {
+  RippleEffect {
     id: ripple
-    color: "white"
-    anchors.centerIn: parent
-    radius: 999
-    width: 1
-    height: 1
-    opacity: 0
-  }
-  NumberAnimation {
-    id: rippleAnimationPart1
-    target: ripple
-    properties: "height,width"
-    from: 0
-    to: Math.max(buttonBackground.width, buttonBackground.height) * 1.25
-    onFinished: rippleAnimationPart2.start()
-  }
-  NumberAnimation {
-    id: rippleAnimationPart2
-    target: ripple
-    properties: "opacity"
-    from: 0.32
-    to: 0
   }
+  
   Connections {
     target: buttonBackground.parent
     onDownChanged: {
       if (buttonBackground.parent.down) {
-        ripple.opacity = 0.32;
-        ripple.height = ripple.width = 1;
-        rippleAnimationPart1.start();
+        ripple.start();
       }
     }
   }

components/RippleEffect.qml

@@ -0,0 +1,34 @@
+import QtQuick 2.0
+
+Rectangle {
+  id: ripple
+  color: "white"
+  anchors.centerIn: parent
+  radius: 999
+  width: 1
+  height: 1
+  opacity: 0
+
+  function start() {
+    ripple.opacity = 0.32;
+    ripple.height = ripple.width = 1;
+    rippleAnimationPart1.start();
+  }
+
+  NumberAnimation {
+    id: rippleAnimationPart1
+    target: ripple
+    properties: "height,width"
+    from: 0
+    to: Math.max(ripple.parent.width, ripple.parent.height) * 1.25
+    onFinished: rippleAnimationPart2.start()
+  }
+
+  NumberAnimation {
+    id: rippleAnimationPart2
+    target: ripple
+    properties: "opacity"
+    from: 0.32
+    to: 0
+  }
+}

delegate/MenuBar.qml

@@ -0,0 +1,38 @@
+import QtQuick 2.0
+import QtQuick.Controls 2.0
+import "qrc:/.styles/Material/components"
+
+Button {
+  property var menu: parent.parent.menus[index]
+  property bool opened: menu.opened
+  text: menu.title
+  padding: 10
+
+  contentItem: Text {
+    anchors.centerIn: parent
+    text: parent.$formatLabel(parent.text.toUpperCase(), parent.display, parent.icon)
+    color: parent.enabled ? "black" : "grey"
+    font.size: 14
+    font.weight: 500
+    font.family: "Roboto"
+    horizontalAlignment: Text.AlignHCenter
+  }
+
+  background: Rectangle {
+    color: opened ? "#d3d3d3" : "transparent"
+    clip: true
+    RippleEffect {
+      id: ripple
+      color: Material.Grey
+    }
+  }
+
+  Connections {
+    target: menu
+    onOpenedChanged: {
+      if (menu.opened) {
+        ripple.start();
+      }
+    }
+  }
+}

material.qrc

@@ -3,7 +3,10 @@
     <file>background/Popup.qml</file>
     <file>background/Button.qml</file>
     <file>background/ScrollBar.qml</file>
+    <file>background/MenuBar.qml</file>
     <file>content/Button.qml</file>
     <file>content/ScrollBar.qml</file>
+    <file>delegate/MenuBar.qml</file>
+    <file>components/RippleEffect.qml</file>
   </qresource>
 </RCC>