status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: fix Notification page and lists of contacts

This commit is contained in:
Jonathan Rainville 2021-01-19 14:26:59 -05:00 committed by Iuri Matias
parent 3ad3739218
commit acac683dc2
7 changed files with 265 additions and 260 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
ui/app/AppLayouts/Chat/components/Contact.qml
View File

@ -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()
}
}

1
ui/app/AppLayouts/Chat/components/PrivateChatPopup.qml
View File

@ -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()

67
ui/app/AppLayouts/Profile/Sections/NotificationAppearancePreview.qml Normal file
View File

@ -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
}
}

270
ui/app/AppLayouts/Profile/Sections/NotificationsContainer.qml
View File

@ -47,73 +47,47 @@ 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 {
StatusRadioButtonRow {
//% "All messages"
text: qsTrId("all-messages")
font.pixelSize: 15
}
StatusRadioButton {
Layout.alignment: Qt.AlignRight
ButtonGroup.group: notificationSetting
rightPadding: 0
buttonGroup: notificationSetting
checked: appSettings.notificationSetting === Constants.notifyAllMessages
onCheckedChanged: {
onRadioCheckedChanged: {
if (checked) {
appSettings.notificationSetting = Constants.notifyAllMessages
}
}
}
}
RowLayout {
width: parent.width
StyledText {
StatusRadioButtonRow {
//% "Just @mentions"
text: qsTrId("just--mentions")
font.pixelSize: 15
}
StatusRadioButton {
Layout.alignment: Qt.AlignRight
ButtonGroup.group: notificationSetting
rightPadding: 0
buttonGroup: notificationSetting
checked: appSettings.notificationSetting === Constants.notifyJustMentions
onCheckedChanged: {
onRadioCheckedChanged: {
if (checked) {
appSettings.notificationSetting = Constants.notifyJustMentions
}
}
}
}
RowLayout {
width: parent.width
StyledText {
StatusRadioButtonRow {
//% "Nothing"
text: qsTrId("nothing")
font.pixelSize: 15
}
StatusRadioButton {
Layout.alignment: Qt.AlignRight
ButtonGroup.group: notificationSetting
rightPadding: 0
buttonGroup: notificationSetting
checked: appSettings.notificationSetting === Constants.notifyNone
onCheckedChanged: {
onRadioCheckedChanged: {
if (checked) {
appSettings.notificationSetting = Constants.notifyNone
}
}
}
}
}
Separator {
id: separator
@ -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,37 +109,29 @@ 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 {
StatusSettingsLineButton {
//% "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: {
isSwitch: true
switchChecked: appSettings.notificationSoundsEnabled
onClicked: {
appSettings.notificationSoundsEnabled = checked
}
}
}
RowLayout {
width: parent.width
StyledText {
StatusSettingsLineButton {
text: qsTr("Use your operating system's notifications")
font.pixelSize: 15
wrapMode: Text.WordWrap
Layout.fillWidth: true
isSwitch: true
switchChecked: appSettings.useOSNotifications
onClicked: {
appSettings.useOSNotifications = checked
}
StyledText {
id: detailText
@ -175,48 +140,12 @@ ScrollView {
width: parent.width
font.pixelSize: 12
wrapMode: Text.WordWrap
anchors.top: parent.bottom
anchors.left: parent.left
anchors.leftMargin: Style.current.padding
anchors.bottom: parent.bottom
anchors.topMargin: 2
}
}
StatusSwitch {
Layout.alignment: Qt.AlignRight
checked: appSettings.useOSNotifications
onCheckedChanged: {
appSettings.useOSNotifications = checked
}
}
}
/* 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
NotificationAppearancePreview {
//% "Anonymous"
text: qsTrId("anonymous")
ButtonGroup.group: messageSetting
name: qsTrId("anonymous")
notificationTitle: "Status"
notificationMessage: qsTr("You have a new message")
buttonGroup: messageSetting
checked: appSettings.notificationMessagePreviewSetting === Constants.notificationPreviewAnonymous
onCheckedChanged: {
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
NotificationAppearancePreview {
//% "Name only"
text: qsTrId("name-only")
ButtonGroup.group: messageSetting
name: qsTrId("name-only")
notificationTitle: "Vitalik Buterin"
notificationMessage: qsTr("You have a new message")
buttonGroup: messageSetting
checked: appSettings.notificationMessagePreviewSetting === Constants.notificationPreviewNameOnly
onCheckedChanged: {
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
NotificationAppearancePreview {
//% "Name & Message"
text: qsTrId("name---message")
ButtonGroup.group: messageSetting
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
onCheckedChanged: {
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 {
StatusSettingsLineButton {
//% "Receive notifications from non-contacts"
text: qsTrId("receive-notifications-from-non-contacts")
font.pixelSize: 15
}
StatusSwitch {
Layout.alignment: Qt.AlignRight
checked: appSettings.allowNotificationsFromNonContacts
onCheckedChanged: {
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
}
type: "warn"
onClicked: {
appSettings.notificationSetting = defaultAppSettings.notificationSetting
appSettings.notificationSoundsEnabled = defaultAppSettings.notificationSoundsEnabled

2
ui/nim-status-client.pro
View File

@ -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

57
ui/shared/status/StatusRadioButtonRow.qml Normal file
View File

@ -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)
}
}
}
}

22
ui/shared/status/StatusSettingsLineButton.qml
View File

@ -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)
}