Change music widget a bit, add flickable for widgets

Author: cuzbog

qml/panel/NotificationCenter.qml

@@ -1,8 +1,26 @@
+/*
+ * Papyros Shell - The desktop shell for Papyros following Material Design
+ * Copyright (C) 2015 Michael Spencer
+ *               2015 Bogdan Cuza
+ *               2015 Ricardo Vieira
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
 import QtQuick 2.0
 import Material 0.1
 import Material.Extras 0.1
-import Material.ListItems 0.1 as ListItem
-import Material.Desktop 0.1
 
 View {
     fullHeight: true
@@ -28,71 +46,97 @@ View {
 
     property var widgets: ["Music"]
 
-    Column {
+    View {
+        id: view
+        height: label.height + units.dp(16)
         width: parent.width
+        backgroundColor: "#fafafa"
+        z: 10
 
-        spacing: units.dp(16)
-
-        View {
-            id: view
-            height: label.height + units.dp(16)
-            width: parent.width
-
-            Label {
-                id: label
-                anchors {
-                    left: parent.left
-                    right: parent.right
-                    bottom: parent.bottom
-                    leftMargin: units.dp(16)
-                    rightMargin: units.dp(16)
-                }
-
-                text:  Qt.formatDateTime(now, "dddd',<br>'MMMM d'<sup>%1</sup>'"
-                        .arg(Utils.nth(now.getDate())))
-
-                style: "title"
-                font.pixelSize: units.dp(30)
-                textFormat: Text.RichText
+        Label {
+            id: label
+            anchors {
+                left: parent.left
+                right: parent.right
+                bottom: parent.bottom
+                leftMargin: units.dp(16)
+                rightMargin: units.dp(16)
             }
-        }
 
-        Repeater {
-            model: widgets
-            delegate: Loader {
-                source: Qt.resolvedUrl("../widgets/%1.qml".arg(modelData))
+            text:  Qt.formatDateTime(now, "dddd',<br>'MMMM d'<sup>%1</sup>'"
+                    .arg(Utils.nth(now.getDate())))
 
-                anchors {
-                    left: parent.left
-                    right: parent.right
-                    margins: units.dp(16)
-                }
-            }
+            style: "title"
+            font.pixelSize: units.dp(30)
+            textFormat: Text.RichText
         }
     }
 
-    Item {
+    Flickable {
         anchors {
+            top: view.bottom
             left: parent.left
             right: parent.right
-            bottom: parent.bottom
-            margins: units.dp(16)
+            bottom: silentMode.bottom
+            topMargin: units.dp(16)
         }
+        z: 5
+        contentHeight: widgetCol.height
+        interactive: contentHeight > height
+        boundsBehavior: Flickable.StopAtBounds
 
-        height: units.dp(30)
+        Column {
+            id: widgetCol
 
-        Label {
-            anchors.verticalCenter: parent.verticalCenter
+            width: parent.width
 
-            text: "Silent mode"
+            Repeater {
+                model: widgets
+                delegate: Loader {
+                    source: Qt.resolvedUrl("../widgets/%1.qml".arg(modelData))
+
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                        margins: units.dp(16)
+                    }
+                }
+            }
         }
+    }
+
+    Rectangle {
+        id: silentMode
+
+        anchors.bottom: parent.bottom
+        height: units.dp(46)
+        width: parent.width
+        color: "#fafafa"
+        z: 10
+
+        Rectangle {
+            anchors {
+                left: parent.left
+                right: parent.right
+                bottom: parent.bottom
+                margins: units.dp(16)
+            }
+
+            height: units.dp(30)
 
-        Switch {
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.right: parent.right
+            Label {
+                anchors.verticalCenter: parent.verticalCenter
 
-            checked: config.silentMode
-            onCheckedChanged: config.silentMode = checked
+                text: "Silent mode"
+            }
+
+            Switch {
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.right: parent.right
+
+                checked: config.silentMode
+                onCheckedChanged: config.silentMode = checked
+            }
         }
     }
 }

qml/widgets/Music.qml

@@ -1,21 +1,33 @@
+/*
+ * Papyros Shell - The desktop shell for Papyros following Material Design
+ * Copyright (C) 2015 Michael Spencer
+ *               2015 Bogdan Cuza
+ *               2015 Ricardo Vieira
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
 import QtQuick 2.0
 import Material 0.1
-import Material.ListItems 0.1 as ListItem
 import Material.Desktop 0.1
-import Material.Extras 0.1
 
 Column {
     spacing: units.dp(16)
 
     Repeater {
         model: musicPlayer.playerList
 
-        /*
-    if the playback state is Stopped
-    a player can't play, pause, next or previous
-    so you should replace it with an open button
-    and use the raise function,
-    */
         delegate: Card {
             width: parent.width
 
@@ -96,26 +108,41 @@ Column {
                     }
                 }
 
+                //TODO: Add a slider
+
                 Row {
                     anchors.horizontalCenter: parent.horizontalCenter
 
                     spacing: units.dp(10)
+                    opacity: playbackStatus == "Stopped" ? 0 : 1
+                    height: playbackStatus == "Stopped" ? 0 : playPauseBtn.height
 
                     IconButton {
                         name: "av/skip_previous"
                         onClicked: previous()
+                        enabled: canGoPrevious
                     }
 
                     IconButton {
-                        name: "av/pause"
+                        id: playPauseBtn
+
+                        name: playbackStatus == "Paused" ? "av/play_arrow" : "av/pause"
                         onClicked: playPause()
                     }
 
                     IconButton {
                         name: "av/skip_next"
                         onClicked: next()
+                        enabled: canGoNext
                     }
                 }
+
+                Button {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    opacity: playbackStatus == "Stopped" ? 1 : 0
+                    text: "Open"
+                    onClicked: raise()
+                }
             }
         }
     }