More worky-worky

- alignment & layout of content items, depending on width, still pretty
  rough, needs a state machine
This commit is contained in:
Sebastian Kügler 2012-03-16 04:48:48 +01:00
parent 46e2dad148
commit 3b3481292b

View File

@ -19,31 +19,29 @@
/**Documented API /**Documented API
Inherits: Inherits:
Label Item
Imports: Imports:
QtQuick 1.1 QtQuick 1.1
org.kde.plasma.components org.kde.plasma.extras
Description: Description:
This is a title label which uses the plasma theme. This is a container for Apps. Navigation and Content area layout can
The characteristics of the text will be automatically set vary depending on the available size.
according to the plasma theme. Use this components for titles
in your UI, for example page or section titles.
Properties: Properties:
string text: Item navigation: Navigation or Context Area.
The most important property is "text", which applies to the text property of Label Item content: The "main view"
For the other ones see Plasma Component's Label or QML primitive Text element
Methods: Methods:
See Plasma Component's Label and primitive QML Text element
Signals: Signals:
See Plasma Component's Label and primitive QML Text element
**/ **/
import QtQuick 1.1 import QtQuick 1.1
import org.kde.plasma.core 0.1 as PlasmaCore
import org.kde.plasma.components 0.1 as PlasmaComponents import org.kde.plasma.components 0.1 as PlasmaComponents
//import org.kde.plasma.extras 0.1 as PlasmaExtras //import org.kde.plasma.extras 0.1 as PlasmaExtras
@ -56,19 +54,21 @@ Item {
property int contentWidth: app.width - navigationWidth property int contentWidth: app.width - navigationWidth
anchors.fill: parent anchors.fill: parent
PlasmaCore.Theme { id: theme }
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: parent.top; bottom: parent.bottom; }
source: "image://appbackgrounds/standard" source: "image://appbackgrounds/standard"
fillMode: Image.Tile fillMode: Image.Tile
asynchronous: true asynchronous: true
width: childrenRect.width
Item { Item {
id: contentItem id: contentItem
width: app.width - navigationWidth width: app.width - navigationWidth - space*2
height: app.height height: app.height
anchors { left: parent.left; leftMargin: 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; }
} }
//onChildrenRectChanged: root.width = childrenRect.width + contentBackground.childrenRect.width
} }
Image { Image {
@ -82,12 +82,7 @@ Item {
Item { Item {
id: navigationItem id: navigationItem
anchors.fill: parent anchors.fill: parent
//anchors { left: parent.left; leftMargin: space; top: parent.top; bottom: parent.bottom; right: parent.right; }
} }
// onChildrenRectChanged: {
// width = childrenRect.width
// print(" set navwidth to: " + width);
// }
} }
Image { Image {
source: "image://appbackgrounds/shadow-right" source: "image://appbackgrounds/shadow-right"
@ -99,18 +94,9 @@ Item {
leftMargin: -1 leftMargin: -1
} }
} }
Component.onCompleted: {
//setWidth(340);
}
onNavigationWidthChanged: { onNavigationWidthChanged: {
navigationBackground.width = navigationWidth; navigationBackground.width = navigationWidth;
navigationItem.width = navigationWidth; navigationItem.width = navigationWidth;
} }
// function setNavigationWidth(w) {
// navigationItem.width = w;
// navigationWidth = w;
// }
} }