Boxes blur, more styling
This commit is contained in:
		
							
								
								
									
										2
									
								
								TODO.md
									
									
									
									
									
								
							
							
						
						
									
										2
									
								
								TODO.md
									
									
									
									
									
								
							| @@ -14,8 +14,10 @@ | ||||
|   -  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 | ||||
|   | ||||
| @@ -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() | ||||
|   | ||||
| @@ -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) | ||||
|   | ||||
							
								
								
									
										34
									
								
								harmonyqml/components/base/HGlassRectangle.qml
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										34
									
								
								harmonyqml/components/base/HGlassRectangle.qml
									
									
									
									
									
										Normal 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 | ||||
|     } | ||||
| } | ||||
| @@ -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) | ||||
|   | ||||
							
								
								
									
										7
									
								
								harmonyqml/components/base/HSplitView.qml
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										7
									
								
								harmonyqml/components/base/HSplitView.qml
									
									
									
									
									
										Normal 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 {} | ||||
| } | ||||
| @@ -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 | ||||
|     } | ||||
| } | ||||
|   | ||||
| @@ -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 | ||||
|         } | ||||
|     } | ||||
| } | ||||
|   | ||||
| @@ -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" | ||||
|   | ||||
| @@ -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 { | ||||
|   | ||||
| @@ -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) | ||||
|   | ||||
							
								
								
									
										
											BIN
										
									
								
								harmonyqml/images/.login_background.jpg-autosave.kra
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								harmonyqml/images/.login_background.jpg-autosave.kra
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| @@ -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 | 
		Reference in New Issue
	
	Block a user
	