Boxes blur, more styling

This commit is contained in:
miruka 2019-04-28 00:44:55 -04:00
parent 8a714fb7a0
commit d3749af4bc
13 changed files with 99 additions and 56 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

Binary file not shown.

View File

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

Before

Width:  |  Height:  |  Size: 4.8 KiB