GridViewItem: Improve the display of label borders

desktop/desktopview.cpp

@@ -18,6 +18,7 @@
  */
 
 #include "desktopview.h"
+#include "helper/thumbnailer.h"
 
 #include <QQmlEngine>
 #include <QQmlContext>
@@ -40,6 +41,7 @@ DesktopView::DesktopView(QQuickView *parent)
     KWindowSystem::setState(winId(), NET::KeepBelow);
 
     engine()->rootContext()->setContextProperty("desktopView", this);
+    engine()->addImageProvider("thumbnailer", new Thumbnailer());
 
     setScreen(qApp->primaryScreen());
     setResizeMode(QQuickView::SizeRootObjectToView);

qml/Desktop/main.qml

@@ -75,6 +75,8 @@ Item {
         rightMargin: desktopView.screenRect.width - (desktopView.screenAvailableRect.x + desktopView.screenAvailableRect.width)
         bottomMargin: desktopView.screenRect.height - (desktopView.screenAvailableRect.y + desktopView.screenAvailableRect.height)
 
+        flow: GridView.FlowTopToBottom
+
         delegate: FolderGridItem {}
     }
 

qml/FolderGridItem.qml

@@ -19,6 +19,10 @@ Item {
     property bool hovered: GridView.view.hoveredItem === control
     property bool selected: model.selected
     property bool blank: model.blank
+    property var fileName: model.fileName
+
+    property color hoveredColor: Meui.Theme.darkMode ? Qt.lighter(Meui.Theme.backgroundColor, 1.1)
+                                                     : Qt.darker(Meui.Theme.backgroundColor, 1.05)
 
     ColumnLayout {
         anchors.fill: parent
@@ -42,9 +46,9 @@ Item {
 
             Image {
                 id: _image
-                anchors.fill: parent
+                anchors.centerIn: parent
-                anchors.leftMargin: Meui.Units.smallSpacing
+                height: parent.height
-                anchors.rightMargin: Meui.Units.smallSpacing
+                width: parent.width
 
                 fillMode: Image.PreserveAspectFit
                 visible: status === Image.Ready
@@ -74,22 +78,23 @@ Item {
         }
 
         Item {
+            id: _labelItem
             Layout.fillHeight: true
             Layout.preferredHeight: Math.min(_label.implicitHeight, height)
             Layout.fillWidth: true
 
             Rectangle {
-                width: Math.min(_label.implicitWidth + Meui.Units.smallSpacing, parent.width)
+                width: _label.paintedWidth + Meui.Units.smallSpacing * 2
-                height: Math.min(_label.implicitHeight + Meui.Units.smallSpacing, parent.height)
+                height: _label.paintedHeight
-                anchors.centerIn: parent
+                x: (_labelItem.width - width + Meui.Units.smallSpacing) / 2
-                color: selected ? Meui.Theme.highlightColor : "transparent"
+                color: selected ? Meui.Theme.highlightColor : hovered ? hoveredColor : "transparent"
                 radius: Meui.Theme.smallRadius
             }
 
             Label {
                 id: _label
                 horizontalAlignment: Qt.AlignHCenter
-                verticalAlignment: Qt.AlignVCenter
+                verticalAlignment: Qt.AlignTop
                 anchors.fill: parent
                 anchors.margins: 0
                 elide: Qt.ElideRight

qml/FolderGridView.qml

@@ -78,9 +78,7 @@ GridView {
 
     clip: true
     currentIndex: -1
-    ScrollBar.vertical: ScrollBar {
+    ScrollBar.vertical: ScrollBar { }
-        bottomPadding: Meui.Theme.mediumRadius
-    }
 
     onPressXChanged: {
         cPress = mapToItem(control.contentItem, pressX, pressY)
@@ -110,53 +108,30 @@ GridView {
         enabled: true
         z: -1
 
-        onDoubleClicked: {
-            if (mouse.button === Qt.LeftButton && control.pressedItem)
-                folderModel.openSelected()
-        }
-
         onPressed: {
             control.forceActiveFocus()
 
-//            if (mouse.source === Qt.MouseEventSynthesizedByQt) {
-//                var index = control.indexAt(mouse.x, mouse.y)
-//                var indexItem = control.itemAtIndex(index)
-//                if (indexItem && indexItem.iconArea) {
-//                    control.currentIndex = index
-//                    hoveredItem = indexItem
-//                } else {
-//                    hoveredItem = null
-//                }
-//            }
-
             pressX = mouse.x
             pressY = mouse.y
 
-            if (!hoveredItem || hoveredItem.blank) {
+            // 如果找到 hoveredItem 则点击后设置成为 pressedItem
-                if (!control.ctrlPressed) {
+            if (hoveredItem) {
-                    control.currentIndex = -1
-                    previouslySelectedItemIndex = -1
-                    folderModel.clearSelection()
-                }
-
-                if (mouse.buttons & Qt.RightButton) {
-                    clearPressState()
-                    folderModel.openContextMenu(null, mouse.modifiers)
-                    mouse.accepted = true
-                }
-            } else {
                 pressedItem = hoveredItem
 
-                var pos = mapToItem(hoveredItem, mouse.x, mouse.y)
+                // 这里更改 currentIndex 会影响到范围选择
+                if (!control.shiftPressed)
+                    currentIndex = pressedItem.index
 
+                // Shift 处理, 选择区域
                 if (control.shiftPressed && control.currentIndex !== -1) {
                     folderModel.setRangeSelected(control.anchorIndex, hoveredItem.index)
                 } else {
+                    // Ctrl 处理
                     if (!control.ctrlPressed && !folderModel.isSelected(hoveredItem.index)) {
-                        previouslySelectedItemIndex = -1
                         folderModel.clearSelection()
                     }
 
+                    // Item 选择
                     if (control.ctrlPressed) {
                         folderModel.toggleSelected(hoveredItem.index)
                     } else {
@@ -164,8 +139,20 @@ GridView {
                     }
                 }
 
-                control.currentIndex = hoveredItem.index
+                // 弹出 Item 菜单
+                if (mouse.buttons & Qt.RightButton) {
+                    clearPressState()
+                    folderModel.openContextMenu(null, mouse.modifiers)
+                    mouse.accepted = true
+                }
+            } else {
+                // 处理空白区域点击
+                if (!control.ctrlPressed) {
+                    control.currentIndex = -1
+                    folderModel.clearSelection()
+                }
 
+                // 弹出文件夹菜单
                 if (mouse.buttons & Qt.RightButton) {
                     clearPressState()
                     folderModel.openContextMenu(null, mouse.modifiers)
@@ -178,36 +165,30 @@ GridView {
             control.ctrlPressed = (mouse.modifiers & Qt.ControlModifier)
             control.shiftPressed = (mouse.modifiers & Qt.ShiftModifier)
 
-            var cPos = mapToItem(control.contentItem, mouse.x, mouse.y)
+            var index = control.indexAt(mouse.x + control.contentX,
-            var item = control.itemAt(cPos.x, cPos.y)
+                                        mouse.y + control.contentY)
-            var leftEdge = Math.min(control.contentX, control.originX)
+            var indexItem = control.itemAtIndex(index)
 
-            if (!item || item.blank) {
+            // Set hoveredItem.
-                if (control.hoveredItem/* && !root.containsDrag*/) {
+            if (indexItem) {
-                    control.hoveredItem = null
+                var iconPos = mapToItem(indexItem.iconArea, mouse.x, mouse.y)
-                }
+                var textPos = mapToItem(indexItem.textArea, mouse.x, mouse.y)
-            } else {
-                var fPos = mapToItem(item.iconArea, mouse.x, mouse.y)
 
-                if (fPos.x < 0 || fPos.y < 0 || fPos.x > item.iconArea.width || fPos.y > item.iconArea.height) {
+                if (iconPos.x < 0 || iconPos.y < 0
+                        || iconPos.x > indexItem.iconArea.paintedWidth
+                        || iconPos.y > indexItem.iconArea.paintedHeight + indexItem.textArea.paintedHeight) {
                     control.hoveredItem = null
                 } else {
-                    control.hoveredItem = item
+                    control.hoveredItem = indexItem
                 }
-            }
+            } else {
-
+                control.hoveredItem = null
-            // Trigger autoscroll.
-            if (pressX != -1) {
-                control.scrollLeft = (mouse.x <= 0 && control.contentX > leftEdge);
-                control.scrollRight = (mouse.x >= control.width
-                    && control.contentX < control.contentItem.width - control.width);
-                control.scrollUp = (mouse.y <= 0 && control.contentY > 0);
-                control.scrollDown = (mouse.y >= control.height
-                    && control.contentY < control.contentItem.height - control.height);
             }
 
             // Update rubberband geometry.
             if (control.rubberBand) {
+                var cPos = mapToItem(control.contentItem, mouse.x, mouse.y)
+                var leftEdge = Math.min(control.contentX, control.originX)
                 var rB = control.rubberBand
 
                 if (cPos.x < cPress.x) {
@@ -215,7 +196,7 @@ GridView {
                     rB.width = Math.abs(rB.x - cPress.x)
                 } else {
                     rB.x = cPress.x
-                    var ceil = Math.max(control.width, control.contentItem.width) + leftEdge
+                    const ceil = Math.max(control.width, control.contentItem.width) + leftEdge
                     rB.width = Math.min(ceil - rB.x, Math.abs(rB.x - cPos.x))
                 }
 
@@ -224,7 +205,7 @@ GridView {
                     rB.height = Math.abs(rB.y - cPress.y)
                 } else {
                     rB.y = cPress.y
-                    var ceil = Math.max(control.height, control.contentItem.height)
+                    const ceil = Math.max(control.height, control.contentItem.height)
                     rB.height = Math.min(ceil - rB.y, Math.abs(rB.y - cPos.y))
                 }
 
@@ -258,19 +239,14 @@ GridView {
         onClicked: {
             clearPressState()
 
-            if (mouse.button === Qt.RightButton)
+            if (mouse.buttons & Qt.RightButton) {
-                return
+                folderModel.openContextMenu(null, mouse.modifiers)
-
+            }
-            if (!hoveredItem)
+        }
-                return;
 
-//            var pos = mapToItem(hoveredItem, mouse.x, mouse.y);
+        onDoubleClicked: {
-//            if (pos.x < 0 || pos.x > hoveredItem.width || pos.y < 0 || pos.y > hoveredItem.height) {
+            if (mouse.button === Qt.LeftButton && control.pressedItem)
-//                hoveredItem = null
+                folderModel.openSelected()
-//                previouslySelectedItemIndex = -1
-//                folderModel.clearSelection()
-//                return
-//            }
         }
 
         onReleased: pressCanceled()

qml/FolderListView.qml

@@ -32,9 +32,7 @@ ListView {
     currentIndex: -1
     clip: true
 
-    ScrollBar.vertical: ScrollBar {
+    ScrollBar.vertical: ScrollBar { }
-        bottomPadding: Meui.Theme.mediumRadius
-    }
 
     highlightMoveDuration: 0
     keyNavigationEnabled : true

qml/FolderPage.qml

@@ -23,6 +23,8 @@ Item {
     Rectangle {
         id: _background
         anchors.fill: parent
+        anchors.rightMargin: Meui.Theme.smallRadius
+        anchors.bottomMargin: Meui.Theme.smallRadius
         radius: Meui.Theme.smallRadius
         color: Meui.Theme.backgroundColor
     }
@@ -54,6 +56,7 @@ Item {
 
     ColumnLayout {
         anchors.fill: parent
+        anchors.bottomMargin: Meui.Theme.smallRadius
         spacing: 0
 
         Loader {
@@ -129,7 +132,7 @@ Item {
             model: folderModel
 
             leftMargin: Meui.Units.largeSpacing
-            rightMargin: Meui.Units.largeSpacing
+            rightMargin: Meui.Units.largeSpacing + Meui.Theme.smallRadius
             spacing: Meui.Units.largeSpacing
 
             onCountChanged: {