code slide...

examples/tutorial/SlideDeck.qml

@@ -156,13 +156,34 @@ Presentation
     }
 
 
-
+    CodeSlide {
+        title: "CodeSlide {} Element"
+        code:
+"CodeSlide {
+    title: \"CodeSlide {} Element\"
+    code:
+\"
+// Whitespaces are preserved,
+// so we start at the beginning of the line...
+
+// You can mouse click on any line
+
+// Navigate with keypad when the code has focus
+
+int main(int argc, char **argv) {
+    QGuiApplication app;
+    QWindow window;
+    window.show();
+    return app.exec();
+}
+\" "
+    }
 
     Slide {
         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",
+            "Bullet points wrap 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",
             "If you run out of height, you're out of luck though..."
         ]
     }

presentation.pro

@@ -5,6 +5,7 @@ CONFIG += plugin
 
 qmldir.files += \
     src/qmldir \
+    src/CodeSlide.qml \
     src/Presentation.qml \
     src/Slide.qml 
 

src/CodeSlide.qml

+import QtQuick 2.0
+
+Slide {
+    id: slide;
+
+    property string codeFontFamily: "Courier New"
+    property string code;
+    property real codeFontSize: baseFontSize * 0.6;
+
+
+
+    Rectangle {
+        id: background
+        anchors.fill: parent
+        radius: height / 10;
+        gradient: Gradient {
+            GradientStop { position: 0; color: Qt.rgba(0.8, 0.8, 0.8, 0.5); }
+            GradientStop { position: 1; color: Qt.rgba(0.2, 0.2, 0.2, 0.5); }
+        }
+        border.color: slide.slideTextColor;
+        border.width: height / 250;
+        antialiasing: true
+    }
+
+    onCodeChanged: {
+        listModel.clear();
+        var codeLines = slide.code.split("\n");
+        for (var i=0; i<codeLines.length; ++i) {
+            listModel.append({
+                                line: i,
+                                code: codeLines[i]
+                             });
+        }
+    }
+
+
+
+    ListModel {
+        id: listModel
+    }
+
+
+    onVisibleChanged: {
+        listView.focus = slide.visible;
+        listView.currentIndex = -1;
+    }
+
+    ListView {
+        id: listView;
+
+        anchors.fill: parent;
+        anchors.margins: background.radius / 2
+        clip: true
+
+        model: listModel;
+        focus: true;
+
+        MouseArea {
+            anchors.fill: parent
+            onClicked: {
+                listView.focus = true;
+                listView.currentIndex = listView.indexAt(mouse.x, mouse.y + listView.contentY);
+            }
+
+        }
+
+        delegate: Item {
+
+            id: itemDelegate
+
+            height: lineLabel.height
+            width: parent.width
+
+            Rectangle {
+                id: lineLabelBackground
+                width: lineLabel.height * 3;
+                height: lineLabel.height;
+                color: slide.slideTextColor;
+                opacity: 0.1;
+            }
+
+            Text {
+                id: lineLabel
+                anchors.right: lineLabelBackground.right;
+                text: line + ":"
+                color: slide.slideTextColor;
+                font.family: slide.codeFontFamily
+                font.pixelSize: slide.codeFontSize
+                font.bold: itemDelegate.ListView.isCurrentItem;
+                opacity: itemDelegate.ListView.isCurrentItem ? 1 : 0.8;
+
+            }
+
+            Rectangle {
+                id: lineContentBackground
+                anchors.fill: lineContent;
+                anchors.leftMargin: -height / 2;
+                color: slide.slideTextColor
+                opacity: 0.2
+                visible: itemDelegate.ListView.isCurrentItem;
+            }
+
+            Text {
+                id: lineContent
+                anchors.left: lineLabelBackground.right
+                anchors.leftMargin: lineContent.height;
+                anchors.right: parent.right;
+                color: slide.slideTextColor;
+                text: code;
+                font.family: slide.codeFontFamily
+                font.pixelSize: slide.codeFontSize
+                font.bold: itemDelegate.ListView.isCurrentItem;
+                opacity: itemDelegate.ListView.isCurrentItem ? 1 : 0.8;
+            }
+        }
+    }
+
+
+
+}

src/qmldir

+CodeSlide 1.0 CodeSlide.qml
 Presentation 1.0 Presentation.qml
-Slide 1.0 Slide.qml
\ No newline at end of file
+Slide 1.0 Slide.qml