Round grid and space results in QML search screen

Bionus · Nov 2, 2020 · 3d06c37 · 3d06c37
1 parent 0f83b05
commit 3d06c37
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 5 deletions.
diff --git a/src/gui-qml/src/components/SearchScreen.qml b/src/gui-qml/src/components/SearchScreen.qml
@@ -1,5 +1,6 @@
 import QtQml 2.12
 import QtQuick 2.12
+import QtGraphicalEffects 1.0
 import QtQuick.Controls 2.5
 import QtQuick.Controls.Material 2.12
 import QtQuick.Layouts 1.12
@@ -15,6 +16,8 @@ Page {
     property string site
     property string query
     property var results
+    property int thumbnailsSpacing: 0
+    property int thumbnailsRadius: 0
 
     function load(tag) {
         if (tag) {
@@ -70,20 +73,39 @@ Page {
             Layout.fillWidth: true
             contentHeight: resultsLayout.contentHeight
             clip: true
+            padding: thumbnailsSpacing / 2
 
             ColumnFlow {
                 id: resultsLayout
+
                 anchors.fill: parent
                 columns: gSettings.resultsColumnCount.value
                 model: results
 
                 onColumnsChanged: resultsRefresher.restart()
 
-                delegate: Image {
-                    source: modelData.previewUrl
-                    fillMode: Image.PreserveAspectFit
-
-                    onHeightChanged: resultsRefresher.restart()
+                delegate: Item {
+                    height: img.height + thumbnailsSpacing
+
+                    Image {
+                        id: img
+                        source: modelData.previewUrl
+                        fillMode: Image.PreserveAspectFit
+                        anchors.centerIn: parent
+                        width: Math.min(img.implicitWidth, parent.width) - thumbnailsSpacing
+
+                        onHeightChanged: resultsRefresher.restart()
+
+                        layer.enabled: thumbnailsRadius > 0
+                        layer.effect: OpacityMask {
+                            maskSource: Rectangle {
+                                anchors.centerIn: parent
+                                width: img.width
+                                height: img.height
+                                radius: thumbnailsRadius
+                            }
+                        }
+                    }
 
                     MouseArea {
                         anchors.fill: parent

diff --git a/src/gui-qml/src/components/settings/Settings.qml b/src/gui-qml/src/components/settings/Settings.qml
@@ -17,6 +17,16 @@ Item {
         def: 3
         obj: root.obj
     }
+    property Setting resultsAddSpaceBetweenImages: Setting {
+        key: "resultsAddSpaceBetweenImages"
+        def: true
+        obj: root.obj
+    }
+    property Setting resultsRoundImages: Setting {
+        key: "resultsRoundImages"
+        def: true
+        obj: root.obj
+    }
     property Setting save_filename: Setting {
         key: "Save/filename"
         def: "%md5%.%ext%"

diff --git a/src/gui-qml/src/components/settings/pages/InterfaceSettingsPage.qml b/src/gui-qml/src/components/settings/pages/InterfaceSettingsPage.qml
@@ -30,6 +30,18 @@ ColumnLayout {
         setting: gSettings.resultsColumnCount
         Layout.fillWidth: true
     }
+    CheckBoxSetting {
+        name: qsTr("Spaced grid")
+        subtitle: qsTr("Add space between thumbnails.")
+        setting: gSettings.resultsAddSpaceBetweenImages
+        Layout.fillWidth: true
+    }
+    CheckBoxSetting {
+        name: qsTr("Rounded grid")
+        subtitle: qsTr("Slightly round thumbnails.")
+        setting: gSettings.resultsRoundImages
+        Layout.fillWidth: true
+    }
 
     SettingTitle {
         Layout.fillWidth: true

diff --git a/src/gui-qml/src/main-screen.qml b/src/gui-qml/src/main-screen.qml
@@ -63,6 +63,8 @@ ApplicationWindow {
                 site: window.site
                 query: backend.query
                 results: backend.results
+                thumbnailsSpacing: gSettings.resultsAddSpaceBetweenImages.value ? 8 : 0
+                thumbnailsRadius: gSettings.resultsRoundImages.value ? 10 : 0
 
                 onOpenSources: mainStackView.push(sourcesScreen)
             }