Changeset View
Changeset View
Standalone View
Standalone View
src/controls/OverlayDrawer.qml
| Show All 13 Lines | |||||
| 14 | * You should have received a copy of the GNU Library General Public | 14 | * You should have received a copy of the GNU Library General Public | ||
| 15 | * License along with this program; if not, write to the | 15 | * License along with this program; if not, write to the | ||
| 16 | * Free Software Foundation, Inc., | 16 | * Free Software Foundation, Inc., | ||
| 17 | * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. | 17 | * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. | ||
| 18 | */ | 18 | */ | ||
| 19 | 19 | | |||
| 20 | import QtQuick 2.1 | 20 | import QtQuick 2.1 | ||
| 21 | import QtGraphicalEffects 1.0 | 21 | import QtGraphicalEffects 1.0 | ||
| 22 | import org.kde.kirigami 1.0 | 22 | import QtQuick.Templates 2.0 as T2 | ||
| 23 | import org.kde.kirigami 2.0 | ||||
| 23 | 24 | | |||
| 24 | import "private" | 25 | import "private" | ||
| 25 | import "templates" as T | 26 | import "templates" as T | ||
| 26 | 27 | | |||
| 27 | /** | 28 | /** | ||
| 28 | * Overlay Drawers are used to expose additional UI elements needed for | 29 | * Overlay Drawers are used to expose additional UI elements needed for | ||
| 29 | * small secondary tasks for which the main UI elements are not needed. | 30 | * small secondary tasks for which the main UI elements are not needed. | ||
| 30 | * For example in Okular Active, an Overlay Drawer is used to display | 31 | * For example in Okular Active, an Overlay Drawer is used to display | ||
| 31 | * thumbnails of all pages within a document along with a search field. | 32 | * thumbnails of all pages within a document along with a search field. | ||
| 32 | * This is used for the distinct task of navigating to another page. | 33 | * This is used for the distinct task of navigating to another page. | ||
| 33 | * | 34 | * | ||
| 34 | */ | 35 | */ | ||
| 35 | T.OverlayDrawer { | 36 | T.OverlayDrawer { | ||
| 36 | id: root | 37 | id: root | ||
| 37 | 38 | | |||
| 38 | //BEGIN Properties | 39 | //BEGIN Properties | ||
| 39 | background: Rectangle { | 40 | background: Rectangle { | ||
| 40 | color: Theme.viewBackgroundColor | 41 | color: Theme.viewBackgroundColor | ||
| 41 | 42 | | |||
| 42 | Item { | 43 | Item { | ||
| 43 | id: drawerHandle | 44 | parent: root.handle | ||
| 44 | z: -1 | 45 | anchors.fill: parent | ||
| 45 | | ||||
| 46 | anchors { | | |||
| 47 | right: root.edge == Qt.LeftEdge ? undefined : parent.left | | |||
| 48 | left: root.edge == Qt.RightEdge ? undefined : parent.right | | |||
| 49 | bottom: parent.bottom | | |||
| 50 | } | | |||
| 51 | visible: root.enabled && (root.edge == Qt.LeftEdge || root.edge == Qt.RightEdge) | | |||
| 52 | width: Units.iconSizes.medium + Units.smallSpacing * 2 | | |||
| 53 | height: width | | |||
| 54 | opacity: root.handleVisible ? 1 : 0 | | |||
| 55 | Behavior on opacity { | | |||
| 56 | NumberAnimation { | | |||
| 57 | duration: Units.longDuration | | |||
| 58 | easing.type: Easing.InOutQuad | | |||
| 59 | } | | |||
| 60 | } | | |||
| 61 | transform: Translate { | | |||
| 62 | id: translateTransform | | |||
| 63 | x: root.handleVisible ? 0 : (root.edge == Qt.LeftEdge ? -drawerHandle.width : drawerHandle.width) | | |||
| 64 | Behavior on x { | | |||
| 65 | NumberAnimation { | | |||
| 66 | duration: Units.longDuration | | |||
| 67 | easing.type: !root.handleVisible ? Easing.OutQuad : Easing.InQuad | | |||
| 68 | } | | |||
| 69 | } | | |||
| 70 | } | | |||
| 71 | Item { | 46 | Item { | ||
| 72 | opacity: 0.4 + root.position | 47 | opacity: 0.4 + root.position | ||
| 73 | anchors { | 48 | anchors { | ||
| 74 | fill:parent | 49 | fill: parent | ||
| 75 | margins: -Units.gridUnit | 50 | topMargin: -Units.gridUnit | ||
| 51 | leftMargin: root.edge == Qt.RightEdge ? -Units.gridUnit : 0 | ||||
| 52 | rightMargin: root.edge == Qt.RightEdge ? 0 : -Units.gridUnit | ||||
| 76 | } | 53 | } | ||
| 77 | layer.enabled: true | 54 | layer.enabled: true | ||
| 78 | Rectangle { | 55 | Rectangle { | ||
| 79 | id: shadowRect | 56 | id: shadowRect | ||
| 80 | anchors.fill: handleGraphics | 57 | anchors.fill: handleGraphics | ||
| 81 | color: "black" | 58 | color: "black" | ||
| 82 | } | 59 | } | ||
| 83 | FastBlur { | 60 | FastBlur { | ||
| 84 | z: -1 | 61 | z: -1 | ||
| 85 | anchors.fill: shadowRect | 62 | anchors.fill: shadowRect | ||
| 86 | source: shadowRect | 63 | source: shadowRect | ||
| 87 | radius: Units.gridUnit | 64 | radius: Units.gridUnit | ||
| 88 | transparentBorder: true | 65 | transparentBorder: true | ||
| 89 | } | 66 | } | ||
| 90 | Rectangle { | 67 | Rectangle { | ||
| 91 | id: handleGraphics | 68 | id: handleGraphics | ||
| 92 | color: Theme.viewBackgroundColor | 69 | color: Theme.viewBackgroundColor | ||
| 93 | anchors { | 70 | anchors { | ||
| 94 | fill:parent | 71 | fill: parent | ||
| 95 | margins: Units.gridUnit | 72 | topMargin: Units.gridUnit | ||
| 73 | leftMargin: root.edge == Qt.RightEdge ? Units.gridUnit : 0 | ||||
| 74 | rightMargin: root.edge == Qt.RightEdge ? 0 : Units.gridUnit | ||||
| 96 | } | 75 | } | ||
| 97 | } | 76 | } | ||
| 98 | } | 77 | } | ||
| 99 | 78 | | |||
| 100 | Loader { | 79 | Loader { | ||
| 101 | anchors.centerIn: parent | 80 | anchors.centerIn: parent | ||
| 102 | width: height | 81 | width: height | ||
| 103 | height: Units.iconSizes.smallMedium | 82 | height: Units.iconSizes.smallMedium | ||
| Show All 30 Lines | |||||