From 5e362c2c2e3e450d973abf60bde482638fa64098 Mon Sep 17 00:00:00 2001
From: cberthet <capucine.berthet@savoirfairelinux.com>
Date: Thu, 16 Nov 2023 15:04:39 -0500
Subject: [PATCH] AccountComboBox: new design
GitLab: #1417
Change-Id: I4b69d45d8c043d38fb5c9367c87c167fa291cc46
---
resources/icons/manage_accounts_24dp.svg | 14 +
resources/icons/person_add_24dp.svg | 10 +
resources/icons/settings_24dp.svg | 16 +-
src/app/constant/JamiStrings.qml | 3 +-
src/app/constant/JamiTheme.qml | 1 +
.../mainview/components/AccountComboBox.qml | 153 +++++----
.../components/AccountComboBoxPopup.qml | 295 ++++++++++++++++--
.../components/AccountItemDelegate.qml | 21 +-
src/app/mainview/components/SidePanel.qml | 6 +
9 files changed, 404 insertions(+), 115 deletions(-)
create mode 100644 resources/icons/manage_accounts_24dp.svg
create mode 100644 resources/icons/person_add_24dp.svg
diff --git a/resources/icons/manage_accounts_24dp.svg b/resources/icons/manage_accounts_24dp.svg
new file mode 100644
index 000000000..00a0ae67e
--- /dev/null
+++ b/resources/icons/manage_accounts_24dp.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+ <g id="manage_accounts_black_24dp" opacity="1">
+ <g id="Group_82" data-name="Group 82">
+ <path id="Path_314" data-name="Path 314" d="M0,0H24V24H0Z" fill="none"/>
+ </g>
+ <g id="Group_84" data-name="Group 84">
+ <g id="Group_83" data-name="Group 83">
+ <path id="Path_315" data-name="Path 315" d="M4,18v-.65a.946.946,0,0,1,.41-.81A10.889,10.889,0,0,1,10,15a.22.22,0,0,1,.08.01,6.886,6.886,0,0,1,.59-1.98c-.22-.02-.44-.03-.67-.03a12.876,12.876,0,0,0-6.61,1.82A2.922,2.922,0,0,0,2,17.35V20h9.26a7.133,7.133,0,0,1-.97-2Z" fill="black"/>
+ <path id="Path_316" data-name="Path 316" d="M10,12A4,4,0,1,0,6,8,4,4,0,0,0,10,12Zm0-6A2,2,0,1,1,8,8,2.006,2.006,0,0,1,10,6Z" fill="black"/>
+ <path id="Path_317" data-name="Path 317" d="M20.75,16a4.338,4.338,0,0,0-.06-.63l1.14-1.01-1-1.73-1.45.49a3.647,3.647,0,0,0-1.08-.63L18,11H16l-.3,1.49a3.647,3.647,0,0,0-1.08.63l-1.45-.49-1,1.73,1.14,1.01a4.338,4.338,0,0,0-.06.63,4.338,4.338,0,0,0,.06.63l-1.14,1.01,1,1.73,1.45-.49a3.647,3.647,0,0,0,1.08.63L16,21h2l.3-1.49a3.647,3.647,0,0,0,1.08-.63l1.45.49,1-1.73-1.14-1.01A4.338,4.338,0,0,0,20.75,16ZM17,18a2,2,0,1,1,2-2A2.006,2.006,0,0,1,17,18Z" fill="black"/>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/resources/icons/person_add_24dp.svg b/resources/icons/person_add_24dp.svg
new file mode 100644
index 000000000..e3053b746
--- /dev/null
+++ b/resources/icons/person_add_24dp.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+ <g id="person_add_alt_black_24dp" opacity="1">
+ <g id="Group_80" data-name="Group 80">
+ <rect id="Rectangle_324" data-name="Rectangle 324" width="24" height="24" fill="none"/>
+ </g>
+ <g id="Group_81" data-name="Group 81">
+ <path id="Path_313" data-name="Path 313" d="M20,9V6H18V9H15v2h3v3h2V11h3V9ZM9,12A4,4,0,1,0,5,8,4,4,0,0,0,9,12ZM9,6A2,2,0,1,1,7,8,2.006,2.006,0,0,1,9,6Zm6.39,8.56a13.867,13.867,0,0,0-12.78,0A2.971,2.971,0,0,0,1,17.22V20H17V17.22A2.971,2.971,0,0,0,15.39,14.56ZM15,18H3v-.78a.971.971,0,0,1,.52-.88A12.108,12.108,0,0,1,9,15a12.108,12.108,0,0,1,5.48,1.34.971.971,0,0,1,.52.88Z" fill="black"/>
+ </g>
+ </g>
+</svg>
diff --git a/resources/icons/settings_24dp.svg b/resources/icons/settings_24dp.svg
index 73654ba3c..e5c895bc9 100644
--- a/resources/icons/settings_24dp.svg
+++ b/resources/icons/settings_24dp.svg
@@ -1,13 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <title>Settings</title>
- <g id="Icones" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
- <g id="Settings" fill="#000000" fill-rule="nonzero">
- <g id="Shape" transform="translate(2.000000, 2.000000)">
- <path d="M0.833333333,4.16666667 L3.45208333,4.16666667 C3.82561804,5.63721759 5.14941646,6.66679689 6.66666667,6.66679689 C8.18391688,6.66679689 9.5077153,5.63721759 9.88125,4.16666667 L19.1666667,4.16666667 C19.626904,4.16666667 20,3.79357062 20,3.33333333 C20,2.87309604 19.626904,2.5 19.1666667,2.5 L9.88125,2.5 C9.5077153,1.02944908 8.18391688,-0.000130218715 6.66666667,-0.000130218715 C5.14941646,-0.000130218715 3.82561804,1.02944908 3.45208333,2.5 L0.833333333,2.5 C0.373096042,2.5 0,2.87309604 0,3.33333333 C0,3.79357062 0.373096042,4.16666667 0.833333333,4.16666667 L0.833333333,4.16666667 Z M6.66666667,1.66666667 C7.58714125,1.66666667 8.33333333,2.41285875 8.33333333,3.33333333 C8.33333333,4.25380792 7.58714125,5 6.66666667,5 C5.74619208,5 5,4.25380792 5,3.33333333 C5,2.41285875 5.74619208,1.66666667 6.66666667,1.66666667 Z"></path>
- <path d="M0.833333333,10.8333333 L10.11875,10.8333333 C10.4922847,12.3038843 11.8160831,13.3334636 13.3333333,13.3334636 C14.8505835,13.3334636 16.174382,12.3038843 16.5479167,10.8333333 L19.1666667,10.8333333 C19.626904,10.8333333 20,10.4602373 20,10 C20,9.53976271 19.626904,9.16666667 19.1666667,9.16666667 L16.5479167,9.16666667 C16.174382,7.69611574 14.8505835,6.66653645 13.3333333,6.66653645 C11.8160831,6.66653645 10.4922847,7.69611574 10.11875,9.16666667 L0.833333333,9.16666667 C0.373096042,9.16666667 0,9.53976271 0,10 C0,10.4602373 0.373096042,10.8333333 0.833333333,10.8333333 L0.833333333,10.8333333 Z M13.3333333,8.33333333 C14.2538079,8.33333333 15,9.07952542 15,10 C15,10.9204746 14.2538079,11.6666667 13.3333333,11.6666667 C12.4128588,11.6666667 11.6666667,10.9204746 11.6666667,10 C11.6666667,9.07952542 12.4128588,8.33333333 13.3333333,8.33333333 Z"></path>
- <path d="M0.833333333,17.5 L3.45208333,17.5 C3.82561804,18.9705509 5.14941646,20.0001302 6.66666667,20.0001302 C8.18391688,20.0001302 9.5077153,18.9705509 9.88125,17.5 L19.1666667,17.5 C19.626904,17.5 20,17.126904 20,16.6666667 C20,16.2064294 19.626904,15.8333333 19.1666667,15.8333333 L9.88125,15.8333333 C9.5077153,14.3627824 8.18391688,13.3332031 6.66666667,13.3332031 C5.14941646,13.3332031 3.82561804,14.3627824 3.45208333,15.8333333 L0.833333333,15.8333333 C0.373096042,15.8333333 0,16.2064294 0,16.6666667 C0,17.126904 0.373096042,17.5 0.833333333,17.5 Z M6.66666667,15 C7.58714125,15 8.33333333,15.7461921 8.33333333,16.6666667 C8.33333333,17.5871412 7.58714125,18.3333333 6.66666667,18.3333333 C5.74619208,18.3333333 5,17.5871412 5,16.6666667 C5,15.7461921 5.74619208,15 6.66666667,15 Z"></path>
- </g>
- </g>
- </g>
-</svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="19.901" viewBox="0 0 20 19.901">
+ <path id="settings_FILL0_wght400_GRAD0_opsz24_1_" data-name="settings_FILL0_wght400_GRAD0_opsz24 (1)" d="M85.264-860.1l-.4-3.184a3.774,3.774,0,0,1-.609-.3q-.286-.174-.56-.373l-2.96,1.244L78-867.438l2.562-1.94a2.375,2.375,0,0,1-.025-.336v-.672a2.375,2.375,0,0,1,.025-.336L78-872.662l2.736-4.726,2.96,1.244a6.791,6.791,0,0,1,.572-.373,5.014,5.014,0,0,1,.6-.3l.4-3.184h5.473l.4,3.184a3.779,3.779,0,0,1,.609.3q.286.174.56.373l2.96-1.244L98-872.662l-2.562,1.94a2.375,2.375,0,0,1,.025.336v.672a1.221,1.221,0,0,1-.05.336l2.562,1.94-2.736,4.726L92.3-863.955a6.776,6.776,0,0,1-.572.373,5.005,5.005,0,0,1-.6.3l-.4,3.184ZM87-862.09H88.97l.348-2.637a5.577,5.577,0,0,0,1.43-.585,5.946,5.946,0,0,0,1.206-.933l2.463,1.02.97-1.692-2.139-1.617a3.51,3.51,0,0,0,.174-.734,6.116,6.116,0,0,0,.05-.784,6.116,6.116,0,0,0-.05-.784,3.511,3.511,0,0,0-.174-.734l2.139-1.617-.97-1.692-2.463,1.045a5.524,5.524,0,0,0-1.206-.958,5.575,5.575,0,0,0-1.43-.585L89-878.01H87.03l-.348,2.637a5.575,5.575,0,0,0-1.43.585,5.946,5.946,0,0,0-1.206.933l-2.463-1.02-.97,1.692,2.139,1.592a4.05,4.05,0,0,0-.174.746,6.031,6.031,0,0,0-.05.8,5.833,5.833,0,0,0,.05.771,4.048,4.048,0,0,0,.174.746l-2.139,1.617.97,1.692,2.463-1.045a5.527,5.527,0,0,0,1.206.958,5.577,5.577,0,0,0,1.43.585Z" transform="translate(-78 880)"/>
+</svg>
diff --git a/src/app/constant/JamiStrings.qml b/src/app/constant/JamiStrings.qml
index 219b18679..f3c3dc6ba 100644
--- a/src/app/constant/JamiStrings.qml
+++ b/src/app/constant/JamiStrings.qml
@@ -57,7 +57,8 @@ Item {
property string displayQRCode: qsTr("Display QR code")
property string openSettings: qsTr("Open settings")
property string closeSettings: qsTr("Close settings")
- property string addAccount: qsTr("Add Account")
+ property string addAccount: qsTr("Add another account")
+ property string manageAccount: qsTr("Manage account")
// ContactPicker
property string addToConference: qsTr("Add to conference")
diff --git a/src/app/constant/JamiTheme.qml b/src/app/constant/JamiTheme.qml
index 28662b1a5..88920dda3 100644
--- a/src/app/constant/JamiTheme.qml
+++ b/src/app/constant/JamiTheme.qml
@@ -161,6 +161,7 @@ Item {
property color comboboxBackgroundColorHovered: darkTheme ? "#123F4A" : "#E5EEF5"
property color comboboxTextColor: darkTheme ? "#03B9E9" : "#005699"
property color comboboxTextColorHovered: tintedBlue
+ property color accountComboBoxBackgroundColor: darkTheme ? "#333333" : lightGrey_
// Spinbox
property color spinboxBackgroundColor: darkTheme ? editBackgroundColor : selectedColor
diff --git a/src/app/mainview/components/AccountComboBox.qml b/src/app/mainview/components/AccountComboBox.qml
index d60985c9b..48ff40bf4 100644
--- a/src/app/mainview/components/AccountComboBox.qml
+++ b/src/app/mainview/components/AccountComboBox.qml
@@ -64,99 +64,105 @@ Label {
id: background
anchors.fill: parent
- color: root.popup.opened ? Qt.lighter(JamiTheme.hoverColor, 1.0) : mouseArea.containsMouse ? Qt.lighter(JamiTheme.hoverColor, 1.05) : JamiTheme.backgroundColor
+ color: JamiTheme.backgroundColor
Behavior on color {
ColorAnimation {
duration: JamiTheme.shortFadeDuration
}
}
-
- // TODO: this can be removed when frameless window is implemented
- Rectangle {
- height: 1
- anchors {
- top: parent.top
- left: parent.left
- right: parent.right
- }
- color: JamiTheme.tabbarBorderColor
- }
- }
-
- MouseArea {
- id: mouseArea
- enabled: visible
- anchors.fill: parent
- hoverEnabled: true
- onClicked: {
- root.forceActiveFocus();
- togglePopup();
- }
}
AccountComboBoxPopup {
id: comboBoxPopup
-
- Shortcut {
- sequence: "Ctrl+J"
- context: Qt.ApplicationShortcut
- onActivated: togglePopup()
- }
}
RowLayout {
+ id: mainLayout
anchors.fill: parent
anchors.leftMargin: 15
anchors.rightMargin: 15
spacing: 10
- Avatar {
- id: avatar
+ Rectangle {
+ Layout.fillWidth: true
+ Layout.fillHeight: true
+ color: root.popup.opened ? Qt.lighter(JamiTheme.hoverColor, 1.0) : mouseArea.containsMouse ? Qt.lighter(JamiTheme.hoverColor, 1.0) : JamiTheme.backgroundColor
+ radius: 5
+ Layout.topMargin: 5
+
+ MouseArea {
+ id: mouseArea
+ enabled: visible
+ anchors.fill: parent
+ hoverEnabled: true
+ onClicked: {
+ root.forceActiveFocus();
+ togglePopup();
+ }
+ }
- Layout.preferredWidth: JamiTheme.accountListAvatarSize
- Layout.preferredHeight: JamiTheme.accountListAvatarSize
- Layout.alignment: Qt.AlignVCenter
+ RowLayout {
+ anchors.fill: parent
+ anchors.leftMargin: 15
+ anchors.rightMargin: 15
- mode: Avatar.Mode.Account
- imageId: CurrentAccount.id
- presenceStatus: CurrentAccount.status
- }
+ spacing: 10
- ColumnLayout {
- Layout.fillWidth: true
- Layout.fillHeight: true
- spacing: 2
- Text {
- id: bestNameText
+ Avatar {
+ id: avatar
- Layout.fillWidth: true
- Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+ Layout.preferredWidth: JamiTheme.accountListAvatarSize
+ Layout.preferredHeight: JamiTheme.accountListAvatarSize
+ Layout.alignment: Qt.AlignVCenter
- text: CurrentAccount.bestName
- textFormat: TextEdit.PlainText
+ mode: Avatar.Mode.Account
+ imageId: CurrentAccount.id
+ presenceStatus: CurrentAccount.status
+ }
- font.pointSize: JamiTheme.textFontSize
- color: JamiTheme.textColor
- elide: Text.ElideRight
- horizontalAlignment: Text.AlignLeft
- }
+ ColumnLayout {
+ Layout.fillWidth: true
+ Layout.fillHeight: true
+ Layout.topMargin: 15
+ Layout.bottomMargin: 10
+ spacing: 5
+
+ Text {
+ id: bestNameText
- Text {
- id: bestIdText
+ Layout.fillWidth: true
+ Layout.fillHeight: true
+ Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
- Layout.fillWidth: true
- Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+ text: CurrentAccount.bestName
+ textFormat: TextEdit.PlainText
- visible: text.length && text !== bestNameText.text
+ font.pointSize: JamiTheme.textFontSize
+ color: JamiTheme.textColor
+ elide: Text.ElideRight
+ horizontalAlignment: Text.AlignLeft
+ }
- text: CurrentAccount.bestId
- textFormat: TextEdit.PlainText
+ Text {
+ id: bestIdText
- font.pointSize: JamiTheme.textFontSize
- color: JamiTheme.faddedLastInteractionFontColor
- elide: Text.ElideRight
- horizontalAlignment: Text.AlignLeft
+ Layout.fillWidth: true
+ Layout.fillHeight: true
+ Layout.alignment: Qt.AlignLeft | Qt.AlignBottom
+
+ visible: text.length && text !== bestNameText.text
+
+ text: CurrentAccount.bestId
+ textFormat: TextEdit.PlainText
+
+ font.pointSize: JamiTheme.tinyFontSize
+ color: JamiTheme.faddedLastInteractionFontColor
+ elide: Text.ElideRight
+ horizontalAlignment: Text.AlignLeft
+ verticalAlignment: Text.AlignBottom
+ }
+ }
}
}
@@ -168,19 +174,6 @@ Label {
Layout.preferredWidth: childrenRect.width
Layout.preferredHeight: parent.height
- ResponsiveImage {
- id: arrowDropDown
-
- anchors.verticalCenter: parent.verticalCenter
-
- width: 24
- height: 24
-
- color: JamiTheme.textColor
-
- source: !root.popup.opened ? JamiResources.expand_more_24dp_svg : JamiResources.expand_less_24dp_svg
- }
-
JamiPushButton {
id: shareButton
@@ -194,7 +187,7 @@ Label {
source: JamiResources.share_24dp_svg
normalColor: JamiTheme.backgroundColor
- imageColor: JamiTheme.textColor
+ imageColor: hovered ? JamiTheme.textColor : JamiTheme.buttonTintedGreyHovered
onClicked: viewCoordinator.presentDialog(appWindow, "mainview/components/WelcomePageQrDialog.qml")
}
@@ -205,8 +198,10 @@ Label {
anchors.verticalCenter: parent.verticalCenter
source: !inSettings ? JamiResources.settings_24dp_svg : JamiResources.round_close_24dp_svg
+ imageContainerWidth: inSettings ? 30 : 24
+
normalColor: JamiTheme.backgroundColor
- imageColor: JamiTheme.textColor
+ imageColor: hovered ? JamiTheme.textColor : JamiTheme.buttonTintedGreyHovered
toolTipText: !inSettings ? JamiStrings.openSettings : JamiStrings.closeSettings
onClicked: {
diff --git a/src/app/mainview/components/AccountComboBoxPopup.qml b/src/app/mainview/components/AccountComboBoxPopup.qml
index c9dac291e..48585085a 100644
--- a/src/app/mainview/components/AccountComboBoxPopup.qml
+++ b/src/app/mainview/components/AccountComboBoxPopup.qml
@@ -23,16 +23,19 @@ import SortFilterProxyModel 0.2
import net.jami.Models 1.1
import net.jami.Adapters 1.1
import net.jami.Constants 1.1
+import net.jami.Enums 1.1
import "../../commoncomponents"
Popup {
id: root
- y: parent.height
- implicitWidth: parent.width
+ implicitWidth: parent.width - 10
+ leftMargin: 5
+ topMargin: 5
+
// limit the number of accounts shown at once
implicitHeight: {
- return visible ? Math.min(JamiTheme.accountListItemHeight * Math.min(5, listView.model.count + 1), appWindow.height - parent.height) : 0;
+ return visible ? Math.min(JamiTheme.accountListItemHeight * Math.min(6, listView.model.count + 1) + 96, appWindow.height - parent.height) : 0;
}
padding: 0
modal: true
@@ -45,6 +48,179 @@ Popup {
contentItem: ColumnLayout {
spacing: 0
+ anchors.leftMargin: 20
+
+ Rectangle {
+ id: comboBox
+
+ height: JamiTheme.accountListItemHeight
+ Layout.fillWidth: true
+ radius: 5
+ color: JamiTheme.accountComboBoxBackgroundColor
+
+ property bool inSettings: viewCoordinator.currentViewName === "SettingsView"
+
+ // TODO: remove these refresh hacks use QAbstractItemModels correctly
+ Connections {
+ target: AccountAdapter
+
+ function onAccountStatusChanged(accountId) {
+ AccountListModel.reset();
+ }
+ }
+
+ Connections {
+ target: LRCInstance
+
+ function onAccountListChanged() {
+ AccountListModel.reset();
+ }
+ }
+
+ RowLayout {
+ id: mainLayout
+ anchors.fill: parent
+ spacing: 10
+
+ Rectangle {
+ Layout.fillWidth: true
+ Layout.fillHeight: true
+ Layout.rightMargin: 5
+ Layout.leftMargin: 5
+ color: mouseArea.containsMouse ? JamiTheme.hoverColor : JamiTheme.accountComboBoxBackgroundColor
+ radius: 5
+ Layout.topMargin: 5
+
+ MouseArea {
+ id: mouseArea
+ anchors.fill: parent
+ hoverEnabled: true
+ onClicked: root.close()
+ }
+
+ RowLayout {
+ anchors.fill: parent
+ anchors.leftMargin: 10
+ anchors.rightMargin: 15
+ spacing: 10
+
+
+ Avatar {
+ id: avatar
+
+ Layout.preferredWidth: JamiTheme.accountListAvatarSize
+ Layout.preferredHeight: JamiTheme.accountListAvatarSize
+ Layout.alignment: Qt.AlignVCenter
+
+ mode: Avatar.Mode.Account
+ imageId: CurrentAccount.id
+ presenceStatus: CurrentAccount.status
+ }
+
+ ColumnLayout {
+ Layout.fillWidth: true
+ Layout.fillHeight: true
+ spacing: 2
+
+ Text {
+ id: bestNameText
+
+ Layout.fillWidth: true
+ Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+
+ text: CurrentAccount.bestName
+ textFormat: TextEdit.PlainText
+
+ font.pointSize: JamiTheme.textFontSize
+ color: JamiTheme.textColor
+ elide: Text.ElideRight
+ horizontalAlignment: Text.AlignLeft
+ }
+
+ Text {
+ id: bestIdText
+
+ Layout.fillWidth: true
+ Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+
+ visible: text.length && text !== bestNameText.text
+
+ text: CurrentAccount.bestId
+ textFormat: TextEdit.PlainText
+
+ font.pointSize: JamiTheme.tinyFontSize
+ color: JamiTheme.faddedLastInteractionFontColor
+ elide: Text.ElideRight
+ horizontalAlignment: Text.AlignLeft
+ }
+ }
+ }
+ }
+ Row {
+ id: controlRow
+
+ spacing: 10
+
+ Layout.preferredWidth: childrenRect.width
+ Layout.preferredHeight: parent.height
+ Layout.rightMargin: 7
+
+ JamiPushButton {
+ id: shareButton
+
+ width: visible ? preferredSize : 0
+ height: visible ? preferredSize : 0
+ anchors.verticalCenter: parent.verticalCenter
+
+ visible: LRCInstance.currentAccountType === Profile.Type.JAMI
+ toolTipText: JamiStrings.displayQRCode
+
+ source: JamiResources.share_24dp_svg
+
+ normalColor: JamiTheme.accountComboBoxBackgroundColor
+ imageColor: hovered ? JamiTheme.textColor : JamiTheme.buttonTintedGreyHovered
+ hoveredColor: JamiTheme.hoverColor
+
+ onClicked: {
+ viewCoordinator.presentDialog(appWindow, "mainview/components/WelcomePageQrDialog.qml");
+ root.close();
+ }
+ }
+
+ JamiPushButton {
+ id: settingsButton
+
+ anchors.verticalCenter: parent.verticalCenter
+ source: !inSettings ? JamiResources.settings_24dp_svg : JamiResources.round_close_24dp_svg
+
+ imageContainerWidth: inSettings ? 30 : 24
+
+ normalColor: JamiTheme.accountComboBoxBackgroundColor
+ imageColor: hovered ? JamiTheme.textColor : JamiTheme.buttonTintedGreyHovered
+ hoveredColor: JamiTheme.hoverColor
+
+ toolTipText: !inSettings ? JamiStrings.openSettings : JamiStrings.closeSettings
+
+ onClicked: {
+ !inSettings ? viewCoordinator.present("SettingsView") : viewCoordinator.dismiss("SettingsView");
+ root.close();
+ }
+
+ KeyNavigation.tab: addAccountItem
+ }
+ }
+ }
+ }
+
+ Rectangle{
+ Layout.alignment: Qt.AlignHCenter
+ height: 1
+ Layout.fillWidth: true
+ Layout.leftMargin: 15
+ Layout.rightMargin: 15
+ color: JamiTheme.smartListHoveredColor
+ }
+
JamiListView {
id: listView
@@ -60,6 +236,7 @@ Popup {
inverted: true
}
}
+
delegate: AccountItemDelegate {
height: JamiTheme.accountListItemHeight
width: root.width
@@ -70,45 +247,125 @@ Popup {
}
}
+ Rectangle{
+ Layout.alignment: Qt.AlignHCenter
+ height: 1
+ Layout.fillWidth: true
+ Layout.leftMargin: 15
+ Layout.rightMargin: 15
+ color: JamiTheme.smartListHoveredColor
+ }
+
// fake footer item as workaround for Qt 5.15 bug
// https://bugreports.qt.io/browse/QTBUG-85302
// don't use the clip trick and footer item overlay
// explained here https://stackoverflow.com/a/64625149
// as it causes other complexities in handling the drop shadow
ItemDelegate {
- id: footerItem
+ id: addAccountItem
- Layout.preferredHeight: JamiTheme.accountListItemHeight
- Layout.preferredWidth: parent.width
+ Layout.preferredHeight: 45
+ Layout.preferredWidth: parent.width -10
+ Layout.alignment: Qt.AlignLeft
+ Layout.leftMargin: 5
+
+ Accessible.name: JamiStrings.addAccount
+ Accessible.role: Accessible.Button
background: Rectangle {
- color: footerItem.hovered ? JamiTheme.hoverColor : JamiTheme.backgroundColor
+ color: addAccountItem.hovered ? JamiTheme.hoverColor : JamiTheme.accountComboBoxBackgroundColor
+ radius: 5
+ }
+
+ RowLayout{
+ anchors.left: parent.left
+ anchors.leftMargin: 18
+ anchors.verticalCenter: parent.verticalCenter
+ spacing: 18
+
+ ResponsiveImage {
+ id: addImage
+ Layout.alignment: Qt.AlignHCenter
+ source: JamiResources.person_add_24dp_svg
+ color: addAccountItem.hovered ? JamiTheme.textColor : JamiTheme.buttonTintedGreyHovered
+ }
Text {
- anchors.centerIn: parent
- text: JamiStrings.addAccount + "+"
+ Layout.alignment: Qt.AlignLeft
+ text: JamiStrings.addAccount
textFormat: TextEdit.PlainText
color: JamiTheme.textColor
font.pointSize: JamiTheme.textFontSize
}
}
-
onClicked: {
root.close();
viewCoordinator.present("WizardView");
}
+
+ KeyNavigation.tab: manageAccountItem
+ }
+
+ ItemDelegate {
+ id: manageAccountItem
+
+ Accessible.role: Accessible.Button
+ Accessible.name: JamiStrings.manageAccount
+
+ Layout.preferredHeight: 45
+ Layout.preferredWidth: parent.width-10
+ Layout.leftMargin: 5
+ Layout.bottomMargin: 5
+
+ background: Rectangle {
+ color: manageAccountItem.hovered ? JamiTheme.hoverColor : JamiTheme.accountComboBoxBackgroundColor
+ radius: 5
+ }
+
+ RowLayout{
+ anchors.left: parent.left
+ anchors.leftMargin: 18
+ anchors.verticalCenter: parent.verticalCenter
+ spacing: 18
+
+ ResponsiveImage {
+ id: manageImage
+
+ Layout.alignment: Qt.AlignHCenter
+ source: JamiResources.manage_accounts_24dp_svg
+ color: manageAccountItem.hovered ? JamiTheme.textColor : JamiTheme.buttonTintedGreyHovered
+ }
+ Text {
+ text: JamiStrings.manageAccount
+
+ textFormat: TextEdit.PlainText
+ color: JamiTheme.textColor
+ font.pointSize: JamiTheme.textFontSize
+ }
+ }
+ onClicked: {
+ root.close();
+ viewCoordinator.present("SettingsView")
+ }
}
}
background: Rectangle {
- color: JamiTheme.backgroundColor
- CustomBorder {
- commonBorder: false
- tBorderwidth: 1
- lBorderwidth: 2
- bBorderwidth: 2
- rBorderwidth: 1
- borderColor: JamiTheme.tabbarBorderColor
+ id: bgRect
+ color: JamiTheme.accountComboBoxBackgroundColor
+ radius: 5
+
+ layer {
+ enabled: true
+ effect: DropShadow {
+ horizontalOffset: 3.0
+ verticalOffset: 3.0
+ radius: bgRect.radius * 4
+ color: JamiTheme.shadowColor
+ source: bgRect
+ transparentBorder: true
+ samples: radius + 1
+ }
}
layer {
@@ -116,7 +373,7 @@ Popup {
effect: DropShadow {
horizontalOffset: 3.0
verticalOffset: 3.0
- radius: 16.0
+ radius: 6
color: JamiTheme.shadowColor
transparentBorder: true
samples: radius + 1
diff --git a/src/app/mainview/components/AccountItemDelegate.qml b/src/app/mainview/components/AccountItemDelegate.qml
index 917b98413..00b52219d 100644
--- a/src/app/mainview/components/AccountItemDelegate.qml
+++ b/src/app/mainview/components/AccountItemDelegate.qml
@@ -30,13 +30,28 @@ ItemDelegate {
height: JamiTheme.accountListItemHeight
background: Rectangle {
+ width: root.width - 10
+ anchors.horizontalCenter: parent.horizontalCenter
+ radius: 5
+
+ Rectangle{
+ id: separationLine
+
+ anchors.horizontalCenter: parent.horizontalCenter
+ anchors.top: parent.top
+ height: 1
+ width: parent.width - 20
+ color: JamiTheme.hoverColor
+
+ }
+
color: {
if (root.pressed)
return JamiTheme.smartListSelectedColor;
else if (root.hovered)
- return JamiTheme.smartListHoveredColor;
+ return JamiTheme.hoverColor;
else
- return JamiTheme.backgroundColor;
+ return JamiTheme.accountComboBoxBackgroundColor;
}
}
@@ -84,7 +99,7 @@ ItemDelegate {
text: Username
textFormat: TextEdit.PlainText
- font.pointSize: JamiTheme.textFontSize
+ font.pointSize: JamiTheme.tinyFontSize
color: JamiTheme.faddedLastInteractionFontColor
elide: Text.ElideRight
horizontalAlignment: Text.AlignLeft
diff --git a/src/app/mainview/components/SidePanel.qml b/src/app/mainview/components/SidePanel.qml
index acb195ab8..7e9bb8fa1 100644
--- a/src/app/mainview/components/SidePanel.qml
+++ b/src/app/mainview/components/SidePanel.qml
@@ -174,6 +174,12 @@ SidePanelBase {
}
header: AccountComboBox {
+ id: accountComboBox
+ Shortcut {
+ sequence: "Ctrl+J"
+ context: Qt.ApplicationShortcut
+ onActivated: accountComboBox.togglePopup()
+ }
}
Item {
--
GitLab