From 010f49a3923ae2870ec5c38e74f8d0b70583e5bf Mon Sep 17 00:00:00 2001 From: Claudio Cambra Date: Mon, 18 Apr 2022 19:24:31 +0200 Subject: [PATCH] Realigned and resized thumbnails Signed-off-by: Claudio Cambra --- src/gui/tray/ActivityItem.qml | 13 +++++---- src/gui/tray/ActivityItemContent.qml | 43 +++++++++++++++++++--------- src/gui/tray/SyncStatus.qml | 13 +++++---- theme/Style/Style.qml | 9 ++++++ 4 files changed, 54 insertions(+), 24 deletions(-) diff --git a/src/gui/tray/ActivityItem.qml b/src/gui/tray/ActivityItem.qml index 42e673917111d..762598539fe56 100644 --- a/src/gui/tray/ActivityItem.qml +++ b/src/gui/tray/ActivityItem.qml @@ -21,7 +21,8 @@ MouseArea { enabled: (model.path !== "" || model.link !== "" || model.isCurrentUserFileActivity === true) hoverEnabled: true - height: childrenRect.height + // We center the children vertically in the middle of this MouseArea to create the padding. + height: childrenRect.height + (Style.standardSpacing * 2) Accessible.role: Accessible.ListItem Accessible.name: (model.path !== "" && model.displayPath !== "") ? qsTr("Open %1 locally").arg(model.displayPath) : model.message @@ -55,8 +56,9 @@ MouseArea { ColumnLayout { anchors.left: root.left anchors.right: root.right - anchors.rightMargin: 10 - anchors.leftMargin: 10 + anchors.rightMargin: Style.standardSpacing + anchors.leftMargin: Style.standardSpacing + anchors.verticalCenter: parent.verticalCenter spacing: 0 @@ -64,13 +66,12 @@ MouseArea { id: activityContent Layout.fillWidth: true + Layout.minimumHeight: Style.minActivityHeight showDismissButton: model.links.length > 0 && model.linksForActionButtons.length === 0 activityData: model - Layout.minimumHeight: Style.trayWindowHeaderHeight - onShareButtonClicked: Systray.openShareDialog(model.displayPath, model.absolutePath) onDismissButtonClicked: activityModel.slotTriggerDismiss(model.index) } @@ -80,10 +81,10 @@ MouseArea { visible: !root.isFileActivityList && model.linksForActionButtons.length > 0 && !isTalkReplyOptionVisible - Layout.preferredHeight: Style.trayWindowHeaderHeight * 0.85 Layout.fillWidth: true Layout.leftMargin: 60 Layout.bottomMargin: model.links.length > 1 ? 5 : 0 + Layout.preferredHeight: Style.minActivityHeight displayActions: model.displayActions objectType: model.objectType diff --git a/src/gui/tray/ActivityItemContent.qml b/src/gui/tray/ActivityItemContent.qml index 640fa3876c7d9..8ca4ac82ecc31 100644 --- a/src/gui/tray/ActivityItemContent.qml +++ b/src/gui/tray/ActivityItemContent.qml @@ -23,9 +23,12 @@ RowLayout { spacing: Style.trayHorizontalMargin Item { + id: thumbnailItem Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter Layout.preferredWidth: Style.trayListItemIconSize - Layout.preferredHeight: Style.trayListItemIconSize + Layout.preferredHeight: model.thumbnail.isMimeTypeIcon ? Style.trayListItemIconSize * 0.9 : Style.trayListItemIconSize + readonly property int imageWidth: width * (1 - Style.thumbnailImageSizeReduction) + readonly property int imageHeight: height * (1 - Style.thumbnailImageSizeReduction) Loader { id: thumbnailImageLoader @@ -34,14 +37,17 @@ RowLayout { sourceComponent: Item { anchors.fill: parent + readonly property int paintedWidth: model.thumbnail.isMimeTypeIcon ? thumbnailImage.paintedWidth * 0.8 : thumbnailImage.paintedWidth + readonly property int paintedHeight: model.thumbnail.isMimeTypeIcon ? thumbnailImage.paintedHeight * 0.55 : thumbnailImage.paintedHeight Image { id: thumbnailImage - width: model.thumbnail.isMimeTypeIcon ? parent.width * 0.85 : parent.width * 0.8 - height: model.thumbnail.isMimeTypeIcon ? parent.height * 0.85 : parent.height * 0.8 + width: thumbnailItem.imageWidth + height: thumbnailItem.imageHeight anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left cache: true + fillMode: Image.PreserveAspectFit source: model.thumbnail.source visible: false sourceSize.height: 64 @@ -69,14 +75,25 @@ RowLayout { Image { id: activityIcon - width: model.thumbnail !== undefined ? parent.width * 0.5 : parent.width * 0.85 - height: model.thumbnail !== undefined ? parent.height * 0.5 : parent.height * 0.85 + width: model.thumbnail !== undefined ? parent.width * 0.4 : thumbnailItem.imageWidth + height: model.thumbnail !== undefined ? width : width * 0.9 + + readonly property int negativeLeftMargin: -((width / 2) + + ((width - paintedWidth) / 2) + + ((thumbnailImageLoader.width - thumbnailItem.imageWidth) / 2) + + (thumbnailImageLoader.width - thumbnailImageLoader.item.paintedWidth) / 2) + readonly property int negativeTopMargin: -((height / 2) + + ((height - paintedHeight) / 2) + + ((thumbnailImageLoader.height - thumbnailItem.imageHeight) / 4) + + ((thumbnailImageLoader.height - thumbnailImageLoader.item.paintedHeight) / 4)) anchors.verticalCenter: if(model.thumbnail === undefined) parent.verticalCenter - anchors.left: if(model.thumbnail === undefined) parent.left - anchors.right: if(model.thumbnail !== undefined) parent.right - anchors.bottom: if(model.thumbnail !== undefined) parent.bottom - cache: true + anchors.left: model.thumbnail === undefined ? parent.left : thumbnailImageLoader.right + anchors.leftMargin: if(model.thumbnail !== undefined) negativeLeftMargin + anchors.top: if(model.thumbnail !== undefined) thumbnailImageLoader.bottom + anchors.topMargin: if(model.thumbnail !== undefined) negativeTopMargin + cache: true + fillMode: Image.PreserveAspectFit source: Theme.darkMode ? model.darkIcon : model.lightIcon sourceSize.height: 64 sourceSize.width: 64 @@ -165,8 +182,8 @@ RowLayout { Button { id: dismissActionButton - Layout.preferredWidth: parent.height * 0.40 - Layout.preferredHeight: parent.height * 0.40 + Layout.preferredWidth: Style.trayListItemIconSize * 0.6 + Layout.preferredHeight: Style.trayListItemIconSize * 0.6 Layout.alignment: Qt.AlignCenter @@ -210,8 +227,8 @@ RowLayout { CustomButton { id: shareButton - Layout.preferredWidth: parent.height * 0.70 - Layout.preferredHeight: parent.height * 0.70 + Layout.preferredWidth: Style.trayListItemIconSize + Layout.preferredHeight: Style.trayListItemIconSize visible: root.activityData.isShareable diff --git a/src/gui/tray/SyncStatus.qml b/src/gui/tray/SyncStatus.qml index 0fd3ea2c1bf35..5964c60db7198 100644 --- a/src/gui/tray/SyncStatus.qml +++ b/src/gui/tray/SyncStatus.qml @@ -19,14 +19,17 @@ RowLayout { Image { id: syncIcon - Layout.preferredWidth: Style.trayListItemIconSize * 0.85 - Layout.preferredHeight: Style.trayListItemIconSize * 0.85 + property int size: Style.trayListItemIconSize * 0.6 + property int whiteSpace: (Style.trayListItemIconSize - size) - Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter + Layout.preferredWidth: size + Layout.preferredHeight: size + + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter Layout.topMargin: 16 - Layout.rightMargin: Style.trayListItemIconSize * 0.15 + Layout.rightMargin: whiteSpace * (0.5 + Style.thumbnailImageSizeReduction) Layout.bottomMargin: 16 - Layout.leftMargin: Style.trayHorizontalMargin + Layout.leftMargin: Style.trayHorizontalMargin + (whiteSpace * (0.5 - Style.thumbnailImageSizeReduction)) source: syncStatus.syncIcon sourceSize.width: 64 diff --git a/theme/Style/Style.qml b/theme/Style/Style.qml index 6c90be5637f05..ad1da99d826e1 100644 --- a/theme/Style/Style.qml +++ b/theme/Style/Style.qml @@ -34,6 +34,15 @@ QtObject { property int trayWindowHeaderHeight: variableSize(60) property int trayHorizontalMargin: 10 property int trayListItemIconSize: accountAvatarSize + property real thumbnailImageSizeReduction: 0.2 // We reserve some space within the thumbnail "item", here about 20%. + // This is because we need to also add the added/modified icon and we + // want them to fit within the general icon size. We also need to know + // this amount to properly center the sync status icon to the thumbnail + // images, which will work so long as the thumbnails are left aligned + + property int standardSpacing: 10 + + property int minActivityHeight: variableSize(40) property int currentAccountButtonWidth: 220 property int currentAccountButtonRadius: 2