diff --git a/HIG/source/img/Form3.png b/HIG/source/img/Form3.png new file mode 100644 index 0000000..aeb3206 Binary files /dev/null and b/HIG/source/img/Form3.png differ diff --git a/HIG/source/img/Form4.png b/HIG/source/img/Form4.png new file mode 100644 index 0000000..a6a6ff2 Binary files /dev/null and b/HIG/source/img/Form4.png differ diff --git a/HIG/source/img/Form_Align_KDE3.png b/HIG/source/img/Form_Align_KDE3.png new file mode 100644 index 0000000..c1428d2 Binary files /dev/null and b/HIG/source/img/Form_Align_KDE3.png differ diff --git a/HIG/source/img/Form_Align_KDE3.qml.png b/HIG/source/img/Form_Align_KDE3.qml.png deleted file mode 100644 index 77bbd0a..0000000 Binary files a/HIG/source/img/Form_Align_KDE3.qml.png and /dev/null differ diff --git a/HIG/source/img/Form_Align_KDE5.png b/HIG/source/img/Form_Align_KDE5.png new file mode 100644 index 0000000..5bc9b5a Binary files /dev/null and b/HIG/source/img/Form_Align_KDE5.png differ diff --git a/HIG/source/img/Form_Align_KDE5.qml.png b/HIG/source/img/Form_Align_KDE5.qml.png deleted file mode 100644 index 4997cac..0000000 Binary files a/HIG/source/img/Form_Align_KDE5.qml.png and /dev/null differ diff --git a/HIG/source/img/Form_Align_Long.png b/HIG/source/img/Form_Align_Long.png new file mode 100644 index 0000000..5e3586f Binary files /dev/null and b/HIG/source/img/Form_Align_Long.png differ diff --git a/HIG/source/img/Form_Align_Long.qml.png b/HIG/source/img/Form_Align_Long.qml.png deleted file mode 100644 index b1692f3..0000000 Binary files a/HIG/source/img/Form_Align_Long.qml.png and /dev/null differ diff --git a/HIG/source/img/Form_Align_NO.png b/HIG/source/img/Form_Align_NO.png new file mode 100644 index 0000000..155a5b7 Binary files /dev/null and b/HIG/source/img/Form_Align_NO.png differ diff --git a/HIG/source/img/Form_Align_NO.qml.png b/HIG/source/img/Form_Align_NO.qml.png deleted file mode 100644 index 506962d..0000000 Binary files a/HIG/source/img/Form_Align_NO.qml.png and /dev/null differ diff --git a/HIG/source/img/Form_Align_OSX.png b/HIG/source/img/Form_Align_OSX.png new file mode 100644 index 0000000..053ac16 Binary files /dev/null and b/HIG/source/img/Form_Align_OSX.png differ diff --git a/HIG/source/img/Form_Align_OSX.qml.png b/HIG/source/img/Form_Align_OSX.qml.png deleted file mode 100644 index 86455a3..0000000 Binary files a/HIG/source/img/Form_Align_OSX.qml.png and /dev/null differ diff --git a/HIG/source/img/Form_Align_Space.qml.png b/HIG/source/img/Form_Align_Space.qml.png deleted file mode 100644 index fb9510e..0000000 Binary files a/HIG/source/img/Form_Align_Space.qml.png and /dev/null differ diff --git a/HIG/source/img/Form_Align_YES.png b/HIG/source/img/Form_Align_YES.png new file mode 100644 index 0000000..e494738 Binary files /dev/null and b/HIG/source/img/Form_Align_YES.png differ diff --git a/HIG/source/img/Form_Align_YES.qml.png b/HIG/source/img/Form_Align_YES.qml.png deleted file mode 100644 index 33b820f..0000000 Binary files a/HIG/source/img/Form_Align_YES.qml.png and /dev/null differ diff --git a/HIG/source/img/Form_Align_YES_Mobile.png b/HIG/source/img/Form_Align_YES_Mobile.png new file mode 100644 index 0000000..8a071d0 Binary files /dev/null and b/HIG/source/img/Form_Align_YES_Mobile.png differ diff --git a/HIG/source/img/Form_Align_YES_Mobile.qml.png b/HIG/source/img/Form_Align_YES_Mobile.qml.png deleted file mode 100644 index c1dcbdf..0000000 Binary files a/HIG/source/img/Form_Align_YES_Mobile.qml.png and /dev/null differ diff --git a/HIG/source/patterns/content/form.rst b/HIG/source/patterns/content/form.rst index b14b7ec..92b802f 100644 --- a/HIG/source/patterns/content/form.rst +++ b/HIG/source/patterns/content/form.rst @@ -1,111 +1,136 @@ Form ==== A form layout is used to help align and structure a layout containing many control and input fields. When to Use ----------- - Use a Form layout when there are many related controls and input fields. - Form layouts are ideal for :doc:`settings dialogs `. How to Use ---------- -- On |desktopicon| Desktop it is recommended to place the labels to the left +Alignment +^^^^^^^^^ + +|desktopicon| Desktop +""""""""""""""""""""" + +- On Desktop it is recommended to place the labels to the left of the connected widgets. Labels that are to the left of their connected widgets should be right-aligned and end with a colon (in case of right-to-left languages, mirror the alignment). This makes the whole group of form widgets appear to be center-aligned. In Qt 5, using a QFormLayout handles all of this for you automatically. - See the pages on :doc:`radio buttons ` and :doc:`checkboxes ` for detailed information regarding how to align these tricky controls in a Form layout. .. container:: flex .. container:: - .. figure:: /img/Form_Align_KDE3.qml.png + .. figure:: /img/Form_Align_KDE3.png :scale: 80% :figclass: dont :iconred:`Don't.` |br| Don't use KDE3-style form alignment .. container:: - .. figure:: /img/Form_Align_KDE5.qml.png + .. figure:: /img/Form_Align_KDE5.png :scale: 80% :figclass: do :noblefir:`Do.` |br| Use Plasma 5-style form alignment. .. container:: flex .. container:: - .. figure:: /img/Form_Align_OSX.qml.png + .. figure:: /img/Form_Align_OSX.png :scale: 80% :figclass: dont :iconred:`Don't.` |br| Don't use macOS-style form alignment. .. container:: - .. figure:: /img/Form_Align_KDE5.qml.png + .. figure:: /img/Form_Align_KDE5.png :scale: 80% :figclass: do :noblefir:`Do.` |br| Use Plasma 5-style form alignment. - Position groups of items vertically rather than horizontally, as this makes them easier to scan visually. Use horizontal or rectangular positioning only if it would greatly improve the layout of the window. - Left align controls over multiple groups. This visual anchor facilitates scanning of content, and left-hand alignment fits as well forms that have been oversized individually. .. container:: flex .. container:: - .. figure:: /img/Form_Align_NO.qml.png + .. figure:: /img/Form_Align_NO.png :scale: 80% :figclass: dont :iconred:`Don't.` |br| Don't misalign controls. .. container:: - .. figure:: /img/Form_Align_YES.qml.png + .. figure:: /img/Form_Align_YES.png :scale: 80% :figclass: do :noblefir:`Do.` |br| Align controls to the left. - Keep track of label sizes; avoid big differences in text length that could result in too much whitespace for multiple aligned controls. Keep translation in mind too; existing length differences will be exaggerated for wordy languages such as German and Brazilian Portuguese. - .. figure:: /img/Form_Align_Long.qml.png + .. figure:: /img/Form_Align_Long.png :scale: 80% :figclass: dont :iconred:`Don't.` |br| Don't use very long captions. -- For |mobileicon| mobile, or if only narrow space is available, it is + +|mobileicon| Mobile and narrow space +"""""""""""""""""""""""""""""""""""" + +- For mobile, or if only narrow space is available, it is recommended to place the labels above the connected widgets. - When using labels on top, labels and widgets should be left-aligned. -.. image:: /img/Form_Align_YES_Mobile.qml.png +.. image:: /img/Form_Align_YES_Mobile.png :scale: 80% +Spacing +^^^^^^^ + +Use :doc:`spacing ` to group and seperate controls in your +forms. + +.. figure:: /img/Form3.png + + Spacing used to create three groups of controls + +Alternative, you can use seperators for a stronger separation. + +.. figure:: /img/Form4.png + + Using a separator to group controls diff --git a/HIG/source/qml/patterns/content/form/Form3.qml b/HIG/source/qml/patterns/content/form/Form3.qml new file mode 100644 index 0000000..c419c4e --- /dev/null +++ b/HIG/source/qml/patterns/content/form/Form3.qml @@ -0,0 +1,150 @@ +/* + * 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.7 +import QtQuick.Controls 2.0 as Controls +import QtQuick.Layouts 1.3 as Layouts + +import org.kde.kcm 1.1 as KCM +import org.kde.kirigami 2.4 as Kirigami + +import "../../../lib/annotate.js" as A +import "../../../lib/" as HIG + +Kirigami.ApplicationItem { + width: 640 + height: 320 + + Kirigami.ScrollablePage { + id: root + anchors.fill: parent + spacing: Kirigami.Units.smallSpacing + + property size sizeHint: Qt.size(formLayout.width, Math.round(1.1 * formLayout.height)) + property size minimumSizeHint: Qt.size(formLayout.width, Math.round(1.1 * formLayout.height)) + + signal changeSignal() + + property QtObject device: deviceModel[0] + + property bool loading: false + + Kirigami.FormLayout { + id: formLayout + + // General + Controls.CheckBox { + Kirigami.FormData.label: i18nd("kcmmouse", "General:") + id: leftHanded + text: i18nd("kcmmouse", "Left handed mode") + + +// ToolTip { +// text: i18nd("kcmmouse", "Swap left and right buttons.") +// } + } + + Controls.CheckBox { + id: middleEmulation + text: i18nd("kcmmouse", "Press left and right buttons for middle-click") + +// ToolTip { +// text: i18nd("kcmmouse", "Clicking left and right button simultaneously sends middle button click.") +// } + } + + Item { + Kirigami.FormData.isSection: false + } + + // Acceleration + Controls.Slider { + Kirigami.FormData.label: i18nd("kcmmouse", "Pointer speed:") + id: accelSpeed + + from: 1 + to: 11 + stepSize: 1 + } + + Layouts.ColumnLayout { + id: accelProfile + spacing: Kirigami.Units.smallSpacing + Kirigami.FormData.label: i18nd("kcmmouse", "Acceleration profile:") + Kirigami.FormData.buddyFor: accelProfileFlat + + Controls.RadioButton { + id: accelProfileFlat + text: i18nd("kcmmouse", "Flat") + +// ToolTip { +// text: i18nd("kcmmouse", "Cursor moves the same distance as the mouse movement.") +// } + onCheckedChanged: accelProfile.syncCurrent() + } + + Controls.RadioButton { + id: accelProfileAdaptive + text: i18nd("kcmmouse", "Adaptive") + +// ToolTip { +// text: i18nd("kcmmouse", "Cursor travel distance depends on the mouse movement speed.") +// } + onCheckedChanged: accelProfile.syncCurrent() + } + } + + Item { + Kirigami.FormData.isSection: false + } + + // Scrolling + Controls.CheckBox { + Kirigami.FormData.label: i18nd("kcmmouse", "Scrolling:") + id: naturalScroll + text: i18nd("kcmmouse", "Invert scroll direction") + +// ToolTip { +// text: i18nd("kcmmouse", "Touchscreen like scrolling.") +// } + } + } + } + + HIG.Raster { + } + + // HACK + Timer { + interval: 1000 + repeat: false + running: true + onTriggered: { + var a = new A.An(formLayout); + a.find("qquickcheckbox").eq(1).draw({ + brace: {to: a.find("qquickslider"), horizontal: false} + }) + +// a.find("qquickradiobutton").eq(1).draw({ +// brace: {to: a.find("qquickcheckbox").eq(2), horizontal: false} +// }) + qmlControler.start(); + } + } +} diff --git a/HIG/source/qml/patterns/content/form/Form4.qml b/HIG/source/qml/patterns/content/form/Form4.qml new file mode 100644 index 0000000..d9e74a4 --- /dev/null +++ b/HIG/source/qml/patterns/content/form/Form4.qml @@ -0,0 +1,140 @@ +/* + * 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.7 +import QtQuick.Controls 2.0 as Controls +import QtQuick.Layouts 1.3 as Layouts +import org.kde.kirigami 2.4 as Kirigami + +import "../../../lib/annotate.js" as A +import "../../../lib/" as HIG + +Kirigami.ApplicationItem { + width: 640 + height: 320 + + Kirigami.ScrollablePage { + id: root + anchors.fill: parent + spacing: Kirigami.Units.smallSpacing + + property size sizeHint: Qt.size(formLayout.width, Math.round(1.1 * formLayout.height)) + property size minimumSizeHint: Qt.size(formLayout.width, Math.round(1.1 * formLayout.height)) + + signal changeSignal() + + property QtObject device: deviceModel[0] + + property bool loading: false + + Kirigami.FormLayout { + id: formLayout + + // General + Controls.CheckBox { + Kirigami.FormData.label: i18nd("kcmmouse", "General:") + id: leftHanded + text: i18nd("kcmmouse", "Left handed mode") + + +// ToolTip { +// text: i18nd("kcmmouse", "Swap left and right buttons.") +// } + } + + Controls.CheckBox { + id: middleEmulation + text: i18nd("kcmmouse", "Press left and right buttons for middle-click") + +// ToolTip { +// text: i18nd("kcmmouse", "Clicking left and right button simultaneously sends middle button click.") +// } + } + + Kirigami.Separator { + Kirigami.FormData.isSection: true + } + + // Acceleration + Controls.Slider { + Kirigami.FormData.label: i18nd("kcmmouse", "Pointer speed:") + id: accelSpeed + + from: 1 + to: 11 + stepSize: 1 + } + + Layouts.ColumnLayout { + id: accelProfile + spacing: Kirigami.Units.smallSpacing + Kirigami.FormData.label: i18nd("kcmmouse", "Acceleration profile:") + Kirigami.FormData.buddyFor: accelProfileFlat + + Controls.RadioButton { + id: accelProfileFlat + text: i18nd("kcmmouse", "Flat") + +// ToolTip { +// text: i18nd("kcmmouse", "Cursor moves the same distance as the mouse movement.") +// } + onCheckedChanged: accelProfile.syncCurrent() + } + + Controls.RadioButton { + id: accelProfileAdaptive + text: i18nd("kcmmouse", "Adaptive") + +// ToolTip { +// text: i18nd("kcmmouse", "Cursor travel distance depends on the mouse movement speed.") +// } + onCheckedChanged: accelProfile.syncCurrent() + } + } + + Item { + Kirigami.FormData.isSection: false + } + } + } + + HIG.Raster { + } + + // HACK + Timer { + interval: 500 + repeat: false + running: true + onTriggered: { + console.log(Kirigami.Units.smallSpacing); + var a = new A.An(formLayout); + //a.tree(); + a.find("qquickcheckbox").eq(1).draw({ + brace: {to: a.find("qquickslider"), horizontal: false} + }) + +// a.find("qquickradiobutton").eq(1).draw({ +// brace: {to: a.find("qquickcheckbox").eq(2), horizontal: false} +// }) + + qmlControler.start(); + } + } +} diff --git a/HIG/source/qml/patterns/content/form/Form_Align.qml b/HIG/source/qml/patterns/content/form/Form_Align.qml new file mode 100644 index 0000000..116e6d5 --- /dev/null +++ b/HIG/source/qml/patterns/content/form/Form_Align.qml @@ -0,0 +1,76 @@ +/* + * 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.7 +import QtQuick.Controls 2.0 +import QtQuick.Layouts 1.3 +import org.kde.kirigami 2.4 as Kirigami + +import "../../../lib/" as HIG + +Kirigami.ApplicationItem { + width: 420 + height: 300 + + Kirigami.ScrollablePage { + id: formLayout + anchors.fill: parent + spacing: Kirigami.Units.smallSpacing + + property size sizeHint: Qt.size(formLayout.width, Math.round(1.1 * formLayout.height)) + property size minimumSizeHint: Qt.size(formLayout.width, Math.round(1.1 * formLayout.height)) + + property bool loading: false + + Kirigami.FormLayout { + TextField { + Kirigami.FormData.label: "Caption:" + id: input1 + } + TextField { + Kirigami.FormData.label: "Long caption:" + } + TextField { + Kirigami.FormData.label: "Very long caption:" + id: input3 + } + Item { + Kirigami.FormData.isSection: false + } + + ComboBox { + Kirigami.FormData.label: "Caption:" + id: input4 + model: ["alpha"] + } + SpinBox { + Kirigami.FormData.label: "One more:" + value: 42 + } + CheckBox { + Kirigami.FormData.label: "Long caption:" + text: "Check me" + } + } + } + + HIG.Raster { + desktop: true + } +} diff --git a/HIG/source/qml/patterns/content/form/Form_Align_KDE3.qml b/HIG/source/qml/patterns/content/form/Form_Align_KDE3.qml new file mode 100644 index 0000000..2b9109f --- /dev/null +++ b/HIG/source/qml/patterns/content/form/Form_Align_KDE3.qml @@ -0,0 +1,58 @@ +/* + * 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.7 +import QtQuick.Controls 2.0 +import QtQuick.Layouts 1.3 as Layouts + +import "../../../lib/" as HIG + +Rectangle { + width: 400 + height: 180 + + Layouts.GridLayout { + x: units.largeSpacing + y: units.largeSpacing + columnSpacing: units.smallSpacing + rowSpacing: units.smallSpacing + columns: 2 + z: 2 + + Label { + text: "Profile name:" + } + TextField { + + } + Label { + text: "Command:" + } + TextField { + } + Label { + text: "Initial directory:" + } + TextField { + } + } + + HIG.Raster { + } +} diff --git a/HIG/source/qml/patterns/content/form/Form_Align_KDE5.qml b/HIG/source/qml/patterns/content/form/Form_Align_KDE5.qml new file mode 100644 index 0000000..f233229 --- /dev/null +++ b/HIG/source/qml/patterns/content/form/Form_Align_KDE5.qml @@ -0,0 +1,62 @@ +/* + * 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.7 +import QtQuick.Controls 2.0 +import QtQuick.Layouts 1.3 as Layouts +import org.kde.kirigami 2.4 as Kirigami + +import "../../../lib/" as HIG + +Kirigami.ApplicationItem { + width: 400 + height: 180 + + Kirigami.ScrollablePage { + id: root + anchors.fill: parent + spacing: Kirigami.Units.smallSpacing + + property size sizeHint: Qt.size(formLayout.width, Math.round(1.1 * formLayout.height)) + property size minimumSizeHint: Qt.size(formLayout.width, Math.round(1.1 * formLayout.height)) + + signal changeSignal() + + property QtObject device: deviceModel[0] + + property bool loading: false + + Kirigami.FormLayout { + id: formLayout + TextField { + Kirigami.FormData.label: "Profile name:" + } + TextField { + Kirigami.FormData.label: "Command:" + } + TextField { + Kirigami.FormData.label: "Initial directory:" + } + } + } + + HIG.Raster { + desktop: true + } +} diff --git a/HIG/source/qml/patterns/content/form/Form_Align_Long.qml b/HIG/source/qml/patterns/content/form/Form_Align_Long.qml new file mode 100644 index 0000000..de8e2c2 --- /dev/null +++ b/HIG/source/qml/patterns/content/form/Form_Align_Long.qml @@ -0,0 +1,80 @@ +/* + * 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.7 +import QtQuick.Controls 2.0 +import QtQuick.Layouts 1.3 as Layouts +import org.kde.kirigami 2.4 as Kirigami + +import "../../../lib/" as HIG + +Kirigami.ApplicationItem { + width: 640 + height: 300 + + Kirigami.ScrollablePage { + id: root + anchors.fill: parent + spacing: Kirigami.Units.smallSpacing + + property size sizeHint: Qt.size(formLayout.width, Math.round(1.1 * formLayout.height)) + property size minimumSizeHint: Qt.size(formLayout.width, Math.round(1.1 * formLayout.height)) + + signal changeSignal() + + property QtObject device: deviceModel[0] + + property bool loading: false + + Kirigami.FormLayout { + TextField { + Kirigami.FormData.label: "Caption:" + id: input1 + } + TextField { + Kirigami.FormData.label: "Long caption:" + } + TextField { + Kirigami.FormData.label: "Very Very Very Very Very Very long caption:" + id: input3 + } + Item { + Kirigami.FormData.isSection: false + } + + ComboBox { + Kirigami.FormData.label: "Caption:" + id: input4 + model: ["alpha"] + } + SpinBox { + Kirigami.FormData.label: "One more:" + value: 42 + } + CheckBox { + Kirigami.FormData.label: "Long caption:" + text: "Check me" + } + } + } + + HIG.Raster { + desktop: true + } +} diff --git a/HIG/source/qml/patterns/content/form/Form_Align_NO.qml b/HIG/source/qml/patterns/content/form/Form_Align_NO.qml new file mode 100644 index 0000000..789f9e6 --- /dev/null +++ b/HIG/source/qml/patterns/content/form/Form_Align_NO.qml @@ -0,0 +1,103 @@ +/* + * 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.7 +import QtQuick.Controls 2.0 +import QtQuick.Layouts 1.3 + +import "../../../lib/" as HIG + +Rectangle { + width: 420 + height: 300 + id: root + + GridLayout { + x: units.largeSpacing + y: units.largeSpacing + columnSpacing: units.smallSpacing + rowSpacing: units.smallSpacing + columns: 2 + z: 2 + id: group1 + + Label { + id: label1 + text: "Caption:" + horizontalAlignment: Text.AlignRight + Layout.minimumWidth: 120 + } + TextField { + Layout.minimumWidth: 400 - 120 - 2 * 20 + } + Label { + text: "Long caption:" + horizontalAlignment: Text.AlignRight + Layout.minimumWidth: 120 + } + TextField { + Layout.minimumWidth: 400 - 120 - 2 * 20 + } + Label { + text: "Very long caption:" + horizontalAlignment: Text.AlignRight + Layout.minimumWidth: 120 + } + TextField { + Layout.minimumWidth: 400 - 120 - 2 * 20 + } + } + + GridLayout { + anchors.top: group1.bottom + anchors.topMargin: 16 + y: 20 + columns: 2 + + Label { + text: "Caption:" + horizontalAlignment: Text.AlignRight + Layout.minimumWidth: 120 + } + ComboBox { + model: ["alpha"] + Layout.minimumWidth: 120 + } + Label { + text: "One more:" + horizontalAlignment: Text.AlignRight + Layout.minimumWidth: 120 + } + SpinBox { + value: 42 + Layout.minimumWidth: 120 + } + Label { + text: "Long caption:" + horizontalAlignment: Text.AlignRight + Layout.minimumWidth: 120 + } + CheckBox { + text: "Check me" + } + } + + HIG.Raster { + } +} diff --git a/HIG/source/qml/patterns/content/form/Form_Align_OSX.qml b/HIG/source/qml/patterns/content/form/Form_Align_OSX.qml new file mode 100644 index 0000000..d3455d0 --- /dev/null +++ b/HIG/source/qml/patterns/content/form/Form_Align_OSX.qml @@ -0,0 +1,66 @@ +/* + * 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.7 +import QtQuick.Controls 2.0 +import QtQuick.Layouts 1.3 as Layouts + +import "../../../lib/" as HIG + +Rectangle { + width: 400 + height: 180 + + Layouts.GridLayout { + x: units.largeSpacing + y: units.largeSpacing + columnSpacing: units.smallSpacing + rowSpacing: units.smallSpacing + columns: 2 + z: 2 + + Label { + text: "Profile name:" + horizontalAlignment: Text.AlignRight + Layouts.Layout.minimumWidth: 150 + } + TextField { + Layouts.Layout.minimumWidth: 400 - 200 - 2 * 20 + } + Label { + text: "Command:" + horizontalAlignment: Text.AlignRight + Layouts.Layout.minimumWidth: 150 + } + TextField { + Layouts.Layout.minimumWidth: 400 - 200 - 2 * 20 + } + Label { + text: "Initial directory:" + horizontalAlignment: Text.AlignRight + Layouts.Layout.minimumWidth: 150 + } + TextField { + Layouts.Layout.minimumWidth: 400 - 200 - 2 * 20 + } + } + + HIG.Raster { + } +} diff --git a/HIG/source/qml/patterns/content/form/Form_Align_YES.qml b/HIG/source/qml/patterns/content/form/Form_Align_YES.qml new file mode 100644 index 0000000..082683b --- /dev/null +++ b/HIG/source/qml/patterns/content/form/Form_Align_YES.qml @@ -0,0 +1,50 @@ +/* + * 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.7 + +import "../../../lib/" as HIG +import "../../../lib/annotate.js" as A + +Rectangle { + width: 420 + height: 300 + id: root + + Form_Align { + id: align; + anchors.fill: parent; + } + + HIG.Raster { + desktop: true + } + + // HACK + Timer { + interval: 500 + repeat: false + running: true + onTriggered: { + var a = new A.An(align); + a.find("qquicktextfield").eq(1).draw({ruler: {}}) + qmlControler.start(); + } + } +} diff --git a/HIG/source/qml/patterns/content/form/Form_Align_YES_Mobile.qml b/HIG/source/qml/patterns/content/form/Form_Align_YES_Mobile.qml new file mode 100644 index 0000000..a2c6502 --- /dev/null +++ b/HIG/source/qml/patterns/content/form/Form_Align_YES_Mobile.qml @@ -0,0 +1,42 @@ +/* + * 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.7 +import QtQuick.Controls 2.0 +import QtQuick.Layouts 1.3 as Layouts +import org.kde.kirigami 2.4 as Kirigami + +import "../../../lib/" as HIG + +Rectangle { + height: 640 + width: 240 + id: root + + Form_Align { + id: align; + anchors.fill: parent; + z: 2 + } + + HIG.Raster { + desktop: true + mobile: true + } +} diff --git a/HIG/source/qml/patterns/content/form/config.json b/HIG/source/qml/patterns/content/form/config.json index 728c022..703dcb9 100644 --- a/HIG/source/qml/patterns/content/form/config.json +++ b/HIG/source/qml/patterns/content/form/config.json @@ -1,11 +1,33 @@ { - "Form1.qml": { + "Form3.qml": { "type": "png", "autostart": "false" }, - "Form2.qml": { + "Form4.qml": { + "type": "png", + "autostart": "false" + }, + "Form_Align_KDE3.qml": { + "type": "png" + }, + "Form_Align_KDE5.qml": { + "type": "png" + }, + "Form_Align_Long.qml": { + "type": "png" + }, + "Form_Align_NO.qml": { + "type": "png" + }, + "Form_Align_OSX.qml": { + "type": "png" + }, + "Form_Align_YES_Mobile.qml": { "type": "png", - "autostart": "false", "controls": "mobile" + }, + "Form_Align_YES.qml": { + "type": "png", + "autostart": "false" } }