From 2d864c59924745a06e35956a946299953f87e607 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20K=C3=BCgler?= Date: Tue, 20 Mar 2012 01:40:25 +0100 Subject: [PATCH] App gets ToolBar, gallery app uses it now - the Gallery app is now derived from App, so we can test it. - App now has a toolbar, similar to PageStack. Toolbar is not yet auto-hidden. --- .../plasmaextracomponents/qml/App.qml | 29 +++++++--- declarativeimports/test/AppTest.qml | 53 ++---------------- declarativeimports/test/gallery/Busy.qml | 6 ++- declarativeimports/test/gallery/Buttons.qml | 7 ++- .../test/gallery/CheckableButtons.qml | 6 ++- declarativeimports/test/gallery/Extras.qml | 5 +- declarativeimports/test/gallery/Gallery.qml | 54 +++++++++---------- declarativeimports/test/gallery/Scrollers.qml | 6 ++- declarativeimports/test/gallery/Sliders.qml | 6 ++- .../test/gallery/TextEditing.qml | 13 +++-- declarativeimports/test/gallery/Texts.qml | 6 ++- 11 files changed, 98 insertions(+), 93 deletions(-) diff --git a/declarativeimports/plasmaextracomponents/qml/App.qml b/declarativeimports/plasmaextracomponents/qml/App.qml index cce119ec0..b64e9cde1 100644 --- a/declarativeimports/plasmaextracomponents/qml/App.qml +++ b/declarativeimports/plasmaextracomponents/qml/App.qml @@ -49,23 +49,33 @@ Item { id: app property alias navigation: navigationItem.children property alias content: contentItem.children + property alias tools: topBar.tools + + property alias contentArea: contentBackground property int space: 12 property int navigationWidth: 340 - property int contentWidth: app.width - navigationWidth + property int contentWidth: app.width - navigationWidth - space*2 anchors.fill: parent PlasmaCore.Theme { id: theme } + PlasmaComponents.ToolBar { + id: topBar + height: 48 + anchors { top: parent.top; left: parent.left; right: parent.right; } + tools: PlasmaComponents.ToolBarLayout {} + } + Image { id: contentBackground - anchors { left: navigationBackground.right; right: parent.right; top: parent.top; bottom: parent.bottom; } + anchors { left: navigationBackground.right; right: parent.right; top: topBar.bottom; bottom: parent.bottom; rightMargin: space*2 } source: "image://appbackgrounds/standard" fillMode: Image.Tile asynchronous: true - width: childrenRect.width + //width: contentWidth Item { id: contentItem - width: app.width - navigationWidth - space*2 + width: contentWidth - 100 height: app.height anchors { left: parent.left; leftMargin: space; rightMargin: space; top: parent.top; bottom: parent.bottom; right: parent.right; } } @@ -73,7 +83,7 @@ Item { } Image { id: navigationBackground - anchors { left: parent.left; top: parent.top; bottom: parent.bottom; } + anchors { left: parent.left; top: topBar.bottom; bottom: parent.bottom; } source: "image://appbackgrounds/contextarea" fillMode: Image.Tile asynchronous: true @@ -89,12 +99,19 @@ Item { fillMode: Image.Tile anchors { left: navigationBackground.right - top: parent.top + top: topBar.bottom bottom: parent.bottom leftMargin: -1 } } + onContentChanged: { + print("content changed to "); + //content.parent = contentBackground; + //contentItem.width = contentWidth; + //contentItem.anchors.rightMargin = 100 + } + onNavigationWidthChanged: { navigationBackground.width = navigationWidth; navigationItem.width = navigationWidth; diff --git a/declarativeimports/test/AppTest.qml b/declarativeimports/test/AppTest.qml index 81cb9f40b..542253bf1 100644 --- a/declarativeimports/test/AppTest.qml +++ b/declarativeimports/test/AppTest.qml @@ -70,57 +70,12 @@ PlasmaExtras.App { //Rectangle { color: "blue"; opacity: 0.3; anchors.fill: parent; } } - Item { + Loader { id: contentItem + source: "gallery/Extras.qml" width: app.width - navigationWidth - space*2 - //anchors.rightMargin: space*2 - - Column { - width: contentItem.width - id: contentColumn - anchors.fill: contentItem - spacing: 8 - PlasmaExtras.Title { - text: "Content Section" - elide: Text.ElideMiddle - //anchors { top: parent.top; left: parent.left; topMargin: 48; } - } - PlasmaExtras.Heading { - text: "Heading " + level - level: 1 - } - PlasmaComponents.Label { - width: contentColumn.width - wrapMode: Text.WordWrap - text: "Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten." - } - PlasmaExtras.Heading { - text: "Heading " + level - level: 2 - } - PlasmaExtras.Heading { - text: "Heading " + level - level: 3 - } - PlasmaComponents.Label { - wrapMode: Text.WordWrap - width: contentColumn.width - text: "Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten." - } - PlasmaExtras.Heading { - text: "Heading " + level - level: 4 - } - PlasmaExtras.Heading { - text: "Heading " + level - level: 5 - } - PlasmaComponents.Label { - wrapMode: Text.WordWrap - width: contentColumn.width - text: "Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten." - } - } + parent: contentArea + anchors.margins: space*2 Rectangle { color: "green"; opacity: 0.8; anchors.fill: contentItem; } } diff --git a/declarativeimports/test/gallery/Busy.qml b/declarativeimports/test/gallery/Busy.qml index 0f6d6ad7f..acf20fe98 100644 --- a/declarativeimports/test/gallery/Busy.qml +++ b/declarativeimports/test/gallery/Busy.qml @@ -24,7 +24,8 @@ PlasmaComponents.Page { height: childrenRect.height property int implicitHeight: childrenRect.height - tools: PlasmaComponents.ToolBarLayout { + PlasmaComponents.ToolBarLayout { + id: toolbarlayout spacing: 5 PlasmaComponents.ToolButton { text: "ToolButton" @@ -35,6 +36,9 @@ PlasmaComponents.Page { PlasmaComponents.TextField { text: "Busy widgets" } + Component.onCompleted: { + app.tools = toolbarlayout + } } Column { spacing: 20 diff --git a/declarativeimports/test/gallery/Buttons.qml b/declarativeimports/test/gallery/Buttons.qml index 87213ee24..176b86207 100644 --- a/declarativeimports/test/gallery/Buttons.qml +++ b/declarativeimports/test/gallery/Buttons.qml @@ -22,7 +22,9 @@ import org.kde.plasma.components 0.1 as PlasmaComponents PlasmaComponents.Page { height: childrenRect.height - tools: PlasmaComponents.ToolBarLayout { + + PlasmaComponents.ToolBarLayout { + id: toolbarlayout spacing: 5 PlasmaComponents.Button { text: "Button" @@ -32,6 +34,9 @@ PlasmaComponents.Page { } PlasmaComponents.TextField {} } + Component.onCompleted: { + app.tools = toolbarlayout + } Column { spacing: 20 diff --git a/declarativeimports/test/gallery/CheckableButtons.qml b/declarativeimports/test/gallery/CheckableButtons.qml index e2e263779..0b3cd5e0f 100644 --- a/declarativeimports/test/gallery/CheckableButtons.qml +++ b/declarativeimports/test/gallery/CheckableButtons.qml @@ -25,7 +25,8 @@ PlasmaComponents.Page { height: childrenRect.height property int implicitHeight: childrenRect.height - tools: PlasmaComponents.ToolBarLayout { + PlasmaComponents.ToolBarLayout { + id: toolbarlayout spacing: 5 PlasmaComponents.ToolButton { text: "ToolButton" @@ -36,6 +37,9 @@ PlasmaComponents.Page { PlasmaComponents.TextField { text: "hello" } + Component.onCompleted: { + app.tools = toolbarlayout + } } Column { spacing: 20 diff --git a/declarativeimports/test/gallery/Extras.qml b/declarativeimports/test/gallery/Extras.qml index a34e4a7cf..96edbb103 100644 --- a/declarativeimports/test/gallery/Extras.qml +++ b/declarativeimports/test/gallery/Extras.qml @@ -22,7 +22,9 @@ import org.kde.plasma.components 0.1 import org.kde.plasma.extras 0.1 as PlasmaExtras Column { - anchors.fill: parent + //anchors.fill: parent + anchors.margins: space + width: 600 spacing: 12 PlasmaExtras.Title { text: "PlasmaExtras" @@ -32,6 +34,7 @@ Column { text: "Additional Plasma Quick components for Apps" } PlasmaExtras.Paragraph { + //width: contentWidth text: "Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten." } PlasmaExtras.Heading { diff --git a/declarativeimports/test/gallery/Gallery.qml b/declarativeimports/test/gallery/Gallery.qml index 8b4a87899..aae8992f9 100644 --- a/declarativeimports/test/gallery/Gallery.qml +++ b/declarativeimports/test/gallery/Gallery.qml @@ -19,29 +19,27 @@ import QtQuick 1.1 import org.kde.plasma.components 0.1 +import org.kde.plasma.extras 0.1 as PlasmaExtras -Rectangle { +PlasmaExtras.App { + id: app width: 1000 height: 800 - color: "lightgrey" - ToolBar { - id: toolBar - z: 10 - anchors { - top: parent.top - left: parent.left - right: parent.right - } - } + property string formFactor: "tablet" + navigation: pageSelector + content: page ListView { id: pageSelector width: 200 anchors { - top: toolBar.bottom + fill: parent + top: content.top bottom: parent.bottom + left: parent.left + right: parent.right } model: ListModel { id: pagesModel @@ -93,28 +91,30 @@ Rectangle { } } - Flickable { id: page clip: true + width: app.contentWidth - anchors { - top: toolBar.bottom - left: pageSelector.right - right: verticalScrollBar.left - bottom: horizontalScrollBar.top - leftMargin: 5 - rightMargin: 5 - topMargin: 5 - bottomMargin: 5 - } - contentWidth: pageStack.currentPage.implicitWidth +// anchors { +// top: toolBar.bottom +// left: pageSelector.right +// right: verticalScrollBar.left +// bottom: horizontalScrollBar.top +// leftMargin: 5 +// rightMargin: 5 +// topMargin: 5 +// bottomMargin: 5 +// } + anchors.fill: parent + contentWidth: app.contentWidth contentHeight: pageStack.currentPage.implicitHeight PageStack { id: pageStack - toolBar: toolBar - width: page.width + //toolBar: app.toolBar + //width: page.width + width: contentWidth height: currentPage.implicitHeight initialPage: Qt.createComponent("Buttons.qml") } @@ -143,7 +143,7 @@ Rectangle { orientation: Qt.Vertical flickableItem: page anchors { - top: toolBar.bottom + top: content.top right: parent.right bottom: horizontalScrollBar.top } diff --git a/declarativeimports/test/gallery/Scrollers.qml b/declarativeimports/test/gallery/Scrollers.qml index 42b7e1644..435cc9edb 100644 --- a/declarativeimports/test/gallery/Scrollers.qml +++ b/declarativeimports/test/gallery/Scrollers.qml @@ -24,7 +24,8 @@ PlasmaComponents.Page { height: childrenRect.height property int implicitHeight: childrenRect.height - tools: PlasmaComponents.ToolBarLayout { + PlasmaComponents.ToolBarLayout { + id: toolbarlayout spacing: 5 PlasmaComponents.ToolButton { text: "ToolButton" @@ -38,6 +39,9 @@ PlasmaComponents.Page { PlasmaComponents.TextField { text: "hello" } + Component.onCompleted: { + app.tools = toolbarlayout + } } Column { spacing: 20 diff --git a/declarativeimports/test/gallery/Sliders.qml b/declarativeimports/test/gallery/Sliders.qml index 266792738..833f9ce42 100644 --- a/declarativeimports/test/gallery/Sliders.qml +++ b/declarativeimports/test/gallery/Sliders.qml @@ -24,7 +24,8 @@ PlasmaComponents.Page { height: childrenRect.height property int implicitHeight: childrenRect.height - tools: PlasmaComponents.ToolBarLayout { + PlasmaComponents.ToolBarLayout { + id: toolbarlayout spacing: 5 PlasmaComponents.ToolButton { text: "ToolButton" @@ -36,6 +37,9 @@ PlasmaComponents.Page { PlasmaComponents.TextField { text: "hello" } + Component.onCompleted: { + app.tools = toolbarlayout + } } Column { spacing: 20 diff --git a/declarativeimports/test/gallery/TextEditing.qml b/declarativeimports/test/gallery/TextEditing.qml index edc7f15c5..388a2a0f5 100644 --- a/declarativeimports/test/gallery/TextEditing.qml +++ b/declarativeimports/test/gallery/TextEditing.qml @@ -22,10 +22,12 @@ import org.kde.plasma.components 0.1 as PlasmaComponents PlasmaComponents.Page { height: editThing.height - property int implicitHeight: childrenRect.height + width: 500 + //property int implicitHeight: childrenRect.height //scale: 1.25 - tools: PlasmaComponents.ToolBarLayout { + PlasmaComponents.ToolBarLayout { + id: toolbarlayout spacing: 5 PlasmaComponents.Label { text: "Text label:" @@ -39,6 +41,9 @@ PlasmaComponents.Page { PlasmaComponents.TextField { text: "Text fields page" } + Component.onCompleted: { + app.tools = toolbarlayout + } } MouseArea { anchors.fill: editThing @@ -57,11 +62,11 @@ PlasmaComponents.Page { PlasmaComponents.TextField { placeholderText: "Try copy & paste" text: "The cat bites into the socks" - width: parent.width + width: editThing.width clearButtonShown: true } PlasmaComponents.TextArea { - width: parent.width + width: editThing.width height: 200 placeholderText: "Touch copy & paste not implemented yet." } diff --git a/declarativeimports/test/gallery/Texts.qml b/declarativeimports/test/gallery/Texts.qml index ed4d219e2..951e11aec 100644 --- a/declarativeimports/test/gallery/Texts.qml +++ b/declarativeimports/test/gallery/Texts.qml @@ -24,7 +24,8 @@ PlasmaComponents.Page { height: childrenRect.height property int implicitHeight: childrenRect.height - tools: PlasmaComponents.ToolBarLayout { + PlasmaComponents.ToolBarLayout { + id: toolbarlayout spacing: 5 PlasmaComponents.Label { text: "Text label:" @@ -38,6 +39,9 @@ PlasmaComponents.Page { PlasmaComponents.TextField { text: "Text fields page" } + Component.onCompleted: { + app.tools = toolbarlayout + } } Column { spacing: 30