Merge branch 'mobilecomponents' of github.com:sebasje/subsurface

14 files changed, 335 insertions, 243 deletions

diff --git a/qt-mobile/qml/DiveDetails.qml b/qt-mobile/qml/DiveDetails.qml
index e69d0e672..bff64537a 100644
--- a/qt-mobile/qml/DiveDetails.qml
+++ b/qt-mobile/qml/DiveDetails.qml
@@ -28,132 +28,146 @@ MobileComponents.Page {
 		qmlProfile.update()
 	}
 
-	Flickable {
-		id: flick
+	ScrollView {
 		anchors.fill: parent
-		contentHeight: content.height
-		clip: true
-		Item {
-			id: content
-			width: flick.width
-			height: contentRect.height + MobileComponents.Units.smallSpacing * 2
-
-			ColumnLayout {
-				anchors {
-					left: parent.left
-					right: parent.right
-					top: parent.top
-					margins: MobileComponents.Units.smallSpacing
-				}
-				spacing: MobileComponents.Units.smallSpacing
-
-
-				GridLayout {
-					id: editorDetails
-					width: parent.width
-					columns: 2
-
-					MobileComponents.Heading {
-						Layout.columnSpan: 2
-						text: "Dive " + number + " (" + date + ")"
-					}
-
-					Item {
-						Layout.columnSpan: 2
-						Layout.fillWidth: true
-						Layout.preferredHeight: qmlProfile.visible ? qmlProfile.height : profileHideButton.height
-						QMLProfile {
-							id: qmlProfile
-							height: MobileComponents.Units.gridUnit * 25
-							anchors {
-								top: parent.top
-								left: parent.left
-								right: parent.right
-							}
-							//Rectangle { color: "green"; opacity: 0.4; anchors.fill: parent } // used for debugging the dive profile sizing, will be removed later
+		Flickable {
+			id: flick
+			anchors.fill: parent
+			contentHeight: content.height
+			clip: true
+			Item {
+				id: content
+				width: flick.width
+				height: childrenRect.height + MobileComponents.Units.smallSpacing * 2
+
+				ColumnLayout {
+					anchors {
+						left: parent.left
+						right: parent.right
+						top: parent.top
+						margins: MobileComponents.Units.smallSpacing
+					}
+					spacing: MobileComponents.Units.smallSpacing
+
+
+					GridLayout {
+						id: editorDetails
+						width: parent.width
+						columns: 2
+
+						MobileComponents.Heading {
+							Layout.columnSpan: 2
+							text: "Dive " + number + " (" + date + ")"
 						}
-						Button {
-							id: profileHideButton
-							anchors {
-								right: parent.right
-								top: parent.top
+
+						Item {
+							Layout.columnSpan: 2
+							Layout.fillWidth: true
+							Layout.preferredHeight: qmlProfile.visible ? qmlProfile.height : profileHideButton.height
+							QMLProfile {
+								id: qmlProfile
+								height: MobileComponents.Units.gridUnit * 25
+								anchors {
+									top: parent.top
+									left: parent.left
+									right: parent.right
+								}
+								//Rectangle { color: "green"; opacity: 0.4; anchors.fill: parent } // used for debugging the dive profile sizing, will be removed later
 							}
-							text: "Hide Dive Profile"
-							onClicked: {
-								qmlProfile.visible = !qmlProfile.visible
-								if (qmlProfile.visible) {
-									text = "Hide Dive Profile"
-								} else {
-									text = "Show Dive Profile"
+							Button {
+								id: profileHideButton
+								anchors {
+									right: parent.right
+									top: parent.top
+								}
+								text: "Hide Dive Profile"
+								onClicked: {
+									qmlProfile.visible = !qmlProfile.visible
+									if (qmlProfile.visible) {
+										text = "Hide Dive Profile"
+									} else {
+										text = "Show Dive Profile"
+									}
 								}
 							}
 						}
-					}
-					Label {
-						text: "Location:"
-					}
-					TextField {
-						id: txtLocation; text: location;
-						Layout.fillWidth: true
-					}
+						MobileComponents.Label {
+							Layout.alignment: Qt.AlignRight
+							text: "Location:"
+						}
+						TextField {
+							id: txtLocation; text: location;
+							Layout.fillWidth: true
+						}
 
-					Label {
-						text: "Air Temp:"
-					}
-					TextField {
-						id: txtAirTemp
-						text: airtemp
-						Layout.fillWidth: true
-					}
+						MobileComponents.Label {
+							Layout.alignment: Qt.AlignRight
+							text: "Air Temp:"
+						}
+						TextField {
+							id: txtAirTemp
+							text: airtemp
+							Layout.fillWidth: true
+						}
 
-					Label {
-						text: "Water Temp:"
-					}
-					TextField {
-						id: txtWaterTemp
-						text: watertemp
-						Layout.fillWidth: true
-					}
+						MobileComponents.Label {
+							Layout.alignment: Qt.AlignRight
+							text: "Water Temp:"
+						}
+						TextField {
+							id: txtWaterTemp
+							text: watertemp
+							Layout.fillWidth: true
+						}
 
-					Label {
-						text: "Suit:"
+						MobileComponents.Label {
+							Layout.alignment: Qt.AlignRight
+							text: "Suit:"
 
-					}
-					TextField {
-						id: txtSuit
-						text: suit
-						Layout.fillWidth: true
-					}
+						}
+						TextField {
+							id: txtSuit
+							text: suit
+							Layout.fillWidth: true
+						}
 
-					Label {
-						text: "Buddy:"
-					}
-					TextField {
-						id: txtBuddy
-						text: buddy
-						Layout.fillWidth: true
-					}
+						MobileComponents.Label {
+							Layout.alignment: Qt.AlignRight
+							text: "Buddy:"
+						}
+						TextField {
+							id: txtBuddy
+							text: buddy
+							Layout.fillWidth: true
+						}
 
-					Label {
-						text: "Dive Master:"
-					}
-					TextField {
-						id: txtDiveMaster
-						text: divemaster
-						Layout.fillWidth: true
-					}
+						MobileComponents.Label {
+							Layout.alignment: Qt.AlignRight
+							text: "Dive Master:"
+						}
+						TextField {
+							id: txtDiveMaster
+							text: divemaster
+							Layout.fillWidth: true
+						}
 
-					Label {
-						text: "Notes:"
+						MobileComponents.Label {
+							Layout.alignment: Qt.AlignRight
+							text: "Notes:"
+						}
+						TextArea {
+							id: txtNotes
+							text: notes
+							focus: true
+							Layout.fillWidth: true
+							Layout.fillHeight: true
+							selectByMouse: true
+							wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
+						}
 					}
-					TextEdit{
-						id: txtNotes
-						text: notes
-						focus: true
-						Layout.fillWidth: true
-						Layout.fillHeight: true
-						selectByMouse: true
-						wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
+					Item {
+						height: MobileComponents.Units.gridUnit * 3
+						width: height // just to make sure the spacer doesn't produce scrollbars, but also isn't null
 					}
 				}
 			}
diff --git a/qt-mobile/qml/DiveList.qml b/qt-mobile/qml/DiveList.qml
index 75f4f809e..77e8802f0 100644
--- a/qt-mobile/qml/DiveList.qml
+++ b/qt-mobile/qml/DiveList.qml
@@ -39,22 +39,14 @@ MobileComponents.Page {
 				stackView.push(detailsWindow)
 			}
 
-			//Layout of the page: (mini profile, dive no, date at the top
-			//And other details at the bottom.
 			Item {
-				x: MobileComponents.Units.smallSpacing
 				width: parent.width - MobileComponents.Units.smallSpacing * 2
-				height: childrenRect.height + MobileComponents.Units.smallSpacing * 2
-				//spacing: MobileComponents.Units.smallSpacing / 2
-				anchors.margins: MobileComponents.Units.smallSpacing
+				height: childrenRect.height - MobileComponents.Units.smallSpacing
 
-				Text {
+				MobileComponents.Label {
 					id: locationText
 					text: location
-					color: MobileComponents.Theme.textColor
-					//font.pointSize: Math.round(MobileComponents.Units.fontMetrics.pointSize * 1.2) // why this doesn't work is a mystery to me, so ...
-					scale: 1.2 // Let's see how this works, otherwise, we'll need the default point size somewhere
-					transformOrigin: Item.TopLeft
+					font.weight: Font.Light
 					elide: Text.ElideRight
 					maximumLineCount: 1 // needed for elide to work at all
 					anchors {
@@ -63,16 +55,14 @@ MobileComponents.Page {
 						right: dateLabel.left
 					}
 				}
-				Text {
+				MobileComponents.Label {
 					id: dateLabel
 					text: date
 					opacity: 0.6
-					color: MobileComponents.Theme.textColor
 					font.pointSize: subsurfaceTheme.smallPointSize
 					anchors {
 						right: parent.right
 						top: parent.top
-						bottomMargin: MobileComponents.Units.smallSpacing / 2
 					}
 				}
 				Row {
@@ -82,36 +72,34 @@ MobileComponents.Page {
 						right: parent.right
 						bottom: numberText.bottom
 					}
-					Text {
+					MobileComponents.Label {
 						text: 'Depth: '
 						opacity: 0.6
-						color: MobileComponents.Theme.textColor
+						font.pointSize: subsurfaceTheme.smallPointSize
 					}
-					Text {
+					MobileComponents.Label {
 						text: depth
 						width: Math.max(MobileComponents.Units.gridUnit * 3, paintedWidth) // helps vertical alignment throughout listview
-						color: MobileComponents.Theme.textColor
+						font.pointSize: subsurfaceTheme.smallPointSize
 					}
-					Text {
+					MobileComponents.Label {
 						text: 'Duration: '
 						opacity: 0.6
-						color: MobileComponents.Theme.textColor
+						font.pointSize: subsurfaceTheme.smallPointSize
 					}
-					Text {
+					MobileComponents.Label {
 						text: duration
-						color: MobileComponents.Theme.textColor
+						font.pointSize: subsurfaceTheme.smallPointSize
 					}
 				}
-				Text {
+				MobileComponents.Label {
 					id: numberText
 					text: "#" + diveNumber
 					color: MobileComponents.Theme.textColor
-					scale: 1.2
-					transformOrigin: Item.BottomRight
-					opacity: 0.4
+					font.pointSize: subsurfaceTheme.smallPointSize
+					opacity: 0.6
 					anchors {
 						right: parent.right
-						topMargin: MobileComponents.Units.smallSpacing
 						top: locationText.bottom
 					}
 				}
diff --git a/qt-mobile/qml/Preferences.qml b/qt-mobile/qml/Preferences.qml
index 8cae95ff0..575474ac8 100644
--- a/qt-mobile/qml/Preferences.qml
+++ b/qt-mobile/qml/Preferences.qml
@@ -20,10 +20,9 @@ Item {
 		anchors.fill: parent
 		anchors.margins: MobileComponents.Units.gridUnit
 
-		Label {
+		MobileComponents.Heading {
 			text: "Cloud credentials"
-			Layout.bottomMargin: MobileComponents.Units.largeSpacing
-			font.pointSize: subsurfaceTheme.titlePointSize
+			Layout.bottomMargin: MobileComponents.Units.largeSpacing / 2
 			Layout.columnSpan: 2
 		}
 
@@ -73,10 +72,10 @@ Item {
 			id: savePassword
 		}
 
-		Label {
+		MobileComponents.Heading {
 			text: "Subsurface GPS data webservice"
-			Layout.bottomMargin: MobileComponents.Units.largeSpacing
-			font.pointSize: subsurfaceTheme.titlePointSize
+			Layout.topMargin: MobileComponents.Units.largeSpacing
+			Layout.bottomMargin: MobileComponents.Units.largeSpacing / 2
 			Layout.columnSpan: 2
 		}
 
diff --git a/qt-mobile/qml/TopBar.qml b/qt-mobile/qml/TopBar.qml
index f07a88e47..27fa00604 100644
--- a/qt-mobile/qml/TopBar.qml
+++ b/qt-mobile/qml/TopBar.qml
@@ -14,29 +14,31 @@ Rectangle {
 	property bool goBack: (stackView.depth > 1)
 
 	color: subsurfaceTheme.accentColor
-	Layout.minimumHeight: MobileComponents.Units.gridUnit * 2 + MobileComponents.Units.largeSpacing
+	Layout.minimumHeight: MobileComponents.Units.gridUnit * 2
 	Layout.fillWidth: true
 	Layout.margins: 0
 	RowLayout {
 		anchors.bottom: topPart.bottom
-		anchors.bottomMargin: MobileComponents.Units.largeSpacing / 2
+		anchors.bottomMargin: MobileComponents.Units.smallSpacing
 		anchors.left: topPart.left
-		anchors.leftMargin: MobileComponents.Units.largeSpacing / 2
+		anchors.leftMargin: MobileComponents.Units.smallSpacing
 		anchors.right: topPart.right
-		anchors.rightMargin: MobileComponents.Units.largeSpacing / 2
+		anchors.rightMargin: MobileComponents.Units.smallSpacing
 		Item {
 			Layout.preferredHeight: subsurfaceLogo.height
+			Rectangle { color: "green"; anchors.fill: parent; }
 			Image {
 				id: subsurfaceLogo
 				source: "qrc:/qml/subsurface-mobile-icon.png"
 				anchors {
 					top: parent.top
+					topMargin: MobileComponents.Units.smallSpacing * -1
 					left: parent.left
 				}
-				width: MobileComponents.Units.gridUnit * 2
+				width: MobileComponents.Units.gridUnit
 				height: width
 			}
-			Text {
+			MobileComponents.Label {
 				text: qsTr("Subsurface")
 				height: subsurfaceLogo.height
 				anchors {
@@ -44,7 +46,7 @@ Rectangle {
 					bottom: subsurfaceLogo.bottom
 					leftMargin: MobileComponents.Units.gridUnit / 2
 				}
-				font.pointSize: MobileComponents.Units.fontMetrics.font.pointSize * 1.5
+				font.weight: Font.Light
 				verticalAlignment: Text.AlignBottom
 				Layout.fillWidth: false
 				color: subsurfaceTheme.accentTextColor
@@ -53,37 +55,5 @@ Rectangle {
 		Item {
 			Layout.fillWidth: true
 		}
-		Button {
-			id: prefsButton
-			// Display back arrow or menu button
-			text: topPart.goBack ? "\u2190" : "\u22ee"
-			anchors.right: parent.right
-			Layout.preferredWidth: MobileComponents.Units.gridUnit * 2
-			Layout.preferredHeight: parent.height
-			style: ButtonStyle {
-				background: Rectangle {
-					implicitWidth: MobileComponents.Units.gridUnit * 2
-					color: subsurfaceTheme.accentColor
-				}
-				label: Text {
-					id: txt
-					color: subsurfaceTheme.accentTextColor
-					font.pointSize: MobileComponents.Units.fontMetrics.font.pointSize * 2
-					font.bold: true
-					text: control.text
-					horizontalAlignment: Text.AlignHCenter
-					verticalAlignment: Text.AlignVCenter
-				}
-			}
-			onClicked: {
-				if (topPart.goBack) {
-					stackView.pop()
-				} else {
-					prefsMenu.popup()
-				}
-			}
-		}
-
 	}
-
 }
diff --git a/qt-mobile/qml/components/Label.qml b/qt-mobile/qml/components/Label.qml
deleted file mode 100644
index 65af7e0db..000000000
--- a/qt-mobile/qml/components/Label.qml
+++ /dev/null
@@ -1,6 +0,0 @@
-import QtQuick 2.5
-import org.kde.plasma.mobilecomponents 0.2 as MobileComponents
-
-Text {
-	color: MobileComponents.Theme.textColor
-}
diff --git a/qt-mobile/qml/main.qml b/qt-mobile/qml/main.qml
index 53d872743..1888a77e8 100644
--- a/qt-mobile/qml/main.qml
+++ b/qt-mobile/qml/main.qml
@@ -11,7 +11,6 @@ import org.kde.plasma.mobilecomponents 0.2 as MobileComponents
 MobileComponents.ApplicationWindow {
 	title: qsTr("Subsurface mobile")
 	property bool fullscreen: true
-	property alias messageText: message.text
 
 	FontMetrics {
 		id: fontMetrics
@@ -107,12 +106,41 @@ MobileComponents.ApplicationWindow {
 			}
 		}
             ]
+		MouseArea {
+			height: childrenRect.height
+			width: MobileComponents.Units.gridUnit * 10
+			CheckBox {
+				//text: "Run location service"
+				id: locationCheckbox
+				anchors {
+					left: parent.left
+					top: parent.top
+				}
+				checked: manager.locationServiceEnabled
+				onCheckedChanged: {
+					manager.locationServiceEnabled = checked;
+				}
+			}
+			MobileComponents.Label {
+				x: MobileComponents.Units.gridUnit * 1.5
+				anchors {
+					left: locationCheckbox.right
+					//leftMargin: units.smallSpacing
+					verticalCenter: locationCheckbox.verticalCenter
+				}
+				text: "Run location service"
+			}
+			onClicked: {
+				print("Click.")
+				locationCheckbox.checked = !locationCheckbox.checked
+			}
+		}
 	}
 
 	QtObject {
 		id: subsurfaceTheme
 		property int titlePointSize: Math.round(fontMetrics.font.pointSize * 1.5)
-		property int smallPointSize: Math.round(fontMetrics.font.pointSize * 0.7)
+		property int smallPointSize: Math.round(fontMetrics.font.pointSize * 0.8)
 		property color accentColor: "#2d5b9a"
 		property color accentTextColor: "#ececec"
 	}
@@ -208,43 +236,9 @@ MobileComponents.ApplicationWindow {
 	}
 
 	property Item stackView: pageStack
-	initialPage: Item {
-		width: parent.width
-		height: parent.height
-
-		ColumnLayout {
-			id: awLayout
-			anchors.fill: parent
-			spacing: MobileComponents.Units.gridUnit / 2
-
-			Rectangle {
-				id: detailsPage
-				Layout.fillHeight: true
-				Layout.fillWidth: true
-
-				DiveList {
-					anchors.fill: detailsPage
-					id: diveDetails
-					color: MobileComponents.Theme.backgroundColor
-				}
-			}
-
-
-			Rectangle {
-				id: messageArea
-				height: childrenRect.height
-				Layout.fillWidth: true
-				color: MobileComponents.Theme.backgroundColor
-
-				Text {
-					id: message
-					color: MobileComponents.Theme.textColor
-					wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
-					styleColor: MobileComponents.Theme.textColor
-					font.pointSize: MobileComponents.Units.smallPointSize
-				}
-			}
-		}
+	initialPage: DiveList {
+		anchors.fill: detailsPage
+		id: diveDetails
 	}
 
 	QMLManager {
diff --git a/qt-mobile/qml/mobile-resources.qrc b/qt-mobile/qml/mobile-resources.qrc
index 971c2e427..19c580da0 100644
--- a/qt-mobile/qml/mobile-resources.qrc
+++ b/qt-mobile/qml/mobile-resources.qrc
@@ -11,7 +11,6 @@
 		<file>ThemeTest.qml</file>
 		<file>StartPage.qml</file>
 		<file>dive.jpg</file>
-		<file alias="Label.qml">components/Label.qml</file>
 		<file alias="subsurface-mobile-icon.png">../../icons/subsurface-mobile-icon.png</file>
 	</qresource>
 	<qresource prefix="/imports">
@@ -35,5 +34,6 @@
 		<file alias="org/kde/plasma/mobilecomponents/private/qmldir">mobilecomponents/private/qmldir</file>
 		<file alias="org/kde/plasma/mobilecomponents/icons/go-next.svg">mobilecomponents/icons/go-next.svg</file>
 		<file alias="org/kde/plasma/mobilecomponents/icons/go-previous.svg">mobilecomponents/icons/go-previous.svg</file>
+		<file alias="org/kde/plasma/mobilecomponents/icons/distribute-horizontal-x.svg">mobilecomponents/icons/distribute-horizontal-x.svg</file>
 	</qresource>
 </RCC>
diff --git a/qt-mobile/qml/mobilecomponents/ApplicationWindow.qml b/qt-mobile/qml/mobilecomponents/ApplicationWindow.qml
index 71980f9e6..220d0524c 100644
--- a/qt-mobile/qml/mobilecomponents/ApplicationWindow.qml
+++ b/qt-mobile/qml/mobilecomponents/ApplicationWindow.qml
@@ -20,6 +20,7 @@
 import QtQuick 2.1
 import QtQuick.Controls 1.3
 import "private"
+import org.kde.plasma.mobilecomponents 0.2
 
 /**
  * A window that provides some basic features needed for all apps
@@ -73,6 +74,9 @@ ApplicationWindow {
         contextDrawer.parent = contentItem.parent;
     }
 
+    width: Units.gridUnit * 25
+    height: Units.gridUnit * 30
+
     property alias actionButton: __actionButton
     ActionButton {
         id: __actionButton
diff --git a/qt-mobile/qml/mobilecomponents/ContextDrawer.qml b/qt-mobile/qml/mobilecomponents/ContextDrawer.qml
index 2e2f95f7e..083254946 100644
--- a/qt-mobile/qml/mobilecomponents/ContextDrawer.qml
+++ b/qt-mobile/qml/mobilecomponents/ContextDrawer.qml
@@ -18,6 +18,7 @@
  */
 
 import QtQuick 2.1
+import QtQuick.Layouts 1.2
 import QtQuick.Controls 1.0 as QtControls
 import org.kde.plasma.mobilecomponents 0.2
 
@@ -63,7 +64,8 @@ OverlayDrawer {
             }
             delegate: ListItem {
                 enabled: true
-                Row {
+                RowLayout {
+                    height: implicitHeight + Units.smallSpacing * 2
                     anchors {
                         left: parent.left
                         margins: Units.largeSpacing
diff --git a/qt-mobile/qml/mobilecomponents/GlobalDrawer.qml b/qt-mobile/qml/mobilecomponents/GlobalDrawer.qml
index 082231c41..638222ada 100644
--- a/qt-mobile/qml/mobilecomponents/GlobalDrawer.qml
+++ b/qt-mobile/qml/mobilecomponents/GlobalDrawer.qml
@@ -49,6 +49,7 @@ OverlayDrawer {
             Layout.minimumHeight: Math.max(headingIcon.height, heading.height) + Units.smallSpacing*2
 
             fillMode: Image.PreserveAspectCrop
+            asynchronous: true
 
             anchors {
                 left: parent.left
@@ -83,7 +84,7 @@ OverlayDrawer {
                 anchors {
                     left: parent.left
                     top: parent.top
-                    margins: Units.smallSpacing
+                    margins: Units.smallSpacing * 2
                 }
                 Icon {
                     id: headingIcon
@@ -123,6 +124,7 @@ OverlayDrawer {
             Layout.maximumWidth: Layout.minimumWidth
             Layout.fillWidth: false
             Layout.fillHeight: true
+            visible: children.length > 0
         }
         Item {
             Layout.minimumWidth: Units.smallSpacing
@@ -138,22 +140,26 @@ OverlayDrawer {
                 model: actions
                 property int level: 0
 
+                interactive: contentHeight > height
+
                 footer: ListItem {
                     visible: level > 0
                     enabled: true
                     RowLayout {
+                        height: implicitHeight + Units.smallSpacing * 2
                         anchors {
                             left: parent.left
                         }
                         Icon {
-                            Layout.maximumWidth: height
+                            Layout.minimumWidth: height
+                            Layout.maximumWidth: Layout.minimumWidth
                             Layout.fillHeight: true
                             source: "go-previous"
                         }
                         Label {
-							// Weird, this doesn't work
+                            // Weird, this doesn't work
                             //text: (typeof(i18n) != undefined) ? i18n("Back") : "Back"
-							text: "Back"
+                            text: "Back"
                         }
                     }
                     onClicked: pageRow.pop()
@@ -161,6 +167,7 @@ OverlayDrawer {
                 delegate: ListItem {
                     enabled: true
                     RowLayout {
+                        height: implicitHeight + Units.smallSpacing*2
                         anchors {
                             left: parent.left
                             right: parent.right
@@ -175,7 +182,8 @@ OverlayDrawer {
                             text: modelData.text
                         }
                         Icon {
-                            Layout.maximumWidth: height
+                            Layout.minimumWidth: height
+                            Layout.maximumWidth: Layout.minimumWidth
                             Layout.fillHeight: true
                             source: "go-next"
                             visible: modelData.children != undefined
diff --git a/qt-mobile/qml/mobilecomponents/Icon.qml b/qt-mobile/qml/mobilecomponents/Icon.qml
index d5b253235..b28624dbf 100644
--- a/qt-mobile/qml/mobilecomponents/Icon.qml
+++ b/qt-mobile/qml/mobilecomponents/Icon.qml
@@ -19,6 +19,7 @@
 
 import QtQuick 2.0
 import QtGraphicalEffects 1.0
+import org.kde.plasma.mobilecomponents 0.2
 
 Item {
     id: root
@@ -26,13 +27,13 @@ Item {
     property alias smooth: image.smooth
     property bool active: false
     property bool valid: image.status == Image.Ready 
-    implicitWidth: image.sourceSize.width
-    implicitHeight: image.sourceSize.height
+    implicitWidth: Math.min(image.sourceSize.width, Units.iconSizes.medium)
+    implicitHeight: Math.min(image.sourceSize.height, Units.iconSizes.medium)
 
     Image {
         id: image
         anchors.fill: parent
-        source: root.source != "" ? "icons/" + root.source + ".svg" : root.source
+        source: root.source != "" ? (root.source.indexOf(".") === -1 ? "icons/" + root.source + ".svg" : root.source) : root.source
     }
     GammaAdjust {
         anchors.fill: image
diff --git a/qt-mobile/qml/mobilecomponents/Theme.qml b/qt-mobile/qml/mobilecomponents/Theme.qml
index fd8c49ba2..402caedb6 100644
--- a/qt-mobile/qml/mobilecomponents/Theme.qml
+++ b/qt-mobile/qml/mobilecomponents/Theme.qml
@@ -41,12 +41,12 @@ QtObject {
     property color visitedLinkColor: "#2196F3"
 
     property color buttonTextColor: Qt.rgba(0,0,0, 0.54)
-    property color buttonBackgroundColor: "#f3f3f3"
+    property color buttonBackgroundColor: "#eff0f1"
     property color buttonHoverColor: "#2196F3"
     property color buttonFocusColor: "#2196F3"
 
     property color viewTextColor: Qt.rgba(0,0,0, 0.54)
-    property color viewBackgroundColor: "#f3f3f3"
+    property color viewBackgroundColor: "#fcfcfc"
     property color viewHoverColor: "#2196F3"
     property color viewFocusColor: "#2196F3"
 
diff --git a/qt-mobile/qml/mobilecomponents/icons/distribute-horizontal-x.svg b/qt-mobile/qml/mobilecomponents/icons/distribute-horizontal-x.svg
new file mode 100644
index 000000000..1a14480d7
--- /dev/null
+++ b/qt-mobile/qml/mobilecomponents/icons/distribute-horizontal-x.svg
@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="22"
+   height="22"
+   id="svg3813"
+   version="1.1"
+   inkscape:version="0.48+devel r"
+   sodipodi:docname="distribute-horizontal-x.svg">
+  <defs
+     id="defs3815" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="26.930216"
+     inkscape:cx="9.6140302"
+     inkscape:cy="11.263762"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1366"
+     inkscape:window-height="668"
+     inkscape:window-x="-2"
+     inkscape:window-y="23"
+     inkscape:window-maximized="1"
+     inkscape:showpageshadow="false">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4109" />
+    <sodipodi:guide
+       position="2.0000072,19.999993"
+       orientation="18,0"
+       id="guide4115" />
+    <sodipodi:guide
+       position="2.0000072,1.9999929"
+       orientation="0,18"
+       id="guide4117" />
+    <sodipodi:guide
+       position="20.000007,1.9999929"
+       orientation="-18,0"
+       id="guide4119" />
+    <sodipodi:guide
+       position="20.000007,19.999993"
+       orientation="0,-18"
+       id="guide4121" />
+    <sodipodi:guide
+       position="3.0000072,18.999993"
+       orientation="16,0"
+       id="guide4123" />
+    <sodipodi:guide
+       position="3.0000072,2.9999929"
+       orientation="0,16"
+       id="guide4125" />
+    <sodipodi:guide
+       position="19.000007,2.9999929"
+       orientation="-16,0"
+       id="guide4127" />
+    <sodipodi:guide
+       position="19.000007,18.999993"
+       orientation="0,-16"
+       id="guide4129" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata3818">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Capa 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-378.85714,-540.07647)">
+    <path
+       style="opacity:1;fill:#4d4d4d;fill-opacity:1;stroke:none"
+       d="M 3 7 L 3 15 L 8 15 L 8 7 L 3 7 z M 14 7 L 14 15 L 19 15 L 19 7 L 14 7 z M 4 8 L 7 8 L 7 14 L 4 14 L 4 8 z M 15 8 L 18 8 L 18 14 L 15 14 L 15 8 z M 9 9 L 9 13 L 10 13 L 10 12 L 12 12 L 12 13 L 13 13 L 13 9 L 12 9 L 12 10 L 10 10 L 10 9 L 9 9 z "
+       transform="translate(378.85714,540.07647)"
+       id="rect4109" />
+  </g>
+</svg>
diff --git a/qt-mobile/qml/mobilecomponents/private/ActionButton.qml b/qt-mobile/qml/mobilecomponents/private/ActionButton.qml
index bfc8c5875..4dbea98b8 100644
--- a/qt-mobile/qml/mobilecomponents/private/ActionButton.qml
+++ b/qt-mobile/qml/mobilecomponents/private/ActionButton.qml
@@ -35,6 +35,15 @@ MouseArea {
         minimumX: contextDrawer ? 0 : parent.width/2 - width/2
         maximumX: globalDrawer ? parent.width : parent.width/2 - width/2
     }
+    function toggle() {
+        showAnimation.running = false;
+        if (transform[0].y < button.height) {
+            showAnimation.to = button.height;
+        } else {
+            showAnimation.to = 0;
+        }
+        showAnimation.running = true;
+    }
 
     transform: Translate {}
     onReleased: {
@@ -88,6 +97,13 @@ MouseArea {
         }
     }
 
+    NumberAnimation {
+        id: showAnimation
+        target: button.transform[0]
+        properties: "y"
+        duration: Units.longDuration
+        easing.type: Easing.InOutQuad
+    }
     Item {
         id: background
         anchors {
@@ -140,8 +156,8 @@ MouseArea {
     DropShadow {
         anchors.fill: background
         horizontalOffset: 0
-        verticalOffset: Units.smallSpacing/2
-        radius: Units.gridUnit / 2.4
+        verticalOffset: Units.smallSpacing/3
+        radius: Units.gridUnit / 3.5
         samples: 16
         color: button.pressed ? "transparent" : Qt.rgba(0, 0, 0, 0.5)
         source: background