[foilnotes] Made font sizes configurable

monich · Sep 22, 2024 · 1c317b8 · 1c317b8
1 parent 287556a
commit 1c317b8
Show file tree

Hide file tree

Showing 16 changed files with 406 additions and 76 deletions.
diff --git a/app.pro b/app.pro
@@ -75,6 +75,7 @@ LIBS += libqrencode.a -ldl
 OTHER_FILES += \
     LICENSE \
     *.desktop \
+    qml/*.js \
     qml/*.qml \
     qml/images/*.svg \
     icons/*.svg \

diff --git a/qml/NoteItem.qml b/qml/NoteItem.qml
@@ -2,6 +2,7 @@ import QtQuick 2.0
 import Sailfish.Silica 1.0
 import harbour.foilnotes 1.0
 
+import "Utils.js" as Utils
 import "harbour"
 
 Item {
@@ -82,10 +83,7 @@ Item {
             lineHeightMode: Text.FixedHeight
             lineHeight: font.pixelSize + Theme.paddingSmall
             wrapMode: Text.Wrap
-            font {
-                family: Theme.fontFamily
-                pixelSize: Theme.fontSizeSmall
-            }
+            font.pixelSize: Utils.fontPixelSize(FoilNotesSettings.gridFontSize, Theme.fontSizeSmall)
             color: highlighted ? Theme.highlightColor : Theme.primaryColor
             maximumLineCount: maxPaintedLines + 1
             readonly property real bottomMargin: Theme.paddingLarge + colorRect.height

diff --git a/qml/NotePage.qml b/qml/NotePage.qml
@@ -2,6 +2,7 @@ import QtQuick 2.0
 import Sailfish.Silica 1.0
 import harbour.foilnotes 1.0
 
+import "Utils.js" as Utils
 import "harbour"
 
 Page {
@@ -280,10 +281,7 @@ Page {
 
             TextArea {
                 id: textArea
-                font {
-                    family: Theme.fontFamily
-                    pixelSize: Theme.fontSizeMedium
-                }
+                font.pixelSize: Utils.fontPixelSize(FoilNotesSettings.editorFontSize, Theme.fontSizeMedium)
                 width: parent.width
                 height: Math.max(noteview.height - headerItem.height, implicitHeight)
                 //: Placeholder text for new notes. At this point there is nothing else on the screen.

diff --git a/qml/Utils.js b/qml/Utils.js
@@ -0,0 +1,17 @@
+.pragma library
+.import Sailfish.Silica 1.0 as Silica
+
+var _fontPixesSizes = {
+    "tiny":       Silica.Theme.fontSizeTiny,
+    "extraSmall": Silica.Theme.fontSizeExtraSmall,
+    "small":      Silica.Theme.fontSizeSmall,
+    "medium":     Silica.Theme.fontSizeMedium,
+    "large":      Silica.Theme.fontSizeLarge,
+    "extraLarge": Silica.Theme.fontSizeExtraLarge,
+    "huge":       Silica.Theme.fontSizeHuge
+}
+
+function fontPixelSize(config, defaultSize) {
+    var size = _fontPixesSizes[config]
+    return !!size ? size : defaultSize
+}
diff --git a/settings/FontSizeSlider.qml b/settings/FontSizeSlider.qml
@@ -0,0 +1,100 @@
+import QtQuick 2.0
+import Sailfish.Silica 1.0
+import org.nemomobile.configuration 1.0
+
+Item {
+    property alias label: slider.label
+    property alias configKey: config.key
+    property alias defaultValue: config.defaultValue
+
+    height: slider.height
+    width: parent.width
+
+    readonly property var _fontSizeConfigValues: [
+        "tiny",
+        "extraSmall",
+        "small",
+        "medium",
+        "large",
+        "extraLarge",
+        "huge"
+    ]
+
+    readonly property var _fontPixesSizes: [
+        Theme.fontSizeTiny,
+        Theme.fontSizeExtraSmall,
+        Theme.fontSizeSmall,
+        Theme.fontSizeMedium,
+        Theme.fontSizeLarge,
+        Theme.fontSizeExtraLarge,
+        Theme.fontSizeHuge
+    ]
+
+    readonly property int _defaultIndex: _fontSizeConfigValues.indexOf(defaultValue)
+
+    Slider {
+        id: slider
+
+        readonly property real _sliderBarVerticalCenter: Math.round(height - Theme.fontSizeSmall - Theme.paddingSmall - Theme.itemSizeExtraSmall*3/8)
+        readonly property color _highlightColor: highlighted ? Theme.secondaryHighlightColor : Theme.secondaryColor
+
+        function fontSizeIndex(value) {
+            var i = _fontSizeConfigValues.indexOf(value)
+            return i >= 0 ? i : _defaultIndex
+        }
+
+        rightMargin: Theme.paddingLarge
+        anchors {
+            left: parent.left
+            right: sample.left
+        }
+        stepSize: 1
+        minimumValue: 0
+        maximumValue: _fontSizeConfigValues.length - 1
+        value: fontSizeIndex(config.value)
+        valueText: ""
+        onSliderValueChanged: config.value = _fontSizeConfigValues[sliderValue]
+    }
+
+    MouseArea {
+        id: sample
+
+        property bool _highlighted: pressed && containsMouse
+        readonly property bool _showPress: _highlighted || pressTimer.running
+
+        width: Theme.itemSizeLarge + Theme.horizontalPageMargin
+        height: slider.height
+        anchors.right: parent.right
+
+        onPressedChanged: {
+            if (pressed) {
+                pressTimer.start()
+            }
+        }
+
+        onCanceled: pressTimer.stop()
+
+        onClicked: slider.value = _defaultIndex
+
+        Text {
+            y: slider._sliderBarVerticalCenter - Math.round(height/2)
+            anchors {
+                right: parent.right
+                rightMargin: Theme.horizontalPageMargin
+            }
+            color: parent._showPress ? Theme.highlightColor : Theme.primaryColor
+            font.pixelSize: _fontPixesSizes[slider.sliderValue]
+            text: "abc"
+        }
+
+        Timer {
+            id: pressTimer
+
+            interval: ('minimumPressHighlightTime' in Theme) ? Theme.minimumPressHighlightTime : 64
+        }
+    }
+
+    ConfigurationValue {
+        id: config
+    }
+}
diff --git a/settings/settings.qml b/settings/settings.qml
@@ -45,6 +45,34 @@ Page {
                 }
             }
 
+            SectionHeader {
+                //: Section label
+                //% "Appearance"
+                text: qsTrId("foilnotes-settings_page-section-appearance")
+            }
+
+            FontSizeSlider {
+                //: Slider label
+                //% "Grid text size"
+                label: qsTrId("foilnotes-settings_page-grid_font_size-label")
+                configKey: _rootPath + "gridFontSize"
+                defaultValue: "small"
+            }
+
+            FontSizeSlider {
+                //: Slider label
+                //% "Editor text size"
+                label: qsTrId("foilnotes-settings_page-editor_font_size-label")
+                configKey: _rootPath + "editorFontSize"
+                defaultValue: "medium"
+            }
+
+            SectionHeader {
+                //: Section label
+                //% "Security"
+                text: qsTrId("foilnotes-settings_page-section-security")
+            }
+
             TextSwitch {
                 //: Text switch label
                 //% "Automatic locking"