UI improvement of GridView item

model/foldermodel.cpp

@@ -931,7 +931,8 @@ void FolderModel::dragSelectedInternal(int x, int y)
 bool FolderModel::isSupportThumbnails(const QString &mimeType) const
 {
     const QStringList supportsMimetypes = {"image/bmp", "image/png", "image/gif", "image/jpeg", "image/web",
-                                           "application/pdf", "application/rtf", "application/doc", "application/odf"};
+                                           "application/pdf", "application/rtf", "application/doc", "application/odf",
+                                           "audio/mpeg"};
 
     if (supportsMimetypes.contains(mimeType))
         return true;

qml/Desktop/main.qml

@@ -62,8 +62,10 @@ Item {
 
     FolderGridView {
         anchors.fill: parent
-        cellHeight: globalSettings.desktopIconSize
-        cellWidth: globalSettings.desktopIconSize
+
+        isDesktopView: true
+        iconSize: globalSettings.desktopIconSize
+
         model: FolderModel {
             id: folderModel
             url: desktopPath()

qml/FolderGridItem.qml

@@ -14,6 +14,7 @@ Item {
 
     property Item iconArea: _image.visible ? _image : _icon
     property Item textArea: _label
+    property Item background: _background
 
     property int index: model.index
     property bool hovered: GridView.view.hoveredItem === control
@@ -21,24 +22,36 @@ Item {
     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
-        anchors.margins: Meui.Units.largeSpacing
-        spacing: Meui.Units.smallSpacing
+    Rectangle {
+        id: _background
+        width: Math.max(_iconItem.width + Meui.Units.smallSpacing,
+                        _label.paintedWidth + Meui.Units.largeSpacing)
+        height: _iconItem.height + _label.paintedHeight + Meui.Units.largeSpacing
+        x: (parent.width - width) / 2
+        y: _iconItem.y
+        color: selected || hovered ? Meui.Theme.highlightColor : "transparent"
+        radius: Meui.Theme.mediumRadius
+        visible: selected || hovered
+        opacity: selected ? 0.9 : 0.4
+    }
 
     Item {
         id: _iconItem
-            Layout.preferredHeight: parent.height * 0.6
-            Layout.fillWidth: true
+        anchors.top: parent.top
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.topMargin: Meui.Units.largeSpacing
+        anchors.bottomMargin: Meui.Units.largeSpacing
+        z: 2
+
+        width: parent.width - Meui.Units.largeSpacing * 2
+        height: control.GridView.view.iconSize
+        opacity: selected || !hovered ? 1.0 : 0.95
 
         Image {
             id: _icon
+            width: control.GridView.view.iconSize
+            height: control.GridView.view.iconSize
             anchors.centerIn: parent
-                width: parent.height
-                height: width
             sourceSize: Qt.size(width, height)
             source: "image://icontheme/" + model.iconName
             visible: !_image.visible
@@ -46,10 +59,10 @@ Item {
 
         Image {
             id: _image
-                anchors.centerIn: parent
-                height: parent.height
-                width: parent.width
-
+            anchors.fill: parent
+            anchors.topMargin: Meui.Units.smallSpacing
+            anchors.leftMargin: Meui.Units.smallSpacing
+            anchors.rightMargin: Meui.Units.smallSpacing
             fillMode: Image.PreserveAspectFit
             visible: status === Image.Ready
             horizontalAlignment: Qt.AlignHCenter
@@ -70,38 +83,42 @@ Item {
                         anchors.centerIn: parent
                         width: Math.min(parent.width, _image.paintedWidth)
                         height: Math.min(parent.height, _image.paintedHeight)
-                            radius: Meui.Theme.smallRadius
+                        radius: Meui.Theme.smallRadius / 2
                     }
                 }
             }
         }
     }
 
-        Item {
-            id: _labelItem
-            Layout.fillHeight: true
-            Layout.preferredHeight: Math.min(_label.implicitHeight, height)
-            Layout.fillWidth: true
-
-            Rectangle {
-                width: _label.paintedWidth + Meui.Units.smallSpacing * 2
-                height: _label.paintedHeight
-                x: (_labelItem.width - width + Meui.Units.smallSpacing) / 2
-                color: selected ? Meui.Theme.highlightColor : hovered ? hoveredColor : "transparent"
-                radius: Meui.Theme.smallRadius
-            }
-
     Label {
         id: _label
-                horizontalAlignment: Qt.AlignHCenter
-                verticalAlignment: Qt.AlignTop
-                anchors.fill: parent
-                anchors.margins: 0
+        z: 2
+        anchors.top: _iconItem.bottom
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.topMargin: Meui.Units.smallSpacing
+        maximumLineCount: 2
+        horizontalAlignment: Text.AlignHCenter
+        width: Math.round(Math.min(_label.implicitWidth + Meui.Units.smallSpacing,
+                                    parent.width - Meui.Units.largeSpacing * 2))
+        textFormat: Text.PlainText
         elide: Qt.ElideRight
         wrapMode: Text.Wrap
         text: model.fileName
-                color: selected ? Meui.Theme.highlightedTextColor : Meui.Theme.textColor
-            }
-        }
+        color: control.GridView.view.isDesktopView ? "white"
+                                                   : selected ? Meui.Theme.highlightedTextColor : Meui.Theme.textColor
+    }
+
+    DropShadow {
+        anchors.fill: _label
+        source: _label
+        z: 1
+        horizontalOffset: 1
+        verticalOffset: 1
+        radius: Math.round(4 * Meui.Units.devicePixelRatio)
+        samples: radius * 2 + 1
+        spread: 0.35
+        color: Qt.rgba(0, 0, 0, 0.3)
+        opacity: model.isHidden ? 0.6 : 1
+        visible: control.GridView.view.isDesktopView
     }
 }

qml/FolderGridView.qml

@@ -8,6 +8,8 @@ import MeuiKit 1.0 as Meui
 GridView {
     id: control
 
+    property bool isDesktopView: false
+
     property Item rubberBand: null
     property Item hoveredItem: null
     property Item pressedItem: null
@@ -28,10 +30,7 @@ GridView {
     property Item editor: null
     property int anchorIndex: 0
 
-    property var itemSize: settings.gridIconSize
-
-    property var itemWidth: itemSize + Meui.Units.largeSpacing
-    property var itemHeight: itemSize + Meui.Units.fontMetrics.height * 2
+    property var iconSize: settings.gridIconSize
 
     property variant cachedRectangleSelection: null
 
@@ -67,13 +66,18 @@ GridView {
     }
 
     cellHeight: {
-        // var extraHeight = calcExtraSpacing(itemHeight, control.height - topMargin - bottomMargin)
-        return itemHeight // + extraHeight
+        var iconHeight = iconSize + (Meui.Units.fontMetrics.height * 2) + Meui.Units.largeSpacing * 2
+        if (isDesktopView) {
+            var extraHeight = calcExtraSpacing(iconHeight, control.height - topMargin - bottomMargin)
+            return iconHeight + extraHeight
+        }
+        return iconHeight
     }
 
     cellWidth: {
-        var extraWidth = calcExtraSpacing(itemWidth, control.width - leftMargin - rightMargin)
-        return itemWidth + extraWidth
+        var iconWidth = iconSize + Meui.Units.largeSpacing * 4
+        var extraWidth = calcExtraSpacing(iconWidth, control.width - leftMargin - rightMargin)
+        return iconWidth + extraWidth
     }
 
     clip: true
@@ -171,12 +175,11 @@ GridView {
 
             // Set hoveredItem.
             if (indexItem) {
-                var iconPos = mapToItem(indexItem.iconArea, mouse.x, mouse.y)
-                var textPos = mapToItem(indexItem.textArea, mouse.x, mouse.y)
+                var fPos = mapToItem(indexItem.background, mouse.x, mouse.y)
 
-                if (iconPos.x < 0 || iconPos.y < 0
-                        || iconPos.x > indexItem.iconArea.paintedWidth
-                        || iconPos.y > indexItem.iconArea.paintedHeight + indexItem.textArea.paintedHeight) {
+                if (fPos.x < 0 || fPos.y < 0
+                        || fPos.x > indexItem.background.width
+                        || fPos.y > indexItem.background.height) {
                     control.hoveredItem = null
                 } else {
                     control.hoveredItem = indexItem
@@ -345,7 +348,7 @@ GridView {
         var extraSpacing = 0
         if (availableColumns > 0) {
             var allColumnSize = availableColumns * cellSize
-            var extraSpace = Math.max(containerSize - allColumnSize, Meui.Units.smallSpacing)
+            var extraSpace = Math.max(containerSize - allColumnSize, Meui.Units.largeSpacing)
             extraSpacing = extraSpace / availableColumns
         }
         return Math.floor(extraSpacing)

qml/GlobalSettings.qml

@@ -6,9 +6,9 @@ Settings {
     property bool showHidden: false
     property int width: 900
     property int height: 580
-    property int desktopIconSize: 128
+    property int desktopIconSize: 72
     property int maximumIconSize: 256
-    property int minimumIconSize: 128
+    property int minimumIconSize: 72
 
-    property int gridIconSize: 128
+    property int gridIconSize: 72
 }