From 655fff6e7aae91eb3471623a3431cd52359ac6fe Mon Sep 17 00:00:00 2001 From: cutefishd Date: Wed, 31 Mar 2021 00:20:52 +0800 Subject: [PATCH] UI improvement of GridView item --- model/foldermodel.cpp | 3 +- qml/Desktop/main.qml | 6 +- qml/FolderGridItem.qml | 157 +++++++++++++++++++++++------------------ qml/FolderGridView.qml | 31 ++++---- qml/GlobalSettings.qml | 6 +- 5 files changed, 113 insertions(+), 90 deletions(-) diff --git a/model/foldermodel.cpp b/model/foldermodel.cpp index edf8f68..518f7e0 100644 --- a/model/foldermodel.cpp +++ b/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; diff --git a/qml/Desktop/main.qml b/qml/Desktop/main.qml index 8c1ae65..e08aff8 100644 --- a/qml/Desktop/main.qml +++ b/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() diff --git a/qml/FolderGridItem.qml b/qml/FolderGridItem.qml index 3329fda..ee41daa 100644 --- a/qml/FolderGridItem.qml +++ b/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,87 +22,103 @@ 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) + 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 + } - ColumnLayout { - anchors.fill: parent - anchors.margins: Meui.Units.largeSpacing - spacing: Meui.Units.smallSpacing + Item { + id: _iconItem + anchors.top: parent.top + anchors.horizontalCenter: parent.horizontalCenter + anchors.topMargin: Meui.Units.largeSpacing + anchors.bottomMargin: Meui.Units.largeSpacing + z: 2 - Item { - id: _iconItem - Layout.preferredHeight: parent.height * 0.6 - Layout.fillWidth: true + width: parent.width - Meui.Units.largeSpacing * 2 + height: control.GridView.view.iconSize + opacity: selected || !hovered ? 1.0 : 0.95 - Image { - id: _icon - anchors.centerIn: parent - width: parent.height - height: width - sourceSize: Qt.size(width, height) - source: "image://icontheme/" + model.iconName - visible: !_image.visible - } + Image { + id: _icon + width: control.GridView.view.iconSize + height: control.GridView.view.iconSize + anchors.centerIn: parent + sourceSize: Qt.size(width, height) + source: "image://icontheme/" + model.iconName + visible: !_image.visible + } - Image { - id: _image - anchors.centerIn: parent - height: parent.height - width: parent.width + Image { + id: _image + 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 + verticalAlignment: Qt.AlignVCenter + sourceSize.width: width + sourceSize.height: height + source: model.thumbnail ? model.thumbnail : "" + asynchronous: true + cache: true - fillMode: Image.PreserveAspectFit - visible: status === Image.Ready - horizontalAlignment: Qt.AlignHCenter - verticalAlignment: Qt.AlignVCenter - sourceSize.width: width - sourceSize.height: height - source: model.thumbnail ? model.thumbnail : "" - asynchronous: true - cache: true + layer.enabled: true + layer.effect: OpacityMask { + maskSource: Item { + width: _image.width + height: _image.height - layer.enabled: true - layer.effect: OpacityMask { - maskSource: Item { - width: _image.width - height: _image.height - - Rectangle { - anchors.centerIn: parent - width: Math.min(parent.width, _image.paintedWidth) - height: Math.min(parent.height, _image.paintedHeight) - radius: Meui.Theme.smallRadius - } + Rectangle { + anchors.centerIn: parent + width: Math.min(parent.width, _image.paintedWidth) + height: Math.min(parent.height, _image.paintedHeight) + radius: Meui.Theme.smallRadius / 2 } } } } + } - Item { - id: _labelItem - Layout.fillHeight: true - Layout.preferredHeight: Math.min(_label.implicitHeight, height) - Layout.fillWidth: true + Label { + id: _label + 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: control.GridView.view.isDesktopView ? "white" + : selected ? Meui.Theme.highlightedTextColor : Meui.Theme.textColor + } - 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 - elide: Qt.ElideRight - wrapMode: Text.Wrap - text: model.fileName - color: 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 } } diff --git a/qml/FolderGridView.qml b/qml/FolderGridView.qml index 99ef0c1..98675dc 100644 --- a/qml/FolderGridView.qml +++ b/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) diff --git a/qml/GlobalSettings.qml b/qml/GlobalSettings.qml index 84d083f..2b0284c 100644 --- a/qml/GlobalSettings.qml +++ b/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 }