From c116dba2e8c01f1a385a1b9b05a0b68ba3e0e35a Mon Sep 17 00:00:00 2001 From: Adriaan de Groot Date: Wed, 7 Mar 2018 23:07:15 +0100 Subject: [PATCH] QML: add navigation items - Add a NavButton, which shows a directional arrow, and fades in on hover. It can be used left- or right- by setting an image source and click handler. - Specialize NavButton to Forward and BackButton. - Add a SlideCounter navigation aid. --- src/qml/calamares/slideshow/BackButton.qml | 24 +++++++ src/qml/calamares/slideshow/ForwardButton.qml | 23 +++++++ src/qml/calamares/slideshow/NavButton.qml | 68 +++++++++++++++++++ src/qml/calamares/slideshow/SlideCounter.qml | 37 ++++++++++ src/qml/calamares/slideshow/qmldir | 6 ++ 5 files changed, 158 insertions(+) create mode 100644 src/qml/calamares/slideshow/BackButton.qml create mode 100644 src/qml/calamares/slideshow/ForwardButton.qml create mode 100644 src/qml/calamares/slideshow/NavButton.qml create mode 100644 src/qml/calamares/slideshow/SlideCounter.qml diff --git a/src/qml/calamares/slideshow/BackButton.qml b/src/qml/calamares/slideshow/BackButton.qml new file mode 100644 index 000000000..2d5f4dd5e --- /dev/null +++ b/src/qml/calamares/slideshow/BackButton.qml @@ -0,0 +1,24 @@ +/* === This file is part of Calamares - === + * + * Copyright 2018, Adriaan de Groot + * + * Calamares is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * Calamares is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with Calamares. If not, see . + */ + +NavButton { + id: backButton + anchors.left: parent.left + visible: parent.currentSlide > 0 + isForward: false +} diff --git a/src/qml/calamares/slideshow/ForwardButton.qml b/src/qml/calamares/slideshow/ForwardButton.qml new file mode 100644 index 000000000..9f6fecf8e --- /dev/null +++ b/src/qml/calamares/slideshow/ForwardButton.qml @@ -0,0 +1,23 @@ +/* === This file is part of Calamares - === + * + * Copyright 2018, Adriaan de Groot + * + * Calamares is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * Calamares is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with Calamares. If not, see . + */ + +NavButton { + id: forwardButton + anchors.right: parent.right + visible: parent.currentSlide + 1 < parent.slides.length; +} diff --git a/src/qml/calamares/slideshow/NavButton.qml b/src/qml/calamares/slideshow/NavButton.qml new file mode 100644 index 000000000..dbe211bdb --- /dev/null +++ b/src/qml/calamares/slideshow/NavButton.qml @@ -0,0 +1,68 @@ +/* === This file is part of Calamares - === + * + * Copyright 2018, Adriaan de Groot + * + * Calamares is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * Calamares is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with Calamares. If not, see . + */ + +/* This is a navigation (arrow) button that fades in on hover, and + * which calls forward / backward navigation on the presentation it + * is in. It should be a child item of the presentation (not of a + * single slide). Use the ForwardButton or BackButton for a pre- + * configured instance that interacts with the presentation. + */ + +import QtQuick 2.2; + +Image { + id: fade + + property bool isForward : true + + width: 100 + height: 100 + anchors.verticalCenter: parent.verticalCenter + opacity: 0.3 + + OpacityAnimator { + id: fadeIn + target: fade + from: fade.opacity + to: 1.0 + duration: 500 + running: false + } + + OpacityAnimator { + id: fadeOut + target: fade + from: fade.opacity + to: 0.3 + duration: 250 + running: false + } + + MouseArea { + anchors.fill: parent + hoverEnabled: true + onEntered: { fadeOut.running = false; fadeIn.running = true } + onExited: { fadeIn.running = false ; fadeOut.running = true } + onClicked: { + if (isForward) + fade.parent.goToNextSlide() + else + fade.parent.goToPreviousSlide() + } + } +} diff --git a/src/qml/calamares/slideshow/SlideCounter.qml b/src/qml/calamares/slideshow/SlideCounter.qml new file mode 100644 index 000000000..3252fe552 --- /dev/null +++ b/src/qml/calamares/slideshow/SlideCounter.qml @@ -0,0 +1,37 @@ +/* === This file is part of Calamares - === + * + * Copyright 2018, Adriaan de Groot + * + * Calamares is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * Calamares is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with Calamares. If not, see . + */ + +/* This control just shows a (non-translated) count of the slides + * in the slideshow in the format "n / total". + */ + +import QtQuick 2.2; + +Rectangle { + id: slideCounter + anchors.right: parent.right + anchors.bottom: parent.bottom + width: 100 + height: 50 + + Text { + id: slideCounterText + anchors.centerIn: parent + text: ( parent.parent.currentSlide + 1 ) + " / " + parent.parent.slides.length + } +} diff --git a/src/qml/calamares/slideshow/qmldir b/src/qml/calamares/slideshow/qmldir index 5a0c277b4..7b964b831 100644 --- a/src/qml/calamares/slideshow/qmldir +++ b/src/qml/calamares/slideshow/qmldir @@ -1,4 +1,10 @@ module calamares.slideshow + Presentation 1.0 Presentation.qml Slide 1.0 Slide.qml +NavButton 1.0 NavButton.qml +ForwardButton 1.0 ForwardButton.qml +BackButton 1.0 BackButton.qml + +SlideCounter 1.0 SlideCounter.qml