mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2024-11-23 03:10:10 +08:00
update
This commit is contained in:
朱子楚\zhuzi
parent
1baa1ca754
commit
2ae2e2509a
@ -55,7 +55,7 @@ FluContentPage{
|
||||
}
|
||||
PhongMaterial {
|
||||
id: material
|
||||
ambient: color_picker.colorValue
|
||||
ambient: color_picker.current
|
||||
}
|
||||
Transform{
|
||||
id:transform
|
||||
@ -92,10 +92,7 @@ FluContentPage{
|
||||
}
|
||||
FluColorPicker{
|
||||
id:color_picker
|
||||
enableAlphaChannel:false
|
||||
Component.onCompleted: {
|
||||
setColor("gray")
|
||||
}
|
||||
current: "gray"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -64,7 +64,7 @@ FluScrollablePage{
|
||||
width: 200
|
||||
height: 200
|
||||
tintOpacity: slider_tint_opacity.value/100
|
||||
tintColor: color_picker.colorValue
|
||||
tintColor: color_picker.current
|
||||
blurRadius: slider_blur_radius.value
|
||||
x:(image.width-width)/2
|
||||
y:(image.height-height)/2
|
||||
|
||||
@ -9,38 +9,6 @@ FluScrollablePage{
|
||||
|
||||
title:"ColorPicker"
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 280
|
||||
Layout.topMargin: 20
|
||||
paddings: 10
|
||||
ColumnLayout{
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left:parent.left
|
||||
}
|
||||
FluText{
|
||||
text:"此颜色组件是Github上的开源项目"
|
||||
}
|
||||
FluTextButton{
|
||||
text:"https://github.com/rshest/qml-colorpicker"
|
||||
onClicked: {
|
||||
Qt.openUrlExternally(text)
|
||||
}
|
||||
}
|
||||
FluColorView{
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluColorView{
|
||||
|
||||
}'
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
|
||||
@ -182,8 +182,8 @@ FluScrollablePage{
|
||||
showSuccess("点击取消按钮")
|
||||
}
|
||||
positiveText:"确定"
|
||||
onPositiveClicked:{
|
||||
showSuccess("点击确定按钮")
|
||||
onPositiveClickListener:function(){
|
||||
showError("测试InfoBar层级在Popup之上")
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -14,8 +14,8 @@ FluScrollablePage{
|
||||
Layout.topMargin: 20
|
||||
size:slider_size.value
|
||||
text:text_box.text
|
||||
color:color_picker.colorValue
|
||||
bgColor: bgcolor_picker.colorValue
|
||||
color:color_picker.current
|
||||
bgColor: bgcolor_picker.current
|
||||
margins:slider_margins.value
|
||||
Layout.preferredWidth: size
|
||||
Layout.preferredHeight: size
|
||||
@ -44,9 +44,7 @@ FluScrollablePage{
|
||||
}
|
||||
FluColorPicker{
|
||||
id:color_picker
|
||||
Component.onCompleted: {
|
||||
setColor(Qt.rgba(0,0,0,1))
|
||||
}
|
||||
current: Qt.rgba(0,0,0,1)
|
||||
}
|
||||
}
|
||||
|
||||
@ -59,9 +57,7 @@ FluScrollablePage{
|
||||
}
|
||||
FluColorPicker{
|
||||
id:bgcolor_picker
|
||||
Component.onCompleted: {
|
||||
setColor(Qt.rgba(1,1,1,1))
|
||||
}
|
||||
current: Qt.rgba(1,1,1,1)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -111,9 +111,7 @@ FluContentPage{
|
||||
}
|
||||
FluColorPicker{
|
||||
id:color_picker
|
||||
Component.onCompleted: {
|
||||
setColor(Qt.rgba(0,0,0,0.1))
|
||||
}
|
||||
current: Qt.rgba(0,0,0,0.1)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -122,7 +120,7 @@ FluContentPage{
|
||||
id:water_mark
|
||||
anchors.fill: parent
|
||||
text:text_box.text
|
||||
textColor: color_picker.colorValue
|
||||
textColor: color_picker.current
|
||||
textSize: slider_text_size.value
|
||||
rotate: slider_rotate.value
|
||||
gap:Qt.point(slider_gap_x.value,slider_gap_y.value)
|
||||
|
||||
@ -11,7 +11,7 @@ FluWindow {
|
||||
width: 400
|
||||
height: 400
|
||||
fixSize: true
|
||||
|
||||
modality: Qt.ApplicationModal
|
||||
onInitArgument:
|
||||
(argument)=>{
|
||||
textbox_uesrname.updateText(argument.username)
|
||||
|
||||
@ -55,7 +55,7 @@ FluContentPage{
|
||||
}
|
||||
PhongMaterial {
|
||||
id: material
|
||||
ambient: color_picker.colorValue
|
||||
ambient: color_picker.current
|
||||
}
|
||||
Transform{
|
||||
id:transform
|
||||
@ -92,10 +92,7 @@ FluContentPage{
|
||||
}
|
||||
FluColorPicker{
|
||||
id:color_picker
|
||||
enableAlphaChannel:false
|
||||
Component.onCompleted: {
|
||||
setColor("gray")
|
||||
}
|
||||
current: "gray"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -64,7 +64,7 @@ FluScrollablePage{
|
||||
width: 200
|
||||
height: 200
|
||||
tintOpacity: slider_tint_opacity.value/100
|
||||
tintColor: color_picker.colorValue
|
||||
tintColor: color_picker.current
|
||||
blurRadius: slider_blur_radius.value
|
||||
x:(image.width-width)/2
|
||||
y:(image.height-height)/2
|
||||
|
||||
@ -9,38 +9,6 @@ FluScrollablePage{
|
||||
|
||||
title:"ColorPicker"
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 280
|
||||
Layout.topMargin: 20
|
||||
paddings: 10
|
||||
ColumnLayout{
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left:parent.left
|
||||
}
|
||||
FluText{
|
||||
text:"此颜色组件是Github上的开源项目"
|
||||
}
|
||||
FluTextButton{
|
||||
text:"https://github.com/rshest/qml-colorpicker"
|
||||
onClicked: {
|
||||
Qt.openUrlExternally(text)
|
||||
}
|
||||
}
|
||||
FluColorView{
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluColorView{
|
||||
|
||||
}'
|
||||
}
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
|
||||
@ -182,8 +182,8 @@ FluScrollablePage{
|
||||
showSuccess("点击取消按钮")
|
||||
}
|
||||
positiveText:"确定"
|
||||
onPositiveClicked:{
|
||||
showSuccess("点击确定按钮")
|
||||
onPositiveClickListener:function(){
|
||||
showError("测试InfoBar层级在Popup之上")
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -14,8 +14,8 @@ FluScrollablePage{
|
||||
Layout.topMargin: 20
|
||||
size:slider_size.value
|
||||
text:text_box.text
|
||||
color:color_picker.colorValue
|
||||
bgColor: bgcolor_picker.colorValue
|
||||
color:color_picker.current
|
||||
bgColor: bgcolor_picker.current
|
||||
margins:slider_margins.value
|
||||
Layout.preferredWidth: size
|
||||
Layout.preferredHeight: size
|
||||
@ -44,9 +44,7 @@ FluScrollablePage{
|
||||
}
|
||||
FluColorPicker{
|
||||
id:color_picker
|
||||
Component.onCompleted: {
|
||||
setColor(Qt.rgba(0,0,0,1))
|
||||
}
|
||||
current: Qt.rgba(0,0,0,1)
|
||||
}
|
||||
}
|
||||
|
||||
@ -59,9 +57,7 @@ FluScrollablePage{
|
||||
}
|
||||
FluColorPicker{
|
||||
id:bgcolor_picker
|
||||
Component.onCompleted: {
|
||||
setColor(Qt.rgba(1,1,1,1))
|
||||
}
|
||||
current: Qt.rgba(1,1,1,1)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -111,9 +111,7 @@ FluContentPage{
|
||||
}
|
||||
FluColorPicker{
|
||||
id:color_picker
|
||||
Component.onCompleted: {
|
||||
setColor(Qt.rgba(0,0,0,0.1))
|
||||
}
|
||||
current: Qt.rgba(0,0,0,0.1)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -122,7 +120,7 @@ FluContentPage{
|
||||
id:water_mark
|
||||
anchors.fill: parent
|
||||
text:text_box.text
|
||||
textColor: color_picker.colorValue
|
||||
textColor: color_picker.current
|
||||
textSize: slider_text_size.value
|
||||
rotate: slider_rotate.value
|
||||
gap:Qt.point(slider_gap_x.value,slider_gap_y.value)
|
||||
|
||||
@ -11,7 +11,7 @@ FluWindow {
|
||||
width: 400
|
||||
height: 400
|
||||
fixSize: true
|
||||
|
||||
modality: Qt.ApplicationModal
|
||||
onInitArgument:
|
||||
(argument)=>{
|
||||
textbox_uesrname.updateText(argument.username)
|
||||
|
||||
@ -1,25 +1,18 @@
|
||||
#ifndef SINGLETON_H
|
||||
#define SINGLETON_H
|
||||
|
||||
#include <QMutex>
|
||||
|
||||
/**
|
||||
* @brief The Singleton class
|
||||
*/
|
||||
template <typename T>
|
||||
class Singleton {
|
||||
public:
|
||||
static T* getInstance();
|
||||
|
||||
private:
|
||||
Q_DISABLE_COPY_MOVE(Singleton)
|
||||
};
|
||||
|
||||
template <typename T>
|
||||
T* Singleton<T>::getInstance() {
|
||||
static QMutex mutex;
|
||||
QMutexLocker locker(&mutex);
|
||||
static T* instance = nullptr;
|
||||
if (instance == nullptr) {
|
||||
instance = new T();
|
||||
}
|
||||
static T* instance = new T();
|
||||
return instance;
|
||||
}
|
||||
|
||||
@ -31,10 +24,4 @@ private: \
|
||||
return Singleton<Class>::getInstance(); \
|
||||
}
|
||||
|
||||
#define HIDE_CONSTRUCTOR(Class) \
|
||||
private: \
|
||||
Class() = default; \
|
||||
Class(const Class& other) = delete; \
|
||||
Q_DISABLE_COPY_MOVE(Class);
|
||||
|
||||
#endif // SINGLETON_H
|
||||
|
||||
@ -30,6 +30,7 @@ void FluTheme::refreshColors(){
|
||||
auto isDark = dark();
|
||||
primaryColor(isDark ? _themeColor->lighter() : _themeColor->dark());
|
||||
backgroundColor(isDark ? QColor(0,0,0,255) : QColor(1,1,1,255));
|
||||
dividerColor(isDark ? QColor(80,80,80,255) : QColor(210,210,210,255));
|
||||
windowBackgroundColor(isDark ? QColor(32,32,32,255) : QColor(237,237,237,255));
|
||||
windowActiveBackgroundColor(isDark ? QColor(26,26,26,255) : QColor(243,243,243,255));
|
||||
fontPrimaryColor(isDark ? QColor(248,248,248,255) : QColor(7,7,7,255));
|
||||
|
||||
@ -20,6 +20,7 @@ class FluTheme : public QObject
|
||||
Q_PROPERTY_AUTO(FluColorSet*,themeColor);
|
||||
Q_PROPERTY_AUTO(QColor,primaryColor);
|
||||
Q_PROPERTY_AUTO(QColor,backgroundColor);
|
||||
Q_PROPERTY_AUTO(QColor,dividerColor);
|
||||
Q_PROPERTY_AUTO(QColor,windowBackgroundColor);
|
||||
Q_PROPERTY_AUTO(QColor,windowActiveBackgroundColor);
|
||||
Q_PROPERTY_AUTO(QColor,fontPrimaryColor);
|
||||
|
||||
@ -42,13 +42,6 @@ void FluentUI::registerTypes(const char *uri){
|
||||
qmlRegisterType<FluFramelessHelper>(uri,major,minor,"FluFramelessHelper");
|
||||
qmlRegisterType<FluTableSortProxyModel>(uri,major,minor,"FluTableSortProxyModel");
|
||||
|
||||
qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/ColorPicker/ColorPicker.qml"),uri,major,minor,"ColorPicker");
|
||||
qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/ColorPicker/Content/Checkerboard.qml"),uri,major,minor,"Checkerboard");
|
||||
qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/ColorPicker/Content/ColorSlider.qml"),uri,major,minor,"ColorSlider");
|
||||
qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/ColorPicker/Content/NumberBox.qml"),uri,major,minor,"NumberBox");
|
||||
qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/ColorPicker/Content/PanelBorder.qml"),uri,major,minor,"PanelBorder");
|
||||
qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/ColorPicker/Content/SBPicker.qml"),uri,major,minor,"SBPicker");
|
||||
|
||||
qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluAcrylic.qml"),uri,major,minor,"FluAcrylic");
|
||||
qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluAppBar.qml"),uri,major,minor,"FluAppBar");
|
||||
qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluArea.qml"),uri,major,minor,"FluArea");
|
||||
@ -62,7 +55,6 @@ void FluentUI::registerTypes(const char *uri){
|
||||
qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluChart.qml"),uri,major,minor,"FluChart");
|
||||
qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluCheckBox.qml"),uri,major,minor,"FluCheckBox");
|
||||
qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluColorPicker.qml"),uri,major,minor,"FluColorPicker");
|
||||
qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluColorView.qml"),uri,major,minor,"FluColorView");
|
||||
qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluComboBox.qml"),uri,major,minor,"FluComboBox");
|
||||
qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluContentDialog.qml"),uri,major,minor,"FluContentDialog");
|
||||
qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluContentPage.qml"),uri,major,minor,"FluContentPage");
|
||||
|
||||
@ -1,223 +0,0 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Layouts 1.15
|
||||
import QtQuick.Controls 2.15
|
||||
import "Content"
|
||||
|
||||
Item {
|
||||
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
|
||||
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) {
|
||||
if(!enableAlphaChannel){
|
||||
a = 1
|
||||
}
|
||||
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 _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
|
||||
}
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,44 +0,0 @@
|
||||
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
|
||||
preventStealing: true
|
||||
anchors.right: parent.right
|
||||
function handleMouse(mouse) {
|
||||
if (mouse.buttons & Qt.LeftButton) {
|
||||
pickerCursor.y = Math.max(0, Math.min(height, mouse.y)-cursorHeight)
|
||||
}
|
||||
}
|
||||
onPositionChanged:(mouse)=> {
|
||||
handleMouse(mouse)
|
||||
}
|
||||
onPressed:(mouse)=> handleMouse(mouse)
|
||||
}
|
||||
|
||||
function setValue(val) {
|
||||
pickerCursor.y = height * (1 - val)
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,39 +0,0 @@
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
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"
|
||||
}
|
||||
}
|
||||
@ -1,62 +0,0 @@
|
||||
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
|
||||
preventStealing: true
|
||||
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));
|
||||
}
|
||||
}
|
||||
onPositionChanged:(mouse)=> handleMouse(mouse)
|
||||
onPressed:(mouse)=> handleMouse(mouse)
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,8 +10,9 @@ Button{
|
||||
height: 36
|
||||
implicitWidth: width
|
||||
implicitHeight: height
|
||||
property alias colorValue: container.colorValue
|
||||
property alias enableAlphaChannel: container.enableAlphaChannel
|
||||
property color current : Qt.rgba(1,1,1,1)
|
||||
signal accepted()
|
||||
property int colorHandleRadius: 8
|
||||
background:
|
||||
Rectangle{
|
||||
id:layout_color
|
||||
@ -23,72 +24,559 @@ Button{
|
||||
return FluTheme.dark ? Qt.rgba(100/255,100/255,100/255,1) : Qt.rgba(200/255,200/255,200/255,1)
|
||||
}
|
||||
border.width: 1
|
||||
|
||||
Rectangle{
|
||||
anchors.fill: parent
|
||||
anchors.margins: 4
|
||||
radius: 5
|
||||
color: control.colorValue
|
||||
color: control.current
|
||||
}
|
||||
|
||||
}
|
||||
Item{
|
||||
id: d
|
||||
property var window : Window.window
|
||||
}
|
||||
contentItem: Item{}
|
||||
onClicked: {
|
||||
popup.showPopup()
|
||||
color_dialog.open()
|
||||
}
|
||||
Menu{
|
||||
id:popup
|
||||
modal: true
|
||||
Overlay.modal: Item {}
|
||||
height: container.height
|
||||
width: container.width
|
||||
contentItem: Item{
|
||||
clip: true
|
||||
FluColorView{
|
||||
id:container
|
||||
}
|
||||
}
|
||||
background:Item{
|
||||
FluShadow{
|
||||
FluPopup{
|
||||
id:color_dialog
|
||||
implicitWidth: 326
|
||||
implicitHeight: 560
|
||||
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
|
||||
Rectangle{
|
||||
id:layout_actions
|
||||
width: parent.width
|
||||
height: 60
|
||||
radius: 5
|
||||
z:999
|
||||
anchors.bottom: parent.bottom
|
||||
color: FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
|
||||
RowLayout{
|
||||
anchors
|
||||
{
|
||||
centerIn: parent
|
||||
margins: spacing
|
||||
fill: parent
|
||||
}
|
||||
spacing: 10
|
||||
Item{
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
FluButton{
|
||||
text: "取消"
|
||||
width: parent.width
|
||||
anchors.centerIn: parent
|
||||
onClicked: {
|
||||
color_dialog.close()
|
||||
}
|
||||
}
|
||||
enter: Transition {
|
||||
reversible: true
|
||||
NumberAnimation {
|
||||
property: "opacity"
|
||||
from:0
|
||||
to:1
|
||||
duration: FluTheme.enableAnimation ? 83 : 0
|
||||
}
|
||||
Item{
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
FluFilledButton{
|
||||
text: "确认"
|
||||
width: parent.width
|
||||
anchors.centerIn: parent
|
||||
onClicked: {
|
||||
current = layout_color_hue.colorValue
|
||||
control.accepted()
|
||||
color_dialog.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
contentItem: Flickable{
|
||||
implicitWidth: parent.width
|
||||
implicitHeight: Math.min(layout_content.height,560,color_dialog.height)
|
||||
boundsBehavior:Flickable.StopAtBounds
|
||||
contentHeight: layout_content.height + 70
|
||||
contentWidth: width
|
||||
clip: true
|
||||
ScrollBar.vertical: FluScrollBar {}
|
||||
Item{
|
||||
id:layout_content
|
||||
width: parent.width
|
||||
height: childrenRect.height
|
||||
FluText{
|
||||
id:text_titile
|
||||
font:FluTextStyle.Subtitle
|
||||
text:"颜色选择器"
|
||||
anchors{
|
||||
left: parent.left
|
||||
top: parent.top
|
||||
leftMargin: 20
|
||||
topMargin: 20
|
||||
}
|
||||
}
|
||||
Item{
|
||||
id:layout_sb
|
||||
width: 200
|
||||
height: 200
|
||||
anchors{
|
||||
left: parent.left
|
||||
top: text_titile.bottom
|
||||
leftMargin: 12
|
||||
}
|
||||
FluClip{
|
||||
id:layout_color_hue
|
||||
property color colorValue
|
||||
property real xPercent: pickerCursor.x/width
|
||||
property real yPercent: pickerCursor.y/height
|
||||
property real blackPercent: blackCursor.x/(layout_black.width-12)
|
||||
property real opacityPercent: opacityCursor.x/(layout_opacity.width-12)
|
||||
property color opacityColor:{
|
||||
var c = blackColor
|
||||
c = Qt.rgba(c.r,c.g,c.b,opacityPercent)
|
||||
return c
|
||||
}
|
||||
onOpacityColorChanged: {
|
||||
layout_color_hue.colorValue = opacityColor
|
||||
updateColorText(opacityColor)
|
||||
}
|
||||
function updateColorText(color){
|
||||
text_box_r.text = String(Math.floor(color.r*255))
|
||||
text_box_g.text = String(Math.floor(color.g*255))
|
||||
text_box_b.text = String(Math.floor(color.b*255))
|
||||
text_box_a.text = String(Math.floor(color.a*100))
|
||||
var colorString = color.toString().slice(1)
|
||||
if(color.a===1){
|
||||
colorString = "FF"+colorString
|
||||
}
|
||||
text_box_color.text = colorString.toUpperCase()
|
||||
}
|
||||
property color blackColor: {
|
||||
var c = whiteColor
|
||||
c = Qt.rgba(c.r*blackPercent,c.g*blackPercent,c.b*blackPercent,1)
|
||||
return c
|
||||
}
|
||||
property color hueColor: {
|
||||
var v = 1.0-xPercent
|
||||
var c
|
||||
if(0.0 <= v && v < 0.16) {
|
||||
c = Qt.rgba(1.0, 0.0, v/0.16, 1.0)
|
||||
} else if(0.16 <= v && v < 0.33) {
|
||||
c = Qt.rgba(1.0 - (v-0.16)/0.17, 0.0, 1.0, 1.0)
|
||||
} else if(0.33 <= v && v < 0.5) {
|
||||
c = Qt.rgba(0.0, ((v-0.33)/0.17), 1.0, 1.0)
|
||||
} else if(0.5 <= v && v < 0.76) {
|
||||
c = Qt.rgba(0.0, 1.0, 1.0 - (v-0.5)/0.26, 1.0)
|
||||
} else if(0.76 <= v && v < 0.85) {
|
||||
c = Qt.rgba((v-0.76)/0.09, 1.0, 0.0, 1.0)
|
||||
} else if(0.85 <= v && v <= 1.0) {
|
||||
c = Qt.rgba(1.0, 1.0 - (v-0.85)/0.15, 0.0, 1.0)
|
||||
} else {
|
||||
c = Qt.rgba(1.0,0.0,0.0,1.0)
|
||||
}
|
||||
return c
|
||||
}
|
||||
property color whiteColor: {
|
||||
var c = hueColor
|
||||
c = Qt.rgba((1-c.r)*yPercent+c.r,(1-c.g)*yPercent+c.g,(1-c.b)*yPercent+c.b,1.0)
|
||||
return c
|
||||
}
|
||||
function updateColor(){
|
||||
var r = Number(text_box_r.text)/255
|
||||
var g = Number(text_box_g.text)/255
|
||||
var b = Number(text_box_b.text)/255
|
||||
var opacityPercent = Number(text_box_a.text)/100
|
||||
var blackPercent = Math.max(r,g,b)
|
||||
r = r/blackPercent
|
||||
g = g/blackPercent
|
||||
b = b/blackPercent
|
||||
var yPercent = Math.min(r,g,b)
|
||||
if(r === g && r === b){
|
||||
r = 1
|
||||
b = 1
|
||||
g = 1
|
||||
}else{
|
||||
r = (yPercent-r)/(yPercent-1)
|
||||
g = (yPercent-g)/(yPercent-1)
|
||||
b = (yPercent-b)/(yPercent-1)
|
||||
}
|
||||
var xPercent
|
||||
if (r === 1.0 && g === 0.0 && b <= 1.0) {
|
||||
if(b===0.0){
|
||||
xPercent = 0
|
||||
}else{
|
||||
xPercent = 1.0 - b * 0.16
|
||||
}
|
||||
} else if (r <= 1.0 && g === 0.0 && b === 1.0) {
|
||||
xPercent = 1.0 - (1.0 - r) * 0.17 - 0.16
|
||||
} else if (r === 0.0 && g <= 1.0 && b === 1.0) {
|
||||
xPercent = 1.0 - (g * 0.17 + 0.33)
|
||||
} else if (r === 0.0 && g === 1.0 && b <= 1.0) {
|
||||
xPercent = 1.0 - (1.0 - b) * 0.26 - 0.5
|
||||
} else if (r <= 1.0 && g === 1.0 && b === 0.0) {
|
||||
xPercent = 1.0 - (r * 0.09 + 0.76)
|
||||
} else if (r === 1.0 && g <= 1.0 && b === 0.0) {
|
||||
xPercent = 1.0 - (1.0 - g) * 0.15 - 0.85
|
||||
} else {
|
||||
xPercent = 0
|
||||
}
|
||||
pickerCursor.x = xPercent * width
|
||||
pickerCursor.y = yPercent * height
|
||||
blackCursor.x = blackPercent * (layout_black.width-12)
|
||||
opacityCursor.x = opacityPercent * (layout_opacity.width-12)
|
||||
}
|
||||
radius: [4,4,4,4]
|
||||
x: colorHandleRadius
|
||||
y: colorHandleRadius
|
||||
width: parent.width - 2 * colorHandleRadius
|
||||
height: parent.height - 2 * colorHandleRadius
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
gradient: Gradient {
|
||||
orientation: Gradient.Horizontal
|
||||
GradientStop { position: 0.0; color: "#FF0000" }
|
||||
GradientStop { position: 0.16; color: "#FFFF00" }
|
||||
GradientStop { position: 0.33; color: "#00FF00" }
|
||||
GradientStop { position: 0.5; color: "#00FFFF" }
|
||||
GradientStop { position: 0.76; color: "#0000FF" }
|
||||
GradientStop { position: 0.85; color: "#FF00FF" }
|
||||
GradientStop { position: 1.0; color: "#FF0000" }
|
||||
}
|
||||
}
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
gradient: Gradient {
|
||||
GradientStop { position: 1.0; color: "#FFFFFFFF" }
|
||||
GradientStop { position: 0.0; color: "#00000000" }
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
radius: 4
|
||||
anchors.fill: parent
|
||||
border.width: 1
|
||||
border.color: FluTheme.dividerColor
|
||||
color:"#00000000"
|
||||
}
|
||||
}
|
||||
Item {
|
||||
id: pickerCursor
|
||||
Rectangle {
|
||||
width: colorHandleRadius*2; height: colorHandleRadius*2
|
||||
radius: colorHandleRadius
|
||||
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: colorHandleRadius
|
||||
y: colorHandleRadius
|
||||
preventStealing: true
|
||||
function handleMouse(mouse) {
|
||||
if (mouse.buttons & Qt.LeftButton) {
|
||||
pickerCursor.x = Math.max(0,Math.min(mouse.x - colorHandleRadius,width-2*colorHandleRadius));
|
||||
pickerCursor.y = Math.max(0,Math.min(mouse.y - colorHandleRadius,height-2*colorHandleRadius));
|
||||
}
|
||||
}
|
||||
onPositionChanged:(mouse)=> handleMouse(mouse)
|
||||
onPressed:(mouse)=> handleMouse(mouse)
|
||||
}
|
||||
}
|
||||
|
||||
exit:Transition {
|
||||
NumberAnimation {
|
||||
property: "opacity"
|
||||
from:1
|
||||
to:0
|
||||
duration: FluTheme.enableAnimation ? 83 : 0
|
||||
FluClip{
|
||||
width: 40
|
||||
height: 200
|
||||
anchors{
|
||||
top: layout_sb.top
|
||||
bottom: layout_sb.bottom
|
||||
left: layout_sb.right
|
||||
topMargin: colorHandleRadius
|
||||
bottomMargin: colorHandleRadius
|
||||
leftMargin: 4
|
||||
}
|
||||
radius: [4,4,4,4]
|
||||
Grid {
|
||||
padding: 0
|
||||
id:target_grid_color
|
||||
anchors.fill: parent
|
||||
rows: height/5+1
|
||||
columns: width/5+1
|
||||
Repeater {
|
||||
model: (target_grid_color.columns-1)*(target_grid_color.rows-1)
|
||||
Rectangle {
|
||||
width: 6
|
||||
height: 6
|
||||
color: (model.index%2 == 0) ? "gray" : "white"
|
||||
}
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
anchors.fill: parent
|
||||
color:layout_color_hue.colorValue
|
||||
radius: 4
|
||||
border.width: 1
|
||||
border.color: FluTheme.dividerColor
|
||||
}
|
||||
}
|
||||
|
||||
Column{
|
||||
id:layout_slider_bar
|
||||
spacing: 8
|
||||
anchors{
|
||||
left: parent.left
|
||||
leftMargin: 18
|
||||
right: parent.right
|
||||
rightMargin: 18
|
||||
top: layout_sb.bottom
|
||||
topMargin: 10
|
||||
}
|
||||
Rectangle{
|
||||
id:layout_black
|
||||
radius: 6
|
||||
height: 12
|
||||
width:parent.width
|
||||
gradient: Gradient {
|
||||
orientation:Gradient.Horizontal
|
||||
GradientStop { position: 0.0; color: "#FF000000" }
|
||||
GradientStop { position: 1.0; color: layout_color_hue.hueColor }
|
||||
}
|
||||
Item {
|
||||
id:blackCursor
|
||||
x:layout_black.width-12
|
||||
Rectangle {
|
||||
width: 12
|
||||
height: 12
|
||||
radius: 6
|
||||
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
|
||||
preventStealing: true
|
||||
function handleMouse(mouse) {
|
||||
if (mouse.buttons & Qt.LeftButton) {
|
||||
blackCursor.x = Math.max(0,Math.min(mouse.x - 6,width-2*6));
|
||||
blackCursor.y = 0
|
||||
}
|
||||
}
|
||||
onPositionChanged:(mouse)=> handleMouse(mouse)
|
||||
onPressed:(mouse)=> handleMouse(mouse)
|
||||
}
|
||||
|
||||
}
|
||||
FluClip{
|
||||
id:layout_opacity
|
||||
height: 12
|
||||
width:parent.width
|
||||
radius: [6,6,6,6]
|
||||
Grid {
|
||||
id:grid_opacity
|
||||
anchors.fill: parent
|
||||
rows: height/4
|
||||
columns: width/4+1
|
||||
clip: true
|
||||
Repeater {
|
||||
model: grid_opacity.columns*grid_opacity.rows
|
||||
Rectangle {
|
||||
width: 4
|
||||
height: 4
|
||||
color: (model.index%2 == 0) ? "gray" : "white"
|
||||
}
|
||||
}
|
||||
}
|
||||
MouseArea{
|
||||
anchors.fill: parent
|
||||
onClicked: {
|
||||
console.debug(grid_opacity.columns,grid_opacity.rows)
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
anchors.fill: parent
|
||||
gradient: Gradient {
|
||||
orientation:Gradient.Horizontal
|
||||
GradientStop { position: 0.0; color: "#00000000" }
|
||||
GradientStop { position: 1.0; color: layout_color_hue.blackColor }
|
||||
}
|
||||
}
|
||||
Item {
|
||||
id:opacityCursor
|
||||
x:layout_opacity.width-12
|
||||
Rectangle {
|
||||
width: 12
|
||||
height: 12
|
||||
radius: 6
|
||||
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 {
|
||||
id:mouse_opacity
|
||||
anchors.fill: parent
|
||||
preventStealing: true
|
||||
function handleMouse(mouse) {
|
||||
if (mouse.buttons & Qt.LeftButton) {
|
||||
opacityCursor.x = Math.max(0,Math.min(mouse.x - 6,width-2*6));
|
||||
opacityCursor.y = 0
|
||||
}
|
||||
}
|
||||
onPositionChanged:(mouse)=> handleMouse(mouse)
|
||||
onPressed:(mouse)=> handleMouse(mouse)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Column{
|
||||
anchors{
|
||||
left: parent.left
|
||||
leftMargin: 20
|
||||
top: layout_slider_bar.bottom
|
||||
topMargin: 10
|
||||
right: parent.right
|
||||
rightMargin: 20
|
||||
}
|
||||
spacing: 5
|
||||
Item{
|
||||
width: parent.width
|
||||
height: text_box_color.height
|
||||
FluText{
|
||||
text:"编辑颜色"
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left:parent.left
|
||||
}
|
||||
}
|
||||
FluTextBox{
|
||||
id:text_box_color
|
||||
width: 136
|
||||
validator: RegularExpressionValidator {
|
||||
regularExpression: /^[0-9A-F]{8}$/
|
||||
}
|
||||
anchors{
|
||||
right: parent.right
|
||||
}
|
||||
leftPadding: 20
|
||||
FluText{
|
||||
text:"#"
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
leftMargin: 5
|
||||
}
|
||||
}
|
||||
onTextEdited: {
|
||||
if(text!==""){
|
||||
var colorString = text_box_color.text.padStart(8,"0")
|
||||
var c = Qt.rgba(
|
||||
parseInt(colorString.substring(2, 4), 16) / 255,
|
||||
parseInt(colorString.substring(4, 6), 16) / 255,
|
||||
parseInt(colorString.substring(6, 8), 16) / 255,
|
||||
parseInt(colorString.substring(0, 2), 16) / 255)
|
||||
layout_color_hue.colorValue = c
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Row{
|
||||
spacing: 10
|
||||
FluTextBox{
|
||||
id:text_box_r
|
||||
width: 120
|
||||
validator: RegularExpressionValidator {
|
||||
regularExpression: /^(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)$/
|
||||
}
|
||||
onTextEdited: {
|
||||
if(text!==""){
|
||||
layout_color_hue.updateColor()
|
||||
}
|
||||
}
|
||||
}
|
||||
FluText{
|
||||
text:"Red"
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
Row{
|
||||
spacing: 10
|
||||
FluTextBox{
|
||||
id:text_box_g
|
||||
width: 120
|
||||
validator: RegularExpressionValidator {
|
||||
regularExpression: /^(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)$/
|
||||
}
|
||||
onTextEdited: {
|
||||
if(text!==""){
|
||||
layout_color_hue.updateColor()
|
||||
}
|
||||
}
|
||||
}
|
||||
FluText{
|
||||
text:"Green"
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
Row{
|
||||
spacing: 10
|
||||
FluTextBox{
|
||||
id:text_box_b
|
||||
width: 120
|
||||
validator: RegularExpressionValidator {
|
||||
regularExpression: /^(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)$/
|
||||
}
|
||||
onTextEdited: {
|
||||
if(text!==""){
|
||||
layout_color_hue.updateColor()
|
||||
}
|
||||
}
|
||||
}
|
||||
FluText{
|
||||
text:"Blue"
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
Row{
|
||||
spacing: 10
|
||||
FluTextBox{
|
||||
id:text_box_a
|
||||
width: 120
|
||||
validator: RegularExpressionValidator {
|
||||
regularExpression: /^(100|[1-9]?\d)$/
|
||||
}
|
||||
FluText{
|
||||
id:text_opacity
|
||||
text:"%"
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
x:Math.min(text_box_a.implicitWidth,text_box_a.width)-38
|
||||
}
|
||||
onTextEdited: {
|
||||
if(text!==""){
|
||||
opacityCursor.x = Number(text)/100 * (layout_opacity.width-12)
|
||||
}
|
||||
}
|
||||
}
|
||||
FluText{
|
||||
text:"Opacity"
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
function showPopup() {
|
||||
var pos = control.mapToItem(null, 0, 0)
|
||||
if(d.window.height>pos.y+control.height+container.height){
|
||||
popup.y = control.height
|
||||
} else if(pos.y>container.height){
|
||||
popup.y = -container.height
|
||||
} else {
|
||||
popup.y = d.window.height-(pos.y+container.height)
|
||||
}
|
||||
popup.x = -(popup.width-control.width)/2
|
||||
popup.open()
|
||||
}
|
||||
}
|
||||
function setColor(color){
|
||||
container.setColor(color)
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,24 +0,0 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Controls 2.15
|
||||
import FluentUI 1.0
|
||||
import "ColorPicker"
|
||||
|
||||
Item {
|
||||
id:control
|
||||
property alias colorValue: color_picker.colorValue
|
||||
property alias enableAlphaChannel: color_picker.enableAlphaChannel
|
||||
property int radius: 5
|
||||
width: color_picker.width+10
|
||||
height: color_picker.height
|
||||
FluArea{
|
||||
anchors.fill: parent
|
||||
radius: control.radius
|
||||
ColorPicker{
|
||||
id:color_picker
|
||||
}
|
||||
}
|
||||
function setColor(color) {
|
||||
color_picker.setColor(color)
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@ Item {
|
||||
height: d.isVertical ? parent.height : spacing*2+size
|
||||
|
||||
FluRectangle{
|
||||
color: FluTheme.dark ? Qt.rgba(80/255,80/255,80/255,1) : Qt.rgba(210/255,210/255,210/255,1)
|
||||
color: FluTheme.dividerColor
|
||||
width: d.isVertical ? size : parent.width
|
||||
height: d.isVertical ? parent.height : size
|
||||
anchors.centerIn: parent
|
||||
|
||||
@ -46,8 +46,10 @@ FluObject {
|
||||
Component{
|
||||
id:screenlayoutComponent
|
||||
Column{
|
||||
parent: Overlay.overlay
|
||||
z:999
|
||||
spacing: 20
|
||||
width: parent.width
|
||||
width: root.width
|
||||
move: Transition {
|
||||
NumberAnimation {
|
||||
properties: "y"
|
||||
|
||||
@ -20,6 +20,7 @@ Popup {
|
||||
to:1
|
||||
}
|
||||
}
|
||||
height:Math.min(implicitHeight,parent.height)
|
||||
exit:Transition {
|
||||
NumberAnimation {
|
||||
property: "opacity"
|
||||
@ -36,3 +37,4 @@ Popup {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -174,12 +174,13 @@ Item {
|
||||
}
|
||||
function updatePosition(pos){
|
||||
var idx = tab_nav.indexAt(pos.x+tab_nav.contentX+1, pos.y)
|
||||
var firstIdx = tab_nav.indexAt(tab_nav.contentX+1, pos.y)
|
||||
var lastIdx = tab_nav.indexAt(tab_nav.width+tab_nav.contentX-1, pos.y)
|
||||
if(lastIdx === -1){
|
||||
lastIdx = tab_nav.count-1
|
||||
if(idx<0){
|
||||
return
|
||||
}
|
||||
if (idx!==-1 && idx >= firstIdx && idx <= lastIdx && d.dragIndex !== idx) {
|
||||
if(idx>=tab_nav.count){
|
||||
return
|
||||
}
|
||||
if (d.dragIndex !== idx) {
|
||||
tab_model.move(d.dragIndex, idx, 1)
|
||||
d.dragIndex = idx;
|
||||
}
|
||||
|
||||
@ -98,7 +98,7 @@ TextField{
|
||||
}
|
||||
contentDescription:"Clean"
|
||||
onClicked:{
|
||||
control.text = ""
|
||||
control.clear()
|
||||
}
|
||||
}
|
||||
FluIcon{
|
||||
|
||||
@ -308,10 +308,6 @@ Module {
|
||||
exports: ["FluentUI/FluTableSortProxyModel 1.0"]
|
||||
exportMetaObjectRevisions: [0]
|
||||
Property { name: "model"; type: "QAbstractTableModel"; isPointer: true }
|
||||
Method {
|
||||
name: "setSortComparator"
|
||||
Parameter { name: "comparator"; type: "QJSValue" }
|
||||
}
|
||||
Method {
|
||||
name: "getRow"
|
||||
type: "QVariant"
|
||||
@ -327,6 +323,14 @@ Module {
|
||||
Parameter { name: "rowIndex"; type: "int" }
|
||||
Parameter { name: "rows"; type: "int" }
|
||||
}
|
||||
Method {
|
||||
name: "setComparator"
|
||||
Parameter { name: "comparator"; type: "QJSValue" }
|
||||
}
|
||||
Method {
|
||||
name: "setFilter"
|
||||
Parameter { name: "filter"; type: "QJSValue" }
|
||||
}
|
||||
}
|
||||
Component {
|
||||
name: "FluThemeType"
|
||||
@ -2299,72 +2303,6 @@ Module {
|
||||
Method { name: "clear" }
|
||||
Method { name: "invalidate" }
|
||||
}
|
||||
Component {
|
||||
prototype: "QQuickGrid"
|
||||
name: "FluentUI/Checkerboard 1.0"
|
||||
exports: ["FluentUI/Checkerboard 1.0"]
|
||||
exportMetaObjectRevisions: [0]
|
||||
isComposite: true
|
||||
defaultProperty: "data"
|
||||
Property { name: "cellSide"; type: "int" }
|
||||
}
|
||||
Component {
|
||||
prototype: "QQuickItem"
|
||||
name: "FluentUI/ColorPicker 1.0"
|
||||
exports: ["FluentUI/ColorPicker 1.0"]
|
||||
exportMetaObjectRevisions: [0]
|
||||
isComposite: true
|
||||
defaultProperty: "data"
|
||||
Property { name: "colorValue"; type: "QColor" }
|
||||
Property { name: "enableAlphaChannel"; type: "bool" }
|
||||
Property { name: "enableDetails"; type: "bool" }
|
||||
Property { name: "colorHandleRadius"; type: "int" }
|
||||
Property { name: "_changingColorValue"; type: "QColor" }
|
||||
Signal {
|
||||
name: "colorChanged"
|
||||
Parameter { name: "changedColor"; type: "QColor" }
|
||||
}
|
||||
Method {
|
||||
name: "_hsla"
|
||||
type: "QVariant"
|
||||
Parameter { name: "h"; type: "QVariant" }
|
||||
Parameter { name: "s"; type: "QVariant" }
|
||||
Parameter { name: "b"; type: "QVariant" }
|
||||
Parameter { name: "a"; type: "QVariant" }
|
||||
}
|
||||
Method {
|
||||
name: "_fullColorString"
|
||||
type: "QVariant"
|
||||
Parameter { name: "clr"; type: "QVariant" }
|
||||
Parameter { name: "a"; type: "QVariant" }
|
||||
}
|
||||
Method {
|
||||
name: "_getChannelStr"
|
||||
type: "QVariant"
|
||||
Parameter { name: "clr"; type: "QVariant" }
|
||||
Parameter { name: "channelIdx"; type: "QVariant" }
|
||||
}
|
||||
Method {
|
||||
name: "setColor"
|
||||
type: "QVariant"
|
||||
Parameter { name: "color"; type: "QVariant" }
|
||||
}
|
||||
}
|
||||
Component {
|
||||
prototype: "QQuickItem"
|
||||
name: "FluentUI/ColorSlider 1.0"
|
||||
exports: ["FluentUI/ColorSlider 1.0"]
|
||||
exportMetaObjectRevisions: [0]
|
||||
isComposite: true
|
||||
defaultProperty: "data"
|
||||
Property { name: "cursorHeight"; type: "int" }
|
||||
Property { name: "value"; type: "double" }
|
||||
Method {
|
||||
name: "setValue"
|
||||
type: "QVariant"
|
||||
Parameter { name: "val"; type: "QVariant" }
|
||||
}
|
||||
}
|
||||
Component {
|
||||
prototype: "QQuickItem"
|
||||
name: "FluentUI/FluAcrylic 1.0"
|
||||
@ -2424,25 +2362,25 @@ Module {
|
||||
Property { name: "systemMenuListener"; type: "QVariant" }
|
||||
Property {
|
||||
name: "buttonStayTop"
|
||||
type: "FluIconButton_QMLTYPE_28"
|
||||
type: "FluIconButton_QMLTYPE_17"
|
||||
isReadonly: true
|
||||
isPointer: true
|
||||
}
|
||||
Property {
|
||||
name: "buttonMinimize"
|
||||
type: "FluIconButton_QMLTYPE_28"
|
||||
type: "FluIconButton_QMLTYPE_17"
|
||||
isReadonly: true
|
||||
isPointer: true
|
||||
}
|
||||
Property {
|
||||
name: "buttonMaximize"
|
||||
type: "FluIconButton_QMLTYPE_28"
|
||||
type: "FluIconButton_QMLTYPE_17"
|
||||
isReadonly: true
|
||||
isPointer: true
|
||||
}
|
||||
Property {
|
||||
name: "buttonClose"
|
||||
type: "FluIconButton_QMLTYPE_28"
|
||||
type: "FluIconButton_QMLTYPE_17"
|
||||
isReadonly: true
|
||||
isPointer: true
|
||||
}
|
||||
@ -2716,29 +2654,9 @@ Module {
|
||||
exportMetaObjectRevisions: [0]
|
||||
isComposite: true
|
||||
defaultProperty: "data"
|
||||
Property { name: "colorValue"; type: "QColor" }
|
||||
Property { name: "enableAlphaChannel"; type: "bool" }
|
||||
Method {
|
||||
name: "setColor"
|
||||
type: "QVariant"
|
||||
Parameter { name: "color"; type: "QVariant" }
|
||||
}
|
||||
}
|
||||
Component {
|
||||
prototype: "QQuickItem"
|
||||
name: "FluentUI/FluColorView 1.0"
|
||||
exports: ["FluentUI/FluColorView 1.0"]
|
||||
exportMetaObjectRevisions: [0]
|
||||
isComposite: true
|
||||
defaultProperty: "data"
|
||||
Property { name: "radius"; type: "int" }
|
||||
Property { name: "colorValue"; type: "QColor" }
|
||||
Property { name: "enableAlphaChannel"; type: "bool" }
|
||||
Method {
|
||||
name: "setColor"
|
||||
type: "QVariant"
|
||||
Parameter { name: "color"; type: "QVariant" }
|
||||
}
|
||||
Property { name: "current"; type: "QColor" }
|
||||
Property { name: "colorHandleRadius"; type: "int" }
|
||||
Signal { name: "accepted" }
|
||||
}
|
||||
Component {
|
||||
prototype: "QQuickComboBox"
|
||||
@ -3126,15 +3044,15 @@ Module {
|
||||
defaultProperty: "data"
|
||||
Property { name: "logo"; type: "QUrl" }
|
||||
Property { name: "title"; type: "string" }
|
||||
Property { name: "items"; type: "FluObject_QMLTYPE_162"; isPointer: true }
|
||||
Property { name: "footerItems"; type: "FluObject_QMLTYPE_162"; isPointer: true }
|
||||
Property { name: "items"; type: "FluObject_QMLTYPE_149"; isPointer: true }
|
||||
Property { name: "footerItems"; type: "FluObject_QMLTYPE_149"; isPointer: true }
|
||||
Property { name: "displayMode"; type: "int" }
|
||||
Property { name: "autoSuggestBox"; type: "QQmlComponent"; isPointer: true }
|
||||
Property { name: "actionItem"; type: "QQmlComponent"; isPointer: true }
|
||||
Property { name: "topPadding"; type: "int" }
|
||||
Property { name: "pageMode"; type: "int" }
|
||||
Property { name: "navItemRightMenu"; type: "FluMenu_QMLTYPE_41"; isPointer: true }
|
||||
Property { name: "navItemExpanderRightMenu"; type: "FluMenu_QMLTYPE_41"; isPointer: true }
|
||||
Property { name: "navItemRightMenu"; type: "FluMenu_QMLTYPE_38"; isPointer: true }
|
||||
Property { name: "navItemExpanderRightMenu"; type: "FluMenu_QMLTYPE_38"; isPointer: true }
|
||||
Property { name: "navCompactWidth"; type: "int" }
|
||||
Property { name: "navTopMargin"; type: "int" }
|
||||
Property { name: "cellHeight"; type: "int" }
|
||||
@ -3142,13 +3060,13 @@ Module {
|
||||
Property { name: "hideNavAppBar"; type: "bool" }
|
||||
Property {
|
||||
name: "buttonMenu"
|
||||
type: "FluIconButton_QMLTYPE_28"
|
||||
type: "FluIconButton_QMLTYPE_17"
|
||||
isReadonly: true
|
||||
isPointer: true
|
||||
}
|
||||
Property {
|
||||
name: "buttonBack"
|
||||
type: "FluIconButton_QMLTYPE_28"
|
||||
type: "FluIconButton_QMLTYPE_17"
|
||||
isReadonly: true
|
||||
isPointer: true
|
||||
}
|
||||
@ -3691,8 +3609,11 @@ Module {
|
||||
Property { name: "borderColor"; type: "QColor" }
|
||||
Property { name: "horizonalHeaderVisible"; type: "bool" }
|
||||
Property { name: "verticalHeaderVisible"; type: "bool" }
|
||||
Property { name: "selectedBorderColor"; type: "QColor" }
|
||||
Property { name: "selectedColor"; type: "QColor" }
|
||||
Property { name: "rows"; type: "int"; isReadonly: true }
|
||||
Property { name: "columns"; type: "int"; isReadonly: true }
|
||||
Property { name: "sourceModel"; type: "QQmlTableModel"; isReadonly: true; isPointer: true }
|
||||
Method { name: "closeEditor"; type: "QVariant" }
|
||||
Method { name: "resetPosition"; type: "QVariant" }
|
||||
Method {
|
||||
@ -3704,7 +3625,12 @@ Module {
|
||||
Method {
|
||||
name: "sort"
|
||||
type: "QVariant"
|
||||
Parameter { name: "order"; type: "QVariant" }
|
||||
Parameter { name: "callback"; type: "QVariant" }
|
||||
}
|
||||
Method {
|
||||
name: "filter"
|
||||
type: "QVariant"
|
||||
Parameter { name: "callback"; type: "QVariant" }
|
||||
}
|
||||
Method {
|
||||
name: "setRow"
|
||||
@ -4020,37 +3946,4 @@ Module {
|
||||
Method { name: "layoutContainer"; type: "QVariant" }
|
||||
Method { name: "layoutContent"; type: "QVariant" }
|
||||
}
|
||||
Component {
|
||||
prototype: "QQuickRow"
|
||||
name: "FluentUI/NumberBox 1.0"
|
||||
exports: ["FluentUI/NumberBox 1.0"]
|
||||
exportMetaObjectRevisions: [0]
|
||||
isComposite: true
|
||||
defaultProperty: "data"
|
||||
Property { name: "caption"; type: "string" }
|
||||
Property { name: "value"; type: "string" }
|
||||
Property { name: "min"; type: "double" }
|
||||
Property { name: "max"; type: "double" }
|
||||
Property { name: "decimals"; type: "int" }
|
||||
}
|
||||
Component {
|
||||
prototype: "QQuickRectangle"
|
||||
name: "FluentUI/PanelBorder 1.0"
|
||||
exports: ["FluentUI/PanelBorder 1.0"]
|
||||
exportMetaObjectRevisions: [0]
|
||||
isComposite: true
|
||||
defaultProperty: "data"
|
||||
}
|
||||
Component {
|
||||
prototype: "QQuickItem"
|
||||
name: "FluentUI/SBPicker 1.0"
|
||||
exports: ["FluentUI/SBPicker 1.0"]
|
||||
exportMetaObjectRevisions: [0]
|
||||
isComposite: true
|
||||
defaultProperty: "data"
|
||||
Property { name: "hueColor"; type: "QColor" }
|
||||
Property { name: "saturation"; type: "double" }
|
||||
Property { name: "brightness"; type: "double" }
|
||||
Property { name: "r"; type: "int" }
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,7 +16,6 @@
|
||||
<file>FluentUI/Controls/FluChart.qml</file>
|
||||
<file>FluentUI/Controls/FluCheckBox.qml</file>
|
||||
<file>FluentUI/Controls/FluColorPicker.qml</file>
|
||||
<file>FluentUI/Controls/FluColorView.qml</file>
|
||||
<file>FluentUI/Controls/FluComboBox.qml</file>
|
||||
<file>FluentUI/Controls/FluContentDialog.qml</file>
|
||||
<file>FluentUI/Controls/FluContentPage.qml</file>
|
||||
@ -85,12 +84,6 @@
|
||||
<file>FluentUI/Controls/FluTour.qml</file>
|
||||
<file>FluentUI/Controls/FluTreeView.qml</file>
|
||||
<file>FluentUI/Controls/FluWindow.qml</file>
|
||||
<file>FluentUI/Controls/ColorPicker/ColorPicker.qml</file>
|
||||
<file>FluentUI/Controls/ColorPicker/Content/Checkerboard.qml</file>
|
||||
<file>FluentUI/Controls/ColorPicker/Content/ColorSlider.qml</file>
|
||||
<file>FluentUI/Controls/ColorPicker/Content/NumberBox.qml</file>
|
||||
<file>FluentUI/Controls/ColorPicker/Content/PanelBorder.qml</file>
|
||||
<file>FluentUI/Controls/ColorPicker/Content/SBPicker.qml</file>
|
||||
<file>FluentUI/Controls/FluLoadingButton.qml</file>
|
||||
<file>FluentUI/Controls/FluClip.qml</file>
|
||||
<file>FluentUI/Controls/FluLoader.qml</file>
|
||||
|
||||
@ -1,228 +0,0 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Controls
|
||||
import "Content"
|
||||
|
||||
Item {
|
||||
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
|
||||
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) {
|
||||
if(!enableAlphaChannel){
|
||||
a = 1
|
||||
}
|
||||
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
|
||||
}
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
import QtQuick
|
||||
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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,44 +0,0 @@
|
||||
import QtQuick
|
||||
|
||||
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
|
||||
preventStealing: true
|
||||
anchors.right: parent.right
|
||||
function handleMouse(mouse) {
|
||||
if (mouse.buttons & Qt.LeftButton) {
|
||||
pickerCursor.y = Math.max(0, Math.min(height, mouse.y)-cursorHeight)
|
||||
}
|
||||
}
|
||||
onPositionChanged:(mouse)=> {
|
||||
handleMouse(mouse)
|
||||
}
|
||||
onPressed:(mouse)=> handleMouse(mouse)
|
||||
}
|
||||
|
||||
function setValue(val) {
|
||||
pickerCursor.y = height * (1 - val)
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,39 +0,0 @@
|
||||
import QtQuick
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
import QtQuick
|
||||
|
||||
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"
|
||||
}
|
||||
}
|
||||
@ -1,62 +0,0 @@
|
||||
import QtQuick
|
||||
|
||||
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
|
||||
preventStealing: true
|
||||
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));
|
||||
}
|
||||
}
|
||||
onPositionChanged:(mouse)=> handleMouse(mouse)
|
||||
onPressed:(mouse)=> handleMouse(mouse)
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,8 +10,9 @@ Button{
|
||||
height: 36
|
||||
implicitWidth: width
|
||||
implicitHeight: height
|
||||
property alias colorValue: container.colorValue
|
||||
property alias enableAlphaChannel: container.enableAlphaChannel
|
||||
property color current : Qt.rgba(1,1,1,1)
|
||||
signal accepted()
|
||||
property int colorHandleRadius: 8
|
||||
background:
|
||||
Rectangle{
|
||||
id:layout_color
|
||||
@ -23,72 +24,559 @@ Button{
|
||||
return FluTheme.dark ? Qt.rgba(100/255,100/255,100/255,1) : Qt.rgba(200/255,200/255,200/255,1)
|
||||
}
|
||||
border.width: 1
|
||||
|
||||
Rectangle{
|
||||
anchors.fill: parent
|
||||
anchors.margins: 4
|
||||
radius: 5
|
||||
color: control.colorValue
|
||||
color: control.current
|
||||
}
|
||||
|
||||
}
|
||||
Item{
|
||||
id: d
|
||||
property var window : Window.window
|
||||
}
|
||||
contentItem: Item{}
|
||||
onClicked: {
|
||||
popup.showPopup()
|
||||
color_dialog.open()
|
||||
}
|
||||
Menu{
|
||||
id:popup
|
||||
modal: true
|
||||
Overlay.modal: Item {}
|
||||
height: container.height
|
||||
width: container.width
|
||||
contentItem: Item{
|
||||
clip: true
|
||||
FluColorView{
|
||||
id:container
|
||||
}
|
||||
}
|
||||
background:Item{
|
||||
FluShadow{
|
||||
FluPopup{
|
||||
id:color_dialog
|
||||
implicitWidth: 326
|
||||
implicitHeight: 560
|
||||
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
|
||||
Rectangle{
|
||||
id:layout_actions
|
||||
width: parent.width
|
||||
height: 60
|
||||
radius: 5
|
||||
z:999
|
||||
anchors.bottom: parent.bottom
|
||||
color: FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
|
||||
RowLayout{
|
||||
anchors
|
||||
{
|
||||
centerIn: parent
|
||||
margins: spacing
|
||||
fill: parent
|
||||
}
|
||||
spacing: 10
|
||||
Item{
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
FluButton{
|
||||
text: "取消"
|
||||
width: parent.width
|
||||
anchors.centerIn: parent
|
||||
onClicked: {
|
||||
color_dialog.close()
|
||||
}
|
||||
}
|
||||
enter: Transition {
|
||||
reversible: true
|
||||
NumberAnimation {
|
||||
property: "opacity"
|
||||
from:0
|
||||
to:1
|
||||
duration: FluTheme.enableAnimation ? 83 : 0
|
||||
}
|
||||
Item{
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
FluFilledButton{
|
||||
text: "确认"
|
||||
width: parent.width
|
||||
anchors.centerIn: parent
|
||||
onClicked: {
|
||||
current = layout_color_hue.colorValue
|
||||
control.accepted()
|
||||
color_dialog.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
contentItem: Flickable{
|
||||
implicitWidth: parent.width
|
||||
implicitHeight: Math.min(layout_content.height,560,color_dialog.height)
|
||||
boundsBehavior:Flickable.StopAtBounds
|
||||
contentHeight: layout_content.height + 70
|
||||
contentWidth: width
|
||||
clip: true
|
||||
ScrollBar.vertical: FluScrollBar {}
|
||||
Item{
|
||||
id:layout_content
|
||||
width: parent.width
|
||||
height: childrenRect.height
|
||||
FluText{
|
||||
id:text_titile
|
||||
font:FluTextStyle.Subtitle
|
||||
text:"颜色选择器"
|
||||
anchors{
|
||||
left: parent.left
|
||||
top: parent.top
|
||||
leftMargin: 20
|
||||
topMargin: 20
|
||||
}
|
||||
}
|
||||
Item{
|
||||
id:layout_sb
|
||||
width: 200
|
||||
height: 200
|
||||
anchors{
|
||||
left: parent.left
|
||||
top: text_titile.bottom
|
||||
leftMargin: 12
|
||||
}
|
||||
FluClip{
|
||||
id:layout_color_hue
|
||||
property color colorValue
|
||||
property real xPercent: pickerCursor.x/width
|
||||
property real yPercent: pickerCursor.y/height
|
||||
property real blackPercent: blackCursor.x/(layout_black.width-12)
|
||||
property real opacityPercent: opacityCursor.x/(layout_opacity.width-12)
|
||||
property color opacityColor:{
|
||||
var c = blackColor
|
||||
c = Qt.rgba(c.r,c.g,c.b,opacityPercent)
|
||||
return c
|
||||
}
|
||||
onOpacityColorChanged: {
|
||||
layout_color_hue.colorValue = opacityColor
|
||||
updateColorText(opacityColor)
|
||||
}
|
||||
function updateColorText(color){
|
||||
text_box_r.text = String(Math.floor(color.r*255))
|
||||
text_box_g.text = String(Math.floor(color.g*255))
|
||||
text_box_b.text = String(Math.floor(color.b*255))
|
||||
text_box_a.text = String(Math.floor(color.a*100))
|
||||
var colorString = color.toString().slice(1)
|
||||
if(color.a===1){
|
||||
colorString = "FF"+colorString
|
||||
}
|
||||
text_box_color.text = colorString.toUpperCase()
|
||||
}
|
||||
property color blackColor: {
|
||||
var c = whiteColor
|
||||
c = Qt.rgba(c.r*blackPercent,c.g*blackPercent,c.b*blackPercent,1)
|
||||
return c
|
||||
}
|
||||
property color hueColor: {
|
||||
var v = 1.0-xPercent
|
||||
var c
|
||||
if(0.0 <= v && v < 0.16) {
|
||||
c = Qt.rgba(1.0, 0.0, v/0.16, 1.0)
|
||||
} else if(0.16 <= v && v < 0.33) {
|
||||
c = Qt.rgba(1.0 - (v-0.16)/0.17, 0.0, 1.0, 1.0)
|
||||
} else if(0.33 <= v && v < 0.5) {
|
||||
c = Qt.rgba(0.0, ((v-0.33)/0.17), 1.0, 1.0)
|
||||
} else if(0.5 <= v && v < 0.76) {
|
||||
c = Qt.rgba(0.0, 1.0, 1.0 - (v-0.5)/0.26, 1.0)
|
||||
} else if(0.76 <= v && v < 0.85) {
|
||||
c = Qt.rgba((v-0.76)/0.09, 1.0, 0.0, 1.0)
|
||||
} else if(0.85 <= v && v <= 1.0) {
|
||||
c = Qt.rgba(1.0, 1.0 - (v-0.85)/0.15, 0.0, 1.0)
|
||||
} else {
|
||||
c = Qt.rgba(1.0,0.0,0.0,1.0)
|
||||
}
|
||||
return c
|
||||
}
|
||||
property color whiteColor: {
|
||||
var c = hueColor
|
||||
c = Qt.rgba((1-c.r)*yPercent+c.r,(1-c.g)*yPercent+c.g,(1-c.b)*yPercent+c.b,1.0)
|
||||
return c
|
||||
}
|
||||
function updateColor(){
|
||||
var r = Number(text_box_r.text)/255
|
||||
var g = Number(text_box_g.text)/255
|
||||
var b = Number(text_box_b.text)/255
|
||||
var opacityPercent = Number(text_box_a.text)/100
|
||||
var blackPercent = Math.max(r,g,b)
|
||||
r = r/blackPercent
|
||||
g = g/blackPercent
|
||||
b = b/blackPercent
|
||||
var yPercent = Math.min(r,g,b)
|
||||
if(r === g && r === b){
|
||||
r = 1
|
||||
b = 1
|
||||
g = 1
|
||||
}else{
|
||||
r = (yPercent-r)/(yPercent-1)
|
||||
g = (yPercent-g)/(yPercent-1)
|
||||
b = (yPercent-b)/(yPercent-1)
|
||||
}
|
||||
var xPercent
|
||||
if (r === 1.0 && g === 0.0 && b <= 1.0) {
|
||||
if(b===0.0){
|
||||
xPercent = 0
|
||||
}else{
|
||||
xPercent = 1.0 - b * 0.16
|
||||
}
|
||||
} else if (r <= 1.0 && g === 0.0 && b === 1.0) {
|
||||
xPercent = 1.0 - (1.0 - r) * 0.17 - 0.16
|
||||
} else if (r === 0.0 && g <= 1.0 && b === 1.0) {
|
||||
xPercent = 1.0 - (g * 0.17 + 0.33)
|
||||
} else if (r === 0.0 && g === 1.0 && b <= 1.0) {
|
||||
xPercent = 1.0 - (1.0 - b) * 0.26 - 0.5
|
||||
} else if (r <= 1.0 && g === 1.0 && b === 0.0) {
|
||||
xPercent = 1.0 - (r * 0.09 + 0.76)
|
||||
} else if (r === 1.0 && g <= 1.0 && b === 0.0) {
|
||||
xPercent = 1.0 - (1.0 - g) * 0.15 - 0.85
|
||||
} else {
|
||||
xPercent = 0
|
||||
}
|
||||
pickerCursor.x = xPercent * width
|
||||
pickerCursor.y = yPercent * height
|
||||
blackCursor.x = blackPercent * (layout_black.width-12)
|
||||
opacityCursor.x = opacityPercent * (layout_opacity.width-12)
|
||||
}
|
||||
radius: [4,4,4,4]
|
||||
x: colorHandleRadius
|
||||
y: colorHandleRadius
|
||||
width: parent.width - 2 * colorHandleRadius
|
||||
height: parent.height - 2 * colorHandleRadius
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
gradient: Gradient {
|
||||
orientation: Gradient.Horizontal
|
||||
GradientStop { position: 0.0; color: "#FF0000" }
|
||||
GradientStop { position: 0.16; color: "#FFFF00" }
|
||||
GradientStop { position: 0.33; color: "#00FF00" }
|
||||
GradientStop { position: 0.5; color: "#00FFFF" }
|
||||
GradientStop { position: 0.76; color: "#0000FF" }
|
||||
GradientStop { position: 0.85; color: "#FF00FF" }
|
||||
GradientStop { position: 1.0; color: "#FF0000" }
|
||||
}
|
||||
}
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
gradient: Gradient {
|
||||
GradientStop { position: 1.0; color: "#FFFFFFFF" }
|
||||
GradientStop { position: 0.0; color: "#00000000" }
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
radius: 4
|
||||
anchors.fill: parent
|
||||
border.width: 1
|
||||
border.color: FluTheme.dividerColor
|
||||
color:"#00000000"
|
||||
}
|
||||
}
|
||||
Item {
|
||||
id: pickerCursor
|
||||
Rectangle {
|
||||
width: colorHandleRadius*2; height: colorHandleRadius*2
|
||||
radius: colorHandleRadius
|
||||
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: colorHandleRadius
|
||||
y: colorHandleRadius
|
||||
preventStealing: true
|
||||
function handleMouse(mouse) {
|
||||
if (mouse.buttons & Qt.LeftButton) {
|
||||
pickerCursor.x = Math.max(0,Math.min(mouse.x - colorHandleRadius,width-2*colorHandleRadius));
|
||||
pickerCursor.y = Math.max(0,Math.min(mouse.y - colorHandleRadius,height-2*colorHandleRadius));
|
||||
}
|
||||
}
|
||||
onPositionChanged:(mouse)=> handleMouse(mouse)
|
||||
onPressed:(mouse)=> handleMouse(mouse)
|
||||
}
|
||||
}
|
||||
|
||||
exit:Transition {
|
||||
NumberAnimation {
|
||||
property: "opacity"
|
||||
from:1
|
||||
to:0
|
||||
duration: FluTheme.enableAnimation ? 83 : 0
|
||||
FluClip{
|
||||
width: 40
|
||||
height: 200
|
||||
anchors{
|
||||
top: layout_sb.top
|
||||
bottom: layout_sb.bottom
|
||||
left: layout_sb.right
|
||||
topMargin: colorHandleRadius
|
||||
bottomMargin: colorHandleRadius
|
||||
leftMargin: 4
|
||||
}
|
||||
radius: [4,4,4,4]
|
||||
Grid {
|
||||
padding: 0
|
||||
id:target_grid_color
|
||||
anchors.fill: parent
|
||||
rows: height/5+1
|
||||
columns: width/5+1
|
||||
Repeater {
|
||||
model: (target_grid_color.columns-1)*(target_grid_color.rows-1)
|
||||
Rectangle {
|
||||
width: 6
|
||||
height: 6
|
||||
color: (model.index%2 == 0) ? "gray" : "white"
|
||||
}
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
anchors.fill: parent
|
||||
color:layout_color_hue.colorValue
|
||||
radius: 4
|
||||
border.width: 1
|
||||
border.color: FluTheme.dividerColor
|
||||
}
|
||||
}
|
||||
|
||||
Column{
|
||||
id:layout_slider_bar
|
||||
spacing: 8
|
||||
anchors{
|
||||
left: parent.left
|
||||
leftMargin: 18
|
||||
right: parent.right
|
||||
rightMargin: 18
|
||||
top: layout_sb.bottom
|
||||
topMargin: 10
|
||||
}
|
||||
Rectangle{
|
||||
id:layout_black
|
||||
radius: 6
|
||||
height: 12
|
||||
width:parent.width
|
||||
gradient: Gradient {
|
||||
orientation:Gradient.Horizontal
|
||||
GradientStop { position: 0.0; color: "#FF000000" }
|
||||
GradientStop { position: 1.0; color: layout_color_hue.hueColor }
|
||||
}
|
||||
Item {
|
||||
id:blackCursor
|
||||
x:layout_black.width-12
|
||||
Rectangle {
|
||||
width: 12
|
||||
height: 12
|
||||
radius: 6
|
||||
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
|
||||
preventStealing: true
|
||||
function handleMouse(mouse) {
|
||||
if (mouse.buttons & Qt.LeftButton) {
|
||||
blackCursor.x = Math.max(0,Math.min(mouse.x - 6,width-2*6));
|
||||
blackCursor.y = 0
|
||||
}
|
||||
}
|
||||
onPositionChanged:(mouse)=> handleMouse(mouse)
|
||||
onPressed:(mouse)=> handleMouse(mouse)
|
||||
}
|
||||
|
||||
}
|
||||
FluClip{
|
||||
id:layout_opacity
|
||||
height: 12
|
||||
width:parent.width
|
||||
radius: [6,6,6,6]
|
||||
Grid {
|
||||
id:grid_opacity
|
||||
anchors.fill: parent
|
||||
rows: height/4
|
||||
columns: width/4+1
|
||||
clip: true
|
||||
Repeater {
|
||||
model: grid_opacity.columns*grid_opacity.rows
|
||||
Rectangle {
|
||||
width: 4
|
||||
height: 4
|
||||
color: (model.index%2 == 0) ? "gray" : "white"
|
||||
}
|
||||
}
|
||||
}
|
||||
MouseArea{
|
||||
anchors.fill: parent
|
||||
onClicked: {
|
||||
console.debug(grid_opacity.columns,grid_opacity.rows)
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
anchors.fill: parent
|
||||
gradient: Gradient {
|
||||
orientation:Gradient.Horizontal
|
||||
GradientStop { position: 0.0; color: "#00000000" }
|
||||
GradientStop { position: 1.0; color: layout_color_hue.blackColor }
|
||||
}
|
||||
}
|
||||
Item {
|
||||
id:opacityCursor
|
||||
x:layout_opacity.width-12
|
||||
Rectangle {
|
||||
width: 12
|
||||
height: 12
|
||||
radius: 6
|
||||
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 {
|
||||
id:mouse_opacity
|
||||
anchors.fill: parent
|
||||
preventStealing: true
|
||||
function handleMouse(mouse) {
|
||||
if (mouse.buttons & Qt.LeftButton) {
|
||||
opacityCursor.x = Math.max(0,Math.min(mouse.x - 6,width-2*6));
|
||||
opacityCursor.y = 0
|
||||
}
|
||||
}
|
||||
onPositionChanged:(mouse)=> handleMouse(mouse)
|
||||
onPressed:(mouse)=> handleMouse(mouse)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Column{
|
||||
anchors{
|
||||
left: parent.left
|
||||
leftMargin: 20
|
||||
top: layout_slider_bar.bottom
|
||||
topMargin: 10
|
||||
right: parent.right
|
||||
rightMargin: 20
|
||||
}
|
||||
spacing: 5
|
||||
Item{
|
||||
width: parent.width
|
||||
height: text_box_color.height
|
||||
FluText{
|
||||
text:"编辑颜色"
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left:parent.left
|
||||
}
|
||||
}
|
||||
FluTextBox{
|
||||
id:text_box_color
|
||||
width: 136
|
||||
validator: RegularExpressionValidator {
|
||||
regularExpression: /^[0-9A-F]{8}$/
|
||||
}
|
||||
anchors{
|
||||
right: parent.right
|
||||
}
|
||||
leftPadding: 20
|
||||
FluText{
|
||||
text:"#"
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
leftMargin: 5
|
||||
}
|
||||
}
|
||||
onTextEdited: {
|
||||
if(text!==""){
|
||||
var colorString = text_box_color.text.padStart(8,"0")
|
||||
var c = Qt.rgba(
|
||||
parseInt(colorString.substring(2, 4), 16) / 255,
|
||||
parseInt(colorString.substring(4, 6), 16) / 255,
|
||||
parseInt(colorString.substring(6, 8), 16) / 255,
|
||||
parseInt(colorString.substring(0, 2), 16) / 255)
|
||||
layout_color_hue.colorValue = c
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Row{
|
||||
spacing: 10
|
||||
FluTextBox{
|
||||
id:text_box_r
|
||||
width: 120
|
||||
validator: RegularExpressionValidator {
|
||||
regularExpression: /^(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)$/
|
||||
}
|
||||
onTextEdited: {
|
||||
if(text!==""){
|
||||
layout_color_hue.updateColor()
|
||||
}
|
||||
}
|
||||
}
|
||||
FluText{
|
||||
text:"Red"
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
Row{
|
||||
spacing: 10
|
||||
FluTextBox{
|
||||
id:text_box_g
|
||||
width: 120
|
||||
validator: RegularExpressionValidator {
|
||||
regularExpression: /^(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)$/
|
||||
}
|
||||
onTextEdited: {
|
||||
if(text!==""){
|
||||
layout_color_hue.updateColor()
|
||||
}
|
||||
}
|
||||
}
|
||||
FluText{
|
||||
text:"Green"
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
Row{
|
||||
spacing: 10
|
||||
FluTextBox{
|
||||
id:text_box_b
|
||||
width: 120
|
||||
validator: RegularExpressionValidator {
|
||||
regularExpression: /^(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)$/
|
||||
}
|
||||
onTextEdited: {
|
||||
if(text!==""){
|
||||
layout_color_hue.updateColor()
|
||||
}
|
||||
}
|
||||
}
|
||||
FluText{
|
||||
text:"Blue"
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
Row{
|
||||
spacing: 10
|
||||
FluTextBox{
|
||||
id:text_box_a
|
||||
width: 120
|
||||
validator: RegularExpressionValidator {
|
||||
regularExpression: /^(100|[1-9]?\d)$/
|
||||
}
|
||||
FluText{
|
||||
id:text_opacity
|
||||
text:"%"
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
x:Math.min(text_box_a.implicitWidth,text_box_a.width)-38
|
||||
}
|
||||
onTextEdited: {
|
||||
if(text!==""){
|
||||
opacityCursor.x = Number(text)/100 * (layout_opacity.width-12)
|
||||
}
|
||||
}
|
||||
}
|
||||
FluText{
|
||||
text:"Opacity"
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
function showPopup() {
|
||||
var pos = control.mapToItem(null, 0, 0)
|
||||
if(d.window.height>pos.y+control.height+container.height){
|
||||
popup.y = control.height
|
||||
} else if(pos.y>container.height){
|
||||
popup.y = -container.height
|
||||
} else {
|
||||
popup.y = d.window.height-(pos.y+container.height)
|
||||
}
|
||||
popup.x = -(popup.width-control.width)/2
|
||||
popup.open()
|
||||
}
|
||||
}
|
||||
function setColor(color){
|
||||
container.setColor(color)
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,24 +0,0 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
import "ColorPicker"
|
||||
|
||||
Item {
|
||||
id:control
|
||||
property alias colorValue: color_picker.colorValue
|
||||
property alias enableAlphaChannel: color_picker.enableAlphaChannel
|
||||
property int radius: 5
|
||||
width: color_picker.width+10
|
||||
height: color_picker.height
|
||||
FluArea{
|
||||
anchors.fill: parent
|
||||
radius: control.radius
|
||||
ColorPicker{
|
||||
id:color_picker
|
||||
}
|
||||
}
|
||||
function setColor(color) {
|
||||
color_picker.setColor(color)
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@ Item {
|
||||
height: d.isVertical ? parent.height : spacing*2+size
|
||||
|
||||
FluRectangle{
|
||||
color: FluTheme.dark ? Qt.rgba(80/255,80/255,80/255,1) : Qt.rgba(210/255,210/255,210/255,1)
|
||||
color: FluTheme.dividerColor
|
||||
width: d.isVertical ? size : parent.width
|
||||
height: d.isVertical ? parent.height : size
|
||||
anchors.centerIn: parent
|
||||
|
||||
@ -46,8 +46,10 @@ FluObject {
|
||||
Component{
|
||||
id:screenlayoutComponent
|
||||
Column{
|
||||
parent: Overlay.overlay
|
||||
z:999
|
||||
spacing: 20
|
||||
width: parent.width
|
||||
width: root.width
|
||||
move: Transition {
|
||||
NumberAnimation {
|
||||
properties: "y"
|
||||
|
||||
@ -20,6 +20,7 @@ Popup {
|
||||
to:1
|
||||
}
|
||||
}
|
||||
height:Math.min(implicitHeight,parent.height)
|
||||
exit:Transition {
|
||||
NumberAnimation {
|
||||
property: "opacity"
|
||||
|
||||
@ -174,12 +174,13 @@ Item {
|
||||
}
|
||||
function updatePosition(pos){
|
||||
var idx = tab_nav.indexAt(pos.x+tab_nav.contentX+1, pos.y)
|
||||
var firstIdx = tab_nav.indexAt(tab_nav.contentX+1, pos.y)
|
||||
var lastIdx = tab_nav.indexAt(tab_nav.width+tab_nav.contentX-1, pos.y)
|
||||
if(lastIdx === -1){
|
||||
lastIdx = tab_nav.count-1
|
||||
if(idx<0){
|
||||
return
|
||||
}
|
||||
if (idx!==-1 && idx >= firstIdx && idx <= lastIdx && d.dragIndex !== idx) {
|
||||
if(idx>=tab_nav.count){
|
||||
return
|
||||
}
|
||||
if (d.dragIndex !== idx) {
|
||||
tab_model.move(d.dragIndex, idx, 1)
|
||||
d.dragIndex = idx;
|
||||
}
|
||||
|
||||
@ -99,7 +99,7 @@ TextField{
|
||||
}
|
||||
contentDescription:"Clean"
|
||||
onClicked:{
|
||||
control.text = ""
|
||||
control.clear()
|
||||
}
|
||||
}
|
||||
FluIcon{
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
#ifndef SINGLETON_H
|
||||
#define SINGLETON_H
|
||||
|
||||
#include <QMutex>
|
||||
|
||||
/**
|
||||
* @brief The Singleton class
|
||||
*/
|
||||
@ -10,19 +8,11 @@ template <typename T>
|
||||
class Singleton {
|
||||
public:
|
||||
static T* getInstance();
|
||||
|
||||
private:
|
||||
Q_DISABLE_COPY_MOVE(Singleton)
|
||||
};
|
||||
|
||||
template <typename T>
|
||||
T* Singleton<T>::getInstance() {
|
||||
static QMutex mutex;
|
||||
QMutexLocker locker(&mutex);
|
||||
static T* instance = nullptr;
|
||||
if (instance == nullptr) {
|
||||
instance = new T();
|
||||
}
|
||||
static T* instance = new T();
|
||||
return instance;
|
||||
}
|
||||
|
||||
@ -34,10 +24,4 @@ private: \
|
||||
return Singleton<Class>::getInstance(); \
|
||||
}
|
||||
|
||||
#define HIDE_CONSTRUCTOR(Class) \
|
||||
private: \
|
||||
Class() = default; \
|
||||
Class(const Class& other) = delete; \
|
||||
Q_DISABLE_COPY_MOVE(Class);
|
||||
|
||||
#endif // SINGLETON_H
|
||||
|
||||
Loading…
Reference in New Issue
Block a user