Boxes blur, more styling

TODO.md

@@ -14,8 +14,10 @@
   - ![A picture](https://picsum.photos/256/256) not clickable?
   - Icons aren't reloaded
   - Bug when resizing window being tiled (i3), can't figure it out
+  - HStyle singleton isn't reloaded
 
 - UI
+  - Test HGlassRectangle elements when no effects are available
   - Leave room
   - Forget room warning popup
   - Use HRowLayout and its totalSpacing wherever possible

harmonyqml/components/UI.qml

@@ -1,21 +1,23 @@
 import QtQuick 2.7
-import QtQuick.Controls 1.4 as Controls1
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.4
 import "base" as Base
 import "sidePane" as SidePane
 import "chat" as Chat
 
-Base.HImage {
+Item {
     id: mainUI
+
+    Base.HImage {
+        id: mainUIBackground
         fillMode: Image.PreserveAspectCrop
         source: "../images/login_background.jpg"
         anchors.fill: parent
+    }
 
     property bool accountsLoggedIn: Backend.clientManager.clientCount > 0
 
-    //https://doc.qt.io/qt-5/qml-qtquick-controls-splitview.html
+    Base.HSplitView {
-    Controls1.SplitView {
         anchors.fill: parent
 
         SidePane.Root {
@@ -25,6 +27,10 @@ Base.HImage {
         }
 
         StackView {
+            id: pageStack
+
+            property bool initialPageSet: false
+
             function showPage(name, properties) {
                 pageStack.replace("pages/" + name + ".qml", properties || {})
             }
@@ -35,10 +41,11 @@ Base.HImage {
                 )
             }
 
-            id: pageStack
+            Component.onCompleted: {
-            Component.onCompleted: showPage(
+                if (initialPageSet) { return }
-                accountsLoggedIn ? "Default" : "SignIn"
+                initialPageSet = true
-            )
+                showPage(accountsLoggedIn ? "Default" : "SignIn")
+            }
 
             onCurrentItemChanged: if (currentItem) {
                 currentItem.forceActiveFocus()

harmonyqml/components/Window.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls 2.2
 import QtQuick.Window 2.7
 
 ApplicationWindow {
+    id: appWindow
     visible: true
     width: Math.min(Screen.width, 1152)
     height: Math.min(Screen.height, 768)

harmonyqml/components/base/HGlassRectangle.qml

@@ -0,0 +1,34 @@
+import QtQuick 2.7
+import QtGraphicalEffects 1.0
+
+Item {
+    default property alias children: rectangle.children
+    property alias color: rectangle.color
+    property alias gradient: rectangle.gradient
+    property alias blurRadius: fastBlur.radius
+    property alias border: rectangle.border
+    property alias radius: rectangle.radius
+
+    ShaderEffectSource {
+        id: effectSource
+        sourceItem: mainUIBackground
+        anchors.fill: parent
+        sourceRect: Qt.rect(
+            pageStack.x + parent.x, pageStack.y + parent.y, width, height
+        )
+    }
+
+    FastBlur {
+        id: fastBlur
+        cached: true
+        anchors.fill: effectSource
+        source: effectSource
+        radius: 8
+    }
+
+    Rectangle {
+        id: rectangle
+        anchors.fill: parent
+        color: HStyle.sidePane.background
+    }
+}

harmonyqml/components/base/HScalingBox.qml

@@ -1,6 +1,6 @@
 import QtQuick 2.7
 
-Rectangle {
+HGlassRectangle {
     property real widthForHeight: 0.75
     property int baseHeight: 300
     property int startScalingUpAboveHeight: 1080
@@ -8,7 +8,7 @@ Rectangle {
     readonly property int baseWidth: baseHeight * widthForHeight
     readonly property int margins: baseHeight * 0.03
 
-    color: Qt.hsla(1, 1, 1, 0.3)
+    color: HStyle.boxes.background
     height: Math.min(parent.height, baseHeight)
     width: Math.min(parent.width, baseWidth)
     scale: Math.max(1, parent.height / startScalingUpAboveHeight)

harmonyqml/components/base/HSplitView.qml

@@ -0,0 +1,7 @@
+import QtQuick 2.7
+import QtQuick.Controls 1.4 as Controls1
+
+//https://doc.qt.io/qt-5/qml-qtquick-controls-splitview.html
+Controls1.SplitView {
+    handleDelegate: Item {}
+}

harmonyqml/components/base/HStyle.qml

@@ -2,21 +2,36 @@ pragma Singleton
 import QtQuick 2.7
 
 QtObject {
-    readonly property int foo: 3
-
     readonly property QtObject fontSize: QtObject {
-        readonly property int smallest: 6
+        property int smallest: 6
-        readonly property int smaller: 8
+        property int smaller: 8
-        readonly property int small: 12
+        property int small: 12
-        readonly property int normal: 16
+        property int normal: 16
-        readonly property int big: 24
+        property int big: 24
-        readonly property int bigger: 32
+        property int bigger: 32
-        readonly property int biggest: 48
+        property int biggest: 48
     }
 
     readonly property QtObject fontFamily: QtObject {
-        readonly property string sans: "Roboto"
+        property string sans: "SFNS Display"
-        readonly property string serif: "Roboto Slab"
+        property string serif: "Roboto Slab"
-        readonly property string mono: "Hack"
+        property string mono: "Hack"
+    }
+
+    readonly property QtObject colors: QtObject {
+        property color background0: Qt.hsla(1, 1, 1, 0.4)
+    }
+
+    readonly property QtObject sidePane: QtObject {
+        property color background: colors.background0
+    }
+
+    readonly property QtObject boxes: QtObject {
+        property color background: colors.background0
+        property int radius: 5
+    }
+
+    readonly property QtObject avatars: QtObject {
+        property int radius: 5
     }
 }

harmonyqml/components/pages/Default.qml

@@ -16,7 +16,8 @@ Base.HRowLayout {
         Layout.maximumWidth: parent.width - Layout.margins * 2
 
         background: Rectangle {
-            color: Qt.hsla(1, 1, 1, 0.3)
+            color: Base.HStyle.boxes.background
+            radius: Base.HStyle.boxes.radius
         }
     }
 }

harmonyqml/components/pages/SignIn.qml

@@ -5,9 +5,11 @@ import "../base" as Base
 
 Item {
     property string loginWith: "username"
-
     onFocusChanged: identifierField.forceActiveFocus()
 
+    property int wi: x
+    onWiChanged: console.log("loginI", wi)
+
     Base.HInterfaceBox {
         id: signInBox
         title: "Sign in"

harmonyqml/components/sidePane/Root.qml

@@ -1,11 +1,11 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.4
+import QtGraphicalEffects 1.0
 import "../base" as Base
 
-Rectangle {
+Base.HGlassRectangle {
     id: sidePane
-    color: "gray"
     clip: true  // Avoid artifacts when resizing pane width to minimum
 
     ColumnLayout {

harmonyqml/engine.py

@@ -62,9 +62,9 @@ class Engine(QQmlApplicationEngine):
 
 
     def reload_qml(self) -> None:
-        self.clearComponentCache()
         loader = self.rootObjects()[0].findChild(QObject, "UILoader")
         source = loader.property("source")
         loader.setProperty("source", None)
+        self.clearComponentCache()
         loader.setProperty("source", source)
         logging.info("Reloaded: %s", source)

harmonyqml/images/matrix_logo.svg

@@ -1,26 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="793.322"
-   height="340.809"
-   style="paint-order:stroke;stroke:#ffffff;stroke-opacity:0.5;stroke-width:4;stroke-linejoin:round"
-   id="Layer_1">
-  <path
-     d="m 10.875,9.711 v 321.386 h 23.13 v 7.711 H 2 V 2 h 32 v 7.71 z" />
-  <path
-     d="m 100,111.595 v 16.264 h 0.463 c 4.338,-6.191 9.563,-11 15.684,-14.406 6.117,-3.402 13.129,-5.11 21.027,-5.11 7.588,0 14.521,1.475 20.793,4.415 6.274,2.945 11.038,8.131 14.291,15.567 3.56,-5.265 8.4,-9.913 14.521,-13.94 6.117,-4.025 13.358,-6.042 21.724,-6.042 6.351,0 12.234,0.776 17.66,2.325 5.418,1.549 10.065,4.027 13.938,7.434 3.869,3.41 6.889,7.863 9.062,13.357 2.167,5.504 3.253,12.122 3.253,19.869 v 80.385 H 219.41 v -68.074 c 0,-4.025 -0.154,-7.82 -0.465,-11.385 -0.313,-3.56 -1.161,-6.656 -2.555,-9.293 -1.395,-2.631 -3.45,-4.724 -6.157,-6.274 -2.711,-1.543 -6.391,-2.322 -11.037,-2.322 -4.646,0 -8.403,0.896 -11.269,2.671 -2.868,1.784 -5.112,4.109 -6.737,6.971 -1.626,2.869 -2.711,6.12 -3.252,9.762 -0.545,3.638 -0.814,7.318 -0.814,11.035 v 66.91 h -33 v -67.375 c 0,-3.562 -0.081,-7.087 -0.23,-10.57 -0.158,-3.487 -0.814,-6.7 -1.978,-9.645 -1.162,-2.94 -3.1,-5.304 -5.809,-7.088 -2.711,-1.775 -6.7,-2.671 -11.965,-2.671 -1.551,0 -3.603,0.349 -6.156,1.048 -2.556,0.697 -5.036,2.016 -7.435,3.949 -2.404,1.938 -4.454,4.726 -6.158,8.363 -1.705,3.642 -2.556,8.402 -2.556,14.287 v 69.701 H 68.856 V 111.595 Z" />
-  <path
-     d="m 273.544,129.255 c 3.405,-5.113 7.744,-9.215 13.012,-12.316 5.264,-3.097 11.186,-5.303 17.771,-6.621 6.582,-1.315 13.205,-1.976 19.865,-1.976 6.042,0 12.158,0.428 18.354,1.277 6.195,0.855 11.85,2.522 16.962,5 5.111,2.477 9.292,5.926 12.546,10.338 3.253,4.414 4.879,10.262 4.879,17.543 v 62.494 c 0,5.428 0.31,10.611 0.931,15.567 0.615,4.959 1.701,8.676 3.251,11.153 H 347.66 c -0.621,-1.86 -1.126,-3.755 -1.511,-5.693 -0.39,-1.933 -0.661,-3.908 -0.813,-5.923 -5.267,5.422 -11.465,9.217 -18.585,11.386 -7.127,2.163 -14.407,3.251 -21.842,3.251 -5.733,0 -11.077,-0.698 -16.033,-2.09 -4.958,-1.395 -9.293,-3.562 -13.01,-6.51 -3.718,-2.938 -6.622,-6.656 -8.713,-11.147 -2.091,-4.491 -3.138,-9.84 -3.138,-16.033 0,-6.813 1.2,-12.43 3.604,-16.84 2.4,-4.417 5.495,-7.939 9.295,-10.575 3.793,-2.632 8.129,-4.607 13.01,-5.923 4.878,-1.315 9.795,-2.358 14.752,-3.137 4.957,-0.772 9.835,-1.393 14.638,-1.857 4.801,-0.466 9.062,-1.164 12.779,-2.093 3.718,-0.929 6.658,-2.282 8.829,-4.065 2.165,-1.781 3.172,-4.375 3.02,-7.785 0,-3.56 -0.58,-6.389 -1.742,-8.479 -1.161,-2.09 -2.711,-3.719 -4.646,-4.88 -1.937,-1.161 -4.183,-1.936 -6.737,-2.325 -2.557,-0.382 -5.309,-0.58 -8.248,-0.58 -6.506,0 -11.617,1.395 -15.335,4.183 -3.716,2.788 -5.889,7.437 -6.506,13.94 h -33 c 0.462,-7.742 2.395,-14.173 5.807,-19.281 z m 65.169,46.583 c -2.09,0.696 -4.337,1.275 -6.736,1.741 -2.402,0.465 -4.918,0.853 -7.551,1.161 -2.635,0.313 -5.268,0.698 -7.7,1.163 -2.48,0.461 -4.919,1.086 -7.317,1.857 -2.404,0.779 -4.495,1.822 -6.274,3.138 -1.784,1.317 -3.216,2.985 -4.3,5 -1.085,2.014 -1.626,4.571 -1.626,7.668 0,2.94 0.541,5.422 1.626,7.431 1.084,2.017 2.558,3.604 4.416,4.765 1.858,1.161 4.025,1.976 6.507,2.438 2.475,0.466 5.031,0.698 7.665,0.698 6.505,0 11.537,-1.082 15.103,-3.253 3.561,-2.166 6.192,-4.762 7.9,-7.785 1.702,-3.019 2.749,-6.072 3.137,-9.174 0.384,-3.097 0.58,-5.576 0.58,-7.434 V 172.93 c -1.396,1.243 -3.138,2.21 -5.23,2.908 z" />
-  <path
-     d="m 463.825,111.595 v 22.072 h -24.161 v 59.479 c 0,5.573 0.928,9.292 2.788,11.149 1.856,1.859 5.576,2.788 11.152,2.788 1.859,0 3.638,-0.076 5.343,-0.232 1.703,-0.152 3.33,-0.388 4.878,-0.696 v 25.557 c -2.788,0.465 -5.887,0.773 -9.293,0.931 -3.407,0.149 -6.737,0.23 -10,0.23 -5.111,0 -9.953,-0.35 -14.521,-1.048 -4.571,-0.695 -8.597,-2.047 -12.081,-4.063 -3.486,-2.011 -6.236,-4.88 -8.248,-8.597 -2.016,-3.714 -3.021,-8.595 -3.021,-14.639 v -70.859 h -19.98 v -22.072 h 19.98 V 75.583 h 33 v 36.012 z" />
-  <path
-     d="M 510.988,111.595 V 133.9 h 0.465 c 1.546,-3.72 3.636,-7.163 6.272,-10.341 2.634,-3.172 5.652,-5.885 9.06,-8.131 3.405,-2.242 7.047,-3.985 10.923,-5.228 3.868,-1.237 7.898,-1.859 12.081,-1.859 2.168,0 4.566,0.39 7.202,1.163 v 30.67 c -1.551,-0.312 -3.41,-0.584 -5.576,-0.814 -2.17,-0.233 -4.26,-0.35 -6.274,-0.35 -6.041,0 -11.152,1.01 -15.332,3.021 -4.182,2.014 -7.55,4.761 -10.107,8.247 -2.555,3.487 -4.379,7.55 -5.462,12.198 -1.083,4.645 -1.625,9.682 -1.625,15.102 v 54.133 H 479.624 V 111.595 Z" />
-  <path
-     d="M 570.93,93 V 65.824 h 33 v 27.183 z m 33,18.588 V 231.712 H 570.93 V 111.595 Z" />
-  <path
-     d="m 621.115,111.595 h 37.637 l 21.144,31.365 20.911,-31.365 h 36.476 l -39.496,56.226 44.377,63.892 h -37.64 l -25.093,-37.87 -25.094,37.87 h -36.938 l 43.213,-63.193 z" />
-  <path
-     d="M 782.443,331.097 V 9.711 h -23.13 v -7.71 h 32 v 336.807 h -32 v -7.711 z" />
-</svg>