diff --git a/source/qml/components/slider/SliderBasic.qml b/source/qml/components/slider/SliderBasic.qml new file mode 100644 --- /dev/null +++ b/source/qml/components/slider/SliderBasic.qml @@ -0,0 +1,127 @@ +/* + * Copyright 2018 Fabian Riethmayer + * + * This program is free software; you can redistribute it and/or modify + * it under the terms of the GNU Library General Public License as + * published by the Free Software Foundation; either version 2, or + * (at your option) any later version. + * + * This program 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 Library General Public License for more details + * + * You should have received a copy of the GNU Library General Public + * License along with this program; if not, write to the + * Free Software Foundation, Inc., + * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ + +import QtQuick 2.6 +import QtQuick.Controls 1.4 +import QtQuick.Layouts 1.2 +import org.kde.kirigami 2.4 as Kirigami +import QtQuick.Controls.Styles.Plasma 2.0 as Styles +import "../../lib" as HIG +import "../../lib/annotate.js" as A + +Rectangle { + width: 480 + height: 128 + id: root + + GridLayout { + columns: 3 + columnSpacing: Kirigami.Units.largeSpacing + x: 20 + y: 32 + width: 280 + + Label { + id: lbl1 + width: 60 + Layout.alignment: Qt.AlignLeft | Qt.AlignTop + text: "Select screen size:" + } + + ColumnLayout { + spacing: Kirigami.Units.largeSpacing + Item { + width: 200 + height: Kirigami.Units.largeSpacing * 3 + Slider { + id: sld1 + width: 200 + value: 1 + maximumValue: 5 + minimumValue: 0 + tickmarksEnabled: true + style: Styles.SliderStyle { + tickmarks: Repeater { + id: repeater + model: [0,1,2,3,4,5] + Rectangle { + color: "#777" + width: 1 ; + height: index == 0 || index == 5 ? Kirigami.Units.largeSpacing : Kirigami.Units.smallSpacing + y: repeater.height + x: styleData.handleWidth / 2 + index * ((repeater.width - styleData.handleWidth) / (repeater.count-1)) + } + } + } + } + } + Item { + width: 200 + height: units.largeSpacing + Label { + text: "640x480" + } + Label { + text: "5120×2880" + anchors.right: parent.right + } + } + } + + Label { + id: lbl2 + text: "1024x768" + Layout.alignment: Qt.AlignTop + height: units.largeSpacing + } + } + + HIG.Raster { + z: 1 + } + + // HACK coordinates are only final after a small delay + Timer { + interval: 1000 + repeat: false + running: true + onTriggered: { + var a = new A.An(lbl1); + a.draw({ + outline: {label: false}, + ruler: {offset: lbl1.mapToItem(root, 0, 0).y + lbl1.height, horizontal: true}, + brace: {to: new A.An(sld1), text: "8px", center: false} + }); + + a = new A.An(sld1); + a.draw({ + outline: {label: false}, + ruler: [ + {}, + {offset: sld1.mapToItem(root, 0, 0).x + sld1.width} + ], + brace: {to: new A.An(lbl2), text: "8px", center: false} + }); + a = new A.An(lbl2); + a.draw({ + outline: {label: false} + }); + } + } +} diff --git a/source/qml/components/slider/SliderKirigami.qml b/source/qml/components/slider/SliderKirigami.qml new file mode 100644 --- /dev/null +++ b/source/qml/components/slider/SliderKirigami.qml @@ -0,0 +1,106 @@ +//import related modules +import QtQuick 2.3 +import QtQuick.Layouts 1.3 +import QtQuick.Controls 1.4 +import QtQuick.Window 2.2 +import org.kde.plasma.core 2.0 as PlasmaCore +// import org.kde.plasma.components 2.0 as PlasmaComponents +import org.kde.kirigami 2.0 as Kirigami + +Rectangle { + width: 480 + height: 128 + id: root + + GridLayout { + columns: 3 + columnSpacing: units.smallSpacing * 2 + x: 20 + y: 32 + width: 280 + + Label { + id: lbl1 + width: 60 + Layout.alignment: Qt.AlignRight + anchors.top: parent.top + //anchors.top: parent.top + text: "Select screen size:" + } + + ColumnLayout { + spacing: units.smallSpacing * 2 + Item { + width: 200 + height: units.largeSpacing + Kirigami.Slider { + id: sld1 + width: 200 + value: 1 + maximumValue: 5 + minimumValue: 0 + tickmarksEnabled: true + /*style: Styles.SliderStyle { + tickmarks: Repeater { + id: repeater + model: [0,1,2,3,4,5] + Rectangle { + color: "#777" + width: 1 ; + height: index == 0 || index == 5 ? 8 : 4 + y: repeater.height + x: styleData.handleWidth / 2 + index * ((repeater.width - styleData.handleWidth) / (repeater.count-1)) + } + } + }*/ + } + } + Item { + width: 200 + height: units.largeSpacing + Label { + text: "640x480" + } + Label { + text: "5120×2880" + anchors.right: parent.right + } + } + } + + Label { + id: lbl2 + text: "1024x768" + anchors.top: parent.top + height: units.largeSpacing + } + } + + BaselineGrid { + z: 1 + color: "rgba(150, 150, 150, 0.2)" + } + + // HACK coordinates are only final after a small delay + Timer { + interval: 1000 + repeat: false + running: true + onTriggered: { + //Add ruler + var ruler = Qt.createComponent("../Ruler.qml"); + ruler.createObject(root, {ry: lbl1.mapToItem(root, 0, 0).y + lbl1.height}); + ruler.createObject(root, {rx: sld1.mapToItem(root, 0, 0).x, horizontal: false}); + ruler.createObject(root, {rx: sld1.mapToItem(root, 0, 0).x + sld1.width, horizontal: false}); +// + var brace = Qt.createComponent("../Brace.qml"); + brace.createObject(root, {"from": lbl1, "to": sld1, "text": "8px", center: false}); + brace.createObject(root, {"from": sld1, "to": lbl2, "text": "8px", center: false}); + + var outline = Qt.createComponent("../Outline.qml"); + outline.createObject(root, {item: sld1, label: false}); + outline.createObject(root, {item: lbl1, label: false}); + outline.createObject(root, {item: lbl2, label: false}); + } + } +} diff --git a/source/qml/components/slider/SliderSpeed.qml b/source/qml/components/slider/SliderSpeed.qml new file mode 100644 --- /dev/null +++ b/source/qml/components/slider/SliderSpeed.qml @@ -0,0 +1,91 @@ +/* + * Copyright 2018 Fabian Riethmayer + * + * This program is free software; you can redistribute it and/or modify + * it under the terms of the GNU Library General Public License as + * published by the Free Software Foundation; either version 2, or + * (at your option) any later version. + * + * This program 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 Library General Public License for more details + * + * You should have received a copy of the GNU Library General Public + * License along with this program; if not, write to the + * Free Software Foundation, Inc., + * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ + +import QtQuick 2.6 +import QtQuick.Controls 1.4 +import QtQuick.Layouts 1.2 +import org.kde.kirigami 2.4 as Kirigami +import QtQuick.Controls.Styles.Plasma 2.0 as Styles +import "../../lib" as HIG +import "../../lib/annotate.js" as A + +Rectangle { + width: 480 + height: 120 + id: root + + GridLayout { + columns: 3 + columnSpacing: Kirigami.Units.largeSpacing + x: 20 + y: 32 + width: 280 + + Label { + id: lbl1 + width: 60 + Layout.alignment: Qt.AlignRight + text: "Movement speed" + } + + ColumnLayout { + spacing: 8 + Item { + width: 200 + height: 20 + Slider { + id: sld1 + width: 200 + value: 1 + maximumValue: 5 + minimumValue: 0 + tickmarksEnabled: true + stepSize: 1 + } + } + } + SpinBox { + id: lbl2 + value: 1.5 + } + } + + HIG.Raster { + z: 1 + } + + // HACK coordinates are only final after a small delay + Timer { + interval: 1000 + repeat: false + running: true + onTriggered: { + var a = new A.An(lbl1); + a.draw({ + ruler: {offset: lbl1.mapToItem(root, 0, 0).y + lbl1.height, horizontal: true}, + brace: {to: new A.An(sld1), text: "8px", center: false} + }); + + a = new A.An(sld1); + a.draw({ + brace: {to: new A.An(lbl2), text: "8px", center: false} + }); + } + } +} diff --git a/source/qml/components/slider/SliderValue.qml b/source/qml/components/slider/SliderValue.qml new file mode 100644 --- /dev/null +++ b/source/qml/components/slider/SliderValue.qml @@ -0,0 +1,110 @@ +/* + * Copyright 2018 Fabian Riethmayer + * + * This program is free software; you can redistribute it and/or modify + * it under the terms of the GNU Library General Public License as + * published by the Free Software Foundation; either version 2, or + * (at your option) any later version. + * + * This program 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 Library General Public License for more details + * + * You should have received a copy of the GNU Library General Public + * License along with this program; if not, write to the + * Free Software Foundation, Inc., + * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ + +import QtQuick 2.6 +import QtQuick.Controls 1.4 +import QtQuick.Layouts 1.2 +import org.kde.kirigami 2.4 as Kirigami +import QtQuick.Controls.Styles.Plasma 2.0 as Styles +import "../../lib" as HIG +import "../../lib/annotate.js" as A + +Rectangle { + width: 480 + height: 160 + id: root + + GridLayout { + columns: 3 + columnSpacing: Kirigami.Units.largeSpacing * 2 + rowSpacing: 72 + x: 20 + y: 32 + width: 280 + + Label { + id: lbl1 + width: 60 + Layout.alignment: Qt.AlignRight | Qt.AlignTop + text: "Icon size:" + } + + ColumnLayout { + spacing: Kirigami.Units.largeSpacing + Item { + width: 200 + height: Kirigami.Units.largeSpacing + Slider { + id: sld1 + width: 200 + value: 1 + maximumValue: 5 + minimumValue: 0 + } + } + } + + Label { + id: lbl2 + text: "112px" + Layout.alignment: Qt.AlignTop + height: Kirigami.Units.largeSpacing + } + Label { + x: 5 + y: 5 + } + + Item { + width: 200 + height: Kirigami.Units.largeSpacing + Slider { + id: sld2 + width: 200 + value: 1 + maximumValue: 5 + minimumValue: 0 + } + Rectangle { + color: "#3b4045" + height: childrenRect.height + Kirigami.Units.largeSpacing * 1.5; + width: childrenRect.width + Kirigami.Units.largeSpacing * 2 + x: 20 + y: -30 + Label { + x: Kirigami.Units.largeSpacing + y: Kirigami.Units.largeSpacing * 1.5 + color: "#fcfcfc" + id: lbl3 + text: "112px" + anchors.top: parent.top + height: Kirigami.Units.largeSpacing + } + } + } + Rectangle { + x: 5 + y: 5 + } + } + + HIG.Raster { + z: 1 + } +} diff --git a/source/qml/components/slider/SliderVolume.qml b/source/qml/components/slider/SliderVolume.qml new file mode 100644 --- /dev/null +++ b/source/qml/components/slider/SliderVolume.qml @@ -0,0 +1,104 @@ +/* + * Copyright 2018 Fabian Riethmayer + * + * This program is free software; you can redistribute it and/or modify + * it under the terms of the GNU Library General Public License as + * published by the Free Software Foundation; either version 2, or + * (at your option) any later version. + * + * This program 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 Library General Public License for more details + * + * You should have received a copy of the GNU Library General Public + * License along with this program; if not, write to the + * Free Software Foundation, Inc., + * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ + +import QtQuick 2.6 +import QtQuick.Controls 1.4 +import QtQuick.Layouts 1.2 +import org.kde.kirigami 2.4 as Kirigami +import QtQuick.Controls.Styles.Plasma 2.0 as Styles +import "../../lib" as HIG +import "../../lib/annotate.js" as A + +Rectangle { + width: 480 + height: 100 + id: root + + GridLayout { + columns: 3 + columnSpacing: Kirigami.Units.largeSpacing * 2 + x: 20 + y: 32 + width: 280 + + Label { + id: lbl1 + width: 60 + Layout.alignment: Qt.AlignLeft | Qt.AlignTop + text: "Volume" + } + + ColumnLayout { + spacing: Kirigami.Units.largeSpacing * 2 + Item { + width: 200 + height: Kirigami.Units.largeSpacing + Slider { + id: sld1 + width: 200 + value: 1 + maximumValue: 4 + minimumValue: 0 + stepSize: 0.5 + tickmarksEnabled: true + } + } + } + + Label { + id: lbl2 + text: "20%" + Layout.alignment: Qt.AlignTop + height: units.largeSpacing + } + } + + HIG.Raster { + z: 1 + } + + // HACK coordinates are only final after a small delay + Timer { + interval: 1000 + repeat: false + running: true + onTriggered: { + var a = new A.An(lbl1); + a.draw({ + outline: {label: false}, + ruler: {offset: lbl1.mapToItem(root, 0, 0).y + lbl1.height, horizontal: true}, + brace: {to: new A.An(sld1), text: "8px", center: false} + }); + + a = new A.An(sld1); + a.draw({ + outline: {label: false}, + ruler: [ + {}, + {offset: sld1.mapToItem(root, 0, 0).x + sld1.width} + ], + brace: {to: new A.An(lbl2), text: "8px", center: false} + }); + a = new A.An(lbl2); + a.draw({ + outline: {label: false} + }); + } + } +} diff --git a/source/qml/components/slider/SliderWide.qml b/source/qml/components/slider/SliderWide.qml new file mode 100644 --- /dev/null +++ b/source/qml/components/slider/SliderWide.qml @@ -0,0 +1,106 @@ +//import related modules +import QtQuick 2.3 +import QtQuick.Layouts 1.3 +import QtQuick.Controls 1.4 +import QtQuick.Window 2.2 +import org.kde.plasma.core 2.0 as PlasmaCore +import org.kde.plasma.components 2.0 as PlasmaComponents +import QtQuick.Controls.Styles.Plasma 2.0 as Styles + +Rectangle { + width: 640 + height: 120 + id: root + + GridLayout { + columns: 4 + columnSpacing: 8 + x: 20 + y: 30 + width: 280 + + Label { + id: lbl1 + width: 60 + Layout.alignment: Qt.AlignRight + anchors.top: parent.top + //anchors.top: parent.top + text: "Select screen size:" + } + Rectangle { + width: 20 + } + + Label { + id: lbl2 + text: "1024x768" + height: 20 + } + Rectangle { + width: 20 + } + + Rectangle { + width: 20 + } + Label { + id: lbl3 + anchors.topMargin: 16 + text: "640x480" + } + + Item { + width: 200 + height: 20 + Slider { + id: sld1 + width: 200 + value: 1 + maximumValue: 5 + minimumValue: 0 + tickmarksEnabled: true + style: Styles.SliderStyle { + tickmarks: Repeater { + id: repeater + model: [0,1,2,3,4,5] + Rectangle { + color: "#777" + width: 1 ; height: 3 + y: repeater.height + x: styleData.handleWidth / 2 + index * ((repeater.width - styleData.handleWidth) / (repeater.count-1)) + } + } + } + } + } + Label { + id: lbl4 + text: "UHD" + } + } + + BaselineGrid { + z: 1 + base: 4 + color: "rgba(150, 150, 150, 0.2)" + } + + // HACK coordinates are only final after a small delay + Timer { + interval: 1000 + repeat: false + running: true + onTriggered: { + //Add ruler + var ruler = Qt.createComponent("../Ruler.qml"); + ruler.createObject(root, {ry: lbl1.mapToItem(root, 0, 0).y + lbl1.height - 4}); +// + var brace = Qt.createComponent("../Brace.qml"); + brace.createObject(root, {"from": lbl1, "to": lbl3, "text": "8", center: false}); + +// var outline = Qt.createComponent("../Outline.qml"); +// outline.createObject(root, {item: sld1, label: false}); +// outline.createObject(root, {item: lbl1, label: false}); + } + } +}