diff --git a/resources.qrc b/resources.qrc index fc65956940bf4..f2261652d932b 100644 --- a/resources.qrc +++ b/resources.qrc @@ -62,5 +62,7 @@ src/gui/ConflictDelegate.qml src/gui/ConflictItemFileInfo.qml src/gui/filedetails/NCInputDateField.qml + src/gui/nmcgui/NMCLogoArea.qml + src/gui/nmcgui/NMCHeaderButton.qml diff --git a/src/gui/nmcgui/NMCHeaderButton.qml b/src/gui/nmcgui/NMCHeaderButton.qml new file mode 100644 index 0000000000000..cc944e74d1fa4 --- /dev/null +++ b/src/gui/nmcgui/NMCHeaderButton.qml @@ -0,0 +1,42 @@ +/* + * Copyright (C) 2020 by Eugen Fischer + * + * 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 QtQml 2.15 +import QtQml.Models 2.15 +import QtQuick 2.15 +import QtQuick.Window 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 +import QtGraphicalEffects 1.15 + +// Custom qml modules are in /theme (and included by resources.qrc) +import Style 1.0 +import com.nextcloud.desktopclient 1.0 + +Button { + id: root + + display: AbstractButton.TextUnderIcon + flat: true + hoverEnabled: Style.hoverEffectsEnabled + + icon.width: Style.headerButtonIconSize + icon.height: Style.headerButtonIconSize + icon.color: Style.nmcBrowserButtonColor + + background: Rectangle { + color: root.hovered || root.visualFocus ? Style.currentUserHeaderTextColor : "transparent" + opacity: 0.2 + } +} diff --git a/src/gui/nmcgui/NMCLogoArea.qml b/src/gui/nmcgui/NMCLogoArea.qml new file mode 100644 index 0000000000000..6c152f6f9b5d4 --- /dev/null +++ b/src/gui/nmcgui/NMCLogoArea.qml @@ -0,0 +1,38 @@ +/* + * Copyright (C) 2022 by Eugen Fischer + * + * 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 QtQml 2.15 +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 + +import Style 1.0 + +Rectangle{ + id: root + height: Style.nmcTrayWindowHeaderHeight + color: Style.ncBlue + + Image { + source: Style.nmcLogoMagenta + fillMode: Image.PreserveAspectFit + + anchors.topMargin: Style.nmcTopBottomHeaderMargin + anchors.bottomMargin: Style.nmcTopBottomHeaderMargin + anchors.left: root.left + anchors.top: root.top + anchors.bottom: root.bottom + anchors.leftMargin: Style.nmcTrayWindowHeaderLeftMargin + } +} diff --git a/src/gui/tray/TrayFoldersMenuButton.qml b/src/gui/tray/TrayFoldersMenuButton.qml index 23a5f5942aefb..6be79e700e038 100644 --- a/src/gui/tray/TrayFoldersMenuButton.qml +++ b/src/gui/tray/TrayFoldersMenuButton.qml @@ -16,8 +16,9 @@ import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 import QtGraphicalEffects 1.0 import Style 1.0 +import "../nmcgui" -HeaderButton { +NMCHeaderButton { id: root implicitWidth: contentItem.implicitWidth diff --git a/src/gui/tray/Window.qml b/src/gui/tray/Window.qml index 75380d5fddffd..a74bd665dc795 100644 --- a/src/gui/tray/Window.qml +++ b/src/gui/tray/Window.qml @@ -21,6 +21,7 @@ import Qt.labs.platform 1.1 as NativeDialogs import "../" import "../filedetails/" +import "../nmcgui" // Custom qml modules are in /theme (and included by resources.qrc) import Style 1.0 @@ -231,7 +232,7 @@ ApplicationWindow { height: parent.height backgroundsVisible: false - accentColor: Style.currentUserHeaderColor + accentColor: Style.nmcCurrentUserHeaderColor accountState: fileDetailsDrawer.folderAccountState localPath: fileDetailsDrawer.fileLocalPath showCloseButton: true @@ -256,28 +257,56 @@ ApplicationWindow { Accessible.role: Accessible.Grouping Accessible.name: qsTr("Nextcloud desktop main dialog") + NMCLogoArea + { + id: trayWindowMagentaBarBackground + anchors.left: trayWindowMainItem.left + anchors.right: trayWindowMainItem.right + } + + Rectangle{ + id:separator + color: Style.ncBlue + anchors.top: trayWindowMagentaBarBackground.bottom + anchors.left: trayWindowMainItem.left + anchors.right: trayWindowMainItem.right + height: 1 + } + + Rectangle{ + id:topRadiusCoverUp + color: Style.ncBlue + anchors.top: separator.bottom + anchors.left: trayWindowMainItem.left + anchors.right: trayWindowMainItem.right + height: 10 + } + Rectangle { id: trayWindowHeaderBackground anchors.left: trayWindowMainItem.left anchors.right: trayWindowMainItem.right - anchors.top: trayWindowMainItem.top - height: Style.trayWindowHeaderHeight - color: Style.currentUserHeaderColor + anchors.top: separator.bottom + height: Style.nmcTrayWindowItemListHeight + color: "white" + radius: 10 RowLayout { id: trayWindowHeaderLayout spacing: 0 - anchors.fill: parent + anchors.fill: trayWindowHeaderBackground + //anchors.bottom: trayWindowHeaderBackground.bottom Button { id: currentAccountButton Layout.preferredWidth: Style.currentAccountButtonWidth - Layout.preferredHeight: Style.trayWindowHeaderHeight + Layout.preferredHeight: Style.nmcTrayWindowItemListHeight display: AbstractButton.IconOnly flat: true + anchors.verticalCenter: trayWindowHeaderLayout.verticalCenter Accessible.role: Accessible.ButtonMenu Accessible.name: qsTr("Current account") @@ -300,7 +329,7 @@ ApplicationWindow { // x coordinate grows towards the right // y coordinate grows towards the bottom x: (currentAccountButton.x + 2) - y: (currentAccountButton.y + Style.trayWindowHeaderHeight + 2) + y: trayWindowHeaderBackground.height //(currentAccountButton.y + Style.trayWindowHeaderHeight) width: (Style.currentAccountButtonWidth - 2) height: Math.min(implicitHeight, maxMenuHeight) @@ -475,17 +504,19 @@ ApplicationWindow { RowLayout { id: accountControlRowLayout - height: Style.trayWindowHeaderHeight - width: Style.currentAccountButtonWidth + //height: Style.trayWindowHeaderHeight + //width: Style.currentAccountButtonWidth + anchors.fill: currentAccountButton spacing: 0 Image { id: currentAccountAvatar - Layout.leftMargin: Style.trayHorizontalMargin - verticalAlignment: Qt.AlignCenter + Layout.leftMargin: Style.nmcTrayWindowHeaderLeftMargin + height: Style.accountAvatarSize + width: Style.accountAvatarSize cache: false - source: UserModel.currentUser.avatar != "" ? UserModel.currentUser.avatar : "image://avatars/fallbackWhite" + source: Style.nmcAccountAvatarIcon Layout.preferredHeight: Style.accountAvatarSize Layout.preferredWidth: Style.accountAvatarSize @@ -500,7 +531,7 @@ ApplicationWindow { height: width anchors.bottom: currentAccountAvatar.bottom anchors.right: currentAccountAvatar.right - color: Style.currentUserHeaderColor + color: Style.nmcCurrentUserHeaderColor radius: width * Style.trayFolderStatusIndicatorRadiusFactor } @@ -523,8 +554,8 @@ ApplicationWindow { && UserModel.currentUser.serverHasUserStatus source: UserModel.currentUser.statusIcon cache: false - x: currentAccountStatusIndicatorBackground.x + 1 - y: currentAccountStatusIndicatorBackground.y + 1 + anchors.verticalCenter:currentAccountAvatar.verticalCenter + sourceSize.width: Style.accountAvatarStateIndicatorSize sourceSize.height: Style.accountAvatarStateIndicatorSize @@ -547,7 +578,7 @@ ApplicationWindow { width: Style.currentAccountLabelWidth text: UserModel.currentUser.name elide: Text.ElideRight - color: Style.currentUserHeaderTextColor + color: Style.ncTextColor font.pixelSize: Style.topLinePixelSize font.bold: true @@ -559,7 +590,7 @@ ApplicationWindow { width: Style.currentAccountLabelWidth text: UserModel.currentUser.server elide: Text.ElideRight - color: Style.currentUserHeaderTextColor + color: Style.nmcCurrentUserHeaderColor visible: UserModel.numUsers() > 1 } @@ -586,7 +617,7 @@ ApplicationWindow { ? UserModel.currentUser.statusMessage : UserModel.currentUser.server elide: Text.ElideRight - color: Style.currentUserHeaderTextColor + color: Style.nmcCurrentUserHeaderColor font.pixelSize: Style.subLinePixelSize } } @@ -594,11 +625,11 @@ ApplicationWindow { ColorOverlay { cached: true - color: Style.currentUserHeaderTextColor + color: Style.ncSecondaryTextColor width: source.width height: source.height source: Image { - Layout.alignment: Qt.AlignRight + Layout.alignment: Qt.AlignLeft verticalAlignment: Qt.AlignCenter Layout.margins: Style.accountDropDownCaretMargin source: "qrc:///client/theme/white/caret-down.svg" @@ -616,10 +647,25 @@ ApplicationWindow { Layout.fillWidth: true } + NMCHeaderButton { + id: trayWindowLocalButton + Layout.preferredHeight: Style.nmcTrayWindowItemListHeight + Layout.preferredWidth: implicitWidth + icon.source: "qrc:///client/theme/white/folder.svg" + text: qsTr("Local folder") + onClicked: { + UserModel.openCurrentAccountLocalFolder() + } + NCToolTip { + visible: trayWindowLocalButton.hovered + text: qsTr("Open local folder") + } + } + TrayFoldersMenuButton { id: openLocalFolderButton - visible: currentUser.hasLocalFolder + visible: false //NMC customization currentUser: UserModel.currentUser @@ -636,42 +682,32 @@ ApplicationWindow { Layout.preferredHeight: Style.trayWindowHeaderHeight } - HeaderButton { + NMCHeaderButton { id: trayWindowTalkButton visible: UserModel.currentUser.serverHasTalk icon.source: "qrc:///client/theme/white/talk-app.svg" icon.color: Style.currentUserHeaderTextColor onClicked: UserModel.openCurrentAccountTalk() - - Accessible.role: Accessible.Button - Accessible.name: qsTr("Open Nextcloud Talk in browser") - Accessible.onPressAction: trayWindowTalkButton.clicked() - - Layout.alignment: Qt.AlignRight - Layout.preferredWidth: Style.trayWindowHeaderHeight - Layout.preferredHeight: Style.trayWindowHeaderHeight - } - HeaderButton { + NMCHeaderButton { id: trayWindowAppsButton + Layout.preferredHeight: Style.nmcTrayWindowItemListHeight + Layout.preferredWidth: implicitWidth + icon.source: "qrc:///client/theme/white/more-apps.svg" icon.color: Style.currentUserHeaderTextColor + text: qsTr("Open website") onClicked: { - if(appsMenuListView.count <= 0) { - UserModel.openCurrentAccountServer() - } else if (appsMenu.visible) { - appsMenu.close() - } else { - appsMenu.open() - } + UserModel.openCurrentAccountServer() } - - Accessible.role: Accessible.ButtonMenu - Accessible.name: qsTr("More apps") - Accessible.onPressAction: trayWindowAppsButton.clicked() + NCToolTip { + visible: trayWindowAppsButton.hovered + text: qsTr("Open website") + } + Layout.rightMargin: Style.nmcTrayWindowHeaderLeftMargin Menu { id: appsMenu @@ -680,7 +716,7 @@ ApplicationWindow { width: Style.trayWindowWidth * Style.trayWindowMenuWidthFactor height: implicitHeight + y > Style.trayWindowHeight ? Style.trayWindowHeight - y : implicitHeight closePolicy: Menu.CloseOnPressOutsideParent | Menu.CloseOnEscape - + visible: false background: Rectangle { border.color: palette.dark color: palette.base @@ -734,9 +770,22 @@ ApplicationWindow { } } // Rectangle trayWindowHeaderBackground + Rectangle{ + visible: true + width: Style.trayWindowWidth + height: 1 + color: Style.ncSecondaryTextColor + anchors { + top: trayWindowHeaderBackground.bottom + left: trayWindowMainItem.left + right: trayWindowMainItem.right + } + } + UnifiedSearchInputContainer { id: trayWindowUnifiedSearchInputContainer - height: Style.trayWindowHeaderHeight * 0.65 + height: visible ? Style.trayWindowHeaderHeight * 0.65 : 0 + visible: Style.isSearchFieldVisible anchors { top: trayWindowHeaderBackground.bottom @@ -757,7 +806,9 @@ ApplicationWindow { ErrorBox { id: unifiedSearchResultsErrorLabel - visible: UserModel.currentUser.unifiedSearchResultsListModel.errorString && !unifiedSearchResultsListView.visible && ! UserModel.currentUser.unifiedSearchResultsListModel.isSearchInProgress && ! UserModel.currentUser.unifiedSearchResultsListModel.currentFetchMoreInProgressProviderId + visible: Style.isSearchFieldVisible //UserModel.currentUser.unifiedSearchResultsListModel.errorString && + //!unifiedSearchResultsListView.visible && ! UserModel.currentUser.unifiedSearchResultsListModel.isSearchInProgress && + //! UserModel.currentUser.unifiedSearchResultsListModel.currentFetchMoreInProgressProviderId text: UserModel.currentUser.unifiedSearchResultsListModel.errorString anchors.top: trayWindowUnifiedSearchInputContainer.bottom anchors.left: trayWindowMainItem.left @@ -780,7 +831,7 @@ ApplicationWindow { property bool isSearchResultsEmpty: unifiedSearchResultsListView.count === 0 property bool nothingFound: text && isSearchResultsEmpty && !UserModel.currentUser.unifiedSearchResultsListModel.errorString - visible: !isSearchRunning && !waitingForSearchTermEditEnd && nothingFound + visible: Style.isSearchFieldVisible //!isSearchRunning && !waitingForSearchTermEditEnd && nothingFound } Loader { @@ -815,7 +866,7 @@ ApplicationWindow { } visible: unifiedSearchResultsListView.count > 0 - anchors.top: trayWindowUnifiedSearchInputContainer.bottom + anchors.top: trayWindowHeaderBackground.bottom anchors.left: trayWindowMainItem.left anchors.right: trayWindowMainItem.right anchors.bottom: trayWindowMainItem.bottom @@ -857,7 +908,7 @@ ApplicationWindow { visible: !trayWindowMainItem.isUnifiedSearchActive - anchors.top: trayWindowUnifiedSearchInputContainer.bottom + anchors.top: trayWindowHeaderBackground.bottom anchors.left: trayWindowMainItem.left anchors.right: trayWindowMainItem.right } @@ -885,7 +936,7 @@ ApplicationWindow { textColorHovered: Style.currentUserHeaderTextColor contentsFont.bold: true bgNormalColor: Qt.lighter(bgHoverColor, 1.25) - bgHoverColor: Style.currentUserHeaderColor + bgHoverColor: Style.nmcCurrentUserHeaderColor bgNormalOpacity: Style.newActivitiesBgNormalOpacity bgHoverOpacity: Style.newActivitiesBgHoverOpacity diff --git a/theme.qrc.in b/theme.qrc.in index e8d88fc8a1b0c..3484c896f581d 100644 --- a/theme.qrc.in +++ b/theme.qrc.in @@ -225,6 +225,7 @@ theme/colored/talk-bordered.svg theme/colored/@APPLICATION_ICON_NAME@-icon.svg theme/add.svg + theme/NMCIcons/LogoMagenta.svg theme/share.svg theme/reply.svg theme/magnifying-glass.svg diff --git a/theme/NMCIcons/LogoMagenta.svg b/theme/NMCIcons/LogoMagenta.svg new file mode 100644 index 0000000000000..4739a5a864dbc --- /dev/null +++ b/theme/NMCIcons/LogoMagenta.svg @@ -0,0 +1,23 @@ + + diff --git a/theme/Style/Style.qml b/theme/Style/Style.qml index 4d1360c31e0a1..bc50928c154f2 100644 --- a/theme/Style/Style.qml +++ b/theme/Style/Style.qml @@ -35,12 +35,12 @@ QtObject { readonly property int subLinePixelSize: topLinePixelSize - 2 // Dimensions and sizes - property int trayWindowWidth: variableSize(400) - property int trayWindowHeight: variableSize(510) - property int trayWindowRadius: 10 + property int trayWindowWidth: variableSize(380) //variableSize(400) + property int trayWindowHeight: variableSize(600) //variableSize(510) + property int trayWindowRadius: 0 //10 property int trayWindowBorderWidth: variableSize(1) property int trayWindowHeaderHeight: variableSize(60) - property int trayHorizontalMargin: 10 + property int trayHorizontalMargin: 20 //10 property int trayModalWidth: 380 property int trayModalHeight: 490 property int trayListItemIconSize: accountAvatarSize @@ -75,7 +75,7 @@ QtObject { property url stateOnlineImageSource: Theme.stateOnlineImageSource property url stateOfflineImageSource: Theme.stateOfflineImageSource - property int accountAvatarSize: (trayWindowHeaderHeight - 16) + property int accountAvatarSize: (trayWindowHeaderHeight - 36) //(trayWindowHeaderHeight - 16) property int accountAvatarStateIndicatorSize: 16 property int folderStateIndicatorSize: 16 property int accountLabelWidth: 128 @@ -87,7 +87,7 @@ QtObject { property double trayFoldersMenuButtonDropDownCaretIconSizeFraction: 0.3 property double trayFoldersMenuButtonMainIconSizeFraction: 1.0 - trayFoldersMenuButtonDropDownCaretIconSizeFraction - property int addAccountButtonHeight: 50 + property int addAccountButtonHeight: 0 property int headerButtonIconSize: 32 property int dismissButtonSize: 26 @@ -192,4 +192,14 @@ QtObject { function variableSize(size) { return size * (1 + Math.min(pixelSize / 100, 1)); } + + //NMCStyle + property int nmcTrayWindowHeaderHeight: variableSize(36) + property int nmcTrayWindowItemListHeight: variableSize(52) + property int nmcTrayWindowHeaderLeftMargin: 20 + property int nmcTopBottomHeaderMargin: 5 + readonly property color nmcBrowserButtonColor: "#484848" + readonly property color nmcCurrentUserHeaderColor: currentUserHeaderColor + readonly property bool isSearchFieldVisible: false + readonly property string nmcLogoMagenta: "qrc:///client/theme/NMCIcons/LogoMagenta.svg" } diff --git a/theme/white/folder.svg b/theme/white/folder.svg index f0f077be560fa..0007cf46b16aa 100644 --- a/theme/white/folder.svg +++ b/theme/white/folder.svg @@ -1 +1,13 @@ - \ No newline at end of file + + + icon/content/folder/default@svg + + + + + + + + + + \ No newline at end of file diff --git a/theme/white/more-apps.svg b/theme/white/more-apps.svg index ee5b522769f82..4e7414d046c15 100644 --- a/theme/white/more-apps.svg +++ b/theme/white/more-apps.svg @@ -1 +1,7 @@ - + + + icon/content/news/default@svg + + + + \ No newline at end of file