Changeset View
Changeset View
Standalone View
Standalone View
src/styles/Desktop/OverlayDrawer.qml
| Show All 12 Lines | |||||
| 13 | * | 13 | * | ||
| 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 org.kde.kirigami 1.0 | 21 | import org.kde.kirigami 2.0 | ||
| 22 | import QtQuick.Templates 2.0 | ||||
| 22 | 23 | | |||
| 23 | import "../../templates" as T | 24 | import "../../templates" as T | ||
| 24 | 25 | | |||
| 25 | /** | 26 | /** | ||
| 26 | * Overlay Drawers are used to expose additional UI elements needed for | 27 | * Overlay Drawers are used to expose additional UI elements needed for | ||
| 27 | * small secondary tasks for which the main UI elements are not needed. | 28 | * small secondary tasks for which the main UI elements are not needed. | ||
| 28 | * For example in Okular Active, an Overlay Drawer is used to display | 29 | * For example in Okular Active, an Overlay Drawer is used to display | ||
| 29 | * thumbnails of all pages within a document along with a search field. | 30 | * thumbnails of all pages within a document along with a search field. | ||
| 30 | * This is used for the distinct task of navigating to another page. | 31 | * This is used for the distinct task of navigating to another page. | ||
| 31 | * | 32 | * | ||
| 32 | */ | 33 | */ | ||
| 33 | T.OverlayDrawer { | 34 | T.OverlayDrawer { | ||
| 34 | id: root | 35 | id: root | ||
| 35 | 36 | | |||
| 36 | //BEGIN Properties | 37 | //BEGIN Properties | ||
| 37 | background: Rectangle { | 38 | background: Rectangle { | ||
| 38 | color: Theme.viewBackgroundColor | 39 | color: Theme.viewBackgroundColor | ||
| 39 | property Item handleBackground: Item { | | |||
| 40 | } | | |||
| 41 | 40 | | |||
| 42 | Item { | 41 | Item { | ||
| 43 | id: drawerHandle | 42 | id: drawerHandle | ||
| 44 | z: -1 | 43 | parent: root.handle | ||
| 44 | anchors.fill: parent | ||||
| 45 | 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) | 46 | visible: root.enabled && (root.edge == Qt.LeftEdge || root.edge == Qt.RightEdge) | ||
| 52 | width: Units.iconSizes.medium + Units.smallSpacing * 2 | 47 | width: Units.iconSizes.medium + Units.smallSpacing * 2 | ||
| 53 | height: width | 48 | height: width | ||
| 54 | opacity: root.handleVisible ? 1 : 0 | 49 | opacity: root.handleVisible ? 1 : 0 | ||
| 55 | Behavior on opacity { | 50 | Behavior on opacity { | ||
| 56 | NumberAnimation { | 51 | NumberAnimation { | ||
| 57 | duration: Units.longDuration | 52 | duration: Units.longDuration | ||
| 58 | easing.type: Easing.InOutQuad | 53 | easing.type: Easing.InOutQuad | ||
| ▲ Show 20 Lines • Show All 61 Lines • ▼ Show 20 Line(s) | 107 | Rectangle { | |||
| 120 | color: Theme.textColor | 115 | color: Theme.textColor | ||
| 121 | opacity: root.position == 0 ? 0 : 0.3 | 116 | opacity: root.position == 0 ? 0 : 0.3 | ||
| 122 | width: Units.devicePixelRatio | 117 | width: Units.devicePixelRatio | ||
| 123 | } | 118 | } | ||
| 124 | } | 119 | } | ||
| 125 | 120 | | |||
| 126 | //default to a sidebar in desktop mode | 121 | //default to a sidebar in desktop mode | ||
| 127 | modal: edge == Qt.TopEdge || edge == Qt.BottomEdge | 122 | modal: edge == Qt.TopEdge || edge == Qt.BottomEdge | ||
| 128 | opened: true | 123 | drawerOpen: true | ||
| 124 | closePolicy: modal ? Popup.CloseOnEscape | Popup.CloseOnPressOutside : Popup.NoAutoClose | ||||
| 125 | handleVisible: false | ||||
| 126 | onPositionChanged: { | ||||
| 127 | if (!modal && !root.peeking && !root.animating) { | ||||
| 128 | position = 1; | ||||
| 129 | } | ||||
| 130 | } | ||||
| 129 | } | 131 | } | ||