Merge pull request #4447 from nextcloud/bugfix/thumbnail-changes

Realigned and resized thumbnails

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

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
-            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
+            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: 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
 

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

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