kirigami-addons/tests/Avatars.qml

0001 /*
0002  *  SPDX-FileCopyrightText: 2023 ivan tkachenko <me@ratijas.tk>
0003  *
0004  *  SPDX-License-Identifier: LGPL-2.0-or-later
0005  */
0006
0007 import QtQuick 2.15
0008 import QtQuick.Controls 2.15 as QQC2
0009 import QtQuick.Layouts 1.15
0010 import org.kde.kirigami 2.20 as Kirigami
0011 import org.kde.kirigamiaddons.components 1.0 as KirigamiComponents
0012
0013 QQC2.Pane {
0014     width: Kirigami.Units.gridUnit * 15
0015     height: Kirigami.Units.gridUnit * 20
0016
0017     ColumnLayout {
0018         anchors.fill: parent
0019         spacing: Kirigami.Units.largeSpacing
0020
0021         KirigamiComponents.AvatarButton {
0022             id: avatar1
0023
0024             Layout.preferredWidth: Kirigami.Units.gridUnit * 6
0025             Layout.preferredHeight: Kirigami.Units.gridUnit * 6
0026             Layout.alignment: Qt.AlignHCenter
0027
0028             name: "John Due"
0029
0030             QQC2.Button {
0031                 parent: avatar1.clippedContent
0032                 width: parent.width
0033                 height: Math.round(parent.height * 0.333)
0034                 anchors.bottom: parent.bottom
0035                 anchors.bottomMargin: avatar1.hovered ? 0 : -height
0036
0037                 Behavior on anchors.bottomMargin {
0038                     NumberAnimation {
0039                         duration: Kirigami.Units.shortDuration
0040                         easing.type: Easing.InOutCubic
0041                     }
0042                 }
0043
0044                 verticalPadding: Math.round(height * 0.1)
0045                 topPadding: undefined
0046                 bottomPadding: undefined
0047
0048                 HoverHandler {
0049                     cursorShape: Qt.PointingHandCursor
0050                 }
0051
0052                 contentItem: Item {
0053                     Kirigami.Icon {
0054                         height: parent.height
0055                         width: height
0056                         anchors.horizontalCenter: parent.horizontalCenter
0057                         source: "camera-photo-symbolic"
0058                     }
0059                 }
0060                 background: Rectangle {
0061                     color: Qt.rgba(0, 0, 0, 0.6)
0062                 }
0063
0064                 onClicked: print("Select photo")
0065             }
0066
0067             onClicked: print("Show photo fullscreen")
0068         }
0069     }
0070 }