FluentUI/Gallery/res/qml/component/window/FontEditWindow.qml
yxdy ff15075c79
Some checks are pending
Gallery App Build / macOS (push) Waiting to run
Gallery App Build / Windows (push) Waiting to run
Gallery App Build / Ubuntu (push) Waiting to run
修改样式
2025-03-07 16:23:09 +08:00

401 lines
16 KiB
QML

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import FluentUI.Controls
import FluentUI.impl
import Qt5Compat.GraphicalEffects
import "../base"
MyDialogWindow {
id: dia_win
title: "字体样式编辑"
Rectangle {
implicitWidth: 670
implicitHeight: 360
color: "transparent"
ColumnLayout{
anchors.fill: parent
anchors.leftMargin: 10
anchors.topMargin: 10
anchors.rightMargin: 10
spacing: 30
// prev
Rectangle{
Layout.fillWidth: true
Layout.preferredHeight: 98
color: "#000000"
radius: 6
Rectangle{
anchors.top: parent.top
anchors.left: parent.left
anchors.topMargin: 5
anchors.leftMargin: 5
radius: 3
width: 15
height: 15
gradient: Gradient {
orientation: Gradient.Horizontal
GradientStop { position: 0.0; color: "#77ED8B" }
GradientStop { position: 1.0; color: "#22C55E" }
}
Rectangle{
width: 11
height: 11
color: "#000"
border.color: Qt.rgba(1, 1, 1, 0.3)
border.width: 1
radius: 4
anchors.centerIn: parent
}
}
Rectangle{
anchors.top: parent.top
anchors.left: parent.left
anchors.topMargin: 5
anchors.leftMargin: 25
radius: 3
width: 15
height: 15
gradient: Gradient {
orientation: Gradient.Horizontal
GradientStop { position: 0.0; color: Qt.rgba(1, 1, 1, 0.1) }
GradientStop { position: 1.0; color: Qt.rgba(1, 1, 1, 0.1) }
}
Rectangle{
width: 11
height: 11
color: "#fff"
border.color: Qt.rgba(1, 1, 1, 0.3)
border.width: 1
radius: 4
anchors.centerIn: parent
}
MouseArea{
anchors.fill: parent
hoverEnabled: true
onEntered: {
parent.gradient.stops[0].color = "#77ED8B"
parent.gradient.stops[1].color = "#22C55E"
}
onExited: {
parent.gradient.stops[0].color = Qt.rgba(1, 1, 1, 0.1)
parent.gradient.stops[1].color = Qt.rgba(1, 1, 1, 0.1)
}
}
}
Rectangle{
anchors.top: parent.top
anchors.left: parent.left
anchors.topMargin: 5
anchors.leftMargin: 45
radius: 3
width: 15
height: 15
gradient: Gradient {
orientation: Gradient.Horizontal
GradientStop { position: 0.0; color: Qt.rgba(1, 1, 1, 0.1) }
GradientStop { position: 1.0; color: Qt.rgba(1, 1, 1, 0.1) }
}
Rectangle{
width: 11
height: 11
color: "#7F7F7F"
border.color: Qt.rgba(1, 1, 1, 0.3)
border.width: 1
radius: 4
anchors.centerIn: parent
}
MouseArea{
anchors.fill: parent
hoverEnabled: true
onEntered: {
parent.gradient.stops[0].color = "#77ED8B"
parent.gradient.stops[1].color = "#22C55E"
}
onExited: {
parent.gradient.stops[0].color = Qt.rgba(1, 1, 1, 0.1)
parent.gradient.stops[1].color = Qt.rgba(1, 1, 1, 0.1)
}
}
}
Rectangle{
anchors.top: parent.top
anchors.left: parent.left
anchors.topMargin: 5
anchors.leftMargin: 65
radius: 3
width: 15
height: 15
gradient: Gradient {
orientation: Gradient.Horizontal
GradientStop { position: 0.0; color: Qt.rgba(1, 1, 1, 0.1) }
GradientStop { position: 1.0; color: Qt.rgba(1, 1, 1, 0.1) }
}
Rectangle{
width: 11
height: 11
color: "#000"
border.color: Qt.rgba(1, 1, 1, 0.3)
border.width: 1
radius: 4
anchors.centerIn: parent
Rectangle{
x: 5
y: 2
width: 1
height: 6
color: Qt.rgba(1, 1, 1, 0.3)
transform: Rotation { origin.x: 0; origin.y: 3;angle: 45;}
}
}
MouseArea{
anchors.fill: parent
hoverEnabled: true
onEntered: {
parent.gradient.stops[0].color = "#77ED8B"
parent.gradient.stops[1].color = "#22C55E"
}
onExited: {
parent.gradient.stops[0].color = Qt.rgba(1, 1, 1, 0.1)
parent.gradient.stops[1].color = Qt.rgba(1, 1, 1, 0.1)
}
}
}
Rectangle{
anchors.centerIn: parent
width: lbl_prev.width + 10
height: lbl_prev.height + 10
color: "#ccc"
Label {
id: lbl_prev
text: "预览文字内容"
anchors.centerIn: parent
}
}
}
// form
RowLayout{
Layout.fillWidth: true
Layout.preferredHeight: 35
Row{
spacing: 5
Layout.fillWidth: true
Layout.preferredHeight: parent.height
Label{
text: "字体:"
color: Qt.rgba(255/255,255/255,255/255, 0.6)
anchors.verticalCenter: parent.verticalCenter
}
ComboBox{
spacing: 0
model: ["微软雅黑", "宋体", "楷体"]
width: 120
height: 30
anchors.verticalCenter: parent.verticalCenter
}
ComboBox{
spacing: 0
model: ["正常", "粗体", "斜体"]
width: 120
height: 30
anchors.verticalCenter: parent.verticalCenter
}
}
Row{
spacing: 5
Layout.fillWidth: true
Layout.preferredHeight: parent.height
Label{
text: "字号:"
color: Qt.rgba(255/255,255/255,255/255, 0.6)
anchors.verticalCenter: parent.verticalCenter
}
ComboBox{
spacing: 0
model: [9,10,11,12,13,14,15,16,17,18]
width: 115
height: 30
anchors.verticalCenter: parent.verticalCenter
}
}
Row{
spacing: 5
Layout.fillWidth: true
Layout.preferredHeight: parent.height
Label{
text: "间距:"
color: Qt.rgba(255/255,255/255,255/255, 0.6)
anchors.verticalCenter: parent.verticalCenter
}
ComboBox{
spacing: 0
model: ['10%', '20%', '50%']
width: 115
height: 30
anchors.verticalCenter: parent.verticalCenter
}
}
}
RowLayout{
Layout.fillWidth: true
Layout.preferredHeight: 35
Row{
spacing: 5
Layout.preferredWidth: 150
Layout.preferredHeight: parent.height
Label{
text: "颜色:"
color: Qt.rgba(255/255,255/255,255/255, 0.6)
anchors.verticalCenter: parent.verticalCenter
}
ColorPicker{
implicitHeight: 30
leftPadding: 3
topPadding: 3
rightPadding: 2
bottomPadding: 2
anchors.verticalCenter: parent.verticalCenter
}
}
Row{
spacing: 1
Layout.fillWidth: true
Layout.preferredHeight: parent.height
Switch {
width: 45
text: ""
checked: true
FluentUI.primaryColor: "#77ED8B"
anchors.verticalCenter: parent.verticalCenter
}
Label{
text: "描边:"
color: Qt.rgba(255/255,255/255,255/255, 0.6)
anchors.verticalCenter: parent.verticalCenter
}
ColorPicker{
implicitHeight: 30
leftPadding: 3
topPadding: 3
rightPadding: 2
bottomPadding: 2
anchors.verticalCenter: parent.verticalCenter
}
Item{
width: 5
height: 10
}
ComboBox{
spacing: 0
model: ['外部','内部','中部']
width: 80
height: 30
anchors.verticalCenter: parent.verticalCenter
}
Item{
width: 5
height: 10
}
TextBox{
width: 60
anchors.verticalCenter: parent.verticalCenter
height: 30
placeholderText: "1"
background: InputBackground {
activeColor: "#22C55E"
radius: 5
color: {
if(!parent.enabled){
return parent.FluentUI.theme.res.controlFillColorDisabled
}else if(parent.activeFocus){
return parent.FluentUI.theme.res.controlFillColorInputActive
}else if(parent.hovered){
return parent.FluentUI.theme.res.controlFillColorSecondary
}else{
return parent.FluentUI.theme.res.controlFillColorDefault
}
}
target: parent
}
}
}
Row{
spacing: 1
Layout.preferredWidth: 175
Layout.preferredHeight: parent.height
Switch {
width: 45
text: ""
checked: true
FluentUI.primaryColor: "#77ED8B"
anchors.verticalCenter: parent.verticalCenter
}
Label{
text: "背景色:"
color: Qt.rgba(255/255,255/255,255/255, 0.6)
anchors.verticalCenter: parent.verticalCenter
}
ColorPicker{
implicitHeight: 30
leftPadding: 3
topPadding: 3
rightPadding: 2
bottomPadding: 2
anchors.verticalCenter: parent.verticalCenter
}
}
}
Item{
Layout.fillHeight: true
}
Rectangle{
Layout.fillWidth: true
Layout.preferredHeight: 70
color: "#1b1b1b"
Layout.topMargin: 0
Layout.leftMargin: -20
Layout.rightMargin: -20
Layout.bottomMargin: 4
RowLayout{
anchors.fill: parent
anchors.leftMargin: 20
anchors.rightMargin: 20
spacing: 20
Button{
Layout.fillWidth: true
Layout.preferredHeight: 36
text: "取消"
onClicked: {
dia_win.close()
}
}
Button{
Layout.fillWidth: true
Layout.preferredHeight: 36
text: "确认"
highlighted: true
background: Rectangle{
radius: 5
gradient: Gradient {
orientation: Gradient.Horizontal
GradientStop { position: 0.0; color: "#77ED8B" }
GradientStop { position: 1.0; color: "#22C55E" }
}
}
}
}
}
}
}
}