mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2024-10-31 00:07:36 +08:00
update
This commit is contained in:
zhuzihcu
parent
036450f0a3
commit
37ae17d92d
@ -17,7 +17,7 @@ FluScrollablePage{
|
||||
Layout.leftMargin: 10
|
||||
}
|
||||
FluSlider{
|
||||
orientation:FluSlider.Vertical
|
||||
vertical:true
|
||||
Layout.topMargin: 20
|
||||
Layout.leftMargin: 10
|
||||
Layout.bottomMargin: 20
|
||||
|
||||
@ -11,6 +11,8 @@ FluScrollablePage{
|
||||
rightPadding:10
|
||||
bottomPadding:20
|
||||
|
||||
property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
|
||||
|
||||
Component{
|
||||
id:com_page
|
||||
Rectangle{
|
||||
@ -19,26 +21,93 @@ FluScrollablePage{
|
||||
}
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
var colors = [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
|
||||
for(var i =0;i<colors.length;i++){
|
||||
tab_view.appendTab("","Document "+i,com_page,colors[i].dark)
|
||||
function newTab(){
|
||||
tab_view.appendTab("qrc:/res/image/favicon.ico","Document "+tab_view.count(),com_page,colors[Math.floor(Math.random() * 8)].dark)
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
newTab()
|
||||
newTab()
|
||||
newTab()
|
||||
}
|
||||
|
||||
FluArea{
|
||||
width: parent.width
|
||||
Layout.topMargin: 20
|
||||
height: 50
|
||||
paddings: 10
|
||||
RowLayout{
|
||||
spacing: 14
|
||||
FluDropDownButton{
|
||||
id:btn_tab_width_behavior
|
||||
Layout.preferredWidth: 140
|
||||
text:"Equal"
|
||||
items:[
|
||||
FluMenuItem{
|
||||
text:"Equal"
|
||||
onClicked: {
|
||||
btn_tab_width_behavior.text = text
|
||||
tab_view.tabWidthBehavior = FluTabView.Equal
|
||||
}
|
||||
},
|
||||
FluMenuItem{
|
||||
text:"SizeToContent"
|
||||
onClicked: {
|
||||
btn_tab_width_behavior.text = text
|
||||
tab_view.tabWidthBehavior = FluTabView.SizeToContent
|
||||
}
|
||||
},
|
||||
FluMenuItem{
|
||||
text:"Compact"
|
||||
onClicked: {
|
||||
btn_tab_width_behavior.text = text
|
||||
tab_view.tabWidthBehavior = FluTabView.Compact
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
FluDropDownButton{
|
||||
id:btn_close_button_visibility
|
||||
text:"Always"
|
||||
Layout.preferredWidth: 120
|
||||
items:[
|
||||
FluMenuItem{
|
||||
text:"Nerver"
|
||||
onClicked: {
|
||||
btn_close_button_visibility.text = text
|
||||
tab_view.closeButtonVisibility = FluTabView.Nerver
|
||||
}
|
||||
},
|
||||
FluMenuItem{
|
||||
text:"Always"
|
||||
onClicked: {
|
||||
btn_close_button_visibility.text = text
|
||||
tab_view.closeButtonVisibility = FluTabView.Always
|
||||
}
|
||||
},
|
||||
FluMenuItem{
|
||||
text:"OnHover"
|
||||
onClicked: {
|
||||
btn_close_button_visibility.text = text
|
||||
tab_view.closeButtonVisibility = FluTabView.OnHover
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluArea{
|
||||
width: parent.width
|
||||
Layout.topMargin: 5
|
||||
height: 400
|
||||
paddings: 10
|
||||
|
||||
|
||||
FluTabView{
|
||||
id:tab_view
|
||||
onNewPressed:{
|
||||
newTab()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -50,7 +50,7 @@ Rectangle {
|
||||
FluIcon{
|
||||
iconSource: FluentIcons.Calendar
|
||||
iconSize: 14
|
||||
color: text_date.color
|
||||
iconColor: text_date.color
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
right: parent.right
|
||||
|
||||
@ -83,7 +83,7 @@ Button {
|
||||
iconSource: FluentIcons.AcceptMedium
|
||||
iconSize: 15
|
||||
visible: selected
|
||||
color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
|
||||
iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
|
||||
Behavior on visible {
|
||||
NumberAnimation{
|
||||
duration: 150
|
||||
|
||||
@ -44,7 +44,7 @@ Button {
|
||||
rightMargin: 10
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
color:title.color
|
||||
iconColor:title.color
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -178,7 +178,7 @@ FluObject {
|
||||
return FluentIcons.FA_info_circle
|
||||
}
|
||||
iconSize:20
|
||||
color: {
|
||||
iconColor: {
|
||||
if(FluTheme.dark){
|
||||
switch(_super.type){
|
||||
case mcontrol.const_success: return Qt.rgba(108/255,203/255,95/255,1);
|
||||
|
||||
@ -14,6 +14,18 @@ Item{
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
onWidthChanged: {
|
||||
canvas.requestPaint()
|
||||
}
|
||||
|
||||
onHeightChanged: {
|
||||
canvas.requestPaint()
|
||||
}
|
||||
|
||||
onRadiusChanged: {
|
||||
canvas.requestPaint()
|
||||
}
|
||||
|
||||
Canvas {
|
||||
id: canvas
|
||||
anchors.fill: parent
|
||||
|
||||
@ -83,7 +83,7 @@ Rectangle {
|
||||
size:parent.width-20
|
||||
y:20
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
enableTip:false
|
||||
tipEnabled:false
|
||||
onPressed: {
|
||||
mediaplayer.autoSeek = false
|
||||
mediaplayer.pause()
|
||||
|
||||
@ -4,17 +4,12 @@ import QtGraphicalEffects 1.15
|
||||
|
||||
Item{
|
||||
|
||||
enum Orientation {
|
||||
Horizontal,
|
||||
Vertical
|
||||
}
|
||||
property int size: 180
|
||||
property int dotSize: 24
|
||||
property int value: 50
|
||||
property int maxValue: 100
|
||||
property int orientation: FluSlider.Horizontal
|
||||
property bool isHorizontal: orientation === FluSlider.Horizontal
|
||||
property bool enableTip : true
|
||||
property bool vertical: false
|
||||
property bool tipEnabled : true
|
||||
property var onLineClickFunc
|
||||
signal pressed
|
||||
signal released
|
||||
@ -22,7 +17,7 @@ Item{
|
||||
id:root
|
||||
height: control.height
|
||||
width: control.width
|
||||
rotation: isHorizontal ? 0 : 180
|
||||
rotation: vertical ? 180 : 0
|
||||
|
||||
Component.onCompleted: {
|
||||
seek(value)
|
||||
@ -31,16 +26,16 @@ Item{
|
||||
MouseArea{
|
||||
id:mouse_line
|
||||
anchors.centerIn: control
|
||||
width: isHorizontal ? control.width : 10
|
||||
height: isHorizontal ? 10 : control.height
|
||||
width: vertical ? 10 : control.width
|
||||
height: vertical ? control.height : 10
|
||||
hoverEnabled: true
|
||||
onClicked:
|
||||
(mouse) => {
|
||||
var val;
|
||||
if(isHorizontal){
|
||||
val = mouse.x*maxValue/control.width
|
||||
}else{
|
||||
if(vertical){
|
||||
val = mouse.y*maxValue/control.height
|
||||
}else{
|
||||
val = mouse.x*maxValue/control.width
|
||||
}
|
||||
if(onLineClickFunc){
|
||||
onLineClickFunc(val)
|
||||
@ -52,20 +47,18 @@ Item{
|
||||
|
||||
Rectangle {
|
||||
id: control
|
||||
width: isHorizontal ? size : 4
|
||||
height: isHorizontal ? 4 : size
|
||||
width: vertical ? 4 :size
|
||||
height: vertical ? size : 4
|
||||
radius: 2
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
color:FluTheme.dark ? Qt.rgba(162/255,162/255,162/255,1) : Qt.rgba(138/255,138/255,138/255,1)
|
||||
Rectangle{
|
||||
id:rect
|
||||
radius: 2.5
|
||||
width: isHorizontal ? control.width*(value/maxValue) : 5
|
||||
height: isHorizontal ? 5 : control.height*(value/maxValue)
|
||||
width: vertical ? 5 : control.width*(value/maxValue)
|
||||
height: vertical ? control.height*(value/maxValue) : 5
|
||||
color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
Rectangle{
|
||||
@ -76,8 +69,8 @@ Item{
|
||||
radius: dotSize/2
|
||||
}
|
||||
radius: dotSize/2
|
||||
anchors.verticalCenter: isHorizontal ? parent.verticalCenter : undefined
|
||||
anchors.horizontalCenter: isHorizontal ? undefined :parent.horizontalCenter
|
||||
anchors.verticalCenter: vertical ? undefined : parent.verticalCenter
|
||||
anchors.horizontalCenter: vertical ? parent.horizontalCenter : undefined
|
||||
color:FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
|
||||
Rectangle{
|
||||
width: dotSize/2
|
||||
@ -85,7 +78,12 @@ Item{
|
||||
radius: dotSize/4
|
||||
color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
|
||||
anchors.centerIn: parent
|
||||
scale: control_mouse.containsMouse || mouse_line.containsMouse ? 1.3 : 1
|
||||
scale: {
|
||||
if(control_mouse.pressed){
|
||||
return 0.9
|
||||
}
|
||||
return control_mouse.containsMouse || mouse_line.containsMouse ? 1.3 : 1
|
||||
}
|
||||
Behavior on scale {
|
||||
NumberAnimation{
|
||||
duration: 150
|
||||
@ -98,14 +96,14 @@ Item{
|
||||
hoverEnabled: true
|
||||
drag {
|
||||
target: dot
|
||||
axis: isHorizontal ? Drag.XAxis : Drag.YAxis
|
||||
minimumX: isHorizontal ? -dotSize/2 : 0
|
||||
maximumX: isHorizontal ? (control.width - dotSize/2) : 0
|
||||
minimumY: isHorizontal ? 0 : -dotSize/2
|
||||
maximumY: isHorizontal ? 0 : (control.height - dotSize/2)
|
||||
axis: vertical ? Drag.YAxis : Drag.XAxis
|
||||
minimumX: vertical ? 0 : -dotSize/2
|
||||
maximumX: vertical ? 0 : (control.width - dotSize/2)
|
||||
minimumY: vertical ? -dotSize/2 : 0
|
||||
maximumY: vertical ? (control.height - dotSize/2) : 0
|
||||
}
|
||||
onPressed: {
|
||||
if(enableTip){
|
||||
if(tipEnabled){
|
||||
tool_tip.visible = true
|
||||
}
|
||||
root.pressed()
|
||||
@ -120,23 +118,22 @@ Item{
|
||||
FluTooltip{
|
||||
id:tool_tip
|
||||
text:String(root.value)
|
||||
y: isHorizontal ? -40 : 32
|
||||
y: vertical ? 32 : -40
|
||||
}
|
||||
}
|
||||
|
||||
function seek(val){
|
||||
if(isHorizontal){
|
||||
dot.x =val/maxValue*control.width - dotSize/2
|
||||
root.value = Qt.binding(function(){
|
||||
return (dot.x+dotSize/2)/control.width*maxValue
|
||||
})
|
||||
}else{
|
||||
if(vertical){
|
||||
dot.y =val/maxValue*control.height - dotSize/2
|
||||
root.value = Qt.binding(function(){
|
||||
return (dot.y+dotSize/2)/control.height*maxValue
|
||||
})
|
||||
}else{
|
||||
dot.x =val/maxValue*control.width - dotSize/2
|
||||
root.value = Qt.binding(function(){
|
||||
return (dot.x+dotSize/2)/control.width*maxValue
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Controls 2.15
|
||||
import QtQuick.Layouts 1.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Item {
|
||||
@ -14,6 +15,11 @@ Item {
|
||||
implicitHeight: height
|
||||
implicitWidth: width
|
||||
|
||||
MouseArea{
|
||||
anchors.fill: parent
|
||||
preventStealing: true
|
||||
}
|
||||
|
||||
enum TabWidthBehavior {
|
||||
Equal,
|
||||
SizeToContent,
|
||||
@ -29,23 +35,42 @@ Item {
|
||||
property int tabWidthBehavior : FluTabView.Equal
|
||||
property int closeButtonVisibility : FluTabView.Always
|
||||
property int itemWidth: 146
|
||||
signal newPressed
|
||||
|
||||
QtObject {
|
||||
id: d
|
||||
property int dragIndex: -1
|
||||
property bool dragBehavior: false
|
||||
property bool itemPress: false
|
||||
property int maxEqualWidth: 240
|
||||
}
|
||||
|
||||
ListModel{
|
||||
id:tab_model
|
||||
}
|
||||
|
||||
FluIconButton{
|
||||
id:btn_new
|
||||
width: 34
|
||||
height: 34
|
||||
x:Math.min(tab_nav.contentWidth,tab_nav.width)
|
||||
anchors.top: parent.top
|
||||
iconSource: FluentIcons.Add
|
||||
onClicked: {
|
||||
newPressed()
|
||||
}
|
||||
}
|
||||
|
||||
ListView{
|
||||
id:tab_nav
|
||||
height: 34
|
||||
orientation: ListView.Horizontal
|
||||
width: parent.width
|
||||
anchors{
|
||||
top: parent.top
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
rightMargin: 34
|
||||
}
|
||||
interactive: false
|
||||
model: tab_model
|
||||
move: Transition {
|
||||
@ -56,20 +81,20 @@ Item {
|
||||
NumberAnimation { properties: "x"; duration: 300; easing.type: Easing.OutCubic}
|
||||
NumberAnimation { properties: "y"; duration: 100; easing.type: Easing.OutCubic }
|
||||
}
|
||||
clip: false
|
||||
clip: true
|
||||
ScrollBar.horizontal: ScrollBar{
|
||||
id: scroll_nav
|
||||
policy: ScrollBar.AlwaysOff
|
||||
}
|
||||
delegate: Item{
|
||||
|
||||
width: itemWidth
|
||||
width: item_layout.width
|
||||
height: item_container.height
|
||||
z: item_mouse_drag.pressed ? 1000 : 1
|
||||
|
||||
Item{
|
||||
id:item_layout
|
||||
width: itemWidth
|
||||
width: item_container.width
|
||||
height: item_container.height
|
||||
|
||||
FluItem{
|
||||
@ -78,8 +103,19 @@ Item {
|
||||
property real timestamp: new Date().getTime()
|
||||
|
||||
height: tab_nav.height
|
||||
width: itemWidth
|
||||
radius: [5,5,0,0]
|
||||
width: {
|
||||
if(tabWidthBehavior === FluTabView.Equal){
|
||||
return Math.max(Math.min(d.maxEqualWidth,tab_nav.width/tab_nav.count),41 + item_btn_close.width)
|
||||
}
|
||||
if(tabWidthBehavior === FluTabView.SizeToContent){
|
||||
return itemWidth
|
||||
}
|
||||
if(tabWidthBehavior === FluTabView.Compact){
|
||||
return item_mouse_hove.containsMouse || item_btn_close.hovered || tab_nav.currentIndex === index ? itemWidth : 41 + item_btn_close.width
|
||||
}
|
||||
return Math.max(Math.min(d.maxEqualWidth,tab_nav.width/tab_nav.count),41 + item_btn_close.width)
|
||||
}
|
||||
radius: [6,6,0,0]
|
||||
Behavior on x { enabled: d.dragBehavior; NumberAnimation { duration: 200 } }
|
||||
Behavior on y { enabled: d.dragBehavior; NumberAnimation { duration: 200 } }
|
||||
|
||||
@ -198,19 +234,51 @@ Item {
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout{
|
||||
spacing: 0
|
||||
height: parent.height
|
||||
Image{
|
||||
source:model.icon
|
||||
Layout.leftMargin: 10
|
||||
Layout.preferredWidth: 14
|
||||
Layout.preferredHeight: 14
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
FluText{
|
||||
id:item_text
|
||||
anchors.centerIn: parent
|
||||
text: model.text
|
||||
rightPadding: 24
|
||||
Layout.leftMargin: 10
|
||||
visible: {
|
||||
if(tabWidthBehavior === FluTabView.Equal){
|
||||
return true
|
||||
}
|
||||
if(tabWidthBehavior === FluTabView.SizeToContent){
|
||||
return true
|
||||
}
|
||||
if(tabWidthBehavior === FluTabView.Compact){
|
||||
return item_mouse_hove.containsMouse || item_btn_close.hovered || tab_nav.currentIndex === index
|
||||
}
|
||||
return false
|
||||
}
|
||||
Layout.preferredWidth: visible?item_container.width - 41 - item_btn_close.width:0
|
||||
elide: Text.ElideRight
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
}
|
||||
|
||||
FluIconButton{
|
||||
id:item_btn_close
|
||||
iconSource: FluentIcons.ChromeClose
|
||||
iconSize: 10
|
||||
width: 24
|
||||
width: visible ? 24 : 0
|
||||
height: 24
|
||||
visible: {
|
||||
if(closeButtonVisibility === FluTabView.Nerver)
|
||||
return false
|
||||
if(closeButtonVisibility === FluTabView.OnHover)
|
||||
return item_mouse_hove.containsMouse || item_btn_close.hovered
|
||||
return true
|
||||
}
|
||||
anchors{
|
||||
right: parent.right
|
||||
rightMargin: 5
|
||||
@ -220,6 +288,15 @@ Item {
|
||||
tab_model.remove(index)
|
||||
}
|
||||
}
|
||||
|
||||
FluDivider{
|
||||
width: 1
|
||||
height: 16
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
right: parent.right
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -260,4 +337,8 @@ Item {
|
||||
tab_model.append(list)
|
||||
}
|
||||
|
||||
function count(){
|
||||
return tab_nav.count
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -31,7 +31,6 @@ Button {
|
||||
height: control.height
|
||||
radius: height / 2
|
||||
smooth: true
|
||||
antialiasing: true
|
||||
FluFocusRectangle{
|
||||
visible: control.visualFocus
|
||||
radius: 20
|
||||
@ -58,8 +57,13 @@ Button {
|
||||
border.width: 1
|
||||
border.color: selected ? Qt.lighter(FluTheme.primaryColor.dark,1.2) : "#666666"
|
||||
Rectangle {
|
||||
x: selected ? control_backgound.width - width - 4 : 4
|
||||
width: pressed ? control.height - 6 : control.height - 8
|
||||
width: pressed ? control.height - 4 : control.height - 8
|
||||
anchors{
|
||||
left: selected ? undefined : parent.left
|
||||
leftMargin: selected ? control_backgound.width - width - 4 : 4
|
||||
right: selected ? parent.right : undefined
|
||||
rightMargin: selected ? 4 : control_backgound.width - width - 4
|
||||
}
|
||||
height: control.height - 8
|
||||
radius: width / 2
|
||||
antialiasing: true
|
||||
@ -67,7 +71,10 @@ Button {
|
||||
smooth: true
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
color: selected ? "#FFFFFF" : "#666666"
|
||||
Behavior on x {
|
||||
Behavior on anchors.leftMargin {
|
||||
NumberAnimation { duration: 150 }
|
||||
}
|
||||
Behavior on anchors.rightMargin {
|
||||
NumberAnimation { duration: 150 }
|
||||
}
|
||||
Behavior on width {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user