NekoCute/filemanager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

UI improvement of GridView item

Browse source
This commit is contained in:
cutefishd 2021-03-31 00:20:52 +08:00
parent aac7ca3882
commit 655fff6e7a
5 changed files with 113 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
model/foldermodel.cpp
View file

@ -931,7 +931,8 @@ void FolderModel::dragSelectedInternal(int x, int y)
bool FolderModel::isSupportThumbnails(const QString &mimeType) const bool FolderModel::isSupportThumbnails(const QString &mimeType) const
{ {
const QStringList supportsMimetypes = {"image/bmp", "image/png", "image/gif", "image/jpeg", "image/web", 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)) if (supportsMimetypes.contains(mimeType))
return true; return true;

6
qml/Desktop/main.qml
View file

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

157
qml/FolderGridItem.qml
View file

@ -14,6 +14,7 @@ Item {
property Item iconArea: _image.visible ? _image : _icon property Item iconArea: _image.visible ? _image : _icon
property Item textArea: _label property Item textArea: _label
property Item background: _background
property int index: model.index property int index: model.index
property bool hovered: GridView.view.hoveredItem === control property bool hovered: GridView.view.hoveredItem === control
@ -21,87 +22,103 @@ Item {
property bool blank: model.blank property bool blank: model.blank
property var fileName: model.fileName property var fileName: model.fileName
property color hoveredColor: Meui.Theme.darkMode ? Qt.lighter(Meui.Theme.backgroundColor, 1.1) Rectangle {
: Qt.darker(Meui.Theme.backgroundColor, 1.05) 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 { Item {
anchors.fill: parent id: _iconItem
anchors.margins: Meui.Units.largeSpacing anchors.top: parent.top
spacing: Meui.Units.smallSpacing anchors.horizontalCenter: parent.horizontalCenter
anchors.topMargin: Meui.Units.largeSpacing
anchors.bottomMargin: Meui.Units.largeSpacing
z: 2
Item { width: parent.width - Meui.Units.largeSpacing * 2
id: _iconItem height: control.GridView.view.iconSize
Layout.preferredHeight: parent.height * 0.6 opacity: selected || !hovered ? 1.0 : 0.95
Layout.fillWidth: true
Image { Image {
id: _icon id: _icon
anchors.centerIn: parent width: control.GridView.view.iconSize
width: parent.height height: control.GridView.view.iconSize
height: width anchors.centerIn: parent
sourceSize: Qt.size(width, height) sourceSize: Qt.size(width, height)
source: "image://icontheme/" + model.iconName source: "image://icontheme/" + model.iconName
visible: !_image.visible visible: !_image.visible
} }
Image { Image {
id: _image id: _image
anchors.centerIn: parent anchors.fill: parent
height: parent.height anchors.topMargin: Meui.Units.smallSpacing
width: parent.width 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 layer.enabled: true
visible: status === Image.Ready layer.effect: OpacityMask {
horizontalAlignment: Qt.AlignHCenter maskSource: Item {
verticalAlignment: Qt.AlignVCenter width: _image.width
sourceSize.width: width height: _image.height
sourceSize.height: height
source: model.thumbnail ? model.thumbnail : ""
asynchronous: true
cache: true
layer.enabled: true Rectangle {
layer.effect: OpacityMask { anchors.centerIn: parent
maskSource: Item { width: Math.min(parent.width, _image.paintedWidth)
width: _image.width height: Math.min(parent.height, _image.paintedHeight)
height: _image.height radius: Meui.Theme.smallRadius / 2
Rectangle {
anchors.centerIn: parent
width: Math.min(parent.width, _image.paintedWidth)
height: Math.min(parent.height, _image.paintedHeight)
radius: Meui.Theme.smallRadius
}
} }
} }
} }
} }
}
Item { Label {
id: _labelItem id: _label
Layout.fillHeight: true z: 2
Layout.preferredHeight: Math.min(_label.implicitHeight, height) anchors.top: _iconItem.bottom
Layout.fillWidth: true 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 { DropShadow {
width: _label.paintedWidth + Meui.Units.smallSpacing * 2 anchors.fill: _label
height: _label.paintedHeight source: _label
x: (_labelItem.width - width + Meui.Units.smallSpacing) / 2 z: 1
color: selected ? Meui.Theme.highlightColor : hovered ? hoveredColor : "transparent" horizontalOffset: 1
radius: Meui.Theme.smallRadius verticalOffset: 1
} radius: Math.round(4 * Meui.Units.devicePixelRatio)
samples: radius * 2 + 1
Label { spread: 0.35
id: _label color: Qt.rgba(0, 0, 0, 0.3)
horizontalAlignment: Qt.AlignHCenter opacity: model.isHidden ? 0.6 : 1
verticalAlignment: Qt.AlignTop visible: control.GridView.view.isDesktopView
anchors.fill: parent
anchors.margins: 0
elide: Qt.ElideRight
wrapMode: Text.Wrap
text: model.fileName
color: selected ? Meui.Theme.highlightedTextColor : Meui.Theme.textColor
}
}
} }
} }

31
qml/FolderGridView.qml
View file

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

6
qml/GlobalSettings.qml
View file

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