diff --git a/example/T_Slider.qml b/example/T_Slider.qml index 642dc29..fcad4ea 100644 --- a/example/T_Slider.qml +++ b/example/T_Slider.qml @@ -17,7 +17,7 @@ FluScrollablePage{ Layout.leftMargin: 10 } FluSlider{ - orientation:FluSlider.Vertical + vertical:true Layout.topMargin: 20 Layout.leftMargin: 10 Layout.bottomMargin: 20 diff --git a/example/T_TabView.qml b/example/T_TabView.qml index ee32fd6..cdceb48 100644 --- a/example/T_TabView.qml +++ b/example/T_TabView.qml @@ -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{ } } + 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: { - var colors = [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green] - for(var i =0;i { 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 + }) } } - } diff --git a/src/controls/FluTabView.qml b/src/controls/FluTabView.qml index c11eaab..2e15cc7 100644 --- a/src/controls/FluTabView.qml +++ b/src/controls/FluTabView.qml @@ -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 { } } - FluText{ - id:item_text - anchors.centerIn: parent - text: model.text - rightPadding: 24 + 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 + text: model.text + 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 + } + } diff --git a/src/controls/FluToggleSwitch.qml b/src/controls/FluToggleSwitch.qml index 7bb357c..2f19c50 100644 --- a/src/controls/FluToggleSwitch.qml +++ b/src/controls/FluToggleSwitch.qml @@ -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 {