[app] Added UI to configure night mode brightnesss

app/app.pro

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

app/qml/Books.js

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

app/settings/BooksSettings.qml

@@ -35,11 +35,15 @@ import QtQuick 2.0
 import Sailfish.Silica 1.0
 import org.nemomobile.configuration 1.0
 
+import "../qml/Books.js" as Books
+import "../qml/harbour"
+
 Page {
     id: page
     property bool followOrientationChanges
     property alias title: pageHeader.title
     readonly property string rootPath: "/apps/" + appName() + "/"
+    readonly property bool darkOnLight: ('colorScheme' in Theme) && Theme.colorScheme === 1
 
     // Deduce package name from the path
     function appName() {
@@ -68,6 +72,44 @@ Page {
         anchors.fill: parent
         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 {
             id: content
             width: parent.width
@@ -99,7 +141,7 @@ Page {
                 //% "Font size"
                 label: qsTrId("harbour-books-settings-page-font_size_label")
                 valueText: (value === 0) ? normal : ((value > 0) ? ("+" + value) : value)
-                width: page.width
+                width: parent.width
                 anchors.horizontalCenter: parent.horizontalCenter
                 onSliderValueChanged: fontSize.value = 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 {
                 id: orientationComboBox
                 //: Combo box label

app/settings/images/brightness.svg

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

app/translations/harbour-books-de.ts

@@ -144,6 +144,16 @@
         <extracomment>Slider value label for the standard font size</extracomment>
         <translation>Standard</translation>
     </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">
         <source>Orientation</source>
         <extracomment>Combo box label</extracomment>

app/translations/harbour-books-es.ts

@@ -144,6 +144,16 @@
         <extracomment>Slider value label for the standard font size</extracomment>
         <translation>Por defecto</translation>
     </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">
         <source>Orientation</source>
         <extracomment>Combo box label</extracomment>

app/translations/harbour-books-fi.ts

@@ -144,6 +144,16 @@
         <extracomment>Slider value label for the standard font size</extracomment>
         <translation type="unfinished">Oletus</translation>
     </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">
         <source>Orientation</source>
         <extracomment>Combo box label</extracomment>

app/translations/harbour-books-hu.ts

@@ -142,6 +142,16 @@
         <extracomment>Slider value label for the standard font size</extracomment>
         <translation>Alapértelmezett</translation>
     </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">
         <source>Orientation</source>
         <extracomment>Combo box label</extracomment>

app/translations/harbour-books-nl.ts

@@ -144,6 +144,16 @@
         <extracomment>Slider value label for the standard font size</extracomment>
         <translation>Standaard</translation>
     </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">
         <source>Orientation</source>
         <extracomment>Combo box label</extracomment>

app/translations/harbour-books-pl.ts

@@ -146,6 +146,16 @@
         <extracomment>Slider value label for the standard font size</extracomment>
         <translation>Domyślny</translation>
     </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">
         <source>Orientation</source>
         <extracomment>Combo box label</extracomment>

app/translations/harbour-books-pt.ts

@@ -144,6 +144,16 @@
         <extracomment>Slider value label for the standard font size</extracomment>
         <translation>Padrão</translation>
     </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">
         <source>Orientation</source>
         <extracomment>Combo box label</extracomment>

app/translations/harbour-books-ru.ts

@@ -146,6 +146,16 @@
         <extracomment>Slider value label for the standard font size</extracomment>
         <translation>Стандартный</translation>
     </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">
         <source>Orientation</source>
         <extracomment>Combo box label</extracomment>

app/translations/harbour-books-sv.ts

@@ -144,6 +144,16 @@
         <extracomment>Slider value label for the standard font size</extracomment>
         <translation>Standard</translation>
     </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">
         <source>Orientation</source>
         <extracomment>Combo box label</extracomment>

app/translations/harbour-books-zh_CN.ts

@@ -142,6 +142,16 @@
         <extracomment>Slider value label for the standard font size</extracomment>
         <translation>默认</translation>
     </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">
         <source>Orientation</source>
         <extracomment>Combo box label</extracomment>

app/translations/harbour-books.ts

@@ -144,6 +144,16 @@
         <extracomment>Slider value label for the standard font size</extracomment>
         <translation>Default</translation>
     </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">
         <source>Orientation</source>
         <extracomment>Combo box label</extracomment>