diff options
Diffstat (limited to 'qt-mobile/qml')
35 files changed, 4047 insertions, 307 deletions
diff --git a/qt-mobile/qml/CloudStorage.qml b/qt-mobile/qml/CloudStorage.qml index b199be739..897ebfcee 100644 --- a/qt-mobile/qml/CloudStorage.qml +++ b/qt-mobile/qml/CloudStorage.qml @@ -17,12 +17,12 @@ Item { GridLayout { columns: 2 anchors.fill: parent - anchors.margins: units.gridUnit + anchors.margins: MobileComponents.Units.gridUnit Label { text: "Cloud credentials" - Layout.bottomMargin: units.largeSpacing - font.pointSize: units.titlePointSize + Layout.bottomMargin: MobileComponents.Units.largeSpacing + font.pointSize: subsurfaceTheme.titlePointSize Layout.columnSpan: 2 } @@ -72,7 +72,7 @@ Item { id: savePassword } - Item { width: units.gridUnit; height: width } + Item { width: MobileComponents.Units.gridUnit; height: width } Item { height: saveButton.height width: saveButton.width diff --git a/qt-mobile/qml/DiveDetails.qml b/qt-mobile/qml/DiveDetails.qml index 32fa73042..e69d0e672 100644 --- a/qt-mobile/qml/DiveDetails.qml +++ b/qt-mobile/qml/DiveDetails.qml @@ -1,16 +1,16 @@ import QtQuick 2.3 import QtQuick.Controls 1.2 import QtQuick.Controls.Styles 1.2 -import QtQuick.Window 2.2 import QtQuick.Dialogs 1.2 import QtQuick.Layouts 1.1 -import QtQuick.Window 2.2 import org.subsurfacedivelog.mobile 1.0 +import org.kde.plasma.mobilecomponents 0.2 as MobileComponents -Item { +MobileComponents.Page { id: diveDetailsWindow width: parent.width objectName: "DiveDetails" + flickable: flick property string location property string dive_id @@ -31,120 +31,130 @@ Item { Flickable { id: flick anchors.fill: parent - contentHeight: parent.height + contentHeight: content.height clip: true - ColumnLayout { - width: parent.width - spacing: 8 + Item { + id: content + width: flick.width + height: contentRect.height + MobileComponents.Units.smallSpacing * 2 + ColumnLayout { + anchors { + left: parent.left + right: parent.right + top: parent.top + margins: MobileComponents.Units.smallSpacing + } + spacing: MobileComponents.Units.smallSpacing - GridLayout { - id: editorDetails - width: parent.width - columns: 2 - Label { - Layout.columnSpan: 2 - font.pointSize: units.titlePointSize - text: "Dive " + number + " (" + date + ")" - } + GridLayout { + id: editorDetails + width: parent.width + columns: 2 - Item { - Layout.columnSpan: 2 - Layout.fillWidth: true - Layout.preferredHeight: qmlProfile.visible ? qmlProfile.height : profileHideButton.height - QMLProfile { - id: qmlProfile - height: units.gridUnit * 25 - anchors { - top: parent.top - left: parent.left - right: parent.right - } - //Rectangle { color: "green"; opacity: 0.4; anchors.fill: parent } // used for debugging the dive profile sizing, will be removed later + MobileComponents.Heading { + Layout.columnSpan: 2 + text: "Dive " + number + " (" + date + ")" } - Button { - id: profileHideButton - anchors { - right: parent.right - top: parent.top + + Item { + Layout.columnSpan: 2 + Layout.fillWidth: true + Layout.preferredHeight: qmlProfile.visible ? qmlProfile.height : profileHideButton.height + QMLProfile { + id: qmlProfile + height: MobileComponents.Units.gridUnit * 25 + anchors { + top: parent.top + left: parent.left + right: parent.right + } + //Rectangle { color: "green"; opacity: 0.4; anchors.fill: parent } // used for debugging the dive profile sizing, will be removed later } - text: "Hide Dive Profile" - onClicked: { - qmlProfile.visible = !qmlProfile.visible - if (qmlProfile.visible) { - text = "Hide Dive Profile" - } else { - text = "Show Dive Profile" + Button { + id: profileHideButton + anchors { + right: parent.right + top: parent.top + } + text: "Hide Dive Profile" + onClicked: { + qmlProfile.visible = !qmlProfile.visible + if (qmlProfile.visible) { + text = "Hide Dive Profile" + } else { + text = "Show Dive Profile" + } } } } - } - Label { - text: "Location:" - } - TextField { - id: txtLocation; text: location; - Layout.fillWidth: true - } + Label { + text: "Location:" + } + TextField { + id: txtLocation; text: location; + Layout.fillWidth: true + } - Label { - text: "Air Temp:" - } - TextField { - id: txtAirTemp - text: airtemp - Layout.fillWidth: true - } + Label { + text: "Air Temp:" + } + TextField { + id: txtAirTemp + text: airtemp + Layout.fillWidth: true + } - Label { - text: "Water Temp:" - } - TextField { - id: txtWaterTemp - text: watertemp - Layout.fillWidth: true - } + Label { + text: "Water Temp:" + } + TextField { + id: txtWaterTemp + text: watertemp + Layout.fillWidth: true + } - Label { - text: "Suit:" + Label { + text: "Suit:" - } - TextField { - id: txtSuit - text: suit - Layout.fillWidth: true - } + } + TextField { + id: txtSuit + text: suit + Layout.fillWidth: true + } - Label { - text: "Buddy:" - } - TextField { - id: txtBuddy - text: buddy - Layout.fillWidth: true - } + Label { + text: "Buddy:" + } + TextField { + id: txtBuddy + text: buddy + Layout.fillWidth: true + } - Label { - text: "Dive Master:" - } - TextField { - id: txtDiveMaster - text: divemaster - Layout.fillWidth: true - } + Label { + text: "Dive Master:" + } + TextField { + id: txtDiveMaster + text: divemaster + Layout.fillWidth: true + } - Label { - text: "Notes:" - } - TextEdit{ - id: txtNotes - text: notes - focus: true - Layout.fillWidth: true - Layout.fillHeight: true - selectByMouse: true - wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere + Label { + text: "Notes:" + } + TextEdit{ + id: txtNotes + text: notes + focus: true + Layout.fillWidth: true + Layout.fillHeight: true + selectByMouse: true + wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere + } } } } diff --git a/qt-mobile/qml/DiveList.qml b/qt-mobile/qml/DiveList.qml index 4f147bf6d..75f4f809e 100644 --- a/qt-mobile/qml/DiveList.qml +++ b/qt-mobile/qml/DiveList.qml @@ -1,57 +1,58 @@ -import QtQuick 2.3 +import QtQuick 2.4 import QtQuick.Controls 1.2 +import QtQuick.Layouts 1.2 import QtQuick.Window 2.2 import QtQuick.Dialogs 1.2 +import org.kde.plasma.mobilecomponents 0.2 as MobileComponents import org.subsurfacedivelog.mobile 1.0 -import QtQuick.Layouts 1.0 -Rectangle { +MobileComponents.Page { id: page objectName: "DiveList" + color: MobileComponents.Theme.viewBackgroundColor + flickable: diveListView Component { id: diveDelegate - Item { + MobileComponents.ListItem { id: dive + enabled: true + checked: diveListView.currentIndex == model.index property real detailsOpacity : 0 - width: diveListView.width - units.smallSpacing - height: childrenRect.height + //When clicked, the mode changes to details view - //Mouse region: When clicked, the mode changes to details view - MouseArea { - anchors.fill: parent - onClicked: { - detailsWindow.width = parent.width - detailsWindow.location = location - detailsWindow.dive_id = id - detailsWindow.buddy = buddy - detailsWindow.suit = suit - detailsWindow.airtemp = airtemp - detailsWindow.watertemp = watertemp - detailsWindow.divemaster = divemaster - detailsWindow.notes = notes - detailsWindow.number = diveNumber - detailsWindow.date = date - stackView.push(detailsWindow) - } + onClicked: { + diveListView.currentIndex = model.index + detailsWindow.width = parent.width + detailsWindow.location = location + detailsWindow.dive_id = id + detailsWindow.buddy = buddy + detailsWindow.suit = suit + detailsWindow.airtemp = airtemp + detailsWindow.watertemp = watertemp + detailsWindow.divemaster = divemaster + detailsWindow.notes = notes + detailsWindow.number = diveNumber + detailsWindow.date = date + stackView.push(detailsWindow) } //Layout of the page: (mini profile, dive no, date at the top //And other details at the bottom. Item { - x: units.smallSpacing - width: parent.width - units.smallSpacing * 2 - height: childrenRect.height + units.smallSpacing * 2 - //spacing: units.smallSpacing / 2 - anchors.margins: units.smallSpacing + x: MobileComponents.Units.smallSpacing + width: parent.width - MobileComponents.Units.smallSpacing * 2 + height: childrenRect.height + MobileComponents.Units.smallSpacing * 2 + //spacing: MobileComponents.Units.smallSpacing / 2 + anchors.margins: MobileComponents.Units.smallSpacing Text { id: locationText text: location - color: theme.textColor - //font.pointSize: Math.round(units.fontMetrics.pointSize * 1.2) // why this doesn't work is a mystery to me, so ... + color: MobileComponents.Theme.textColor + //font.pointSize: Math.round(MobileComponents.Units.fontMetrics.pointSize * 1.2) // why this doesn't work is a mystery to me, so ... scale: 1.2 // Let's see how this works, otherwise, we'll need the default point size somewhere transformOrigin: Item.TopLeft elide: Text.ElideRight @@ -66,12 +67,12 @@ Rectangle { id: dateLabel text: date opacity: 0.6 - color: theme.textColor - font.pointSize: units.smallPointSize + color: MobileComponents.Theme.textColor + font.pointSize: subsurfaceTheme.smallPointSize anchors { right: parent.right top: parent.top - bottomMargin: units.smallSpacing / 2 + bottomMargin: MobileComponents.Units.smallSpacing / 2 } } Row { @@ -84,47 +85,36 @@ Rectangle { Text { text: 'Depth: ' opacity: 0.6 - color: theme.textColor + color: MobileComponents.Theme.textColor } Text { text: depth - width: Math.max(units.gridUnit * 3, paintedWidth) // helps vertical alignment throughout listview - color: theme.textColor + width: Math.max(MobileComponents.Units.gridUnit * 3, paintedWidth) // helps vertical alignment throughout listview + color: MobileComponents.Theme.textColor } Text { text: 'Duration: ' opacity: 0.6 - color: theme.textColor + color: MobileComponents.Theme.textColor } Text { text: duration - color: theme.textColor + color: MobileComponents.Theme.textColor } } Text { id: numberText text: "#" + diveNumber - color: theme.textColor + color: MobileComponents.Theme.textColor scale: 1.2 transformOrigin: Item.BottomRight opacity: 0.4 anchors { right: parent.right - topMargin: units.smallSpacing + topMargin: MobileComponents.Units.smallSpacing top: locationText.bottom } } - //Text { text: location; width: parent.width } - Rectangle { - color: theme.textColor - opacity: .2 - height: Math.max(1, units.gridUnit / 24) // we really want a thin line - anchors { - left: parent.left - right: parent.right - top: numberText.bottom - } - } } } } @@ -132,52 +122,63 @@ Rectangle { Component { id: tripHeading Item { - width: page.width - units.smallSpacing * 2 - height: childrenRect.height + units.smallSpacing * 2 + width: page.width - MobileComponents.Units.smallSpacing * 2 + height: childrenRect.height + MobileComponents.Units.smallSpacing * 2 - Text { + MobileComponents.Heading { id: sectionText text: section anchors { top: parent.top left: parent.left - leftMargin: units.smallSpacing + leftMargin: MobileComponents.Units.smallSpacing right: parent.right } - color: theme.textColor - font.pointSize: 16 + level: 2 } Rectangle { - height: Math.max(2, units.gridUnit / 12) // we want a thicker line + height: Math.max(2, MobileComponents.Units.gridUnit / 12) // we want a thicker line anchors { top: sectionText.bottom left: parent.left - leftMargin: units.smallSpacing + leftMargin: MobileComponents.Units.smallSpacing right: parent.right } - color: theme.accentColor + color: subsurfaceTheme.accentColor } } } - ListView { - id: diveListView + Connections { + target: stackView + onDepthChanged: { + if (stackView.depth == 1) { + diveListView.currentIndex = -1; + } + } + } + ScrollView { anchors.fill: parent - model: diveModel - delegate: diveDelegate - boundsBehavior: Flickable.StopAtBounds - //highlight: Rectangle { color: theme.highlightColor; width: units.smallSpacing } - focus: true - clip: true - section.property: "trip" - section.criteria: ViewSection.FullString - section.delegate: tripHeading + ListView { + id: diveListView + anchors.fill: parent + model: diveModel + currentIndex: -1 + delegate: diveDelegate + boundsBehavior: Flickable.StopAtBounds + //highlight: Rectangle { color: MobileComponents.Theme.highlightColor; width: MobileComponents.Units.smallSpacing } + focus: true + clip: true + section.property: "trip" + section.criteria: ViewSection.FullString + section.delegate: tripHeading + } } StartPage { anchors.fill: parent opacity: (diveListView.count == 0) ? 1.0 : 0 visible: opacity > 0 - Behavior on opacity { NumberAnimation { duration: units.shortDuration } } + Behavior on opacity { NumberAnimation { duration: MobileComponents.Units.shortDuration } } Component.onCompleted: { print("diveListView.count " + diveListView.count); } diff --git a/qt-mobile/qml/Preferences.qml b/qt-mobile/qml/Preferences.qml index 59861009c..8cae95ff0 100644 --- a/qt-mobile/qml/Preferences.qml +++ b/qt-mobile/qml/Preferences.qml @@ -3,6 +3,7 @@ import QtQuick.Controls 1.2 import QtQuick.Window 2.2 import QtQuick.Dialogs 1.2 import QtQuick.Layouts 1.1 +import org.kde.plasma.mobilecomponents 0.2 as MobileComponents import org.subsurfacedivelog.mobile 1.0 Item { @@ -17,12 +18,12 @@ Item { GridLayout { columns: 2 anchors.fill: parent - anchors.margins: units.gridUnit + anchors.margins: MobileComponents.Units.gridUnit Label { text: "Cloud credentials" - Layout.bottomMargin: units.largeSpacing - font.pointSize: units.titlePointSize + Layout.bottomMargin: MobileComponents.Units.largeSpacing + font.pointSize: subsurfaceTheme.titlePointSize Layout.columnSpan: 2 } @@ -74,8 +75,8 @@ Item { Label { text: "Subsurface GPS data webservice" - Layout.bottomMargin: units.largeSpacing - font.pointSize: units.titlePointSize + Layout.bottomMargin: MobileComponents.Units.largeSpacing + font.pointSize: subsurfaceTheme.titlePointSize Layout.columnSpan: 2 } @@ -101,7 +102,7 @@ Item { Layout.fillWidth: true } - Item { width: units.gridUnit; height: width } + Item { width: MobileComponents.Units.gridUnit; height: width } Item { height: saveButton.height width: saveButton.width diff --git a/qt-mobile/qml/StartPage.qml b/qt-mobile/qml/StartPage.qml index 31388f52f..8041a6786 100644 --- a/qt-mobile/qml/StartPage.qml +++ b/qt-mobile/qml/StartPage.qml @@ -1,32 +1,33 @@ import QtQuick 2.5 import QtQuick.Controls 1.2 import QtQuick.Layouts 1.1 +import org.kde.plasma.mobilecomponents 0.2 as MobileComponents Item { ColumnLayout { id: startpage anchors.fill: parent - anchors.margins: units.largeSpacing + anchors.margins: MobileComponents.Units.largeSpacing property int buttonWidth: welcomeText.width * 0.66 - Label { - Layout.bottomMargin: units.largeSpacing + MobileComponents.Label { + Layout.bottomMargin: MobileComponents.Units.largeSpacing text: "Subsurface Divelog" font.pointSize: welcomeText.font.pointSize * 2 } - Label { + MobileComponents.Label { id: welcomeText Layout.fillWidth: true - Layout.bottomMargin: units.largeSpacing + Layout.bottomMargin: MobileComponents.Units.largeSpacing text: "No recorded dives found. You can download your dives to this device from the Subsurface cloud storage service, from your dive computer, or add them manually." wrapMode: Text.WordWrap Layout.columnSpan: 2 } Button { id: cloudstorageButton - Layout.bottomMargin: units.largeSpacing + Layout.bottomMargin: MobileComponents.Units.largeSpacing Layout.preferredWidth: startpage.buttonWidth text: "Connect to CloudStorage..." onClicked: { @@ -36,7 +37,7 @@ Item { Button { id: computerButton Layout.preferredWidth: startpage.buttonWidth - Layout.bottomMargin: units.largeSpacing + Layout.bottomMargin: MobileComponents.Units.largeSpacing text: "Transfer from dive computer..." onClicked: { stackView.push(downloadDivesWindow) @@ -45,7 +46,7 @@ Item { Button { id: manualButton Layout.preferredWidth: startpage.buttonWidth - Layout.bottomMargin: units.largeSpacing + Layout.bottomMargin: MobileComponents.Units.largeSpacing text: "Add dive manually..." onClicked: { manager.addDive(); diff --git a/qt-mobile/qml/ThemeTest.qml b/qt-mobile/qml/ThemeTest.qml index 7452acc1b..b65bc9eef 100644 --- a/qt-mobile/qml/ThemeTest.qml +++ b/qt-mobile/qml/ThemeTest.qml @@ -1,11 +1,12 @@ import QtQuick 2.5 import QtQuick.Layouts 1.1 +import org.kde.plasma.mobilecomponents 0.2 as MobileComponents GridLayout { id: themetest columns: 2 - Label { + MobileComponents.Label { Layout.columnSpan: 2 Layout.fillHeight: true text: "Theme Information" @@ -15,39 +16,39 @@ GridLayout { id: fm } - Label { - text: "units.gridUnit:" + MobileComponents.Label { + text: "MobileComponents.Units.gridUnit:" } - Label { - text: units.gridUnit + MobileComponents.Label { + text: MobileComponents.Units.gridUnit } - Label { - text: "units.devicePixelRatio:" + MobileComponents.Label { + text: "MobileComponents.Units.devicePixelRatio:" } - Label { - text: units.devicePixelRatio + MobileComponents.Label { + text: MobileComponents.Units.devicePixelRatio } - Label { + MobileComponents.Label { text: "FontMetrics pointSize:" } - Label { + MobileComponents.Label { text: fm.font.pointSize } - Label { + MobileComponents.Label { text: "FontMetrics pixelSize:" } - Label { + MobileComponents.Label { text: fm.height } - Label { + MobileComponents.Label { text: "hand-computed devicePixelRatio:" } - Label { + MobileComponents.Label { text: fm.height / fm.font.pointSize } @@ -65,7 +66,7 @@ GridLayout { text: font.pointSize } - Label { + MobileComponents.Label { Layout.columnSpan: 2 Layout.fillHeight: true } diff --git a/qt-mobile/qml/TopBar.qml b/qt-mobile/qml/TopBar.qml index 624002242..f07a88e47 100644 --- a/qt-mobile/qml/TopBar.qml +++ b/qt-mobile/qml/TopBar.qml @@ -5,6 +5,7 @@ import QtQuick.Window 2.2 import QtQuick.Dialogs 1.2 import QtQuick.Layouts 1.1 import QtQuick.Window 2.2 +import org.kde.plasma.mobilecomponents 0.2 as MobileComponents import org.subsurfacedivelog.mobile 1.0 Rectangle { @@ -12,17 +13,17 @@ Rectangle { property bool goBack: (stackView.depth > 1) - color: theme.accentColor - Layout.minimumHeight: units.gridUnit * 2 + units.largeSpacing + color: subsurfaceTheme.accentColor + Layout.minimumHeight: MobileComponents.Units.gridUnit * 2 + MobileComponents.Units.largeSpacing Layout.fillWidth: true Layout.margins: 0 RowLayout { anchors.bottom: topPart.bottom - anchors.bottomMargin: units.largeSpacing / 2 + anchors.bottomMargin: MobileComponents.Units.largeSpacing / 2 anchors.left: topPart.left - anchors.leftMargin: units.largeSpacing / 2 + anchors.leftMargin: MobileComponents.Units.largeSpacing / 2 anchors.right: topPart.right - anchors.rightMargin: units.largeSpacing / 2 + anchors.rightMargin: MobileComponents.Units.largeSpacing / 2 Item { Layout.preferredHeight: subsurfaceLogo.height Image { @@ -32,7 +33,7 @@ Rectangle { top: parent.top left: parent.left } - width: units.gridUnit * 2 + width: MobileComponents.Units.gridUnit * 2 height: width } Text { @@ -41,12 +42,12 @@ Rectangle { anchors { left: subsurfaceLogo.right bottom: subsurfaceLogo.bottom - leftMargin: units.gridUnit / 2 + leftMargin: MobileComponents.Units.gridUnit / 2 } - font.pointSize: units.fontMetrics.font.pointSize * 1.5 + font.pointSize: MobileComponents.Units.fontMetrics.font.pointSize * 1.5 verticalAlignment: Text.AlignBottom Layout.fillWidth: false - color: theme.accentTextColor + color: subsurfaceTheme.accentTextColor } } Item { @@ -57,17 +58,17 @@ Rectangle { // Display back arrow or menu button text: topPart.goBack ? "\u2190" : "\u22ee" anchors.right: parent.right - Layout.preferredWidth: units.gridUnit * 2 + Layout.preferredWidth: MobileComponents.Units.gridUnit * 2 Layout.preferredHeight: parent.height style: ButtonStyle { background: Rectangle { - implicitWidth: units.gridUnit * 2 - color: theme.accentColor + implicitWidth: MobileComponents.Units.gridUnit * 2 + color: subsurfaceTheme.accentColor } label: Text { id: txt - color: theme.accentTextColor - font.pointSize: units.fontMetrics.font.pointSize * 2 + color: subsurfaceTheme.accentTextColor + font.pointSize: MobileComponents.Units.fontMetrics.font.pointSize * 2 font.bold: true text: control.text horizontalAlignment: Text.AlignHCenter diff --git a/qt-mobile/qml/components/Label.qml b/qt-mobile/qml/components/Label.qml index acbc079e2..65af7e0db 100644 --- a/qt-mobile/qml/components/Label.qml +++ b/qt-mobile/qml/components/Label.qml @@ -1,9 +1,6 @@ import QtQuick 2.5 -//import QtQuick.Controls 1.2 as QuickControls -import QtQuick.Window 2.2 -import QtQuick.Dialogs 1.2 -import QtQuick.Layouts 1.1 +import org.kde.plasma.mobilecomponents 0.2 as MobileComponents Text { - color: theme.textColor + color: MobileComponents.Theme.textColor } diff --git a/qt-mobile/qml/dive.jpg b/qt-mobile/qml/dive.jpg Binary files differnew file mode 100644 index 000000000..56445648a --- /dev/null +++ b/qt-mobile/qml/dive.jpg diff --git a/qt-mobile/qml/main.qml b/qt-mobile/qml/main.qml index c3117b9d5..53d872743 100644 --- a/qt-mobile/qml/main.qml +++ b/qt-mobile/qml/main.qml @@ -1,4 +1,4 @@ -import QtQuick 2.3 +import QtQuick 2.4 import QtQuick.Controls 1.2 import QtQuick.Controls.Styles 1.2 import QtQuick.Window 2.2 @@ -6,26 +6,113 @@ import QtQuick.Dialogs 1.2 import QtQuick.Layouts 1.1 import QtQuick.Window 2.2 import org.subsurfacedivelog.mobile 1.0 -import "qrc:/qml/theme" as Theme +import org.kde.plasma.mobilecomponents 0.2 as MobileComponents - -Window { +MobileComponents.ApplicationWindow { title: qsTr("Subsurface mobile") property bool fullscreen: true property alias messageText: message.text + + FontMetrics { + id: fontMetrics + } + visible: true - Theme.Units { - id: units + globalDrawer: MobileComponents.GlobalDrawer{ + title: "Subsurface" + titleIcon: "qrc:/qml/subsurface-mobile-icon.png" - property int titlePointSize: Math.round(fontMetrics.font.pointSize * 1.5) - property int smallPointSize: Math.round(fontMetrics.font.pointSize * 0.7) + bannerImageSource: "dive.jpg" + actions: [ + Action { + text: "Preferences" + onTriggered: { + stackView.push(prefsWindow) + } + }, + + Action { + text: "Load Dives" + onTriggered: { + manager.loadDives(); + } + }, + + Action { + text: "Download Dives" + onTriggered: { + stackView.push(downloadDivesWindow) + } + }, + + Action { + text: "Add Dive" + onTriggered: { + manager.addDive(); + stackView.push(detailsWindow) + } + }, + + Action { + text: "Save Changes" + onTriggered: { + manager.saveChanges(); + } + }, + + MobileComponents.ActionGroup { + text: "GPS" + Action { + text: "Run location service" + checkable: true + checked: manager.locationServiceEnabled + onToggled: { + manager.locationServiceEnabled = checked; + } + } + Action { + text: "Apply GPS data to dives" + onTriggered: { + manager.applyGpsData(); + } + } + Action { + text: "Send GPS data to server" + onTriggered: { + manager.sendGpsData(); + } + } + + Action { + text: "Clear stored GPS data" + onTriggered: { + manager.clearGpsData(); + } + } + }, + + Action { + text: "View Log" + onTriggered: { + stackView.push(logWindow) + } + }, + + Action { + text: "Theme Information" + onTriggered: { + stackView.push(themetest) + } + } + ] } - Theme.Theme { - id: theme - /* Added for subsurface */ + QtObject { + id: subsurfaceTheme + property int titlePointSize: Math.round(fontMetrics.font.pointSize * 1.5) + property int smallPointSize: Math.round(fontMetrics.font.pointSize * 0.7) property color accentColor: "#2d5b9a" property color accentTextColor: "#ececec" } @@ -115,57 +202,46 @@ Window { } } - ColumnLayout { - anchors.fill: parent - - TopBar { - - } - - StackView { - id: stackView - Layout.preferredWidth: parent.width - Layout.fillHeight: true - focus: true - Keys.onReleased: if (event.key == Qt.Key_Back && stackView.depth > 1) { - stackView.pop() - event.accepted = true; - } - initialItem: Item { - width: parent.width - height: parent.height - - ColumnLayout { - id: awLayout - anchors.fill: parent - spacing: units.gridUnit / 2 - - Rectangle { - id: detailsPage - Layout.fillHeight: true - Layout.fillWidth: true - - DiveList { - anchors.fill: detailsPage - id: diveDetails - color: theme.backgroundColor - } - } - - Rectangle { - id: messageArea - height: childrenRect.height - Layout.fillWidth: true - color: theme.backgroundColor - - Text { - id: message - color: theme.textColor - wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere - styleColor: theme.textColor - font.pointSize: units.smallPointSize - } - } + toolBar: TopBar { + width: parent.width + height: Layout.minimumHeight + } + + property Item stackView: pageStack + initialPage: Item { + width: parent.width + height: parent.height + + ColumnLayout { + id: awLayout + anchors.fill: parent + spacing: MobileComponents.Units.gridUnit / 2 + + Rectangle { + id: detailsPage + Layout.fillHeight: true + Layout.fillWidth: true + + DiveList { + anchors.fill: detailsPage + id: diveDetails + color: MobileComponents.Theme.backgroundColor + } + } + + + Rectangle { + id: messageArea + height: childrenRect.height + Layout.fillWidth: true + color: MobileComponents.Theme.backgroundColor + + Text { + id: message + color: MobileComponents.Theme.textColor + wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere + styleColor: MobileComponents.Theme.textColor + font.pointSize: MobileComponents.Units.smallPointSize } } } @@ -201,6 +277,6 @@ Window { } Component.onCompleted: { - print("units.gridUnit is: " + units.gridUnit); + print("MobileComponents.Units.gridUnit is: " + MobileComponents.Units.gridUnit); } } diff --git a/qt-mobile/qml/mobile-resources.qrc b/qt-mobile/qml/mobile-resources.qrc index 5d2065e22..971c2e427 100644 --- a/qt-mobile/qml/mobile-resources.qrc +++ b/qt-mobile/qml/mobile-resources.qrc @@ -1,21 +1,39 @@ <RCC> - <qresource prefix="/qml"> - <file>main.qml</file> - <file>TextButton.qml</file> - <file>Preferences.qml</file> - <file>DiveList.qml</file> - <file>DiveDetails.qml</file> - <file>DownloadFromDiveComputer.qml</file> - <file>Log.qml</file> - <file>TopBar.qml</file> - <file>ThemeTest.qml</file> - <file>StartPage.qml</file> - <file alias="Label.qml">components/Label.qml</file> - <file alias="subsurface-mobile-icon.png">../../icons/subsurface-mobile-icon.png</file> - </qresource> - <qresource prefix="/qml/theme"> - <file alias="Theme.qml">theme/Theme.qml</file> - <file alias="qmldir">theme/qmldir</file> - <file alias="Units.qml" >theme/Units.qml</file> - </qresource> +<qresource prefix="/qml"> + <file>main.qml</file> + <file>TextButton.qml</file> + <file>Preferences.qml</file> + <file>DiveList.qml</file> + <file>DiveDetails.qml</file> + <file>DownloadFromDiveComputer.qml</file> + <file>Log.qml</file> + <file>TopBar.qml</file> + <file>ThemeTest.qml</file> + <file>StartPage.qml</file> + <file>dive.jpg</file> + <file alias="Label.qml">components/Label.qml</file> + <file alias="subsurface-mobile-icon.png">../../icons/subsurface-mobile-icon.png</file> + </qresource> + <qresource prefix="/imports"> + <file alias="org/kde/plasma/mobilecomponents/qmldir">mobilecomponents/qmldir</file> + <file alias="org/kde/plasma/mobilecomponents/ActionGroup.qml">mobilecomponents/ActionGroup.qml</file> + <file alias="org/kde/plasma/mobilecomponents/ApplicationWindow.qml">mobilecomponents/ApplicationWindow.qml</file> + <file alias="org/kde/plasma/mobilecomponents/GlobalDrawer.qml">mobilecomponents/GlobalDrawer.qml</file> + <file alias="org/kde/plasma/mobilecomponents/Page.qml">mobilecomponents/Page.qml</file> + <file alias="org/kde/plasma/mobilecomponents/Icon.qml">mobilecomponents/Icon.qml</file> + <file alias="org/kde/plasma/mobilecomponents/Heading.qml">mobilecomponents/Heading.qml</file> + <file alias="org/kde/plasma/mobilecomponents/PageRow.qml">mobilecomponents/PageRow.qml</file> + <file alias="org/kde/plasma/mobilecomponents/Label.qml">mobilecomponents/Label.qml</file> + <file alias="org/kde/plasma/mobilecomponents/ListItem.qml">mobilecomponents/ListItem.qml</file> + <file alias="org/kde/plasma/mobilecomponents/OverlayDrawer.qml">mobilecomponents/OverlayDrawer.qml</file> + <file alias="org/kde/plasma/mobilecomponents/Theme.qml">mobilecomponents/Theme.qml</file> + <file alias="org/kde/plasma/mobilecomponents/Units.qml">mobilecomponents/Units.qml</file> + <file alias="org/kde/plasma/mobilecomponents/private/ActionButton.qml">mobilecomponents/private/ActionButton.qml</file> + <file alias="org/kde/plasma/mobilecomponents/private/ActionButtonArrow.qml">mobilecomponents/private/ActionButtonArrow.qml</file> + <file alias="org/kde/plasma/mobilecomponents/private/AbstractDrawer.qml">mobilecomponents/private/AbstractDrawer.qml</file> + <file alias="org/kde/plasma/mobilecomponents/private/PageStack.js">mobilecomponents/private/PageStack.js</file> + <file alias="org/kde/plasma/mobilecomponents/private/qmldir">mobilecomponents/private/qmldir</file> + <file alias="org/kde/plasma/mobilecomponents/icons/go-next.svg">mobilecomponents/icons/go-next.svg</file> + <file alias="org/kde/plasma/mobilecomponents/icons/go-previous.svg">mobilecomponents/icons/go-previous.svg</file> + </qresource> </RCC> diff --git a/qt-mobile/qml/mobilecomponents/ActionGroup.qml b/qt-mobile/qml/mobilecomponents/ActionGroup.qml new file mode 100644 index 000000000..ba057f58f --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/ActionGroup.qml @@ -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 +} diff --git a/qt-mobile/qml/mobilecomponents/ApplicationWindow.qml b/qt-mobile/qml/mobilecomponents/ApplicationWindow.qml new file mode 100644 index 000000000..71980f9e6 --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/ApplicationWindow.qml @@ -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 + } +} diff --git a/qt-mobile/qml/mobilecomponents/ContextDrawer.qml b/qt-mobile/qml/mobilecomponents/ContextDrawer.qml new file mode 100644 index 000000000..2e2f95f7e --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/ContextDrawer.qml @@ -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") + } + } + } + } + } +} diff --git a/qt-mobile/qml/mobilecomponents/GlobalDrawer.qml b/qt-mobile/qml/mobilecomponents/GlobalDrawer.qml new file mode 100644 index 000000000..082231c41 --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/GlobalDrawer.qml @@ -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; + } + } + } + } + } + } +} + diff --git a/qt-mobile/qml/mobilecomponents/Heading.qml b/qt-mobile/qml/mobilecomponents/Heading.qml new file mode 100644 index 000000000..0d3909e12 --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/Heading.qml @@ -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; + } +} diff --git a/qt-mobile/qml/mobilecomponents/Icon.qml b/qt-mobile/qml/mobilecomponents/Icon.qml new file mode 100644 index 000000000..d5b253235 --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/Icon.qml @@ -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 + } +} diff --git a/qt-mobile/qml/mobilecomponents/IconGrid.qml b/qt-mobile/qml/mobilecomponents/IconGrid.qml new file mode 100644 index 000000000..f3f8f1c09 --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/IconGrid.qml @@ -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) + } + } + } + } + } + } + } + } +} diff --git a/qt-mobile/qml/mobilecomponents/Label.qml b/qt-mobile/qml/mobilecomponents/Label.qml new file mode 100644 index 000000000..bf27078b7 --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/Label.qml @@ -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 +} diff --git a/qt-mobile/qml/mobilecomponents/ListItem.qml b/qt-mobile/qml/mobilecomponents/ListItem.qml new file mode 100644 index 000000000..042ba2cbc --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/ListItem.qml @@ -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 +} diff --git a/qt-mobile/qml/mobilecomponents/ListItemWithActions.qml b/qt-mobile/qml/mobilecomponents/ListItemWithActions.qml new file mode 100644 index 000000000..97eba1c71 --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/ListItemWithActions.qml @@ -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.2 +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 +} diff --git a/qt-mobile/qml/mobilecomponents/OverlayDrawer.qml b/qt-mobile/qml/mobilecomponents/OverlayDrawer.qml new file mode 100644 index 000000000..5ae81929e --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/OverlayDrawer.qml @@ -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 + } + } + ] + } + } +} + diff --git a/qt-mobile/qml/mobilecomponents/Page.qml b/qt-mobile/qml/mobilecomponents/Page.qml new file mode 100644 index 000000000..784ce8037 --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/Page.qml @@ -0,0 +1,67 @@ +/* + * 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 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: { + actionButton.transform[0].y = Math.min(actionButton.height, Math.max(0, actionButton.transform[0].y + (flickable.contentY - oldContentY))); + + oldContentY = flickable.contentY; + } + } +} diff --git a/qt-mobile/qml/mobilecomponents/PageRow.qml b/qt-mobile/qml/mobilecomponents/PageRow.qml new file mode 100644 index 000000000..4d6adf5a7 --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/PageRow.qml @@ -0,0 +1,503 @@ +/**************************************************************************** +** +** 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) + { + scrollAnimation.running = false; + 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) + { + scrollToLevel(depth-1); + return Engine.pop(page, immediate); + } + + // Replaces a page on the stack. + // See push() for details. + function replace(page, properties, immediate) + { + scrollAnimation.running = false; + 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)); + 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") + } + } + } + + onWidthChanged: { + var firstLevel = Math.max(0, depth - mainFlickable.width/columnWidth + 1); + mainFlickable.contentX = Math.max(0, Math.min(Math.max(0, columnWidth * (firstLevel - 1)), mainFlickable.contentWidth)); + } + 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(); + } + } + } +} diff --git a/qt-mobile/qml/mobilecomponents/SplitDrawer.qml b/qt-mobile/qml/mobilecomponents/SplitDrawer.qml new file mode 100644 index 000000000..813eae10c --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/SplitDrawer.qml @@ -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 + } + } +} + diff --git a/qt-mobile/qml/mobilecomponents/Theme.qml b/qt-mobile/qml/mobilecomponents/Theme.qml new file mode 100644 index 000000000..fd8c49ba2 --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/Theme.qml @@ -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: "#eff0f1" + 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 {} + +} diff --git a/qt-mobile/qml/mobilecomponents/Units.qml b/qt-mobile/qml/mobilecomponents/Units.qml new file mode 100644 index 000000000..8b5032a71 --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/Units.qml @@ -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: fontMetrics.height / fontMetrics.font.pointSize + + /** + * 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" + } +} diff --git a/qt-mobile/qml/mobilecomponents/icons/go-next.svg b/qt-mobile/qml/mobilecomponents/icons/go-next.svg new file mode 100644 index 000000000..f2828f18f --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/icons/go-next.svg @@ -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> diff --git a/qt-mobile/qml/mobilecomponents/icons/go-previous.svg b/qt-mobile/qml/mobilecomponents/icons/go-previous.svg new file mode 100644 index 000000000..7cfd42891 --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/icons/go-previous.svg @@ -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> diff --git a/qt-mobile/qml/mobilecomponents/private/AbstractDrawer.qml b/qt-mobile/qml/mobilecomponents/private/AbstractDrawer.qml new file mode 100644 index 000000000..db662509c --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/private/AbstractDrawer.qml @@ -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 + } +} + diff --git a/qt-mobile/qml/mobilecomponents/private/ActionButton.qml b/qt-mobile/qml/mobilecomponents/private/ActionButton.qml new file mode 100644 index 000000000..bfc8c5875 --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/private/ActionButton.qml @@ -0,0 +1,150 @@ +/* + * 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; + } + } + } + Connections { + target: button.parent + onWidthChanged: button.x = button.parent.width/2 - button.width/2 + } + onXChanged: { + if (button.pressed) { + if (globalDrawer) { + globalDrawer.position = Math.min(1, Math.max(0, (x - button.parent.width/2 + button.width/2)/globalDrawer.contentItem.width)); + } + if (contextDrawer) { + 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 + } +} + diff --git a/qt-mobile/qml/mobilecomponents/private/ActionButtonArrow.qml b/qt-mobile/qml/mobilecomponents/private/ActionButtonArrow.qml new file mode 100644 index 000000000..7b585452b --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/private/ActionButtonArrow.qml @@ -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(); + } +} + diff --git a/qt-mobile/qml/mobilecomponents/private/PageStack.js b/qt-mobile/qml/mobilecomponents/private/PageStack.js new file mode 100644 index 000000000..8986956b0 --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/private/PageStack.js @@ -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; +} + diff --git a/qt-mobile/qml/mobilecomponents/private/qmldir b/qt-mobile/qml/mobilecomponents/private/qmldir new file mode 100644 index 000000000..35e158210 --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/private/qmldir @@ -0,0 +1,3 @@ +module org.kde.plasma.mobilecomponents.private +#plugin mobilecomponentsprivateplugin + diff --git a/qt-mobile/qml/mobilecomponents/qmldir b/qt-mobile/qml/mobilecomponents/qmldir new file mode 100644 index 000000000..53daf98a2 --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/qmldir @@ -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 |
