From f9b2af952e56235f95459125de9d177433a028b4 Mon Sep 17 00:00:00 2001 From: kelteseth Date: Sun, 23 Apr 2017 12:52:34 +0200 Subject: [PATCH] Change overall look like border radius and better font rendering --- ScreenPlay.pro | 1 + assets/icons/icon_window.svg | 1 + assets/images/Window.svg | 2 +- qml/Components/Monitors.qml | 104 +++++++++++++++++++++---- qml/Components/Navigation.qml | 1 + qml/Components/NavigationItem.qml | 1 + qml/Components/ScreenPlayItem.qml | 67 +++++++++++----- qml/Components/ScreenPlayItemImage.qml | 8 +- qml/Components/Sidebar.qml | 6 +- 9 files changed, 151 insertions(+), 40 deletions(-) create mode 100644 assets/icons/icon_window.svg diff --git a/ScreenPlay.pro b/ScreenPlay.pro index e5ed9343..0a83e69d 100644 --- a/ScreenPlay.pro +++ b/ScreenPlay.pro @@ -55,6 +55,7 @@ contains(QT_ARCH, i386) { DISTFILES += \ steam_appid.txt \ + assets/icons/favicon.ico diff --git a/assets/icons/icon_window.svg b/assets/icons/icon_window.svg new file mode 100644 index 00000000..ddafa048 --- /dev/null +++ b/assets/icons/icon_window.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/Window.svg b/assets/images/Window.svg index d3e7b474..4ba15522 100644 --- a/assets/images/Window.svg +++ b/assets/images/Window.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/qml/Components/Monitors.qml b/qml/Components/Monitors.qml index 948dc95c..23d718d0 100644 --- a/qml/Components/Monitors.qml +++ b/qml/Components/Monitors.qml @@ -14,53 +14,129 @@ Item { } + onStateChanged: { + monitorWrapper.focus = monitors.state == "active" ? true : false + } + Rectangle { - id:blurParent - color: "#80ffffff" + id:background + color: "#80000000" anchors.fill: parent + + MouseArea { + anchors.fill: parent + onClicked: monitors.state = "inactive" + } } Rectangle { - width: 800 + id:monitorWrapper + width: 900 height: 600 - + radius: 6 + z:99 anchors.centerIn: parent + + MouseArea { + id: mouseArea + anchors.fill: parent + + Rectangle { + id: rectangle + height: 464 + color: "#dfdfdf" + anchors.right: parent.right + anchors.rightMargin: 20 + anchors.left: parent.left + anchors.leftMargin: 20 + anchors.top: parent.top + anchors.topMargin: 20 + } + } } - - FastBlur { - id:blur - anchors.fill: monitors - source: blurParent - radius: 64 + DropShadow { + anchors.fill: monitorWrapper + radius: 12.0 + cached: true + samples: 17 + color: "#80000000" + source: monitorWrapper } + states: [ State { name: "active" PropertyChanges { target: monitors - visible: true + opacity: 1 + enabled:true + } + + + + PropertyChanges { + target: monitorWrapper + anchors.topMargin: 0 } PropertyChanges { - target: blur + target: background opacity: 1 } + }, State { name: "inactive" PropertyChanges { target: monitors - visible: false + opacity: 0 + enabled:false } PropertyChanges { - target: blur + target: monitorWrapper + anchors.topMargin: 50 + } + + PropertyChanges { + target: background opacity: 0 } + + + } + ] + + transitions: [ + Transition { + + + NumberAnimation { + target: background + property: "opacity" + duration: 200 + easing.type: Easing.InOutQuad + } + + + NumberAnimation { + target: monitors + property: "opacity" + duration: 200 + easing.type: Easing.InOutQuad + } + + NumberAnimation { + target: monitorWrapper + property: "anchors.topMargin" + duration: 200 + + } + } ] diff --git a/qml/Components/Navigation.qml b/qml/Components/Navigation.qml index 6c4f1523..3a2a9068 100644 --- a/qml/Components/Navigation.qml +++ b/qml/Components/Navigation.qml @@ -108,6 +108,7 @@ Rectangle { anchors.verticalCenter: parent.verticalCenter font.pixelSize: 16 font.family: font_Roboto_Regular.name + renderType: Text.NativeRendering FontLoader{ id: font_Roboto_Regular diff --git a/qml/Components/NavigationItem.qml b/qml/Components/NavigationItem.qml index b527dfc3..ac82ec77 100644 --- a/qml/Components/NavigationItem.qml +++ b/qml/Components/NavigationItem.qml @@ -49,6 +49,7 @@ Item { anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter font.family: font_Roboto_Regular.name + renderType: Text.NativeRendering FontLoader{ id: font_Roboto_Regular diff --git a/qml/Components/ScreenPlayItem.qml b/qml/Components/ScreenPlayItem.qml index 9cb8ac69..79a0e64f 100644 --- a/qml/Components/ScreenPlayItem.qml +++ b/qml/Components/ScreenPlayItem.qml @@ -10,31 +10,41 @@ Item { property string screenId: "" signal itemClicked(var screenId) - Image { id: mask source: "qrc:/assets/images/Window.svg" - sourceSize: Qt.size(itemWrapper.width, itemWrapper.height) - smooth: true + sourceSize: Qt.size(rectangle1.width, rectangle1.height) visible: false + fillMode: Image.PreserveAspectFit + antialiasing: true + } + + RectangularGlow { + id: effect + anchors.fill: itemWrapper + glowRadius: 2 + spread: 0.5 + color: "black" + opacity: .2 + cornerRadius: itemWrapper.radius + glowRadius } Rectangle { id: itemWrapper color: "white" - radius: 6 - clip: true - + radius: 5 anchors { fill: parent margins: 5 } + + Rectangle { id: rectangle1 height: 121 color: "#8b8b8b" - clip: true + visible: false anchors.right: parent.right anchors.rightMargin: 0 anchors.left: parent.left @@ -42,36 +52,55 @@ Item { anchors.top: parent.top anchors.topMargin: 0 + ScreenPlayItemImage { id: screenPlayItemImage + sourceImage: Qt.resolvedUrl( "file:///" + installedListModel._screensPath + screenFolderId + "/" + screenPreview) } } + OpacityMask { + anchors.fill: rectangle1 + antialiasing: true + source: rectangle1 + maskSource: mask + + } + MouseArea { + anchors.fill: parent + onClicked: { + itemClicked(screenId) + } + } + + Text { id: text1 y: 136 height: 29 text: screenTitle - anchors.rightMargin: 156 - anchors.leftMargin: 5 - anchors.bottomMargin: 5 - anchors.topMargin: 5 + renderType: Text.NativeRendering + anchors.rightMargin: 108 + anchors.leftMargin: 10 + anchors.bottomMargin: 10 + anchors.topMargin: 10 anchors.top: rectangle1.bottom anchors.right: parent.right anchors.bottom: parent.bottom anchors.left: parent.left - wrapMode: Text.WrapAnywhere - font.pixelSize: 11 - anchors.margins: 10 - } + wrapMode: Text.WordWrap - MouseArea { - anchors.fill: parent - onClicked: { - itemClicked(screenId) + font.pixelSize: 12 + color: "#2F2F2F" + anchors.margins: 10 + font.family: font_Roboto_Regular.name + + FontLoader { + id: font_Roboto_Regular + source: "qrc:/assets/fonts/Roboto-Regular.ttf" } } diff --git a/qml/Components/ScreenPlayItemImage.qml b/qml/Components/ScreenPlayItemImage.qml index 694392bc..f9adf7f0 100644 --- a/qml/Components/ScreenPlayItemImage.qml +++ b/qml/Components/ScreenPlayItemImage.qml @@ -2,10 +2,12 @@ import QtQuick 2.7 Image { id: image - width: 300 - height: 250 + width: 320 + height: 121 state: "loading" + property string sourceImage: "" + states: [ State { name: "loading" @@ -39,7 +41,7 @@ Image { } ] - property string sourceImage: "" + onSourceImageChanged: { image.source = sourceImage diff --git a/qml/Components/Sidebar.qml b/qml/Components/Sidebar.qml index 6437c2fe..98a0e096 100644 --- a/qml/Components/Sidebar.qml +++ b/qml/Components/Sidebar.qml @@ -78,13 +78,13 @@ Item { Image { id: imgBack - width: 22 - height: 30 + anchors.left: parent.left anchors.leftMargin: 0 opacity: 1 source: "qrc:/assets/icons/icon_arrow_left.svg" - sourceSize: Qt.size(22,30) + sourceSize: Qt.size(14,23) + fillMode: Image.PreserveAspectCrop anchors { top:parent.top topMargin: 0