mifr/subsurface
1
0
Fork 0
mirror of https://github.com/subsurface/subsurface.git synced 2025-02-17 22:46:16 +00:00
Code Issues Projects Releases Packages Wiki Activity

import mobilecomponents

Browse source 
This commit adds the .qml and qmldir files for the MobileComponents
import. It contains low-level things like units and theme, and mid-level
things like Heading, and high-level navigation in the form of an
ApplicationWindow and Drawers that hold menues and provide swipe
interactions between the pages.

These components are a more full version of the "light" plasma
components we have been using to make the UI scale well and appear more
consistent (coloring, spacing, alignment, etc.).

An interesting change is that Units and Theme are now singleton types,
which is more efficient. It does mean a few changes to our current API
usage:
- units becomes Units
- theme becomes Theme
- 2 properties move out of each (we can't subclass singleton types)

This change also means that we're using the vanilla upstream components,
so it's very easy to get improvements to these rather young components
in, and we don't have to do this work on our own.

The mobilecomponents consist of just a bunch of qml files which we can
deploy through the qrc file.

In the next commits, we will gradually make the current UI use these new
elements.

Signed-off-by: Sebastian Kügler <sebas@kde.org>
This commit is contained in:
Sebastian Kügler 2015-11-29 17:13:13 +01:00
parent 0a59fd74e2
commit b59cdcd4d3
24 changed files with 3623 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
qt-mobile/qml/mobilecomponents/ActionGroup.qml Normal file
View file

@ -0,0 +1,27 @@
/*
* Copycontext 2015 Marco Martin <mart@kde.org>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Library General Public License as
* published by the Free Software Foundation; either version 2 or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Library General Public License for more details
*
* You should have received a copy of the GNU Library General Public
* License along with this program; if not, write to the
* Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import QtQuick 2.1
import QtQuick.Controls 1.3
Action {
id: root
default property alias children: root.__children
property list<Action> __children
}

86
qt-mobile/qml/mobilecomponents/ApplicationWindow.qml Normal file
View file

@ -0,0 +1,86 @@
/*
* Copycontext 2015 Marco Martin <mart@kde.org>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Library General Public License as
* published by the Free Software Foundation; either version 2 or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Library General Public License for more details
*
* You should have received a copy of the GNU Library General Public
* License along with this program; if not, write to the
* Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import QtQuick 2.1
import QtQuick.Controls 1.3
import "private"
/**
* A window that provides some basic features needed for all apps
*
* It's usually used as a root QML component for the application.
* It's based around the PageRow component, the application will be
* about pages adding and removal.
*/
ApplicationWindow {
id: root
/**
* The first page that will be loaded when the application starts
*/
property alias initialPage: __pageStack.initialPage
/**
* The stack used to allocate the pages nd to manage the transitions
* between them.
* It's using a PageRow, while having the same aPI as PageStack,
* it positions the pages as adjacent columns, with as many columns
* as can fit in the screen. An handheld device would usually have a single
* fullscreen column, a tablet device would have many tiled columns.
*/
property alias pageStack: __pageStack
PageRow {
id: __pageStack
anchors.fill: parent
focus: true
Keys.onReleased: {
if (event.key == Qt.Key_Back && stackView.depth > 1) {
stackView.pop();
event.accepted = true;
}
}
onLastVisiblePageChanged: {
if (lastVisiblePage != null) {
pop(lastVisiblePage)
}
}
}
property AbstractDrawer globalDrawer
property AbstractDrawer contextDrawer
onGlobalDrawerChanged: {
globalDrawer.parent = contentItem.parent;
}
onContextDrawerChanged: {
contextDrawer.parent = contentItem.parent;
}
property alias actionButton: __actionButton
ActionButton {
id: __actionButton
z: 9999
anchors.bottom: parent.bottom
x: parent.width/2 - width/2
iconSource: "distribute-horizontal-x"
visible: root.globalDrawer || root.contextDrawer
}
}

93
qt-mobile/qml/mobilecomponents/ContextDrawer.qml Normal file
View file

@ -0,0 +1,93 @@
/*
* Copyright 2015 Marco Martin <mart@kde.org>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Library General Public License as
* published by the Free Software Foundation; either version 2, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Library General Public License for more details
*
* You should have received a copy of the GNU Library General Public
* License along with this program; if not, write to the
* Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import QtQuick 2.1
import QtQuick.Controls 1.0 as QtControls
import org.kde.plasma.mobilecomponents 0.2
OverlayDrawer {
id: root
property string title
//This can be any type of object that a ListView can accept as model. It expects items compatible with either QAction or QQC Action
property var actions
enabled: menu.count > 0
edge: Qt.RightEdge
contentItem: QtControls.ScrollView {
ListView {
id: menu
model: {
if (root.actions.length == 0) {
return null;
} else {
return root.actions[0].text !== undefined &&
root.actions[0].trigger !== undefined ?
root.actions :
root.actions[0];
}
}
verticalLayoutDirection: ListView.BottomToTop
//in bottomtotop all is flipped
footer: Item {
height: heading.height
width: menu.width
Heading {
id: heading
anchors {
left: parent.left
right: parent.right
margins: Units.largeSpacing
}
elide: Text.ElideRight
level: 2
text: root.title
}
}
delegate: ListItem {
enabled: true
Row {
anchors {
left: parent.left
margins: Units.largeSpacing
}
Icon {
height: parent.height
width: height
source: modelData.iconName
}
Label {
text: model ? model.text : modelData.text
}
}
onClicked: {
if (modelData && modelData.trigger !== undefined) {
modelData.trigger();
// assume the model is a list of QAction or Action
} else if (menu.model.length > index) {
menu.model[index].trigger();
} else {
console.warning("Don't know how to trigger the action")
}
}
}
}
}
}

198
qt-mobile/qml/mobilecomponents/GlobalDrawer.qml Normal file
View file

@ -0,0 +1,198 @@
/*
* Copyright 2015 Marco Martin <mart@kde.org>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Library General Public License as
* published by the Free Software Foundation; either version 2, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Library General Public License for more details
*
* You should have received a copy of the GNU Library General Public
* License along with this program; if not, write to the
* Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.2
import QtGraphicalEffects 1.0
import org.kde.plasma.mobilecomponents 0.2
OverlayDrawer {
id: root
edge: Qt.LeftEdge
default property alias content: mainContent.data
property alias title: heading.text
property alias titleIcon: headingIcon.source
property alias bannerImageSource: bannerImage.source
property list<Action> actions
contentItem: ColumnLayout {
id: mainColumn
anchors.fill: parent
spacing: 0
implicitWidth: Units.gridUnit * 12
Image {
id: bannerImage
Layout.fillWidth: true
Layout.preferredWidth: title.implicitWidth
Layout.preferredHeight: bannerImageSource != "" ? Math.max(title.implicitHeight, Math.floor(width / (sourceSize.width/sourceSize.height))) : title.implicitHeight
Layout.minimumHeight: Math.max(headingIcon.height, heading.height) + Units.smallSpacing*2
fillMode: Image.PreserveAspectCrop
anchors {
left: parent.left
right: parent.right
top: parent.top
}
LinearGradient {
anchors {
left: parent.left
right: parent.right
top: parent.top
}
visible: bannerImageSource != ""
height: title.height * 1.3
start: Qt.point(0, 0)
end: Qt.point(0, height)
gradient: Gradient {
GradientStop {
position: 0.0
color: Qt.rgba(0, 0, 0, 0.8)
}
GradientStop {
position: 1.0
color: "transparent"
}
}
}
RowLayout {
id: title
anchors {
left: parent.left
top: parent.top
margins: Units.smallSpacing
}
Icon {
id: headingIcon
Layout.minimumWidth: Units.iconSizes.large
Layout.minimumHeight: width
}
Heading {
id: heading
level: 1
color: bannerImageSource != "" ? "white" : Theme.textColor
}
Item {
height: parent.height
Layout.minimumWidth: height
}
}
}
Rectangle {
color: Theme.textColor
opacity: 0.2
Layout.fillWidth: true
Layout.minimumHeight: 1
}
StackView {
id: pageRow
Layout.fillWidth: true
Layout.fillHeight: true
initialItem: menuComponent
}
ColumnLayout {
id: mainContent
Layout.alignment: Qt.AlignHCenter
Layout.minimumWidth: parent.width - Units.smallSpacing*2
Layout.maximumWidth: Layout.minimumWidth
Layout.fillWidth: false
Layout.fillHeight: true
}
Item {
Layout.minimumWidth: Units.smallSpacing
Layout.minimumHeight: Units.smallSpacing
}
Component {
id: menuComponent
ListView {
id: optionMenu
clip: true
model: actions
property int level: 0
footer: ListItem {
visible: level > 0
enabled: true
RowLayout {
anchors {
left: parent.left
}
Icon {
Layout.maximumWidth: height
Layout.fillHeight: true
source: "go-previous"
}
Label {
// Weird, this doesn't work
//text: (typeof(i18n) != undefined) ? i18n("Back") : "Back"
text: "Back"
}
}
onClicked: pageRow.pop()
}
delegate: ListItem {
enabled: true
RowLayout {
anchors {
left: parent.left
right: parent.right
}
Icon {
Layout.maximumWidth: height
Layout.fillHeight: true
source: modelData.iconName
}
Label {
Layout.fillWidth: true
text: modelData.text
}
Icon {
Layout.maximumWidth: height
Layout.fillHeight: true
source: "go-next"
visible: modelData.children != undefined
}
}
onClicked: {
if (modelData.children) {
pageRow.push(menuComponent, {"model": modelData.children, "level": level + 1});
} else {
modelData.trigger();
pageRow.pop(pageRow.initialPage);
root.opened = false;
}
}
}
}
}
}
}

76
qt-mobile/qml/mobilecomponents/Heading.qml Normal file
View file

@ -0,0 +1,76 @@
/*
* Copyright 2012 by Sebastian Kügler <sebas@kde.org>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Library General Public License as
* published by the Free Software Foundation; either version 2, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Library General Public License for more details
*
* You should have received a copy of the GNU Library General Public
* License along with this program; if not, write to the
* Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 2.010-1301, USA.
*/
import QtQuick 2.0
import org.kde.plasma.mobilecomponents 0.2
/**
* A heading label used for subsections of texts.
*
* The characteristics of the text will be automatically set according to the
* plasma Theme. Use this components for section titles or headings in your UI,
* for example page or section titles.
*
* Example usage:
*
* @code
* import org.kde.plasma.extras 2.0 as PlasmaExtras
* [...]
* Column {
* PlasmaExtras.Title { text: "Fruit sweetness on the rise" }
* PlasmaExtras.Heading { text: "Apples in the sunlight"; level: 2 }
* PlasmaExtras.Paragraph { text: "Long text about fruit and apples [...]" }
* [...]
* }
* @endcode
*
* The most important property is "text", which applies to the text property of
* Label. See PlasmaComponents Label and primitive QML Text element API for
* additional properties, methods and signals.
*/
Label {
id: heading
/**
* The level determines how big the section header is display, values
* between 1 (big) and 5 (small) are accepted
*/
property int level: 1
property int step: 2
height: Math.round(paintedHeight * 1.2)
font.pointSize: headerPointSize(level)
font.weight: Font.Light
wrapMode: Text.WordWrap
opacity: 0.8
function headerPointSize(l) {
var n = Theme.defaultFont.pointSize;
var s;
if (l > 4) {
s = n
} else if (l < 2) {
s = n + (5*step)
} else {
s = n + ((5-level)*2)
}
return s;
}
}

42
qt-mobile/qml/mobilecomponents/Icon.qml Normal file
View file

@ -0,0 +1,42 @@
/*
* Copyright 2015 Marco Martin <mart@kde.org>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Library General Public License as
* published by the Free Software Foundation; either version 2, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Library General Public License for more details
*
* You should have received a copy of the GNU Library General Public
* License along with this program; if not, write to the
* Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import QtQuick 2.0
import QtGraphicalEffects 1.0
Item {
id: root
property string source
property alias smooth: image.smooth
property bool active: false
property bool valid: image.status == Image.Ready
implicitWidth: image.sourceSize.width
implicitHeight: image.sourceSize.height
Image {
id: image
anchors.fill: parent
source: root.source != "" ? "icons/" + root.source + ".svg" : root.source
}
GammaAdjust {
anchors.fill: image
source: image
gamma: root.active ? 3.0 : 1
}
}

239
qt-mobile/qml/mobilecomponents/IconGrid.qml Normal file
View file

@ -0,0 +1,239 @@
/*
Copyright 2010 Marco Martin <notmart@gmail.com>
This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Library General Public
License as published by the Free Software Foundation; either
version 2 of the License, or (at your option) any later version.
This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
Library General Public License for more details.
You should have received a copy of the GNU Library General Public License
along with this library; see the file COPYING.LIB. If not, write to
the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
Boston, MA 02110-1301, USA.
*/
import QtQuick 2.1
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.mobilecomponents 0.2
import org.kde.plasma.mobilecomponents.private 0.2
Item {
id: main
property Component delegate
property QtObject model
property int pageSize: Math.floor(iconView.width/main.delegateWidth)*Math.floor(iconView.height/main.delegateHeight)
property int delegateWidth: Units.iconSizes.huge + Units.gridUnit*2
property int delegateHeight: Units.iconSizes.huge + Units.gridUnit*2
property alias currentPage: iconView.currentIndex
property int pagesCount: Math.ceil(model.count/pageSize)
property int count: model.count
property alias contentX: iconView.contentX
clip: true
function positionViewAtIndex(index)
{
iconView.positionViewAtIndex(index / pageSize, ListView.Beginning)
}
Timer {
id: resizeTimer
running: true
interval: 100
onTriggered: {
main.pageSize = Math.floor(iconView.width/main.delegateWidth)*Math.floor(iconView.height/main.delegateHeight)
if (iconView.currentItem) {
iconView.currentItem.width = iconView.width
iconView.currentItem.height = iconView.height
}
}
}
ListView {
id: iconView
objectName: "iconView"
pressDelay: 200
cacheBuffer: 100
highlightMoveDuration: 250
anchors.fill: parent
onWidthChanged: resizeTimer.restart()
onHeightChanged: resizeTimer.restart()
model: main.model ? Math.ceil(main.model.count/main.pageSize) : 0
highlightRangeMode: ListView.StrictlyEnforceRange
orientation: ListView.Horizontal
snapMode: ListView.SnapOneItem
boundsBehavior: Flickable.DragOverBounds
signal clicked(string url)
delegate: Component {
Item {
id: delegatePage
//Explicitly *not* bind the properties for performance reasons
Component.onCompleted: {
width = iconView.width
height = iconView.height
//iconView.cacheBuffer = iconView.width
}
Flow {
id: iconFlow
width: iconRepeater.suggestedWidth
anchors {
horizontalCenter: parent.horizontalCenter
top: parent.top
bottom: parent.bottom
}
property int orientation: ListView.Horizontal
PagedProxyModel {
id: pagedProxyModel
sourceModel: main.model
currentPage: model.index
pageSize: main.pageSize
}
Repeater {
id: iconRepeater
model: pagedProxyModel
property int columns: Math.min(count, Math.floor(delegatePage.width/main.delegateWidth))
property int suggestedWidth: main.delegateWidth*columns
//property int suggestedHeight: main.delegateHeight*Math.floor(count/columns)
delegate: main.delegate
}
}
}
}
}
Loader {
id: scrollArea
visible: main.model && Math.ceil(main.model.count/main.pageSize) > 1
anchors {
left: parent.left
right: parent.right
bottom: parent.bottom
}
height: Math.max( 16, iconView.height - Math.floor(iconView.height/delegateHeight)*delegateHeight)
property int pageCount: main.model ? Math.ceil(main.model.count/main.pageSize) : 0
sourceComponent: pageCount > 1 ? ((pageCount * 20 > width) ? scrollDotComponent : dotsRow) : undefined
function setViewIndex(index)
{
//animate only if near
if (Math.abs(iconView.currentIndex - index) > 1) {
iconView.positionViewAtIndex(index, ListView.Beginning)
} else {
iconView.currentIndex = index
}
}
Component {
id: scrollDotComponent
MouseArea {
anchors.fill: parent
property int pendingIndex: 0
Rectangle {
id: barRectangle
color: Theme.textColor
opacity: 2.05
height: 4
radius: 2
anchors {
left: parent.left
right: parent.right
verticalCenter: parent.verticalCenter
leftMargin: (parent.width/pageCount/2)
rightMargin: (parent.width/pageCount/2)
}
}
Rectangle {
color: Theme.textColor
height: 8
width: height
radius: 4
anchors.verticalCenter: parent.verticalCenter
x: parent.width/(pageCount/(iconView.currentIndex+1)) - (parent.width/pageCount/2) - 4
Behavior on x {
NumberAnimation {
duration: 250
easing.type: Easing.InOutQuad
}
}
}
function setViewIndexFromMouse(x)
{
pendingIndex = Math.min(pageCount,
Math.round(pageCount / (barRectangle.width / Math.max(x - barRectangle.x, 1))))
viewPositionTimer.restart()
}
onPressed: setViewIndexFromMouse(mouse.x)
onPositionChanged: setViewIndexFromMouse(mouse.x)
Timer {
id: viewPositionTimer
interval: 200
onTriggered: setViewIndex(pendingIndex)
}
}
}
Component {
id: dotsRow
Item {
Row {
anchors.centerIn: parent
spacing: 20
Repeater {
model: scrollArea.pageCount
Rectangle {
width: 6
height: 6
scale: iconView.currentIndex == index ? 1.5 : 1
radius: 5
smooth: true
opacity: iconView.currentIndex == index ? 0.8: 0.4
color: Theme.textColor
Behavior on scale {
NumberAnimation {
duration: 250
easing.type: Easing.InOutQuad
}
}
Behavior on opacity {
NumberAnimation {
duration: 250
easing.type: Easing.InOutQuad
}
}
MouseArea {
anchors {
fill: parent
margins: -10
}
onClicked: {
setViewIndex(index)
}
}
}
}
}
}
}
}
}

59
qt-mobile/qml/mobilecomponents/Label.qml Normal file
View file

@ -0,0 +1,59 @@
/*
* Copyright (C) 2011 by Marco Martin <mart@kde.org>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Library General Public License as
* published by the Free Software Foundation; either version 2, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Library General Public License for more details
*
* You should have received a copy of the GNU Library General Public
* License along with this program; if not, write to the
* Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 2.010-1301, USA.
*/
import QtQuick 2.1
import org.kde.plasma.mobilecomponents 0.2
/**
* This is a label which uses the plasma Theme.
*
* The characteristics of the text will be automatically set according to the
* plasma Theme. If you need a more customized text item use the Text component
* from QtQuick.
*
* You can use all elements of the QML Text component, in particular the "text"
* property to define the label text.
*
* @inherit QtQuick.Text
*/
Text {
id: root
height: Math.round(Math.max(paintedHeight, Units.gridUnit * 1.6))
verticalAlignment: lineCount > 1 ? Text.AlignTop : Text.AlignVCenter
activeFocusOnTab: false
renderType: Text.NativeRendering
font.capitalization: Theme.defaultFont.capitalization
font.family: Theme.defaultFont.family
font.italic: Theme.defaultFont.italic
font.letterSpacing: Theme.defaultFont.letterSpacing
font.pointSize: Theme.defaultFont.pointSize
font.strikeout: Theme.defaultFont.strikeout
font.underline: Theme.defaultFont.underline
font.weight: Theme.defaultFont.weight
font.wordSpacing: Theme.defaultFont.wordSpacing
color: Theme.textColor
opacity: enabled? 1 : 0.6
Accessible.role: Accessible.StaticText
Accessible.name: text
}

129
qt-mobile/qml/mobilecomponents/ListItem.qml Normal file
View file

@ -0,0 +1,129 @@
/*
* Copyright 2010 Marco Martin <notmart@gmail.com>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Library General Public License as
* published by the Free Software Foundation; either version 2, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Library General Public License for more details
*
* You should have received a copy of the GNU Library General Public
* License along with this program; if not, write to the
* Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 2.010-1301, USA.
*/
import QtQuick 2.1
import org.kde.plasma.mobilecomponents 0.2
/**
* An item delegate for the primitive ListView component.
*
* It's intended to make all listviews look coherent.
*
* @inherit QtQuick.Item
*/
Item {
id: listItem
default property alias content: paddingItem.data
/**
* type:bool Holds if the item emits signals related to mouse interaction.
*
* The default value is false.
*/
property alias enabled: itemMouse.enabled
//item has been clicked or pressed+hold
/**
* This signal is emitted when there is a click.
*
* This is disabled by default, set enabled to true to use it.
* @see enabled
*/
signal clicked
/**
* The user pressed the item with the mouse and didn't release it for a
* certain amount of time.
*
* This is disabled by default, set enabled to true to use it.
* @see enabled
*/
signal pressAndHold
/**
* If true makes the list item look as checked or pressed. It has to be set
* from the code, it won't change by itself.
*/
//plasma extension
//always look pressed?
property bool checked: false
/**
* If true the item will be a delegate for a section, so will look like a
* "title" for the otems under it.
*/
//is this to be used as section delegate?
property bool sectionDelegate: false
/**
* True if the list item contains mouse
*/
property alias containsMouse: itemMouse.containsMouse
width: parent ? parent.width : childrenRect.width
height: paddingItem.childrenRect.height + Units.smallSpacing*2
property int implicitHeight: paddingItem.childrenRect.height + Units.smallSpacing*2
MouseArea {
id: itemMouse
property bool changeBackgroundOnPress: !listItem.checked && !listItem.sectionDelegate
anchors.fill: parent
enabled: false
hoverEnabled: true
onClicked: listItem.clicked()
onPressAndHold: listItem.pressAndHold()
Rectangle {
id : background
color: listItem.checked || (itemMouse.pressed && itemMouse.changeBackgroundOnPress) ? Theme.highlightColor : Theme.viewBackgroundColor
anchors.fill: parent
visible: listItem.ListView.view ? listItem.ListView.view.highlight === null : true
opacity: itemMouse.containsMouse && !itemMouse.pressed ? 0.5 : 1
Behavior on color {
ColorAnimation { duration: Units.longDuration }
}
Behavior on opacity { NumberAnimation { duration: Units.longDuration } }
}
Item {
id: paddingItem
anchors {
fill: parent
margins: Units.smallSpacing
}
}
}
Rectangle {
color: Theme.textColor
opacity: 0.2
anchors {
left: parent.left
right: parent.right
bottom: parent.bottom
}
height: 1
}
Accessible.role: Accessible.ListItem
}

276
qt-mobile/qml/mobilecomponents/ListItemWithActions.qml Normal file
View file

@ -0,0 +1,276 @@
/*
* Copyright 2010 Marco Martin <notmart@gmail.com>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Library General Public License as
* published by the Free Software Foundation; either version 2, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Library General Public License for more details
*
* You should have received a copy of the GNU Library General Public
* License along with this program; if not, write to the
* Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 2.010-1301, USA.
*/
import QtQuick 2.1
import QtQuick.Layouts 1.3
import QtQuick.Controls 1.0
import org.kde.plasma.mobilecomponents 0.2
import QtGraphicalEffects 1.0
/**
* An item delegate for the primitive ListView component.
*
* It's intended to make all listviews look coherent.
*
* @inherit QtQuick.Item
*/
Item {
id: listItem
default property alias content: paddingItem.data
/**
* type:bool Holds if the item emits signals related to mouse interaction.
*
* The default value is false.
*/
property alias enabled: itemMouse.enabled
//item has been clicked or pressed+hold
/**
* This signal is emitted when there is a click.
*
* This is disabled by default, set enabled to true to use it.
* @see enabled
*/
signal clicked
/**
* The user pressed the item with the mouse and didn't release it for a
* certain amount of time.
*
* This is disabled by default, set enabled to true to use it.
* @see enabled
*/
signal pressAndHold
/**
* If true makes the list item look as checked or pressed. It has to be set
* from the code, it won't change by itself.
*/
//plasma extension
//always look pressed?
property bool checked: false
/**
* If true the item will be a delegate for a section, so will look like a
* "title" for the otems under it.
*/
//is this to be used as section delegate?
property bool sectionDelegate: false
/**
* True if the list item contains mouse
*/
property alias containsMouse: itemMouse.containsMouse
/**
* Defines the actions for the page: at most 4 buttons will
* contain the actions at the bottom of the page, if the main
* item of the page is a Flickable or a ScrllArea, it will
* control the visibility of the actions.
*/
property alias actions: internalActions.data
Item {
id: internalActions
}
width: parent ? parent.width : childrenRect.width
height: paddingItem.childrenRect.height + Units.smallSpacing*2
property int implicitHeight: paddingItem.childrenRect.height + Units.smallSpacing*2
Rectangle {
id : background
color: Theme.backgroundColor
width: parent.width
height: parent.height
MouseArea {
anchors.fill: parent
onClicked: itemMouse.x = 0;
}
RowLayout {
anchors {
right: parent.right
verticalCenter: parent.verticalCenter
rightMargin: y
}
height: Math.min( parent.height/1.5, Units.iconSizes.medium)
property bool exclusive: false
property Item checkedButton
spacing: 0
Repeater {
model: {
if (listItem.actions.length == 0) {
return null;
} else {
return listItem.actions[0].text !== undefined &&
listItem.actions[0].trigger !== undefined ?
listItem.actions :
listItem.actions[0];
}
}
delegate: ToolButton {
Layout.fillHeight: true
Layout.minimumWidth: height
iconName: modelData.iconName
property bool flat: false
onClicked: {
if (modelData && modelData.trigger !== undefined) {
modelData.trigger();
// assume the model is a list of QAction or Action
} else if (toolbar.model.length > index) {
toolbar.model[index].trigger();
} else {
console.log("Don't know how to trigger the action")
}
itemMouse.x = 0;
}
}
}
}
}
InnerShadow {
anchors.fill: parent
radius: Units.smallSpacing*2
samples: 16
horizontalOffset: 0
verticalOffset: Units.smallSpacing/2
color: Qt.rgba(0, 0, 0, 0.3)
source: background
}
LinearGradient {
id: shadow
//TODO: depends from app layout
property bool inverse: true
width: Units.smallSpacing*2
anchors {
right: shadow.inverse ? undefined : itemMouse.left
left: shadow.inverse ? itemMouse.right : undefined
top: itemMouse.top
bottom: itemMouse.bottom
rightMargin: -1
}
start: Qt.point(0, 0)
end: Qt.point(Units.smallSpacing*2, 0)
gradient: Gradient {
GradientStop {
position: 0.0
color: shadow.inverse ? Qt.rgba(0, 0, 0, 0.3) : "transparent"
}
GradientStop {
position: shadow.inverse ? 0.3 : 0.7
color: Qt.rgba(0, 0, 0, 0.15)
}
GradientStop {
position: 1.0
color: shadow.inverse ? "transparent" : Qt.rgba(0, 0, 0, 0.3)
}
}
}
MouseArea {
id: itemMouse
property bool changeBackgroundOnPress: !listItem.checked && !listItem.sectionDelegate
width: parent.width
height: parent.height
enabled: false
hoverEnabled: true
onClicked: listItem.clicked()
onPressAndHold: listItem.pressAndHold()
Behavior on x {
NumberAnimation {
duration: Units.longDuration
easing.type: Easing.InOutQuad
}
}
Rectangle {
id : item
color: listItem.checked || (itemMouse.pressed && itemMouse.changeBackgroundOnPress) ? Theme.highlightColor : Theme.viewBackgroundColor
anchors.fill: parent
visible: listItem.ListView.view ? listItem.ListView.view.highlight === null : true
Behavior on color {
ColorAnimation { duration: Units.longDuration }
}
Item {
id: paddingItem
anchors {
fill: parent
margins: Units.smallSpacing
}
}
MouseArea {
width: Units.iconSizes.smallMedium
height: width
preventStealing: true
anchors {
right: parent.right
verticalCenter: parent.verticalCenter
rightMargin: y
}
drag {
target: itemMouse
axis: Drag.XAxis
maximumX: 0
}
onReleased: {
if (itemMouse.x > -itemMouse.width/2) {
itemMouse.x = 0;
} else {
itemMouse.x = -itemMouse.width + width*2
}
}
onClicked: {
if (itemMouse.x < -itemMouse.width/2) {
itemMouse.x = 0;
} else {
itemMouse.x = -itemMouse.width + width*2
}
}
Icon {
anchors.fill: parent
source: "application-menu"
}
}
}
}
Rectangle {
color: Theme.textColor
opacity: 0.2
anchors {
left: parent.left
right: parent.right
bottom: parent.bottom
}
height: 1
}
Accessible.role: Accessible.ListItem
}

317
qt-mobile/qml/mobilecomponents/OverlayDrawer.qml Normal file
View file

@ -0,0 +1,317 @@
/*
* Copyright 2012 Marco Martin <mart@kde.org>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Library General Public License as
* published by the Free Software Foundation; either version 2, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Library General Public License for more details
*
* You should have received a copy of the GNU Library General Public
* License along with this program; if not, write to the
* Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import QtQuick 2.1
import QtGraphicalEffects 1.0
import org.kde.plasma.mobilecomponents 0.2
import "private"
/**Documented API
Imports:
QtQuick 2.1
Description:
Overlay Drawers are used to expose additional UI elements needed for small secondary tasks for which the main UI elements are not needed. For example in Okular Active, an Overlay Drawer is used to display thumbnails of all pages within a document along with a search field. This is used for the distinct task of navigating to another page.
Properties:
bool opened:
If true the drawer is open showing the contents of the "drawer" component.
Item page:
It's the default property. it's the main content of the drawer page, the part that is always shown
Item contentItem:
It's the part that can be pulled in and out, will act as a sidebar.
**/
AbstractDrawer {
id: root
anchors.fill: parent
z: 9999
default property alias page: mainPage.data
property Item contentItem
property alias opened: browserFrame.open
property int edge: Qt.LeftEdge
property real position: 0
onContentItemChanged: contentItem.parent = drawerPage
onPositionChanged: {
if (!enabled) {
return;
}
if (root.edge == Qt.LeftEdge) {
browserFrame.x = -browserFrame.width + position * browserFrame.width;
} else {
browserFrame.x = root.width - (position * browserFrame.width);
}
}
function open () {
mouseEventListener.startBrowserFrameX = browserFrame.x;
browserFrame.state = "Dragging";
browserFrame.state = "Open";
}
function close () {
mouseEventListener.startBrowserFrameX = browserFrame.x;
browserFrame.state = "Dragging";
browserFrame.state = "Closed";
}
Item {
id: mainPage
anchors.fill: parent
onChildrenChanged: mainPage.children[0].anchors.fill = mainPage
}
Rectangle {
anchors.fill: parent
color: "black"
opacity: 0.6 * (root.edge == Qt.LeftEdge
? ((browserFrame.x + browserFrame.width) / browserFrame.width)
: (1 - browserFrame.x / root.width))
}
MouseArea {
anchors {
right: root.edge == Qt.LeftEdge ? undefined : parent.right
left: root.edge == Qt.LeftEdge ? parent.left : undefined
top: parent.top
bottom: parent.bottom
}
z: 99
width: Units.smallSpacing
onPressed: mouseEventListener.managePressed(mouse)
onPositionChanged: mouseEventListener.positionChanged(mouse)
onReleased: mouseEventListener.released(mouse)
}
MouseArea {
id: mouseEventListener
anchors.fill: parent
drag.filterChildren: true
property int startBrowserFrameX
property int startMouseX
property real oldMouseX
property bool startDragging: false
property string startState
enabled: browserFrame.state != "Closed"
onPressed: managePressed(mouse)
function managePressed(mouse) {
if (drawerPage.children.length == 0) {
mouse.accepted = false;
return;
}
mouse.accepted = true;
startBrowserFrameX = browserFrame.x;
oldMouseX = startMouseX = mouse.x;
startDragging = false;
startState = browserFrame.state;
browserFrame.state = "Dragging";
browserFrame.x = startBrowserFrameX;
}
onPositionChanged: {
if (drawerPage.children.length == 0) {
mouse.accepted = false;
return;
}
if (mouse.x < Units.gridUnit ||
Math.abs(mouse.x - startMouseX) > root.width / 5) {
startDragging = true;
}
if (startDragging) {
browserFrame.x = root.edge == Qt.LeftEdge
? Math.min(0, browserFrame.x + mouse.x - oldMouseX)
: Math.max(root.width - browserFrame.width, browserFrame.x + mouse.x - oldMouseX);
}
oldMouseX = mouse.x;
}
onReleased: {
if (drawerPage.children.length == 0) {
mouse.accepted = false;
return;
}
if (root.edge == Qt.LeftEdge) {
if (mouse.x < Units.gridUnit) {
browserFrame.state = "Closed";
} else if (browserFrame.x - startBrowserFrameX > browserFrame.width / 3) {
browserFrame.state = "Open";
} else if (startBrowserFrameX - browserFrame.x > browserFrame.width / 3) {
browserFrame.state = "Closed";
} else {
browserFrame.state = startState
}
} else {
if (mouse.x > width - Units.gridUnit) {
browserFrame.state = "Closed";
} else if (browserFrame.x - startBrowserFrameX > browserFrame.width / 3) {
browserFrame.state = "Closed";
} else if (startBrowserFrameX - browserFrame.x > browserFrame.width / 3) {
browserFrame.state = "Open";
} else {
browserFrame.state = startState;
}
}
}
onCanceled: {
if (oldMouseX > width - Units.gridUnit) {
browserFrame.state = "Closed";
} else if (Math.abs(browserFrame.x - startBrowserFrameX) > browserFrame.width / 3) {
browserFrame.state = startState == "Open" ? "Closed" : "Open";
} else {
browserFrame.state = "Open";
}
}
onClicked: {
if (Math.abs(startMouseX - mouse.x) > Units.gridUnit) {
return;
}
if ((root.edge == Qt.LeftEdge && mouse.x > browserFrame.width) ||
(root.edge != Qt.LeftEdge && mouse.x < browserFrame.x)) {
browserFrame.state = startState == "Open" ? "Closed" : "Open";
root.clicked();
}
}
Rectangle {
id: browserFrame
z: 100
color: Theme.viewBackgroundColor
anchors {
top: parent.top
bottom: parent.bottom
}
width: {
if (drawerPage.children.length > 0 && drawerPage.children[0].implicitWidth > 0) {
return Math.min( parent.width - Units.gridUnit, drawerPage.children[0].implicitWidth)
} else {
return parent.width - Units.gridUnit * 3
}
}
onXChanged: {
root.position = root.edge == Qt.LeftEdge ? 1 + browserFrame.x/browserFrame.width : (root.width - browserFrame.x)/browserFrame.width;
}
state: "Closed"
onStateChanged: open = (state != "Closed")
property bool open: false
onOpenChanged: {
if (drawerPage.children.length == 0) {
return;
}
if (open) {
browserFrame.state = "Open";
} else {
browserFrame.state = "Closed";
}
}
LinearGradient {
width: Units.gridUnit/2
anchors {
right: root.edge == Qt.LeftEdge ? undefined : parent.left
left: root.edge == Qt.LeftEdge ? parent.right : undefined
top: parent.top
bottom: parent.bottom
}
opacity: root.position == 0 ? 0 : 1
start: Qt.point(0, 0)
end: Qt.point(Units.gridUnit/2, 0)
gradient: Gradient {
GradientStop {
position: 0.0
color: root.edge == Qt.LeftEdge ? Qt.rgba(0, 0, 0, 0.3) : "transparent"
}
GradientStop {
position: root.edge == Qt.LeftEdge ? 0.3 : 0.7
color: Qt.rgba(0, 0, 0, 0.15)
}
GradientStop {
position: 1.0
color: root.edge == Qt.LeftEdge ? "transparent" : Qt.rgba(0, 0, 0, 0.3)
}
}
Behavior on opacity {
NumberAnimation {
duration: Units.longDuration
easing.type: Easing.InOutQuad
}
}
}
MouseArea {
id: drawerPage
anchors {
fill: parent
//leftMargin: Units.gridUnit
}
clip: true
onChildrenChanged: drawerPage.children[0].anchors.fill = drawerPage
}
states: [
State {
name: "Open"
PropertyChanges {
target: browserFrame
x: root.edge == Qt.LeftEdge ? 0 : root.width - browserFrame.width
}
},
State {
name: "Dragging"
//workaround for a quirkiness of the state machine
//if no x binding gets defined in this state x will be set to whatever last x it had last time it was in this state
PropertyChanges {
target: browserFrame
x: mouseEventListener.startBrowserFrameX
}
},
State {
name: "Closed"
PropertyChanges {
target: browserFrame
x: root.edge == Qt.LeftEdge ? -browserFrame.width : root.width
}
}
]
transitions: [
Transition {
//Exclude Dragging
to: "Open,Closed"
NumberAnimation {
id: transitionAnim
properties: "x"
duration: Units.longDuration
easing.type: Easing.InOutQuad
}
}
]
}
}
}

71
qt-mobile/qml/mobilecomponents/Page.qml Normal file
View file

@ -0,0 +1,71 @@
/*
* Copyright 2015 Marco Martin <mart@kde.org>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Library General Public License as
* published by the Free Software Foundation; either version 2, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Library General Public License for more details
*
* You should have received a copy of the GNU Library General Public
* License along with this program; if not, write to the
* Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import QtQuick 2.1
import QtQuick.Layouts 1.3
import org.kde.plasma.mobilecomponents 0.2
import "private"
Rectangle {
id: root
/**
* type:PageStack
* The page stack that this page is owned by.
*/
property Item pageStack
/**
* Defines the toolbar contents for the page. If the page stack is set up
* using a toolbar instance, it automatically shows the currently active
* page's toolbar contents in the toolbar.
*
* The default value is null resulting in the page's toolbar to be
* invisible when the page is active.
*/
property Item tools: null
/**
* Defines the contextual actions for the page:
* an easy way to assign actions in the right sliding panel
*/
property alias contextualActions: internalContextualActions.data
property Flickable flickable
Item {
id: internalContextualActions
}
Layout.fillWidth: true
color: "transparent"
Connections {
target: flickable
property real oldContentY: flickable.contentY
onContentYChanged: {
print(flickable.contentY+" "+actionButton.transform[0] )
if (flickable.atYBeginning || flickable.atYEnd) {
return;
}
actionButton.transform[0].y = Math.min(actionButton.height, Math.max(0, actionButton.transform[0].y + (flickable.contentY - oldContentY)));
oldContentY = flickable.contentY;
}
}
}

496
qt-mobile/qml/mobilecomponents/PageRow.qml Normal file
View file

@ -0,0 +1,496 @@
/****************************************************************************
**
** Copyright (C) 2012 Marco Martin <mart@kde.org>
**
** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
** All rights reserved.
** Contact: Nokia Corporation (qt-info@nokia.com)
**
** This file is part of the Qt Components project.
**
** $QT_BEGIN_LICENSE:BSD$
** You may use this file under the terms of the BSD license as follows:
**
** "Redistribution and use in source and binary forms, with or without
** modification, are permitted provided that the following conditions are
** met:
** * Redistributions of source code must retain the above copyright
** notice, this list of conditions and the following disclaimer.
** * Redistributions in binary form must reproduce the above copyright
** notice, this list of conditions and the following disclaimer in
** the documentation and/or other materials provided with the
** distribution.
** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
** the names of its contributors may be used to endorse or promote
** products derived from this software without specific prior written
** permission.
**
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
** $QT_END_LICENSE$
**
****************************************************************************/
import QtQuick 2.0
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.2
import org.kde.plasma.mobilecomponents 0.2
import "private/PageStack.js" as Engine
Item {
id: actualRoot
width: parent ? parent.width : 0
height: parent ? parent.height : 0
property int depth: Engine.getDepth()
property Item currentPage: null
property Item lastVisiblePage
property ToolBar toolBar
property variant initialPage
//A column is wide enough for 30 characters
property int columnWidth: Math.round(parent.width/(Units.gridUnit*30)) > 0 ? parent.width/Math.round(parent.width/(Units.gridUnit*30)) : width
property alias clip: scrollArea.clip
// Indicates whether there is an ongoing page transition.
property bool busy: internal.ongoingTransitionCount > 0
// Pushes a page on the stack.
// The page can be defined as a component, item or string.
// If an item is used then the page will get re-parented.
// If a string is used then it is interpreted as a url that is used to load a page component.
//
// The page can also be given as an array of pages. In this case all those pages will be pushed
// onto the stack. The items in the stack can be components, items or strings just like for single
// pages. Additionally an object can be used, which specifies a page and an optional properties
// property. This can be used to push multiple pages while still giving each of them properties.
// When an array is used the transition animation will only be to the last page.
//
// The properties argument is optional and allows defining a map of properties to set on the page.
// If the immediate argument is true then no transition animation is performed.
// Returns the page instance.
function push(page, properties, immediate)
{
var item = Engine.push(page, properties, false, immediate)
scrollToLevel(depth)
return item
}
// Pops a page off the stack.
// If page is specified then the stack is unwound to that page, to unwind to the first page specify
// page as null. If the immediate argument is true then no transition animation is performed.
// Returns the page instance that was popped off the stack.
function pop(page, immediate)
{
return Engine.pop(page, immediate);
}
// Replaces a page on the stack.
// See push() for details.
function replace(page, properties, immediate)
{
var item = Engine.push(page, properties, true, immediate);
scrollToLevel(depth)
return item
}
// Clears the page stack.
function clear()
{
return Engine.clear();
}
// Iterates through all pages (top to bottom) and invokes the specified function.
// If the specified function returns true the search stops and the find function
// returns the page that the iteration stopped at. If the search doesn't result
// in any page being found then null is returned.
function find(func)
{
return Engine.find(func);
}
// Scroll the view to have the page of the given level as first item
function scrollToLevel(level)
{
if (level < 0 || level > depth || root.width < width) {
return
}
var firstLevel = Math.max(0, level - mainFlickable.width/columnWidth + 1);
scrollAnimation.to = Math.max(0, Math.min(Math.max(0, columnWidth * (firstLevel - 1)), mainFlickable.contentWidth+1000))
scrollAnimation.running = true
}
SequentialAnimation {
id: scrollAnimation
property alias to: actualScrollAnimation.to
NumberAnimation {
id: actualScrollAnimation
target: mainFlickable
properties: "contentX"
duration: internal.transitionDuration
easing.type: Easing.InOutQuad
}
ScriptAction {
script: {
actualRoot.lastVisiblePage = root.children[Math.floor((mainFlickable.contentX + mainFlickable.width - 1)/columnWidth)].page
}
}
}
// Called when the page stack visibility changes.
onVisibleChanged: {
if (currentPage) {
if (visible)
currentPage.visible = currentPage.parent.visible = true;
}
}
onInitialPageChanged: {
if (!internal.completed) {
return
}
if (initialPage) {
if (depth == 0) {
push(initialPage, null, true)
} else if (depth == 1) {
replace(initialPage, null, true)
} else {
console.log("Cannot update PageStack.initialPage")
}
}
}
Component.onCompleted: {
internal.completed = true
if (initialPage && depth == 0)
push(initialPage, null, true)
}
QtObject {
id: internal
// The number of ongoing transitions.
property int ongoingTransitionCount: 0
//FIXME: there should be a way to access to theh without storing it in an ugly way
property bool completed: false
// Duration of transition animation (in ms)
property int transitionDuration: Units.longDuration
}
ScrollView {
id: scrollArea
anchors.fill: parent
Flickable {
id: mainFlickable
anchors.fill: parent
interactive: root.width > width
boundsBehavior: Flickable.StopAtBounds
contentWidth: root.width
contentHeight: height
Row {
id: root
spacing: -100
width: Math.max((depth-1+children[children.length-1].takenColumns) * columnWidth, childrenRect.width - 100)
height: parent.height
Behavior on width {
NumberAnimation {
duration: internal.transitionDuration
easing.type: Easing.InOutQuad
}
}
}
onMovementEnded: {
scrollToLevel(Math.round(contentX/columnWidth)+1)
}
onFlickEnded: {
movementEnded();
}
}
}
// Component for page containers.
Component {
id: containerComponent
Item {
id: container
implicitWidth: actualContainer.width + 100
width: implicitWidth
height: parent ? parent.height : 0
x: 0
// The actual parent of page: page will anchor to that
property Item pageParent: actualContainer
property int pageDepth: 0
Component.onCompleted: {
pageDepth = Engine.getDepth() + 1
container.z = -Engine.getDepth()
}
// The states correspond to the different possible positions of the container.
state: "Hidden"
// The page held by this container.
property Item page: null
// The owner of the page.
property Item owner: null
// The width of the longer stack dimension
property int stackWidth: Math.max(actualRoot.width, actualRoot.height)
// Flag that indicates the container should be cleaned up after the transition has ended.
property bool cleanupAfterTransition: false
// Flag that indicates if page transition animation is running
property bool transitionAnimationRunning: false
// State to be set after previous state change animation has finished
property string pendingState: "none"
//how many columns take the page?
property alias takenColumns: actualContainer.takenColumns
// Ensures that transition finish actions are executed
// in case the object is destroyed before reaching the
// end state of an ongoing transition
Component.onDestruction: {
if (transitionAnimationRunning)
transitionEnded();
}
Item {
id: actualContainer
anchors {
top: parent.top
bottom: parent.bottom
right: parent.right
rightMargin: 100
}
property int takenColumns: {
if (container.page && container.page.Layout && container.page.Layout.fillWidth) {
return Math.max(1, Math.round(actualRoot.width/columnWidth)-(container.x > 0 ? 1: 0));
} else {
return Math.max(1, Math.round(container.page ? container.page.implicitWidth/columnWidth : 1));
}
}
width: (container.pageDepth >= actualRoot.depth ? Math.min(actualRoot.width, takenColumns*columnWidth) : columnWidth)
}
Rectangle {
anchors {
top: parent.top
bottom: parent.bottom
right: actualContainer.right
}
width: 1
color: Theme.textColor
opacity: 0.3
visible: container.pageDepth < actualRoot.depth
}
// Sets pending state as current if state change is delayed
onTransitionAnimationRunningChanged: {
if (!transitionAnimationRunning && pendingState != "none") {
state = pendingState;
pendingState = "none";
}
}
// Handles state change depening on transition animation status
function setState(newState)
{
if (transitionAnimationRunning)
pendingState = newState;
else
state = newState;
}
// Performs a push enter transition.
function pushEnter(immediate, orientationChanges)
{
if (!immediate) {
setState("Right");
}
setState("");
page.visible = true;
}
// Performs a push exit transition.
function pushExit(replace, immediate, orientationChanges)
{
if (replace) {
setState(immediate ? "Hidden" : "Left");
}
if (replace) {
if (immediate)
cleanup();
else
cleanupAfterTransition = true;
}
}
// Performs a pop enter transition.
function popEnter(immediate, orientationChanges)
{
setState("");
page.visible = true;
}
// Performs a pop exit transition.
function popExit(immediate, orientationChanges)
{
setState(immediate ? "Hidden" : "Left");
if (immediate)
cleanup();
else
cleanupAfterTransition = true;
}
// Called when a transition has started.
function transitionStarted()
{
container.clip = true
transitionAnimationRunning = true;
internal.ongoingTransitionCount++;
}
// Called when a transition has ended.
function transitionEnded()
{
container.clip = false
if (state != "")
state = "Hidden";
internal.ongoingTransitionCount--;
transitionAnimationRunning = false;
if (cleanupAfterTransition) {
cleanup();
}
}
states: [
// Explicit properties for default state.
State {
name: ""
PropertyChanges { target: container; visible: true; opacity: 1 }
PropertyChanges { target: container; width: container.implicitWidth}
},
// Start state for pop entry, end state for push exit.
State {
name: "Left"
PropertyChanges { target: container; opacity: 0 }
PropertyChanges { target: container; width: 100}
},
// Start state for push entry, end state for pop exit.
State {
name: "Right"
PropertyChanges { target: container; opacity: 0 }
PropertyChanges { target: container; width: 100}
},
// Inactive state.
State {
name: "Hidden"
PropertyChanges { target: container; visible: false }
PropertyChanges { target: container; width: container.implicitWidth}
}
]
transitions: [
// Push exit transition
Transition {
from: ""; to: "Left"
SequentialAnimation {
ScriptAction { script: transitionStarted() }
ParallelAnimation {
PropertyAnimation { properties: "width"; easing.type: Easing.InQuad; duration: internal.transitionDuration }
PropertyAnimation { properties: "opacity"; easing.type: Easing.InQuad; duration: internal.transitionDuration }
}
ScriptAction { script: transitionEnded() }
}
},
// Pop entry transition
Transition {
from: "Left"; to: ""
SequentialAnimation {
ScriptAction { script: transitionStarted() }
ParallelAnimation {
PropertyAnimation { properties: "width"; easing.type: Easing.OutQuad; duration: internal.transitionDuration }
PropertyAnimation { properties: "opacity"; easing.type: Easing.InQuad; duration: internal.transitionDuration }
}
ScriptAction { script: transitionEnded() }
}
},
// Pop exit transition
Transition {
from: ""; to: "Right"
SequentialAnimation {
ScriptAction { script: transitionStarted() }
ParallelAnimation {
PropertyAnimation { properties: "width"; easing.type: Easing.InQuad; duration: internal.transitionDuration }
PropertyAnimation { properties: "opacity"; easing.type: Easing.InQuad; duration: internal.transitionDuration }
}
// Workaround for transition animation bug causing ghost view with page pop transition animation
// TODO: Root cause still unknown
PropertyAnimation {}
ScriptAction { script: transitionEnded() }
}
},
// Push entry transition
Transition {
from: "Right"; to: ""
SequentialAnimation {
ScriptAction { script: transitionStarted() }
ParallelAnimation {
PropertyAnimation { properties: "width"; easing.type: Easing.OutQuad; duration: internal.transitionDuration }
PropertyAnimation { properties: "opacity"; easing.type: Easing.InQuad; duration: internal.transitionDuration }
}
ScriptAction { script: transitionEnded() }
}
}
]
// Cleans up the container and then destroys it.
function cleanup()
{
if (page != null) {
if (owner != container) {
// container is not the owner of the page - re-parent back to original owner
page.visible = false;
page.anchors.fill = undefined
page.parent = owner;
}
}
container.parent = null;
container.visible = false;
destroy();
}
}
}
}

234
qt-mobile/qml/mobilecomponents/SplitDrawer.qml Normal file
View file

@ -0,0 +1,234 @@
/*
* Copyright 2012 Marco Martin <mart@kde.org>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Library General Public License as
* published by the Free Software Foundation; either version 2, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Library General Public License for more details
*
* You should have received a copy of the GNU Library General Public
* License along with this program; if not, write to the
* Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import QtQuick 2.1
import QtGraphicalEffects 1.0
import org.kde.plasma.mobilecomponents 0.2
import "private"
/**Documented API
Inherits:
Item
Imports:
QtQuick 2.1
Description:
Split Drawers are used to expose additional UI elements which are optional and can be used in conjunction with the main UI elements. For example the Resource Browser uses a Split Drawer to select different kinds of filters for the main view.
Properties:
bool open:
If true the drawer is open showing the contents of the "drawer" component.
Item page:
It's the default property. it's the main content of the drawer page, the part that is always shown
Item drawer:
It's the part that can be pulled in and out, will act as a sidebar.
int visibleDrawerWidth: the width of the visible portion of the drawer: it updates while dragging or animating
**/
AbstractDrawer {
id: root
anchors {
fill: parent
}
visible: true
default property alias page: mainPage.data
property Item contentItem
property alias opened: sidebar.open
property int visibleDrawerWidth: browserFrame.x
Component.onCompleted: {
mainPage.width = browserFrame.width
}
onContentItemChanged: contentItem.parent = drawerPage
MouseArea {
id: mouseEventListener
z: 200
drag.filterChildren: true
//drag.target: browserFrame
property int startMouseX
property int oldMouseX
property int startBrowserFrameX
property bool toggle: false
property string startState
anchors.fill: parent
onPressed: {
if (drawerPage.children.length == 0 || (browserFrame.state == "Closed" && mouse.x > Units.gridUnit) ||
mouse.x < browserFrame.x) {
mouse.accepted = false;
return;
}
toggle = true;
startBrowserFrameX = browserFrame.x;
oldMouseX = startMouseX = mouse.x;
startState = browserFrame.state;
browserFrame.state = "Dragging";
browserFrame.x = startBrowserFrameX;
}
onPositionChanged: {
browserFrame.x = Math.max(0, browserFrame.x + mouse.x - oldMouseX);
oldMouseX = mouse.x;
if (Math.abs(mouse.x - startMouseX) > Units.gridUnit * 2) {
toggle = false;
}
}
onReleased: {
if (toggle) {
browserFrame.state = startState == "Open" ? "Closed" : "Open"
} else if (browserFrame.x < sidebar.width / 2) {
browserFrame.state = "Closed";
} else {
browserFrame.state = "Open";
}
}
onClicked: root.clicked()
}
Rectangle {
id: browserFrame
z: 100
color: Theme.backgroundColor
state: "Closed"
onStateChanged: sidebar.open = (state != "Closed")
anchors {
top: parent.top
bottom: parent.bottom
}
width: root.width;
Item {
id: mainPage
onChildrenChanged: mainPage.children[0].anchors.fill = mainPage
anchors.fill: parent
}
Rectangle {
anchors.fill: parent
color: "black"
opacity: Math.min(0.4, 0.4 * (browserFrame.x / sidebar.width))
}
LinearGradient {
width: Units.gridUnit/2
anchors {
right: parent.left
top: parent.top
bottom: parent.bottom
rightMargin: -1
}
start: Qt.point(0, 0)
end: Qt.point(Units.gridUnit/2, 0)
gradient: Gradient {
GradientStop {
position: 0.0
color: "transparent"
}
GradientStop {
position: 0.7
color: Qt.rgba(0, 0, 0, 0.15)
}
GradientStop {
position: 1.0
color: Qt.rgba(0, 0, 0, 0.3)
}
}
}
states: [
State {
name: "Open"
PropertyChanges {
target: browserFrame
x: sidebar.width
}
},
State {
name: "Dragging"
PropertyChanges {
target: browserFrame
x: mouseEventListener.startBrowserFrameX
}
},
State {
name: "Closed"
PropertyChanges {
target: browserFrame
x: 0
}
}
]
transitions: [
Transition {
//Exclude Dragging
to: "Open,Closed,Hidden"
NumberAnimation {
properties: "x"
duration: Units.longDuration
easing.type: Easing.InOutQuad
}
}
]
}
Item {
id: sidebar
property bool open: false
onOpenChanged: {
if (drawerPage.children.length == 0) {
return;
}
if (open) {
browserFrame.state = "Open";
} else {
browserFrame.state = "Closed";
}
}
width: Math.min(parent.width/4*3, Math.max(root.contentItem ? root.contentItem.implicitWidth : 0, parent.width/4))
anchors {
left: parent.left
top: parent.top
bottom: parent.bottom
}
Item {
id: drawerPage
anchors.fill: parent
clip: false
onChildrenChanged: drawerPage.children[0].anchors.fill = drawerPage
}
}
}

62
qt-mobile/qml/mobilecomponents/Theme.qml Normal file
View file

@ -0,0 +1,62 @@
/*
* Copyright 2015 Marco Martin <mart@kde.org>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Library General Public License as
* published by the Free Software Foundation; either version 2, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Library General Public License for more details
*
* You should have received a copy of the GNU Library General Public
* License along with this program; if not, write to the
* Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import QtQuick 2.4
pragma Singleton
/*!
\qmltype Theme
\inqmlmodule Material 0.1
\brief Provides access to standard colors that follow the Material Design specification.
See \l {http://www.google.com/design/spec/style/color.html#color-ui-color-application} for
details about choosing a color scheme for your application.
*/
QtObject {
id: theme
property color textColor: Qt.rgba(0,0,0, 0.54)
property color highlightColor: "#2196F3"
property color backgroundColor: "#f3f3f3"
property color linkColor: "#2196F3"
property color visitedLinkColor: "#2196F3"
property color buttonTextColor: Qt.rgba(0,0,0, 0.54)
property color buttonBackgroundColor: "#f3f3f3"
property color buttonHoverColor: "#2196F3"
property color buttonFocusColor: "#2196F3"
property color viewTextColor: Qt.rgba(0,0,0, 0.54)
property color viewBackgroundColor: "#f3f3f3"
property color viewHoverColor: "#2196F3"
property color viewFocusColor: "#2196F3"
property color complementaryTextColor: "#f3f3f3"
property color complementaryBackgroundColor: Qt.rgba(0,0,0, 0.54)
property color complementaryHoverColor: "#2196F3"
property color complementaryFocusColor: "#2196F3"
property font defaultFont: fontMetrics.font
property variant fontMetrics: TextMetrics {}
}

101
qt-mobile/qml/mobilecomponents/Units.qml Normal file
View file

@ -0,0 +1,101 @@
/*
* Copyright 2015 Marco Martin <mart@kde.org>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Library General Public License as
* published by the Free Software Foundation; either version 2, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Library General Public License for more details
*
* You should have received a copy of the GNU Library General Public
* License along with this program; if not, write to the
* Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import QtQuick 2.4
import QtQuick.Window 2.2
pragma Singleton
QtObject {
id: units
/**
* The fundamental unit of space that should be used for sizes, expressed in pixels.
* Given the screen has an accurate DPI settings, it corresponds to a width of
* the capital letter M
*/
property int gridUnit: fontMetrics.height
/**
* units.iconSizes provides access to platform-dependent icon sizing
*
* The icon sizes provided are normalized for different DPI, so icons
* will scale depending on the DPI.
*
* Icon sizes from KIconLoader, adjusted to devicePixelRatio:
* * small
* * smallMedium
* * medium
* * large
* * huge
* * enormous
*
* Not devicePixelRation-adjusted::
* * desktop
*/
property QtObject iconSizes: QtObject {
property int small: 16 * devicePixelRatio
property int smallMedium: 22 * devicePixelRatio
property int medium: 32 * devicePixelRatio
property int large: 48 * devicePixelRatio
property int huge: 64 * devicePixelRatio
property int enormous: 128 * devicePixelRatio
}
/**
* units.smallSpacing is the amount of spacing that should be used around smaller UI elements,
* for example as spacing in Columns. Internally, this size depends on the size of
* the default font as rendered on the screen, so it takes user-configured font size and DPI
* into account.
*/
property int smallSpacing: gridUnit/4
/**
* units.largeSpacing is the amount of spacing that should be used inside bigger UI elements,
* for example between an icon and the corresponding text. Internally, this size depends on
* the size of the default font as rendered on the screen, so it takes user-configured font
* size and DPI into account.
*/
property int largeSpacing: gridUnit
/**
* The ratio between physical and device-independent pixels. This value does not depend on the \
* size of the configured font. If you want to take font sizes into account when scaling elements,
* use theme.mSize(theme.defaultFont), units.smallSpacing and units.largeSpacing.
* The devicePixelRatio follows the definition of "device independent pixel" by Microsoft.
*/
property real devicePixelRatio: Screen.devicePixelRatio
/**
* units.longDuration should be used for longer, screen-covering animations, for opening and
* closing of dialogs and other "not too small" animations
*/
property int longDuration: 250
/**
* units.shortDuration should be used for short animations, such as accentuating a UI event,
* hover events, etc..
*/
property int shortDuration: 150
property variant fontMetrics: TextMetrics {
text: "M"
}
}

144
qt-mobile/qml/mobilecomponents/icons/go-next.svg Normal file
View file

@ -0,0 +1,144 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="24"
height="24"
id="svg3869"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="go-next.svg">
<defs
id="defs3871">
<linearGradient
id="linearGradient3257">
<stop
offset="0"
style="stop-color:#a50000;stop-opacity:1"
id="stop3259" />
<stop
offset="1"
style="stop-color:#e73800;stop-opacity:1"
id="stop3261" />
</linearGradient>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath4210">
<rect
y="1024.3622"
x="-7"
height="34"
width="34"
id="rect4212"
style="opacity:1;fill:#0000ff;fill-opacity:0.51376145;stroke:none;stroke-opacity:1" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath4160">
<rect
style="opacity:1;fill:#aade87;fill-opacity:0.47247709;stroke:none;stroke-opacity:1"
id="rect4162"
width="32"
height="32.000015"
x="-6"
y="1028.3619" />
</clipPath>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="22.627416"
inkscape:cx="5.4926209"
inkscape:cy="10.264796"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="true"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1366"
inkscape:window-height="709"
inkscape:window-x="-4"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:showpageshadow="false"
inkscape:object-nodes="true"
inkscape:snap-bbox="true">
<inkscape:grid
type="xygrid"
id="grid4132" />
<sodipodi:guide
position="4,18"
orientation="18,0"
id="guide4138" />
<sodipodi:guide
position="5,3"
orientation="0,18"
id="guide4140" />
<sodipodi:guide
position="20,2.0000174"
orientation="-18,0"
id="guide4142" />
<sodipodi:guide
position="2,21"
orientation="0,-18"
id="guide4144" />
<sodipodi:guide
position="3,19.000017"
orientation="16,0"
id="guide4146" />
<sodipodi:guide
position="2,4"
orientation="0,16"
id="guide4148" />
<sodipodi:guide
position="21,20"
orientation="-16,0"
id="guide4150" />
<sodipodi:guide
position="2,20"
orientation="0,-16"
id="guide4152" />
</sodipodi:namedview>
<metadata
id="metadata3874">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Capa 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-326,-532.3622)">
<g
transform="translate(326,-497)"
id="layer1-9"
inkscape:label="Capa 1">
<path
id="rect4176"
transform="translate(-5e-7,1030.3622)"
d="M 7.7070312,3 7,3.7070312 l 6.125,6.125 L 14.292969,11 13.125,12.167969 7,18.292969 7.7070312,19 13.832031,12.875 15.707031,11 13.832031,9.125 7.7070312,3 Z"
style="fill:#4d4d4d;fill-opacity:1;stroke:none"
inkscape:connector-curvature="0" />
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.9 KiB

463
qt-mobile/qml/mobilecomponents/icons/go-previous.svg Normal file
View file

@ -0,0 +1,463 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="24"
height="24"
id="svg3869"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="go-previous.svg">
<defs
id="defs3871">
<linearGradient
id="linearGradient3257">
<stop
offset="0"
style="stop-color:#a50000;stop-opacity:1"
id="stop3259" />
<stop
offset="1"
style="stop-color:#e73800;stop-opacity:1"
id="stop3261" />
</linearGradient>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath4210">
<rect
y="1024.3622"
x="-7"
height="34"
width="34"
id="rect4212"
style="opacity:1;fill:#0000ff;fill-opacity:0.51376145;stroke:none;stroke-opacity:1" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath4160">
<rect
style="opacity:1;fill:#aade87;fill-opacity:0.47247709;stroke:none;stroke-opacity:1"
id="rect4162"
width="32"
height="32.000015"
x="-6"
y="1028.3619" />
</clipPath>
<clipPath
id="clipPath4160-4"
clipPathUnits="userSpaceOnUse">
<rect
y="1023.3622"
x="7"
height="1"
width="1"
id="rect4162-5"
style="opacity:1;fill:#f2f2f2;fill-opacity:1;stroke:none;stroke-opacity:1" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath16">
<path
d="m 0,706.465 1490.926,0 L 1490.926,0 0,0 0,706.465 Z"
id="path18" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath24">
<path
d="m 22.1953,686.117 1447.7347,0 0,-667.1902 -1447.7347,0 L 22.1953,686.117 Z"
id="path26" />
</clipPath>
<inkscape:perspective
id="perspective4146-36"
inkscape:persp3d-origin="12 : 8 : 1"
inkscape:vp_z="24 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_x="0 : 12 : 1"
sodipodi:type="inkscape:persp3d" />
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="24 : 12 : 1"
inkscape:persp3d-origin="12 : 8 : 1"
id="perspective4146-3-7" />
<inkscape:perspective
id="perspective4146-0"
inkscape:persp3d-origin="12 : 8 : 1"
inkscape:vp_z="24 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_x="0 : 12 : 1"
sodipodi:type="inkscape:persp3d" />
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="24 : 12 : 1"
inkscape:persp3d-origin="12 : 8 : 1"
id="perspective4146-3-8" />
<inkscape:perspective
id="perspective4146-3"
inkscape:persp3d-origin="12 : 8 : 1"
inkscape:vp_z="24 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_x="0 : 12 : 1"
sodipodi:type="inkscape:persp3d" />
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="24 : 12 : 1"
inkscape:persp3d-origin="12 : 8 : 1"
id="perspective4146" />
<inkscape:perspective
id="perspective4146-36-7"
inkscape:persp3d-origin="12 : 8 : 1"
inkscape:vp_z="24 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_x="0 : 12 : 1"
sodipodi:type="inkscape:persp3d" />
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="24 : 12 : 1"
inkscape:persp3d-origin="12 : 8 : 1"
id="perspective4146-3-7-6" />
<inkscape:perspective
id="perspective4146-0-6"
inkscape:persp3d-origin="12 : 8 : 1"
inkscape:vp_z="24 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_x="0 : 12 : 1"
sodipodi:type="inkscape:persp3d" />
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="24 : 12 : 1"
inkscape:persp3d-origin="12 : 8 : 1"
id="perspective4146-3-8-7" />
<inkscape:perspective
id="perspective4146-3-9"
inkscape:persp3d-origin="12 : 8 : 1"
inkscape:vp_z="24 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_x="0 : 12 : 1"
sodipodi:type="inkscape:persp3d" />
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="24 : 12 : 1"
inkscape:persp3d-origin="12 : 8 : 1"
id="perspective4146-2" />
<inkscape:perspective
id="perspective4146-36-4"
inkscape:persp3d-origin="12 : 8 : 1"
inkscape:vp_z="24 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_x="0 : 12 : 1"
sodipodi:type="inkscape:persp3d" />
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="24 : 12 : 1"
inkscape:persp3d-origin="12 : 8 : 1"
id="perspective4146-3-7-7" />
<inkscape:perspective
id="perspective4146-0-0"
inkscape:persp3d-origin="12 : 8 : 1"
inkscape:vp_z="24 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_x="0 : 12 : 1"
sodipodi:type="inkscape:persp3d" />
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="24 : 12 : 1"
inkscape:persp3d-origin="12 : 8 : 1"
id="perspective4146-3-8-6" />
<inkscape:perspective
id="perspective4146-3-81"
inkscape:persp3d-origin="12 : 8 : 1"
inkscape:vp_z="24 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_x="0 : 12 : 1"
sodipodi:type="inkscape:persp3d" />
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="24 : 12 : 1"
inkscape:persp3d-origin="12 : 8 : 1"
id="perspective4146-6" />
<inkscape:perspective
id="perspective4146-36-7-2"
inkscape:persp3d-origin="12 : 8 : 1"
inkscape:vp_z="24 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_x="0 : 12 : 1"
sodipodi:type="inkscape:persp3d" />
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="24 : 12 : 1"
inkscape:persp3d-origin="12 : 8 : 1"
id="perspective4146-3-7-6-3" />
<inkscape:perspective
id="perspective4146-0-6-4"
inkscape:persp3d-origin="12 : 8 : 1"
inkscape:vp_z="24 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_x="0 : 12 : 1"
sodipodi:type="inkscape:persp3d" />
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="24 : 12 : 1"
inkscape:persp3d-origin="12 : 8 : 1"
id="perspective4146-3-8-7-6" />
<inkscape:perspective
id="perspective4146-3-9-0"
inkscape:persp3d-origin="12 : 8 : 1"
inkscape:vp_z="24 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_x="0 : 12 : 1"
sodipodi:type="inkscape:persp3d" />
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="24 : 12 : 1"
inkscape:persp3d-origin="12 : 8 : 1"
id="perspective4146-2-1" />
<inkscape:perspective
id="perspective4146-36-8"
inkscape:persp3d-origin="12 : 8 : 1"
inkscape:vp_z="24 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_x="0 : 12 : 1"
sodipodi:type="inkscape:persp3d" />
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="24 : 12 : 1"
inkscape:persp3d-origin="12 : 8 : 1"
id="perspective4146-3-7-0" />
<inkscape:perspective
id="perspective4146-0-3"
inkscape:persp3d-origin="12 : 8 : 1"
inkscape:vp_z="24 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_x="0 : 12 : 1"
sodipodi:type="inkscape:persp3d" />
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="24 : 12 : 1"
inkscape:persp3d-origin="12 : 8 : 1"
id="perspective4146-3-8-78" />
<inkscape:perspective
id="perspective4146-3-1"
inkscape:persp3d-origin="12 : 8 : 1"
inkscape:vp_z="24 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_x="0 : 12 : 1"
sodipodi:type="inkscape:persp3d" />
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="24 : 12 : 1"
inkscape:persp3d-origin="12 : 8 : 1"
id="perspective4146-05" />
<inkscape:perspective
id="perspective4146-36-3"
inkscape:persp3d-origin="12 : 8 : 1"
inkscape:vp_z="24 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_x="0 : 12 : 1"
sodipodi:type="inkscape:persp3d" />
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="24 : 12 : 1"
inkscape:persp3d-origin="12 : 8 : 1"
id="perspective4146-3-7-8" />
<inkscape:perspective
id="perspective4146-0-9"
inkscape:persp3d-origin="12 : 8 : 1"
inkscape:vp_z="24 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_x="0 : 12 : 1"
sodipodi:type="inkscape:persp3d" />
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="24 : 12 : 1"
inkscape:persp3d-origin="12 : 8 : 1"
id="perspective4146-3-8-3" />
<inkscape:perspective
id="perspective4146-3-4"
inkscape:persp3d-origin="12 : 8 : 1"
inkscape:vp_z="24 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_x="0 : 12 : 1"
sodipodi:type="inkscape:persp3d" />
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="24 : 12 : 1"
inkscape:persp3d-origin="12 : 8 : 1"
id="perspective4146-9" />
<inkscape:perspective
id="perspective4146-36-7-6"
inkscape:persp3d-origin="12 : 8 : 1"
inkscape:vp_z="24 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_x="0 : 12 : 1"
sodipodi:type="inkscape:persp3d" />
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="24 : 12 : 1"
inkscape:persp3d-origin="12 : 8 : 1"
id="perspective4146-3-7-6-0" />
<inkscape:perspective
id="perspective4146-0-6-7"
inkscape:persp3d-origin="12 : 8 : 1"
inkscape:vp_z="24 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_x="0 : 12 : 1"
sodipodi:type="inkscape:persp3d" />
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="24 : 12 : 1"
inkscape:persp3d-origin="12 : 8 : 1"
id="perspective4146-3-8-7-7" />
<inkscape:perspective
id="perspective4146-3-9-7"
inkscape:persp3d-origin="12 : 8 : 1"
inkscape:vp_z="24 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_x="0 : 12 : 1"
sodipodi:type="inkscape:persp3d" />
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 12 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="24 : 12 : 1"
inkscape:persp3d-origin="12 : 8 : 1"
id="perspective4146-2-13" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="22.627416"
inkscape:cx="5.4926209"
inkscape:cy="10.264796"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="true"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1366"
inkscape:window-height="709"
inkscape:window-x="-4"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:showpageshadow="false"
inkscape:object-nodes="true"
inkscape:snap-bbox="true">
<inkscape:grid
type="xygrid"
id="grid4132" />
<sodipodi:guide
position="4,18"
orientation="18,0"
id="guide4138" />
<sodipodi:guide
position="5,3"
orientation="0,18"
id="guide4140" />
<sodipodi:guide
position="20,2.0000174"
orientation="-18,0"
id="guide4142" />
<sodipodi:guide
position="2,21"
orientation="0,-18"
id="guide4144" />
<sodipodi:guide
position="3,19.000017"
orientation="16,0"
id="guide4146" />
<sodipodi:guide
position="2,4"
orientation="0,16"
id="guide4148" />
<sodipodi:guide
position="21,20"
orientation="-16,0"
id="guide4150" />
<sodipodi:guide
position="2,20"
orientation="0,-16"
id="guide4152" />
</sodipodi:namedview>
<metadata
id="metadata3874">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Capa 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-326,-532.3622)">
<g
transform="translate(326.70703,-497)"
id="layer1-2"
inkscape:label="Capa 1">
<path
id="rect4176"
transform="translate(-5e-7,1030.3622)"
d="m 14.292969,3 -6.1250002,6.125 -1.875,1.875 1.875,1.875 L 14.292969,19 15,18.292969 8.875,12.167969 7.7070312,11 8.875,9.8320312 15,3.7070312 14.292969,3 Z"
style="fill:#4d4d4d;fill-opacity:1;stroke:none"
inkscape:connector-curvature="0" />
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

47
qt-mobile/qml/mobilecomponents/private/AbstractDrawer.qml Normal file
View file

@ -0,0 +1,47 @@
/*
* Copyright 2015 Marco Martin <mart@kde.org>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Library General Public License as
* published by the Free Software Foundation; either version 2, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Library General Public License for more details
*
* You should have received a copy of the GNU Library General Public
* License along with this program; if not, write to the
* Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import QtQuick 2.1
import QtGraphicalEffects 1.0
import org.kde.plasma.mobilecomponents 0.2
//TODO: This will become a QQC2 Drawer
//providing just a dummy api for now
Item {
id: root
anchors.fill: parent
z: 9999
default property alias page: mainPage.data
property Item contentItem
property bool opened
property int edge: Qt.LeftEdge
property real position: 0
function open () { }
function close () { }
signal clicked
Item {
id: mainPage
anchors.fill: parent
onChildrenChanged: mainPage.children[0].anchors.fill = mainPage
}
}

142
qt-mobile/qml/mobilecomponents/private/ActionButton.qml Normal file
View file

@ -0,0 +1,142 @@
/*
* Copyright 2015 Marco Martin <mart@kde.org>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Library General Public License as
* published by the Free Software Foundation; either version 2, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Library General Public License for more details
*
* You should have received a copy of the GNU Library General Public
* License along with this program; if not, write to the
* Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import QtQuick 2.1
import QtQuick.Layouts 1.2
import QtGraphicalEffects 1.0
import org.kde.plasma.mobilecomponents 0.2
MouseArea {
id: button
property alias iconSource: icon.source
Layout.minimumWidth: Units.iconSizes.large
Layout.maximumWidth: Layout.minimumWidth
implicitWidth: Units.iconSizes.large
implicitHeight: width
drag {
target: button
axis: Drag.XAxis
minimumX: contextDrawer ? 0 : parent.width/2 - width/2
maximumX: globalDrawer ? parent.width : parent.width/2 - width/2
}
transform: Translate {}
onReleased: {
if (globalDrawer && x > Math.min(parent.width/4*3, parent.width/2 + globalDrawer.contentItem.width/2)) {
globalDrawer.open();
contextDrawer.close();
} else if (contextDrawer && x < Math.max(parent.width/4, parent.width/2 - contextDrawer.contentItem.width/2)) {
if (contextDrawer) {
contextDrawer.open();
}
if (globalDrawer) {
globalDrawer.close();
}
} else {
if (globalDrawer) {
globalDrawer.close();
}
if (contextDrawer) {
contextDrawer.close();
}
}
}
Connections {
target: globalDrawer
onPositionChanged: {
if (!button.pressed) {
button.x = globalDrawer.contentItem.width * globalDrawer.position + button.parent.width/2 - button.width/2;
}
}
}
Connections {
target: contextDrawer
onPositionChanged: {
if (!button.pressed) {
button.x = button.parent.width/2 - button.width/2 - contextDrawer.contentItem.width * contextDrawer.position;
}
}
}
onXChanged: {
if (button.pressed) {
globalDrawer.position = Math.min(1, Math.max(0, (x - button.parent.width/2 + button.width/2)/globalDrawer.contentItem.width));
contextDrawer.position = Math.min(1, Math.max(0, (button.parent.width/2 - button.width/2 - x)/contextDrawer.contentItem.width));
}
}
Item {
id: background
anchors {
fill: parent
leftMargin: -Units.gridUnit
rightMargin: -Units.gridUnit
}
Rectangle {
radius: width/2
anchors.centerIn: parent
height: parent.height - Units.smallSpacing*2
width: height
color: button.pressed ? Theme.highlightColor : Theme.backgroundColor
Icon {
id: icon
anchors {
fill: parent
margins: Units.smallSpacing
}
}
ActionButtonArrow {
anchors {
right: parent.left
rightMargin: Units.smallSpacing
}
visible: contextDrawer && contextDrawer.enabled
inverted: true
}
ActionButtonArrow {
anchors {
left: parent.right
leftMargin: Units.smallSpacing
}
visible: globalDrawer && globalDrawer.enabled
}
Behavior on color {
ColorAnimation {
duration: Units.longDuration
easing.type: Easing.InOutQuad
}
}
Behavior on x {
NumberAnimation {
duration: Units.longDuration
easing.type: Easing.InOutQuad
}
}
}
}
DropShadow {
anchors.fill: background
horizontalOffset: 0
verticalOffset: Units.smallSpacing/2
radius: Units.gridUnit / 2.4
samples: 16
color: button.pressed ? "transparent" : Qt.rgba(0, 0, 0, 0.5)
source: background
}
}

56
qt-mobile/qml/mobilecomponents/private/ActionButtonArrow.qml Normal file
View file

@ -0,0 +1,56 @@
/*
* Copyright 2015 Marco Martin <mart@kde.org>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Library General Public License as
* published by the Free Software Foundation; either version 2, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Library General Public License for more details
*
* You should have received a copy of the GNU Library General Public
* License along with this program; if not, write to the
* Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import QtQuick 2.1
import QtQuick.Layouts 1.2
import QtGraphicalEffects 1.0
import org.kde.plasma.mobilecomponents 0.2
Canvas {
id: canvas
width: Units.gridUnit
height: width
property bool inverted
property color color: parent.color
anchors.verticalCenter: parent.verticalCenter
onColorChanged: requestPaint()
onPaint: {
var ctx = canvas.getContext("2d");
ctx.fillStyle = canvas.color;
ctx.beginPath();
if (inverted) {
ctx.moveTo(canvas.width, 0);
ctx.bezierCurveTo(canvas.width-canvas.width/8, 0,
canvas.width-canvas.width/8, canvas.height,
canvas.width, canvas.height);
ctx.lineTo(0, canvas.height/2);
} else {
ctx.moveTo(0, 0);
ctx.bezierCurveTo(canvas.width/8, 0,
canvas.width/8, canvas.height,
0, canvas.height);
ctx.lineTo(canvas.width, canvas.height/2);
//ctx.lineTo(0, canvas.height);
}
ctx.fill();
}
}

243
qt-mobile/qml/mobilecomponents/private/PageStack.js Normal file
View file

@ -0,0 +1,243 @@
/****************************************************************************
**
** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
** All rights reserved.
** Contact: Nokia Corporation (qt-info@nokia.com)
**
** This file is part of the Qt Components project.
**
** $QT_BEGIN_LICENSE:BSD$
** You may use this file under the terms of the BSD license as follows:
**
** "Redistribution and use in source and binary forms, with or without
** modification, are permitted provided that the following conditions are
** met:
** * Redistributions of source code must retain the above copyright
** notice, this list of conditions and the following disclaimer.
** * Redistributions in binary form must reproduce the above copyright
** notice, this list of conditions and the following disclaimer in
** the documentation and/or other materials provided with the
** distribution.
** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
** the names of its contributors may be used to endorse or promote
** products derived from this software without specific prior written
** permission.
**
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
** $QT_END_LICENSE$
**
****************************************************************************/
// Page stack. Items are page containers.
var pageStack = [];
// Page component cache map. Key is page url, value is page component.
var componentCache = {};
// Returns the page stack depth.
function getDepth() {
return pageStack.length;
}
// Pushes a page on the stack.
function push(page, properties, replace, immediate) {
// page order sanity check
if ((!replace && page == currentPage)
|| (replace && pageStack.length > 1
&& page == pageStack[pageStack.length - 2].page)) {
throw new Error("Cannot navigate so that the resulting page stack has two consecutive entries of the same page instance.");
}
// figure out if more than one page is being pushed
var pages;
if (page instanceof Array) {
pages = page;
page = pages.pop();
if (page.createObject === undefined && page.parent === undefined && typeof page != "string") {
properties = properties || page.properties;
page = page.page;
}
}
// get the current container
var oldContainer;
if (pageStack.length) {
oldContainer = pageStack[pageStack.length - 1];
}
// pop the old container off the stack if this is a replace
if (oldContainer && replace) {
pageStack.pop();
}
// push any extra defined pages onto the stack
if (pages) {
var i;
for (i = 0; i < pages.length; i++) {
var tPage = pages[i];
var tProps;
if (tPage.createObject === undefined && tPage.parent === undefined && typeof tPage != "string") {
tProps = tPage.properties;
tPage = tPage.page;
}
pageStack.push(initPage(tPage, tProps));
}
}
// initialize the page
var container = initPage(page, properties);
// push the page container onto the stack
pageStack.push(container);
depth = pageStack.length;
currentPage = container.page;
// perform page transition
//FIXME: this should be in for PageStack, out for PageRow?
//immediate = immediate || !oldContainer;
var orientationChange = false;
if (oldContainer) {
orientationChange = orientationChanges(oldContainer.page, container.page);
oldContainer.pushExit(replace, immediate, orientationChange);
}
// sync tool bar
var tools = container.page.tools || null;
if (toolBar) {
toolBar.setTools(tools, immediate ? "set" : replace ? "replace" : "push");
}
container.pushEnter(immediate, orientationChange);
return container.page;
}
// Initializes a page and its container.
function initPage(page, properties) {
var container = containerComponent.createObject(root);
var pageComp;
if (page.createObject) {
// page defined as component
pageComp = page;
} else if (typeof page == "string") {
// page defined as string (a url)
pageComp = componentCache[page];
if (!pageComp) {
pageComp = componentCache[page] = Qt.createComponent(page);
}
}
if (pageComp) {
if (pageComp.status == Component.Error) {
throw new Error("Error while loading page: " + pageComp.errorString());
} else {
// instantiate page from component
page = pageComp.createObject(container.pageParent, properties || {});
}
} else {
// copy properties to the page
for (var prop in properties) {
if (properties.hasOwnProperty(prop)) {
page[prop] = properties[prop];
}
}
}
container.page = page;
if (page.parent == null || page.parent == container.pageParent) {
container.owner = container;
} else {
container.owner = page.parent;
}
// the page has to be reparented if
if (page.parent != container.pageParent) {
page.parent = container.pageParent;
}
if (page.pageStack !== undefined) {
page.pageStack = root;
}
page.anchors.fill = container.pageParent
return container;
}
// Pops a page off the stack.
function pop(page, immediate) {
// make sure there are enough pages in the stack to pop
if (pageStack.length > 1) {
//unwind to itself means no pop
if (page !== undefined && page == pageStack[pageStack.length - 1].page) {
return
}
// pop the current container off the stack and get the next container
var oldContainer = pageStack.pop();
var container = pageStack[pageStack.length - 1];
if (page !== undefined) {
// an unwind target has been specified - pop until we find it
while (page != container.page && pageStack.length > 1) {
pageStack.pop();
container.popExit(immediate, false);
container = pageStack[pageStack.length - 1];
}
}
depth = pageStack.length;
currentPage = container.page;
// perform page transition
var orientationChange = orientationChanges(oldContainer.page, container.page);
oldContainer.popExit(immediate, orientationChange);
container.popEnter(immediate, orientationChange);
// sync tool bar
var tools = container.page.tools || null;
if (toolBar) {
toolBar.setTools(tools, immediate ? "set" : "pop");
}
return oldContainer.page;
} else {
return null;
}
}
// Checks if the orientation changes between oldPage and newPage
function orientationChanges(oldPage, newPage) {
return newPage.orientationLock != 0 //PlasmaComponents.PageOrientation.Automatic
&& newPage.orientationLock != 3//PlasmaComponents.PageOrientation.LockPrevious
&& newPage.orientationLock != oldPage.orientationLock
}
// Clears the page stack.
function clear() {
var container;
while (container = pageStack.pop()) {
container.cleanup();
}
depth = 0;
currentPage = null;
}
// Iterates through all pages in the stack (top to bottom) to find a page.
function find(func) {
for (var i = pageStack.length - 1; i >= 0; i--) {
var page = pageStack[i].page;
if (func(page)) {
return page;
}
}
return null;
}

3
qt-mobile/qml/mobilecomponents/private/qmldir Normal file
View file

@ -0,0 +1,3 @@
module org.kde.plasma.mobilecomponents.private
#plugin mobilecomponentsprivateplugin

19
qt-mobile/qml/mobilecomponents/qmldir Normal file
View file

@ -0,0 +1,19 @@
module org.kde.plasma.mobilecomponents
#plugin mobilecomponentsplugin
singleton Units 0.2 Units.qml
singleton Theme 0.2 Theme.qml
IconGrid 0.2 IconGrid.qml
OverlayDrawer 0.2 OverlayDrawer.qml
SplitDrawer 0.2 SplitDrawer.qml
ActionGroup 0.2 ActionGroup.qml
ApplicationWindow 0.2 ApplicationWindow.qml
ContextDrawer 0.2 ContextDrawer.qml
GlobalDrawer 0.2 GlobalDrawer.qml
Page 0.2 Page.qml
Icon 0.2 Icon.qml
Label 0.2 Label.qml
Heading 0.2 Heading.qml
ListItem 0.2 ListItem.qml
ListItemWithActions 0.2 ListItemWithActions.qml