diff --git a/ui/app/AppLayouts/Chat/components/Contact.qml b/ui/app/AppLayouts/Chat/components/Contact.qml index 8b9536040f..4757fe8320 100644 --- a/ui/app/AppLayouts/Chat/components/Contact.qml +++ b/ui/app/AppLayouts/Chat/components/Contact.qml @@ -17,24 +17,26 @@ Rectangle { property bool isVisible: true property bool showCheckbox: true + property bool clickable: true property bool isChecked: false - property bool showListSelector: false + property bool isHovered: false property var onItemChecked: (function(pubKey, itemChecked) { console.log(pubKey, itemChecked) }) - + id: root visible: isVisible && (isContact || isUser) height: visible ? 64 : 0 anchors.right: parent.right anchors.left: parent.left border.width: 0 radius: Style.current.radius - color: Style.current.transparent + color: isHovered ? Style.current.backgroundHover : Style.current.transparent StatusImageIdenticon { id: accountImage anchors.left: parent.left anchors.verticalCenter: parent.verticalCenter source: identicon + anchors.leftMargin: Style.current.padding } StyledText { @@ -50,22 +52,9 @@ Rectangle { anchors.leftMargin: Style.current.padding } - SVGImage { - id: image - visible: showListSelector && !showCheckbox - height: 24 - width: 24 - anchors.top: accountImage.top - anchors.topMargin: 6 - anchors.right: parent.right - anchors.rightMargin: Style.current.padding - fillMode: Image.PreserveAspectFit - source: "../../../img/list-next.svg" - } - StatusCheckBox { id: assetCheck - visible: !showListSelector && showCheckbox && !isUser + visible: showCheckbox && !isUser anchors.top: accountImage.top anchors.topMargin: 6 anchors.right: parent.right @@ -92,7 +81,10 @@ Rectangle { MouseArea { cursorShape: Qt.PointingHandCursor anchors.fill: parent - enabled: showCheckbox + enabled: root.clickable || root.showCheckbox + hoverEnabled: root.clickable || root.showCheckbox + onEntered: root.isHovered = true + onExited: root.isHovered = false onClicked: assetCheck.clicked() } } diff --git a/ui/app/AppLayouts/Chat/components/PrivateChatPopup.qml b/ui/app/AppLayouts/Chat/components/PrivateChatPopup.qml index c6c0799cdf..84a8e6e7f5 100644 --- a/ui/app/AppLayouts/Chat/components/PrivateChatPopup.qml +++ b/ui/app/AppLayouts/Chat/components/PrivateChatPopup.qml @@ -139,7 +139,6 @@ ModalPopup { name: model.name address: model.address identicon: model.thumbnailImage || model.identicon - showListSelector: true onItemChecked: function(pubKey, itemChecked){ chatsModel.joinChat(pubKey, Constants.chatTypeOneToOne); popup.close() diff --git a/ui/app/AppLayouts/Profile/Sections/NotificationAppearancePreview.qml b/ui/app/AppLayouts/Profile/Sections/NotificationAppearancePreview.qml new file mode 100644 index 0000000000..abec46e80c --- /dev/null +++ b/ui/app/AppLayouts/Profile/Sections/NotificationAppearancePreview.qml @@ -0,0 +1,67 @@ +import QtQuick 2.13 +import QtQuick.Controls 2.13 +import "./" +import "../../../../imports" +import "../../../../shared" +import "../../../../shared/status" + +Item { + property bool checked: false + property string name + property string notificationTitle + property string notificationMessage + property var buttonGroup + property bool isHovered: false + signal radioCheckedChanged(checked: bool) + + id: root + height: container.height + width: container.width + + Rectangle { + id: container + width: notificationPreview.width + Style.current.padding * 2 + height: childrenRect.height + Style.current.padding + Style.current.halfPadding + color: radioButton.checked ? Style.current.secondaryBackground : + (isHovered ? Style.current.backgroundHover : Style.current.transparent) + radius: Style.current.radius + + StatusRadioButton { + id: radioButton + text: root.name + ButtonGroup.group: root.buttonGroup + checked: root.checked + onCheckedChanged: root.radioCheckedChanged(checked) + anchors.top: parent.top + anchors.topMargin: Style.current.halfPadding + anchors.left: parent.left + anchors.leftMargin: Style.current.padding + } + + StatusNotificationWithDropShadow { + id: notificationPreview + anchors.top: radioButton.bottom + anchors.topMargin: Style.current.halfPadding + anchors.left: parent.left + name: root.notificationTitle + chatType: Constants.chatTypePublic + message: root.notificationMessage + } + + } + + MouseArea { + anchors.fill: container + hoverEnabled: true + onEntered: root.isHovered = true + onExited: root.isHovered = false + onClicked: { + if (!radioButton.checked) { + root.radioCheckedChanged(true) + } + } + + cursorShape: Qt.PointingHandCursor + } +} + diff --git a/ui/app/AppLayouts/Profile/Sections/NotificationsContainer.qml b/ui/app/AppLayouts/Profile/Sections/NotificationsContainer.qml index 991bef87ac..510d4516e2 100644 --- a/ui/app/AppLayouts/Profile/Sections/NotificationsContainer.qml +++ b/ui/app/AppLayouts/Profile/Sections/NotificationsContainer.qml @@ -47,69 +47,43 @@ ScrollView { Column { id: column - spacing: Style.current.padding anchors.top: sectionHeadlineNotifications.bottom anchors.topMargin: Style.current.smallPadding anchors.left: parent.left anchors.right: parent.right - RowLayout { - width: parent.width - StyledText { - //% "All messages" - text: qsTrId("all-messages") - font.pixelSize: 15 - } - - StatusRadioButton { - Layout.alignment: Qt.AlignRight - ButtonGroup.group: notificationSetting - rightPadding: 0 - checked: appSettings.notificationSetting === Constants.notifyAllMessages - onCheckedChanged: { - if (checked) { - appSettings.notificationSetting = Constants.notifyAllMessages - } + StatusRadioButtonRow { + //% "All messages" + text: qsTrId("all-messages") + buttonGroup: notificationSetting + checked: appSettings.notificationSetting === Constants.notifyAllMessages + onRadioCheckedChanged: { + if (checked) { + appSettings.notificationSetting = Constants.notifyAllMessages } } } - RowLayout { - width: parent.width - StyledText { - //% "Just @mentions" - text: qsTrId("just--mentions") - font.pixelSize: 15 - } - StatusRadioButton { - Layout.alignment: Qt.AlignRight - ButtonGroup.group: notificationSetting - rightPadding: 0 - checked: appSettings.notificationSetting === Constants.notifyJustMentions - onCheckedChanged: { - if (checked) { - appSettings.notificationSetting = Constants.notifyJustMentions - } + StatusRadioButtonRow { + //% "Just @mentions" + text: qsTrId("just--mentions") + buttonGroup: notificationSetting + checked: appSettings.notificationSetting === Constants.notifyJustMentions + onRadioCheckedChanged: { + if (checked) { + appSettings.notificationSetting = Constants.notifyJustMentions } } } - RowLayout { - width: parent.width - StyledText { - //% "Nothing" - text: qsTrId("nothing") - font.pixelSize: 15 - } - StatusRadioButton { - Layout.alignment: Qt.AlignRight - ButtonGroup.group: notificationSetting - rightPadding: 0 - checked: appSettings.notificationSetting === Constants.notifyNone - onCheckedChanged: { - if (checked) { - appSettings.notificationSetting = Constants.notifyNone - } + StatusRadioButtonRow { + //% "Nothing" + text: qsTrId("nothing") + buttonGroup: notificationSetting + checked: appSettings.notificationSetting === Constants.notifyNone + onRadioCheckedChanged: { + if (checked) { + appSettings.notificationSetting = Constants.notifyNone } } } @@ -127,8 +101,7 @@ ScrollView { StatusSectionHeadline { id: sectionHeadlineSound - //% "Sound & Appearance" - text: qsTrId("sound---appearance") + text: qsTr("Appearance") anchors.top: separator.bottom anchors.left: parent.left anchors.right: parent.right @@ -136,87 +109,43 @@ ScrollView { Column { id: column2 - spacing: Style.current.padding anchors.top: sectionHeadlineSound.bottom anchors.topMargin: Style.current.smallPadding anchors.left: parent.left anchors.right: parent.right width: parent.width - RowLayout { - width: parent.width - StyledText { - //% "Play a sound when receiving a notification" - text: qsTrId("play-a-sound-when-receiving-a-notification") - font.pixelSize: 15 - } - - StatusSwitch { - Layout.alignment: Qt.AlignRight - checked: appSettings.notificationSoundsEnabled - onCheckedChanged: { - appSettings.notificationSoundsEnabled = checked - } + StatusSettingsLineButton { + //% "Play a sound when receiving a notification" + text: qsTrId("play-a-sound-when-receiving-a-notification") + isSwitch: true + switchChecked: appSettings.notificationSoundsEnabled + onClicked: { + appSettings.notificationSoundsEnabled = checked } } - RowLayout { - width: parent.width + StatusSettingsLineButton { + text: qsTr("Use your operating system's notifications") + isSwitch: true + switchChecked: appSettings.useOSNotifications + onClicked: { + appSettings.useOSNotifications = checked + } + StyledText { - text: qsTr("Use your operating system's notifications") - font.pixelSize: 15 + id: detailText + text: qsTr("Setting this to false will instead use Status' notification style as seen below") + color: Style.current.secondaryText + width: parent.width + font.pixelSize: 12 wrapMode: Text.WordWrap - Layout.fillWidth: true - - StyledText { - id: detailText - text: qsTr("Setting this to false will instead use Status' notification style as seen below") - color: Style.current.secondaryText - width: parent.width - font.pixelSize: 12 - wrapMode: Text.WordWrap - anchors.top: parent.bottom - } - } - - StatusSwitch { - Layout.alignment: Qt.AlignRight - checked: appSettings.useOSNotifications - onCheckedChanged: { - appSettings.useOSNotifications = checked - } + anchors.left: parent.left + anchors.leftMargin: Style.current.padding + anchors.bottom: parent.bottom + anchors.topMargin: 2 } } - - /* GridLayout { */ - /* columns: 4 */ - /* width: parent.width */ - - /* StatusRadioButton { */ - /* checked: true */ - /* //% "Sound 1" */ - /* text: qsTrId("sound-1") */ - /* ButtonGroup.group: soundSetting */ - /* } */ - - /* StatusRadioButton { */ - /* //% "Sound 2" */ - /* text: qsTrId("sound-2") */ - /* ButtonGroup.group: soundSetting */ - /* } */ - - /* StatusRadioButton { */ - /* //% "Sound 3" */ - /* text: qsTrId("sound-3") */ - /* ButtonGroup.group: soundSetting */ - /* } */ - - /* StatusRadioButton { */ - /* //% "Sound 4" */ - /* text: qsTrId("sound-4") */ - /* ButtonGroup.group: soundSetting */ - /* } */ - /* } */ } Column { @@ -239,106 +168,47 @@ ScrollView { anchors.left: parent.left anchors.leftMargin: -Style.current.padding anchors.right: parent.right - anchors.rightMargin: -Style.current.padding spacing: 10 - Rectangle { - width: notificationAnonymous.width + Style.current.padding * 2 - height: childrenRect.height + Style.current.padding + Style.current.halfPadding - color: labelAnonymous.checked ? Style.current.secondaryBackground : Style.current.transparent - radius: Style.current.radius - - StatusRadioButton { - id: labelAnonymous - //% "Anonymous" - text: qsTrId("anonymous") - ButtonGroup.group: messageSetting - checked: appSettings.notificationMessagePreviewSetting === Constants.notificationPreviewAnonymous - onCheckedChanged: { - if (checked) { - appSettings.notificationMessagePreviewSetting = Constants.notificationPreviewAnonymous - } + NotificationAppearancePreview { + //% "Anonymous" + name: qsTrId("anonymous") + notificationTitle: "Status" + notificationMessage: qsTr("You have a new message") + buttonGroup: messageSetting + checked: appSettings.notificationMessagePreviewSetting === Constants.notificationPreviewAnonymous + onRadioCheckedChanged: { + if (checked) { + appSettings.notificationMessagePreviewSetting = Constants.notificationPreviewAnonymous } - anchors.top: parent.top - anchors.topMargin: Style.current.halfPadding - anchors.left: parent.left - anchors.leftMargin: Style.current.padding - } - - StatusNotificationWithDropShadow { - id: notificationAnonymous - anchors.top: labelAnonymous.bottom - anchors.topMargin: Style.current.halfPadding - anchors.left: parent.left - name: "Status" - chatType: Constants.chatTypePublic - message: qsTr("You have a new message") } } - Rectangle { - width: notificationAnonymous.width + Style.current.padding * 2 - height: childrenRect.height + Style.current.padding + Style.current.halfPadding - color: labelNameOnly.checked ? Style.current.secondaryBackground : Style.current.transparent - radius: Style.current.radius - - StatusRadioButton { - id: labelNameOnly - //% "Name only" - text: qsTrId("name-only") - ButtonGroup.group: messageSetting - checked: appSettings.notificationMessagePreviewSetting === Constants.notificationPreviewNameOnly - onCheckedChanged: { - if (checked) { - appSettings.notificationMessagePreviewSetting = Constants.notificationPreviewNameOnly - } + NotificationAppearancePreview { + //% "Name only" + name: qsTrId("name-only") + notificationTitle: "Vitalik Buterin" + notificationMessage: qsTr("You have a new message") + buttonGroup: messageSetting + checked: appSettings.notificationMessagePreviewSetting === Constants.notificationPreviewNameOnly + onRadioCheckedChanged: { + if (checked) { + appSettings.notificationMessagePreviewSetting = Constants.notificationPreviewNameOnly } - anchors.top: parent.top - anchors.topMargin: Style.current.halfPadding - anchors.left: parent.left - anchors.leftMargin: Style.current.padding - } - - StatusNotificationWithDropShadow { - id: notificationNameOnly - name: "Vitalik Buterin" - chatType: Constants.chatTypeOneToOne - message: qsTr("You have a new message") - anchors.top: labelNameOnly.bottom - anchors.topMargin: Style.current.halfPadding - anchors.left: parent.left } } - Rectangle { - width: notificationAnonymous.width + Style.current.padding * 2 - height: childrenRect.height + Style.current.padding + Style.current.halfPadding - color: labelNameAndMessage.checked ? Style.current.secondaryBackground : Style.current.transparent - radius: Style.current.radius - - StatusRadioButton { - id: labelNameAndMessage - //% "Name & Message" - text: qsTrId("name---message") - ButtonGroup.group: messageSetting - checked: appSettings.notificationMessagePreviewSetting === Constants.notificationPreviewNameAndMessage - onCheckedChanged: { + NotificationAppearancePreview { + //% "Name & Message" + name: qsTrId("name---message") + notificationTitle: "Vitalik Buterin" + notificationMessage: qsTr("Hi there! Yes, no problem, let me know if I can help.") + buttonGroup: messageSetting + checked: appSettings.notificationMessagePreviewSetting === Constants.notificationPreviewNameAndMessage + onRadioCheckedChanged: { + if (checked) { appSettings.notificationMessagePreviewSetting = Constants.notificationPreviewNameAndMessage } - anchors.top: parent.top - anchors.topMargin: Style.current.halfPadding - anchors.left: parent.left - anchors.leftMargin: Style.current.padding - } - - StatusNotificationWithDropShadow { - id: notificationNameAndMessage - name: "Vitalik Buterin" - chatType: Constants.chatTypeOneToOne - message: qsTr("Hi there! Yes, no problem, let me know if I can help.") - anchors.top: labelNameAndMessage.bottom - anchors.topMargin: Style.current.halfPadding - anchors.left: parent.left } } } @@ -348,7 +218,6 @@ ScrollView { text: qsTrId("no-preview-or-advanced--go-to-notification-center") font.pixelSize: 15 anchors.left: parent.left - anchors.leftMargin: -Style.current.padding } } @@ -373,33 +242,27 @@ ScrollView { Column { id: column4 - spacing: Style.current.padding anchors.top: sectionHeadlineContacts.bottom anchors.topMargin: Style.current.smallPadding anchors.left: parent.left anchors.right: parent.right width: parent.width - RowLayout { - width: parent.width - StyledText { - //% "Receive notifications from non-contacts" - text: qsTrId("receive-notifications-from-non-contacts") - font.pixelSize: 15 - } - StatusSwitch { - Layout.alignment: Qt.AlignRight - checked: appSettings.allowNotificationsFromNonContacts - onCheckedChanged: { - appSettings.allowNotificationsFromNonContacts = checked - } + StatusSettingsLineButton { + //% "Receive notifications from non-contacts" + text: qsTrId("receive-notifications-from-non-contacts") + isSwitch: true + switchChecked: appSettings.allowNotificationsFromNonContacts + onClicked: { + appSettings.allowNotificationsFromNonContacts = checked } } - StatusSectionMenuItem { + StatusSettingsLineButton { //% "Muted users" - label: qsTrId("muted-users") - info: profileModel.mutedContacts.rowCount() > 0 ? profileModel.mutedContacts.rowCount() : qsTr("None") + text: qsTrId("muted-users") + currentValue: profileModel.mutedContacts.rowCount() > 0 ? profileModel.mutedContacts.rowCount() : qsTr("None") + isSwitch: false onClicked: { const mutedChatsModal = notificationsContainer.mutedChatsModalComponent.createObject(notificationsContainer, { showMutedContacts: true @@ -409,12 +272,11 @@ ScrollView { } } - StatusSectionMenuItem { + StatusSettingsLineButton { //% "Muted chats" - label: qsTrId("muted-chats") - //% "You can limit what gets shown in notifications" - description: qsTrId("you-can-limit-what-gets-shown-in-notifications") - info: profileModel.mutedChats.rowCount() > 0 ? profileModel.mutedChats.rowCount() : qsTr("None") + text: qsTrId("muted-chats") + currentValue: profileModel.mutedChats.rowCount() > 0 ? profileModel.mutedChats.rowCount() : qsTr("None") + isSwitch: false onClicked: { const mutedChatsModal = notificationsContainer.mutedChatsModalComponent.createObject(notificationsContainer, { showMutedContacts: false @@ -422,6 +284,19 @@ ScrollView { mutedChatsModal.title = qsTr("Muted chats") mutedChatsModal.open() } + + StyledText { + //% "You can limit what gets shown in notifications" + text: qsTrId("you-can-limit-what-gets-shown-in-notifications") + color: Style.current.secondaryText + width: parent.width + font.pixelSize: 12 + wrapMode: Text.WordWrap + anchors.left: parent.left + anchors.leftMargin: Style.current.padding + anchors.bottom: parent.bottom + anchors.topMargin: 2 + } } } @@ -444,15 +319,12 @@ ScrollView { anchors.right: parent.right width: parent.width - Button { + StatusButton { flat: true horizontalPadding: 0 - contentItem: Text { - //% "Reset notification settings" - text: qsTrId("reset-notification-settings") - font.pixelSize: 15 - color: Style.current.red - } + //% "Reset notification settings" + text: qsTrId("reset-notification-settings") + type: "warn" onClicked: { appSettings.notificationSetting = defaultAppSettings.notificationSetting appSettings.notificationSoundsEnabled = defaultAppSettings.notificationSoundsEnabled diff --git a/ui/nim-status-client.pro b/ui/nim-status-client.pro index 903ae8d35a..74b51a4ea7 100644 --- a/ui/nim-status-client.pro +++ b/ui/nim-status-client.pro @@ -211,6 +211,7 @@ DISTFILES += \ app/AppLayouts/Profile/Sections/BrowserModals/SearchEngineModal.qml \ app/AppLayouts/Profile/Sections/ChangeProfilePicModal.qml \ app/AppLayouts/Profile/Sections/MyProfileContainer.qml \ + app/AppLayouts/Profile/Sections/NotificationAppearancePreview.qml \ app/AppLayouts/Profile/Sections/OpenLinksWithModal.qml \ app/AppLayouts/Profile/Sections/SoundsContainer.qml \ app/AppLayouts/UIComponents/UIComponents.qml \ @@ -435,5 +436,6 @@ DISTFILES += \ shared/qmldir \ shared/status/StatusEmojiSuggestionPopup.qml \ shared/status/StatusInputListPopup.qml \ + shared/status/StatusRadioButtonRow.qml \ shared/status/StatusSettingsLineButton.qml \ sounds/ErrorSound.qml diff --git a/ui/shared/status/StatusRadioButtonRow.qml b/ui/shared/status/StatusRadioButtonRow.qml new file mode 100644 index 0000000000..0507f6ef17 --- /dev/null +++ b/ui/shared/status/StatusRadioButtonRow.qml @@ -0,0 +1,57 @@ +import QtQuick 2.13 +import QtQuick.Controls 2.13 +import "../../imports" +import ".." +import "." + +Rectangle { + property alias text: textElement.text + property var buttonGroup + property bool checked: false + property bool isHovered: false + signal radioCheckedChanged(checked: bool) + + id: root + height: 52 + color: isHovered ? Style.current.backgroundHover : Style.current.transparent + radius: Style.current.radius + border.width: 0 + anchors.left: parent.left + anchors.leftMargin: -Style.current.padding + anchors.right: parent.right + anchors.rightMargin: -Style.current.padding + + + StyledText { + id: textElement + text: "" + font.pixelSize: 15 + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + anchors.leftMargin: Style.current.padding + } + + StatusRadioButton { + id: radioButton + anchors.verticalCenter: parent.verticalCenter + anchors.right: parent.right + anchors.rightMargin: Style.current.padding + ButtonGroup.group: root.buttonGroup + rightPadding: 0 + checked: root.checked + onCheckedChanged: root.radioCheckedChanged(checked) + } + + MouseArea { + cursorShape: Qt.PointingHandCursor + anchors.fill: parent + hoverEnabled: true + onEntered: root.isHovered = true + onExited: root.isHovered = false + onClicked: { + if (!radioButton.checked) { + root.radioCheckedChanged(true) + } + } + } +} diff --git a/ui/shared/status/StatusSettingsLineButton.qml b/ui/shared/status/StatusSettingsLineButton.qml index ed331af693..528aad55be 100644 --- a/ui/shared/status/StatusSettingsLineButton.qml +++ b/ui/shared/status/StatusSettingsLineButton.qml @@ -3,7 +3,7 @@ import QtGraphicalEffects 1.12 import "../../imports" import ".." -Item { +Rectangle { property string text property bool isSwitch: false property bool switchChecked: false @@ -12,13 +12,23 @@ Item { property string badgeText: "1" property bool isEnabled: true signal clicked(bool checked) + property bool isHovered: false id: root - height: textItem.height - width: parent.width + height: 52 + color: isHovered ? Style.current.backgroundHover : Style.current.transparent + radius: Style.current.radius + border.width: 0 + anchors.left: parent.left + anchors.leftMargin: -Style.current.padding + anchors.right: parent.right + anchors.rightMargin: -Style.current.padding StyledText { id: textItem + anchors.left: parent.left + anchors.leftMargin: Style.current.padding + anchors.verticalCenter: parent.verticalCenter text: root.text font.pixelSize: 15 color: !root.isEnabled ? Style.current.darkGrey : Style.current.textColor @@ -37,6 +47,7 @@ Item { anchors.right: root.isSwitch ? switchItem.left : caret.left anchors.rightMargin: Style.current.padding anchors.verticalCenter: textItem.verticalCenter + } StatusSwitch { @@ -45,6 +56,7 @@ Item { visible: root.isSwitch checked: root.switchChecked anchors.right: parent.right + anchors.rightMargin: Style.current.padding anchors.verticalCenter: textItem.verticalCenter } @@ -70,6 +82,7 @@ Item { id: caret visible: !root.isSwitch anchors.right: parent.right + anchors.rightMargin: Style.current.padding anchors.verticalCenter: textItem.verticalCenter source: "../../app/img/caret.svg" width: 13 @@ -85,6 +98,9 @@ Item { MouseArea { anchors.fill: parent enabled: root.isEnabled + hoverEnabled: true + onEntered: root.isHovered = true + onExited: root.isHovered = false onClicked: { root.clicked(!root.switchChecked) }