Boxes blur, more styling

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
-    fillMode: Image.PreserveAspectCrop
-    source: "../images/login_background.jpg"
-    anchors.fill: parent
+
+    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
-    Controls1.SplitView {
+    Base.HSplitView {
         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: showPage(
-                accountsLoggedIn ? "Default" : "SignIn"
-            )
+            Component.onCompleted: {
+                if (initialPageSet) { return }
+                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
-        readonly property int smaller: 8
-        readonly property int small: 12
-        readonly property int normal: 16
-        readonly property int big: 24
-        readonly property int bigger: 32
-        readonly property int biggest: 48
+        property int smallest: 6
+        property int smaller: 8
+        property int small: 12
+        property int normal: 16
+        property int big: 24
+        property int bigger: 32
+        property int biggest: 48
     }
 
     readonly property QtObject fontFamily: QtObject {
-        readonly property string sans: "Roboto"
-        readonly property string serif: "Roboto Slab"
-        readonly property string mono: "Hack"
+        property string sans: "SFNS Display"
+        property string serif: "Roboto Slab"
+        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 {