From c0bf4f92fb8276776949c1bc580f40d80a99b1a8 Mon Sep 17 00:00:00 2001 From: Slava Monich Date: Mon, 26 Oct 2020 03:52:20 +0200 Subject: [PATCH] [settings] Optimized settings page for landscape orientation --- app/settings/BooksActionSelector.qml | 24 +- app/settings/BooksSettings.qml | 544 +++++++++++++++------------ 2 files changed, 319 insertions(+), 249 deletions(-) diff --git a/app/settings/BooksActionSelector.qml b/app/settings/BooksActionSelector.qml index 59d3de8..573d694 100644 --- a/app/settings/BooksActionSelector.qml +++ b/app/settings/BooksActionSelector.qml @@ -1,6 +1,6 @@ /* - Copyright (C) 2017 Jolla Ltd. - Contact: Slava Monich + Copyright (C) 2017-2020 Jolla Ltd. + Copyright (C) 2017-2020 Slava Monich You may use this file under the terms of BSD license as follows: @@ -8,14 +8,15 @@ modification, are permitted provided that the following conditions are met: - * Redistributions of source code must retain the above copyright - notice, this list of conditions and the following disclaimer. - * Redistributions in binary form must reproduce the above copyright - notice, this list of conditions and the following disclaimer in the - documentation and/or other materials provided with the distribution. - * Neither the name of Jolla Ltd nor the names of its contributors may - be used to endorse or promote products derived from this software - without specific prior written permission. + 1. Redistributions of source code must retain the above copyright + notice, this list of conditions and the following disclaimer. + 2. Redistributions in binary form must reproduce the above copyright + notice, this list of conditions and the following disclaimer + in the documentation and/or other materials provided with the + distribution. + 3. Neither the names of the copyright holders nor the names of its + contributors may be used to endorse or promote products derived + from this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE @@ -36,13 +37,16 @@ import org.nemomobile.configuration 1.0 ComboBox { id: actionComboBox + property alias key: configuration.key property alias defaultValue: configuration.defaultValue property bool ready + property alias menuActive: actionMenu.active value: currentItem ? currentItem.text : "" menu: ContextMenu { id: actionMenu + readonly property int defaultIndex: 0 MenuItem { //: Combo box value for no action diff --git a/app/settings/BooksSettings.qml b/app/settings/BooksSettings.qml index 1e2b678..2bdcb01 100644 --- a/app/settings/BooksSettings.qml +++ b/app/settings/BooksSettings.qml @@ -44,6 +44,7 @@ Page { property alias title: pageHeader.title readonly property string rootPath: "/apps/" + appName() + "/" readonly property bool darkOnLight: ('colorScheme' in Theme) && Theme.colorScheme === 1 + readonly property bool landscapeLayout: (width > height && Screen.sizeCategory > Screen.Small) || Screen.sizeCategory > Screen.Medium // Deduce package name from the path function appName() { @@ -81,8 +82,9 @@ Page { height: nightModeExampleLabel.height + 2 * Theme.paddingMedium readonly property int xMin: nightModeBrightnessSlider.leftMargin readonly property int xMax: content.width - nightModeBrightnessSlider.rightMargin - width - x: content.x + Math.max(Math.min(nightModeBrightnessSlider.sliderLeft + Math.round(nightModeBrightnessSlider.sliderThumbX - width/2.0), xMax), xMin) - y: content.y + nightModeBrightnessSlider.y - height + readonly property int yOffset: landscapeLayout ? (Theme.itemSizeExtraLarge - Theme.itemSizeMedium) : 0 + x: content.x + displayGrid.x + Math.max(Math.min(nightModeBrightnessSlider.sliderLeft + Math.round(nightModeBrightnessSlider.sliderThumbX - width/2.0), xMax), xMin) + y: content.y + displayGrid.y + nightModeBrightnessSlider.y + yOffset - height z: nightModeBrightnessSlider.z + 1 color: "black" border { @@ -129,231 +131,271 @@ Page { text: qsTrId("harbour-books-settings-page-display-section_header") } - Slider { - id: fontSizeSlider - minimumValue: -5 - maximumValue: 15 - stepSize: 1 - //: Slider value label for the standard font size - //% "Default" - readonly property string normal: qsTrId("harbour-books-settings-page-font_size_label-default") - //: Slider label - //% "Font size" - label: qsTrId("harbour-books-settings-page-font_size_label") - valueText: (value === 0) ? normal : ((value > 0) ? ("+" + value) : value) - width: parent.width - anchors.horizontalCenter: parent.horizontalCenter - onSliderValueChanged: fontSize.value = value - Component.onCompleted: value = fontSize.value + Grid { + id: displayGrid - ConfigurationValue { - id: fontSize - key: rootPath + "fontSize" - defaultValue: 0 - onValueChanged: fontSizeSlider.value = value + width: parent.width + columns: landscapeLayout ? 2 : 1 + + readonly property real columnWidth: width/columns + + Slider { + id: fontSizeSlider + + minimumValue: -5 + maximumValue: 15 + stepSize: 1 + width: parent.columnWidth + leftMargin: landscapeLayout ? Theme.horizontalPageMargin : nightModeBrightnessSlider.leftMargin + rightMargin: leftMargin + //: Slider value label for the standard font size + //% "Default" + readonly property string normal: qsTrId("harbour-books-settings-page-font_size_label-default") + //: Slider label + //% "Font size" + label: qsTrId("harbour-books-settings-page-font_size_label") + valueText: (value === 0) ? normal : ((value > 0) ? ("+" + value) : value) + onSliderValueChanged: fontSize.value = value + Component.onCompleted: value = fontSize.value + + ConfigurationValue { + id: fontSize + key: rootPath + "fontSize" + defaultValue: 0 + onValueChanged: fontSizeSlider.value = value + } + } + + Slider { + id: nightModeBrightnessSlider + + width: parent.columnWidth + leftMargin: keepDisplayOnSwitch.leftMargin - Theme.paddingLarge + Theme.itemSizeExtraSmall + rightMargin: leftMargin + //: Slider label + //% "Brightness in night mode" + label: qsTrId("harbour-books-settings-page-night_mode_brightness_label") + stepSize: (maximumValue - minimumValue) / 100.0 + onSliderValueChanged: nightModeBrightness.value = value + value: nightModeBrightness.value + valueText: landscapeLayout ? " " : "" + + readonly property real sliderLeft: x + leftMargin + readonly property real sliderRight: x + width - rightMargin + readonly property real sliderWidth: width - leftMargin - rightMargin + readonly property real sliderThumbX: sliderLeft + (maximumValue > minimumValue) ? (sliderWidth * sliderValue / (maximumValue - minimumValue)) : 0 + readonly property real sliderBarVerticalCenter: Math.round(height - Theme.fontSizeSmall - Theme.paddingSmall - Theme.itemSizeExtraSmall*3/8) + readonly property color highlightColor: highlighted ? Theme.secondaryHighlightColor : Theme.secondaryColor + + ConfigurationValue { + id: nightModeBrightness + key: rootPath + "nightModeBrightness" + defaultValue: 1 + } + + HarbourHighlightIcon { + source: "images/brightness.svg" + y: nightModeBrightnessSlider.sliderBarVerticalCenter - Math.round(height/2) + anchors { + left: parent.left + leftMargin: nightModeBrightnessSlider.leftMargin - Theme.paddingSmall - width + } + sourceSize.height: Math.round(Theme.iconSizeSmall * 0.8) + highlightColor: nightModeBrightnessSlider.highlightColor + opacity: (darkOnLight && !nightModeBrightnessSlider.highlighted) ? 0.6 : 1.0 + } + + HarbourHighlightIcon { + source: "images/brightness.svg" + y: nightModeBrightnessSlider.sliderBarVerticalCenter - Math.round(height/2) + anchors { + right: parent.right + rightMargin: nightModeBrightnessSlider.rightMargin - Theme.paddingSmall - width + } + sourceSize.height: Math.round(Theme.iconSizeSmall * 1.2) + highlightColor: nightModeBrightnessSlider.highlightColor + opacity: (darkOnLight && !nightModeBrightnessSlider.highlighted) ? 0.6 : 1.0 + } } } - Slider { - id: nightModeBrightnessSlider + Grid { width: parent.width - //: Slider label - //% "Brightness in night mode" - label: qsTrId("harbour-books-settings-page-night_mode_brightness_label") - stepSize: (maximumValue - minimumValue) / 100.0 - anchors.horizontalCenter: parent.horizontalCenter - onSliderValueChanged: nightModeBrightness.value = value - value: nightModeBrightness.value + columns: landscapeLayout ? 2 : 1 + flow: Grid.TopToBottom - readonly property real sliderLeft: x + leftMargin - readonly property real sliderRight: x + width - rightMargin - readonly property real sliderWidth: width - leftMargin - rightMargin - readonly property real sliderThumbX: sliderLeft + (maximumValue > minimumValue) ? (sliderWidth * sliderValue / (maximumValue - minimumValue)) : 0 - readonly property real sliderBarVerticalCenter: Math.round(height - Theme.fontSizeSmall - Theme.paddingSmall - Theme.itemSizeExtraSmall*3/8) - readonly property color highlightColor: highlighted ? Theme.secondaryHighlightColor : Theme.secondaryColor + readonly property real columnWidth: width/columns - ConfigurationValue { - id: nightModeBrightness - key: rootPath + "nightModeBrightness" - defaultValue: 1 - } + Column { + width: parent.columnWidth - HarbourHighlightIcon { - source: "images/brightness.svg" - y: nightModeBrightnessSlider.sliderBarVerticalCenter - Math.round(height/2) - anchors { - left: parent.left - leftMargin: nightModeBrightnessSlider.leftMargin - Theme.paddingSmall - width - } - sourceSize.height: Math.round(Theme.iconSizeSmall * 0.8) - highlightColor: nightModeBrightnessSlider.highlightColor - opacity: (darkOnLight && !nightModeBrightnessSlider.highlighted) ? 0.6 : 1.0 - } + ComboBox { + id: orientationComboBox - HarbourHighlightIcon { - source: "images/brightness.svg" - y: nightModeBrightnessSlider.sliderBarVerticalCenter - Math.round(height/2) - anchors { - right: parent.right - rightMargin: nightModeBrightnessSlider.rightMargin - Theme.paddingSmall - width - } - sourceSize.height: Math.round(Theme.iconSizeSmall * 1.2) - highlightColor: nightModeBrightnessSlider.highlightColor - opacity: (darkOnLight && !nightModeBrightnessSlider.highlighted) ? 0.6 : 1.0 - } - } + //: Combo box label + //% "Orientation" + label: qsTrId("harbour-books-settings-page-orientation_label") + value: currentItem ? currentItem.text : "" + menu: ContextMenu { + id: orientationMenu - ComboBox { - id: orientationComboBox - //: Combo box label - //% "Orientation" - label: qsTrId("harbour-books-settings-page-orientation_label") - value: currentItem ? currentItem.text : "" - menu: ContextMenu { - id: orientationMenu - readonly property int defaultIndex: 0 - MenuItem { - readonly property int value: 0 - //: Combo box value for dynamic orientation - //% "Dynamic" - text: qsTrId("harbour-books-settings-page-orientation-dynamic") - onClicked: orientation.value = value - } - MenuItem { - readonly property int value: 1 - //: Combo box value for portrait orientation - //% "Portrait" - text: qsTrId("harbour-books-settings-page-orientation-portrait") - onClicked: orientation.value = value - } - MenuItem { - readonly property int value: 2 - //: Combo box value for landscape orientation - //% "Landscape" - text: qsTrId("harbour-books-settings-page-orientation-landscape") - onClicked: orientation.value = value - } - } - Component.onCompleted: orientation.updateControls() - ConfigurationValue { - id: orientation - key: rootPath + "orientation" - defaultValue: 0 - onValueChanged: updateControls() - function updateControls() { - var n = orientationMenu.children.length - var index = orientationMenu.defaultIndex - for (var i=0; i layoutComboBox.yBottom))) ? 0.0 : 1.0 + visible: opacity > 0 + Behavior on opacity { FadeAnimation { } } + + ConfigurationValue { + id: keepDisplayOn + key: rootPath + "keepDisplayOn" + defaultValue: false + } } } @@ -365,37 +407,61 @@ Page { text: qsTrId("harbour-books-settings-page-navigation-section_header") } - BooksActionSelector { - //: Combo box label - //% "Volume up" - label: qsTrId("harbour-books-settings-page-volume_up-label") - key: rootPath + "volumeUpAction" - defaultValue: 2 // BooksSettings.ActionNextPage - } + Grid { + width: parent.width + columns: landscapeLayout ? 2 : 1 + flow: Grid.TopToBottom - BooksActionSelector { - //: Combo box label - //% "Volume down" - label: qsTrId("harbour-books-settings-page-volume_down-label") - key: rootPath + "volumeDownAction" - defaultValue: 1 // BooksSettings.ActionPreviousPage - } + readonly property real columnWidth: width/columns - TextSwitch { - automaticCheck: false - checked: turnPageByTap.value - //: Text switch label - //% "Turn pages by tapping the screen" - text: qsTrId("harbour-books-settings-page-turn_pages_by_tap") - //: Text switch description - //% "Tapping near the left edge of the screen returns to the previous page, tapping near the right edge gets you to the next page." - description: qsTrId("harbour-books-settings-page-turn_pages_by_tap-description") - onClicked: turnPageByTap.value = !turnPageByTap.value + Column { + width: parent.columnWidth - ConfigurationValue { - id: turnPageByTap - key: rootPath + "turnPageByTap" - defaultValue: false + BooksActionSelector { + id: volumeUpSelector + + //: Combo box label + //% "Volume up" + label: qsTrId("harbour-books-settings-page-volume_up-label") + key: rootPath + "volumeUpAction" + defaultValue: 2 // BooksSettings.ActionNextPage + } + + BooksActionSelector { + id: volumeDownSelector + + //: Combo box label + //% "Volume down" + label: qsTrId("harbour-books-settings-page-volume_down-label") + key: rootPath + "volumeDownAction" + defaultValue: 1 // BooksSettings.ActionPreviousPage + readonly property int yBottom: y + Theme.itemSizeSmall + } + } + + TextSwitch { + width: parent.columnWidth + automaticCheck: false + checked: turnPageByTap.value + //: Text switch label + //% "Turn pages by tapping the screen" + text: qsTrId("harbour-books-settings-page-turn_pages_by_tap") + //: Text switch description + //% "Tapping near the left edge of the screen returns to the previous page, tapping near the right edge gets you to the next page." + description: qsTrId("harbour-books-settings-page-turn_pages_by_tap-description") + onClicked: turnPageByTap.value = !turnPageByTap.value + + // Avoid overlapping: + readonly property int yBottom: y + height + opacity: (landscapeLayout && (volumeUpSelector.menuActive || (volumeDownSelector.menuActive && yBottom > volumeDownSelector.yBottom))) ? 0.0 : 1.0 + visible: opacity > 0 + Behavior on opacity { FadeAnimation { } } + + ConfigurationValue { + id: turnPageByTap + key: rootPath + "turnPageByTap" + defaultValue: false + } } }