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(ProfileShowcase) Web tab visual updates according to new design 

- Updated `AddSocialLinkModal` according to new design.
- Modified main social links items according to new design.
- Updated edit modal according to new design.
- Some text validation updates.

Closes #13511
This commit is contained in:
Noelia 2024-03-03 13:06:52 +01:00 committed by Noelia
parent 919cd8a7a7
commit babedf4272
9 changed files with 76 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app_service/common/social_links.nim
View File

@ -22,7 +22,7 @@ type
removed*: bool removed*: bool
proc socialLinkTextToIcon(text: string): string = proc socialLinkTextToIcon(text: string): string =
if (text == SOCIAL_LINK_TWITTER_ID): return "twitter" if (text == SOCIAL_LINK_TWITTER_ID): return "xtwitter"
if (text == SOCIAL_LINK_PERSONAL_SITE_ID): return "language" if (text == SOCIAL_LINK_PERSONAL_SITE_ID): return "language"
if (text == SOCIAL_LINK_GITHUB_ID): return "github" if (text == SOCIAL_LINK_GITHUB_ID): return "github"
if (text == SOCIAL_LINK_YOUTUBE_ID): return "youtube" if (text == SOCIAL_LINK_YOUTUBE_ID): return "youtube"

16
ui/StatusQ/src/StatusQ/Components/StatusDraggableListItem.qml
View File

@ -310,7 +310,8 @@ ItemDelegate {
Loader { Loader {
active: !!root.icon.name || !!root.icon.source active: !!root.icon.name || !!root.icon.source
visible: active visible: active
sourceComponent: root.hasIcon ? iconComponent : root.hasImage ? imageComponent : letterIdenticonComponent sourceComponent: root.hasIcon && root.assetBgColor ? roundIconComponent :
root.hasIcon ? iconComponent : root.hasImage ? imageComponent : letterIdenticonComponent
} }
ColumnLayout { ColumnLayout {
@ -403,4 +404,17 @@ ItemDelegate {
letterIdenticonColor: root.icon.color letterIdenticonColor: root.icon.color
} }
} }
Component {
id: roundIconComponent
StatusRoundIcon {
asset.width: root.icon.width
asset.height: root.icon.height
asset.name: root.icon.name
asset.color: root.icon.color
asset.bgColor: root.assetBgColor
asset.bgHeight: 40
asset.bgWidth: 40
}
}
} }

1
ui/StatusQ/src/assets.qrc
View File

@ -10411,5 +10411,6 @@
<file>assets/twemoji/twemoji.js</file> <file>assets/twemoji/twemoji.js</file>
<file>assets/img/icons/caution.svg</file> <file>assets/img/icons/caution.svg</file>
<file>assets/img/icons/crown-off.svg</file> <file>assets/img/icons/crown-off.svg</file>
<file>assets/img/icons/xtwitter.svg</file>
</qresource> </qresource>
</RCC> </RCC>

3
ui/StatusQ/src/assets/img/icons/xtwitter.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.82709 9.1234L0.33374 1.05469H5.47693L9.48523 6.0417L13.7675 1.07714H16.6001L10.8548 7.7457L17.6671 16.2214H12.5392L8.19907 10.8282L3.56551 16.2064H0.717561L6.82709 9.1234ZM13.2866 14.7264L3.48737 2.54968H4.72893L14.5159 14.7264H13.2866Z" fill="#1C1C1C"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 410 B

32
ui/app/AppLayouts/Profile/panels/ProfileSocialLinksPanel.qml
View File

@ -42,19 +42,20 @@ Control {
contentItem: ColumnLayout { contentItem: ColumnLayout {
id: layout id: layout
spacing: 12 spacing: Style.current.halfPadding
RowLayout { RowLayout {
Layout.fillWidth: true Layout.fillWidth: true
Layout.bottomMargin: Style.current.halfPadding Layout.bottomMargin: Style.current.padding
StatusBaseText { StatusBaseText {
text: qsTr("Links") text: qsTr("In showcase")
color: Theme.palette.baseColor1 color: Theme.palette.directColor1
} }
Item { Layout.fillWidth: true } Item { Layout.fillWidth: true }
StatusBaseText { StatusBaseText {
text: qsTr("%1/%2").arg(root.profileStore.temporarySocialLinksModel.count).arg(Constants.maxNumOfSocialLinks) text: qsTr("%1 / %2").arg(root.profileStore.temporarySocialLinksModel.count).arg(Constants.maxNumOfSocialLinks)
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
font.pixelSize: Theme.tertiaryTextFontSize
} }
} }
@ -64,8 +65,12 @@ Control {
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
Layout.preferredWidth: parent.width - 4 // the rectangular path is rendered outside Layout.preferredWidth: parent.width - 4 // the rectangular path is rendered outside
Layout.preferredHeight: 44 Layout.preferredHeight: 48
text: maxReached? qsTr("Link limit of %1 reached").arg(Constants.maxNumOfSocialLinks) : ""
text: maxReached ? qsTr("Link limit of %1 reached").arg(Constants.maxNumOfSocialLinks) : ""
path.strokeColor: maxReached ? "transparent" : Theme.palette.baseColor2
path.fillColor: maxReached ? Theme.palette.baseColor4 : "transparent"
font.pixelSize: Theme.tertiaryTextFontSize
StatusLinkText { StatusLinkText {
objectName: "addMoreSocialLinks" objectName: "addMoreSocialLinks"
@ -81,10 +86,14 @@ Control {
StatusListView { StatusListView {
id: linksView id: linksView
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: contentHeight Layout.preferredHeight: contentHeight
Layout.bottomMargin: ProfileUtils.defaultDelegateHeight / 2
model: root.socialLinksModel model: root.socialLinksModel
interactive: false interactive: false
spacing: Style.current.halfPadding
displaced: Transition { displaced: Transition {
NumberAnimation { properties: "x,y"; easing.type: Easing.OutQuad } NumberAnimation { properties: "x,y"; easing.type: Easing.OutQuad }
@ -120,7 +129,9 @@ Control {
visible: !!asideText visible: !!asideText
width: parent.width width: parent.width
height: visible ? implicitHeight : 0 height: visible ? ProfileUtils.defaultDelegateHeight : 0
topInset: 0
bottomInset: 0
anchors { anchors {
horizontalCenter: parent.horizontalCenter horizontalCenter: parent.horizontalCenter
@ -130,10 +141,11 @@ Control {
dragParent: linksView dragParent: linksView
visualIndex: delegateRoot.visualIndex visualIndex: delegateRoot.visualIndex
draggable: linksView.count > 1 draggable: linksView.count > 1
title: ProfileUtils.linkTypeToText(model.linkType) || model.text title: ProfileUtils.linkTypeToShortText(model.linkType) || model.text
hasIcon: true hasIcon: true
icon.name: model.icon icon.name: model.icon
icon.color: ProfileUtils.linkTypeColor(model.linkType) icon.color: ProfileUtils.linkTypeColor(model.linkType)
assetBgColor: ProfileUtils.linkTypeBgColor(model.linkType)
actions: [ actions: [
StatusLinkText { StatusLinkText {
Layout.fillWidth: true Layout.fillWidth: true
@ -161,7 +173,5 @@ Control {
} }
} }
} }
Item { Layout.fillHeight: true }
} }
} }

18
ui/app/AppLayouts/Profile/popups/AddSocialLinkModal.qml
View File

@ -24,7 +24,8 @@ StatusStackModal {
anchors.centerIn: parent anchors.centerIn: parent
padding: currentIndex === 0 ? 0 : Style.current.padding padding: currentIndex === 0 ? 0 : Style.current.padding
headerSettings.title: qsTr("Add more links") headerSettings.title: currentIndex === 0 ? qsTr("Add a link") :
qsTr("Add %1 link").arg(ProfileUtils.linkTypeToText(d.selectedLinkType) || qsTr("custom"))
rightButtons: [finishButton] rightButtons: [finishButton]
finishButton: StatusButton { finishButton: StatusButton {
text: qsTr("Add") text: qsTr("Add")
@ -50,7 +51,7 @@ StatusStackModal {
readonly property var staticLinkTypesModel: ListModel { readonly property var staticLinkTypesModel: ListModel {
readonly property var data: [ readonly property var data: [
{ type: Constants.socialLinkType.twitter, icon: "twitter", text: "__twitter" }, { type: Constants.socialLinkType.twitter, icon: "xtwitter", text: "__twitter" },
{ type: Constants.socialLinkType.personalSite, icon: "language", text: "__personal_site" }, { type: Constants.socialLinkType.personalSite, icon: "language", text: "__personal_site" },
{ type: Constants.socialLinkType.github, icon: "github", text: "__github" }, { type: Constants.socialLinkType.github, icon: "github", text: "__github" },
{ type: Constants.socialLinkType.youtube, icon: "youtube", text: "__youtube" }, { type: Constants.socialLinkType.youtube, icon: "youtube", text: "__youtube" },
@ -85,6 +86,7 @@ StatusStackModal {
title: ProfileUtils.linkTypeToText(model.type) || qsTr("Custom link") title: ProfileUtils.linkTypeToText(model.type) || qsTr("Custom link")
asset.name: model.icon asset.name: model.icon
asset.color: ProfileUtils.linkTypeColor(model.type) asset.color: ProfileUtils.linkTypeColor(model.type)
asset.bgColor: ProfileUtils.linkTypeBgColor(model.type)
onClicked: { onClicked: {
customTitle.reset() customTitle.reset()
linkTarget.reset() linkTarget.reset()
@ -109,7 +111,7 @@ StatusStackModal {
Layout.fillWidth: true Layout.fillWidth: true
visible: d.selectedLinkType === Constants.socialLinkType.custom visible: d.selectedLinkType === Constants.socialLinkType.custom
placeholderText: "" placeholderText: ""
label: qsTr("Add a title") label: qsTr("Title")
linkType: Constants.socialLinkType.custom linkType: Constants.socialLinkType.custom
icon: "language" icon: "language"
charLimit: Constants.maxSocialLinkTextLength charLimit: Constants.maxSocialLinkTextLength
@ -129,8 +131,8 @@ StatusStackModal {
ProfileUtils.addSocialLinkPrefix(linkTarget.text, d.selectedLinkType)) ProfileUtils.addSocialLinkPrefix(linkTarget.text, d.selectedLinkType))
} }
errorMessage: d.selectedLinkType === Constants.socialLinkType.custom? errorMessage: d.selectedLinkType === Constants.socialLinkType.custom?
qsTr("Name and link combination already added") : qsTr("Ttile and link combination already added") :
qsTr("Link already added") qsTr("Username already added")
} }
] ]
@ -143,7 +145,7 @@ StatusStackModal {
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: customTitle.visible ? Style.current.padding : 0 Layout.topMargin: customTitle.visible ? Style.current.padding : 0
placeholderText: "" placeholderText: ""
label: ProfileUtils.linkTypeToDescription(linkType) || qsTr("Add your link") label: linkType === Constants.socialLinkType.custom ? qsTr("Link") : qsTr("Username")
linkType: d.selectedLinkType linkType: d.selectedLinkType
icon: d.selectedIcon icon: d.selectedIcon
input.tabNavItem: customTitle.input.edit input.tabNavItem: customTitle.input.edit
@ -163,8 +165,8 @@ StatusStackModal {
ProfileUtils.addSocialLinkPrefix(value, d.selectedLinkType)) ProfileUtils.addSocialLinkPrefix(value, d.selectedLinkType))
} }
errorMessage: d.selectedLinkType === Constants.socialLinkType.custom? errorMessage: d.selectedLinkType === Constants.socialLinkType.custom?
qsTr("Name and link combination already added") : qsTr("Title and link combination already added") :
qsTr("Link already added") qsTr("Username already added")
} }
] ]

14
ui/app/AppLayouts/Profile/popups/ModifySocialLinkModal.qml
View File

@ -30,7 +30,7 @@ StatusDialog {
implicitWidth: 480 // design implicitWidth: 480 // design
title: ProfileUtils.linkTypeToText(linkType) || qsTr("Modify Custom Link") title: ProfileUtils.linkTypeToText(linkType) ? qsTr("Edit %1 link").arg(ProfileUtils.linkTypeToText(linkType)) : qsTr("Edit custom Link")
footer: StatusDialogFooter { footer: StatusDialogFooter {
leftButtons: ObjectModel { leftButtons: ObjectModel {
@ -94,9 +94,9 @@ StatusDialog {
return !root.containsSocialLink(value, return !root.containsSocialLink(value,
ProfileUtils.addSocialLinkPrefix(linkTarget.text, root.linkType)) ProfileUtils.addSocialLinkPrefix(linkTarget.text, root.linkType))
} }
errorMessage: root.linkType === Constants.socialLinkType.custom? errorMessage: root.linkType === Constants.socialLinkType.custom ?
qsTr("Name and link combination already added") : qsTr("Title and link combination already added") :
qsTr("Link already added") qsTr("Username already added")
} }
] ]
@ -109,7 +109,7 @@ StatusDialog {
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: customTitle.visible ? Style.current.padding : 0 Layout.topMargin: customTitle.visible ? Style.current.padding : 0
placeholderText: "" placeholderText: ""
label: ProfileUtils.linkTypeToDescription(linkType) || qsTr("Modify your link") label: ProfileUtils.linkTypeToDescription(linkType) || qsTr("Edit your link")
linkType: root.linkType linkType: root.linkType
icon: root.icon icon: root.icon
text: root.linkUrl text: root.linkUrl
@ -130,8 +130,8 @@ StatusDialog {
ProfileUtils.addSocialLinkPrefix(value, root.linkType)) ProfileUtils.addSocialLinkPrefix(value, root.linkType))
} }
errorMessage: root.linkType === Constants.socialLinkType.custom? errorMessage: root.linkType === Constants.socialLinkType.custom?
qsTr("Name and link combination already added") : qsTr("Title and link combination already added") :
qsTr("Link already added") qsTr("Username already added")
} }
] ]

4
ui/app/AppLayouts/Profile/views/MyProfileView.qml
View File

@ -161,8 +161,8 @@ SettingsContentBase {
StackLayout { StackLayout {
id: stackLayout id: stackLayout
width: contentWidth width: root.contentWidth
height: contentHeight height: profileTabBar.currentIndex === MyProfileView.Web ? implicitHeight : root.contentHeight
currentIndex: profileTabBar.currentIndex currentIndex: profileTabBar.currentIndex
onCurrentIndexChanged: { onCurrentIndexChanged: {

18
ui/imports/utils/ProfileUtils.qml
View File

@ -26,7 +26,7 @@ QtObject {
} }
function linkTypeToText(linkType) { function linkTypeToText(linkType) {
if (linkType === Constants.socialLinkType.twitter) return qsTr("Twitter") if (linkType === Constants.socialLinkType.twitter) return qsTr("X (Twitter)")
if (linkType === Constants.socialLinkType.personalSite) return qsTr("Personal site") if (linkType === Constants.socialLinkType.personalSite) return qsTr("Personal site")
if (linkType === Constants.socialLinkType.github) return qsTr("Github") if (linkType === Constants.socialLinkType.github) return qsTr("Github")
if (linkType === Constants.socialLinkType.youtube) return qsTr("YouTube channel") if (linkType === Constants.socialLinkType.youtube) return qsTr("YouTube channel")
@ -35,8 +35,18 @@ QtObject {
return "" // "custom" link type allows for user defined text return "" // "custom" link type allows for user defined text
} }
function linkTypeToShortText(linkType) {
if (linkType === Constants.socialLinkType.twitter) return qsTr("X (Twitter)")
if (linkType === Constants.socialLinkType.personalSite) return qsTr("Personal")
if (linkType === Constants.socialLinkType.github) return qsTr("Github")
if (linkType === Constants.socialLinkType.youtube) return qsTr("YouTube")
if (linkType === Constants.socialLinkType.discord) return qsTr("Discord")
if (linkType === Constants.socialLinkType.telegram) return qsTr("Telegram")
return "" // "custom" link type allows for user defined text
}
function linkTypeColor(linkType) { function linkTypeColor(linkType) {
if (linkType === Constants.socialLinkType.twitter) return "#03A9F4" if (linkType === Constants.socialLinkType.twitter) return "#000000"
if (linkType === Constants.socialLinkType.github) return "#000000" if (linkType === Constants.socialLinkType.github) return "#000000"
if (linkType === Constants.socialLinkType.youtube) return "#FF3000" if (linkType === Constants.socialLinkType.youtube) return "#FF3000"
if (linkType === Constants.socialLinkType.discord) return "#7289DA" if (linkType === Constants.socialLinkType.discord) return "#7289DA"
@ -44,6 +54,10 @@ QtObject {
return Theme.palette.primaryColor1 return Theme.palette.primaryColor1
} }
function linkTypeBgColor(linkType) {
return Theme.palette.getColor(linkTypeColor(linkType), 0.1)
}
function linkTypeToDescription(linkType) { function linkTypeToDescription(linkType) {
if (linkType === Constants.socialLinkType.twitter) return qsTr("Twitter username") if (linkType === Constants.socialLinkType.twitter) return qsTr("Twitter username")
if (linkType === Constants.socialLinkType.personalSite) return qsTr("Personal site") if (linkType === Constants.socialLinkType.personalSite) return qsTr("Personal site")