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

160 lines
4.6 KiB
QML
Raw Normal View History

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