make library look nicer, clean up styling a bit as well

Suwayomi · Mar 19, 2022 · 586eab5 · 586eab5
1 parent d1a7d7e
commit 586eab5
Show file tree

Hide file tree

Showing 20 changed files with 125 additions and 62 deletions.
diff --git a/.gitmodules b/.gitmodules
@@ -2,3 +2,6 @@
 	path = libs/SortFilterProxyModel
 	url = https://github.com/CasparKielwein/SortFilterProxyModel.git
   branch = feature/full_integration_to_qt6
+[submodule "libs/QmlBridgeForMaterialDesignIcons"]
+	path = libs/QmlBridgeForMaterialDesignIcons
+	url = [email protected]:mgn-norm/QmlBridgeForMaterialDesignIcons.git
diff --git a/CMakeLists.txt b/CMakeLists.txt
@@ -46,6 +46,8 @@ qt_add_qml_module(qtui
     ${qml_files}
   RESOURCES
     ${icon_files}
+    libs/QmlBridgeForMaterialDesignIcons/materialdesignicons-webfont.ttf
+    libs/QmlBridgeForMaterialDesignIcons/Icon.js
     android/AndroidManifest.xml
     android/res/values/styles.xml
   IMPORTS

diff --git a/libs/QmlBridgeForMaterialDesignIcons b/libs/QmlBridgeForMaterialDesignIcons
diff --git a/src/main.cpp b/src/main.cpp
@@ -4,6 +4,7 @@
 #include <QApplication>
 #include <QCommandLineParser>
 #include <QUrl>
+#include <QFontDatabase>
 
 #include "App.h"
 #include "commandline.h"
@@ -27,6 +28,10 @@ int main(int argc, char *argv[])
   QGuiApplication app(argc, argv);
 #endif
 
+  if (QFontDatabase::addApplicationFont(":/Tachidesk/qtui/libs/QmlBridgeForMaterialDesignIcons/materialdesignicons-webfont.ttf") < 0) {
+    assert(false);
+  }
+
   CommandLine commandline(&app);
   App _app(commandline);
 

diff --git a/src/qml/ChapterInfoList.qml b/src/qml/ChapterInfoList.qml
@@ -60,7 +60,7 @@ Item {
             text: "%1".arg(Qt.formatDate(fetchedAt, "MMM dd"))
             font.pixelSize: 16
             fontSizeMode: Text.Fit
-            color: "white"
+            color: "#F5F5F5"
           }
           Text {
             Layout.fillWidth: true
@@ -69,14 +69,14 @@ Item {
             font.bold: true
             font.pixelSize: 20
             fontSizeMode: Text.Fit
-            color: read ? "grey" : "white"
+            color: read ? "grey" : "#F5F5F5"
           }
           Text {
             Layout.fillWidth: true
             width: parent.width
             text: name
             fontSizeMode: Text.Fit
-            color: "white"
+            color: "#F5F5F5"
           }
         }
 
@@ -113,7 +113,7 @@ Item {
         //    anchors.centerIn: parent
         //    Text {
         //      text: downloaded ? "✅" : "⬇"
-        //      color: "white"
+        //      color: "#F5F5F5"
         //      anchors.centerIn: parent
         //      font.bold: true
         //      font.pixelSize: 20

diff --git a/src/qml/Downloads.qml b/src/qml/Downloads.qml
@@ -8,7 +8,7 @@ import CustomControls 1.0
 
 Rectangle {
 
-  color: "#333333"
+  color: "#212121"
 
   DownloadsModel {
     id: chapterInfoModel
@@ -96,7 +96,7 @@ Rectangle {
             text: "%1".arg(Qt.formatDate(fetchedAt, "MMM dd"))
             font.pixelSize: 16
             fontSizeMode: Text.Fit
-            color: "white"
+            color: "#F5F5F5"
           }
           Text {
             Layout.fillWidth: true
@@ -105,14 +105,14 @@ Rectangle {
             font.bold: true
             font.pixelSize: 20
             fontSizeMode: Text.Fit
-            color: read ? "grey" : "white"
+            color: read ? "grey" : "#F5F5F5"
           }
           Text {
             Layout.fillWidth: true
             width: parent.width
             text: name
             fontSizeMode: Text.Fit
-            color: "white"
+            color: "#F5F5F5"
           }
         }
 

diff --git a/src/qml/Extensions.qml b/src/qml/Extensions.qml
@@ -7,7 +7,7 @@ import SortFilterProxyModel 0.2
 
 Rectangle {
 
-  color: "#333333"
+  color: "#212121"
 
   ExtensionModel {
     id: extensionModel
@@ -42,7 +42,7 @@ Rectangle {
     }
   }
 
-  RowLayout{
+  RowLayout {
       id: searchField
       height: 50
       width: parent.width
@@ -60,7 +60,7 @@ Rectangle {
       TextField {
         id: searchBox
         leftPadding: 0
-        color: "white"
+        color: "#F5F5F5"
         font.pointSize: 12
         Layout.fillWidth: true
         Layout.fillHeight: true
@@ -93,11 +93,11 @@ Rectangle {
         Layout.alignment: Qt.AlignLeft
         horizontalAlignment: Text.AlignLeft
         text: name
-        color: "white"
+        color: "#F5F5F5"
       }
       Text {
         text: lang
-        color: "white"
+        color: "#F5F5F5"
       }
       Button {
         Layout.alignment: Qt.AlignRight

diff --git a/src/qml/IconButton.qml b/src/qml/IconButton.qml
@@ -0,0 +1,37 @@
+import QtQuick
+
+Item {
+  id: base
+  property alias image: icon.text
+  property alias text: label.text
+  signal clicked()
+  Text {
+    id: icon
+    anchors {
+      left: parent.left
+      right: parent.right
+      top: parent.top
+    }
+    font.family: "Material Design Icons"
+    font.pixelSize: 20
+    horizontalAlignment: Text.AlignHCenter
+    verticalAlignment: Text.AlignVCenter
+    color: "#F5F5F5"
+  }
+  Text {
+    id: label
+    anchors {
+      left: parent.left
+      right: parent.right
+      bottom: parent.bottom
+    }
+    font.family: "Roboto"
+    font.pixelSize: 12
+    horizontalAlignment: Text.AlignHCenter
+    color: "#F5F5F5"
+  }
+  MouseArea {
+    anchors.fill: parent
+    onClicked: base.clicked()
+  }
+}
diff --git a/src/qml/Library.qml b/src/qml/Library.qml
@@ -28,7 +28,7 @@ Item {
 
   Rectangle {
     anchors.fill: parent
-    color: "#444444"
+    color: "#424242"
   }
 
   Text {
@@ -38,7 +38,7 @@ Item {
       left: parent.left
       margins: 4
     }
-    color: "white"
+    color: "#F5F5F5"
     text: qsTr("Library")
     font.pixelSize: 24
     font.bold: true
@@ -61,7 +61,7 @@ Item {
     TextField {
       id: searchBox
       leftPadding: 0
-      color: "white"
+      color: "#F5F5F5"
       font.pointSize: 12
       horizontalAlignment: TextInput.AlignRight
       Layout.fillWidth: true

diff --git a/src/qml/LibraryBase.qml b/src/qml/LibraryBase.qml
@@ -27,7 +27,7 @@ Rectangle {
     return grid.cellWidth * 1.333
   }
 
-  color: "#333333"
+  color: "#212121"
 
   GridView {
     id: grid
@@ -82,7 +82,7 @@ Rectangle {
             left: image.left
             right: image.right
           }
-          color: "white"
+          color: "#F5F5F5"
           font.pixelSize: 14
           //font.weight: Font.DemiBold
           wrapMode: Text.WordWrap
@@ -107,7 +107,7 @@ Rectangle {
         Text {
           id: unreadText
           text: unread
-          color: "white"
+          color: "#F5F5F5"
           anchors.centerIn: parent
           font.pixelSize: 14
           font.bold: true

diff --git a/src/qml/MangaDetails.qml b/src/qml/MangaDetails.qml
@@ -266,10 +266,10 @@ Item {
     delegate: Rectangle {
       width: chapterView.width
       height: 60
-      color: "#333333"
+      color: "#212121"
       border {
         width: 1
-        color: "white"
+        color: "#F5F5F5"
       }
       Text {
         anchors {
@@ -280,7 +280,7 @@ Item {
           margins: 4
         }
         text: name
-        color: read ? "grey" : "white"
+        color: read ? "grey" : "#F5F5F5"
         horizontalAlignment: Text.AlignCenter
         verticalAlignment: Text.AlignVCenter
         leftPadding: 12
@@ -313,7 +313,7 @@ Item {
           id: downloadStatus
           visible: progress < 0 || progress >= 100
           anchors.fill: parent
-          color: "white"
+          color: "#F5F5F5"
           text: downloaded ? "✅" : "⬇"
           horizontalAlignment: Text.AlignRight
           verticalAlignment: Text.AlignVCenter
@@ -358,7 +358,7 @@ Item {
     color: "#0492c2"
     Text {
       text: qsTr("▶ Start")
-      color: "white"
+      color: "#F5F5F5"
       anchors.centerIn: parent
       font.pixelSize: 20
       font.bold: true

diff --git a/src/qml/NavigationHome.qml b/src/qml/NavigationHome.qml
@@ -1,48 +1,57 @@
-import QtQuick 2.8
-import QtQuick.Layouts 1.0
-import QtQuick.Controls 2.15
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
 
-Item {
+import "../../libs/QmlBridgeForMaterialDesignIcons/Icon.js" as MdiFont
+
+Rectangle {
+  color: "#424242"
   RowLayout {
     spacing: 0
     anchors {
       fill: parent
       margins: 4
     }
-    Button {
+    IconButton {
       Layout.fillWidth: true
       Layout.fillHeight: true
       text: qsTr("Library")
+      image: MdiFont.Icon.bookOutline
       onClicked: navigatePage(Qt.resolvedUrl("Library.qml"), {replace: true})
     }
-    Button {
+    IconButton {
       Layout.fillWidth: true
       Layout.fillHeight: true
       text: qsTr("Updates")
+      image: MdiFont.Icon.alertDecagramOutline
       onClicked: navigatePage(Qt.resolvedUrl("Updates.qml"), {replace: true})
     }
-    Button {
+    IconButton {
       Layout.fillWidth: true
       Layout.fillHeight: true
       text: qsTr("Sources")
+      image: MdiFont.Icon.compassOutline
       onClicked: navigatePage(Qt.resolvedUrl("Sources.qml"), {replace: true})
     }
-    Button {
+    IconButton {
       Layout.fillWidth: true
       Layout.fillHeight: true
       text: qsTr("Extensions")
+      image: MdiFont.Icon.storeOutline
       onClicked: navigatePage(Qt.resolvedUrl("Extensions.qml"), {replace: true})
     }
-    Button {
+    IconButton {
       Layout.fillWidth: true
       Layout.fillHeight: true
       text: qsTr("Downloads")
+      image: MdiFont.Icon.downloadOutline
       onClicked: navigatePage(Qt.resolvedUrl("Downloads.qml"), {replace: true})
     }
-    Button {
+    IconButton {
       Layout.fillWidth: true
       Layout.fillHeight: true
       text: qsTr("Settings")
+      image: MdiFont.Icon.dotsHorizontal
       onClicked: navigatePage(Qt.resolvedUrl("Settings.qml"), {replace: true})
     }
   }

diff --git a/src/qml/NavigationStack.qml b/src/qml/NavigationStack.qml
@@ -127,7 +127,7 @@ Item {
   Rectangle {
     id: navigation
     visible: navigationVisible
-    color: "#333333"
+    color: "#212121"
     anchors {
       left: parent.left
       right: parent.right