amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2025-07-03 00:25:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
zhuzihcu
2023-03-23 17:40:10 +08:00
parent d3d6e64af1
commit f4e5316987
17 changed files with 585 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

234
src/colorpicker/ColorPicker.qml Normal file
View File

@ -0,0 +1,234 @@
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15
import "content"
Rectangle {
id: colorPicker
property color colorValue: "transparent"
property bool enableAlphaChannel: true
property bool enableDetails: true
property int colorHandleRadius : 8
property color _changingColorValue : _hsla(hueSlider.value, sbPicker.saturation,sbPicker.brightness, alphaSlider.value)
on_ChangingColorValueChanged: {
colorValue = _changingColorValue
}
signal colorChanged(color changedColor)
implicitWidth: picker.implicitWidth
implicitHeight: picker.implicitHeight
color: "#00000000"
clip: true
RowLayout {
id: picker
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.rightMargin: colorHandleRadius
anchors.bottom: parent.bottom
spacing: 0
SBPicker {
id: sbPicker
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumWidth: 200
Layout.minimumHeight: 200
hueColor: {
var v = 1.0-hueSlider.value
if(0.0 <= v && v < 0.16) {
return Qt.rgba(1.0, 0.0, v/0.16, 1.0)
} else if(0.16 <= v && v < 0.33) {
return Qt.rgba(1.0 - (v-0.16)/0.17, 0.0, 1.0, 1.0)
} else if(0.33 <= v && v < 0.5) {
return Qt.rgba(0.0, ((v-0.33)/0.17), 1.0, 1.0)
} else if(0.5 <= v && v < 0.76) {
return Qt.rgba(0.0, 1.0, 1.0 - (v-0.5)/0.26, 1.0)
} else if(0.76 <= v && v < 0.85) {
return Qt.rgba((v-0.76)/0.09, 1.0, 0.0, 1.0)
} else if(0.85 <= v && v <= 1.0) {
return Qt.rgba(1.0, 1.0 - (v-0.85)/0.15, 0.0, 1.0)
} else {
return "red"
}
}
}
Item {
id: huePicker
width: 12
Layout.fillHeight: true
Layout.topMargin: colorHandleRadius
Layout.bottomMargin: colorHandleRadius
Rectangle {
anchors.fill: parent
id: colorBar
gradient: Gradient {
GradientStop { position: 1.0; color: "#FF0000" }
GradientStop { position: 0.85; color: "#FFFF00" }
GradientStop { position: 0.76; color: "#00FF00" }
GradientStop { position: 0.5; color: "#00FFFF" }
GradientStop { position: 0.33; color: "#0000FF" }
GradientStop { position: 0.16; color: "#FF00FF" }
GradientStop { position: 0.0; color: "#FF0000" }
}
}
ColorSlider {
id: hueSlider; anchors.fill: parent
}
}
Item {
id: alphaPicker
visible: enableAlphaChannel
width: 12
Layout.leftMargin: 4
Layout.fillHeight: true
Layout.topMargin: colorHandleRadius
Layout.bottomMargin: colorHandleRadius
Checkerboard { cellSide: 4 }
Rectangle {
anchors.fill: parent
gradient: Gradient {
GradientStop { position: 0.0; color: "#FF000000" }
GradientStop { position: 1.0; color: "#00000000" }
}
}
ColorSlider {
id: alphaSlider; anchors.fill: parent
}
}
Column {
id: detailColumn
Layout.leftMargin: 4
Layout.fillHeight: true
Layout.topMargin: colorHandleRadius
Layout.bottomMargin: colorHandleRadius
Layout.alignment: Qt.AlignRight
visible: enableDetails
PanelBorder {
width: parent.width
height: 30
visible: enableAlphaChannel
Checkerboard { cellSide: 5 }
Rectangle {
width: parent.width; height: 30
border.width: 1; border.color: "black"
color: colorPicker.colorValue
}
}
Item {
width: parent.width
height: 1
}
PanelBorder {
id: colorEditBox
height: 15; width: parent.width
TextInput {
anchors.fill: parent
color: "#AAAAAA"
selectionColor: "#FF7777AA"
font.pixelSize: 11
maximumLength: 9
focus: false
text: _fullColorString(colorPicker.colorValue, alphaSlider.value)
selectByMouse: true
}
}
Item {
width: parent.width
height: 8
}
Column {
width: parent.width
spacing: 1
NumberBox { caption: "H:"; value: hueSlider.value.toFixed(2) }
NumberBox { caption: "S:"; value: sbPicker.saturation.toFixed(2) }
NumberBox { caption: "B:"; value: sbPicker.brightness.toFixed(2) }
}
Item {
width: parent.width
height: 8
}
Column {
width: parent.width
spacing: 1
NumberBox {
caption: "R:"
value: _getChannelStr(colorPicker.colorValue, 0)
min: 0; max: 255
}
NumberBox {
caption: "G:"
value: _getChannelStr(colorPicker.colorValue, 1)
min: 0; max: 255
}
NumberBox {
caption: "B:"
value: _getChannelStr(colorPicker.colorValue, 2)
min: 0; max: 255
}
}
Item{
width: parent.width
height: 1
}
NumberBox {
visible: enableAlphaChannel
caption: "A:"; value: Math.ceil(alphaSlider.value*255)
min: 0; max: 255
}
}
}
function _hsla(h, s, b, a) {
var lightness = (2 - s)*b
var satHSL = s*b/((lightness <= 1) ? lightness : 2 - lightness)
lightness /= 2
var c = Qt.hsla(h, satHSL, lightness, a)
colorChanged(c)
return c
}
function _rgb(rgb, a) {
var c = Qt.rgba(rgb.r, rgb.g, rgb.b, a)
colorChanged(c)
return c
}
function _fullColorString(clr, a) {
return "#" + ((Math.ceil(a*255) + 256).toString(16).substr(1, 2) + clr.toString().substr(1, 6)).toUpperCase()
}
function _getChannelStr(clr, channelIdx) {
return parseInt(clr.toString().substr(channelIdx*2 + 1, 2), 16)
}
function setColor(color) {
var c = Qt.tint(color, "transparent")
alphaSlider.setValue(c.a)
colorPicker.colorValue = c
}
}

16
src/colorpicker/content/Checkerboard.qml Normal file
View File

@ -0,0 +1,16 @@
import QtQuick 2.15
Grid {
id: root
property int cellSide: 5
anchors.fill: parent
rows: height/cellSide; columns: width/cellSide
clip: true
Repeater {
model: root.columns*root.rows
Rectangle {
width: root.cellSide; height: root.cellSide
color: (index%2 == 0) ? "gray" : "white"
}
}
}

43
src/colorpicker/content/ColorSlider.qml Normal file
View File

@ -0,0 +1,43 @@
import QtQuick 2.15
Item {
property int cursorHeight: 7
property real value: (1 - pickerCursor.y/height)
width: 15
height: 300
Item {
id: pickerCursor
width: parent.width
Rectangle {
x: -3; y: -height*0.5
width: parent.width + 4; height: cursorHeight
border.color: "black"; border.width: 1
color: "transparent"
Rectangle {
anchors.fill: parent; anchors.margins: 2
border.color: "white"; border.width: 1
color: "transparent"
}
}
}
MouseArea {
y: -Math.round(cursorHeight/2)
height: parent.height+cursorHeight
anchors.left: parent.left
anchors.right: parent.right
function handleMouse(mouse) {
if (mouse.buttons & Qt.LeftButton) {
pickerCursor.y = Math.max(0, Math.min(height, mouse.y)-cursorHeight)
}
}
onPositionChanged: {
handleMouse(mouse)
}
onPressed: handleMouse(mouse)
}
function setValue(val) {
pickerCursor.y = height * (1 - val)
}
}

39
src/colorpicker/content/NumberBox.qml Normal file
View File

@ -0,0 +1,39 @@
import QtQuick 2.15
Row {
property alias caption: captionBox.text
property alias value: inputBox.text
property alias min: numValidator.bottom
property alias max: numValidator.top
property alias decimals: numValidator.decimals
width: 80;
height: 15
spacing: 4
//anchors.margins: 2
Text {
id: captionBox
width: 18; height: parent.height
color: "#AAAAAA"
font.pixelSize: 11; font.bold: true
}
PanelBorder {
height: parent.height
TextInput {
id: inputBox
color: "#AAAAAA"; selectionColor: "#FF7777AA"
font.pixelSize: 11
maximumLength: 10
focus: false
readOnly: true
selectByMouse: true
validator: DoubleValidator {
id: numValidator
bottom: 0; top: 1; decimals: 2
notation: DoubleValidator.StandardNotation
}
}
}
}

18
src/colorpicker/content/PanelBorder.qml Normal file
View File

@ -0,0 +1,18 @@
import QtQuick 2.15
Rectangle {
width : 40; height : 15; radius: 2
border.width: 1; border.color: "#FF101010"
color: "transparent"
anchors.leftMargin: 1; anchors.topMargin: 3
clip: true
Rectangle {
anchors.fill: parent; radius: 2
anchors.leftMargin: -1; anchors.topMargin: -1
anchors.rightMargin: 0; anchors.bottomMargin: 0
border.width: 1; border.color: "#FF525255"
color: "transparent"
}
}

69
src/colorpicker/content/SBPicker.qml Normal file
View File

@ -0,0 +1,69 @@
import QtQuick 2.15
Item {
id: root
property color hueColor : "blue"
property real saturation : pickerCursor.x/(width-2*r)
property real brightness : 1 - pickerCursor.y/(height-2*r)
property int r : colorHandleRadius
Rectangle {
x : r
y : r + parent.height - 2 * r
rotation: -90
transformOrigin: Item.TopLeft
width: parent.height - 2 * r
height: parent.width - 2 * r
gradient: Gradient {
GradientStop { position: 0.0; color: "#FFFFFF" }
GradientStop { position: 1.0; color: root.hueColor }
}
}
Rectangle {
x: r
y: r
width: parent.width - 2 * r
height: parent.height - 2 * r
gradient: Gradient {
GradientStop { position: 1.0; color: "#FF000000" }
GradientStop { position: 0.0; color: "#00000000" }
}
}
Item {
id: pickerCursor
Rectangle {
width: r*2; height: r*2
radius: r
border.color: "black"; border.width: 2
color: "transparent"
Rectangle {
anchors.fill: parent; anchors.margins: 2;
border.color: "white"; border.width: 2
radius: width/2
color: "transparent"
}
}
}
MouseArea {
anchors.fill: parent
x: r
y: r
function handleMouse(mouse) {
if (mouse.buttons & Qt.LeftButton) {
pickerCursor.x = Math.max(0,Math.min(mouse.x - r,width-2*r));
pickerCursor.y = Math.max(0,Math.min(mouse.y - r,height-2*r));
// pickerCursor.x = Math.max(-r,Math.min(mouse.x - r,width+r));
// pickerCursor.y = Math.max(-r,Math.min(mouse.y - r,height+r));
// pickerCursor.x = Math.max(0, Math.min(width, mouse.x) - 2 * r);
// pickerCursor.y = Math.max(0, Math.min(height, mouse.y) - 2 * r);
}
}
onPositionChanged: handleMouse(mouse)
onPressed: handleMouse(mouse)
}
}