Convert phonebrowser.

7 files changed, 447 insertions, 254 deletions

diff --git a/demos/declarative/phonebrowser/content/LikeOMeter.qml b/demos/declarative/phonebrowser/content/LikeOMeter.qml
index 68584a5..31b8195 100644
--- a/demos/declarative/phonebrowser/content/LikeOMeter.qml
+++ b/demos/declarative/phonebrowser/content/LikeOMeter.qml
@@ -1,13 +1,34 @@
-<Item id="Container">
-    <properties>
-        <Property name="rating" value="2"/>
-    </properties>
-
-    <HorizontalLayout>
-        <Star rating="0" onClicked="Container.rating = rating" on="{Container.rating >= 0}"/>
-        <Star rating="1" onClicked="Container.rating = rating" on="{Container.rating >= 1}"/>
-        <Star rating="2" onClicked="Container.rating = rating" on="{Container.rating >= 2}"/>
-        <Star rating="3" onClicked="Container.rating = rating" on="{Container.rating >= 3}"/>
-        <Star rating="4" onClicked="Container.rating = rating" on="{Container.rating >= 4}"/>
-    </HorizontalLayout>
-</Item>
+Item {
+    id: Container
+    properties: Property {
+        name: "rating"
+        value: 2
+    }
+    HorizontalLayout {
+        Star {
+            rating: 0
+            onClicked: { Container.rating = rating }
+            on: Container.rating >= 0
+        }
+        Star {
+            rating: 1
+            onClicked: { Container.rating = rating }
+            on: Container.rating >= 1
+        }
+        Star {
+            rating: 2
+            onClicked: { Container.rating = rating }
+            on: Container.rating >= 2
+        }
+        Star {
+            rating: 3
+            onClicked: { Container.rating = rating }
+            on: Container.rating >= 3
+        }
+        Star {
+            rating: 4
+            onClicked: { Container.rating = rating }
+            on: Container.rating >= 4
+        }
+    }
+}
diff --git a/demos/declarative/phonebrowser/content/MediaButton.qml b/demos/declarative/phonebrowser/content/MediaButton.qml
index 6c672ea..bb2510a 100644
--- a/demos/declarative/phonebrowser/content/MediaButton.qml
+++ b/demos/declarative/phonebrowser/content/MediaButton.qml
@@ -1,21 +1,40 @@
-<Item id="Container">
-    <signals>
-        <Signal name="clicked"/>
-    </signals>
-
-    <properties>
-        <Property name="text"/>
-    </properties>
-
-    <Image id="Image" source="pics/button.png"/>
-    <Image id="Pressed" source="pics/button-pressed.png" opacity="0"/>
-    <MouseRegion id="MouseRegion" anchors.fill="{Image}" onClicked="Container.clicked.emit();"/>
-    <Text font.bold="true" color="white" anchors.centeredIn="{Image}" text="{Container.text}"/>
-    <width>{Image.width}</width>
-
-    <states>
-        <State name="Pressed" when="{MouseRegion.pressed == true}">
-            <SetProperties target="{Pressed}" opacity="1"/>
-        </State>
-    </states>
-</Item>
+Item {
+    id: Container
+    signals: Signal {
+        name: "clicked"
+    }
+    properties: Property {
+        name: "text"
+    }
+    Image {
+        id: Image
+        source: "pics/button.png"
+    }
+    Image {
+        id: Pressed
+        source: "pics/button-pressed.png"
+        opacity: 0
+    }
+    MouseRegion {
+        id: MouseRegion
+        anchors.fill: Image
+        onClicked: { Container.clicked.emit(); }
+    }
+    Text {
+        font.bold: true
+        color: "white"
+        anchors.centeredIn: Image
+        text: Container.text
+    }
+    width: Image.width
+    states: [
+        State {
+            name: "Pressed"
+            when: MouseRegion.pressed == true
+            SetProperties {
+                target: Pressed
+                opacity: 1
+            }
+        }
+    ]
+}
diff --git a/demos/declarative/phonebrowser/content/PhoneInfoContainer.qml b/demos/declarative/phonebrowser/content/PhoneInfoContainer.qml
index 34fd889..da475b1 100644
--- a/demos/declarative/phonebrowser/content/PhoneInfoContainer.qml
+++ b/demos/declarative/phonebrowser/content/PhoneInfoContainer.qml
@@ -1,66 +1,113 @@
-<Flipable id="Container">
-    <properties>
-        <Property name="frontContainer" value="{ContainerFront}"/>
-        <Property name="flickableArea" value="{Flickable}"/>
-        <Property name="phoneTitle" value="N/A"/>
-        <Property name="phoneDescription" value="..."/>
-        <Property name="phoneSpecifications" value=""/>
-        <Property name="phoneUrl" value=""/>
-        <Property name="rating" value="2"/>
-    </properties>
-
-    <signals>
-        <Signal name="closed"/>
-    </signals>
-
-    <axis>
-        <Axis startX="{Container.width / 2}" endX="{Container.width / 2}" endY="1" />
-    </axis>
-
-    <front>
-        <Item id="ContainerFront" anchors.fill="{Container}">
-            <Rect anchors.fill="{parent}" color="black" opacity="0.4" pen.color="white" pen.width="2"/>
-
-            <MediaButton id="BackButton" x="630" y="400" text="Back" onClicked="Container.closed.emit()"/>
-            <MediaButton id="MoreButton" x="530" y="400" text="More..." onClicked="Container.state='Back'"/>
-
-            <Text id="TitleText" style="Raised" styleColor="black" color="white" x="420" y="30" width="{parent.width}"
-                  text="{Container.phoneTitle}" font.size="22"/>
-
-            <LikeOMeter x="420" y="75" rating="{Container.rating}"/>
-
-            <Flickable id="Flickable" x="420" width="280" height="260" y="120" clip="true" viewportWidth="280"
-                       viewportHeight="{DescriptionText.height}">
-                <Text id="DescriptionText"  wrap="true" color="white" width="{parent.width}"
-                      text="{Container.phoneDescription}" font.size="12"/>
-            </Flickable>
-            <Text color="white" width="300" x="50" y="300" text="{Container.phoneSpecifications}"/>
-            <ScrollBar id="ScrollBar" x="720" y="{Flickable.y}" width="7" height="{Flickable.height}" opacity="0"
-                       flickableArea="{Flickable}" clip="true"/>
-        </Item>
-    </front>
-
-    <back>
-        <Item anchors.fill="{Container}">
-            <Rect anchors.fill="{parent}" color="black" opacity="0.4" pen.color="white" pen.width="2"/>
-            <Flickable x="10" width="{Container.width-20}" height="{Container.height-20}" y="10" clip="true"
-                    viewportWidth="{UrlView.width}" viewportHeight="{UrlView.height}">
-                <WebView id="UrlView" url="{Container.phoneUrl}" idealWidth="{parent.width}"/>
-            </Flickable>
-            <MediaButton id="BackButton2" x="630" y="400" text="Back" onClicked="Container.state=''"/>
-        </Item>
-    </back>
-
-    <states>
-        <State name="Back">
-            <SetProperty target="{Container}" property="rotation" value="180"/>
-        </State>
-    </states>
-
-    <transitions>
-        <Transition>
-            <NumericAnimation easing="easeInOutQuad" properties="rotation" duration="500"/>
-        </Transition>
-    </transitions>
-
-</Flipable>
+Flipable {
+    id: Container
+
+    properties: [
+        Property { name: "frontContainer"; value: ContainerFront },
+        Property { name: "flickableArea"; value: Flickable },
+        Property { name: "phoneTitle"; value: "N/A" },
+        Property { name: "phoneDescription"; value: "..." },
+        Property { name: "phoneSpecifications"; value: "" },
+        Property { name: "phoneUrl"; value: "" },
+        Property { name: "rating"; value: 2 }
+    ]
+
+    signals: Signal { name: "closed" }
+
+    axis: Axis { startX: Container.width / 2; endX: Container.width / 2; endY: 1 }
+
+    front: Item {
+        id: ContainerFront; anchors.fill: Container
+
+        Rect {
+            anchors.fill: parent
+            color: "black"; opacity: 0.4
+            pen.color: "white"; pen.width: 2
+        }
+
+        MediaButton {
+            id: BackButton; x: 630; y: 400; text: "Back"
+            onClicked: { Container.closed.emit() }
+        }
+
+        MediaButton {
+            id: MoreButton; x: 530; y: 400; text: "More..."
+            onClicked: { Container.state='Back' }
+        }
+
+        Text {
+            id: TitleText
+            style: Raised; styleColor: "black"
+            color: "white"
+            x: 420; y: 30; width: parent.width
+            text: Container.phoneTitle; font.size: 22
+        }
+
+        LikeOMeter { x: 420; y: 75; rating: Container.rating }
+
+        Flickable {
+            id: Flickable
+            x: 420; width: 280; height: 260; y: 120; clip: true
+            viewportWidth: 280; viewportHeight: DescriptionText.height
+
+            Text {
+                id: DescriptionText
+                wrap: true
+                color: "white"
+                width: parent.width
+                text: Container.phoneDescription
+                font.size: 12
+            }
+        }
+
+        Text {
+            color: "white"; width: 300; x: 50; y: 300
+            text: Container.phoneSpecifications
+        }
+
+        ScrollBar {
+            id: ScrollBar
+            x: 720; y: Flickable.y; width: 7
+            height: Flickable.height; opacity: 0
+            flickableArea: Flickable; clip: true
+        }
+    }
+
+    back: Item {
+        anchors.fill: Container
+
+        Rect {
+            anchors.fill: parent
+            color: "black"
+            opacity: 0.4
+            pen.color: "white"
+            pen.width: 2
+        }
+
+        Flickable {
+            width: Container.width-20
+            height: Container.height-20
+            x: 10; y: 10; clip: true
+            viewportWidth: UrlView.width
+            viewportHeight: UrlView.height
+
+            WebView { id: UrlView; url: Container.phoneUrl; idealWidth: parent.width }
+        }
+
+        MediaButton {
+            id: BackButton2; x: 630; y: 400; text: "Back"; onClicked: { Container.state='' }
+        }
+    }
+
+    states: [
+        State {
+            name: "Back"
+            SetProperty { target: Container; property: "rotation"; value: 180 }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            NumericAnimation { easing: "easeInOutQuad"; properties: "rotation"; duration: 500 }
+        }
+    ]
+}
diff --git a/demos/declarative/phonebrowser/content/PhonesPathView.qml b/demos/declarative/phonebrowser/content/PhonesPathView.qml
index df7e742..acef6c3 100644
--- a/demos/declarative/phonebrowser/content/PhonesPathView.qml
+++ b/demos/declarative/phonebrowser/content/PhonesPathView.qml
@@ -1,79 +1,120 @@
-<PathView id="Container" pathItemCount="6">
-
-    <path>
-        <Path startX="-50" startY="40">
-            <PathAttribute name="scale" value="0.2"/>
-            <PathCubic x="400" y="220" control1X="140" control1Y="40" control2X="210" control2Y="220"/>
-            <PathAttribute name="scale" value="1.2"/>
-            <PathAttribute name="z" value="1"/>
-            <PathCubic x="850" y="40" control2X="660" control2Y="40" control1X="590" control1Y="220"/>
-            <PathAttribute name="scale" value="0.2"/>
-        </Path>
-    </path>
-
-    <delegate>
-        <Component id="PhoneDelegate">
-            <Item id="Wrapper" width="320" height="200" scale="{Wrapper.PathView.scale}" z="{Wrapper.PathView.z}">
-                <Connection sender="{PhoneInfoContainer}" script="if (Wrapper.state == 'Details') Wrapper.state = ''" signal="closed()"/>
-
-                <Script>
-                    function phoneClicked() {
-                        if (MainWindow.minimized == true) {
-                            MainWindow.minimized = false;
-                        } else {
-                            PhoneInfoContainer.phoneTitle = title;
-                            PhoneInfoContainer.flickableArea.yPosition = 0;
-                            PhoneInfoContainer.phoneDescription = description;
-                            PhoneInfoContainer.phoneSpecifications = specifications;
-                            PhoneInfoContainer.phoneUrl = url;
-                            PhoneInfoContainer.rating = rating;
-                            Wrapper.state = "Details";
-                        }
+PathView {
+    id: Container; pathItemCount: 6
+
+    path: Path {
+        startX: -50; startY: 40;
+
+        PathAttribute { name: "scale"; value: 0.2 }
+
+        PathCubic {
+            x: 400; y: 220
+            control1X: 140; control1Y: 40
+            control2X: 210; control2Y: 220
+        }
+
+        PathAttribute { name: "scale"; value: 1.2  }
+        PathAttribute { name: "z"; value: 1 }
+
+        PathCubic {
+            x: 850; y: 40
+            control2X: 660; control2Y: 40
+            control1X: 590; control1Y: 220
+        }
+
+        PathAttribute { name: "scale"; value: 0.2 }
+    }
+
+    delegate: Component {
+        id: PhoneDelegate
+
+        Item {
+            id: Wrapper; width: 320; height: 200
+            scale: Wrapper.PathView.scale; z: Wrapper.PathView.z
+
+            Connection {
+                sender: PhoneInfoContainer; signal: "closed()"
+                script: { if (Wrapper.state == 'Details') Wrapper.state = '' }
+            }
+
+            Script {
+               function phoneClicked() {
+                  if (MainWindow.minimized == true) {
+                     MainWindow.minimized = false;
+                  } else {
+                     PhoneInfoContainer.phoneTitle = title;
+                     PhoneInfoContainer.flickableArea.yPosition = 0;
+                     PhoneInfoContainer.phoneDescription = description;
+                     PhoneInfoContainer.phoneSpecifications = specifications;
+                     PhoneInfoContainer.phoneUrl = url;
+                     PhoneInfoContainer.rating = rating;
+                     Wrapper.state = "Details";
+                  }
+               }
+            }
+
+            Rect {
+                id: Dvd; anchors.fill: parent; color: "white"
+
+                Item {
+                    x: (parent.width-width)/2
+                    y: (parent.height-height)/2
+                    width: Thumb.width*Thumb.scale
+                    height: Thumb.height*Thumb.scale
+
+                    Image {
+                        id: Thumb; source: thumb
+                        scale: 0.95*Math.min(Dvd.height/height,Dvd.width/width)
                     }
-                </Script>
-
-                <Rect id="Dvd" anchors.fill="{parent}" color="white">
-                    <Item x="{(parent.width-width)/2}" y="{(parent.height-height)/2}" width="{Thumb.width*Thumb.scale}" height="{Thumb.height*Thumb.scale}">
-                        <Image id="Thumb" source="{thumb}" scale="{0.95*Math.min(Dvd.height/height,Dvd.width/width)}"/>
-                    </Item>
-                    <!-- <Image source="pics/reflection.png" anchors.fill="{parent}"/> -->
-                    <Image source="pics/shadow-right.png" x="{Dvd.width}" height="{Dvd.height}"/>
-                    <Image source="pics/shadow-bottom.png" y="{Dvd.height}" width="{Dvd.width}"/>
-                    <Image id="Corner" source="pics/shadow-corner.png" x="{Dvd.width}" y="{Dvd.height}"/>
-                </Rect>
-
-                <MouseRegion anchors.fill="{Wrapper}" onClicked="phoneClicked()"/>
-
-                <states>
-                    <State name="Details">
-                        <ParentChange target="{Wrapper}" parent="{PhoneInfoContainer.frontContainer}"/>
-                        <SetProperties target="{Wrapper}" x="50" y="60" scale="1"/>
-                        <SetProperties target="{PhoneInfoContainer}" y="20"/>
-                        <SetProperties target="{Container}" y="-480"/>
-                        <SetProperties target="{CloseButton}" opacity="0"/>
-                        <SetProperties target="{CategoryText}" y="-50"/>
-                    </State>
-                    <State name="Stacked" when="{MainWindow.minimized == true}">
-                        <ParentChange target="{Wrapper}" parent="{Stack}"/>
-                        <SetProperties target="{Wrapper}" x="0" y="0" scale="0.2"/>
-                        <SetProperties target="{CloseButton}" opacity="0"/>
-                        <SetProperties target="{CategoryText}" y="-50"/>
-                    </State>
-                </states>
-
-                <transitions>
-                    <Transition fromState="" toState="Details,Stacked">
-                        <ParentChangeAction/>
-                        <NumericAnimation properties="x,y,scale,opacity" duration="500" easing="easeInOutQuad"/>
-                    </Transition>
-                    <Transition fromState="Details,Stacked" toState="">
-                        <ParentChangeAction/>
-                        <NumericAnimation properties="x,y,scale,opacity" duration="500" easing="easeInOutQuad"/>
-                    </Transition>
-                </transitions>
-
-            </Item>
-        </Component>
-    </delegate>
-
-</PathView>
+                }
+
+                Image { source: "pics/shadow-right.png"; x: Dvd.width; height: Dvd.height }
+                Image { source: "pics/shadow-bottom.png"; y: Dvd.height; width: Dvd.width }
+
+                Image {
+                    id: Corner
+                    source: "pics/shadow-corner.png"
+                    x: Dvd.width; y: Dvd.height
+                }
+            }
+
+            MouseRegion { anchors.fill: Wrapper; onClicked: { phoneClicked() } }
+
+            states: [
+                State {
+                    name: "Details"
+                    ParentChange { target: Wrapper; parent: PhoneInfoContainer.frontContainer }
+                    SetProperties { target: Wrapper; x: 50; y: 60; scale: 1 }
+                    SetProperties { target: PhoneInfoContainer; y: 20 }
+                    SetProperties { target: Container; y: "-480" }
+                    SetProperties { target: CloseButton; opacity: 0 }
+                    SetProperties { target: CategoryText; y: "-50" }
+                },
+
+                State {
+                    name: "Stacked"
+                    when: MainWindow.minimized == true
+                    ParentChange { target: Wrapper; parent: Stack }
+                    SetProperties {target: Wrapper; x: 0; y: 0; scale: 0.2 }
+                    SetProperties { target: CloseButton; opacity: 0 }
+                    SetProperties { target: CategoryText; y: "-50" }
+                }
+            ]
+
+            transitions: [
+                Transition {
+                    fromState: ""; toState: "Details,Stacked"
+                    ParentChangeAction { }
+                    NumericAnimation { properties: "x,y,scale,opacity"; duration: 500; easing: "easeInOutQuad" }
+                },
+
+                Transition {
+                    fromState: "Details,Stacked"
+                    toState: ""
+                    ParentChangeAction { }
+                    NumericAnimation { properties: "x,y,scale,opacity"; duration: 500; easing: "easeInOutQuad" }
+                }
+            ]
+
+        }
+    }
+}
diff --git a/demos/declarative/phonebrowser/content/ScrollBar.qml b/demos/declarative/phonebrowser/content/ScrollBar.qml
index 974f4d0..a0f2925 100644
--- a/demos/declarative/phonebrowser/content/ScrollBar.qml
+++ b/demos/declarative/phonebrowser/content/ScrollBar.qml
@@ -1,18 +1,38 @@
-<Item id="Container">
-    <properties>
-        <Property name="flickableArea"/>
-    </properties>
-
-    <Rect radius="5" color="black" opacity="0.3" pen.color="white" pen.width="2" x="0" y="{flickableArea.pageYPosition * Container.height}"
-          width="{parent.width}" height="{flickableArea.pageHeight * Container.height}"/>
-    <states>
-        <State name="show" when="{flickableArea.moving}">
-            <SetProperties target="{Container}" opacity="1" />
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState="*" toState="*">
-            <NumericAnimation target="{Container}" properties="opacity" duration="400"/>
-        </Transition>
-    </transitions>
-</Item>
+Item {
+    id: Container
+    properties: Property {
+        name: "flickableArea"
+    }
+    Rect {
+        radius: 5
+        color: "black"
+        opacity: 0.3
+        pen.color: "white"
+        pen.width: 2
+        x: 0
+        y: flickableArea.pageYPosition * Container.height
+        width: parent.width
+        height: flickableArea.pageHeight * Container.height
+    }
+    states: [
+        State {
+            name: "show"
+            when: flickableArea.moving
+            SetProperties {
+                target: Container
+                opacity: 1
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            fromState: "*"
+            toState: "*"
+            NumericAnimation {
+                target: Container
+                properties: "opacity"
+                duration: 400
+            }
+        }
+    ]
+}
diff --git a/demos/declarative/phonebrowser/content/Star.qml b/demos/declarative/phonebrowser/content/Star.qml
index 37d314b..ebcd78b 100644
--- a/demos/declarative/phonebrowser/content/Star.qml
+++ b/demos/declarative/phonebrowser/content/Star.qml
@@ -1,25 +1,47 @@
-<Item id="Container" width="24" height="24">
-    <properties>
-        <Property name="rating"/>
-        <Property name="on"/>
-    </properties>
+Item {
+    id: Container
+    width: 24
+    height: 24
 
-    <signals>
-        <Signal name="clicked"/>
-    </signals>
+    properties: [
+        Property { name: "rating" },
+        Property { name: "on" }
+    ]
 
-    <Image id="Image" source="pics/ghns_star.png" x="6" y="7" opacity="0.4" scale="0.5"/>
-    <MouseRegion anchors.fill="{Container}" onClicked="Container.clicked.emit()"/>
-
-    <states>
-        <State name="on" when="{Container.on == true}">
-            <SetProperties target="{Image}" opacity="1" scale="1" x="1" y="0"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition>
-            <NumericAnimation properties="opacity,scale,x,y" easing="easeOutBounce"/>
-        </Transition>
-    </transitions>
-
-</Item>
+    signals: Signal {
+        name: "clicked"
+    }
+    Image {
+        id: Image
+        source: "pics/ghns_star.png"
+        x: 6
+        y: 7
+        opacity: 0.4
+        scale: 0.5
+    }
+    MouseRegion {
+        anchors.fill: Container
+        onClicked: { Container.clicked.emit() }
+    }
+    states: [
+        State {
+            name: "on"
+            when: Container.on == true
+            SetProperties {
+                target: Image
+                opacity: 1
+                scale: 1
+                x: 1
+                y: 0
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            NumericAnimation {
+                properties: "opacity,scale,x,y"
+                easing: "easeOutBounce"
+            }
+        }
+    ]
+}
diff --git a/demos/declarative/phonebrowser/phonebrowser.qml b/demos/declarative/phonebrowser/phonebrowser.qml
index be87fa7..85d352d 100644
--- a/demos/declarative/phonebrowser/phonebrowser.qml
+++ b/demos/declarative/phonebrowser/phonebrowser.qml
@@ -1,36 +1,59 @@
-<?qtfx namespacepath:=content ?>
-<Item width="800" height="480" id="MainWindow">
-    <properties>
-        <Property name="minimized" value="false"/>
-    </properties>
-
-    <Item id="Background">
-        <Image source="content/pics/background.png" opaque="true"/>
-
-        <Rect id="Menu" x="-150" width="150" height="480" color="#232323">
-            <Text id="IconText" x="40" y="110" font.bold="true" font.size="9" text="Nokia Devices" color="white" style="Raised" styleColor="black"/>
-            <Image source="content/pics/shadow-right-screen.png" x="150" height="480" tile="true"/>
-        </Rect>
-
-        <PhonesPathView id="PhonesPathView" model="{PhonesModel}" y="60" width="800" height="360"/>
-        <PhoneInfoContainer id="PhoneInfoContainer" width="750" x="25" y="500" height="440"/>
-        <MediaButton id="CloseButton" x="680" y="440" text="Close" onClicked="MainWindow.minimized = true"/>
-
-        <states>
-            <State name="Minimized" when="{MainWindow.minimized == true}">
-                <SetProperties target="{Background}" x="75"/>
-                <SetProperties target="{Menu}" x="-75"/>
-            </State>
-        </states>
-        <transitions>
-            <Transition fromState="*" toState="*">
-                <NumericAnimation properties="x,y,size" duration="500" easing="easeInOutQuad"/>
-            </Transition>
-        </transitions>
-    </Item>
-
-    <Text id="CategoryText" x="300" y="15" text="Nokia Devices" font.size="22" color="white" style="Raised" styleColor="black"/>
-    <Item id="Stack" x="45" y="50"/>
-
-</Item>
+import "content"
 
+Item {
+    id: MainWindow; width: 800; height: 480
+
+    properties: Property { name: "minimized"; value: false }
+
+    Item {
+        id: Background
+
+        Image { source: "content/pics/background.png"; opaque: true }
+
+        Rect {
+            id: Menu; x: -150; width: 150; height: 480; color: "#232323"
+
+            Text {
+                id: IconText; x: 40; y: 110
+                font.bold: true; font.size: 9; text: "Nokia Devices"
+                color: "white"; style: Raised; styleColor: "black"
+            }
+
+            Image {
+                source: "content/pics/shadow-right-screen.png"
+                x: 150; height: 480; tile: true
+            }
+        }
+
+        PhonesPathView { id: PhonesPathView; model: PhonesModel; y: 60; width: 800; height: 360 }
+        PhoneInfoContainer { id: PhoneInfoContainer; width: 750; x: 25; y: 500; height: 440 }
+
+        MediaButton {
+            id: CloseButton; x: 680; y: 440; text: "Close"
+            onClicked: { MainWindow.minimized = true }
+        }
+
+        states: [
+            State {
+                name: "Minimized"
+                when: MainWindow.minimized == true
+                SetProperties { target: Background; x: 75 }
+                SetProperties { target: Menu; x: -75 }
+            }
+        ]
+
+        transitions: [
+            Transition {
+                fromState: "*"; toState: "*"
+                NumericAnimation { properties: "x,y,size"; duration: 500; easing: "easeInOutQuad" }
+            }
+        ]
+    }
+
+    Text {
+        id: CategoryText; x: 300; y: 15; text: "Nokia Devices"
+        font.size: 22; color: "white"; style: Raised; styleColor: "black"
+    }
+
+    Item { id: Stack; x: 45; y: 50 }
+}