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.
This commit is contained in:
parent
5254662cc4
commit
2d864c5992
@ -49,23 +49,33 @@ Item {
|
|||||||
id: app
|
id: app
|
||||||
property alias navigation: navigationItem.children
|
property alias navigation: navigationItem.children
|
||||||
property alias content: contentItem.children
|
property alias content: contentItem.children
|
||||||
|
property alias tools: topBar.tools
|
||||||
|
|
||||||
|
property alias contentArea: contentBackground
|
||||||
property int space: 12
|
property int space: 12
|
||||||
property int navigationWidth: 340
|
property int navigationWidth: 340
|
||||||
property int contentWidth: app.width - navigationWidth
|
property int contentWidth: app.width - navigationWidth - space*2
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
|
|
||||||
PlasmaCore.Theme { id: theme }
|
PlasmaCore.Theme { id: theme }
|
||||||
|
|
||||||
|
PlasmaComponents.ToolBar {
|
||||||
|
id: topBar
|
||||||
|
height: 48
|
||||||
|
anchors { top: parent.top; left: parent.left; right: parent.right; }
|
||||||
|
tools: PlasmaComponents.ToolBarLayout {}
|
||||||
|
}
|
||||||
|
|
||||||
Image {
|
Image {
|
||||||
id: contentBackground
|
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"
|
source: "image://appbackgrounds/standard"
|
||||||
fillMode: Image.Tile
|
fillMode: Image.Tile
|
||||||
asynchronous: true
|
asynchronous: true
|
||||||
width: childrenRect.width
|
//width: contentWidth
|
||||||
Item {
|
Item {
|
||||||
id: contentItem
|
id: contentItem
|
||||||
width: app.width - navigationWidth - space*2
|
width: contentWidth - 100
|
||||||
height: app.height
|
height: app.height
|
||||||
anchors { left: parent.left; leftMargin: space; rightMargin: space; top: parent.top; bottom: parent.bottom; right: parent.right; }
|
anchors { left: parent.left; leftMargin: space; rightMargin: space; top: parent.top; bottom: parent.bottom; right: parent.right; }
|
||||||
}
|
}
|
||||||
@ -73,7 +83,7 @@ Item {
|
|||||||
}
|
}
|
||||||
Image {
|
Image {
|
||||||
id: navigationBackground
|
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"
|
source: "image://appbackgrounds/contextarea"
|
||||||
fillMode: Image.Tile
|
fillMode: Image.Tile
|
||||||
asynchronous: true
|
asynchronous: true
|
||||||
@ -89,12 +99,19 @@ Item {
|
|||||||
fillMode: Image.Tile
|
fillMode: Image.Tile
|
||||||
anchors {
|
anchors {
|
||||||
left: navigationBackground.right
|
left: navigationBackground.right
|
||||||
top: parent.top
|
top: topBar.bottom
|
||||||
bottom: parent.bottom
|
bottom: parent.bottom
|
||||||
leftMargin: -1
|
leftMargin: -1
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onContentChanged: {
|
||||||
|
print("content changed to ");
|
||||||
|
//content.parent = contentBackground;
|
||||||
|
//contentItem.width = contentWidth;
|
||||||
|
//contentItem.anchors.rightMargin = 100
|
||||||
|
}
|
||||||
|
|
||||||
onNavigationWidthChanged: {
|
onNavigationWidthChanged: {
|
||||||
navigationBackground.width = navigationWidth;
|
navigationBackground.width = navigationWidth;
|
||||||
navigationItem.width = navigationWidth;
|
navigationItem.width = navigationWidth;
|
||||||
|
@ -70,57 +70,12 @@ PlasmaExtras.App {
|
|||||||
//Rectangle { color: "blue"; opacity: 0.3; anchors.fill: parent; }
|
//Rectangle { color: "blue"; opacity: 0.3; anchors.fill: parent; }
|
||||||
}
|
}
|
||||||
|
|
||||||
Item {
|
Loader {
|
||||||
id: contentItem
|
id: contentItem
|
||||||
|
source: "gallery/Extras.qml"
|
||||||
width: app.width - navigationWidth - space*2
|
width: app.width - navigationWidth - space*2
|
||||||
//anchors.rightMargin: space*2
|
parent: contentArea
|
||||||
|
anchors.margins: 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."
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Rectangle { color: "green"; opacity: 0.8; anchors.fill: contentItem; }
|
Rectangle { color: "green"; opacity: 0.8; anchors.fill: contentItem; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -24,7 +24,8 @@ PlasmaComponents.Page {
|
|||||||
height: childrenRect.height
|
height: childrenRect.height
|
||||||
property int implicitHeight: childrenRect.height
|
property int implicitHeight: childrenRect.height
|
||||||
|
|
||||||
tools: PlasmaComponents.ToolBarLayout {
|
PlasmaComponents.ToolBarLayout {
|
||||||
|
id: toolbarlayout
|
||||||
spacing: 5
|
spacing: 5
|
||||||
PlasmaComponents.ToolButton {
|
PlasmaComponents.ToolButton {
|
||||||
text: "ToolButton"
|
text: "ToolButton"
|
||||||
@ -35,6 +36,9 @@ PlasmaComponents.Page {
|
|||||||
PlasmaComponents.TextField {
|
PlasmaComponents.TextField {
|
||||||
text: "Busy widgets"
|
text: "Busy widgets"
|
||||||
}
|
}
|
||||||
|
Component.onCompleted: {
|
||||||
|
app.tools = toolbarlayout
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Column {
|
Column {
|
||||||
spacing: 20
|
spacing: 20
|
||||||
|
@ -22,7 +22,9 @@ import org.kde.plasma.components 0.1 as PlasmaComponents
|
|||||||
|
|
||||||
PlasmaComponents.Page {
|
PlasmaComponents.Page {
|
||||||
height: childrenRect.height
|
height: childrenRect.height
|
||||||
tools: PlasmaComponents.ToolBarLayout {
|
|
||||||
|
PlasmaComponents.ToolBarLayout {
|
||||||
|
id: toolbarlayout
|
||||||
spacing: 5
|
spacing: 5
|
||||||
PlasmaComponents.Button {
|
PlasmaComponents.Button {
|
||||||
text: "Button"
|
text: "Button"
|
||||||
@ -32,6 +34,9 @@ PlasmaComponents.Page {
|
|||||||
}
|
}
|
||||||
PlasmaComponents.TextField {}
|
PlasmaComponents.TextField {}
|
||||||
}
|
}
|
||||||
|
Component.onCompleted: {
|
||||||
|
app.tools = toolbarlayout
|
||||||
|
}
|
||||||
|
|
||||||
Column {
|
Column {
|
||||||
spacing: 20
|
spacing: 20
|
||||||
|
@ -25,7 +25,8 @@ PlasmaComponents.Page {
|
|||||||
height: childrenRect.height
|
height: childrenRect.height
|
||||||
property int implicitHeight: childrenRect.height
|
property int implicitHeight: childrenRect.height
|
||||||
|
|
||||||
tools: PlasmaComponents.ToolBarLayout {
|
PlasmaComponents.ToolBarLayout {
|
||||||
|
id: toolbarlayout
|
||||||
spacing: 5
|
spacing: 5
|
||||||
PlasmaComponents.ToolButton {
|
PlasmaComponents.ToolButton {
|
||||||
text: "ToolButton"
|
text: "ToolButton"
|
||||||
@ -36,6 +37,9 @@ PlasmaComponents.Page {
|
|||||||
PlasmaComponents.TextField {
|
PlasmaComponents.TextField {
|
||||||
text: "hello"
|
text: "hello"
|
||||||
}
|
}
|
||||||
|
Component.onCompleted: {
|
||||||
|
app.tools = toolbarlayout
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Column {
|
Column {
|
||||||
spacing: 20
|
spacing: 20
|
||||||
|
@ -22,7 +22,9 @@ import org.kde.plasma.components 0.1
|
|||||||
import org.kde.plasma.extras 0.1 as PlasmaExtras
|
import org.kde.plasma.extras 0.1 as PlasmaExtras
|
||||||
|
|
||||||
Column {
|
Column {
|
||||||
anchors.fill: parent
|
//anchors.fill: parent
|
||||||
|
anchors.margins: space
|
||||||
|
width: 600
|
||||||
spacing: 12
|
spacing: 12
|
||||||
PlasmaExtras.Title {
|
PlasmaExtras.Title {
|
||||||
text: "PlasmaExtras"
|
text: "PlasmaExtras"
|
||||||
@ -32,6 +34,7 @@ Column {
|
|||||||
text: "Additional Plasma Quick components for Apps"
|
text: "Additional Plasma Quick components for Apps"
|
||||||
}
|
}
|
||||||
PlasmaExtras.Paragraph {
|
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."
|
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 {
|
PlasmaExtras.Heading {
|
||||||
|
@ -19,29 +19,27 @@
|
|||||||
|
|
||||||
import QtQuick 1.1
|
import QtQuick 1.1
|
||||||
import org.kde.plasma.components 0.1
|
import org.kde.plasma.components 0.1
|
||||||
|
import org.kde.plasma.extras 0.1 as PlasmaExtras
|
||||||
|
|
||||||
Rectangle {
|
PlasmaExtras.App {
|
||||||
|
id: app
|
||||||
width: 1000
|
width: 1000
|
||||||
height: 800
|
height: 800
|
||||||
color: "lightgrey"
|
|
||||||
|
|
||||||
ToolBar {
|
property string formFactor: "tablet"
|
||||||
id: toolBar
|
|
||||||
z: 10
|
|
||||||
anchors {
|
|
||||||
top: parent.top
|
|
||||||
left: parent.left
|
|
||||||
right: parent.right
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
navigation: pageSelector
|
||||||
|
content: page
|
||||||
|
|
||||||
ListView {
|
ListView {
|
||||||
id: pageSelector
|
id: pageSelector
|
||||||
width: 200
|
width: 200
|
||||||
anchors {
|
anchors {
|
||||||
top: toolBar.bottom
|
fill: parent
|
||||||
|
top: content.top
|
||||||
bottom: parent.bottom
|
bottom: parent.bottom
|
||||||
|
left: parent.left
|
||||||
|
right: parent.right
|
||||||
}
|
}
|
||||||
model: ListModel {
|
model: ListModel {
|
||||||
id: pagesModel
|
id: pagesModel
|
||||||
@ -93,28 +91,30 @@ Rectangle {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
Flickable {
|
Flickable {
|
||||||
id: page
|
id: page
|
||||||
clip: true
|
clip: true
|
||||||
|
width: app.contentWidth
|
||||||
|
|
||||||
anchors {
|
// anchors {
|
||||||
top: toolBar.bottom
|
// top: toolBar.bottom
|
||||||
left: pageSelector.right
|
// left: pageSelector.right
|
||||||
right: verticalScrollBar.left
|
// right: verticalScrollBar.left
|
||||||
bottom: horizontalScrollBar.top
|
// bottom: horizontalScrollBar.top
|
||||||
leftMargin: 5
|
// leftMargin: 5
|
||||||
rightMargin: 5
|
// rightMargin: 5
|
||||||
topMargin: 5
|
// topMargin: 5
|
||||||
bottomMargin: 5
|
// bottomMargin: 5
|
||||||
}
|
// }
|
||||||
contentWidth: pageStack.currentPage.implicitWidth
|
anchors.fill: parent
|
||||||
|
contentWidth: app.contentWidth
|
||||||
contentHeight: pageStack.currentPage.implicitHeight
|
contentHeight: pageStack.currentPage.implicitHeight
|
||||||
|
|
||||||
PageStack {
|
PageStack {
|
||||||
id: pageStack
|
id: pageStack
|
||||||
toolBar: toolBar
|
//toolBar: app.toolBar
|
||||||
width: page.width
|
//width: page.width
|
||||||
|
width: contentWidth
|
||||||
height: currentPage.implicitHeight
|
height: currentPage.implicitHeight
|
||||||
initialPage: Qt.createComponent("Buttons.qml")
|
initialPage: Qt.createComponent("Buttons.qml")
|
||||||
}
|
}
|
||||||
@ -143,7 +143,7 @@ Rectangle {
|
|||||||
orientation: Qt.Vertical
|
orientation: Qt.Vertical
|
||||||
flickableItem: page
|
flickableItem: page
|
||||||
anchors {
|
anchors {
|
||||||
top: toolBar.bottom
|
top: content.top
|
||||||
right: parent.right
|
right: parent.right
|
||||||
bottom: horizontalScrollBar.top
|
bottom: horizontalScrollBar.top
|
||||||
}
|
}
|
||||||
|
@ -24,7 +24,8 @@ PlasmaComponents.Page {
|
|||||||
height: childrenRect.height
|
height: childrenRect.height
|
||||||
property int implicitHeight: childrenRect.height
|
property int implicitHeight: childrenRect.height
|
||||||
|
|
||||||
tools: PlasmaComponents.ToolBarLayout {
|
PlasmaComponents.ToolBarLayout {
|
||||||
|
id: toolbarlayout
|
||||||
spacing: 5
|
spacing: 5
|
||||||
PlasmaComponents.ToolButton {
|
PlasmaComponents.ToolButton {
|
||||||
text: "ToolButton"
|
text: "ToolButton"
|
||||||
@ -38,6 +39,9 @@ PlasmaComponents.Page {
|
|||||||
PlasmaComponents.TextField {
|
PlasmaComponents.TextField {
|
||||||
text: "hello"
|
text: "hello"
|
||||||
}
|
}
|
||||||
|
Component.onCompleted: {
|
||||||
|
app.tools = toolbarlayout
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Column {
|
Column {
|
||||||
spacing: 20
|
spacing: 20
|
||||||
|
@ -24,7 +24,8 @@ PlasmaComponents.Page {
|
|||||||
height: childrenRect.height
|
height: childrenRect.height
|
||||||
property int implicitHeight: childrenRect.height
|
property int implicitHeight: childrenRect.height
|
||||||
|
|
||||||
tools: PlasmaComponents.ToolBarLayout {
|
PlasmaComponents.ToolBarLayout {
|
||||||
|
id: toolbarlayout
|
||||||
spacing: 5
|
spacing: 5
|
||||||
PlasmaComponents.ToolButton {
|
PlasmaComponents.ToolButton {
|
||||||
text: "ToolButton"
|
text: "ToolButton"
|
||||||
@ -36,6 +37,9 @@ PlasmaComponents.Page {
|
|||||||
PlasmaComponents.TextField {
|
PlasmaComponents.TextField {
|
||||||
text: "hello"
|
text: "hello"
|
||||||
}
|
}
|
||||||
|
Component.onCompleted: {
|
||||||
|
app.tools = toolbarlayout
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Column {
|
Column {
|
||||||
spacing: 20
|
spacing: 20
|
||||||
|
@ -22,10 +22,12 @@ import org.kde.plasma.components 0.1 as PlasmaComponents
|
|||||||
|
|
||||||
PlasmaComponents.Page {
|
PlasmaComponents.Page {
|
||||||
height: editThing.height
|
height: editThing.height
|
||||||
property int implicitHeight: childrenRect.height
|
width: 500
|
||||||
|
//property int implicitHeight: childrenRect.height
|
||||||
//scale: 1.25
|
//scale: 1.25
|
||||||
|
|
||||||
tools: PlasmaComponents.ToolBarLayout {
|
PlasmaComponents.ToolBarLayout {
|
||||||
|
id: toolbarlayout
|
||||||
spacing: 5
|
spacing: 5
|
||||||
PlasmaComponents.Label {
|
PlasmaComponents.Label {
|
||||||
text: "Text label:"
|
text: "Text label:"
|
||||||
@ -39,6 +41,9 @@ PlasmaComponents.Page {
|
|||||||
PlasmaComponents.TextField {
|
PlasmaComponents.TextField {
|
||||||
text: "Text fields page"
|
text: "Text fields page"
|
||||||
}
|
}
|
||||||
|
Component.onCompleted: {
|
||||||
|
app.tools = toolbarlayout
|
||||||
|
}
|
||||||
}
|
}
|
||||||
MouseArea {
|
MouseArea {
|
||||||
anchors.fill: editThing
|
anchors.fill: editThing
|
||||||
@ -57,11 +62,11 @@ PlasmaComponents.Page {
|
|||||||
PlasmaComponents.TextField {
|
PlasmaComponents.TextField {
|
||||||
placeholderText: "Try copy & paste"
|
placeholderText: "Try copy & paste"
|
||||||
text: "The cat bites into the socks"
|
text: "The cat bites into the socks"
|
||||||
width: parent.width
|
width: editThing.width
|
||||||
clearButtonShown: true
|
clearButtonShown: true
|
||||||
}
|
}
|
||||||
PlasmaComponents.TextArea {
|
PlasmaComponents.TextArea {
|
||||||
width: parent.width
|
width: editThing.width
|
||||||
height: 200
|
height: 200
|
||||||
placeholderText: "Touch copy & paste not implemented yet."
|
placeholderText: "Touch copy & paste not implemented yet."
|
||||||
}
|
}
|
||||||
|
@ -24,7 +24,8 @@ PlasmaComponents.Page {
|
|||||||
height: childrenRect.height
|
height: childrenRect.height
|
||||||
property int implicitHeight: childrenRect.height
|
property int implicitHeight: childrenRect.height
|
||||||
|
|
||||||
tools: PlasmaComponents.ToolBarLayout {
|
PlasmaComponents.ToolBarLayout {
|
||||||
|
id: toolbarlayout
|
||||||
spacing: 5
|
spacing: 5
|
||||||
PlasmaComponents.Label {
|
PlasmaComponents.Label {
|
||||||
text: "Text label:"
|
text: "Text label:"
|
||||||
@ -38,6 +39,9 @@ PlasmaComponents.Page {
|
|||||||
PlasmaComponents.TextField {
|
PlasmaComponents.TextField {
|
||||||
text: "Text fields page"
|
text: "Text fields page"
|
||||||
}
|
}
|
||||||
|
Component.onCompleted: {
|
||||||
|
app.tools = toolbarlayout
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Column {
|
Column {
|
||||||
spacing: 30
|
spacing: 30
|
||||||
|
Loading…
Reference in New Issue
Block a user