From ca022d7036e74c2d28253d279377881317db4e22 Mon Sep 17 00:00:00 2001 From: Elias Steurer Date: Sat, 19 Oct 2019 20:56:12 +0200 Subject: [PATCH] Add GrowIconLink with links to my online profiles --- ScreenPlay/Resources.qrc | 9 +- ScreenPlay/assets/icons/brand_github.svg | 1 + ScreenPlay/assets/icons/brand_gitlab.svg | 1 + ScreenPlay/assets/icons/brand_twitch.svg | 1 + ScreenPlay/assets/icons/brand_twitter.svg | 1 + .../{baseline-done-24px.svg => icon_done.svg} | 0 ScreenPlay/assets/icons/icon_launch.svg | 5 + ScreenPlay/assets/images/mask_round.svg | 7 + ScreenPlay/qml/Common/GrowIconLink.qml | 63 +++++++ ScreenPlay/qml/Settings/Settings.qml | 156 ++++++++++++------ ScreenPlay/qml/Settings/SettingsButton.qml | 33 ++-- 11 files changed, 205 insertions(+), 72 deletions(-) create mode 100644 ScreenPlay/assets/icons/brand_github.svg create mode 100644 ScreenPlay/assets/icons/brand_gitlab.svg create mode 100644 ScreenPlay/assets/icons/brand_twitch.svg create mode 100644 ScreenPlay/assets/icons/brand_twitter.svg rename ScreenPlay/assets/icons/{baseline-done-24px.svg => icon_done.svg} (100%) create mode 100644 ScreenPlay/assets/icons/icon_launch.svg create mode 100644 ScreenPlay/assets/images/mask_round.svg create mode 100644 ScreenPlay/qml/Common/GrowIconLink.qml diff --git a/ScreenPlay/Resources.qrc b/ScreenPlay/Resources.qrc index 72ceac70..996b7868 100644 --- a/ScreenPlay/Resources.qrc +++ b/ScreenPlay/Resources.qrc @@ -124,11 +124,18 @@ qml/Common/RippleEffect.qml qml/Create/FFMPEGPopup.qml assets/images/FFmpeg_Logo_new.svg - assets/icons/baseline-done-24px.svg profiles.json qml/Common/Shake.qml qml/Common/Grow.qml qml/Installed/InstalledWelcomeScreen.qml qml/Monitors/DefaultVideoControls.qml + assets/images/mask_round.svg + assets/icons/icon_launch.svg + qml/Common/GrowIconLink.qml + assets/icons/brand_twitch.svg + assets/icons/brand_github.svg + assets/icons/brand_gitlab.svg + assets/icons/brand_twitter.svg + assets/icons/icon_done.svg diff --git a/ScreenPlay/assets/icons/brand_github.svg b/ScreenPlay/assets/icons/brand_github.svg new file mode 100644 index 00000000..7870c06d --- /dev/null +++ b/ScreenPlay/assets/icons/brand_github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ScreenPlay/assets/icons/brand_gitlab.svg b/ScreenPlay/assets/icons/brand_gitlab.svg new file mode 100644 index 00000000..abc7faed --- /dev/null +++ b/ScreenPlay/assets/icons/brand_gitlab.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ScreenPlay/assets/icons/brand_twitch.svg b/ScreenPlay/assets/icons/brand_twitch.svg new file mode 100644 index 00000000..06475005 --- /dev/null +++ b/ScreenPlay/assets/icons/brand_twitch.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ScreenPlay/assets/icons/brand_twitter.svg b/ScreenPlay/assets/icons/brand_twitter.svg new file mode 100644 index 00000000..55fd44d5 --- /dev/null +++ b/ScreenPlay/assets/icons/brand_twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ScreenPlay/assets/icons/baseline-done-24px.svg b/ScreenPlay/assets/icons/icon_done.svg similarity index 100% rename from ScreenPlay/assets/icons/baseline-done-24px.svg rename to ScreenPlay/assets/icons/icon_done.svg diff --git a/ScreenPlay/assets/icons/icon_launch.svg b/ScreenPlay/assets/icons/icon_launch.svg new file mode 100644 index 00000000..ff74544e --- /dev/null +++ b/ScreenPlay/assets/icons/icon_launch.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/ScreenPlay/assets/images/mask_round.svg b/ScreenPlay/assets/images/mask_round.svg new file mode 100644 index 00000000..25a44b8b --- /dev/null +++ b/ScreenPlay/assets/images/mask_round.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/ScreenPlay/qml/Common/GrowIconLink.qml b/ScreenPlay/qml/Common/GrowIconLink.qml new file mode 100644 index 00000000..59c2d0af --- /dev/null +++ b/ScreenPlay/qml/Common/GrowIconLink.qml @@ -0,0 +1,63 @@ +import QtQuick 2.0 +import QtGraphicalEffects 1.0 + +Rectangle { + id: root + color: "gray" + width: 32 + height: 32 + + property alias iconSource: icon.source + property string url + property alias color: overlay.color + + Image { + id: icon + sourceSize: Qt.size(32, 32) + anchors.centerIn: parent + visible: false + source: "qrc:/assets/icons/icon_info.svg" + } + + ColorOverlay { + id: overlay + anchors.fill: icon + source: icon + color: "orange" + } + + MouseArea { + hoverEnabled: true + anchors.fill: parent + onClicked: Qt.openUrlExternally(url) + onEntered: root.state = "hover" + onExited: root.state = "" + cursorShape: Qt.PointingHandCursor + } + + states: [ + State { + name: "hover" + PropertyChanges { + target: icon + width:40 + height:40 + sourceSize: Qt.size(40,40) + } + } + ] + + transitions: [ + Transition { + from: "" + to: "hover" + reversible: true + PropertyAnimation { + target: icon + properties: "width,height,sourceSize" + duration: 200 + easing.type: Easing.InOutQuart + } + } + ] +} diff --git a/ScreenPlay/qml/Settings/Settings.qml b/ScreenPlay/qml/Settings/Settings.qml index eb2d5ad5..bd88227d 100644 --- a/ScreenPlay/qml/Settings/Settings.qml +++ b/ScreenPlay/qml/Settings/Settings.qml @@ -7,6 +7,8 @@ import Qt.labs.platform 1.0 import ScreenPlay 1.0 +import "../Common" + Item { id: settingsWrapper anchors.fill: parent @@ -88,42 +90,39 @@ Item { description: qsTr("ScreenPlay will start with Windows and will setup your Desktop every time for you.") isChecked: ScreenPlay.settings.autostart onCheckboxChanged: { - ScreenPlay.settings.setAutostart(checked) - ScreenPlay.settings.writeSingleSettingConfig( + ScreenPlay.settings.setAutostart(checked) + ScreenPlay.settings.writeSingleSettingConfig( "autostart", checked) } } - SettingsHorizontalSeperator { - } + SettingsHorizontalSeperator {} SettingBool { headline: qsTr("High priority Autostart") available: false description: qsTr("This options grants ScreenPlay a higher autostart priority than other apps.") - isChecked: ScreenPlay.settings.highPriorityStart + isChecked: ScreenPlay.settings.highPriorityStart onCheckboxChanged: { - ScreenPlay.settings.setHighPriorityStart(checked) - ScreenPlay.settings.writeSingleSettingConfig( + ScreenPlay.settings.setHighPriorityStart( + checked) + ScreenPlay.settings.writeSingleSettingConfig( "highPriorityStart", checked) } } - SettingsHorizontalSeperator { - } + SettingsHorizontalSeperator {} SettingBool { height: 70 available: false headline: qsTr("Send anonymous crash reports and statistics") description: qsTr("Help us make ScreenPlay faster and more stable. All collected data is purely anonymous and only used for development purposes!") - isChecked: ScreenPlay.settings.sendStatistics + isChecked: ScreenPlay.settings.sendStatistics onCheckboxChanged: { - ScreenPlay.settings.setSendStatistics(checked) - ScreenPlay.settings.writeSingleSettingConfig( + ScreenPlay.settings.setSendStatistics(checked) + ScreenPlay.settings.writeSingleSettingConfig( "sendStatistics", checked) } - - } - SettingsHorizontalSeperator { } + SettingsHorizontalSeperator {} SettingsButton { headline: qsTr("Set save location") @@ -152,43 +151,42 @@ Item { horizontalAlignment: Text.AlignLeft font.pointSize: 10 font.family: "Roboto" - anchors{ - right:parent.right - left:parent.left + anchors { + right: parent.right + left: parent.left leftMargin: 20 } } - SettingsHorizontalSeperator { - } + SettingsHorizontalSeperator {} SettingsComboBox { id: settingsLanguage headline: qsTr("Language") description: qsTr("Set the ScreenPlay UI Language") onCurrentIndexChanged: { var key = settingsLanguage.comboBoxListModel.get( - settingsLanguage.currentIndex).text.toString(); + settingsLanguage.currentIndex).text.toString() - var languageKey; + var languageKey switch (key) { case "German": languageKey = "de" - break; + break case "English": languageKey = "en" - break; + break case "Russian": languageKey = "ru" - break; + break default: languageKey = "en" - break; + break } print(key, languageKey) - ScreenPlay.settings.setqSetting("language", languageKey) - + ScreenPlay.settings.setqSetting("language", + languageKey) } comboBoxListModel: ListModel { ListElement { @@ -253,19 +251,20 @@ Item { } spacing: 10 - SettingBool { headline: qsTr("Pause wallpaper while ingame") available: false description: qsTr("To maximise your framerates ingame, you can enable this setting to pause all active wallpapers!") - isChecked: ScreenPlay.settings.pauseWallpaperWhenIngame + isChecked: ScreenPlay.settings.pauseWallpaperWhenIngame onCheckboxChanged: { - ScreenPlay.settings.setPauseWallpaperWhenIngame(checked) - ScreenPlay.settings.writeSingleSettingConfig("setPauseWallpaperWhenIngame",checked) + ScreenPlay.settings.setPauseWallpaperWhenIngame( + checked) + ScreenPlay.settings.writeSingleSettingConfig( + "setPauseWallpaperWhenIngame", + checked) } } - SettingsHorizontalSeperator { - } + SettingsHorizontalSeperator {} SettingsComboBox { id: settingsFillModeComboBox headline: qsTr("Default Fill Mode") @@ -276,7 +275,6 @@ Item { comboBoxListModel: ListModel { ListElement { text: "Stretch" - } ListElement { text: "PreserveAspectFit" @@ -329,7 +327,7 @@ Item { } Column { - id:settingsAboutrapperWrapper + id: settingsAboutrapperWrapper width: parent.width spacing: 10 anchors { @@ -359,46 +357,96 @@ Item { } Text { id: txtDescriptionAbout - text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. \n \n Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. " + text: qsTr("Hi, I'm Elias Steurer also known as Kelteseth and I'm the developer of ScreenPlay. Thank you for using my software. You can follow me to receive updates about ScreenPlay here:") color: "#B5B5B5" wrapMode: Text.WordWrap verticalAlignment: Text.AlignTop horizontalAlignment: Text.AlignLeft - font.pointSize: 10 + font.pointSize: 11 font.family: "Roboto" width: parent.width * .6 anchors { top: txtHeadline.bottom - topMargin: 6 + topMargin: 15 left: parent.left leftMargin: 20 right: imgLogoHead.left - rightMargin: 20 + rightMargin: 60 bottom: parent.bottom } } + + RowLayout { + anchors { + left: parent.left + margins: 20 + bottom: parent.bottom + } + spacing: 20 + + GrowIconLink { + iconSource: "qrc:/assets/icons/brand_github.svg" + url: "https://github.com/kelteseth" + color: "#333333" + } + GrowIconLink { + iconSource: "qrc:/assets/icons/brand_gitlab.svg" + url: "https://gitlab.com/kelteseth" + color: "#FC6D26" + } + GrowIconLink { + iconSource: "qrc:/assets/icons/brand_twitter.svg" + url: "https://twitter.com/Kelteseth" + color: "#1DA1F2" + } + GrowIconLink { + iconSource: "qrc:/assets/icons/brand_twitch.svg" + url: "https://www.twitch.tv/kelteseth/" + color: "#6441A5" + } + } + Image { id: imgLogoHead - source: "qrc:/assets/icons/icon_logo_head.svg" - width: 150 - height: 150 - sourceSize: Qt.size(150, 150) + source: "https://assets.gitlab-static.net/uploads/-/system/user/avatar/64172/avatar.png" + + width: 120 + height: 120 + visible: false anchors { top: txtHeadline.bottom - topMargin: -10 + topMargin: 20 right: parent.right rightMargin: 20 } + sourceSize: Qt.size(120, 120) + } + Image { + id: mask + source: "qrc:/assets/images/mask_round.svg" + sourceSize: Qt.size(parent.width, parent.height) + smooth: true + visible: false + } + + OpacityMask { + anchors.fill: imgLogoHead + source: imgLogoHead + maskSource: mask + smooth: true } } SettingsHorizontalSeperator {} SettingsButton { + icon.source: "qrc:/assets/icons/icon_launch.svg" headline: qsTr("Version") - description: qsTr("ScreenPlay Build Version ") + ScreenPlay.settings.gitBuildHash + description: qsTr("ScreenPlay Build Version ") + + ScreenPlay.settings.gitBuildHash buttonText: qsTr("Open Changelog") - onButtonPressed: Qt.openUrlExternally("https://gitlab.com/kelteseth/ScreenPlay/-/releases") + onButtonPressed: Qt.openUrlExternally( + "https://gitlab.com/kelteseth/ScreenPlay/-/releases") } SettingsHorizontalSeperator {} @@ -412,13 +460,12 @@ Item { } } SettingsExpander { - id:expanderCopyright + id: expanderCopyright anchors { left: parent.left right: parent.right } - Connections { target: ScreenPlay.util onAllLicenseLoaded: { @@ -436,7 +483,7 @@ Item { } } SettingsExpander { - id:expanderDebug + id: expanderDebug text: ScreenPlay.util.debugMessages anchors { left: parent.left @@ -454,13 +501,12 @@ Item { } } SettingsExpander { - id:expanderDataProtection + id: expanderDataProtection anchors { left: parent.left right: parent.right } - Connections { target: ScreenPlay.util onAllDataProtectionLoaded: { @@ -475,7 +521,9 @@ Item { } } -/*##^## Designer { +/*##^## +Designer { D{i:0;autoSize:true;height:480;width:640} } - ##^##*/ +##^##*/ + diff --git a/ScreenPlay/qml/Settings/SettingsButton.qml b/ScreenPlay/qml/Settings/SettingsButton.qml index a6b9aca4..49c1841f 100644 --- a/ScreenPlay/qml/Settings/SettingsButton.qml +++ b/ScreenPlay/qml/Settings/SettingsButton.qml @@ -2,10 +2,10 @@ import QtQuick 2.12 import QtQuick.Controls 2.3 import QtQuick.Controls.Material 2.2 - Item { id: settingsButton + property alias icon: btnSettings.icon property string headline: "Headline" property string description: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit." property string buttonText: "value" @@ -13,7 +13,7 @@ Item { property bool enabled: true property bool available: true onAvailableChanged: { - if(!available){ + if (!available) { settingsButton.opacity = .5 btnSettings.enabled = false } else { @@ -22,7 +22,7 @@ Item { } } - signal buttonPressed() + signal buttonPressed height: 20 + txtHeadline.paintedHeight + txtDescription.paintedHeight width: parent.width @@ -31,52 +31,51 @@ Item { id: txtHeadline color: "#5D5D5D" text: settingsButton.headline - + verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignLeft - anchors{ - top:parent.top + anchors { + top: parent.top topMargin: 6 - left:parent.left + left: parent.left leftMargin: 20 - } - font.pointSize: 12 + font.pointSize: 12 } Text { id: txtDescription text: settingsButton.description color: "#B5B5B5" - + verticalAlignment: Text.AlignVCenter wrapMode: Text.WordWrap horizontalAlignment: Text.AlignLeft font.pointSize: 10 font.family: "Roboto" - anchors{ - top:txtHeadline.bottom + anchors { + top: txtHeadline.bottom topMargin: 6 - left:parent.left + left: parent.left leftMargin: 20 - right:btnSettings.left + right: btnSettings.left rightMargin: 20 } } - Button { - id:btnSettings + id: btnSettings text: settingsButton.buttonText Material.background: Material.Orange Material.foreground: "white" + icon.width: 20 + icon.height: 20 anchors { right: parent.right rightMargin: 20 verticalCenter: parent.verticalCenter } onPressed: buttonPressed() - } }