qml/private/Header.qml

0001 /*
0002  * SPDX-FileCopyrightText: 2019 Fabian Riethmayer <fabian@web2.0-apps.de>
0003  *
0004  * SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
0005  */
0006
0007 import QtQuick 2.15
0008 import QtQuick.Controls 2.15 as QQC2
0009 import QtQuick.Layouts 1.15
0010 import Qt5Compat.GraphicalEffects
0011
0012 import org.kde.kirigami as Kirigami
0013 import org.kde.kirigamiaddons.components as Components
0014
0015 QQC2.Control {
0016     id: root
0017
0018     required property var source
0019     required property string name
0020     property alias actions: toolbar.actions
0021
0022     readonly property bool largeScreen: width > Kirigami.Units.gridUnit * 25
0023     readonly property color shadowColor: Qt.rgba(0, 0, 0, 0.2)
0024
0025     background: Item {
0026         Item {
0027             anchors.fill: parent
0028
0029             Rectangle {
0030                 anchors.fill: parent
0031                 color: avatar.color
0032                 opacity: 0.2
0033
0034             }
0035             Kirigami.Icon {
0036                 visible: source
0037                 scale: 1.8
0038                 anchors.fill: parent
0039
0040                 source: root.source
0041
0042                 implicitWidth: 512
0043                 implicitHeight: 512
0044             }
0045
0046             layer.enabled: true
0047             layer.effect: HueSaturation {
0048                 cached: true
0049
0050                 saturation: 1.9
0051
0052                 layer {
0053                     enabled: true
0054                     effect: FastBlur {
0055                         cached: true
0056                         radius: 100
0057                     }
0058                 }
0059             }
0060         }
0061
0062         Rectangle {
0063             anchors.fill: parent
0064             gradient: Gradient {
0065                 GradientStop { position: -1.0; color: "transparent" }
0066                 GradientStop { position: 1.0; color: Kirigami.Theme.backgroundColor }
0067             }
0068         }
0069     }
0070
0071     contentItem: RowLayout {
0072         RowLayout {
0073             Layout.maximumWidth: Kirigami.Units.gridUnit * 30
0074             Layout.fillWidth: true
0075             Layout.alignment: Qt.AlignHCenter
0076
0077             Kirigami.ShadowedRectangle {
0078                 Layout.margins: root.largeScreen ? Kirigami.Units.gridUnit * 2 : Kirigami.Units.largeSpacing
0079                 Layout.preferredWidth: root.largeScreen ? Kirigami.Units.gridUnit * 5 : Kirigami.Units.gridUnit * 3
0080                 Layout.preferredHeight: root.largeScreen ? Kirigami.Units.gridUnit * 5 : Kirigami.Units.gridUnit * 3
0081
0082                 radius: width
0083                 color: Kirigami.Theme.backgroundColor
0084
0085                 shadow {
0086                     size: Kirigami.Units.gridUnit
0087                     xOffset: Kirigami.Units.smallSpacing
0088                     yOffset: Kirigami.Units.smallSpacing
0089                     color: root.shadowColor
0090                 }
0091
0092                 Components.Avatar {
0093                     id: avatar
0094
0095                     anchors.fill: parent
0096
0097                     visible: !imageIcon.visible
0098                     name: root.name
0099                     imageMode: Components.Avatar.ImageMode.AdaptiveImageOrInitals
0100                 }
0101
0102                 Kirigami.Icon {
0103                     id: imageIcon
0104
0105                     anchors.fill: parent
0106
0107                     source: root.source
0108                     roundToIconSize: false
0109                     visible: source
0110
0111                     layer {
0112                         enabled: imageIcon.visible
0113                         effect: OpacityMask {
0114                             maskSource: Rectangle {
0115                                 width: imageIcon.width
0116                                 height: imageIcon.width
0117                                 radius: imageIcon.width
0118                                 color: "black"
0119                                 visible: false
0120                             }
0121                         }
0122                     }
0123                 }
0124             }
0125
0126             ColumnLayout {
0127                 Layout.leftMargin: Kirigami.Units.largeSpacing
0128                 Layout.rightMargin: Kirigami.Units.largeSpacing
0129                 Layout.fillWidth: true
0130
0131                 Kirigami.Heading {
0132                     Layout.fillWidth: true
0133                     text: root.name
0134                     font.bold: true
0135                     maximumLineCount: 2
0136                     wrapMode: Text.Wrap
0137                     elide: Text.ElideRight
0138                 }
0139
0140                 Kirigami.ActionToolBar {
0141                     Layout.fillWidth: true
0142
0143                     id: toolbar
0144                 }
0145             }
0146         }
0147     }
0148 }