status-desktop/ui/app/AppLayouts/Profile/popups/SocialLinksModal.qml

160 lines
4.6 KiB
QML

import QtQuick 2.14
import QtQuick.Layouts 1.14
import utils 1.0
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Popups.Dialog 0.1
import "../stores"
import "../controls"
import SortFilterProxyModel 0.2
StatusDialog {
id: root
objectName: "socialLinksModal"
property ProfileStore profileStore
width: 640
topPadding: 24
bottomPadding: 24
leftPadding: 34
rightPadding: 34
title: qsTr("Social Links")
footer: null
onOpened: {
staticLinksRepeater.model = staticSocialLinks
customLinksRepeater.model = customSocialLinks
}
onClosed: {
// ensure text input values are reevaluated
staticLinksRepeater.model = null
customLinksRepeater.model = null
}
SortFilterProxyModel {
id: staticSocialLinks
sourceModel: root.profileStore.temporarySocialLinksModel
filters: ValueFilter {
roleName: "linkType"
value: Constants.socialLinkType.custom
inverted: true
}
sorters: RoleSorter {
roleName: "linkType"
}
}
SortFilterProxyModel {
id: customSocialLinks
sourceModel: root.profileStore.temporarySocialLinksModel
filters: ValueFilter {
roleName: "linkType"
value: Constants.socialLinkType.custom
}
}
StatusScrollView {
id: scrollView
anchors.fill: parent
padding: 0
ColumnLayout {
width: scrollView.availableWidth
spacing: 24 // by design
Repeater {
id: staticLinksRepeater
delegate: StaticSocialLinkInput {
objectName: model.text + "-socialLinkInput"
Layout.fillWidth: true
linkType: model.linkType
text: Utils.stripSocialLinkPrefix(model.url, model.linkType)
icon: model.icon
input.tabNavItem: {
if (index < staticLinksRepeater.count - 1) {
return staticLinksRepeater.itemAt(index + 1).input.edit
}
return customLinksRepeater.count ? customLinksRepeater.itemAt(0).focusItem : null
}
onTextChanged: root.profileStore.updateLink(model.uuid, model.text, Utils.addSocialLinkPrefix(text, linkType))
Component.onCompleted: if (index === 0) {
input.edit.forceActiveFocus()
}
}
}
StatusBaseText {
text: qsTr("Custom links")
color: Theme.palette.baseColor1
font.pixelSize: 15
}
ColumnLayout {
id: customLinksLayout
spacing: 40
Layout.topMargin: -4 // by design
Repeater {
id: customLinksRepeater
delegate: CustomSocialLinkInput {
objectName: "customSocialLinkInput"
Layout.fillWidth: true
hyperlink: model.text
url: model.url
removeButton.visible: index > 0
removeButton.onClicked: root.profileStore.removeCustomLink(model.uuid)
nextFocusItem: {
if (index < customLinksRepeater.count - 1) {
return customLinksRepeater.itemAt(index + 1).focusItem
}
return addAnotherCustomLinkButton
}
onHyperlinkChanged: root.profileStore.updateLink(model.uuid, hyperlink, url)
onUrlChanged: root.profileStore.updateLink(model.uuid, hyperlink, url)
Rectangle {
y: -customLinksLayout.spacing / 2
width: parent.width
height: 1
color: Theme.palette.baseColor2
visible: index > 0
}
}
}
}
StatusIconTextButton {
id: addAnotherCustomLinkButton
text: qsTr("Add another custom link")
onClicked: {
root.profileStore.createCustomLink("", "")
scrollView.contentY = scrollView.contentHeight - scrollView.availableHeight
}
}
}
}
}