medvedych/harbour-books
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity

[settings] Optimized settings page for landscape orientation

Browse source
This commit is contained in:
Slava Monich 2020-10-26 03:52:20 +02:00
parent 85c1f819f3
commit c0bf4f92fb
2 changed files with 319 additions and 249 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
app/settings/BooksActionSelector.qml
View file

@ -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
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

544
app/settings/BooksSettings.qml
View file

@ -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<n; i++) {
if (orientationMenu.children[i].value === value) {
index = i
break
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<n; i++) {
if (orientationMenu.children[i].value === value) {
index = i
break
}
}
orientationComboBox.currentIndex = index
}
}
orientationComboBox.currentIndex = index
}
}
}
ComboBox {
id: layoutComboBox
//: Combo box label
//% "Page layout"
label: qsTrId("harbour-books-settings-page-page_layout")
value: currentItem ? currentItem.valueText : ""
menu: ContextMenu {
id: layoutMenu
readonly property int defaultIndex: 0
BooksDetailMenuItem {
//: Combo box value for dynamic page layout
//% "Dynamic"
valueText: qsTrId("harbour-books-settings-page-layout-dynamic")
//: Combo box detail for dynamic page layout
//% "(toggle on tap)"
detailText: qsTrId("harbour-books-settings-page-layout-dynamic-detail")
onClicked: pageDetailsFixed.value = false
}
BooksDetailMenuItem {
//: Combo box value for clean page layout (just the content)
//% "Clean"
valueText: qsTrId("harbour-books-settings-page-layout-clean")
//: Combo box detail for clean page layout (just the content)
//% "(just the content)"
detailText: qsTrId("harbour-books-settings-page-layout-clean-detail")
onClicked: {
pageDetailsFixed.value = true
pageDetails.value = 0
}
}
BooksDetailMenuItem {
//: Combo box value for minimal page layout (title + page)
//% "Minimal"
valueText: qsTrId("harbour-books-settings-page-layout-minimal")
//: Combo box detail for minimal page layout (title + page)
//% "(title, page)"
detailText: qsTrId("harbour-books-settings-page-layout-minimal-detail")
onClicked: {
pageDetailsFixed.value = true
pageDetails.value = 1
}
}
BooksDetailMenuItem {
//: Combo box value for normal page layout (title + page + slider)
//% "Regular"
valueText: qsTrId("harbour-books-settings-page-layout-normal")
//: Combo box detail for normal page layout (title + page + slider)
//% "(title, page, slider)"
detailText: qsTrId("harbour-books-settings-page-layout-normal-detail")
onClicked: {
pageDetailsFixed.value = true
pageDetails.value = 2
}
}
BooksDetailMenuItem {
//: Combo box value for full page layout (title + page + slider)
//% "Full"
valueText: qsTrId("harbour-books-settings-page-layout-full")
//: Combo box detail for full page layout (title + page + slider)
//% "(everything)"
detailText: qsTrId("harbour-books-settings-page-layout-full-detail")
onClicked: {
pageDetailsFixed.value = true
pageDetails.value = 3
}
}
}
Component.onCompleted: updateSelectedItem()
function updateSelectedItem() {
currentIndex = pageDetailsFixed.value ? (pageDetails.value + 1) : 0
}
ConfigurationValue {
id: pageDetails
key: rootPath + "pageDetails"
defaultValue: 0
onValueChanged: layoutComboBox.updateSelectedItem()
}
ConfigurationValue {
id: pageDetailsFixed
key: rootPath + "pageDetailsFixed"
defaultValue: false
onValueChanged: layoutComboBox.updateSelectedItem()
}
}
ComboBox {
id: layoutComboBox
TextSwitch {
automaticCheck: false
checked: keepDisplayOn.value
//: Text switch label
//% "Keep display on while reading"
text: qsTrId("harbour-books-settings-page-keep_display_on")
//: Text switch description
//% "Prevent the display from blanking while reading the book."
description: qsTrId("harbour-books-settings-page-keep_display_on_description")
onClicked: keepDisplayOn.value = !keepDisplayOn.value
//: 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
ConfigurationValue {
id: keepDisplayOn
key: rootPath + "keepDisplayOn"
defaultValue: false
readonly property int defaultIndex: 0
BooksDetailMenuItem {
//: Combo box value for dynamic page layout
//% "Dynamic"
valueText: qsTrId("harbour-books-settings-page-layout-dynamic")
//: Combo box detail for dynamic page layout
//% "(toggle on tap)"
detailText: qsTrId("harbour-books-settings-page-layout-dynamic-detail")
onClicked: pageDetailsFixed.value = false
}
BooksDetailMenuItem {
//: Combo box value for clean page layout (just the content)
//% "Clean"
valueText: qsTrId("harbour-books-settings-page-layout-clean")
//: Combo box detail for clean page layout (just the content)
//% "(just the content)"
detailText: qsTrId("harbour-books-settings-page-layout-clean-detail")
onClicked: {
pageDetailsFixed.value = true
pageDetails.value = 0
}
}
BooksDetailMenuItem {
//: Combo box value for minimal page layout (title + page)
//% "Minimal"
valueText: qsTrId("harbour-books-settings-page-layout-minimal")
//: Combo box detail for minimal page layout (title + page)
//% "(title, page)"
detailText: qsTrId("harbour-books-settings-page-layout-minimal-detail")
onClicked: {
pageDetailsFixed.value = true
pageDetails.value = 1
}
}
BooksDetailMenuItem {
//: Combo box value for normal page layout (title + page + slider)
//% "Regular"
valueText: qsTrId("harbour-books-settings-page-layout-normal")
//: Combo box detail for normal page layout (title + page + slider)
//% "(title, page, slider)"
detailText: qsTrId("harbour-books-settings-page-layout-normal-detail")
onClicked: {
pageDetailsFixed.value = true
pageDetails.value = 2
}
}
BooksDetailMenuItem {
//: Combo box value for full page layout (title + page + slider)
//% "Full"
valueText: qsTrId("harbour-books-settings-page-layout-full")
//: Combo box detail for full page layout (title + page + slider)
//% "(everything)"
detailText: qsTrId("harbour-books-settings-page-layout-full-detail")
onClicked: {
pageDetailsFixed.value = true
pageDetails.value = 3
}
}
}
Component.onCompleted: updateSelectedItem()
function updateSelectedItem() {
currentIndex = pageDetailsFixed.value ? (pageDetails.value + 1) : 0
}
ConfigurationValue {
id: pageDetails
key: rootPath + "pageDetails"
defaultValue: 0
onValueChanged: layoutComboBox.updateSelectedItem()
}
ConfigurationValue {
id: pageDetailsFixed
key: rootPath + "pageDetailsFixed"
defaultValue: false
onValueChanged: layoutComboBox.updateSelectedItem()
}
}
}
TextSwitch {
id: keepDisplayOnSwitch
width: parent.columnWidth
automaticCheck: false
checked: keepDisplayOn.value
//: Text switch label
//% "Keep display on while reading"
text: qsTrId("harbour-books-settings-page-keep_display_on")
//: Text switch description
//% "Prevent the display from blanking while reading the book."
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
}
}
}
@ -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
}
}
}