From 7f7a6cbc97cbe02a4f1a54383e67702377477543 Mon Sep 17 00:00:00 2001 From: Jonathan Rainville Date: Tue, 21 Jul 2020 17:03:22 -0400 Subject: [PATCH] feat: make profile look like the design Improve left tab menu Move settings to right panel instead of advanced Create MyProfile container Improve Contacts and Security --- ui/app/AppLayouts/Profile/LeftTab.qml | 51 ++- ui/app/AppLayouts/Profile/LeftTab/Menu.qml | 324 ++---------------- ui/app/AppLayouts/Profile/LeftTab/Profile.qml | 76 ---- .../Profile/LeftTab/components/MenuButton.qml | 57 +++ .../AppLayouts/Profile/LeftTab/constants.js | 67 ++++ ui/app/AppLayouts/Profile/ProfileLayout.qml | 17 +- .../Profile/Sections/AdvancedContainer.qml | 102 +----- .../Profile/Sections/AppearanceContainer.qml | 68 ++++ .../Profile/Sections/Contacts/Contact.qml | 1 - .../Profile/Sections/Contacts/ContactList.qml | 9 +- .../Profile/Sections/ContactsContainer.qml | 101 +++++- .../Profile/Sections/DevicesContainer.qml | 4 +- .../Profile/Sections/HelpContainer.qml | 21 +- .../Profile/Sections/LanguageContainer.qml | 33 +- .../Profile/Sections/MyProfileContainer.qml | 117 +++++++ .../Profile/Sections/PrivacyContainer.qml | 144 +++++--- .../Profile/Sections/SoundsContainer.qml | 24 ++ ui/app/AppLayouts/Wallet/WalletHeader.qml | 2 +- ui/app/img/atSign.svg | 3 + ui/app/img/bell.svg | 3 + ui/app/img/{set_currency.svg => globe.svg} | 0 ui/app/img/info.svg | 5 + ui/app/img/lock.svg | 4 + ui/app/img/myProfile.svg | 5 + ui/app/img/phone.svg | 4 + ui/app/img/question.svg | 5 + ui/app/img/slider.svg | 4 + ui/app/img/sound.svg | 3 + ui/app/img/sun.svg | 11 + ui/nim-status-client.pro | 5 + ui/shared/AddButton.qml | 4 +- ui/shared/SVGImage.qml | 3 +- ui/shared/TextWithLabel.qml | 30 +- 33 files changed, 697 insertions(+), 610 deletions(-) delete mode 100644 ui/app/AppLayouts/Profile/LeftTab/Profile.qml create mode 100644 ui/app/AppLayouts/Profile/LeftTab/components/MenuButton.qml create mode 100644 ui/app/AppLayouts/Profile/LeftTab/constants.js create mode 100644 ui/app/AppLayouts/Profile/Sections/AppearanceContainer.qml create mode 100644 ui/app/AppLayouts/Profile/Sections/MyProfileContainer.qml create mode 100644 ui/app/AppLayouts/Profile/Sections/SoundsContainer.qml create mode 100644 ui/app/img/atSign.svg create mode 100644 ui/app/img/bell.svg rename ui/app/img/{set_currency.svg => globe.svg} (100%) create mode 100644 ui/app/img/info.svg create mode 100644 ui/app/img/lock.svg create mode 100644 ui/app/img/myProfile.svg create mode 100644 ui/app/img/phone.svg create mode 100644 ui/app/img/question.svg create mode 100644 ui/app/img/slider.svg create mode 100644 ui/app/img/sound.svg create mode 100644 ui/app/img/sun.svg diff --git a/ui/app/AppLayouts/Profile/LeftTab.qml b/ui/app/AppLayouts/Profile/LeftTab.qml index 57bbe009ae..c5c0cf92cd 100644 --- a/ui/app/AppLayouts/Profile/LeftTab.qml +++ b/ui/app/AppLayouts/Profile/LeftTab.qml @@ -1,40 +1,37 @@ import QtQuick 2.13 -import QtQuick.Layouts 1.13 import "../../../imports" import "../../../shared" import "./LeftTab" -ColumnLayout { +Item { property alias currentTab: profileMenu.profileCurrentIndex id: profileInfoContainer - spacing: 0 - anchors.left: parent.left - anchors.leftMargin: 0 - anchors.top: parent.top - anchors.topMargin: 0 - anchors.bottom: parent.bottom - anchors.bottomMargin: 0 - RowLayout { - id: profileHeader - height: 240 - Layout.fillWidth: true - - Profile { - username: profileModel.profile.username - identicon: profileModel.profile.identicon - pubkey: profileModel.profile.id - } + StyledText { + id: title + text: qsTr("Profile") + anchors.top: parent.top + anchors.topMargin: Style.current.padding + anchors.horizontalCenter: parent.horizontalCenter + font.weight: Font.Bold + font.pixelSize: 17 } - RowLayout { - height: profileMenu.btnheight * 10 - Layout.fillHeight: true - Layout.fillWidth: true - - Menu { - id: profileMenu - } + Menu { + id: profileMenu + anchors.right: parent.right + anchors.rightMargin: Style.current.smallPadding + anchors.left: parent.left + anchors.leftMargin: Style.current.smallPadding + anchors.top: title.bottom + anchors.topMargin: Style.current.bigPadding + anchors.bottom: parent.bottom } } + +/*##^## +Designer { + D{i:0;autoSize:true;formeditorColor:"#ffffff";height:600;width:340} +} +##^##*/ diff --git a/ui/app/AppLayouts/Profile/LeftTab/Menu.qml b/ui/app/AppLayouts/Profile/LeftTab/Menu.qml index c15bdd869a..467eaff623 100644 --- a/ui/app/AppLayouts/Profile/LeftTab/Menu.qml +++ b/ui/app/AppLayouts/Profile/LeftTab/Menu.qml @@ -3,315 +3,37 @@ import QtQuick.Controls 2.13 import QtQuick.Layouts 1.13 import "../../../../imports" import "../../../../shared" +import "./components" +import "./constants.js" as ProfileConstants -Rectangle { - property alias profileCurrentIndex: profileScreenButtons.currentIndex +ScrollView { + property int profileCurrentIndex: ProfileConstants.PROFILE readonly property int btnheight: 42 readonly property int w: 340 - id: profileTabBar - color: Style.current.transparent - height: parent.height - Layout.fillHeight: true - Layout.fillWidth: true + id: profileMenu - TabBar { - id: profileScreenButtons - width: profileTabBar.w - height: parent.height - anchors.bottom: parent.bottom - anchors.bottomMargin: 0 - currentIndex: 0 - spacing: 0 - background: Rectangle { - color: "#00000000" - } + Column { + anchors.fill: parent + spacing: 8 - TabButton { - id: ensTabButton - width: profileTabBar.w - height: 0 //profileTabBar.btnheight - visible: false - text: "" - anchors.top: parent.top - anchors.topMargin: 0 - background: Rectangle { - color: Style.current.transparent - } - - StyledText { - id: element1 - //% "ENS usernames" - text: qsTrId("ens-usernames") - anchors.left: parent.left - anchors.leftMargin: 72 - anchors.verticalCenter: parent.verticalCenter - font.weight: profileScreenButtons.currentIndex === 0 ? Font.Bold : Font.Medium - font.pixelSize: 14 - } - } - - TabButton { - id: contactsTabButton - width: profileTabBar.w - height: profileTabBar.btnheight - text: "" - anchors.left: parent.left - anchors.leftMargin: 0 - anchors.top: ensTabButton.bottom - anchors.topMargin: 0 - background: Rectangle { - color: Style.current.transparent - } - - StyledText { - id: element2 - //% "Contacts" - text: qsTrId("contacts") - anchors.left: parent.left - anchors.leftMargin: 72 - anchors.verticalCenter: parent.verticalCenter - font.weight: profileScreenButtons.currentIndex === 1 ? Font.Bold : Font.Medium - font.pixelSize: 14 - } - } - - TabButton { - id: privacyTabButton - width: profileTabBar.w - height: profileTabBar.btnheight - text: "" - anchors.left: parent.left - anchors.leftMargin: 0 - anchors.top: contactsTabButton.bottom - anchors.topMargin: 0 - background: Rectangle { - color: Style.current.transparent - } - - StyledText { - id: element3 - //% "Privacy and security" - text: qsTrId("privacy-and-security") - anchors.left: parent.left - anchors.leftMargin: 72 - anchors.verticalCenter: parent.verticalCenter - font.weight: profileScreenButtons.currentIndex === 2 ? Font.Bold : Font.Medium - font.pixelSize: 14 - } - } - - TabButton { - id: devicesTabButton - width: profileTabBar.w - height: profileTabBar.btnheight - visible: true - text: "" - anchors.left: parent.left - anchors.leftMargin: 0 - anchors.top: privacyTabButton.bottom - anchors.topMargin: 0 - background: Rectangle { - color: Style.current.transparent - } - - StyledText { - //% "Devices" - text: qsTrId("devices") - anchors.left: parent.left - anchors.leftMargin: 72 - anchors.verticalCenter: parent.verticalCenter - font.weight: profileScreenButtons.currentIndex === 3 ? Font.Bold : Font.Medium - font.pixelSize: 14 - } - } - - TabButton { - id: syncTabButton - width: profileTabBar.w - height: 0 //profileTabBar.btnheight - visible: false - text: "" - anchors.left: parent.left - anchors.leftMargin: 0 - anchors.top: devicesTabButton.bottom - anchors.topMargin: 0 - background: Rectangle { - color: Style.current.transparent - } - - StyledText { - id: element4 - //% "Sync settings" - text: qsTrId("sync-settings") - anchors.left: parent.left - anchors.leftMargin: 72 - anchors.verticalCenter: parent.verticalCenter - font.weight: profileScreenButtons.currentIndex === 3 ? Font.Bold : Font.Medium - font.pixelSize: 14 - } - } - - TabButton { - id: languageTabButton - width: profileTabBar.w - height: 0 //profileTabBar.btnheight - visible: false - text: "" - anchors.left: parent.left - anchors.leftMargin: 0 - anchors.top: syncTabButton.bottom - anchors.topMargin: 0 - background: Rectangle { - color: Style.current.transparent - } - - StyledText { - id: element5 - //% "Language settings" - text: qsTrId("language-settings") - anchors.left: parent.left - anchors.leftMargin: 72 - anchors.verticalCenter: parent.verticalCenter - font.weight: profileScreenButtons.currentIndex === 4 ? Font.Bold : Font.Medium - font.pixelSize: 14 - } - } - - TabButton { - id: notificationsTabButton - width: profileTabBar.w - height: 0 //profileTabBar.btnheight - visible: false - text: "" - anchors.left: parent.left - anchors.leftMargin: 0 - anchors.top: languageTabButton.bottom - anchors.topMargin: 0 - background: Rectangle { - color: Style.current.transparent - } - - StyledText { - id: element6 - //% "Notifications settings" - text: qsTrId("notifications-settings") - anchors.left: parent.left - anchors.leftMargin: 72 - anchors.verticalCenter: parent.verticalCenter - font.weight: profileScreenButtons.currentIndex === 5 ? Font.Bold : Font.Medium - font.pixelSize: 14 - } - } - - TabButton { - id: advancedTabButton - width: profileTabBar.w - height: profileTabBar.btnheight - text: "" - anchors.left: parent.left - anchors.leftMargin: 0 - anchors.top: notificationsTabButton.bottom - anchors.topMargin: 0 - background: Rectangle { - color: Style.current.transparent - } - - StyledText { - id: element7 - //% "Advanced settings" - text: qsTrId("advanced-settings") - anchors.left: parent.left - anchors.leftMargin: 72 - anchors.verticalCenter: parent.verticalCenter - font.weight: profileScreenButtons.currentIndex === 6 ? Font.Bold : Font.Medium - font.pixelSize: 14 - } - } - - TabButton { - id: helpTabButton - width: profileTabBar.w - height: 0 //profileTabBar.btnheight - text: "" - visible: false - anchors.left: parent.left - anchors.leftMargin: 0 - anchors.top: advancedTabButton.bottom - anchors.topMargin: 0 - background: Rectangle { - color: Style.current.transparent - } - - StyledText { - id: element8 - //% "Need help?" - text: qsTrId("need-help") - anchors.left: parent.left - anchors.leftMargin: 72 - anchors.verticalCenter: parent.verticalCenter - font.weight: profileScreenButtons.currentIndex === 7 ? Font.Bold : Font.Medium - font.pixelSize: 14 - } - } - - TabButton { - id: aboutTabButton - width: profileTabBar.w - height: profileTabBar.btnheight - text: "" - anchors.left: parent.left - anchors.leftMargin: 0 - anchors.top: helpTabButton.bottom - anchors.topMargin: 0 - background: Rectangle { - color: Style.current.transparent - } - - StyledText { - id: element9 - //% "About" - text: qsTrId("about-app") - anchors.left: parent.left - anchors.leftMargin: 72 - anchors.verticalCenter: parent.verticalCenter - font.weight: profileScreenButtons.currentIndex === 8 ? Font.Bold : Font.Medium - font.pixelSize: 14 - } - } - - TabButton { - id: signoutTabButton - width: profileTabBar.w - height: profileTabBar.btnheight - text: "" - anchors.left: parent.left - anchors.leftMargin: 0 - anchors.bottom: parent.bottom - anchors.bottomMargin: 20 - background: Rectangle { - color: Style.current.transparent - } - - StyledText { - id: element10 - //% "Sign out" - text: qsTrId("sign-out") - anchors.left: parent.left - anchors.leftMargin: 72 - anchors.verticalCenter: parent.verticalCenter - font.weight: profileScreenButtons.currentIndex === 9 ? Font.Bold : Font.Medium - font.pixelSize: 14 - - MouseArea { - cursorShape: Qt.PointingHandCursor - anchors.fill: parent - onClicked: { - // profileModel.logout(); - Qt.quit(); - } + Repeater { + model: ProfileConstants.menuButtons + delegate: MenuButton { + text: modelData .text + source: "../../../img/" + modelData .filename + active: profileMenu.profileCurrentIndex === modelData.id + Layout.fillWidth: true + onClicked: function () { + profileMenu.profileCurrentIndex = modelData.id } } } } } + +/*##^## +Designer { + D{i:0;formeditorColor:"#ffffff";height:500;width:340} +} +##^##*/ diff --git a/ui/app/AppLayouts/Profile/LeftTab/Profile.qml b/ui/app/AppLayouts/Profile/LeftTab/Profile.qml deleted file mode 100644 index 6da7d9a63c..0000000000 --- a/ui/app/AppLayouts/Profile/LeftTab/Profile.qml +++ /dev/null @@ -1,76 +0,0 @@ -import QtQuick 2.13 -import QtQuick.Layouts 1.13 -import QtGraphicalEffects 1.13 -import "../../../../imports" -import "../../../../shared" - -Rectangle { - property string username: "Jotaro Kujo" - property string identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAhklEQVR4nOzWwQ1AQBgFYUQvelKHMtShJ9VwFyvrsExe5jvKXiYv+WPoQhhCYwiNITSG0MSEjLUPt3097r7P09L/8f4qZhFDaAyhqboIT76+TiUxixhCYwhN9b/WW6Xr1ErMIobQGEJjCI0hNIbQGEJjCI0haiRmEUNoDKExhMYQmjMAAP//B2kXcP2uDV8AAAAASUVORK5CYII=" - property string pubkey: "0x04d8c07dd137bd1b73a6f51df148b4f77ddaa11209d36e43d8344c0a7d6db1cad6085f27cfb75dd3ae21d86ceffebe4cf8a35b9ce8d26baa19dc264efe6d8f221b" - id: profileHeaderContent - height: parent.height - Layout.fillWidth: true - color: Style.current.transparent - - Item { - id: profileImgNameContainer - width: profileHeaderContent.width - height: profileHeaderContent.height - anchors.horizontalCenter: parent.horizontalCenter - anchors.top: parent.top - - Image { - id: profileImg - source: identicon - width: 80 - height: 80 - fillMode: Image.PreserveAspectCrop - anchors.horizontalCenter: parent.horizontalCenter - mipmap: true - smooth: false - antialiasing: true - property bool rounded: true - property bool adapt: false - y: 78 - - layer.enabled: rounded - layer.effect: OpacityMask { - maskSource: Item { - width: profileImg.width - height: profileImg.height - Rectangle { - anchors.centerIn: parent - width: profileImg.adapt ? profileImg.width : Math.min(profileImg.width, profileImg.height) - height: profileImg.adapt ? profileImg.height : width - radius: Math.min(width, height) - } - } - } - } - - StyledText { - id: profileName - text: username - anchors.top: profileImg.bottom - anchors.topMargin: 10 - anchors.horizontalCenterOffset: 0 - anchors.horizontalCenter: parent.horizontalCenter - font.weight: Font.Medium - font.pixelSize: 20 - } - StyledText { - id: pubkeyText - text: pubkey - font.family: Style.current.fontHexRegular.name - width: 208 - elide: Text.ElideMiddle - anchors.top: profileName.bottom - anchors.topMargin: 10 - anchors.horizontalCenterOffset: 0 - anchors.horizontalCenter: parent.horizontalCenter - font.weight: Font.Medium - font.pixelSize: 20 - } - } -} diff --git a/ui/app/AppLayouts/Profile/LeftTab/components/MenuButton.qml b/ui/app/AppLayouts/Profile/LeftTab/components/MenuButton.qml new file mode 100644 index 0000000000..c25d34fd73 --- /dev/null +++ b/ui/app/AppLayouts/Profile/LeftTab/components/MenuButton.qml @@ -0,0 +1,57 @@ +import QtQuick 2.13 +import "../../../../../imports" +import "../../../../../shared" + + +Rectangle { + property bool hovered: false + property bool active: false + property url source: "../../../../img/add_watch_only.svg" + property string text: "My Profile" + property var onClicked: function () {} + + id: menuButton + color: hovered || active ? Style.current.secondaryBackground : Style.current.transparent + border.width: 0 + height: 48 + width: parent.width + radius: Style.current.radius + + SVGImage { + id: iconImage + source: menuButton.source + height: 22 + anchors.left: parent.left + anchors.leftMargin: Style.current.padding + anchors.verticalCenter: parent.verticalCenter + fillMode: Image.PreserveAspectFit + } + + StyledText { + text: menuButton.text + anchors.left: iconImage.right + anchors.leftMargin: Style.current.padding + anchors.verticalCenter: parent.verticalCenter + } + + MouseArea { + cursorShape: Qt.PointingHandCursor + anchors.fill: parent + hoverEnabled: true + onEntered: { + menuButton.hovered = true + } + onExited: { + menuButton.hovered = false + } + onClicked: function () { + menuButton.onClicked() + } + } +} + +/*##^## +Designer { + D{i:0;formeditorColor:"#ffffff";height:48;width:300} +} +##^##*/ diff --git a/ui/app/AppLayouts/Profile/LeftTab/constants.js b/ui/app/AppLayouts/Profile/LeftTab/constants.js new file mode 100644 index 0000000000..47671eb2fc --- /dev/null +++ b/ui/app/AppLayouts/Profile/LeftTab/constants.js @@ -0,0 +1,67 @@ +var PROFILE = 0 +var CONTACTS = 1 +var ENS = 2 +var PRIVACY_AND_SECURITY = 3 +var APPEARANCE = 4 +var SOUND = 5 +var LANGUAGE = 6 +var NOTIFICATIONS = 7 +var SYNC_SETTINGS = 8 +var DEVICES_SETTINGS = 9 +var ADVANCED = 10 +var NEED_HELP = 11 +var ABOUT = 12 + +var menuButtons = [{ + "id": PROFILE, + "text": qsTr("My Profile"), + "filename": "myProfile.svg" + }, { + "id": CONTACTS, + "text": qsTr("Contacts"), + "filename": "profileActive.svg" + }, { + "id": ENS, + "text": qsTr("ENS usernames"), + "filename": "atSign.svg" + }, { + "id": PRIVACY_AND_SECURITY, + "text": qsTr("Privacy and security"), + "filename": "lock.svg" + }, { + "id": APPEARANCE, + "text": qsTr("Appearance"), + "filename": "sun.svg" + }, { + "id": SOUND, + "text": qsTr("Sound"), + "filename": "sound.svg" + }, { + "id": LANGUAGE, + "text": qsTr("Language"), + "filename": "globe.svg" + }, { + "id": NOTIFICATIONS, + "text": qsTr("Notifications"), + "filename": "bell.svg" + }, { + "id": SYNC_SETTINGS, + "text": qsTr("Sync settings"), + "filename": "phone.svg" + }, { + "id": DEVICES_SETTINGS, + "text": qsTr("Devices settings"), + "filename": "phone.svg" + }, { + "id": ADVANCED, + "text": qsTr("Advanced"), + "filename": "slider.svg" + }, { + "id": NEED_HELP, + "text": qsTr("Need help?"), + "filename": "question.svg" + }, { + "id": ABOUT, + "text": qsTr("About"), + "filename": "info.svg" + }] diff --git a/ui/app/AppLayouts/Profile/ProfileLayout.qml b/ui/app/AppLayouts/Profile/ProfileLayout.qml index 1da01fa9d9..742da5b34a 100644 --- a/ui/app/AppLayouts/Profile/ProfileLayout.qml +++ b/ui/app/AppLayouts/Profile/ProfileLayout.qml @@ -7,6 +7,7 @@ import "./Sections" SplitView { property var appSettings + property int contentMargin: 120 id: profileView Layout.fillHeight: true @@ -36,20 +37,28 @@ SplitView { anchors.leftMargin: 0 currentIndex: leftTab.currentTab - EnsContainer {} + // This list needs to match LeftTab/constants.js + // Would be better if we could make them match automatically + MyProfileContainer {} ContactsContainer {} + EnsContainer {} + PrivacyContainer {} - DevicesContainer {} + AppearanceContainer {} - SyncContainer {} + SoundsContainer {} LanguageContainer {} NotificationsContainer {} + SyncContainer {} + + DevicesContainer {} + AdvancedContainer { appSettings: profileView.appSettings } @@ -57,8 +66,6 @@ SplitView { HelpContainer {} AboutContainer {} - - SignoutContainer {} } } diff --git a/ui/app/AppLayouts/Profile/Sections/AdvancedContainer.qml b/ui/app/AppLayouts/Profile/Sections/AdvancedContainer.qml index 1d36e3b295..b82f96f710 100644 --- a/ui/app/AppLayouts/Profile/Sections/AdvancedContainer.qml +++ b/ui/app/AppLayouts/Profile/Sections/AdvancedContainer.qml @@ -3,7 +3,6 @@ import QtQuick.Controls 2.13 import QtQuick.Layouts 1.13 import "../../../../imports" import "../../../../shared" -import "./Data/locales.js" as Locales_JSON Item { property var appSettings @@ -26,84 +25,9 @@ Item { font.pixelSize: 20 } - RowLayout { - // TODO move this to a new panel once we have the appearance panel - property bool isDarkTheme: { - const isDarkTheme = profileModel.profile.appearance === 1 - if (isDarkTheme) { - Style.changeTheme('dark') - } else { - Style.changeTheme('light') - } - return isDarkTheme - } - id: themeSetting - anchors.top: title.bottom - anchors.topMargin: 20 - anchors.left: parent.left - anchors.leftMargin: 24 - StyledText { - //% "Theme (Light - Dark)" - text: qsTrId("theme-(light---dark)") - } - Switch { - checked: themeSetting.isDarkTheme - onToggled: function() { - profileModel.changeTheme(themeSetting.isDarkTheme ? 0 : 1) - } - } - } - - RowLayout { - property bool isCompactMode: appSettings.compactMode - id: compactModeSetting - anchors.top: themeSetting.bottom - anchors.topMargin: 20 - anchors.left: parent.left - anchors.leftMargin: 24 - StyledText { - //% "Chat Compact Mode" - text: qsTrId("chat-compact-mode") - } - Switch { - checked: compactModeSetting.isCompactMode - onToggled: function() { - appSettings.compactMode = !compactModeSetting.isCompactMode - } - } - } - - RowLayout { - property string currentLocale: appSettings.locale - id: languageSetting - anchors.top: compactModeSetting.bottom - anchors.topMargin: 20 - anchors.left: parent.left - anchors.leftMargin: 24 - StyledText { - text: qsTr("Language") - } - Select { - selectedText: languageSetting.currentLocale - anchors.right: undefined - anchors.left: undefined - width: 100 - Layout.leftMargin: Style.current.padding - selectOptions: Locales_JSON.locales.map(locale => { - return { - text: locale, - onClicked: function () { - profileModel.changeLocale(locale) - appSettings.locale = locale - } - } - }) - } - } - RowLayout { id: walletTabSettings - anchors.top: languageSetting.bottom + anchors.top: title.bottom anchors.topMargin: 20 anchors.left: parent.left anchors.leftMargin: 24 @@ -166,32 +90,10 @@ Item { text: qsTrId("under-development") } } - - RowLayout { - id: displayImageSettings - anchors.top: nodeTabSettings.bottom - anchors.topMargin: 20 - anchors.left: parent.left - anchors.leftMargin: 24 - StyledText { - //% "Display images in chat automatically" - text: qsTrId("display-images-in-chat-automatically") - } - Switch { - checked: appSettings.displayChatImages - onCheckedChanged: function(value) { - advancedContainer.appSettings.displayChatImages = this.checked - } - } - StyledText { - //% "under development" - text: qsTrId("under-development") - } - } RowLayout { id: networkTabSettings - anchors.top: displayImageSettings.bottom + anchors.top: nodeTabSettings.bottom anchors.topMargin: 20 anchors.left: parent.left anchors.leftMargin: 24 diff --git a/ui/app/AppLayouts/Profile/Sections/AppearanceContainer.qml b/ui/app/AppLayouts/Profile/Sections/AppearanceContainer.qml new file mode 100644 index 0000000000..829ce259f6 --- /dev/null +++ b/ui/app/AppLayouts/Profile/Sections/AppearanceContainer.qml @@ -0,0 +1,68 @@ +import QtQuick 2.13 +import QtQuick.Controls 2.13 +import QtQuick.Layouts 1.13 +import "../../../../imports" +import "../../../../shared" + +Item { + id: appearanceContainer + Layout.fillHeight: true + Layout.fillWidth: true + + StyledText { + id: title + text: qsTr("Appearance setting") + anchors.left: parent.left + anchors.leftMargin: 24 + anchors.top: parent.top + anchors.topMargin: 24 + font.weight: Font.Bold + font.pixelSize: 20 + } + + RowLayout { + property bool isDarkTheme: { + const isDarkTheme = profileModel.profile.appearance === 1 + if (isDarkTheme) { + Style.changeTheme('dark') + } else { + Style.changeTheme('light') + } + return isDarkTheme + } + id: themeSetting + anchors.top: title.bottom + anchors.topMargin: 20 + anchors.left: parent.left + anchors.leftMargin: 24 + StyledText { + //% "Theme (Light - Dark)" + text: qsTrId("theme-(light---dark)") + } + Switch { + checked: themeSetting.isDarkTheme + onToggled: function() { + profileModel.changeTheme(themeSetting.isDarkTheme ? 0 : 1) + } + } + } + + RowLayout { + property bool isCompactMode: appSettings.compactMode + id: compactModeSetting + anchors.top: themeSetting.bottom + anchors.topMargin: 20 + anchors.left: parent.left + anchors.leftMargin: 24 + StyledText { + //% "Chat Compact Mode" + text: qsTrId("chat-compact-mode") + } + Switch { + checked: compactModeSetting.isCompactMode + onToggled: function() { + appSettings.compactMode = !compactModeSetting.isCompactMode + } + } + } +} diff --git a/ui/app/AppLayouts/Profile/Sections/Contacts/Contact.qml b/ui/app/AppLayouts/Profile/Sections/Contacts/Contact.qml index 2214a8d04e..d4deb7e7af 100644 --- a/ui/app/AppLayouts/Profile/Sections/Contacts/Contact.qml +++ b/ui/app/AppLayouts/Profile/Sections/Contacts/Contact.qml @@ -23,7 +23,6 @@ Rectangle { Identicon { id: accountImage anchors.left: parent.left - anchors.leftMargin: Style.current.padding anchors.verticalCenter: parent.verticalCenter source: identicon } diff --git a/ui/app/AppLayouts/Profile/Sections/Contacts/ContactList.qml b/ui/app/AppLayouts/Profile/Sections/Contacts/ContactList.qml index fb1bdca80c..6576475e23 100644 --- a/ui/app/AppLayouts/Profile/Sections/Contacts/ContactList.qml +++ b/ui/app/AppLayouts/Profile/Sections/Contacts/ContactList.qml @@ -12,10 +12,10 @@ ListView { property var contacts: ContactsData {} property var selectable: true property alias selectedContact: contactGroup.checkedButton + property string searchString: "" + property string lowerCaseSearchString: searchString.toLowerCase() - anchors.topMargin: 48 - anchors.top: element2.bottom - anchors.fill: parent + width: parent.width model: contacts delegate: Contact { @@ -25,6 +25,9 @@ ListView { isContact: model.isContact selectable: contactList.selectable profileClick: profilePopup.openPopup.bind(profilePopup) + visible: searchString === "" || + model.name.toLowerCase().includes(lowerCaseSearchString) || + model.address.toLowerCase().includes(lowerCaseSearchString) } ProfilePopup { diff --git a/ui/app/AppLayouts/Profile/Sections/ContactsContainer.qml b/ui/app/AppLayouts/Profile/Sections/ContactsContainer.qml index 970f89ce61..5242842093 100644 --- a/ui/app/AppLayouts/Profile/Sections/ContactsContainer.qml +++ b/ui/app/AppLayouts/Profile/Sections/ContactsContainer.qml @@ -3,36 +3,103 @@ import QtQuick.Controls 2.13 import QtQuick.Layouts 1.13 import "../../../../imports" import "../../../../shared" +import "../../Chat/components" import "./Contacts" Item { id: contactsContainer - width: 200 - height: 200 Layout.fillHeight: true Layout.fillWidth: true - StyledText { - id: element2 - //% "Contacts" - text: qsTrId("contacts") - anchors.left: parent.left - anchors.leftMargin: 24 + Item { anchors.top: parent.top - anchors.topMargin: 24 - font.weight: Font.Bold - font.pixelSize: 20 - } + anchors.topMargin: 32 + anchors.right: parent.right + anchors.rightMargin: contentMargin + anchors.left: parent.left + anchors.leftMargin: contentMargin + anchors.bottom: parent.bottom - ContactList { - id: contactListView - contacts: profileModel.contactList - selectable: false + SearchBox { + id: searchBox + } + + Item { + id: addNewContact + anchors.top: searchBox.bottom + anchors.topMargin: Style.current.bigPadding + width: parent.width + height: addButton.height + + AddButton { + id: addButton + clickable: false + anchors.verticalCenter: parent.verticalCenter + } + StyledText { + id: usernameText + text: qsTr("Add new contact") + color: Style.current.blue + anchors.left: addButton.right + anchors.leftMargin: Style.current.padding + anchors.verticalCenter: addButton.verticalCenter + font.pixelSize: 15 + } + + MouseArea { + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + onClicked: { + // TODO implement adding a contact + console.log('Add a contact') + } + } + } + + ContactList { + id: contactListView + anchors.top: addNewContact.bottom + anchors.topMargin: Style.current.bigPadding + anchors.bottom: parent.bottom + contacts: profileModel.contactList + selectable: false + searchString: searchBox.text + } + + Item { + id: element + visible: profileModel.contactList.rowCount() === 0 + anchors.fill: parent + + StyledText { + id: noFriendsText + text: qsTr("You don’t have any contacts yet") + anchors.verticalCenterOffset: -Style.current.bigPadding + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + font.pixelSize: 15 + color: Style.current.darkGrey + } + + StyledButton { + anchors.horizontalCenter: noFriendsText.horizontalCenter + anchors.top: noFriendsText.bottom + anchors.topMargin: Style.current.bigPadding + label: qsTr("Invite firends") + onClicked: function () { + inviteFriendsPopup.open() + } + } + + InviteFriendsPopup { + id: inviteFriendsPopup + } + } } } /*##^## Designer { - D{i:0;width:600} + D{i:0;autoSize:true;formeditorColor:"#ffffff";formeditorZoom:0.6600000262260437;height:480;width:600} } ##^##*/ diff --git a/ui/app/AppLayouts/Profile/Sections/DevicesContainer.qml b/ui/app/AppLayouts/Profile/Sections/DevicesContainer.qml index ed91bc77e9..6dba5b9e96 100644 --- a/ui/app/AppLayouts/Profile/Sections/DevicesContainer.qml +++ b/ui/app/AppLayouts/Profile/Sections/DevicesContainer.qml @@ -163,8 +163,8 @@ Item { anchors.top: deviceListLbl.bottom anchors.topMargin: Style.current.padding spacing: 5 - anchors.right: syncContainer.right - anchors.left: syncContainer.left + anchors.right: parent.right + anchors.left: parent.left delegate: Item { height: childrenRect.height SVGImage { diff --git a/ui/app/AppLayouts/Profile/Sections/HelpContainer.qml b/ui/app/AppLayouts/Profile/Sections/HelpContainer.qml index cbf157b784..e1fe0eaf81 100644 --- a/ui/app/AppLayouts/Profile/Sections/HelpContainer.qml +++ b/ui/app/AppLayouts/Profile/Sections/HelpContainer.qml @@ -24,15 +24,16 @@ Item { font.pixelSize: 20 } - StyledText { - anchors.centerIn: parent - text: Utils.linkifyAndXSS(link) - onLinkActivated: Qt.openUrlExternally(link) + // FIXME the link doesn't exist +// StyledText { +// anchors.centerIn: parent +// text: Utils.linkifyAndXSS(link) +// onLinkActivated: Qt.openUrlExternally(link) - MouseArea { - anchors.fill: parent - acceptedButtons: Qt.NoButton // we don't want to eat clicks on the Text - cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor - } - } +// MouseArea { +// anchors.fill: parent +// acceptedButtons: Qt.NoButton // we don't want to eat clicks on the Text +// cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor +// } +// } } diff --git a/ui/app/AppLayouts/Profile/Sections/LanguageContainer.qml b/ui/app/AppLayouts/Profile/Sections/LanguageContainer.qml index 1d55d8cef7..a07bdab52f 100644 --- a/ui/app/AppLayouts/Profile/Sections/LanguageContainer.qml +++ b/ui/app/AppLayouts/Profile/Sections/LanguageContainer.qml @@ -3,16 +3,15 @@ import QtQuick.Controls 2.13 import QtQuick.Layouts 1.13 import "../../../../imports" import "../../../../shared" +import "./Data/locales.js" as Locales_JSON Item { id: languageContainer - width: 200 - height: 200 Layout.fillHeight: true Layout.fillWidth: true StyledText { - id: element5 + id: title //% "Language settings" text: qsTrId("language-settings") anchors.left: parent.left @@ -22,4 +21,32 @@ Item { font.weight: Font.Bold font.pixelSize: 20 } + + RowLayout { + property string currentLocale: appSettings.locale + id: languageSetting + anchors.top: title.bottom + anchors.topMargin: 20 + anchors.left: parent.left + anchors.leftMargin: 24 + StyledText { + text: qsTr("Language") + } + Select { + selectedText: languageSetting.currentLocale + anchors.right: undefined + anchors.left: undefined + width: 100 + Layout.leftMargin: Style.current.padding + selectOptions: Locales_JSON.locales.map(locale => { + return { + text: locale, + onClicked: function () { + profileModel.changeLocale(locale) + appSettings.locale = locale + } + } + }) + } + } } diff --git a/ui/app/AppLayouts/Profile/Sections/MyProfileContainer.qml b/ui/app/AppLayouts/Profile/Sections/MyProfileContainer.qml new file mode 100644 index 0000000000..6fa2ee14da --- /dev/null +++ b/ui/app/AppLayouts/Profile/Sections/MyProfileContainer.qml @@ -0,0 +1,117 @@ +import QtQuick 2.13 +import QtQuick.Layouts 1.13 +import QtGraphicalEffects 1.13 +import "../../../../imports" +import "../../../../shared" + +Item { + property string username: "Jotaro Kujo" + property string identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAhklEQVR4nOzWwQ1AQBgFYUQvelKHMtShJ9VwFyvrsExe5jvKXiYv+WPoQhhCYwiNITSG0MSEjLUPt3097r7P09L/8f4qZhFDaAyhqboIT76+TiUxixhCYwhN9b/WW6Xr1ErMIobQGEJjCI0hNIbQGEJjCI0haiRmEUNoDKExhMYQmjMAAP//B2kXcP2uDV8AAAAASUVORK5CYII=" + property string pubkey: "0x04d8c07dd137bd1b73a6f51df148b4f77ddaa11209d36e43d8344c0a7d6db1cad6085f27cfb75dd3ae21d86ceffebe4cf8a35b9ce8d26baa19dc264efe6d8f221b" + property string address: "0x13Ed66d9Ffcd4dC1fB86B9414b8c60677E5Ae1cE" + + id: profileHeaderContent + height: parent.height + Layout.fillWidth: true + + Item { + id: profileImgNameContainer + anchors.top: parent.top + anchors.topMargin: 64 + anchors.right: parent.right + anchors.rightMargin: contentMargin + anchors.left: parent.left + anchors.leftMargin: contentMargin + + height: this.childrenRect.height + + Rectangle { + id: profileImg + width: identiconImage.width + height: identiconImage.height + border.width: 1 + border.color: Style.current.border + radius: 50 + + Image { + id: identiconImage + width: 44 + height: 44 + fillMode: Image.PreserveAspectFit + source: identicon + mipmap: true + smooth: false + antialiasing: true + } + } + + StyledText { + id: profileName + text: username + anchors.left: profileImg.right + anchors.leftMargin: 8 + anchors.top: profileImg.top + font.weight: Font.Medium + font.pixelSize: 15 + } + + StyledText { + id: pubkeyText + text: address + anchors.bottom: profileImg.bottom + anchors.left: profileName.left + font.family: Style.current.fontHexRegular.name + elide: Text.ElideMiddle + width: 140 + font.pixelSize: 15 + color: Style.current.darkGrey + } + + SVGImage { + source: "../../../img/qr-code-icon.svg" + width: 18 + height: 18 + anchors.right: parent.right + + MouseArea { + cursorShape: Qt.PointingHandCursor + onClicked: { + console.log('QR code ples') + } + } + } + + Separator { + id: lineSeparator + anchors.top: profileImg.bottom + anchors.topMargin: 36 + + } + } + + Column { + anchors.right: profileImgNameContainer.right + anchors.left: profileImgNameContainer.left + spacing: Style.current.bigPadding + anchors.top: profileImgNameContainer.bottom + anchors.topMargin: Style.current.smallPadding + + TextWithLabel { + label: qsTr("Chat key") + text: pubkey.substring(0, 13) + "..." + pubkey.substring(pubkey.length - 13) + textToCopy: pubkey + } + + TextWithLabel { + label: qsTr("Share Profile URL") + text: `https://join.status.im/u/${pubkey.substring(0, 5)}...${pubkey.substring(pubkey.length - 5)}` + textToCopy: `https://join.status.im/u/${pubkey}` + } + } +} + +/*##^## +Designer { + D{i:0;formeditorColor:"#ffffff"} +} +##^##*/ diff --git a/ui/app/AppLayouts/Profile/Sections/PrivacyContainer.qml b/ui/app/AppLayouts/Profile/Sections/PrivacyContainer.qml index 3eab7bd8be..5425003f45 100644 --- a/ui/app/AppLayouts/Profile/Sections/PrivacyContainer.qml +++ b/ui/app/AppLayouts/Profile/Sections/PrivacyContainer.qml @@ -1,61 +1,113 @@ import QtQuick 2.13 import QtQuick.Controls 2.13 import QtQuick.Layouts 1.13 +import QtGraphicalEffects 1.13 import "../../../../imports" import "../../../../shared" Item { id: privacyContainer - width: 200 - height: 200 Layout.fillHeight: true Layout.fillWidth: true - StyledText { - id: element3 - //% "Privacy and security settings" - text: qsTrId("privacy-and-security-settings") - anchors.left: parent.left - anchors.leftMargin: 24 - anchors.top: parent.top - anchors.topMargin: 24 - font.weight: Font.Bold - font.pixelSize: 20 - } - - StyledText { - id: labelSecurity - //% "Security" - text: qsTrId("security") - font.pixelSize: 13 - font.weight: Font.Medium - color: Style.current.darkGrey - anchors.left: parent.left - anchors.leftMargin: Style.current.bigPadding - anchors.top: element3.bottom - anchors.topMargin: Style.current.smallPadding - } - Item { - anchors.top: labelSecurity.bottom - anchors.topMargin: Style.current.padding - anchors.left: parent.left - anchors.leftMargin: Style.current.bigPadding - height: children[0].height - width: children[0].width - StyledText { - //% "Backup Seed Phrase" - text: qsTrId("backup-seed-phrase") - font.pixelSize: 14 - } - MouseArea { - anchors.fill: parent - onClicked: backupSeedModal.open() - cursorShape: Qt.PointingHandCursor - } - } + id: profileImgNameContainer + anchors.top: parent.top + anchors.topMargin: 46 + anchors.right: parent.right + anchors.rightMargin: contentMargin + anchors.left: parent.left + anchors.leftMargin: contentMargin + anchors.bottom: parent.bottom - BackupSeedModal{ - id: backupSeedModal + StyledText { + id: labelSecurity + //% "Security" + text: qsTrId("security") + font.pixelSize: 15 + color: Style.current.darkGrey + } + + Item { + id: backupSeedPhrase + anchors.top: labelSecurity.bottom + anchors.topMargin: Style.current.padding + height: backupText.height + width: parent.width + + StyledText { + id: backupText + //% "Backup Seed Phrase" + text: qsTrId("backup-seed-phrase") + font.pixelSize: 15 + } + + SVGImage { + id: caret + anchors.right: parent.right + anchors.rightMargin: 0 + anchors.verticalCenter: backupText.verticalCenter + source: "../../../img/caret.svg" + width: 13 + height: 7 + rotation: -90 + } + ColorOverlay { + anchors.fill: caret + source: caret + color: Style.current.darkGrey + rotation: -90 + } + + MouseArea { + anchors.fill: parent + onClicked: backupSeedModal.open() + cursorShape: Qt.PointingHandCursor + } + } + + BackupSeedModal { + id: backupSeedModal + } + + Separator { + id: separator + anchors.top: backupSeedPhrase.bottom + anchors.topMargin: Style.current.bigPadding + } + StyledText { + id: labelPrivacy + text: qsTr("Privacy") + font.pixelSize: 15 + color: Style.current.darkGrey + anchors.top: separator.bottom + anchors.topMargin: Style.current.smallPadding + } + + RowLayout { + id: displayImageSettings + anchors.top: labelPrivacy.bottom + anchors.topMargin: Style.current.padding + StyledText { + //% "Display images in chat automatically" + text: qsTrId("display-images-in-chat-automatically") + } + Switch { + checked: appSettings.displayChatImages + onCheckedChanged: function (value) { + appSettings.displayChatImages = this.checked + } + } + StyledText { + //% "under development" + text: qsTrId("under-development") + } + } } } + +/*##^## +Designer { + D{i:0;autoSize:true;formeditorColor:"#ffffff";height:480;width:640} +} +##^##*/ diff --git a/ui/app/AppLayouts/Profile/Sections/SoundsContainer.qml b/ui/app/AppLayouts/Profile/Sections/SoundsContainer.qml new file mode 100644 index 0000000000..29fc07d875 --- /dev/null +++ b/ui/app/AppLayouts/Profile/Sections/SoundsContainer.qml @@ -0,0 +1,24 @@ +import QtQuick 2.13 +import QtQuick.Controls 2.13 +import QtQuick.Layouts 1.13 +import "../../../../imports" +import "../../../../shared" + +Item { + id: soundsContainer + width: 200 + height: 200 + Layout.fillHeight: true + Layout.fillWidth: true + + StyledText { + id: element5 + text: qsTr("Sounds settings") + anchors.left: parent.left + anchors.leftMargin: 24 + anchors.top: parent.top + anchors.topMargin: 24 + font.weight: Font.Bold + font.pixelSize: 20 + } +} diff --git a/ui/app/AppLayouts/Wallet/WalletHeader.qml b/ui/app/AppLayouts/Wallet/WalletHeader.qml index 1211cf4463..ce9c03f85f 100644 --- a/ui/app/AppLayouts/Wallet/WalletHeader.qml +++ b/ui/app/AppLayouts/Wallet/WalletHeader.qml @@ -155,7 +155,7 @@ Item { Action { //% "Set Currency" text: qsTrId("set-currency") - icon.source: "../../img/set_currency.svg" + icon.source: "../../img/globe.svg" onTriggered: { setCurrencyModal.open() } diff --git a/ui/app/img/atSign.svg b/ui/app/img/atSign.svg new file mode 100644 index 0000000000..1a8ee3945b --- /dev/null +++ b/ui/app/img/atSign.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/app/img/bell.svg b/ui/app/img/bell.svg new file mode 100644 index 0000000000..9e2d4f835a --- /dev/null +++ b/ui/app/img/bell.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/app/img/set_currency.svg b/ui/app/img/globe.svg similarity index 100% rename from ui/app/img/set_currency.svg rename to ui/app/img/globe.svg diff --git a/ui/app/img/info.svg b/ui/app/img/info.svg new file mode 100644 index 0000000000..df688b5e21 --- /dev/null +++ b/ui/app/img/info.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/ui/app/img/lock.svg b/ui/app/img/lock.svg new file mode 100644 index 0000000000..5517e970cb --- /dev/null +++ b/ui/app/img/lock.svg @@ -0,0 +1,4 @@ + + + + diff --git a/ui/app/img/myProfile.svg b/ui/app/img/myProfile.svg new file mode 100644 index 0000000000..aa0910005f --- /dev/null +++ b/ui/app/img/myProfile.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/ui/app/img/phone.svg b/ui/app/img/phone.svg new file mode 100644 index 0000000000..4a823001c6 --- /dev/null +++ b/ui/app/img/phone.svg @@ -0,0 +1,4 @@ + + + + diff --git a/ui/app/img/question.svg b/ui/app/img/question.svg new file mode 100644 index 0000000000..b58cf2f282 --- /dev/null +++ b/ui/app/img/question.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/ui/app/img/slider.svg b/ui/app/img/slider.svg new file mode 100644 index 0000000000..c3c37755b4 --- /dev/null +++ b/ui/app/img/slider.svg @@ -0,0 +1,4 @@ + + + + diff --git a/ui/app/img/sound.svg b/ui/app/img/sound.svg new file mode 100644 index 0000000000..e6e5abcaa5 --- /dev/null +++ b/ui/app/img/sound.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/app/img/sun.svg b/ui/app/img/sun.svg new file mode 100644 index 0000000000..5d956ebac8 --- /dev/null +++ b/ui/app/img/sun.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/ui/nim-status-client.pro b/ui/nim-status-client.pro index 9d49bc6931..1556a9fc58 100644 --- a/ui/nim-status-client.pro +++ b/ui/nim-status-client.pro @@ -135,7 +135,12 @@ DISTFILES += \ app/AppLayouts/Chat/components/EmojiPopup.qml \ app/AppLayouts/Chat/components/EmojiReaction.qml \ app/AppLayouts/Chat/components/InviteFriendsPopup.qml \ + app/AppLayouts/Profile/LeftTab/Constants.js \ + app/AppLayouts/Profile/LeftTab/components/MenuButton.qml \ app/AppLayouts/Chat/data/EmojiReactions.qml \ + app/AppLayouts/Profile/Sections/AppearanceContainer.qml \ + app/AppLayouts/Profile/Sections/MyProfileContainer.qml \ + app/AppLayouts/Profile/Sections/SoundsContainer.qml \ app/AppLayouts/Wallet/components/HeaderButton.qml \ app/AppLayouts/Profile/Sections/Data/locales.js \ fonts/InterStatus/InterStatus-Black.otf \ diff --git a/ui/shared/AddButton.qml b/ui/shared/AddButton.qml index 11d680b963..f0c2849a93 100644 --- a/ui/shared/AddButton.qml +++ b/ui/shared/AddButton.qml @@ -9,6 +9,7 @@ Rectangle { property int iconWidth: 14 property int iconHeight: 14 property alias icon: imgIcon + property bool clickable: true id: btnAddContainer width: 36 @@ -69,6 +70,7 @@ Rectangle { MouseArea { id: mouseArea + visible: btnAddContainer.clickable anchors.fill: parent acceptedButtons: Qt.LeftButton | Qt.RightButton cursorShape: Qt.PointingHandCursor @@ -77,4 +79,4 @@ Rectangle { btnAddContainer.clicked() } } -} \ No newline at end of file +} diff --git a/ui/shared/SVGImage.qml b/ui/shared/SVGImage.qml index 33bf0bc790..1fde35ecd7 100644 --- a/ui/shared/SVGImage.qml +++ b/ui/shared/SVGImage.qml @@ -10,5 +10,4 @@ Image { width: 0 height: 0 } - -} \ No newline at end of file +} diff --git a/ui/shared/TextWithLabel.qml b/ui/shared/TextWithLabel.qml index 0ff32c8985..3e4d057f23 100644 --- a/ui/shared/TextWithLabel.qml +++ b/ui/shared/TextWithLabel.qml @@ -7,38 +7,38 @@ Item { property string text: "My Text" property string label: "My Label" property string fontFamily: Style.current.fontRegular.name - readonly property int labelMargin: 7 + property string textToCopy: "" - id: inputBox - height: textItem.height + inputLabel.height + labelMargin - anchors.right: parent.right - anchors.left: parent.left + id: infoText + height: this.childrenRect.height + width: parent.width StyledText { id: inputLabel - text: inputBox.label + text: infoText.label font.weight: Font.Medium - anchors.left: parent.left - anchors.leftMargin: 0 - anchors.top: parent.top - anchors.topMargin: 0 font.pixelSize: 13 color: Style.current.darkGrey } StyledTextEdit { id: textItem - text: inputBox.text + text: infoText.text font.family: fontFamily selectByMouse: true readOnly: true - font.weight: Font.Medium - anchors.left: parent.left - anchors.leftMargin: 0 anchors.top: inputLabel.bottom - anchors.topMargin: inputBox.labelMargin + anchors.topMargin: 7 font.pixelSize: 15 } + + CopyToClipBoardButton { + visible: !!infoText.textToCopy + anchors.verticalCenter: textItem.verticalCenter + anchors.left: textItem.right + anchors.leftMargin: Style.current.smallPadding + textToCopy: infoText.textToCopy + } } /*##^##