mirror of
https://gitlab.com/kelteseth/ScreenPlay.git
synced 2024-09-18 16:32:33 +02:00
Add new settings style
This commit is contained in:
kelteseth
parent
0a70f6b796
commit
f84c379e9f
@ -48,7 +48,6 @@
|
||||
<file>qml/Components/Feedback.qml</file>
|
||||
<file>qml/Components/CreateVideoPreviewSmall.qml</file>
|
||||
<file>qml/Components/CreateLeftArea.qml</file>
|
||||
<file>qml/Components/Settings/SettingsWrapper.qml</file>
|
||||
<file>qml/Components/StartupErrorWindow.qml</file>
|
||||
<file>assets/icons/icon_heavy_metal.svg</file>
|
||||
<file>qml/Components/InstalledUserHelper.qml</file>
|
||||
@ -76,5 +75,7 @@
|
||||
<file>qml/Components/Create/CreateImport.qml</file>
|
||||
<file>qml/Components/Create/CreateUpload.qml</file>
|
||||
<file>qml/Components/Create/CreateImportStatus.qml</file>
|
||||
<file>qml/Components/Settings/SettingsHeader.qml</file>
|
||||
<file>qml/Components/Settings/SettingsHorizontalSeperator.qml</file>
|
||||
</qresource>
|
||||
</RCC>
|
||||
|
||||
@ -3,36 +3,62 @@ import QtQuick.Controls 1.4
|
||||
|
||||
Item {
|
||||
id: settingsBool
|
||||
property string name: ""
|
||||
property string headline: "Headline"
|
||||
property string description: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
|
||||
property bool isChecked: false
|
||||
signal checkboxChanged(bool checked)
|
||||
|
||||
height: 50
|
||||
width: parent.width
|
||||
|
||||
height: 30
|
||||
|
||||
FontLoader {
|
||||
id: font_Roboto_Regular
|
||||
source: "qrc:/assets/fonts/Roboto-Regular.ttf"
|
||||
}
|
||||
Text {
|
||||
id: txtName
|
||||
text: settingsBool.name
|
||||
id: txtHeadline
|
||||
color: "#5D5D5D"
|
||||
text: settingsBool.headline
|
||||
renderType: Text.NativeRendering
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
horizontalAlignment: Text.AlignLeft
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 20
|
||||
anchors{
|
||||
top:parent.top
|
||||
topMargin: 6
|
||||
left:parent.left
|
||||
leftMargin: 20
|
||||
|
||||
}
|
||||
|
||||
font.pixelSize: 16
|
||||
font.family: font_Roboto_Regular.name
|
||||
}
|
||||
|
||||
FontLoader {
|
||||
id: font_Roboto_Regular
|
||||
source: "qrc:/assets/fonts/Roboto-Regular.ttf"
|
||||
Text {
|
||||
id: txtDescription
|
||||
text: settingsBool.description
|
||||
color: "#B5B5B5"
|
||||
renderType: Text.NativeRendering
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
horizontalAlignment: Text.AlignLeft
|
||||
font.pixelSize: 12
|
||||
font.family: font_Roboto_Regular.name
|
||||
anchors{
|
||||
top:txtHeadline.bottom
|
||||
topMargin: 6
|
||||
left:parent.left
|
||||
leftMargin: 20
|
||||
}
|
||||
}
|
||||
|
||||
CheckBox {
|
||||
id: radioButton
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: txtName.right
|
||||
anchors.leftMargin: 20
|
||||
anchors {
|
||||
right: parent.right
|
||||
rightMargin: 20
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
checked: settingsBool.isChecked
|
||||
onCheckedChanged: checkboxChanged(radioButton.checked)
|
||||
}
|
||||
|
||||
@ -4,8 +4,6 @@ import QtQuick.Dialogs 1.2
|
||||
import QtGraphicalEffects 1.0
|
||||
import Qt.labs.platform 1.0
|
||||
|
||||
import "Settings/"
|
||||
|
||||
Item {
|
||||
id: settingsWrapper
|
||||
anchors.fill: parent
|
||||
@ -15,7 +13,8 @@ Item {
|
||||
}
|
||||
|
||||
Item {
|
||||
height: 180
|
||||
id: settingsGeneralWrapper
|
||||
height: 300
|
||||
width: 800
|
||||
anchors {
|
||||
top: parent.top
|
||||
@ -38,66 +37,83 @@ Item {
|
||||
opacity: 0.2
|
||||
cornerRadius: 15
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
radius: 4
|
||||
Item {
|
||||
anchors {
|
||||
fill: parent
|
||||
margins: 20
|
||||
}
|
||||
Text {
|
||||
id: txtheadlineGeneral
|
||||
height: 20
|
||||
text: qsTr("General")
|
||||
font.pointSize: 11
|
||||
color: "#3a3a3a"
|
||||
renderType: Text.NativeRendering
|
||||
font.family: font_Roboto_Regular.name
|
||||
}
|
||||
Row {
|
||||
anchors {
|
||||
top: txtheadlineGeneral.bottom
|
||||
right: parent.right
|
||||
bottom: parent.bottom
|
||||
left: parent.left
|
||||
}
|
||||
clip: true
|
||||
|
||||
spacing: 30
|
||||
Text {
|
||||
id: txtSavePathDescription
|
||||
text: qsTr("Save Path: ")
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
font.pointSize: 11
|
||||
color: "#818181"
|
||||
renderType: Text.NativeRendering
|
||||
font.family: font_Roboto_Regular.name
|
||||
}
|
||||
Text {
|
||||
id: txtSavePath
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: screenPlaySettings.localStoragePath
|
||||
font.pointSize: 11
|
||||
color: "#818181"
|
||||
renderType: Text.NativeRendering
|
||||
font.family: font_Roboto_Regular.name
|
||||
}
|
||||
Button {
|
||||
id: btnSavePath
|
||||
text: qsTr("Set Save Location")
|
||||
onClicked: fileDialogOpenSavePath.open()
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
FolderDialog {
|
||||
id: fileDialogOpenSavePath
|
||||
onAccepted: {
|
||||
txtSavePath.text = fileDialogOpenSavePath.folder
|
||||
screenPlaySettings.setLocalStoragePath(
|
||||
fileDialogOpenSavePath.folder)
|
||||
}
|
||||
}
|
||||
SettingsHeader {
|
||||
id: headerGeneral
|
||||
text: qsTr("General")
|
||||
anchors {
|
||||
top: parent.top
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
anchors {
|
||||
top: headerGeneral.bottom
|
||||
margins: 20
|
||||
right: parent.right
|
||||
bottom: parent.bottom
|
||||
left: parent.left
|
||||
}
|
||||
spacing: 10
|
||||
SettingBool {
|
||||
}
|
||||
SettingsHorizontalSeperator{}
|
||||
SettingBool {
|
||||
}
|
||||
SettingsHorizontalSeperator{}
|
||||
SettingBool {
|
||||
}
|
||||
}
|
||||
|
||||
// Row {
|
||||
// anchors {
|
||||
// top: txtheadlineGeneral.bottom
|
||||
// right: parent.right
|
||||
// bottom: parent.bottom
|
||||
// left: parent.left
|
||||
// }
|
||||
|
||||
// spacing: 30
|
||||
// Text {
|
||||
// id: txtSavePathDescription
|
||||
// text: qsTr("Save Path: ")
|
||||
// anchors.verticalCenter: parent.verticalCenter
|
||||
// font.pointSize: 11
|
||||
// color: "#818181"
|
||||
// renderType: Text.NativeRendering
|
||||
// font.family: font_Roboto_Regular.name
|
||||
// }
|
||||
// Text {
|
||||
// id: txtSavePath
|
||||
// anchors.verticalCenter: parent.verticalCenter
|
||||
// text: screenPlaySettings.localStoragePath
|
||||
// font.pointSize: 11
|
||||
// color: "#818181"
|
||||
// renderType: Text.NativeRendering
|
||||
// font.family: font_Roboto_Regular.name
|
||||
// }
|
||||
// Button {
|
||||
// id: btnSavePath
|
||||
// text: qsTr("Set Save Location")
|
||||
// onClicked: fileDialogOpenSavePath.open()
|
||||
// anchors.verticalCenter: parent.verticalCenter
|
||||
// }
|
||||
// FolderDialog {
|
||||
// id: fileDialogOpenSavePath
|
||||
// onAccepted: {
|
||||
// txtSavePath.text = fileDialogOpenSavePath.folder
|
||||
// screenPlaySettings.setLocalStoragePath(
|
||||
// fileDialogOpenSavePath.folder)
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
130
qml/Components/Settings/SettingsHeader.qml
Normal file
130
qml/Components/Settings/SettingsHeader.qml
Normal file
@ -0,0 +1,130 @@
|
||||
import QtQuick 2.7
|
||||
import QtGraphicalEffects 1.0
|
||||
|
||||
Item {
|
||||
id: settingsHeader
|
||||
state: "out"
|
||||
Component.onCompleted: state = "in"
|
||||
property color background: "#3498db"
|
||||
property string text: "HEADLINE"
|
||||
property url image: "qrc:/assets/icons/icon_settings.svg"
|
||||
height: 50
|
||||
|
||||
width: parent.width
|
||||
|
||||
Rectangle {
|
||||
id:radiusWorkaround
|
||||
height:5
|
||||
radius: 4
|
||||
color: settingsHeader.background
|
||||
anchors{
|
||||
top:parent.top
|
||||
right: parent.right
|
||||
left:parent.left
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
color: settingsHeader.background
|
||||
height:47
|
||||
anchors{
|
||||
top:radiusWorkaround.bottom
|
||||
topMargin: -2
|
||||
right: parent.right
|
||||
left:parent.left
|
||||
}
|
||||
FontLoader {
|
||||
id: font_Roboto_Regular
|
||||
source: "qrc:/assets/fonts/Roboto-Regular.ttf"
|
||||
}
|
||||
|
||||
Item {
|
||||
anchors {
|
||||
fill: parent
|
||||
margins: 10
|
||||
leftMargin: 20
|
||||
}
|
||||
|
||||
|
||||
Image {
|
||||
id: imgIcon
|
||||
source: settingsHeader.image
|
||||
height: 20
|
||||
width: 20
|
||||
sourceSize: Qt.size(20, 20)
|
||||
anchors{
|
||||
top:parent.top
|
||||
topMargin: 3
|
||||
left:parent.left
|
||||
leftMargin: 0
|
||||
}
|
||||
}
|
||||
ColorOverlay {
|
||||
id:iconColorOverlay
|
||||
anchors.fill: imgIcon
|
||||
source: imgIcon
|
||||
color: "#ffffff"
|
||||
|
||||
}
|
||||
Text {
|
||||
id: txtHeadline
|
||||
text: settingsHeader.text
|
||||
font.pixelSize: 18
|
||||
color: "white"
|
||||
renderType: Text.NativeRendering
|
||||
font.family: font_Roboto_Regular.name
|
||||
anchors{
|
||||
top:parent.top
|
||||
topMargin: 3
|
||||
left:parent.left
|
||||
leftMargin: 30
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
states: [
|
||||
State {
|
||||
name: "out"
|
||||
|
||||
PropertyChanges {
|
||||
target: imgIcon
|
||||
anchors.leftMargin: -50
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
PropertyChanges {
|
||||
target: txtHeadline
|
||||
anchors.topMargin: 50
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "in"
|
||||
PropertyChanges {
|
||||
target: imgIcon
|
||||
anchors.leftMargin: 3
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
PropertyChanges {
|
||||
target: txtHeadline
|
||||
anchors.topMargin: 3
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
transitions: [
|
||||
Transition {
|
||||
from: "in"
|
||||
to: "out"
|
||||
reversible: true
|
||||
|
||||
NumberAnimation {
|
||||
targets: [imgIcon,txtHeadline]
|
||||
properties: "opacity, anchors.topMargin, anchors.leftMargin"
|
||||
duration: 300
|
||||
easing.type: Easing.InOutQuad
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
24
qml/Components/Settings/SettingsHorizontalSeperator.qml
Normal file
24
qml/Components/Settings/SettingsHorizontalSeperator.qml
Normal file
@ -0,0 +1,24 @@
|
||||
import QtQuick 2.7
|
||||
|
||||
Item {
|
||||
property real customWidth: parent.width
|
||||
property real customHeight: 1
|
||||
property color customColor: "#C3C3C3"
|
||||
property real customMargin: 10
|
||||
|
||||
height: customMargin
|
||||
width:customWidth
|
||||
|
||||
Rectangle {
|
||||
height: customHeight
|
||||
width: customWidth
|
||||
color: customColor
|
||||
anchors {
|
||||
right: parent.right
|
||||
rightMargin: customMargin
|
||||
left: parent.left
|
||||
leftMargin:customMargin
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
import QtQuick 2.0
|
||||
|
||||
Rectangle {
|
||||
|
||||
width: parent.width * .8
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
border.color: "#C2C2C2"
|
||||
border.width: 2
|
||||
radius: 4
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user