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. Copyright (C) 2017-2020 Jolla Ltd.
Contact: Slava Monich <slava.monich@jolla.com> Copyright (C) 2017-2020 Slava Monich <slava.monich@jolla.com>
You may use this file under the terms of BSD license as follows: 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 modification, are permitted provided that the following conditions
are met: 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. notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright 2. Redistributions in binary form must reproduce the above copyright
notice, this list of conditions and the following disclaimer in the notice, this list of conditions and the following disclaimer
documentation and/or other materials provided with the distribution. in the documentation and/or other materials provided with the
* Neither the name of Jolla Ltd nor the names of its contributors may distribution.
be used to endorse or promote products derived from this software 3. Neither the names of the copyright holders nor the names of its
without specific prior written permission. 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" THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
@ -36,13 +37,16 @@ import org.nemomobile.configuration 1.0
ComboBox { ComboBox {
id: actionComboBox id: actionComboBox
property alias key: configuration.key property alias key: configuration.key
property alias defaultValue: configuration.defaultValue property alias defaultValue: configuration.defaultValue
property bool ready property bool ready
property alias menuActive: actionMenu.active
value: currentItem ? currentItem.text : "" value: currentItem ? currentItem.text : ""
menu: ContextMenu { menu: ContextMenu {
id: actionMenu id: actionMenu
readonly property int defaultIndex: 0 readonly property int defaultIndex: 0
MenuItem { MenuItem {
//: Combo box value for no action //: Combo box value for no action

544
app/settings/BooksSettings.qml
View file

@ -44,6 +44,7 @@ Page {
property alias title: pageHeader.title property alias title: pageHeader.title
readonly property string rootPath: "/apps/" + appName() + "/" readonly property string rootPath: "/apps/" + appName() + "/"
readonly property bool darkOnLight: ('colorScheme' in Theme) && Theme.colorScheme === 1 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 // Deduce package name from the path
function appName() { function appName() {
@ -81,8 +82,9 @@ Page {
height: nightModeExampleLabel.height + 2 * Theme.paddingMedium height: nightModeExampleLabel.height + 2 * Theme.paddingMedium
readonly property int xMin: nightModeBrightnessSlider.leftMargin readonly property int xMin: nightModeBrightnessSlider.leftMargin
readonly property int xMax: content.width - nightModeBrightnessSlider.rightMargin - width 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) readonly property int yOffset: landscapeLayout ? (Theme.itemSizeExtraLarge - Theme.itemSizeMedium) : 0
y: content.y + nightModeBrightnessSlider.y - height 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 z: nightModeBrightnessSlider.z + 1
color: "black" color: "black"
border { border {
@ -129,231 +131,271 @@ Page {
text: qsTrId("harbour-books-settings-page-display-section_header") text: qsTrId("harbour-books-settings-page-display-section_header")
} }
Slider { Grid {
id: fontSizeSlider id: displayGrid
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
ConfigurationValue { width: parent.width
id: fontSize columns: landscapeLayout ? 2 : 1
key: rootPath + "fontSize"
defaultValue: 0 readonly property real columnWidth: width/columns
onValueChanged: fontSizeSlider.value = value
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 { Grid {
id: nightModeBrightnessSlider
width: parent.width width: parent.width
//: Slider label columns: landscapeLayout ? 2 : 1
//% "Brightness in night mode" flow: Grid.TopToBottom
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
readonly property real sliderLeft: x + leftMargin readonly property real columnWidth: width/columns
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 { Column {
id: nightModeBrightness width: parent.columnWidth
key: rootPath + "nightModeBrightness"
defaultValue: 1
}
HarbourHighlightIcon { ComboBox {
source: "images/brightness.svg" id: orientationComboBox
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 { //: Combo box label
source: "images/brightness.svg" //% "Orientation"
y: nightModeBrightnessSlider.sliderBarVerticalCenter - Math.round(height/2) label: qsTrId("harbour-books-settings-page-orientation_label")
anchors { value: currentItem ? currentItem.text : ""
right: parent.right menu: ContextMenu {
rightMargin: nightModeBrightnessSlider.rightMargin - Theme.paddingSmall - width id: orientationMenu
}
sourceSize.height: Math.round(Theme.iconSizeSmall * 1.2)
highlightColor: nightModeBrightnessSlider.highlightColor
opacity: (darkOnLight && !nightModeBrightnessSlider.highlighted) ? 0.6 : 1.0
}
}
ComboBox { readonly property int defaultIndex: 0
id: orientationComboBox MenuItem {
//: Combo box label readonly property int value: 0
//% "Orientation" //: Combo box value for dynamic orientation
label: qsTrId("harbour-books-settings-page-orientation_label") //% "Dynamic"
value: currentItem ? currentItem.text : "" text: qsTrId("harbour-books-settings-page-orientation-dynamic")
menu: ContextMenu { onClicked: orientation.value = value
id: orientationMenu }
readonly property int defaultIndex: 0 MenuItem {
MenuItem { readonly property int value: 1
readonly property int value: 0 //: Combo box value for portrait orientation
//: Combo box value for dynamic orientation //% "Portrait"
//% "Dynamic" text: qsTrId("harbour-books-settings-page-orientation-portrait")
text: qsTrId("harbour-books-settings-page-orientation-dynamic") onClicked: orientation.value = value
onClicked: orientation.value = value }
} MenuItem {
MenuItem { readonly property int value: 2
readonly property int value: 1 //: Combo box value for landscape orientation
//: Combo box value for portrait orientation //% "Landscape"
//% "Portrait" text: qsTrId("harbour-books-settings-page-orientation-landscape")
text: qsTrId("harbour-books-settings-page-orientation-portrait") onClicked: orientation.value = value
onClicked: orientation.value = value }
} }
MenuItem { Component.onCompleted: orientation.updateControls()
readonly property int value: 2 ConfigurationValue {
//: Combo box value for landscape orientation id: orientation
//% "Landscape" key: rootPath + "orientation"
text: qsTrId("harbour-books-settings-page-orientation-landscape") defaultValue: 0
onClicked: orientation.value = value onValueChanged: updateControls()
} function updateControls() {
} var n = orientationMenu.children.length
Component.onCompleted: orientation.updateControls() var index = orientationMenu.defaultIndex
ConfigurationValue { for (var i=0; i<n; i++) {
id: orientation if (orientationMenu.children[i].value === value) {
key: rootPath + "orientation" index = i
defaultValue: 0 break
onValueChanged: updateControls() }
function updateControls() { }
var n = orientationMenu.children.length orientationComboBox.currentIndex = index
var index = orientationMenu.defaultIndex
for (var i=0; i<n; i++) {
if (orientationMenu.children[i].value === value) {
index = i
break
} }
} }
orientationComboBox.currentIndex = index
} }
}
}
ComboBox { ComboBox {
id: layoutComboBox 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()
}
}
TextSwitch { //: Combo box label
automaticCheck: false //% "Page layout"
checked: keepDisplayOn.value label: qsTrId("harbour-books-settings-page-page_layout")
//: Text switch label value: currentItem ? currentItem.valueText : ""
//% "Keep display on while reading" readonly property int yBottom: y + Theme.itemSizeSmall
text: qsTrId("harbour-books-settings-page-keep_display_on") menu: ContextMenu {
//: Text switch description id: layoutMenu
//% "Prevent the display from blanking while reading the book."
description: qsTrId("harbour-books-settings-page-keep_display_on_description")
onClicked: keepDisplayOn.value = !keepDisplayOn.value
ConfigurationValue { readonly property int defaultIndex: 0
id: keepDisplayOn BooksDetailMenuItem {
key: rootPath + "keepDisplayOn" //: Combo box value for dynamic page layout
defaultValue: false //% "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") text: qsTrId("harbour-books-settings-page-navigation-section_header")
} }
BooksActionSelector { Grid {
//: Combo box label width: parent.width
//% "Volume up" columns: landscapeLayout ? 2 : 1
label: qsTrId("harbour-books-settings-page-volume_up-label") flow: Grid.TopToBottom
key: rootPath + "volumeUpAction"
defaultValue: 2 // BooksSettings.ActionNextPage
}
BooksActionSelector { readonly property real columnWidth: width/columns
//: Combo box label
//% "Volume down"
label: qsTrId("harbour-books-settings-page-volume_down-label")
key: rootPath + "volumeDownAction"
defaultValue: 1 // BooksSettings.ActionPreviousPage
}
TextSwitch { Column {
automaticCheck: false width: parent.columnWidth
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
ConfigurationValue { BooksActionSelector {
id: turnPageByTap id: volumeUpSelector
key: rootPath + "turnPageByTap"
defaultValue: false //: 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
}
} }
} }