Initial themes implementation, new default theme

2019-07-24 02:14:34 -04:00
parent 345b17b21f
commit ec27ecf498
89 changed files with 956 additions and 165 deletions
--- a/src/qml/Base/HAvatar.qml
+++ b/src/qml/Base/HAvatar.qml
@@ -8,8 +8,8 @@ import "../utils.js" as Utils

 HRectangle {
    id: avatar
-    implicitWidth: theme.avatar.size
-    implicitHeight: theme.avatar.size
+    implicitWidth: theme.controls.avatar.size
+    implicitHeight: theme.controls.avatar.size

    property string name: ""
    property var imageUrl: ""
@@ -20,18 +20,27 @@ HRectangle {

    readonly property var params: Utils.thumbnailParametersFor(width, height)

-    color: imageUrl ? "transparent" :
-           name ? Utils.avatarColor(name) :
-           theme.avatar.background.unknown
+    color: avatarImage.visible ? "transparent" : Utils.hsla(
+       name ? Utils.hueFrom(name) : 0,
+       name ? theme.controls.avatar.background.saturation : 0,
+       theme.controls.avatar.background.lightness,
+       theme.controls.avatar.background.opacity
+   )

    HLabel {
        z: 1
        anchors.centerIn: parent
-        visible: ! imageUrl
+        visible: ! avatarImage.visible

        text: name ? name.charAt(0) : "?"
-        color: theme.avatar.letter
        font.pixelSize: parent.height / 1.4
+
+        color: Utils.hsla(
+           name ? Utils.hueFrom(name) : 0,
+           name ? theme.controls.avatar.letter.saturation : 0,
+           theme.controls.avatar.letter.lightness,
+           theme.controls.avatar.letter.opacity
+       )
    }

    HImage {
--- a/src/qml/Base/HBusyIndicator.qml
+++ b/src/qml/Base/HBusyIndicator.qml
@@ -1,4 +1,24 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12

-BusyIndicator {}
+BusyIndicator {
+    id: indicator
+    implicitWidth: Math.min(192, Math.max(64, parent.width / 5))
+    implicitHeight: 10
+
+    contentItem: Item {
+        Rectangle {
+            id: rect
+            width: indicator.height
+            height: indicator.height
+            radius: height / 2
+
+            XAnimator on x {
+                from: 0
+                to: indicator.width - rect.width
+                duration: 500
+                onStopped: {[from, to] = [to, from]; start()}
+            }
+        }
+    }
+}
--- a/src/qml/Base/HIcon.qml
+++ b/src/qml/Base/HIcon.qml
@@ -4,10 +4,14 @@
 import QtQuick 2.12

 HImage {
-    property var svgName: null
+    property string svgName: ""
    property int dimension: 20

-    source: "../../icons/" + (svgName || "none") + ".svg"
+    source:
+        svgName ?
+        ("../../icons/" + theme.preferredIconPack + "/" + svgName + ".svg") :
+        ""
+
    sourceSize.width: svgName ? dimension : 0
    sourceSize.height: svgName ? dimension : 0
 }
--- a/src/qml/Base/HInteractiveRectangle.qml
+++ b/src/qml/Base/HInteractiveRectangle.qml
@@ -8,18 +8,20 @@ HRectangle {
    property bool checked: false

    readonly property QtObject _ir: theme.controls.interactiveRectangle
+    color: _ir.background

-    property color normalColor: _ir.background
-    property color hoveredColor: _ir.hoveredBackground
-    property color pressedColor: _ir.pressedBackground
-    property color checkedColor: _ir.checkedBackground
+    HRectangle {
+        anchors.fill: parent
+        visible: opacity > 0

-    color: checked ? checkedColor :
-           // tap.pressed ? pressedColor :
-           hover.hovered ? hoveredColor :
-           normalColor
+        color: checked ? _ir.checkedOverlay : _ir.hoveredOverlay

-    Behavior on color { HColorAnimation { factor: 0.66 } }
+        opacity: checked ?       _ir.checkedOpacity :
+                 hover.hovered ? _ir.hoveredOpacity :
+                 0
+
+        Behavior on opacity { HNumberAnimation { factor: 0.66 } }
+    }

    HoverHandler { id: hover }
    TapHandler { id: tap }
--- a/src/qml/Base/HInterfaceBox.qml
+++ b/src/qml/Base/HInterfaceBox.qml
@@ -56,7 +56,7 @@ HScalingBox {
                    onClicked: buttonCallbacks[modelData.name](button)

                    Layout.fillWidth: true
-                    Layout.preferredHeight: theme.avatar.size
+                    Layout.preferredHeight: theme.controls.avatar.size
                }
            }
        }
--- a/src/qml/Base/HLabel.qml
+++ b/src/qml/Base/HLabel.qml
@@ -2,16 +2,15 @@
 // This file is part of harmonyqml, licensed under LGPLv3.

 import QtQuick.Controls 2.12
+import QtQuick 2.12

 Label {
    font.family: theme.fontFamily.sans
    font.pixelSize: theme.fontSize.normal
    textFormat: Label.PlainText

-    color: theme.colors.foreground
-    style: Label.Outline
-    styleColor: theme.colors.textBorder
-    linkColor: theme.colors.accentDarker
+    color: theme.colors.text
+    linkColor: theme.colors.link

    maximumLineCount: elide == Label.ElideNone ? Number.MAX_VALUE : 1
 }
--- a/src/qml/Base/HNoticePage.qml
+++ b/src/qml/Base/HNoticePage.qml
@@ -30,8 +30,8 @@ HRowLayout {

        background: Rectangle {
            id: noticeLabelBackground
-            color: theme.box.background
-            radius: theme.box.radius
+            color: theme.controls.box.background
+            radius: theme.controls.box.radius
        }
    }
 }
--- a/src/qml/Base/HPage.qml
+++ b/src/qml/Base/HPage.qml
@@ -38,7 +38,7 @@ SwipeView {

        header: HRectangle {
            implicitWidth: parent ? parent.width : 0
-            color: theme.pageHeadersBackground
+            color: theme.controls.header.background

            height: ! hideHeaderUnderHeight ||
                    window.height >=
--- a/src/qml/Base/HRectangle.qml
+++ b/src/qml/Base/HRectangle.qml
@@ -5,5 +5,5 @@ import QtQuick 2.12

 Rectangle {
    id: rectangle
-    color: theme.sidePane.background
+    color: theme.controls.box.background
 }
--- a/src/qml/Base/HScalingBox.qml
+++ b/src/qml/Base/HScalingBox.qml
@@ -11,7 +11,7 @@ HRectangle {
    readonly property int baseWidth: baseHeight * widthForHeight
    readonly property int margins: baseHeight * 0.03

-    color: theme.box.background
+    color: theme.controls.box.background
    height: Math.min(parent.height, baseHeight)
    width: Math.min(parent.width, baseWidth)
    scale: Math.max(1, parent.height / startScalingUpAboveHeight)
--- a/src/qml/Base/HScrollableTextArea.qml
+++ b/src/qml/Base/HScrollableTextArea.qml
@@ -24,7 +24,7 @@ ScrollView {
        font.family: theme.fontFamily.sans
        font.pixelSize: theme.fontSize.normal

-        color: theme.colors.foreground
+        color: theme.controls.textArea.text
        background: Rectangle {
            id: textAreaBackground
            color: theme.controls.textArea.background
--- a/src/qml/Base/HTextField.qml
+++ b/src/qml/Base/HTextField.qml
@@ -18,16 +18,17 @@ TextField {
    property color focusedBorderColor: _tf.focusedBorder
    property alias radius: textFieldBackground.radius

-    color: theme.colors.foreground
+    color: activeFocus ? _tf.focusedText : _tf.text
+
    background: Rectangle {
        id: textFieldBackground
        color: field.activeFocus ? focusedBackgroundColor : backgroundColor
        border.color: field.activeFocus ? focusedBorderColor : borderColor
        border.width: bordered ? theme.controls.textField.borderWidth : 0

-        Behavior on color { HColorAnimation {} }
-        Behavior on border.color { HColorAnimation {} }
-        Behavior on border.width { HNumberAnimation {} }
+        Behavior on color { HColorAnimation { factor: 0.5 } }
+        Behavior on border.color { HColorAnimation { factor: 0.5 } }
+        Behavior on border.width { HNumberAnimation { factor: 0.5 } }
    }

    selectByMouse: true
--- a/src/qml/Base/HUIButton.qml
+++ b/src/qml/Base/HUIButton.qml
@@ -51,7 +51,8 @@ HBaseButton {
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                color: enabled ?
-                       theme.colors.foreground : theme.colors.foregroundDim2
+                       theme.controls.button.text :
+                       theme.controls.button.disabledText
                Behavior on color { HNumberAnimation {} }

                Layout.fillWidth: true
--- a/src/qml/Chat/ChatSplitView.qml
+++ b/src/qml/Chat/ChatSplitView.qml
@@ -16,6 +16,9 @@ HSplitView {
        Layout.fillWidth: true

        EventList {
+            // Avoid a certain binding loop
+            Layout.minimumWidth: theme.minimumSupportedWidth
+
            Layout.fillWidth: true
            Layout.fillHeight: true
        }
@@ -79,11 +82,11 @@ HSplitView {
            to: target.oldWidth

            onStopped: target.Layout.minimumWidth = Qt.binding(
-                () => theme.avatar.size
+                () => theme.controls.avatar.size
            )
       }

-        collapsed: width < theme.avatar.size + theme.spacing
+        collapsed: width < theme.controls.avatar.size + theme.spacing

        property bool wasSnapped: false
        property int referenceWidth: roomHeader.buttonsWidth
@@ -110,7 +113,7 @@ HSplitView {
        }

        width: referenceWidth // Initial width
-        Layout.minimumWidth: theme.avatar.size
+        Layout.minimumWidth: theme.controls.avatar.size
        Layout.maximumWidth:
            parent.width - theme.minimumSupportedWidthPlusSpacing
    }
--- a/src/qml/Chat/RoomHeader.qml
+++ b/src/qml/Chat/RoomHeader.qml
@@ -38,6 +38,7 @@ HRectangle {
            id: roomName
            text: displayName
            font.pixelSize: theme.fontSize.big
+            color: theme.chat.roomHeader.name
            elide: Text.ElideRight
            verticalAlignment: Text.AlignVCenter

@@ -54,6 +55,7 @@ HRectangle {
            id: roomTopic
            text: topic
            font.pixelSize: theme.fontSize.small
+            color: theme.chat.roomHeader.topic
            elide: Text.ElideRight
            verticalAlignment: Text.AlignVCenter

@@ -78,6 +80,7 @@ HRectangle {
                    "members", "files", "notifications", "history", "settings"
                ]
                HUIButton {
+                    backgroundColor: theme.chat.selectViewBar.background
                    iconName: "room-view-" + modelData
                    iconDimension: 22
                    autoExclusive: true
@@ -96,9 +99,13 @@ HRectangle {
    HUIButton {
        id: expandButton
        z: 1
+        width: theme.controls.avatar.size
+        height: width
        anchors.right: parent.right
        opacity: collapseButtons ? 1 : 0
        visible: opacity > 0
+
+        backgroundColor: theme.chat.selectViewBar.background
        iconName: "reduced-room-buttons"

        Behavior on opacity {
--- a/src/qml/Chat/RoomSidePane/RoomSidePane.qml
+++ b/src/qml/Chat/RoomSidePane/RoomSidePane.qml
@@ -7,6 +7,7 @@ import "../../Base"

 HRectangle {
    id: roomSidePane
+    color: theme.chat.roomSidePane.background

    property bool collapsed: false
    property var activeView: null
--- a/src/qml/Chat/Timeline/Daybreak.qml
+++ b/src/qml/Chat/Timeline/Daybreak.qml
@@ -6,7 +6,7 @@ import "../../Base"

 HNoticePage {
    text: model.date.toLocaleDateString()
-    color: theme.chat.daybreak.foreground
+    color: theme.chat.daybreak.text
    backgroundColor: theme.chat.daybreak.background
    radius: theme.chat.daybreak.radius
 }
--- a/src/qml/LoadingScreen.qml
+++ b/src/qml/LoadingScreen.qml
@@ -3,9 +3,11 @@

 import QtQuick 2.12
 import "Base"
+import "utils.js" as Utils

-Rectangle {
-    color: "lightgray"
+HRectangle {
+    color: theme ? theme.controls.box.background : "#0f1222"
+    Behavior on color { HNumberAnimation {} }

    HBusyIndicator {
        anchors.centerIn: parent
--- a/src/qml/Pages/EditAccount/EditAccount.qml
+++ b/src/qml/Pages/EditAccount/EditAccount.qml
@@ -24,7 +24,7 @@ HPage {
        )

    HRectangle {
-        color: ready ? theme.box.background : "transparent"
+        color: ready ? theme.controls.box.background : "transparent"
        Behavior on color { HColorAnimation {} }

        Layout.alignment: Qt.AlignCenter
--- a/src/qml/Shortcuts.qml
+++ b/src/qml/Shortcuts.qml
@@ -31,4 +31,21 @@ Item {
        sequence: "Alt+Shift+D"
        onActivated: if (window.debug) { py.call("APP.pdb") }
    }
+
+    /*
+    Shortcut {
+        sequence: "Ctrl+-"
+        onActivated: theme.fontScale = Math.max(0.1, theme.fontScale - 0.1)
+    }
+
+    Shortcut {
+        sequence: "Ctrl++"
+        onActivated: theme.fontScale = Math.min(10, theme.fontScale + 0.1)
+    }
+
+    Shortcut {
+        sequence: "Ctrl+="
+        onActivated: theme.fontScale = 1.0
+    }
+    */
 }
--- a/src/qml/SidePane/AccountDelegate.qml
+++ b/src/qml/SidePane/AccountDelegate.qml
@@ -8,6 +8,7 @@ import "../Base"
 Column {
    id: accountDelegate
    width: parent.width
+    spacing: theme.spacing / 2

    property var userInfo: users.find(model.userId)
    property bool expanded: true
@@ -23,8 +24,7 @@ Column {
    HInteractiveRectangle {
        width: parent.width
        height: childrenRect.height
-
-        normalColor: theme.sidePane.account.background
+        color: theme.sidePane.account.background

        TapHandler {
            onTapped: pageStack.showPage(
@@ -48,6 +48,7 @@ Column {

                HLabel {
                    id: accountLabel
+                    color: theme.sidePane.account.name
                    text: userInfo.displayName || model.userId
                    font.pixelSize: theme.fontSize.big
                    elide: HLabel.ElideRight
--- a/src/qml/SidePane/RoomCategoryDelegate.qml
+++ b/src/qml/SidePane/RoomCategoryDelegate.qml
@@ -42,6 +42,8 @@ Column {
            text: model.name
            font.weight: Font.DemiBold
            elide: Text.ElideRight
+            topPadding: theme.spacing / 2
+            bottomPadding: topPadding

            Layout.leftMargin: sidePane.currentSpacing
            Layout.fillWidth: true
--- a/src/qml/SidePane/RoomDelegate.qml
+++ b/src/qml/SidePane/RoomDelegate.qml
@@ -10,6 +10,7 @@ HInteractiveRectangle {
    id: roomDelegate
    width: roomList.width
    height: childrenRect.height
+    color: theme.sidePane.room.background

    TapHandler {
        onTapped: pageStack.showRoom(
@@ -38,6 +39,7 @@ HInteractiveRectangle {

                HLabel {
                    id: roomLabel
+                    color: theme.sidePane.room.name
                    text: model.displayName || "<i>Empty room</i>"
                    textFormat:
                        model.displayName? Text.PlainText : Text.StyledText
@@ -68,6 +70,7 @@ HInteractiveRectangle {
                    onLastEvChanged: text = getText(lastEv)

                    id: subtitleLabel
+                    color: theme.sidePane.room.subtitle
                    visible: Boolean(text)
                    textFormat: Text.StyledText

--- a/src/qml/SidePane/SidePane.qml
+++ b/src/qml/SidePane/SidePane.qml
@@ -11,6 +11,8 @@ HRectangle {
    opacity: mainUI.accountsPresent && ! reduce ? 1 : 0
    visible: opacity > 0

+    color: theme.sidePane.background
+
    property real autoWidthRatio: theme.sidePane.autoWidthRatio
    property bool manuallyResizing: false
    property bool manuallyResized: false
--- a/src/qml/UI.qml
+++ b/src/qml/UI.qml
@@ -8,8 +8,9 @@ import QtQuick.Window 2.7
 import "Base"
 import "SidePane"

-Item {
+HRectangle {
    id: mainUI
+    color: theme.ui.background

    Connections {
        target: py
@@ -34,6 +35,7 @@ Item {
        accounts.count > 0 || py.loadingAccounts

    HImage {
+        visible: false
        id: mainUIBackground
        fillMode: Image.PreserveAspectCrop
        source: "../images/background.jpg"
--- a/src/qml/Window.qml
+++ b/src/qml/Window.qml
@@ -8,13 +8,14 @@ import "Models"

 ApplicationWindow {
    id: window
+    flags: Qt.WA_TranslucentBackground
    minimumWidth: theme ? theme.minimumSupportedWidth : 240
    minimumHeight: theme ? theme.minimumSupportedHeight : 120
    width: 640
    height: 480
    visible: true
    title: "Harmony QML"
-    color: "black"
+    color: "transparent"

    Component.onCompleted: {
        Qt.application.organization = "harmonyqml"
--- a/src/qml/utils.js
+++ b/src/qml/utils.js
@@ -1,7 +1,11 @@
 // Copyright 2019 miruka
 // This file is part of harmonyqml, licensed under LGPLv3.

-"use strict"
+
+function hsluv(hue, saturation, lightness, alpha=1.0) {
+    let rgb = py.call_sync("APP.backend.hsluv", [hue, saturation, lightness])
+    return Qt.rgba(rgb[0], rgb[1], rgb[2], alpha)
+}


 function hsl(hue, saturation, lightness) {
@@ -30,31 +34,20 @@ function arrayToModelItem(keysName, array) {


 function hueFrom(string) {
-    // Calculate and return a unique hue between 0 and 1 for the string
+    // Calculate and return a unique hue between 0 and 360 for the string
    let hue = 0
    for (let i = 0; i < string.length; i++) {
        hue += string.charCodeAt(i) * 99
    }
-    return hue % 360 / 360
-}
-
-
-function avatarColor(name) {
-   return Qt.hsla(
-       hueFrom(name),
-       theme.avatar.background.saturation,
-       theme.avatar.background.lightness,
-       theme.avatar.background.alpha
-   )
+    return hue % 360
 }


 function nameColor(name) {
-    return Qt.hsla(
+    return hsl(
        hueFrom(name),
-        theme.displayName.saturation,
-        theme.displayName.lightness,
-        1
+        theme.controls.displayName.saturation,
+        theme.controls.displayName.lightness,
    )
 }