ColorScheme preview cleanup (UI only)
This commit is contained in:
parent
cd3d266fdb
commit
2a5a3a1b78
1 changed files with 39 additions and 30 deletions
|
|
@ -172,8 +172,14 @@ ColumnLayout {
|
||||||
|
|
||||||
NDivider {
|
NDivider {
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
|
Layout.topMargin: Style.marginLarge * scaling
|
||||||
|
Layout.bottomMargin: Style.marginLarge * scaling
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ColumnLayout {
|
||||||
|
spacing: Style.marginTiniest * scaling
|
||||||
|
Layout.fillWidth: true
|
||||||
|
|
||||||
NText {
|
NText {
|
||||||
text: "Predefined Color Schemes"
|
text: "Predefined Color Schemes"
|
||||||
font.pointSize: Style.fontSizeLarge * scaling
|
font.pointSize: Style.fontSizeLarge * scaling
|
||||||
|
|
@ -188,12 +194,13 @@ ColumnLayout {
|
||||||
color: Colors.mOnSurface
|
color: Colors.mOnSurface
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
wrapMode: Text.WordWrap
|
wrapMode: Text.WordWrap
|
||||||
Layout.topMargin: -16 * scaling
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ColumnLayout {
|
ColumnLayout {
|
||||||
spacing: Style.marginTiny * scaling
|
spacing: Style.marginTiny * scaling
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
|
Layout.topMargin: Style.marginLarge * scaling
|
||||||
|
|
||||||
// Color Schemes Grid
|
// Color Schemes Grid
|
||||||
GridLayout {
|
GridLayout {
|
||||||
|
|
@ -205,14 +212,18 @@ ColumnLayout {
|
||||||
Repeater {
|
Repeater {
|
||||||
model: ColorSchemes.schemes
|
model: ColorSchemes.schemes
|
||||||
|
|
||||||
|
property real cardScaleLow: 0.95
|
||||||
|
property real cardScaleHigh: 1.00
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: schemeCard
|
id: schemeCard
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
Layout.preferredHeight: 120 * scaling
|
Layout.preferredHeight: 120 * scaling
|
||||||
radius: 12 * scaling
|
radius: Style.radiusMedium * scaling
|
||||||
color: getSchemeColor(modelData, "mSurface")
|
color: getSchemeColor(modelData, "mSurface")
|
||||||
border.width: 2
|
border.width: Math.max(1, Style.borderThick * scaling)
|
||||||
border.color: Settings.data.colorSchemes.predefinedScheme === modelData ? Colors.mPrimary : Colors.mOutline
|
border.color: Settings.data.colorSchemes.predefinedScheme === modelData ? Colors.mPrimary : Colors.mOutline
|
||||||
|
scale: cardScaleLow
|
||||||
|
|
||||||
property string schemePath: modelData
|
property string schemePath: modelData
|
||||||
|
|
||||||
|
|
@ -229,21 +240,19 @@ ColumnLayout {
|
||||||
cursorShape: Qt.PointingHandCursor
|
cursorShape: Qt.PointingHandCursor
|
||||||
|
|
||||||
onEntered: {
|
onEntered: {
|
||||||
schemeCard.scale = 1.05
|
schemeCard.scale = cardScaleHight
|
||||||
schemeCard.border.width = 3
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onExited: {
|
onExited: {
|
||||||
schemeCard.scale = 1.0
|
schemeCard.scale = cardScaleLow
|
||||||
schemeCard.border.width = 2
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Card content
|
// Card content
|
||||||
ColumnLayout {
|
ColumnLayout {
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
anchors.margins: 16 * scaling
|
anchors.margins: Style.marginXL * scaling
|
||||||
spacing: 8 * scaling
|
spacing: Style.marginSmall * scaling
|
||||||
|
|
||||||
// Scheme name
|
// Scheme name
|
||||||
NText {
|
NText {
|
||||||
|
|
@ -262,7 +271,7 @@ ColumnLayout {
|
||||||
|
|
||||||
// Color swatches
|
// Color swatches
|
||||||
RowLayout {
|
RowLayout {
|
||||||
spacing: 8 * scaling
|
spacing: Style.marginSmall * scaling
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
Layout.alignment: Qt.AlignHCenter
|
Layout.alignment: Qt.AlignHCenter
|
||||||
|
|
||||||
|
|
@ -270,7 +279,7 @@ ColumnLayout {
|
||||||
Rectangle {
|
Rectangle {
|
||||||
width: 28 * scaling
|
width: 28 * scaling
|
||||||
height: 28 * scaling
|
height: 28 * scaling
|
||||||
radius: 14 * scaling
|
radius: width * 0.5
|
||||||
color: getSchemeColor(modelData, "mPrimary")
|
color: getSchemeColor(modelData, "mPrimary")
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -286,7 +295,7 @@ ColumnLayout {
|
||||||
Rectangle {
|
Rectangle {
|
||||||
width: 28 * scaling
|
width: 28 * scaling
|
||||||
height: 28 * scaling
|
height: 28 * scaling
|
||||||
radius: 14 * scaling
|
radius: width * 0.5
|
||||||
color: getSchemeColor(modelData, "mTertiary")
|
color: getSchemeColor(modelData, "mTertiary")
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -294,7 +303,7 @@ ColumnLayout {
|
||||||
Rectangle {
|
Rectangle {
|
||||||
width: 28 * scaling
|
width: 28 * scaling
|
||||||
height: 28 * scaling
|
height: 28 * scaling
|
||||||
radius: 14 * scaling
|
radius: width * 0.5
|
||||||
color: getSchemeColor(modelData, "mError")
|
color: getSchemeColor(modelData, "mError")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -305,10 +314,10 @@ ColumnLayout {
|
||||||
visible: Settings.data.colorSchemes.predefinedScheme === schemePath
|
visible: Settings.data.colorSchemes.predefinedScheme === schemePath
|
||||||
anchors.right: parent.right
|
anchors.right: parent.right
|
||||||
anchors.top: parent.top
|
anchors.top: parent.top
|
||||||
anchors.margins: 8 * scaling
|
anchors.margins: Style.marginSmall * scaling
|
||||||
width: 24 * scaling
|
width: 24 * scaling
|
||||||
height: 24 * scaling
|
height: 24 * scaling
|
||||||
radius: 12 * scaling
|
radius: width * 0.5
|
||||||
color: Colors.mPrimary
|
color: Colors.mPrimary
|
||||||
|
|
||||||
NText {
|
NText {
|
||||||
|
|
@ -323,20 +332,20 @@ ColumnLayout {
|
||||||
// Smooth animations
|
// Smooth animations
|
||||||
Behavior on scale {
|
Behavior on scale {
|
||||||
NumberAnimation {
|
NumberAnimation {
|
||||||
duration: 200
|
duration: Style.animationNormal
|
||||||
easing.type: Easing.OutCubic
|
easing.type: Easing.OutCubic
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Behavior on border.color {
|
Behavior on border.color {
|
||||||
ColorAnimation {
|
ColorAnimation {
|
||||||
duration: 300
|
duration: Style.animationNormal
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Behavior on border.width {
|
Behavior on border.width {
|
||||||
NumberAnimation {
|
NumberAnimation {
|
||||||
duration: 200
|
duration: Style.animationFast
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue