[TASK] UI improvments

harbour-received.pro

@@ -42,6 +42,7 @@ DISTFILES += \
     qml/components/audioplayer/PlayerControlsForm.ui.qml \
     qml/components/contextmenus/FavoritesListContextMenu.qml \
     qml/components/contextmenus/StationsListContextMenu.qml \
+    qml/components/CategoryDelegate.ui.qml \
     qml/components/CustomSearchField.qml \
     qml/components/MenuLabelSmal.ui.qml \
     qml/components/NavigationMenuForm.ui.qml \

qml/components/CategoryDelegate.ui.qml

+import QtQuick 2.6
+import Sailfish.Silica 1.0
+import "../components"
+
+ListItem {
+    id: listItem
+    contentHeight: Theme.itemSizeSmall
+    
+    Label {
+        text: title
+        font.bold: true
+        color: Theme.primaryColor;
+        anchors.fill: parent
+        verticalAlignment: Text.AlignVCenter
+        
+        anchors {
+            left: parent.left
+            leftMargin: Theme.horizontalPageMargin
+            right: parent.right
+            rightMargin: Theme.horizontalPageMargin
+        }
+    }
+}

qml/components/StationDelegate.qml

@@ -18,8 +18,12 @@ ListItem {
     }
 
     Row {
-        anchors.fill: parent
         spacing: Theme.paddingMedium
+        anchors {
+            fill: parent
+            leftMargin: Theme.horizontalPageMargin
+            rightMargin: Theme.horizontalPageMargin
+        }
 
         Image {
             id: image

qml/components/TranslationCreditsDeligate.ui.qml

@@ -5,18 +5,17 @@ import "../components/listmodels/"
 
 ListItem {
     contentHeight: column.height + Theme.paddingLarge
-    
-    anchors {
-        left: parent.left
-        leftMargin: Theme.horizontalPageMargin
-        right: parent.right
-        rightMargin: Theme.horizontalPageMargin
-    }
-    
+
     Column {
         id: column
-        width: parent.width
-        anchors.verticalCenter: parent.verticalCenter
+
+        anchors {
+            left: parent.left
+            leftMargin: Theme.horizontalPageMargin
+            right: parent.right
+            rightMargin: Theme.horizontalPageMargin
+            verticalCenter: parent.verticalCenter
+        }
         
         Label {
             anchors.horizontalCenter: parent.horizontalCenter

qml/pages/BrowseByCategoryPageForm.ui.qml

@@ -35,22 +35,11 @@ Page {
             id: browseByModel
         }
 
-        delegate: ListItem {
-            id: listItem
-            width: parent.width
-            contentHeight: Theme.itemSizeSmall
-
-            Label {
-                text: title
-                font.bold: true
-                color: Theme.primaryColor;
-                anchors.fill: parent
-                anchors.leftMargin: 25
-                anchors.topMargin: 7
-            }
+        delegate: CategoryDelegate {
+            id: categoryItem
 
             Connections {
-                target: listItem
+                target: categoryItem
                 onClicked: browseByListView.currentIndex = index
             }
         }

qml/pages/BrowsePageForm.ui.qml

@@ -28,27 +28,16 @@ Page {
                 }
 
         currentIndex: -1
+
         model: ListModel {
             id: browseModel
         }
 
-        delegate: ListItem {
-            id: listItem
-            anchors.left: parent.left
-            anchors.leftMargin: Theme.paddingMedium
-            anchors.right: parent.right
-            anchors.rightMargin: Theme.paddingMedium
-            contentHeight: Theme.itemSizeSmall
-
-            Label {
-                text: title
-                font.bold: true
-                color: Theme.primaryColor;
-                anchors.fill: parent
-            }
+        delegate: CategoryDelegate {
+            id: categoryItem
 
             Connections {
-                target: listItem
+                target: categoryItem
                 onClicked: browseListView.currentIndex = index
             }
         }

qml/pages/FavoritesPageForm.ui.qml

@@ -46,10 +46,6 @@ Page {
 
         delegate: StationDelegate {
             id: favoritItem
-            anchors.left: parent.left
-            anchors.leftMargin: Theme.paddingMedium
-            anchors.right: parent.right
-            anchors.rightMargin: Theme.paddingMedium
 
             stationThumbnail: stationLogo
             stationTitle: name

qml/pages/SettingsPageForm.ui.qml

@@ -33,7 +33,6 @@ Page {
             id: settingsColumn
             spacing: Theme.paddingSmall
             anchors {
-                margins: Theme.paddingLarge
                 left: parent.left
                 right: parent.right
             }
@@ -48,6 +47,9 @@ Page {
 
             ComboBox {
                 id: playerLayoutComboBox
+                anchors.leftMargin: Theme.horizontalPageMargin
+                anchors.rightMargin: Theme.horizontalPageMargin
+
                 label: qsTr("Player layout")
                 description: qsTr("Sets what style to use for player controls")
 
@@ -75,6 +77,9 @@ Page {
 
             ComboBox {
                 id: apiLanguageComboBox
+                anchors.leftMargin: Theme.horizontalPageMargin
+                anchors.rightMargin: Theme.horizontalPageMargin
+
                 label: qsTr("API Language:")
                 description: qsTr("Sets the endpoint to be used for API calls e.g. radio.net for English and radio.de for German. Also effects Top 100 and translations back from the api")
 
@@ -97,21 +102,26 @@ Page {
 
             SectionHeader {
                 text: qsTr("Advanced Options")
-
             }
 
-            Button {
-                id: buttonResetDb
-                text: qsTr("Reset DB")
-            }
+            Column {
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.leftMargin: Theme.horizontalPageMargin
+                anchors.rightMargin: Theme.horizontalPageMargin
 
-            Text {
-                width: parent.width
-                font.pixelSize: Theme.fontSizeExtraSmall
-                wrapMode: Text.Wrap
-                color: Theme.secondaryColor
-                rightPadding: 20
-                text: qsTr("Removes everything in the database and gives you a clean start. <i><b>Used with caution</b></i>")
+                Button {
+                    id: buttonResetDb
+                    text: qsTr("Reset DB")
+                }
+
+                Text {
+                    width: parent.width
+                    font.pixelSize: Theme.fontSizeExtraSmall
+                    wrapMode: Text.Wrap
+                    color: Theme.secondaryColor
+                    text: qsTr("Removes everything in the database and gives you a clean start. <i><b>Used with caution</b></i>")
+                }
             }
         }
     }

qml/pages/StationsPageForm.ui.qml

@@ -56,10 +56,6 @@ Page {
 
         delegate: StationDelegate {
             id: stationItem
-            anchors.left: parent.left
-            anchors.leftMargin: Theme.paddingMedium
-            anchors.right: parent.right
-            anchors.rightMargin: Theme.paddingMedium
 
             stationThumbnail: thumbnail
             stationTitle: name