[settings] Optimized settings page for landscape orientation
This commit is contained in:
Slava Monich
parent
85c1f819f3
commit
c0bf4f92fb
2 changed files with 319 additions and 249 deletions
|
|
@ -1,6 +1,6 @@
|
|||
/*
|
||||
Copyright (C) 2017 Jolla Ltd.
|
||||
Contact: Slava Monich <slava.monich@jolla.com>
|
||||
Copyright (C) 2017-2020 Jolla Ltd.
|
||||
Copyright (C) 2017-2020 Slava Monich <slava.monich@jolla.com>
|
||||
|
||||
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
|
||||
1. 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.
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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,11 +131,23 @@ Page {
|
|||
text: qsTrId("harbour-books-settings-page-display-section_header")
|
||||
}
|
||||
|
||||
Grid {
|
||||
id: displayGrid
|
||||
|
||||
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")
|
||||
|
|
@ -141,8 +155,6 @@ Page {
|
|||
//% "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
|
||||
|
||||
|
|
@ -156,14 +168,17 @@ Page {
|
|||
|
||||
Slider {
|
||||
id: nightModeBrightnessSlider
|
||||
width: parent.width
|
||||
|
||||
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
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
onSliderValueChanged: nightModeBrightness.value = value
|
||||
value: nightModeBrightness.value
|
||||
valueText: landscapeLayout ? " " : ""
|
||||
|
||||
readonly property real sliderLeft: x + leftMargin
|
||||
readonly property real sliderRight: x + width - rightMargin
|
||||
|
|
@ -202,15 +217,28 @@ Page {
|
|||
opacity: (darkOnLight && !nightModeBrightnessSlider.highlighted) ? 0.6 : 1.0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Grid {
|
||||
width: parent.width
|
||||
columns: landscapeLayout ? 2 : 1
|
||||
flow: Grid.TopToBottom
|
||||
|
||||
readonly property real columnWidth: width/columns
|
||||
|
||||
Column {
|
||||
width: parent.columnWidth
|
||||
|
||||
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
|
||||
|
|
@ -256,12 +284,15 @@ Page {
|
|||
|
||||
ComboBox {
|
||||
id: layoutComboBox
|
||||
|
||||
//: Combo box label
|
||||
//% "Page layout"
|
||||
label: qsTrId("harbour-books-settings-page-page_layout")
|
||||
value: currentItem ? currentItem.valueText : ""
|
||||
readonly property int yBottom: y + Theme.itemSizeSmall
|
||||
menu: ContextMenu {
|
||||
id: layoutMenu
|
||||
|
||||
readonly property int defaultIndex: 0
|
||||
BooksDetailMenuItem {
|
||||
//: Combo box value for dynamic page layout
|
||||
|
|
@ -338,8 +369,12 @@ Page {
|
|||
onValueChanged: layoutComboBox.updateSelectedItem()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
TextSwitch {
|
||||
id: keepDisplayOnSwitch
|
||||
|
||||
width: parent.columnWidth
|
||||
automaticCheck: false
|
||||
checked: keepDisplayOn.value
|
||||
//: Text switch label
|
||||
|
|
@ -350,12 +385,19 @@ Page {
|
|||
description: qsTrId("harbour-books-settings-page-keep_display_on_description")
|
||||
onClicked: keepDisplayOn.value = !keepDisplayOn.value
|
||||
|
||||
// Avoid overlapping:
|
||||
readonly property int yBottom: y + height
|
||||
opacity: (landscapeLayout && (orientationMenu.active || (layoutMenu.active && yBottom > layoutComboBox.yBottom))) ? 0.0 : 1.0
|
||||
visible: opacity > 0
|
||||
Behavior on opacity { FadeAnimation { } }
|
||||
|
||||
ConfigurationValue {
|
||||
id: keepDisplayOn
|
||||
key: rootPath + "keepDisplayOn"
|
||||
defaultValue: false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =============== Navigation ===============
|
||||
|
||||
|
|
@ -365,7 +407,19 @@ Page {
|
|||
text: qsTrId("harbour-books-settings-page-navigation-section_header")
|
||||
}
|
||||
|
||||
Grid {
|
||||
width: parent.width
|
||||
columns: landscapeLayout ? 2 : 1
|
||||
flow: Grid.TopToBottom
|
||||
|
||||
readonly property real columnWidth: width/columns
|
||||
|
||||
Column {
|
||||
width: parent.columnWidth
|
||||
|
||||
BooksActionSelector {
|
||||
id: volumeUpSelector
|
||||
|
||||
//: Combo box label
|
||||
//% "Volume up"
|
||||
label: qsTrId("harbour-books-settings-page-volume_up-label")
|
||||
|
|
@ -374,14 +428,19 @@ Page {
|
|||
}
|
||||
|
||||
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
|
||||
|
|
@ -392,12 +451,19 @@ 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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =============== Memory card ===============
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue