Use material icon for folders.

Signed-off-by: alex-z <blackslayer4@gmail.com>

resources.qrc

@@ -48,6 +48,7 @@
         <file>src/gui/tray/CallNotificationDialog.qml</file>
         <file>src/gui/tray/EditFileLocallyLoadingDialog.qml</file>
         <file>src/gui/tray/NCBusyIndicator.qml</file>
+        <file>src/gui/tray/NCIconWithBackgroundImage.qml</file>
         <file>src/gui/tray/NCToolTip.qml</file>
         <file>src/gui/tray/NCProgressBar.qml</file>
         <file>src/gui/tray/EnforcedPlainTextLabel.qml</file>

src/gui/tray/NCIconWithBackgroundImage.qml

@@ -0,0 +1,37 @@
+/*
+ * Copyright (C) 2023 by Oleksandr Zolotov <alex@nextcloud.com>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
+ * for more details.
+ */
+
+import QtQuick 2.15
+import Style 1.0
+
+Image {
+    id: root
+
+    property alias icon: icon
+
+    cache: true
+    mipmap: true
+    fillMode: Image.PreserveAspectFit
+
+    Image {
+        id: icon
+
+        anchors.centerIn: parent
+
+        cache: true
+        mipmap: true
+        fillMode: Image.PreserveAspectFit
+        visible: source !== ""
+    }
+}

src/gui/tray/TrayFolderListItem.qml

@@ -21,7 +21,8 @@ MenuItem {
     id: root
 
     property string subline: ""
-    property string iconSource: "image://svgimage-custom-color/folder-group.svg/" + palette.buttonText
+    property string iconSource: "image://svgimage-custom-color/account-group.svg/" + palette.buttonText
+    property string backgroundIconSource: value
     property string toolTipText: root.text
 
     NCToolTip {
@@ -45,13 +46,12 @@ MenuItem {
         anchors.rightMargin: Style.trayWindowMenuEntriesMargin
         spacing: Style.trayHorizontalMargin
 
-        Image {
-            source: root.iconSource
-            cache: true
-            sourceSize.width: root.height * Style.smallIconScaleFactor
-            sourceSize.height: root.height * Style.smallIconScaleFactor
-            verticalAlignment: Qt.AlignVCenter
-            horizontalAlignment: Qt.AlignHCenter
+        NCIconWithBackgroundImage {
+            source: root.backgroundIconSource
+
+            icon.source: root.iconSource
+            icon.height: height * Style.smallIconScaleFactor
+            icon.width: icon.height
 
             Layout.preferredHeight: root.height * Style.smallIconScaleFactor
             Layout.preferredWidth: root.height * Style.smallIconScaleFactor
@@ -64,7 +64,10 @@ MenuItem {
 
             spacing: Style.extraSmallSpacing
 
+            Layout.alignment: Qt.AlignVCenter
+
             Layout.fillWidth: true
+
         }
     }
 }

src/gui/tray/TrayFoldersMenuButton.qml

@@ -100,9 +100,14 @@ HeaderButton {
 
         Image {
             id: openLocalFolderButtonIcon
-            cache: false
+            cache: true
             source: "image://svgimage-custom-color/folder.svg/" + Style.currentUserHeaderTextColor
 
+            sourceSize {
+                width: Style.headerButtonIconSize
+                height: Style.headerButtonIconSize
+            }
+
             verticalAlignment: Qt.AlignCenter
 
             Accessible.role: Accessible.Graphic
@@ -185,9 +190,10 @@ HeaderButton {
                         subline: model.modelData.parentPath
                         width: foldersMenuListView.width
                         height: Style.standardPrimaryButtonHeight
-                        iconSource: !isGroupFolder ?
-                                        "image://svgimage-custom-color/folder.svg/" + palette.buttonText :
-                                        "image://svgimage-custom-color/folder-group.svg/" + palette.buttonText
+                        backgroundIconSource: "image://svgimage-custom-color/folder.svg/" + palette.buttonText
+                        iconSource: isGroupFolder
+                                    ? "image://svgimage-custom-color/account-group.svg/" + palette.brightText
+                                    : ""
 
                         onTriggered: {
                             foldersMenu.close();

theme.qrc.in

@@ -44,6 +44,7 @@
         <file>theme/white/state-sync-64.png</file>
         <file>theme/white/state-sync-128.png</file>
         <file>theme/white/state-sync-256.png</file>
+        <file>theme/black/account-group.svg</file>
         <file>theme/black/change.svg</file>
         <file>theme/black/clear.svg</file>
         <file>theme/black/comment.svg</file>

theme/black/account-group.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z" /></svg>

theme/black/folder.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="32" viewBox="0 0 32 32" width="32" version="1.1"><path fill="#000000" d="m3 4c-0.5 0-1 0.5-1 1v22c0 0.52 0.48 1 1 1h26c0.52 0 1-0.482 1-1v-18c0-0.5-0.5-1-1-1h-13l-4-4z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z" /></svg>

theme/white/folder.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="32" viewBox="0 0 32 32" width="32" version="1.1"><path fill="#ffffff" d="m3 4c-0.5 0-1 0.5-1 1v22c0 0.52 0.48 1 1 1h26c0.52 0 1-0.482 1-1v-18c0-0.5-0.5-1-1-1h-13l-4-4z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#ffffff" d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z" /></svg>