Updates to presentation system

6 files changed, 150 insertions, 139 deletions

diff --git a/Prezo/Slide.qml b/Prezo/Slide.qml
index 630395b..1988d85 100644
--- a/Prezo/Slide.qml
+++ b/Prezo/Slide.qml
@@ -13,40 +13,36 @@ Item {
     property real fontScale: 1
 
     property real baseFontSize: fontSize * fontScale
-    property real titleFontSize: fontSize * 1.1 * fontScale
+    property real titleFontSize: fontSize * 1.2 * fontScale
     property real bulletSpacing: 1
 
-    property real contentX: parent.width * 0.05
-    property real contentY: parent.height * 0.2
-    property real contentWidth: parent.width * 0.9
-    property real contentHeight: parent.height * 0.7
+    // Define the slide to be the "content area"
+    x: parent.width * 0.05
+    y: parent.height * 0.2
+    width: parent.width * 0.9
+    height: parent.height * 0.7
 
     property color slideTextColor: parent.textColor != undefined ? parent.textColor : "black"
 
-    width: parent.width
-    height: parent.height
-
     visible: false
 
     Text {
         id: titleText
         font.pixelSize: titleFontSize
         text: title;
-        anchors.top: parent.top
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.topMargin: parent.width * 0.01
-        anchors.leftMargin: parent.width * 0.01
-        anchors.rightMargin: parent.width * 0.01
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.top
+        anchors.bottomMargin: parent.fontSize * 1.5
         font.bold: true;
         color: slideTextColor
+        horizontalAlignment: Text.Center
     }
 
     Text {
         id: centeredId
-        anchors.verticalCenter: parent.verticalCenter
-        x: slide.contentX
-        width: slide.contentWidth
+        width: parent.width
+        anchors.centerIn: parent
+        anchors.verticalCenterOffset: - parent.y / 3
         text: centeredText
         horizontalAlignment: Text.Center
         font.pixelSize: baseFontSize
@@ -56,21 +52,25 @@ Item {
 
     Column {
         id: contentId
-        x: slide.contentX
-        y: slide.contentY
-        width: slide.contentHeight
-        height: slide.contentHeight
+        anchors.fill: parent
 
         Repeater {
             model: content.length
 
             Row {
+                id: row
+
+                function decideIndentLevel(s) { return s.charAt(0) == " " ? 1 + decideIndentLevel(s.substring(1)) : 0 }
+                property int indentLevel: decideIndentLevel(content[index])
+                property int nextIndentLevel: index < content.length - 1 ? decideIndentLevel(content[index+1]) : 0
+                property real indentFactor: (10 - row.indentLevel * 2) / 10;
 
-                height: text.height + slide.baseFontSize * slide.bulletSpacing
+                height: text.height + (nextIndentLevel == 0 ? 1 : 0.3) * slide.baseFontSize * slide.bulletSpacing
+                x: 50 * indentLevel
 
                 Rectangle {
                     id: dot
-                    y: baseFontSize / 2
+                    y: baseFontSize * row.indentFactor / 2
                     width: baseFontSize / 4
                     height: baseFontSize / 4
                     color: slide.slideTextColor
@@ -88,8 +88,8 @@ Item {
 
                 Text {
                     id: text
-                    width: slide.contentWidth
-                    font.pixelSize: baseFontSize
+                    width: slide.width
+                    font.pixelSize: baseFontSize * row.indentFactor
                     text: content[index]
                     textFormat: Text.PlainText
                     wrapMode: Text.WordWrap
diff --git a/examples/animatedbackground/AnimatedPresentation.qml b/examples/animatedbackground/AnimatedPresentation.qml
deleted file mode 100644
index 7c02544..0000000
--- a/examples/animatedbackground/AnimatedPresentation.qml
+++ /dev/null
@@ -1,79 +0,0 @@
-import QtQuick 2.0
-import Prezo 1.0
-
-Presentation {
-
-    id: deck
-
-    width: 600
-    height: 400
-
-
-    property bool inTransition: false;
-
-    property variant fromSlide;
-    property variant toSlide;
-
-    property int transitionTime: 2000;
-
-    BackgroundSwirls {}
-
-    ShaderEffectItem {
-        id: effect
-        anchors.fill: parent
-        visible: deck.inTransition
-        property variant source: ShaderEffectSource { sourceItem: fromSlide; smooth: true }
-        property real ratio: 0
-        property real amplitude: 0.1 * ratio
-        property real frequency: 20
-        property real time: 0
-        NumberAnimation on time { loops: Animation.Infinite; from: 0; to: Math.PI * 2; duration: 2000 }
-        fragmentShader:
-            "uniform highp float amplitude;" +
-            "uniform highp float frequency;" +
-            "uniform highp float time;" +
-            "uniform lowp float ratio;" +
-            "uniform sampler2D source;" +
-            "varying highp vec2 qt_TexCoord0;" +
-            "void main() {" +
-            "    highp vec2 p = sin(time + frequency * qt_TexCoord0);" +
-            "    gl_FragColor = texture2D(source, qt_TexCoord0 + amplitude * vec2(p.y, -p.x)) * (1. - ratio);" +
-            "}"
-    }
-
-    SequentialAnimation {
-        id: transition
-        ScriptAction { script: {
-                deck.inTransition = true
-                fromSlide.opacity = 0
-                toSlide.visible = true
-            }
-        }
-
-        ParallelAnimation {
-            NumberAnimation { target: effect; property: "ratio"; from: 0; to: 1; duration: deck.transitionTime; }
-            NumberAnimation { target: toSlide; property: "opacity"; from: 0; to: 1; duration: deck.transitionTime; easing.type: Easing.InQuart }
-        }
-
-        ScriptAction { script: {
-                deck.inTransition = false
-                fromSlide.visible = false
-                fromSlide.opacity = 0
-                toSlide.opacity = 1
-            }
-        }
-    }
-
-    function switchSlides(from, to)
-    {
-        if (deck.inTransition)
-            return false
-
-        deck.fromSlide = from
-        deck.toSlide = to
-
-        transition.running = true;
-
-        return true
-    }
-}
diff --git a/examples/animatedbackground/SlideDeck.qml b/examples/animatedbackground/SlideDeck.qml
index 4b763cf..7f99f72 100644
--- a/examples/animatedbackground/SlideDeck.qml
+++ b/examples/animatedbackground/SlideDeck.qml
@@ -3,10 +3,12 @@ import Prezo 1.0
 
 import Qt.labs.particles 2.0
 
-AnimatedPresentation {
+Presentation {
     width: 640
     height: 360
 
+    BackgroundSwirls {}
+
     property color textColor: "white"
 
     Slide {
diff --git a/examples/customtransition/SlideDeck.qml b/examples/customtransition/SlideDeck.qml
index 848dc29..20783cb 100644
--- a/examples/customtransition/SlideDeck.qml
+++ b/examples/customtransition/SlideDeck.qml
@@ -1,7 +1,7 @@
 import Prezo 1.0
 import QtQuick 2.0
 
-DissolvingPresentation
+OpacityTransitionPresentation
 {
     Slide {
         id: slide1
@@ -32,18 +32,6 @@ DissolvingPresentation
     }
 
     Slide {
-        Image {
-            source: "distortion.png"
-            smooth: true
-
-            x: parent.contentX
-            y: parent.contentY
-            width: parent.contentWidth
-            height: parent.contentHeight
-        }
-    }
-
-    Slide {
         title: "Slide number 3"
         content: [
             "Vestibulum aliquam orci non ante viverra pretium.",
diff --git a/examples/helloprezo/CodeSection.qml b/examples/helloprezo/CodeSection.qml
new file mode 100644
index 0000000..8493b99
--- /dev/null
+++ b/examples/helloprezo/CodeSection.qml
@@ -0,0 +1,33 @@
+import QtQuick 2.0
+
+Rectangle
+{
+    id: root
+
+    property string text
+    property real fontSize: parent.baseFontSize / 2
+
+    gradient: Gradient {
+        GradientStop { position: 0; color: "white" }
+        GradientStop { position: 1; color: "darkGray" }
+    }
+
+    color: "lightGray"
+    border.color: "darkGray"
+    border.width: 2
+    radius: 10
+
+    x: parent.width / 2
+    width: parent.width / 2
+    height: parent.height
+
+    Text {
+        id: textItem
+        anchors.fill: parent
+        anchors.margins: 20
+        text: root.text;
+        font.family: "courier"
+        font.pixelSize: root.fontSize
+    }
+
+}
diff --git a/examples/helloprezo/HelloPrezo.qml b/examples/helloprezo/HelloPrezo.qml
index 6e56ce5..ebd2036 100644
--- a/examples/helloprezo/HelloPrezo.qml
+++ b/examples/helloprezo/HelloPrezo.qml
@@ -8,29 +8,86 @@ Presentation
 
 
     Slide {
-        fontScale: 2
-        centeredText: "Click to walk through intro!"
+        centeredText: "Use [space] or [keypad] to see intro"
+    }
+
+    Slide {
+        title: "Presentation {} Element"
+        content: [
+            "Toplevel element",
+            "Defines background",
+            "Foreground color",
+        ]
+
+        CodeSection {
+            text: "
+import Prezo 1.0
+
+Presentation
+{
+    width: 640
+    height: 360
+
+    // Define a background...
+    // Default is white..
+    Rectangle {
+        id: backgroundColor
+        anchors.fill: parent
+        color: \"blue\"
+    }
+
+    // Set text color
+    property color textColor: \"white\"
+
+    // Then define slide elements
+    Slide { ... }
+    Slide { ... }
+    Slide { ... }
+    ...
+}
+            "
+        }
     }
 
 
     Slide {
-        id: areaSlide
-        title: "Title Text - Bullet points"
+        title: "Slide {} Element"
         content: [
             "Bullet points",
             "Should be short",
-            "And to the point"
+            "And to the point",
+            " Sub point",
+            "  Sub Sub point",
+            " Sub point"
         ]
+
+        CodeSection {
+
+            text: "Slide {\n" +
+                  "    id: areaSlide\n" +
+                  "    title: \"Slide {} Element\"\n" +
+                  "    content: [\n" +
+                  "              \"Bullet points\",\n" +
+                  "              \"Should be short\",\n" +
+                  "              \"And to the point\",\n" +
+                  "              \" Sub point\",\n" +
+                  "              \"  Sub Sub point\",\n" +
+                  "              \" Sub point\"\n" +
+                  "             ]\n" +
+                  "}\n"
+        }
+    }
+
+
+    Slide {
+        title: "Slide {}, continued"
         Rectangle {
-            x: areaSlide.contentX
-            y: areaSlide.contentY
-            width: areaSlide.contentWidth
-            height: areaSlide.contentHeight
+            anchors.fill: parent
 
-            color: Qt.rgba(0, 0, 0, 0.1)
+            color: "lightgray"
 
             Text {
-                text: "Dedicated content area"
+                text: "Slide fills this area..."
                 anchors.centerIn: parent
             }
         }
@@ -38,13 +95,20 @@ Presentation
 
 
     Slide {
-        title: "Title Text - Centered Text"
-        centeredText: "And this is some centered text..."
+        title: "Slide {}, continued"
+        centeredText: "Use the predefined <i><b><code>centeredText</code></b></i> property to put a single block of text at the center of the Slide{}"
     }
 
+    Slide {
+        title: "Slide {}, continued"
+        centeredText: '<font color="red"><i>Use</i> rich text, <font color="blue">if <b>you</b> like...'
+    }
+
+
+
 
     Slide {
-        title: "Text is relative to presentation height"
+        title: "Font size relative to screen size"
         content: [
             "Which means you don't need to worry about it",
             "Bullet points wraps around on the edges, regardless of how long they are, like this. Even if you should choose to use a very long bullet point (which would distract your audience) it would still look ok'ish",
@@ -53,10 +117,6 @@ Presentation
     }
 
 
-    Slide {
-        centeredText: '<font color="red"><i>Use</i> rich text, <font color="blue">if <b>you</b> like...'
-    }
-
 
     Slide {
         id: interactiveSlide
@@ -64,10 +124,10 @@ Presentation
         title: "Embed Interactive Content"
 
         Rectangle {
-            width: parent.height / 4
+            id: box
+            width: parent.fontSize * 10
             height: width
             color: mouse.pressed ? "lightsteelblue" : "steelblue"
-            anchors.centerIn: parent
 
             NumberAnimation on rotation { from: 0; to: 360; duration: 10000; loops: Animation.Infinite; running: visible }
 
@@ -79,13 +139,20 @@ Presentation
             MouseArea {
                 id: mouse
                 anchors.fill: parent
+                drag.target: box
             }
         }
     }
 
 
     Slide {
-        centeredText: 'Hit "Esc" to fade out the current page if there are questions from the audience'
+        title: "Features"
+        centeredText: 'Hit [esc] to fade out the current page if there are questions from the audience'
+    }
+
+    Slide {
+        title: "Features"
+        centeredText: 'Navigate back and forth using [left] and [right]\n[space] or [click] takes you to the next slide.'
     }