style/kirigami/AbstractApplicationHeader.qml

0001 /*
0002  *  SPDX-FileCopyrightText: 2016 Marco Martin <mart@kde.org>
0003  *
0004  *  SPDX-License-Identifier: LGPL-2.0-or-later
0005  */
0006
0007 import QtQuick
0008 import org.kde.kirigami as Kirigami
0009 import QtQuick.Controls as Controls
0010 import "../../templates" as T
0011 import "../../private" as KP
0012
0013 /**
0014  * An item that can be used as a title for the application.
0015  * Scrolling the main page will make it taller or shorter (trough the point of going away)
0016  * It's a behavior similar to the typical mobile web browser addressbar
0017  * the minimum, preferred and maximum heights of the item can be controlled with
0018  * * minimumHeight: default is 0, i.e. hidden
0019  * * preferredHeight: default is Units.gridUnit * 1.6
0020  * * maximumHeight: default is Units.gridUnit * 3
0021  *
0022  * To achieve a titlebar that stays completely fixed just set the 3 sizes as the same
0023  */
0024 T.AbstractApplicationHeader {
0025     id: root
0026
0027     readonly property bool __isHeader: root.position == Controls.ToolBar.Header
0028     readonly property bool __isFooter: root.position == Controls.ToolBar.Footer
0029
0030     Kirigami.Theme.inherit: false
0031     Kirigami.Theme.colorSet: Kirigami.Theme.Header
0032
0033     topPadding: __isFooter ? 1 : 0 // Add space for the separator above the footer
0034     bottomPadding: __isHeader ? 1 : 0 // Add space for the separator below the header
0035
0036     background: Rectangle {
0037         color: Kirigami.Theme.backgroundColor
0038         Rectangle {
0039             id: shadow
0040             visible: root.separatorVisible && Kirigami.Settings.isMobile
0041             anchors {
0042                 right: parent.right
0043                 left: parent.left
0044                 top: parent.bottom
0045             }
0046             height: Kirigami.Units.smallSpacing
0047             gradient: Gradient {
0048                 GradientStop {
0049                     position: 0.0
0050                     color: Qt.rgba(0, 0, 0, 0.20)
0051                 }
0052                 GradientStop {
0053                     position: 0.368 // 1/e
0054                     color: Qt.rgba(0, 0, 0, 0.074) // 0.2/e
0055                 }
0056                 GradientStop {
0057                     position: 1
0058                     color:  "transparent"
0059                 }
0060             }
0061             opacity: (!root.page || !root.page.header || root.page.header.toString().indexOf("ToolBar") === -1)
0062             Behavior on opacity {
0063                 OpacityAnimator {
0064                     duration: Kirigami.Units.longDuration
0065                     easing.type: Easing.InOutQuad
0066                 }
0067             }
0068         }
0069         Kirigami.Separator {
0070             id: separator
0071             visible: root.separatorVisible && !Kirigami.Settings.isMobile
0072             anchors {
0073                 left: parent.left
0074                 right: parent.right
0075                 verticalCenter: root.__isFooter ? parent.top : parent.bottom
0076                 //verticalCenter: root.y <= 0 ? root.bottom : root.top
0077             }
0078         }
0079         Behavior on opacity {
0080             OpacityAnimator {
0081                 duration: Kirigami.Units.longDuration
0082                 easing.type: Easing.InOutQuad
0083             }
0084         }
0085     }
0086 }
0087