Add a checkbox for flipping the view 180 degrees

Task-number: QTBUG-68667
Change-Id: I025a0992a8fb8734f62e2f05da865c2bd466099b
Reviewed-by: Sami Nurmenniemi <sami.nurmenniemi@qt.io>
Reviewed-by: Teemu Holappa <teemu.holappa@qt.io>

6 files changed, 76 insertions, 3 deletions

diff --git a/icons.qrc b/icons.qrc
index 78e2cc4..6411eb5 100644
--- a/icons.qrc
+++ b/icons.qrc
@@ -18,5 +18,6 @@
         <file>qml/icons/detail_icon_disabled.svg</file>
         <file>qml/icons/touch_icon_disabled.svg</file>
         <file>qml/icons/grid_icon_disabled.svg</file>
+        <file>qml/icons/display_icon.svg</file>
     </qresource>
 </RCC>
diff --git a/qml/LayoutSettings.qml b/qml/LayoutSettings.qml
index 11844be..a337a38 100644
--- a/qml/LayoutSettings.qml
+++ b/qml/LayoutSettings.qml
@@ -26,7 +26,8 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
-import QtQuick 2.0
+import QtQuick 2.9
+import QtQuick.Controls 2.2
 
 Item {
     id: root
@@ -51,6 +52,7 @@ Item {
     }
 
     Column {
+        id: column
         spacing: root.margin * 0.2
 
         Text {
@@ -122,4 +124,54 @@ Item {
             }
         }
     }
+    CheckBox {
+        id: checkBox
+        text: qsTr("Flip screen")
+        checked: globalSettings.rotationSelected
+        anchors.top: column.bottom
+        anchors.left: parent.left
+        anchors.topMargin: root.margin
+
+        indicator: Rectangle {
+            implicitHeight: 26
+            implicitWidth: 26
+            height: pluginMain.buttonHeight
+            width: height
+            x: checkBox.leftPadding
+            y: parent.height / 2 - height / 2
+            color: "transparent"
+            border.color: "#9d9faa"
+            border.width: 2
+            radius: 4
+
+            Image {
+                anchors.centerIn: parent
+                sourceSize.width: parent.width
+                sourceSize.height: parent.height
+                width: parent.width * 0.9
+                height: width
+                source: "../newIcons/checkmark.svg"
+                visible: checkBox.checked
+                antialiasing: true
+                smooth: true
+                fillMode: Image.PreserveAspectFit
+            }
+        }
+
+        contentItem: Text {
+            text: checkBox.text
+            font.family: appFont
+            font.pixelSize: pluginMain.subTitleFontSize
+            opacity: enabled ? 1.0 : 0.3
+            color: checkBox.down ? "#17a81a" : "#41cd52"
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            leftPadding: checkBox.indicator.width + checkBox.spacing
+            height: pluginMain.fieldTextHeight
+            font.styleName: checkBox.checked ? "Bold" : "Regular"
+        }
+        onCheckedChanged: {
+            globalSettings.rotationSelected = checked
+        }
+    }
 }
diff --git a/qml/MainWindow.qml b/qml/MainWindow.qml
index d6204a2..2fb898d 100644
--- a/qml/MainWindow.qml
+++ b/qml/MainWindow.qml
@@ -86,7 +86,8 @@ Item {
         anchors.centerIn: parent
         property bool portraitMode: Screen.desktopAvailableHeight > Screen.desktopAvailableWidth ? true : false
         property bool demoHeaderEnabled: applicationLoader.sourceComponent !== settingsUIComponent
-        rotation: portraitMode ? 90 : 0
+        property int rotateAmount: globalSettings.rotationSelected ? 180 : 0
+        rotation: portraitMode ? 90 + rotateAmount : 0 + rotateAmount
         width: portraitMode ? window.height : window.width
         height: portraitMode ? window.width : window.height
 
diff --git a/qml/icons/display_icon.svg b/qml/icons/display_icon.svg
index fa8b09c..598d2ee 100644
--- a/qml/icons/display_icon.svg
+++ b/qml/icons/display_icon.svg
@@ -1 +1 @@
-<svg id="display" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>display</title><path d="M34.83,28.68H9.17A1.17,1.17,0,0,1,8,27.52V11.18A1.17,1.17,0,0,1,9.17,10H34.83A1.17,1.17,0,0,1,36,11.18V27.52a1.17,1.17,0,0,1-1.17,1.17h0Zm-24.5-2.33H33.67v-14H10.33v14h0Z" style="fill:#fff"/><path d="M26.3,34H17.7a1.17,1.17,0,1,1,0-2.33h8.6a1.17,1.17,0,1,1,0,2.33h0Z" style="fill:#fff"/><path d="M19,33.64a1.17,1.17,0,0,1-1.17-1.17V27.76a1.17,1.17,0,1,1,2.33,0v4.72A1.17,1.17,0,0,1,19,33.64h0Z" style="fill:#fff"/><path d="M25,33.64a1.17,1.17,0,0,1-1.17-1.17V27.76a1.17,1.17,0,1,1,2.33,0v4.72A1.17,1.17,0,0,1,25,33.64h0Z" style="fill:#fff"/></svg>
\ No newline at end of file
+<svg id="display" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>display_icon</title><path d="M42.16,32.5H1.83A1.83,1.83,0,0,1,0,30.67V5A1.83,1.83,0,0,1,1.83,3.17H42.16A1.83,1.83,0,0,1,44,5V30.67a1.83,1.83,0,0,1-1.84,1.83ZM3.67,28.84H40.33v-22H3.67v22Z" style="fill:#fff"/><path d="M28.76,40.83H15.24a1.83,1.83,0,1,1,0-3.67H28.76a1.83,1.83,0,1,1,0,3.67Z" style="fill:#fff"/><path d="M17.34,40.29a1.83,1.83,0,0,1-1.83-1.83V31.05a1.83,1.83,0,1,1,3.67,0v7.41a1.83,1.83,0,0,1-1.83,1.83Z" style="fill:#fff"/><path d="M26.66,40.29a1.83,1.83,0,0,1-1.83-1.83V31.05a1.83,1.83,0,1,1,3.67,0v7.41a1.83,1.83,0,0,1-1.83,1.83Z" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/src/settingsmanager.cpp b/src/settingsmanager.cpp
index a5f2160..55e5def 100644
--- a/src/settingsmanager.cpp
+++ b/src/settingsmanager.cpp
@@ -78,3 +78,16 @@ void SettingsManager::setMouseSelected(bool enabled)
     setValue("mouseSelected", enabled);
     emit mouseSelectedChanged(enabled);
 }
+
+bool SettingsManager::rotationSelected()
+{
+    return getValue("rotationSelected", false).toBool();
+}
+
+void SettingsManager::setRotationSelected(bool enabled)
+{
+    if (rotationSelected() == enabled)
+        return;
+    setValue("rotationSelected", enabled);
+    emit rotationSelectedChanged(enabled);
+}
diff --git a/src/settingsmanager.h b/src/settingsmanager.h
index f54ac77..cc41a0a 100644
--- a/src/settingsmanager.h
+++ b/src/settingsmanager.h
@@ -52,9 +52,15 @@ public:
     bool mouseSelected();
     void setMouseSelected(bool enabled);
 
+    Q_PROPERTY (bool rotationSelected READ rotationSelected WRITE setRotationSelected NOTIFY rotationSelectedChanged)
+
+    bool rotationSelected();
+    void setRotationSelected(bool enabled);
+
 signals:
     void gridSelectedChanged(bool enabled);
     void mouseSelectedChanged(bool enabled);
+    void rotationSelectedChanged(bool enabled);
 
 private:
     QSettings m_settings;