ui/StatusDelegate/LinkPreview.qml

0001 // SPDX-FileCopyrightText: 2022 Carl Schwan <carl@carlschwan.eu>
0002 // SPDX-License-Identifier: LGPL-2.0-or-later
0003
0004 import QtQuick
0005 import org.kde.kirigami 2 as Kirigami
0006 import QtQuick.Controls 2 as QQC2
0007 import QtQuick.Layouts
0008 import org.kde.tokodon
0009 import Qt5Compat.GraphicalEffects
0010
0011 // The visual "link preview box" when there's some data attached to a link
0012 // Such as the website page description and title
0013 QQC2.AbstractButton {
0014     id: root
0015
0016     required property var card
0017     required property bool selected
0018
0019     Accessible.name: i18n("Link preview: %1", root.card ? root.card.title : '')
0020     Accessible.description: root.card ? root.card.providerName : ''
0021
0022     leftPadding: Kirigami.Units.largeSpacing
0023     topPadding: Kirigami.Units.largeSpacing
0024     rightPadding: Kirigami.Units.largeSpacing
0025     bottomPadding: Kirigami.Units.largeSpacing
0026
0027     onClicked: Qt.openUrlExternally(root.card.url)
0028
0029     HoverHandler {
0030         cursorShape: Qt.PointingHandCursor
0031         onHoveredChanged: if (hovered) {
0032             applicationWindow().hoverLinkIndicator.text = root.card.url;
0033         } else {
0034             applicationWindow().hoverLinkIndicator.text = "";
0035         }
0036     }
0037
0038     background: Rectangle {
0039         Kirigami.Theme.colorSet: Kirigami.Theme.Window
0040         Kirigami.Theme.inherit: false
0041
0042         radius: Kirigami.Units.mediumSpacing
0043         color: Kirigami.Theme.alternateBackgroundColor
0044         border {
0045             width: root.visualFocus ? 2 : 0
0046             color: root.visualFocus ? Kirigami.Theme.focusColor : 'transparent'
0047         }
0048     }
0049
0050     contentItem: RowLayout {
0051         spacing: 0
0052
0053         Image {
0054             id: img
0055             mipmap: true
0056             smooth: true
0057
0058             visible: root.card && root.card.image
0059
0060             Layout.minimumHeight: Kirigami.Units.gridUnit * 3
0061             Layout.maximumHeight: Kirigami.Units.gridUnit * 3
0062             Layout.minimumWidth: Kirigami.Units.gridUnit * 3
0063             Layout.maximumWidth: Kirigami.Units.gridUnit * 3
0064             Layout.topMargin: 0
0065             Layout.bottomMargin: 0
0066             Layout.leftMargin: Kirigami.Units.smallSpacing
0067
0068             layer.enabled: true
0069             layer.effect: OpacityMask {
0070                 maskSource: Item {
0071                     width: img.width
0072                     height: img.height
0073                     Kirigami.ShadowedRectangle {
0074                         anchors.centerIn: parent
0075                         radius: Kirigami.Units.mediumSpacing
0076                         width: img.width
0077                         height: img.height
0078                     }
0079                 }
0080             }
0081
0082             fillMode: Image.PreserveAspectCrop
0083             source: root.card ? root.card.image : ''
0084         }
0085         ColumnLayout {
0086             Layout.fillWidth: true
0087             Layout.margins: Kirigami.Units.smallSpacing
0088             Layout.leftMargin: Kirigami.Units.largeSpacing
0089             spacing: 0
0090             QQC2.Label {
0091                 text: root.card ? root.card.providerName : ''
0092                 elide: Text.ElideRight
0093                 font: Kirigami.Theme.smallFont
0094                 visible: text
0095                 Layout.fillWidth: true
0096                 maximumLineCount: 1
0097             }
0098             Kirigami.Heading {
0099                 level: 5
0100                 text: root.card ? root.card.title : ''
0101                 elide: Text.ElideRight
0102                 font.weight: Font.DemiBold
0103                 maximumLineCount: 1
0104                 visible: text
0105                 Layout.fillWidth: true
0106             }
0107             QQC2.Label {
0108                 text: root.card ? root.card.description : ''
0109                 elide: Text.ElideRight
0110                 visible: text
0111                 maximumLineCount: 1
0112                 Layout.fillWidth: true
0113             }
0114         }
0115     }
0116
0117     HoverHandler {
0118         cursorShape: Qt.PointingHandCursor
0119     }
0120 }