alecs/plasma-framework
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

App gets ToolBar, gallery app uses it now

Browse Source 
- 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.
This commit is contained in:
Sebastian Kügler 2012-03-20 01:40:25 +01:00
parent 5254662cc4
commit 2d864c5992
11 changed files with 98 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
declarativeimports/plasmaextracomponents/qml/App.qml
View File

@ -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;

53
declarativeimports/test/AppTest.qml
View File

@ -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; }
}

6
declarativeimports/test/gallery/Busy.qml
View File

@ -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

7
declarativeimports/test/gallery/Buttons.qml
View File

@ -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

6
declarativeimports/test/gallery/CheckableButtons.qml
View File

@ -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

5
declarativeimports/test/gallery/Extras.qml
View File

@ -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 {

54
declarativeimports/test/gallery/Gallery.qml
View File

@ -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
}

6
declarativeimports/test/gallery/Scrollers.qml
View File

@ -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

6
declarativeimports/test/gallery/Sliders.qml
View File

@ -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

13
declarativeimports/test/gallery/TextEditing.qml
View File

@ -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."
}

6
declarativeimports/test/gallery/Texts.qml
View File

@ -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