diff --git a/src/app_service/common/social_links.nim b/src/app_service/common/social_links.nim index 4af74f16bb..e124856e97 100644 --- a/src/app_service/common/social_links.nim +++ b/src/app_service/common/social_links.nim @@ -22,7 +22,7 @@ type removed*: bool 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_GITHUB_ID): return "github" if (text == SOCIAL_LINK_YOUTUBE_ID): return "youtube" diff --git a/ui/StatusQ/src/StatusQ/Components/StatusDraggableListItem.qml b/ui/StatusQ/src/StatusQ/Components/StatusDraggableListItem.qml index 8ef6752289..a9530333cd 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusDraggableListItem.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusDraggableListItem.qml @@ -310,7 +310,8 @@ ItemDelegate { Loader { active: !!root.icon.name || !!root.icon.source visible: active - sourceComponent: root.hasIcon ? iconComponent : root.hasImage ? imageComponent : letterIdenticonComponent + sourceComponent: root.hasIcon && root.assetBgColor ? roundIconComponent : + root.hasIcon ? iconComponent : root.hasImage ? imageComponent : letterIdenticonComponent } ColumnLayout { @@ -403,4 +404,17 @@ ItemDelegate { 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 + } + } } diff --git a/ui/StatusQ/src/assets.qrc b/ui/StatusQ/src/assets.qrc index 44b5bcd19b..895f79fb97 100644 --- a/ui/StatusQ/src/assets.qrc +++ b/ui/StatusQ/src/assets.qrc @@ -10411,5 +10411,6 @@ assets/twemoji/twemoji.js assets/img/icons/caution.svg assets/img/icons/crown-off.svg + assets/img/icons/xtwitter.svg diff --git a/ui/StatusQ/src/assets/img/icons/xtwitter.svg b/ui/StatusQ/src/assets/img/icons/xtwitter.svg new file mode 100644 index 0000000000..e257464417 --- /dev/null +++ b/ui/StatusQ/src/assets/img/icons/xtwitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/app/AppLayouts/Profile/panels/ProfileSocialLinksPanel.qml b/ui/app/AppLayouts/Profile/panels/ProfileSocialLinksPanel.qml index 68fb3d4273..faa5b75065 100644 --- a/ui/app/AppLayouts/Profile/panels/ProfileSocialLinksPanel.qml +++ b/ui/app/AppLayouts/Profile/panels/ProfileSocialLinksPanel.qml @@ -42,19 +42,20 @@ Control { contentItem: ColumnLayout { id: layout - spacing: 12 + spacing: Style.current.halfPadding RowLayout { Layout.fillWidth: true - Layout.bottomMargin: Style.current.halfPadding + Layout.bottomMargin: Style.current.padding StatusBaseText { - text: qsTr("Links") - color: Theme.palette.baseColor1 + text: qsTr("In showcase") + color: Theme.palette.directColor1 } Item { Layout.fillWidth: true } 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 + font.pixelSize: Theme.tertiaryTextFontSize } } @@ -64,8 +65,12 @@ Control { Layout.alignment: Qt.AlignHCenter Layout.preferredWidth: parent.width - 4 // the rectangular path is rendered outside - Layout.preferredHeight: 44 - text: maxReached? qsTr("Link limit of %1 reached").arg(Constants.maxNumOfSocialLinks) : "" + Layout.preferredHeight: 48 + + 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 { objectName: "addMoreSocialLinks" @@ -81,10 +86,14 @@ Control { StatusListView { id: linksView + Layout.fillWidth: true Layout.preferredHeight: contentHeight + Layout.bottomMargin: ProfileUtils.defaultDelegateHeight / 2 + model: root.socialLinksModel interactive: false + spacing: Style.current.halfPadding displaced: Transition { NumberAnimation { properties: "x,y"; easing.type: Easing.OutQuad } @@ -120,7 +129,9 @@ Control { visible: !!asideText width: parent.width - height: visible ? implicitHeight : 0 + height: visible ? ProfileUtils.defaultDelegateHeight : 0 + topInset: 0 + bottomInset: 0 anchors { horizontalCenter: parent.horizontalCenter @@ -130,10 +141,11 @@ Control { dragParent: linksView visualIndex: delegateRoot.visualIndex draggable: linksView.count > 1 - title: ProfileUtils.linkTypeToText(model.linkType) || model.text + title: ProfileUtils.linkTypeToShortText(model.linkType) || model.text hasIcon: true icon.name: model.icon icon.color: ProfileUtils.linkTypeColor(model.linkType) + assetBgColor: ProfileUtils.linkTypeBgColor(model.linkType) actions: [ StatusLinkText { Layout.fillWidth: true @@ -161,7 +173,5 @@ Control { } } } - - Item { Layout.fillHeight: true } } } diff --git a/ui/app/AppLayouts/Profile/popups/AddSocialLinkModal.qml b/ui/app/AppLayouts/Profile/popups/AddSocialLinkModal.qml index 9d661025bf..76ab431716 100644 --- a/ui/app/AppLayouts/Profile/popups/AddSocialLinkModal.qml +++ b/ui/app/AppLayouts/Profile/popups/AddSocialLinkModal.qml @@ -24,7 +24,8 @@ StatusStackModal { anchors.centerIn: parent 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] finishButton: StatusButton { text: qsTr("Add") @@ -50,7 +51,7 @@ StatusStackModal { readonly property var staticLinkTypesModel: ListModel { 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.github, icon: "github", text: "__github" }, { type: Constants.socialLinkType.youtube, icon: "youtube", text: "__youtube" }, @@ -85,6 +86,7 @@ StatusStackModal { title: ProfileUtils.linkTypeToText(model.type) || qsTr("Custom link") asset.name: model.icon asset.color: ProfileUtils.linkTypeColor(model.type) + asset.bgColor: ProfileUtils.linkTypeBgColor(model.type) onClicked: { customTitle.reset() linkTarget.reset() @@ -109,7 +111,7 @@ StatusStackModal { Layout.fillWidth: true visible: d.selectedLinkType === Constants.socialLinkType.custom placeholderText: "" - label: qsTr("Add a title") + label: qsTr("Title") linkType: Constants.socialLinkType.custom icon: "language" charLimit: Constants.maxSocialLinkTextLength @@ -129,8 +131,8 @@ StatusStackModal { ProfileUtils.addSocialLinkPrefix(linkTarget.text, d.selectedLinkType)) } errorMessage: d.selectedLinkType === Constants.socialLinkType.custom? - qsTr("Name and link combination already added") : - qsTr("Link already added") + qsTr("Ttile and link combination already added") : + qsTr("Username already added") } ] @@ -143,7 +145,7 @@ StatusStackModal { Layout.fillWidth: true Layout.topMargin: customTitle.visible ? Style.current.padding : 0 placeholderText: "" - label: ProfileUtils.linkTypeToDescription(linkType) || qsTr("Add your link") + label: linkType === Constants.socialLinkType.custom ? qsTr("Link") : qsTr("Username") linkType: d.selectedLinkType icon: d.selectedIcon input.tabNavItem: customTitle.input.edit @@ -163,8 +165,8 @@ StatusStackModal { ProfileUtils.addSocialLinkPrefix(value, d.selectedLinkType)) } errorMessage: d.selectedLinkType === Constants.socialLinkType.custom? - qsTr("Name and link combination already added") : - qsTr("Link already added") + qsTr("Title and link combination already added") : + qsTr("Username already added") } ] diff --git a/ui/app/AppLayouts/Profile/popups/ModifySocialLinkModal.qml b/ui/app/AppLayouts/Profile/popups/ModifySocialLinkModal.qml index 2998a6a43e..d197c3b7a3 100644 --- a/ui/app/AppLayouts/Profile/popups/ModifySocialLinkModal.qml +++ b/ui/app/AppLayouts/Profile/popups/ModifySocialLinkModal.qml @@ -30,7 +30,7 @@ StatusDialog { 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 { leftButtons: ObjectModel { @@ -94,9 +94,9 @@ StatusDialog { return !root.containsSocialLink(value, ProfileUtils.addSocialLinkPrefix(linkTarget.text, root.linkType)) } - errorMessage: root.linkType === Constants.socialLinkType.custom? - qsTr("Name and link combination already added") : - qsTr("Link already added") + errorMessage: root.linkType === Constants.socialLinkType.custom ? + qsTr("Title and link combination already added") : + qsTr("Username already added") } ] @@ -109,7 +109,7 @@ StatusDialog { Layout.fillWidth: true Layout.topMargin: customTitle.visible ? Style.current.padding : 0 placeholderText: "" - label: ProfileUtils.linkTypeToDescription(linkType) || qsTr("Modify your link") + label: ProfileUtils.linkTypeToDescription(linkType) || qsTr("Edit your link") linkType: root.linkType icon: root.icon text: root.linkUrl @@ -130,8 +130,8 @@ StatusDialog { ProfileUtils.addSocialLinkPrefix(value, root.linkType)) } errorMessage: root.linkType === Constants.socialLinkType.custom? - qsTr("Name and link combination already added") : - qsTr("Link already added") + qsTr("Title and link combination already added") : + qsTr("Username already added") } ] diff --git a/ui/app/AppLayouts/Profile/views/MyProfileView.qml b/ui/app/AppLayouts/Profile/views/MyProfileView.qml index 319ff16621..c2119b58f6 100644 --- a/ui/app/AppLayouts/Profile/views/MyProfileView.qml +++ b/ui/app/AppLayouts/Profile/views/MyProfileView.qml @@ -161,8 +161,8 @@ SettingsContentBase { StackLayout { id: stackLayout - width: contentWidth - height: contentHeight + width: root.contentWidth + height: profileTabBar.currentIndex === MyProfileView.Web ? implicitHeight : root.contentHeight currentIndex: profileTabBar.currentIndex onCurrentIndexChanged: { diff --git a/ui/imports/utils/ProfileUtils.qml b/ui/imports/utils/ProfileUtils.qml index fb8df094e9..9a3e3bbf73 100644 --- a/ui/imports/utils/ProfileUtils.qml +++ b/ui/imports/utils/ProfileUtils.qml @@ -26,7 +26,7 @@ QtObject { } 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.github) return qsTr("Github") if (linkType === Constants.socialLinkType.youtube) return qsTr("YouTube channel") @@ -35,8 +35,18 @@ QtObject { 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) { - 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.youtube) return "#FF3000" if (linkType === Constants.socialLinkType.discord) return "#7289DA" @@ -44,6 +54,10 @@ QtObject { return Theme.palette.primaryColor1 } + function linkTypeBgColor(linkType) { + return Theme.palette.getColor(linkTypeColor(linkType), 0.1) + } + function linkTypeToDescription(linkType) { if (linkType === Constants.socialLinkType.twitter) return qsTr("Twitter username") if (linkType === Constants.socialLinkType.personalSite) return qsTr("Personal site")