1/* This file is part of the KDE project
2 * Copyright (C) 2014 Dan Leinir Turthra Jensen <admin@leinir.dk>
3 *
4 *  This program is free software; you can redistribute it and/or modify
5 *  it under the terms of the GNU General Public License as published by
6 *  the Free Software Foundation; either version 2 of the License, or
7 *  (at your option) any later version.
8 *
9 *  This program is distributed in the hope that it will be useful,
10 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
11 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
12 *  GNU General Public License for more details.
13 *
14 *  You should have received a copy of the GNU General Public License
15 *  along with this program; if not, write to the Free Software
16 *  Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
17 */
18
19import QtQuick 2.0
20import org.kde.kirigami 2.7 as Kirigami
21import "components"
22import org.calligra 1.0
23import org.kde.calligra 1.0 as Calligra
24
25Rectangle {
26    id: base;
27    color: "#22282f";
28    property int currentSlide: 0;
29    property int timePassed: 0;
30    Connections {
31        target: pageStack.layers;
32        onCurrentPageChanged: timePassed = 0;
33    }
34    function changeSlide(goToSlide) {
35        fakePieChart.opacity = 0;
36        fakePieChartTapped.opacity = 0;
37        laserScribbler.opacity = 1;
38        laserScribbler.clear();
39        scribbler.opacity = 0;
40        scribbler.clear();
41        if(mainWindow.lastScreen() > 0) {
42            mainWindow.desktopKoView.presentationMode().navigateToPage(goToSlide);
43        }
44        base.currentSlide = goToSlide;
45    }
46    Item {
47        id: currentSlideContainer;
48        anchors {
49            fill: parent;
50            topMargin: Settings.theme.adjustedPixel(166);
51            leftMargin: Settings.theme.adjustedPixel(10);
52            rightMargin: parent.width / 3;
53            bottomMargin: Settings.theme.adjustedPixel(200);
54        }
55        Rectangle {
56            anchors.fill: parent;
57            opacity: 0.6;
58        }
59        Calligra.ImageDataItem {
60//             id: thumbnail;
61            anchors.fill: parent;
62//             anchors.horizontalCenter: parent.horizontalCenter;
63
64//             width: parent.ListView.view.thumbnailWidth;
65//             height: parent.ListView.view.thumbnailHeight;
66
67            data: presentationModel.thumbnail(currentSlide);
68            visible: fakePieChart.opacity === 0 && fakePieChartTapped.opacity === 0;
69        }
70//         Thumbnail {
71//             anchors.fill: parent;
72//             content: presentationModel.thumbnail(currentSlide);
73//         }
74        Image {
75            id: fakePieChart;
76            opacity: 0;
77            Behavior on opacity { NumberAnimation { duration: Kirigami.Units.shortDuration; } }
78            anchors.fill: parent;
79            fillMode: Image.PreserveAspectFit
80            source: Settings.theme.image("intel-Stage-Slide-PieChart-Default.svg");
81            MouseArea {
82                anchors.fill: parent;
83                enabled: parent.opacity > 0;
84                onClicked: fakePieChartTapped.opacity = 1;
85            }
86        }
87        Image {
88            id: fakePieChartTapped;
89            opacity: 0;
90            Behavior on opacity { NumberAnimation { duration: Kirigami.Units.shortDuration; } }
91            anchors.fill: parent;
92            fillMode: Image.PreserveAspectFit
93            source: Settings.theme.image("intel-Stage-Slide-PieChart-PieceTappedOn.svg");
94            MouseArea {
95                anchors.fill: parent;
96                enabled: parent.opacity > 0;
97                onClicked: fakePieChartTapped.opacity = 0;
98            }
99        }
100        ScribbleArea {
101            id: laserScribbler;
102            anchors.fill: parent;
103            opacity: 1;
104            color: "#ff0000";
105            penWidth: 10;
106            Behavior on opacity { NumberAnimation { duration: Kirigami.Units.shortDuration; } }
107            onPaintingStarted: laserTimer2.stop();
108            onPaintingStopped: laserTimer2.start();
109            Timer {
110                id: laserTimer;
111                repeat: false; interval: Kirigami.Units.shortDuration;
112                onTriggered: laserScribbler.clear();
113            }
114            Timer {
115                id: laserTimer2;
116                repeat: false; interval: 1000;
117                onTriggered: laserScribbler.clear();
118            }
119        }
120        ScribbleArea {
121            id: scribbler;
122            anchors.fill: parent;
123            opacity: 0;
124            color: "#dff03c";
125            penWidth: 40;
126            Behavior on opacity { NumberAnimation { duration: Kirigami.Units.shortDuration; } }
127            Timer {
128                id: scribbleTimer;
129                repeat: false; interval: Kirigami.Units.shortDuration;
130                onTriggered: scribbler.clear();
131            }
132        }
133    }
134    Item {
135        id: nextSlideContainer;
136        anchors {
137            top: parent.top;
138            topMargin: Settings.theme.adjustedPixel(166);
139            left: currentSlideContainer.right;
140            leftMargin: Settings.theme.adjustedPixel(10);
141            right: parent.right;
142            rightMargin: Settings.theme.adjustedPixel(10);
143        }
144        height: width * (currentSlideContainer.height / currentSlideContainer.width);
145        Rectangle {
146            anchors.fill: parent;
147            opacity: 0.6;
148        }
149        Calligra.ImageDataItem {
150//             id: thumbnail;
151            anchors.fill: parent;
152//             anchors.horizontalCenter: parent.horizontalCenter;
153
154//             width: parent.ListView.view.thumbnailWidth;
155//             height: parent.ListView.view.thumbnailHeight;
156
157            data: presentationModel.thumbnail(currentSlide + 1);
158//             visible: fakePieChart.opacity === 0 && fakePieChartTapped.opacity === 0;
159        }
160//         Thumbnail {
161//             anchors.fill: parent;
162//             content: presentationModel.thumbnail(currentSlide + 1);
163//         }
164        MouseArea {
165            anchors.fill: parent;
166            onClicked: {
167                if(base.currentSlide < presentationModel.canvas.slideCount()) {
168                    base.changeSlide(base.currentSlide + 1);
169                }
170            }
171        }
172    }
173    Image {
174        anchors {
175            top: parent.top;
176            right: parent.right;
177            rightMargin: Settings.theme.adjustedPixel(20);
178        }
179        height: Settings.theme.adjustedPixel(166);
180        width: Settings.theme.adjustedPixel(136);
181        source: Settings.theme.icon("SVG-Exit-1");
182        fillMode: Image.PreserveAspectFit
183        MouseArea {
184            anchors.fill: parent;
185            onClicked: {
186                mainWindow.desktopKoView.stopPresentation();
187                pageStack.layers.pop();
188                if(mainWindow.fullScreen === true) {
189                    mainWindow.fullScreen = false;
190                }
191            }
192        }
193    }
194    Label {
195        anchors {
196            top: parent.top;
197            left: parent.left;
198            right: parent.right;
199        }
200        horizontalAlignment: Text.AlignHCenter;
201        verticalAlignment: Text.AlignVCenter;
202        height: Settings.theme.adjustedPixel(166)
203        font: Settings.theme.font("presentationTime");
204        color: "#c1cdd1";
205        Timer {
206            interval: 1000;
207            running: true;
208            repeat: true;
209            triggeredOnStart: true;
210            function offset() {return new Date().getTimezoneOffset()*60000}
211            onTriggered: {
212                base.timePassed = base.timePassed + 1000;
213                parent.text = Qt.formatTime(new Date(base.timePassed + offset()), "hh:mm:ss");
214            }
215        }
216    }
217    Row {
218        anchors {
219            left: parent.left;
220            bottom: parent.bottom;
221            margins: Kirigami.Units.largeSpacing;
222        }
223        height: Settings.theme.adjustedPixel(136);
224        spacing: Kirigami.Units.largeSpacing;
225        Button {
226            height: parent.height;
227            width: height;
228            image: Settings.theme.icon("SVG-Nudge-1");
229            checked: fakePieChart.opacity === 1 || fakePieChartTapped.opacity === 1;
230            checkedColor: "#00adf5"; checkedOpacity: 0.6;
231            radius: 8;
232            onClicked: {
233                if(fakePieChart.opacity === 0) {
234                    fakePieChart.opacity = 1;
235                    laserScribbler.opacity = 0;
236                    scribbler.opacity = 0;
237                    scribbleTimer.start();
238                }
239                else {
240                    fakePieChart.opacity = 0;
241                    fakePieChartTapped.opacity = 0;
242                }
243            }
244        }
245        Button {
246            height: parent.height;
247            width: height;
248            image: Settings.theme.icon("SVG-Pointer-1");
249            checked: laserScribbler.opacity === 1;
250            checkedColor: "#00adf5"; checkedOpacity: 0.6;
251            radius: 8;
252            onClicked: {
253                if(laserScribbler.opacity === 0) {
254                    fakePieChart.opacity = 0;
255                    fakePieChartTapped.opacity = 0;
256                    laserScribbler.opacity = 1;
257                    scribbler.opacity = 0;
258                    scribbleTimer.start();
259                }
260                else {
261                    laserScribbler.opacity = 0;
262                }
263            }
264        }
265        Button {
266            height: parent.height;
267            width: height;
268            image: Settings.theme.icon("SVG-Highlighter-1");
269            checked: scribbler.opacity === 0.7;
270            checkedColor: "#00adf5"; checkedOpacity: 0.6;
271            radius: 8;
272            onClicked: {
273                if(scribbler.opacity === 0) {
274                    fakePieChart.opacity = 0;
275                    fakePieChartTapped.opacity = 0;
276                    laserScribbler.opacity = 0;
277                    scribbler.opacity = 0.7;
278                    scribbleTimer.stop();
279                }
280                else {
281                    scribbler.opacity = 0;
282                    scribbleTimer.start();
283                }
284            }
285        }
286    }
287    Row {
288        anchors {
289            horizontalCenter: parent.horizontalCenter;
290            bottom: parent.bottom;
291            margins: Kirigami.Units.largeSpacing;
292        }
293        height: Settings.theme.adjustedPixel(136);
294        spacing: Kirigami.Units.largeSpacing;
295        Button {
296            height: parent.height;
297            width: height;
298            image: Settings.theme.icon("SVG-PreviousSlide-1");
299            onClicked: {
300                if(base.currentSlide > 0) {
301                    base.changeSlide(base.currentSlide - 1);
302                }
303            }
304        }
305        Button {
306            height: parent.height;
307            width: height;
308            image: Settings.theme.icon("SVG-NextSlide-1");
309            onClicked: {
310                if(base.currentSlide < presentationModel.canvas.slideCount()) {
311                    base.changeSlide(base.currentSlide + 1);
312                }
313            }
314        }
315    }
316    Button {
317        anchors {
318            right: parent.right;
319            bottom: parent.bottom;
320            margins: Kirigami.Units.largeSpacing;
321        }
322        height: Settings.theme.adjustedPixel(136);
323        width: height;
324        image: Settings.theme.icon("SVG-FXTransition-1");
325        onClicked: base.state = "sidebarShown";
326    }
327    states: State {
328        name: "sidebarShown"
329        AnchorChanges { target: fxSidebar; anchors.left: undefined; anchors.right: parent.right; }
330    }
331    transitions: Transition {
332        AnchorAnimation { duration: Kirigami.Units.shortDuration; easing.type: Easing.InOutQuad; }
333    }
334    Item {
335        id: fxSidebar;
336        anchors {
337            top: parent.top;
338            left: parent.right;
339            bottom: parent.bottom;
340        }
341        Rectangle {
342            anchors.fill: parent;
343            color: "#22282f";
344            opacity: 0.96;
345        }
346        Rectangle {
347            anchors {
348                top: parent.top;
349                left: parent.left;
350                right: parent.right;
351            }
352            height: Constants.GridHeight;
353            color: "#4e5359";
354            Label {
355                anchors.fill: parent;
356                horizontalAlignment: Text.AlignHCenter;
357                verticalAlignment: Text.AlignVCenter;
358                color: "#c1cdd1";
359                font: Settings.theme.font("small");
360                text: "SELECT A NEW\nTRANSITION EFFECT";
361            }
362            Rectangle {
363                anchors {
364                    left: parent.left;
365                    right: parent.right;
366                    bottom: parent.bottom;
367                }
368                height: 1;
369                color: "#c1cccd";
370            }
371            MouseArea {
372                anchors.fill: parent;
373                onClicked: base.state = "";
374            }
375        }
376        width: Constants.GridWidth * 2;
377        Rectangle {
378            anchors {
379                top: parent.top;
380                left: parent.left;
381                bottom: parent.bottom;
382            }
383            width: 1;
384            color: "white";
385        }
386        ListView {
387            anchors {
388                fill: parent;
389                topMargin: Constants.GridHeight;
390                leftMargin: 1;
391            }
392            clip: true;
393            model: ListModel {
394                ListElement { text: "Fade"; }
395                ListElement { text: "Dissolve"; }
396                ListElement { text: "Slide in"; }
397                ListElement { text: "Bounce"; }
398                ListElement { text: "Fan"; }
399                ListElement { text: "Snake"; }
400                ListElement { text: "Spiral"; }
401                ListElement { text: "Swap effect"; }
402            }
403            delegate: Item {
404                height: Constants.GridHeight * 2;
405                width: ListView.view.width;
406                MouseArea {
407                    anchors.fill: parent;
408                    onClicked: {
409                        base.state = "";
410                        if(base.currentSlide < presentationModel.canvas.slideCount()) {
411                            base.changeSlide(base.currentSlide + 1);
412                        }
413                    }
414                    Rectangle {
415                        anchors.fill: parent;
416                        opacity: parent.pressed ? 0.6 : 0;
417                        Behavior on opacity { NumberAnimation { duration: Kirigami.Units.shortDuration; } }
418                        radius: Settings.theme.adjustedPixel(8);
419                        color: "#00adf5";
420                    }
421                }
422                Image {
423                    anchors.centerIn: parent;
424                    height: Constants.GridHeight * 1.3;
425                    width: height;
426                    source: Settings.theme.icon("SVG-Icon-Animations-1");
427                    sourceSize.width: width > height ? height : width;
428                    sourceSize.height: width > height ? height : width;
429                }
430                Label {
431                    anchors {
432                        left: parent.left;
433                        right: parent.right;
434                        bottom: parent.bottom;
435                        margins: Kirigami.Units.largeSpacing;
436                    }
437                    height: font.pixelSize;
438                    horizontalAlignment: Text.AlignHCenter;
439                    verticalAlignment: Text.AlignVCenter;
440                    color: "#c1cdd1";
441                    font: Settings.theme.font("presentationFx");
442                    text: model.text;
443                }
444                Rectangle {
445                    anchors {
446                        left: parent.left;
447                        right: parent.right;
448                        bottom: parent.bottom;
449                    }
450                    height: 1;
451                    color: "#c1cccd";
452                }
453            }
454        }
455    }
456}
457