Create meter menu dynamically, use TcuteButtons for meter and clef buttons -...

Create meter menu dynamically, use TcuteButtons for meter and clef buttons - highlight colors finally are look good

src/nootka.qrc

@@ -37,6 +37,7 @@
     <file alias="ClefDrawer.qml">qml/score/ClefDrawer.qml</file>
     <file alias="KeySignature.qml">qml/score/KeySignature.qml</file>
     <file alias="Meter.qml">qml/score/Meter.qml</file>
+    <file alias="MeterDrawer.qml">qml/score/MeterDrawer.qml</file>
     <file alias="Tie.qml">qml/score/Tie.qml</file>
     <file alias="AddLine.qml">qml/score/AddLine.qml</file>
     <file alias="NoteCursor.qml">qml/score/NoteCursor.qml</file>

src/qml/score/Meter.qml

@@ -11,8 +11,6 @@ import Score 1.0
 Text {
   id: meter
 
-  property Drawer meterDrawer
-
   Connections {
       target: score
       onMeterChanged: text = Noo.meter(score.meter).symbol()
@@ -35,50 +33,17 @@ Text {
       }
   }
 
-  Component {
-    id: meterComp
-    Drawer { // meter menu
-      visible: true
-      width: nootkaWindow.width / 4; height: nootkaWindow.height
-
-      Grid {
-        width: parent.width
-        anchors.margins: Noo.fontSize() / 2
-        columns: 2
-        spacing: Noo.fontSize() / 2
-
-        Repeater {
-          model: 12
-          Button {
-            height: Noo.fontSize() * 5
-            width: parent.width / 2.1
-            Text {
-                id: buttText
-                anchors.horizontalCenter: parent.horizontalCenter
-                y: -Noo.fontSize() * 3.5
-                font { family: "Scorek"; pixelSize: Noo.fontSize() * 4 }
-                text: Noo.meter(Math.pow(2, index)).symbol()
-                color: activPal.text
-            }
-            onClicked: {
-                score.scoreObj.setMeter(Math.pow(2, index))
-                meter.text = buttText.text
-                meterDrawer.close()
-            }
-          }
-        }
-      }
-    }
-  }
-
   MouseArea {
       anchors.fill: parent
       enabled: !score.readOnly
+      property Drawer meterDrawer
       onClicked: {
         if (meterDrawer)
             meterDrawer.open()
-        else 
-          meterDrawer = meterComp.createObject(meter)
+        else {
+            var c = Qt.createComponent("qrc:/MeterDrawer.qml")
+            meterDrawer = c.createObject(meter)
+        }
       }
   }
 }

src/qml/score/MeterDrawer.qml

+/** This file is part of Nootka (http://nootka.sf.net)               *
+ * Copyright (C) 2017 by Tomasz Bojczuk (seelook@gmail.com)          *
+ * on the terms of GNU GPLv3 license (http://www.gnu.org/licenses)   */
+
+import QtQuick 2.9
+import QtQuick.Controls 2.2
+
+import Score 1.0
+
+
+Drawer { // meter menu
+  visible: true
+  width: nootkaWindow.width / 4; height: nootkaWindow.height
+  
+  Flickable {
+    id: flick
+    anchors.fill: parent
+    clip: true
+    contentHeight: childrenRect.height
+    Grid {
+      width: parent.width
+      leftPadding: Noo.fontSize() / 4
+      topPadding: Noo.fontSize() / 2
+      columns: 2
+      spacing: Noo.fontSize() / 2
+      
+      Repeater {
+        model: 12
+        TcuteButton {
+          height: Noo.fontSize() * 5
+          width: parent.width / 2.1
+          color: checked || pressed ? activPal.highlight : activPal.button
+          checkable: true
+          checked: score.scoreObj.meter === Math.pow(2, index)
+          Text {
+            id: buttText
+            anchors.horizontalCenter: parent.horizontalCenter
+            y: -Noo.fontSize() * 3.5
+            font { family: "Scorek"; pixelSize: Noo.fontSize() * 4 }
+            text: Noo.meter(Math.pow(2, index)).symbol()
+            color: pressed ? activPal.highlightedText : activPal.text
+          }
+          onClicked: {
+            score.scoreObj.setMeter(Math.pow(2, index))
+            meter.text = buttText.text
+            close()
+          }
+        }
+      }
+    }
+  }
+}

src/qml/shared/ClefMenu.qml

@@ -14,6 +14,8 @@ Grid {
   width: parent.width
   height: childrenRect.height
   spacing: Noo.fontSize() / 4
+  leftPadding: Noo.fontSize() / 4
+  topPadding: Noo.fontSize() / 2
   horizontalItemAlignment: Grid.AlignHCenter
 
   property int selClef
@@ -26,7 +28,7 @@ Grid {
 
   onSelClefChanged: {
     for (var c = 0; c < 7; ++c) {
-      clefButtons.itemAt(c).highlighted = (clefNr[c] === selClef)
+      clefButtons.itemAt(c).checked = (clefNr[c] === selClef)
       if (clefNr[c] === selClef)
         selId = c
     }
@@ -56,8 +58,8 @@ Grid {
   Repeater {
     id: clefButtons
     model: 7
-    Button {
-      width: (clefMenu.width * 0.98) / clefMenu.columns
+    TcuteButton {
+      width: (clefMenu.width * 0.98 - Noo.fontSize() / 4) / clefMenu.columns
       height: Noo.fontSize() * (index === 6 ? 11.0 : 7.5)
       visible: index !== 0 || score.meter !== Tmeter.NoMeter
       onClicked: {