update
zhuzihcu
parent
d3d6e64af1
commit
f4e5316987
|
|
@ -8,26 +8,29 @@ FluScrollablePage{
|
||||||
|
|
||||||
title:"CalendarPicker"
|
title:"CalendarPicker"
|
||||||
|
|
||||||
|
FluArea{
|
||||||
|
width: parent.width
|
||||||
|
Layout.topMargin: 20
|
||||||
|
height: 350
|
||||||
|
paddings: 1
|
||||||
|
FluCalendarView{
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
FluArea{
|
FluArea{
|
||||||
width: parent.width
|
width: parent.width
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
height: 80
|
height: 80
|
||||||
paddings: 10
|
paddings: 10
|
||||||
|
|
||||||
ColumnLayout{
|
ColumnLayout{
|
||||||
|
|
||||||
anchors{
|
anchors{
|
||||||
verticalCenter: parent.verticalCenter
|
verticalCenter: parent.verticalCenter
|
||||||
left: parent.left
|
left: parent.left
|
||||||
}
|
}
|
||||||
|
|
||||||
FluCalendarPicker{
|
FluCalendarPicker{
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,36 +0,0 @@
|
||||||
import QtQuick 2.15
|
|
||||||
import QtQuick.Layouts 1.15
|
|
||||||
import QtQuick.Window 2.15
|
|
||||||
import QtQuick.Controls 2.15
|
|
||||||
import QtGraphicalEffects 1.15
|
|
||||||
import FluentUI 1.0
|
|
||||||
|
|
||||||
FluScrollablePage{
|
|
||||||
|
|
||||||
title:"Carousel"
|
|
||||||
|
|
||||||
FluArea{
|
|
||||||
width: parent.width
|
|
||||||
height: 370
|
|
||||||
paddings: 10
|
|
||||||
Layout.topMargin: 20
|
|
||||||
Column{
|
|
||||||
spacing: 15
|
|
||||||
anchors{
|
|
||||||
verticalCenter: parent.verticalCenter
|
|
||||||
left:parent.left
|
|
||||||
}
|
|
||||||
FluText{
|
|
||||||
text:"轮播图，支持无限轮播，无限滑动，用ListView实现的组件"
|
|
||||||
}
|
|
||||||
FluCarousel{
|
|
||||||
id:carousel
|
|
||||||
Layout.topMargin: 20
|
|
||||||
Layout.leftMargin: 5
|
|
||||||
Component.onCompleted: {
|
|
||||||
carousel.setData([{url:"qrc:/res/image/banner_1.jpg"},{url:"qrc:/res/image/banner_2.jpg"},{url:"qrc:/res/image/banner_3.jpg"}])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
import QtQuick 2.15
|
||||||
|
import QtQuick.Controls 2.15
|
||||||
|
import QtQuick.Layouts 1.15
|
||||||
|
import QtQuick.Window 2.15
|
||||||
|
import QtGraphicalEffects 1.15
|
||||||
|
import FluentUI 1.0
|
||||||
|
|
||||||
|
FluScrollablePage{
|
||||||
|
|
||||||
|
title:"ColorPicker"
|
||||||
|
|
||||||
|
FluArea{
|
||||||
|
width: parent.width
|
||||||
|
height: 280
|
||||||
|
Layout.topMargin: 20
|
||||||
|
paddings: 10
|
||||||
|
ColumnLayout{
|
||||||
|
anchors{
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
left:parent.left
|
||||||
|
}
|
||||||
|
FluText{
|
||||||
|
text:"此颜色组件是Github上大佬封装的"
|
||||||
|
}
|
||||||
|
FluTextButton{
|
||||||
|
leftPadding: 0
|
||||||
|
rightPadding: 0
|
||||||
|
text:"https://github.com/rshest/qml-colorpicker"
|
||||||
|
onClicked: {
|
||||||
|
Qt.openUrlExternally(text)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
FluColorView{
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
FluArea{
|
||||||
|
width: parent.width
|
||||||
|
Layout.topMargin: 20
|
||||||
|
height: 60
|
||||||
|
paddings: 10
|
||||||
|
|
||||||
|
RowLayout{
|
||||||
|
FluText{
|
||||||
|
text:"点击选择颜色->"
|
||||||
|
Layout.alignment: Qt.AlignVCenter
|
||||||
|
}
|
||||||
|
FluColorPicker{
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -35,7 +35,7 @@ FluWindow {
|
||||||
fontStyle: FluText.Title
|
fontStyle: FluText.Title
|
||||||
}
|
}
|
||||||
FluText{
|
FluText{
|
||||||
text:"v1.1.2"
|
text:"v1.1.3"
|
||||||
fontStyle: FluText.Body
|
fontStyle: FluText.Body
|
||||||
Layout.alignment: Qt.AlignBottom
|
Layout.alignment: Qt.AlignBottom
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -79,6 +79,13 @@ FluWindow {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
FluPaneItem{
|
||||||
|
title:"ColorPicker"
|
||||||
|
onTap:{
|
||||||
|
nav_view.push("qrc:/T_ColorPicker.qml")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
FluPaneItemHeader{
|
FluPaneItemHeader{
|
||||||
title:"Surface"
|
title:"Surface"
|
||||||
}
|
}
|
||||||
|
|
@ -97,13 +104,6 @@ FluWindow {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
FluPaneItem{
|
|
||||||
title:"Calendar"
|
|
||||||
onTap:{
|
|
||||||
nav_view.push("qrc:/T_Calendar.qml")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
FluPaneItem{
|
FluPaneItem{
|
||||||
title:"Badge"
|
title:"Badge"
|
||||||
onTap:{
|
onTap:{
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,6 @@
|
||||||
<file>T_DatePicker.qml</file>
|
<file>T_DatePicker.qml</file>
|
||||||
<file>T_MultiWindow.qml</file>
|
<file>T_MultiWindow.qml</file>
|
||||||
<file>T_Menu.qml</file>
|
<file>T_Menu.qml</file>
|
||||||
<file>T_Carousel.qml</file>
|
|
||||||
<file>res/image/banner_1.jpg</file>
|
<file>res/image/banner_1.jpg</file>
|
||||||
<file>res/image/banner_2.jpg</file>
|
<file>res/image/banner_2.jpg</file>
|
||||||
<file>res/image/banner_3.jpg</file>
|
<file>res/image/banner_3.jpg</file>
|
||||||
|
|
@ -44,5 +43,6 @@
|
||||||
<file>T_Badge.qml</file>
|
<file>T_Badge.qml</file>
|
||||||
<file>T_Calendar.qml</file>
|
<file>T_Calendar.qml</file>
|
||||||
<file>T_CalendarPicker.qml</file>
|
<file>T_CalendarPicker.qml</file>
|
||||||
|
<file>T_ColorPicker.qml</file>
|
||||||
</qresource>
|
</qresource>
|
||||||
</RCC>
|
</RCC>
|
||||||
|
|
|
||||||
|
|
@ -47,6 +47,8 @@ void Fluent::registerTypes(const char *uri){
|
||||||
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluCalendarView.qml"),uri,major,minor,"FluCalendarView");
|
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluCalendarView.qml"),uri,major,minor,"FluCalendarView");
|
||||||
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluDatePicker.qml"),uri,major,minor,"FluDatePicker");
|
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluDatePicker.qml"),uri,major,minor,"FluDatePicker");
|
||||||
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTimePicker.qml"),uri,major,minor,"FluTimePicker");
|
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTimePicker.qml"),uri,major,minor,"FluTimePicker");
|
||||||
|
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluColorView.qml"),uri,major,minor,"FluColorView");
|
||||||
|
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluColorPicker.qml"),uri,major,minor,"FluColorPicker");
|
||||||
|
|
||||||
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluCarousel.qml"),uri,major,minor,"FluCarousel");
|
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluCarousel.qml"),uri,major,minor,"FluCarousel");
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -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)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -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)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -44,7 +44,6 @@ Item {
|
||||||
return {type:3,date:date,name:"",isDecade:isDecade}
|
return {type:3,date:date,name:"",isDecade:isDecade}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function updateDecade(date){
|
function updateDecade(date){
|
||||||
list_model.clear()
|
list_model.clear()
|
||||||
var year = date.getFullYear()
|
var year = date.getFullYear()
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
import QtQuick 2.15
|
||||||
|
import QtQuick.Controls 2.15
|
||||||
|
import QtQuick.Layouts 1.15
|
||||||
|
import QtQuick.Window 2.15
|
||||||
|
import FluentUI 1.0
|
||||||
|
|
||||||
|
|
||||||
|
Button{
|
||||||
|
id:control
|
||||||
|
width: 36
|
||||||
|
height: 36
|
||||||
|
implicitWidth: width
|
||||||
|
implicitHeight: height
|
||||||
|
background:
|
||||||
|
Rectangle{
|
||||||
|
id:layout_color
|
||||||
|
radius: 5
|
||||||
|
color: container.colorValue
|
||||||
|
border.color: {
|
||||||
|
if(hovered)
|
||||||
|
return FluTheme.primaryColor.light
|
||||||
|
return FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
|
||||||
|
}
|
||||||
|
border.width: 1
|
||||||
|
}
|
||||||
|
contentItem: Item{}
|
||||||
|
onClicked: {
|
||||||
|
popup.showPopup()
|
||||||
|
}
|
||||||
|
Popup{
|
||||||
|
id:popup
|
||||||
|
height: container.height
|
||||||
|
width: container.width
|
||||||
|
background: FluColorView{
|
||||||
|
id:container
|
||||||
|
}
|
||||||
|
contentItem: Item{}
|
||||||
|
function showPopup() {
|
||||||
|
var pos = control.mapToItem(null, 0, 0)
|
||||||
|
if(window.height>pos.y+control.height+popup.height){
|
||||||
|
popup.y = control.height
|
||||||
|
} else if(pos.y>popup.height){
|
||||||
|
popup.y = -popup.height
|
||||||
|
} else {
|
||||||
|
popup.y = window.height-(pos.y+popup.height)
|
||||||
|
}
|
||||||
|
popup.x = -(popup.width-control.width)/2
|
||||||
|
popup.open()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
import QtQuick 2.15
|
||||||
|
import "../colorpicker"
|
||||||
|
|
||||||
|
Item {
|
||||||
|
|
||||||
|
width: color_picker.width+10
|
||||||
|
height: color_picker.height
|
||||||
|
|
||||||
|
property alias colorValue: color_picker.colorValue
|
||||||
|
|
||||||
|
FluArea{
|
||||||
|
anchors.fill: parent
|
||||||
|
radius: 5
|
||||||
|
|
||||||
|
FluShadow{
|
||||||
|
radius: 5
|
||||||
|
}
|
||||||
|
|
||||||
|
ColorPicker{
|
||||||
|
id:color_picker
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setColor(color) {
|
||||||
|
color_picker.setColor(color)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -49,5 +49,13 @@
|
||||||
<file>controls/FluFocusRectangle.qml</file>
|
<file>controls/FluFocusRectangle.qml</file>
|
||||||
<file>controls/FluCarousel.qml</file>
|
<file>controls/FluCarousel.qml</file>
|
||||||
<file>controls/FluBadge.qml</file>
|
<file>controls/FluBadge.qml</file>
|
||||||
|
<file>controls/FluColorView.qml</file>
|
||||||
|
<file>controls/FluColorPicker.qml</file>
|
||||||
|
<file>colorpicker/ColorPicker.qml</file>
|
||||||
|
<file>colorpicker/content/Checkerboard.qml</file>
|
||||||
|
<file>colorpicker/content/ColorSlider.qml</file>
|
||||||
|
<file>colorpicker/content/NumberBox.qml</file>
|
||||||
|
<file>colorpicker/content/PanelBorder.qml</file>
|
||||||
|
<file>colorpicker/content/SBPicker.qml</file>
|
||||||
</qresource>
|
</qresource>
|
||||||
</RCC>
|
</RCC>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue