[app] Added UI to configure night mode brightnesss

This commit is contained in:
Slava Monich 2020-10-23 01:21:24 +03:00
parent ca6f60132c
commit a03e4e3dc7
15 changed files with 277 additions and 2 deletions

View file

@ -57,6 +57,7 @@ OTHER_FILES += \
qml/images/* \ qml/images/* \
settings/*.qml \ settings/*.qml \
settings/*.json \ settings/*.json \
settings/images/* \
data/default/* \ data/default/* \
data/zlibrary/core/encodings/* \ data/zlibrary/core/encodings/* \
data/zlibrary/core/resources/* data/zlibrary/core/resources/*
@ -203,6 +204,7 @@ SOURCES += \
HARBOUR_QML_COMPONENTS = \ HARBOUR_QML_COMPONENTS = \
$$HARBOUR_LIB_QML/HarbourFitLabel.qml \ $$HARBOUR_LIB_QML/HarbourFitLabel.qml \
$$HARBOUR_LIB_QML/HarbourHighlightIcon.qml \
$$HARBOUR_LIB_QML/HarbourHorizontalSwipeHint.qml $$HARBOUR_LIB_QML/HarbourHorizontalSwipeHint.qml
OTHER_FILES += $${HARBOUR_QML_COMPONENTS} OTHER_FILES += $${HARBOUR_QML_COMPONENTS}
@ -240,6 +242,10 @@ settings_qml.files = settings/*.qml
settings_qml.path = /usr/share/$${TARGET}/settings/ settings_qml.path = /usr/share/$${TARGET}/settings/
INSTALLS += settings_qml INSTALLS += settings_qml
settings_images.files = settings/images/*.svg
settings_images.path = /usr/share/$${TARGET}/settings/images/
INSTALLS += settings_images
# Desktop file # Desktop file
equals(PREFIX, "openrepos") { equals(PREFIX, "openrepos") {
desktop.extra = sed s/harbour/openrepos/g harbour-$${NAME}.desktop > $${TARGET}.desktop desktop.extra = sed s/harbour/openrepos/g harbour-$${NAME}.desktop > $${TARGET}.desktop

View file

@ -1,5 +1,5 @@
.pragma library .pragma library
function contentOpacity(brightness) { function contentOpacity(brightness) {
return 0.5 + brightness * 0.5 return 0.4 + brightness * 0.6
} }

View file

@ -35,11 +35,15 @@ import QtQuick 2.0
import Sailfish.Silica 1.0 import Sailfish.Silica 1.0
import org.nemomobile.configuration 1.0 import org.nemomobile.configuration 1.0
import "../qml/Books.js" as Books
import "../qml/harbour"
Page { Page {
id: page id: page
property bool followOrientationChanges property bool followOrientationChanges
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
// Deduce package name from the path // Deduce package name from the path
function appName() { function appName() {
@ -68,6 +72,44 @@ Page {
anchors.fill: parent anchors.fill: parent
contentHeight: content.height contentHeight: content.height
// Night mode example (positioned right above the slider)
Rectangle {
opacity: nightModeBrightnessSlider.pressed ? 1.0 : 0
visible: opacity > 0
radius: Theme.paddingSmall
width: nightModeExampleLabel.width + 2 * Theme.paddingLarge
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
z: nightModeBrightnessSlider.z + 1
color: "black"
border {
color: Theme.highlightColor
width: Math.ceil(radius/5)
}
Label {
id: nightModeExampleLabel
anchors.centerIn: parent
color: "white"
opacity: Books.contentOpacity(nightModeBrightness.value)
//: Night mode example label
//% "Night mode"
text: qsTrId("harbour-books-settings-page-night_mode_example")
font {
bold: true
pixelSize: Theme.fontSizeLarge
family: "Times"
}
}
Behavior on x { SmoothedAnimation { duration: 125 } }
Behavior on opacity { FadeAnimation { duration: 500 } }
}
Column { Column {
id: content id: content
width: parent.width width: parent.width
@ -99,7 +141,7 @@ Page {
//% "Font size" //% "Font size"
label: qsTrId("harbour-books-settings-page-font_size_label") label: qsTrId("harbour-books-settings-page-font_size_label")
valueText: (value === 0) ? normal : ((value > 0) ? ("+" + value) : value) valueText: (value === 0) ? normal : ((value > 0) ? ("+" + value) : value)
width: page.width width: parent.width
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
onSliderValueChanged: fontSize.value = value onSliderValueChanged: fontSize.value = value
Component.onCompleted: value = fontSize.value Component.onCompleted: value = fontSize.value
@ -112,6 +154,55 @@ Page {
} }
} }
Slider {
id: nightModeBrightnessSlider
width: parent.width
//: Slider label
//% "Night mode brightness"
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 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
}
}
ComboBox { ComboBox {
id: orientationComboBox id: orientationComboBox
//: Combo box label //: Combo box label

View file

@ -0,0 +1,68 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="48"
height="48"
version="1.1"
inkscape:version="0.92.4 (unknown)"
sodipodi:docname="brightness.svg">
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
transform="translate(-8,-996.36218)">
<g
transform="translate(8,996.36218)">
<rect
height="48"
width="48"
style="fill:none"
x="0"
y="0" />
<path
d="m 24,13.5 c -5.797,0 -10.5,4.682 -10.5,10.5 0,5.816 4.703,10.5 10.5,10.5 5.796,0 10.5,-4.684 10.5,-10.5 0,-5.818 -4.704,-10.5 -10.5,-10.5 z"
style="fill:#ffffff;fill-opacity:1"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cssscc" />
<path
d="m 24,0.75 c -1.5,0 -2.25,0.75 -2.25,1.5 V 9 c 0,0.75 0.75,1.5 2.25,1.5 1.5,0 2.25,-0.75 2.25,-1.5 V 2.25 C 26.25,1.5 25.5,0.75 24,0.75 Z"
style="fill:#ffffff;fill-opacity:1"
inkscape:connector-curvature="0" />
<path
d="M 10.5,24.003 C 10.5,22.5 9.75,21.75 9,21.75 H 2.25 c -0.75,0 -1.5,0.75 -1.5,2.248 0,1.502 0.75,2.252 1.5,2.252 H 9 c 0.75,0 1.5,-0.75 1.5,-2.247 z"
style="fill:#ffffff;fill-opacity:1"
inkscape:connector-curvature="0" />
<path
d="M 47.25,24.003 C 47.25,22.5 46.5,21.75 45.75,21.75 H 39 c -0.75,0 -1.5,0.75 -1.5,2.248 0,1.502 0.75,2.252 1.5,2.252 h 6.75 c 0.75,0 1.5,-0.75 1.5,-2.247 z"
style="fill:#ffffff;fill-opacity:1"
inkscape:connector-curvature="0" />
<path
d="M 14.584,11.631 10.642,7.674 c -0.708,-0.71 -1.949,-0.71 -2.655,0 l -0.5,0.501 c -0.731,0.733 -0.731,1.931 0,2.663 l 3.944,3.959 c 0.354,0.355 0.824,0.55 1.327,0.55 0.503,0 0.974,-0.194 1.328,-0.55 l 0.499,-0.5 c 0.354,-0.355 0.548,-0.83 0.548,-1.332 0,-0.506 -0.195,-0.979 -0.549,-1.334 z"
style="fill:#ffffff;fill-opacity:1"
inkscape:connector-curvature="0" />
<path
d="m 40.562,8.174 -0.498,-0.5 c -0.708,-0.711 -1.948,-0.711 -2.655,0 l -3.943,3.956 c -0.731,0.736 -0.731,1.931 0,2.667 l 0.5,0.5 c 0.353,0.355 0.824,0.55 1.326,0.55 0.504,0 0.975,-0.194 1.328,-0.55 l 3.943,-3.959 c 0.731,-0.733 0.731,-1.93 -0.001,-2.664 z"
style="fill:#ffffff;fill-opacity:1"
inkscape:connector-curvature="0" />
<path
d="m 24,47.25 c 1.5,0 2.25,-0.75 2.25,-1.5 V 39 c 0,-0.75 -0.75,-1.5 -2.25,-1.5 -1.5,0 -2.25,0.75 -2.25,1.5 v 6.75 c 0,0.75 0.75,1.5 2.25,1.5 z"
style="fill:#ffffff;fill-opacity:1"
inkscape:connector-curvature="0" />
<path
d="m 33.465,36.424 3.943,3.957 c 0.707,0.71 1.948,0.71 2.654,0 l 0.499,-0.5 c 0.731,-0.734 0.731,-1.932 0,-2.665 l -3.942,-3.958 c -0.354,-0.355 -0.825,-0.55 -1.328,-0.55 -0.502,0 -0.974,0.194 -1.326,0.55 l -0.5,0.5 c -0.354,0.354 -0.547,0.829 -0.547,1.332 0,0.506 0.193,0.978 0.547,1.334 z"
style="fill:#ffffff;fill-opacity:1"
inkscape:connector-curvature="0" />
<path
d="m 7.488,39.881 0.499,0.5 c 0.708,0.71 1.947,0.71 2.655,0 l 3.942,-3.956 c 0.733,-0.736 0.733,-1.932 0,-2.667 l -0.498,-0.5 c -0.354,-0.355 -0.825,-0.549 -1.328,-0.549 -0.502,0 -0.974,0.193 -1.326,0.549 l -3.944,3.959 c -0.732,0.732 -0.732,1.929 0,2.664 z"
style="fill:#ffffff;fill-opacity:1"
inkscape:connector-curvature="0" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.7 KiB

View file

@ -144,6 +144,16 @@
<extracomment>Slider value label for the standard font size</extracomment> <extracomment>Slider value label for the standard font size</extracomment>
<translation>Standard</translation> <translation>Standard</translation>
</message> </message>
<message id="harbour-books-settings-page-night_mode_example">
<source>Night mode</source>
<extracomment>Night mode example label</extracomment>
<translation type="unfinished">Nacht-Modus</translation>
</message>
<message id="harbour-books-settings-page-night_mode_brightness_label">
<source>Night mode brightness</source>
<extracomment>Slider label</extracomment>
<translation type="unfinished">Helligkeit im Nacht-Modus</translation>
</message>
<message id="harbour-books-settings-page-orientation_label"> <message id="harbour-books-settings-page-orientation_label">
<source>Orientation</source> <source>Orientation</source>
<extracomment>Combo box label</extracomment> <extracomment>Combo box label</extracomment>

View file

@ -144,6 +144,16 @@
<extracomment>Slider value label for the standard font size</extracomment> <extracomment>Slider value label for the standard font size</extracomment>
<translation>Por defecto</translation> <translation>Por defecto</translation>
</message> </message>
<message id="harbour-books-settings-page-night_mode_example">
<source>Night mode</source>
<extracomment>Night mode example label</extracomment>
<translation type="unfinished">Modo nocturno</translation>
</message>
<message id="harbour-books-settings-page-night_mode_brightness_label">
<source>Night mode brightness</source>
<extracomment>Slider label</extracomment>
<translation type="unfinished">Brillo en modo nocturno</translation>
</message>
<message id="harbour-books-settings-page-orientation_label"> <message id="harbour-books-settings-page-orientation_label">
<source>Orientation</source> <source>Orientation</source>
<extracomment>Combo box label</extracomment> <extracomment>Combo box label</extracomment>

View file

@ -144,6 +144,16 @@
<extracomment>Slider value label for the standard font size</extracomment> <extracomment>Slider value label for the standard font size</extracomment>
<translation type="unfinished">Oletus</translation> <translation type="unfinished">Oletus</translation>
</message> </message>
<message id="harbour-books-settings-page-night_mode_example">
<source>Night mode</source>
<extracomment>Night mode example label</extracomment>
<translation type="unfinished">Yötila</translation>
</message>
<message id="harbour-books-settings-page-night_mode_brightness_label">
<source>Night mode brightness</source>
<extracomment>Slider label</extracomment>
<translation type="unfinished">Kirkkaus yötilassa</translation>
</message>
<message id="harbour-books-settings-page-orientation_label"> <message id="harbour-books-settings-page-orientation_label">
<source>Orientation</source> <source>Orientation</source>
<extracomment>Combo box label</extracomment> <extracomment>Combo box label</extracomment>

View file

@ -142,6 +142,16 @@
<extracomment>Slider value label for the standard font size</extracomment> <extracomment>Slider value label for the standard font size</extracomment>
<translation>Alapértelmezett</translation> <translation>Alapértelmezett</translation>
</message> </message>
<message id="harbour-books-settings-page-night_mode_example">
<source>Night mode</source>
<extracomment>Night mode example label</extracomment>
<translation type="unfinished">Éjszakai mód</translation>
</message>
<message id="harbour-books-settings-page-night_mode_brightness_label">
<source>Night mode brightness</source>
<extracomment>Slider label</extracomment>
<translation type="unfinished">Fényerő éjszakai üzemmódban</translation>
</message>
<message id="harbour-books-settings-page-orientation_label"> <message id="harbour-books-settings-page-orientation_label">
<source>Orientation</source> <source>Orientation</source>
<extracomment>Combo box label</extracomment> <extracomment>Combo box label</extracomment>

View file

@ -144,6 +144,16 @@
<extracomment>Slider value label for the standard font size</extracomment> <extracomment>Slider value label for the standard font size</extracomment>
<translation>Standaard</translation> <translation>Standaard</translation>
</message> </message>
<message id="harbour-books-settings-page-night_mode_example">
<source>Night mode</source>
<extracomment>Night mode example label</extracomment>
<translation type="unfinished">Nachtstand</translation>
</message>
<message id="harbour-books-settings-page-night_mode_brightness_label">
<source>Night mode brightness</source>
<extracomment>Slider label</extracomment>
<translation type="unfinished">Helderheid in nachtstand</translation>
</message>
<message id="harbour-books-settings-page-orientation_label"> <message id="harbour-books-settings-page-orientation_label">
<source>Orientation</source> <source>Orientation</source>
<extracomment>Combo box label</extracomment> <extracomment>Combo box label</extracomment>

View file

@ -146,6 +146,16 @@
<extracomment>Slider value label for the standard font size</extracomment> <extracomment>Slider value label for the standard font size</extracomment>
<translation>Domyślny</translation> <translation>Domyślny</translation>
</message> </message>
<message id="harbour-books-settings-page-night_mode_example">
<source>Night mode</source>
<extracomment>Night mode example label</extracomment>
<translation type="unfinished">Tryb nocny</translation>
</message>
<message id="harbour-books-settings-page-night_mode_brightness_label">
<source>Night mode brightness</source>
<extracomment>Slider label</extracomment>
<translation type="unfinished">Jasność w trybie nocnym</translation>
</message>
<message id="harbour-books-settings-page-orientation_label"> <message id="harbour-books-settings-page-orientation_label">
<source>Orientation</source> <source>Orientation</source>
<extracomment>Combo box label</extracomment> <extracomment>Combo box label</extracomment>

View file

@ -144,6 +144,16 @@
<extracomment>Slider value label for the standard font size</extracomment> <extracomment>Slider value label for the standard font size</extracomment>
<translation>Padrão</translation> <translation>Padrão</translation>
</message> </message>
<message id="harbour-books-settings-page-night_mode_example">
<source>Night mode</source>
<extracomment>Night mode example label</extracomment>
<translation type="unfinished">Modo noturno</translation>
</message>
<message id="harbour-books-settings-page-night_mode_brightness_label">
<source>Night mode brightness</source>
<extracomment>Slider label</extracomment>
<translation type="unfinished">Brilho no modo noturno</translation>
</message>
<message id="harbour-books-settings-page-orientation_label"> <message id="harbour-books-settings-page-orientation_label">
<source>Orientation</source> <source>Orientation</source>
<extracomment>Combo box label</extracomment> <extracomment>Combo box label</extracomment>

View file

@ -146,6 +146,16 @@
<extracomment>Slider value label for the standard font size</extracomment> <extracomment>Slider value label for the standard font size</extracomment>
<translation>Стандартный</translation> <translation>Стандартный</translation>
</message> </message>
<message id="harbour-books-settings-page-night_mode_example">
<source>Night mode</source>
<extracomment>Night mode example label</extracomment>
<translation>Ночной режим</translation>
</message>
<message id="harbour-books-settings-page-night_mode_brightness_label">
<source>Night mode brightness</source>
<extracomment>Slider label</extracomment>
<translation>Яркость в ночном режиме</translation>
</message>
<message id="harbour-books-settings-page-orientation_label"> <message id="harbour-books-settings-page-orientation_label">
<source>Orientation</source> <source>Orientation</source>
<extracomment>Combo box label</extracomment> <extracomment>Combo box label</extracomment>

View file

@ -144,6 +144,16 @@
<extracomment>Slider value label for the standard font size</extracomment> <extracomment>Slider value label for the standard font size</extracomment>
<translation>Standard</translation> <translation>Standard</translation>
</message> </message>
<message id="harbour-books-settings-page-night_mode_example">
<source>Night mode</source>
<extracomment>Night mode example label</extracomment>
<translation type="unfinished">Nattläge</translation>
</message>
<message id="harbour-books-settings-page-night_mode_brightness_label">
<source>Night mode brightness</source>
<extracomment>Slider label</extracomment>
<translation type="unfinished">Ljusstyrka i nattläge</translation>
</message>
<message id="harbour-books-settings-page-orientation_label"> <message id="harbour-books-settings-page-orientation_label">
<source>Orientation</source> <source>Orientation</source>
<extracomment>Combo box label</extracomment> <extracomment>Combo box label</extracomment>

View file

@ -142,6 +142,16 @@
<extracomment>Slider value label for the standard font size</extracomment> <extracomment>Slider value label for the standard font size</extracomment>
<translation></translation> <translation></translation>
</message> </message>
<message id="harbour-books-settings-page-night_mode_example">
<source>Night mode</source>
<extracomment>Night mode example label</extracomment>
<translation type="unfinished"></translation>
</message>
<message id="harbour-books-settings-page-night_mode_brightness_label">
<source>Night mode brightness</source>
<extracomment>Slider label</extracomment>
<translation type="unfinished"></translation>
</message>
<message id="harbour-books-settings-page-orientation_label"> <message id="harbour-books-settings-page-orientation_label">
<source>Orientation</source> <source>Orientation</source>
<extracomment>Combo box label</extracomment> <extracomment>Combo box label</extracomment>

View file

@ -144,6 +144,16 @@
<extracomment>Slider value label for the standard font size</extracomment> <extracomment>Slider value label for the standard font size</extracomment>
<translation>Default</translation> <translation>Default</translation>
</message> </message>
<message id="harbour-books-settings-page-night_mode_example">
<source>Night mode</source>
<extracomment>Night mode example label</extracomment>
<translation>Night mode</translation>
</message>
<message id="harbour-books-settings-page-night_mode_brightness_label">
<source>Night mode brightness</source>
<extracomment>Slider label</extracomment>
<translation>Night mode brightness</translation>
</message>
<message id="harbour-books-settings-page-orientation_label"> <message id="harbour-books-settings-page-orientation_label">
<source>Orientation</source> <source>Orientation</source>
<extracomment>Combo box label</extracomment> <extracomment>Combo box label</extracomment>