port to kirigami

port away from plasma-framework dependencies
frameworks
Marco Martin 10 years ago
parent f9917aa9fe
commit eb1f73800e
  1. 174
      mobile/app/package/contents/ui/Browser.qml
  2. 64
      mobile/app/package/contents/ui/Documents.qml
  3. 53
      mobile/app/package/contents/ui/MainView.qml
  4. 68
      mobile/app/package/contents/ui/OkularDrawer.qml
  5. 26
      mobile/app/package/contents/ui/TableOfContents.qml
  6. 12
      mobile/app/package/contents/ui/Thumbnails.qml
  7. 40
      mobile/app/package/contents/ui/ThumbnailsBase.qml
  8. 7
      mobile/app/package/contents/ui/TreeDelegate.qml
  9. 32
      mobile/app/package/contents/ui/main.qml

@ -1,174 +0,0 @@
/*
* 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 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 General Public License for more details
*
* You should have received a copy of the GNU 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 org.kde.plasma.components 2.0 as PlasmaComponents
import org.kde.plasma.extras 2.0 as PlasmaExtras
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.mobilecomponents 0.2 as MobileComponents
import org.kde.kquickcontrolsaddons 2.0
import org.kde.okular 2.0 as Okular
MobileComponents.SplitDrawer {
id: splitDrawer
anchors.fill: parent
visible: true
property alias splitDrawerOpen: splitDrawer.opened
property alias overlayDrawerOpen: resourceBrowser.opened
property Item globalDrawer: splitDrawer
property Item contextDrawer: resourceDrawer
//An alias doesn't work
property bool bookmarked: false
onBookmarkedChanged: {
pageArea.page.bookmarked = bookmarked
}
contentItem: Documents {
implicitWidth: units.gridUnit * 25
}
MobileComponents.OverlayDrawer {
id: resourceBrowser
anchors.fill: parent
edge: Qt.RightEdge
Okular.DocumentView {
id: pageArea
document: documentItem
anchors.fill: parent
onPageChanged: {
bookmarkConnection.target = page
splitDrawer.bookmarked = page.bookmarked
}
}
//HACK
Connections {
id: bookmarkConnection
target: pageArea.page
onBookmarkedChanged: splitDrawer.bookmarked = pageArea.page.bookmarked
}
contentItem: Item {
id: browserFrame
anchors.fill: parent
state: "Hidden"
PlasmaComponents.ToolBar {
id: mainToolBar
height: units.gridUnit * 2
y: pageStack.currentPage.contentY <= 0 ? 0 : -height
transform: Translate {
y: Math.max(0, -pageStack.currentPage.contentY)
}
tools: pageStack.currentPage.tools
Behavior on y {
NumberAnimation {
duration: 250
}
}
anchors {
left: parent.left
right: parent.right
}
}
PlasmaComponents.PageStack {
id: pageStack
anchors {
left: parent.left
top: mainToolBar.bottom
right: parent.right
bottom: tabsToolbar.top
}
clip: true
toolBar: mainToolBar
}
Connections {
id: scrollConnection
property int oldContentY:0
target: pageStack.currentPage
onContentYChanged: {
scrollConnection.oldContentY = pageStack.currentPage.contentY
}
}
PlasmaComponents.ToolBar {
id: tabsToolbar
y: parent.height - tabsToolbar.height*5
height: mainTabBar.height
anchors {
top: undefined
bottom: browserFrame.bottom
left: parent.left
right: parent.right
}
tools: Item {
width: parent.width
height: childrenRect.height
PlasmaComponents.TabBar {
id: mainTabBar
anchors.horizontalCenter: parent.horizontalCenter
width: Math.min(parent.width, implicitWidth)
tabPosition: Qt.BottomEdge
PlasmaComponents.TabButton {
id: thumbnailsButton
text: tabsToolbar.width > units.gridUnit * 30 ? i18n("Thumbnails") : ""
iconSource: "view-preview"
onCheckedChanged: {
if (checked) {
pageStack.replace(Qt.createComponent("Thumbnails.qml"))
}
}
}
PlasmaComponents.TabButton {
id: tocButton
enabled: documentItem.tableOfContents.count > 0
text: tabsToolbar.width > units.gridUnit * 30 ? i18n("Table of contents") : ""
iconSource: "view-table-of-contents-ltr"
onCheckedChanged: {
if (checked) {
pageStack.replace(Qt.createComponent("TableOfContents.qml"))
}
}
}
PlasmaComponents.TabButton {
id: bookmarksButton
enabled: documentItem.bookmarkedPages.length > 0
text: tabsToolbar.width > units.gridUnit * 30 ? i18n("Bookmarks") : ""
iconSource: "bookmarks-organize"
onCheckedChanged: {
if (checked) {
pageStack.replace(Qt.createComponent("Bookmarks.qml"))
}
}
}
}
}
}
}
}
}

@ -18,45 +18,36 @@
*/ */
import QtQuick 2.1 import QtQuick 2.1
import org.kde.plasma.components 2.0 as PlasmaComponents import QtQuick.Controls 1.3
import org.kde.plasma.extras 2.0 as PlasmaExtras import org.kde.kirigami 1.0 as Kirigami
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.mobilecomponents 0.2 as MobileComponents
import Qt.labs.folderlistmodel 2.1 import Qt.labs.folderlistmodel 2.1
MobileComponents.Page { Item {
id: root id: root
anchors.fill: parent anchors.fill: parent
color: theme.viewBackgroundColor
visible: true
property Item view: filesView property Item view: filesView
property alias contentY: filesView.contentY property alias contentY: filesView.contentY
property alias contentHeight: filesView.contentHeight property alias contentHeight: filesView.contentHeight
property alias model: filesView.model property alias model: filesView.model
tools: Item { Item {
id: toolBarContent id: toolBarContent
width: root.width width: root.width
height: searchField.height height: searchField.height + Kirigami.Units.gridUnit
PlasmaComponents.TextField { TextField {
id: searchField id: searchField
anchors.centerIn: parent anchors.centerIn: parent
onTextChanged: { focus: true
if (text.length > 2) {
filterModel.filterRegExp = ".*" + text + ".*";
} else {
filterModel.filterRegExp = "";
}
}
} }
} }
MobileComponents.Label { Kirigami.Label {
z: 2 z: 2
visible: filesView.count == 0 visible: filesView.count == 0
anchors { anchors {
fill: parent fill: parent
margins: MobileComponents.Units.gridUnit margins: Kirigami.Units.gridUnit
} }
text: i18n("No Documents found. To start to read, put some files in the Documents folder of your device.") text: i18n("No Documents found. To start to read, put some files in the Documents folder of your device.")
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
@ -64,31 +55,28 @@ MobileComponents.Page {
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
} }
PlasmaExtras.ScrollArea { ScrollView {
anchors.fill: parent anchors {
top: toolBarContent.bottom
left: parent.left
right: parent.right
bottom: parent.bottom
}
ListView { ListView {
id: filesView id: filesView
anchors.fill: parent anchors.fill: parent
model: PlasmaCore.SortFilterModel { model: FolderListModel {
id: filterModel id: folderModel
filterRole: "fileName" folder: userPaths.documents
sourceModel: FolderListModel { nameFilters: ["*.pdf", "*.txt", "*.chm", "*.epub"]
id: folderModel showDirs: false
folder: userPaths.documents
nameFilters: ["*.pdf", "*.txt", "*.chm", "*.epub"]
showDirs: false
}
} }
delegate: MobileComponents.ListItem { delegate: Kirigami.BasicListItem {
enabled: true label: model.fileName
PlasmaComponents.Label { visible: model.fileName.indexOf(searchField.text) !== -1
text: model.fileName height: visible ? implicitHeight : 0
horizontalAlignment: Text.AlignHCenter
wrapMode: Text.WordWrap
elide: Text.ElideRight
}
onClicked: { onClicked: {
documentItem.path = model.filePath; documentItem.path = model.filePath;
globalDrawer.opened = false; globalDrawer.opened = false;

@ -0,0 +1,53 @@
/*
* 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 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 General Public License for more details
*
* You should have received a copy of the GNU 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 org.kde.okular 2.0 as Okular
import org.kde.kirigami 1.0 as Kirigami
Kirigami.Page {
property alias document: pageArea.document
leftPadding: 0
topPadding: 0
rightPadding: 0
bottomPadding: 0
actions.main: Kirigami.Action {
iconName: "bookmarks-organize"
checkable: true
onCheckedChanged: pageArea.page.bookmarked = checked;
}
Okular.DocumentView {
id: pageArea
anchors.fill: parent
onPageChanged: {
bookmarkConnection.target = page
actions.main.checked = page.bookmarked
}
onClicked: fileBrowserRoot.controlsVisible = !fileBrowserRoot.controlsVisible
}
Connections {
id: bookmarkConnection
target: pageArea.page
onBookmarkedChanged: actions.main.checked = pageArea.page.bookmarked
}
}

@ -18,68 +18,43 @@
*/ */
import QtQuick 2.1 import QtQuick 2.1
import org.kde.plasma.components 2.0 as PlasmaComponents import QtQuick.Controls 1.3
import org.kde.plasma.extras 2.0 as PlasmaExtras import org.kde.kirigami 1.0 as Kirigami
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.mobilecomponents 0.2 as MobileComponents
import org.kde.kquickcontrolsaddons 2.0 import org.kde.kquickcontrolsaddons 2.0
import org.kde.okular 2.0 as Okular import org.kde.okular 2.0 as Okular
MobileComponents.OverlayDrawer { Kirigami.OverlayDrawer {
edge: Qt.RightEdge edge: Qt.RightEdge
contentItem: Item { contentItem: Item {
id: browserFrame id: browserFrame
implicitWidth: MobileComponents.Units.gridUnit * 25 implicitWidth: Kirigami.Units.gridUnit * 25
implicitHeight: implicitWidth implicitHeight: implicitWidth
state: "Hidden" state: "Hidden"
PlasmaComponents.ToolBar { StackView {
id: mainToolBar
height: units.gridUnit * 2
y: pageStack.currentPage.contentY <= 0 ? 0 : -height
transform: Translate {
y: Math.max(0, -pageStack.currentPage.contentY)
}
tools: pageStack.currentPage.tools
Behavior on y {
NumberAnimation {
duration: 250
}
}
anchors {
left: parent.left
right: parent.right
}
}
PlasmaComponents.PageStack {
id: pageStack id: pageStack
anchors { anchors {
left: parent.left left: parent.left
top: mainToolBar.bottom top: parent.top
right: parent.right right: parent.right
bottom: tabsToolbar.top bottom: tabsToolbar.top
} }
clip: true clip: true
toolBar: mainToolBar
} }
Connections { Connections {
id: scrollConnection id: scrollConnection
property int oldContentY:0 property int oldContentY:0
target: pageStack.currentPage target: pageStack.currentItem
onContentYChanged: { onContentYChanged: {
scrollConnection.oldContentY = pageStack.currentPage.contentY scrollConnection.oldContentY = pageStack.currentItem.contentY
} }
} }
PlasmaComponents.ToolBar { ToolBar {
id: tabsToolbar id: tabsToolbar
y: parent.height - tabsToolbar.height*5
height: mainTabBar.height height: mainTabBar.height
anchors { anchors {
top: undefined top: undefined
@ -87,45 +62,52 @@ MobileComponents.OverlayDrawer {
left: parent.left left: parent.left
right: parent.right right: parent.right
} }
tools: Item { Component.onCompleted: thumbnailsButton.checked = true;
Item {
width: parent.width width: parent.width
height: childrenRect.height height: childrenRect.height
PlasmaComponents.TabBar { Row {
id: mainTabBar id: mainTabBar
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
width: Math.min(parent.width, implicitWidth) width: Math.min(parent.width, implicitWidth)
tabPosition: Qt.BottomEdge ExclusiveGroup { id: tabPositionGroup }
PlasmaComponents.TabButton { ToolButton {
id: thumbnailsButton id: thumbnailsButton
text: tabsToolbar.width > units.gridUnit * 30 ? i18n("Thumbnails") : "" text: tabsToolbar.width > units.gridUnit * 30 ? i18n("Thumbnails") : ""
iconSource: "view-preview" iconName: "view-preview"
checkable: true
onCheckedChanged: { onCheckedChanged: {
if (checked) { if (checked) {
pageStack.replace(Qt.createComponent("Thumbnails.qml")) pageStack.replace(Qt.createComponent("Thumbnails.qml"))
} }
} }
exclusiveGroup: tabPositionGroup
} }
PlasmaComponents.TabButton { ToolButton {
id: tocButton id: tocButton
enabled: documentItem.tableOfContents.count > 0 enabled: documentItem.tableOfContents.count > 0
text: tabsToolbar.width > units.gridUnit * 30 ? i18n("Table of contents") : "" text: tabsToolbar.width > units.gridUnit * 30 ? i18n("Table of contents") : ""
iconSource: "view-table-of-contents-ltr" iconName: "view-table-of-contents-ltr"
checkable: true
onCheckedChanged: { onCheckedChanged: {
if (checked) { if (checked) {
pageStack.replace(Qt.createComponent("TableOfContents.qml")) pageStack.replace(Qt.createComponent("TableOfContents.qml"))
} }
} }
exclusiveGroup: tabPositionGroup
} }
PlasmaComponents.TabButton { ToolButton {
id: bookmarksButton id: bookmarksButton
enabled: documentItem.bookmarkedPages.length > 0 enabled: documentItem.bookmarkedPages.length > 0
text: tabsToolbar.width > units.gridUnit * 30 ? i18n("Bookmarks") : "" text: tabsToolbar.width > units.gridUnit * 30 ? i18n("Bookmarks") : ""
iconSource: "bookmarks-organize" iconName: "bookmarks-organize"
checkable: true
onCheckedChanged: { onCheckedChanged: {
if (checked) { if (checked) {
pageStack.replace(Qt.createComponent("Bookmarks.qml")) pageStack.replace(Qt.createComponent("Bookmarks.qml"))
} }
} }
exclusiveGroup: tabPositionGroup
} }
} }
} }

@ -18,28 +18,34 @@
*/ */
import QtQuick 2.1 import QtQuick 2.1
import org.kde.plasma.components 2.0 as PlasmaComponents import QtQuick.Controls 1.3
import org.kde.plasma.core 2.0 as PlasmaCore import org.kde.kirigami 1.0 as Kirigami
import org.kde.plasma.extras 2.0 as PlasmaExtras
import org.kde.plasma.mobilecomponents 0.2 as MobileComponents
PlasmaComponents.Page { Kirigami.Page {
id: root id: root
leftPadding: 0
topPadding: 0
rightPadding: 0
bottomPadding: 0
property alias contentY: flickable.contentY property alias contentY: flickable.contentY
property alias contentHeight: flickable.contentHeight property alias contentHeight: flickable.contentHeight
tools: Item { ToolBar {
id: toolBarContent id: toolBarContent
width: root.width width: root.width
height: searchField.height height: searchField.height
PlasmaComponents.TextField { TextField {
id: searchField id: searchField
clearButtonShown: true
anchors.centerIn: parent anchors.centerIn: parent
} }
} }
PlasmaExtras.ScrollArea { ScrollView {
anchors.fill: parent anchors {
left: parent.left
top: toolBarContent.bottom
right: parent.right
bottom: parent.bottom
}
Flickable { Flickable {
id: flickable id: flickable

@ -18,22 +18,20 @@
*/ */
import QtQuick 2.1 import QtQuick 2.1
import org.kde.plasma.components 2.0 as PlasmaComponents import QtQuick.Controls 1.3
import org.kde.plasma.core 2.0 as PlasmaCore import org.kde.kirigami 1.0 as Kirigami
import org.kde.plasma.mobilecomponents 0.2 as MobileComponents
ThumbnailsBase { ThumbnailsBase {
id: root id: root
model: documentItem.matchingPages model: documentItem.matchingPages
anchors.fill: parent anchors.fill: parent
tools: Item { ToolBar {
id: toolBarContent id: toolBarContent
width: root.width width: root.width
height: searchField.height height: searchField.height
PlasmaComponents.TextField { TextField {
id: searchField id: searchField
clearButtonShown: true
enabled: documentItem.supportsSearch enabled: documentItem.supportsSearch
anchors.centerIn: parent anchors.centerIn: parent
onTextChanged: { onTextChanged: {
@ -45,7 +43,7 @@ ThumbnailsBase {
} }
} }
} }
PlasmaComponents.Label { Kirigami.Label {
anchors { anchors {
left: searchField.right left: searchField.right
verticalCenter: searchField.verticalCenter verticalCenter: searchField.verticalCenter

@ -18,14 +18,16 @@
*/ */
import QtQuick 2.1 import QtQuick 2.1
import QtQuick.Controls 1.3
import org.kde.okular 2.0 as Okular import org.kde.okular 2.0 as Okular
import org.kde.plasma.components 2.0 as PlasmaComponents import org.kde.kirigami 1.0 as Kirigami
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.extras 2.0 as PlasmaExtras
import org.kde.plasma.mobilecomponents 0.2 as MobileComponents
PlasmaComponents.Page { Kirigami.Page {
id: root id: root
leftPadding: 0
topPadding: 0
rightPadding: 0
bottomPadding: 0
property alias contentY: resultsGrid.contentY property alias contentY: resultsGrid.contentY
property alias contentHeight: resultsGrid.contentHeight property alias contentHeight: resultsGrid.contentHeight
property alias model: resultsGrid.model property alias model: resultsGrid.model
@ -34,8 +36,11 @@ PlasmaComponents.Page {
anchors.fill: parent anchors.fill: parent
PlasmaExtras.ScrollArea { ScrollView {
anchors.fill: parent anchors {
fill: parent
topMargin: Kirigami.Units.gridUnit * 2
}
GridView { GridView {
id: resultsGrid id: resultsGrid
@ -54,20 +59,18 @@ PlasmaComponents.Page {
resultsGrid.currentIndex = index resultsGrid.currentIndex = index
} }
} }
PlasmaCore.FrameSvgItem { Rectangle {
anchors.centerIn: parent anchors.centerIn: parent
imagePath: "widgets/media-delegate" width: thumbnail.width + Kirigami.Units.smallSpacing * 2
prefix: "picture"
width: thumbnail.width + margins.left + margins.right
//FIXME: why bindings with thumbnail.height doesn't work? //FIXME: why bindings with thumbnail.height doesn't work?
height: thumbnail.height + margins.top + margins.bottom height: thumbnail.height + Kirigami.Units.smallSpacing * 2
Okular.ThumbnailItem { Okular.ThumbnailItem {
id: thumbnail id: thumbnail
x: parent.margins.left x: Kirigami.Units.smallSpacing
y: parent.margins.top y: Kirigami.Units.smallSpacing
document: documentItem document: documentItem
pageNumber: modelData pageNumber: modelData
width: delegate.width - parent.margins.left + parent.margins.right - units.gridUnit width: delegate.width - Kirigami.Units.smallSpacing * 2 - units.gridUnit
//value repeated to avoid binding loops //value repeated to avoid binding loops
height: Math.round(width / (implicitWidth/implicitHeight)) height: Math.round(width / (implicitWidth/implicitHeight))
Rectangle { Rectangle {
@ -80,7 +83,7 @@ PlasmaComponents.Page {
bottom: parent.bottom bottom: parent.bottom
right: parent.right right: parent.right
} }
PlasmaComponents.Label { Kirigami.Label {
text: modelData + 1 text: modelData + 1
} }
} }
@ -97,7 +100,10 @@ PlasmaComponents.Page {
} }
} }
} }
highlight: PlasmaComponents.Highlight {} highlight: Rectangle {
color: Kirigami.Theme.highlightColor
opacity: 0.4
}
} }
} }
} }

@ -18,9 +18,8 @@
*/ */
import QtQuick 2.1 import QtQuick 2.1
import org.kde.plasma.components 2.0 as PlasmaComponents
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.kquickcontrolsaddons 2.0 import org.kde.kquickcontrolsaddons 2.0
import org.kde.kirigami 1.0 as Kirigami
Column { Column {
id: treeDelegate id: treeDelegate
@ -57,7 +56,7 @@ Column {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
x: units.largeSpacing x: units.largeSpacing
} }
PlasmaComponents.Label { Kirigami.Label {
id: label id: label
text: display text: display
verticalAlignment: Text.AlignBottom verticalAlignment: Text.AlignBottom
@ -74,7 +73,7 @@ Column {
right: pageNumber.left right: pageNumber.left
} }
} }
PlasmaComponents.Label { Kirigami.Label {
id: pageNumber id: pageNumber
text: pageLabel ? pageLabel : page text: pageLabel ? pageLabel : page
anchors.right: parent.right anchors.right: parent.right

@ -18,13 +18,11 @@
*/ */
import QtQuick 2.1 import QtQuick 2.1
import org.kde.okular 2.0 as Okular
import QtQuick.Controls 1.3 import QtQuick.Controls 1.3
import org.kde.plasma.extras 2.0 as PlasmaExtras import org.kde.okular 2.0 as Okular
import org.kde.plasma.components 2.0 as PlasmaComponents import org.kde.kirigami 1.0 as Kirigami
import org.kde.plasma.mobilecomponents 0.2 as MobileComponents
MobileComponents.ApplicationWindow { Kirigami.AbstractApplicationWindow {
id: fileBrowserRoot id: fileBrowserRoot
objectName: "fileBrowserRoot" objectName: "fileBrowserRoot"
visible: true visible: true
@ -35,17 +33,16 @@ MobileComponents.ApplicationWindow {
uri: documentItem.path uri: documentItem.path
}*/ }*/
globalDrawer: MobileComponents.OverlayDrawer { header: null
globalDrawer: Kirigami.OverlayDrawer {
edge: Qt.LeftEdge edge: Qt.LeftEdge
contentItem: Documents { contentItem: Documents {
implicitWidth: units.gridUnit * 20 implicitWidth: units.gridUnit * 20
} }
} }
contextDrawer: OkularDrawer {} contextDrawer: OkularDrawer {}
actionButton.iconSource: "bookmarks-organize"
actionButton.checkable: true ProgressBar {
actionButton.onCheckedChanged: pageArea.page.bookmarked = actionButton.checked;
PlasmaComponents.ProgressBar {
id: bar id: bar
z: 99 z: 99
anchors { anchors {
@ -64,21 +61,10 @@ MobileComponents.ApplicationWindow {
} }
} }
Okular.DocumentView { MainView {
id: pageArea id: pageArea
document: documentItem
anchors.fill: parent anchors.fill: parent
document: documentItem
onPageChanged: {
bookmarkConnection.target = page
actionButton.checked = page.bookmarked
}
onClicked: actionButton.toggleVisibility();
}
Connections {
id: bookmarkConnection
target: pageArea.page
onBookmarkedChanged: actionButton.checked = page.bookmarked
} }
//FIXME: this is due to global vars being binded after the parse is done, do the 2 steps parsing //FIXME: this is due to global vars being binded after the parse is done, do the 2 steps parsing

Loading…
Cancel
Save