wuyize
/
FluentUI
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

main
zhuzihcu 2023-03-27 18:24:35 +08:00
parent a2c23231f2
commit 3a32d66d6a
40 changed files with 562 additions and 269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/windows-mingw.yml vendored
View File

@ -66,7 +66,7 @@ jobs:
- name: package
id: package
env:
archiveName: ${{ env.fileName }}-${{ matrix.qt_ver }}-${{ matrix.qt_arch }}
archiveName: ${{ env.fileName }}-${{ matrix.qt_arch }}-${{ matrix.qt_ver }}
shell: pwsh
run: |
& scripts\windows-mingw-publish.ps1 ${env:archiveName} ${env:targetName}

2
.github/workflows/windows.yml vendored
View File

@ -67,7 +67,7 @@ jobs:
- name: package
id: package
env:
archiveName: ${{ env.fileName }}-${{ matrix.qt_ver }}-${{ matrix.qt_arch }}
archiveName: ${{ env.fileName }}-${{ matrix.qt_arch }}-${{ matrix.qt_ver }}
msvcArch: ${{ matrix.msvc_arch }}
shell: pwsh
run: |

4
example/T_MediaPlayer.qml
View File

@ -30,8 +30,8 @@ FluScrollablePage{
FluMediaPlayer{
id:player
source:"http://mirror.aarnet.edu.au/pub/TED-talks/911Mothers_2010W-480p.mp4"
// source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
// source:"http://mirror.aarnet.edu.au/pub/TED-talks/911Mothers_2010W-480p.mp4"
source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
// source:"http://video.chinanews.com/flv/2019/04/23/400/111773_web.mp4"
}

27
example/T_TabView.qml Normal file
View File

@ -0,0 +1,27 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import FluentUI 1.0
FluScrollablePage{
title:"TabView"
FluArea{
width: parent.width
Layout.topMargin: 20
height: 400
paddings: 10
FluTabView{
}
}
}

4
example/T_Theme.qml
View File

@ -13,10 +13,10 @@ FluScrollablePage{
Layout.topMargin: 20
Repeater{
model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
delegate: Rectangle{
delegate: FluRectangle{
width: 42
height: 42
radius: 4
radius: [4,4,4,4]
color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal
FluIcon {
anchors.centerIn: parent

7
example/page/MainPage.qml
View File

@ -161,6 +161,13 @@ FluWindow {
title:"Navigation"
}
FluPaneItem{
title:"TabView"
onTap:{
nav_view.push("qrc:/T_TabView.qml")
}
}
FluPaneItem{
title:"TreeView"
onTap:{

1
example/qml.qrc
View File

@ -45,5 +45,6 @@
<file>T_ColorPicker.qml</file>
<file>T_Carousel.qml</file>
<file>T_MediaPlayer.qml</file>
<file>T_TabView.qml</file>
</qresource>
</RCC>

1
src/Fluent.cpp
View File

@ -32,6 +32,7 @@ void Fluent::registerTypes(const char *uri){
qmlRegisterType<WindowHelper>(uri,major,minor,"WindowHelper");
qmlRegisterType<FluColorSet>(uri,major,minor,"FluColorSet");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTabView.qml"),uri,major,minor,"FluTabView");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluArea.qml"),uri,major,minor,"FluArea");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluBadge.qml"),uri,major,minor,"FluBadge");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluMediaPlayer.qml"),uri,major,minor,"FluMediaPlayer");

49
src/controls/FluAppBar.qml
View File

@ -1,13 +1,25 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15
import FluentUI 1.0
Rectangle{
id:root
property string title: "标题"
property color textColor: FluTheme.isDark ? "#000000" : "#FFFFFF"
property bool showDark: false
property bool showFps: false
property var window: Window.window
property color borerlessColor : FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
property bool resizable: {
if(window == null){
return false
}
return !(window.minimumHeight === window.maximumHeight && window.maximumWidth === window.minimumWidth)
}
id:root
color: {
if(Window.window == null)
return borerlessColor
@ -15,7 +27,6 @@ Rectangle{
}
visible: FluTheme.isFrameless
height: visible ? 34 : 0
width: {
if(parent==null)
return 200
@ -23,19 +34,7 @@ Rectangle{
}
z: 65535
clip: true
property string title: "标题"
property color textColor: FluTheme.isDark ? "#000000" : "#FFFFFF"
property bool showDark: false
property bool showFps: false
property var window: Window.window
property bool resizable: {
if(window == null){
return false
}
return !(window.minimumHeight === window.maximumHeight && window.maximumWidth === window.minimumWidth)
}
TapHandler {
onTapped: if (tapCount === 2) toggleMaximized()
@ -48,16 +47,6 @@ Rectangle{
onActiveChanged: if (active) { window.startSystemMove(); }
}
function toggleMaximized() {
if(!resizable)
return
if (window.visibility === Window.Maximized) {
window.showNormal();
} else {
window.showMaximized();
}
}
FluText {
text: title
anchors{
@ -149,4 +138,14 @@ Rectangle{
anchors.bottom: parent.bottom;
}
function toggleMaximized() {
if(!resizable)
return
if (window.visibility === Window.Maximized) {
window.showNormal();
} else {
window.showMaximized();
}
}
}

13
src/controls/FluArea.qml
View File

@ -2,12 +2,6 @@
import FluentUI 1.0
Rectangle {
radius: 4
color: FluTheme.isDark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
border.color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
border.width: 1
implicitHeight: height
implicitWidth: width
default property alias content: container.data
property int paddings : 0
@ -16,6 +10,13 @@ Rectangle {
property int topPadding : 0
property int bottomPadding : 0
radius: 4
color: FluTheme.isDark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
border.color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
border.width: 1
implicitHeight: height
implicitWidth: width
Item {
id: container
anchors.fill: parent

1
src/controls/FluBadge.qml
View File

@ -6,7 +6,6 @@ Rectangle{
property bool showZero: true
property int count: 0
id:control
color:Qt.rgba(255/255,77/255,79/255,1)
width: {

3
src/controls/FluCalendarPicker.qml
View File

@ -6,13 +6,12 @@ import FluentUI 1.0
Rectangle {
id:root
property color dividerColor: FluTheme.isDark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1)
property color hoverColor: FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
property color normalColor: FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
property var window : Window.window
id:root
color: {
if(mouse_area.containsMouse){
return hoverColor

187
src/controls/FluCalendarView.qml
View File

@ -4,111 +4,26 @@ import FluentUI 1.0
Item {
id:control
property int displayMode: FluCalendarView.Month
property var date: new Date()
property var currentDate : new Date()
property var toDay: new Date()
signal dateClicked(var date)
width: 280
height: 325
enum DisplayMode {
Month,
Year,
Decade
}
property int displayMode: FluCalendarView.Month
property var date: new Date()
property var currentDate : new Date()
property var toDay: new Date()
signal dateClicked(var date)
id:control
width: 280
height: 325
Component.onCompleted: {
updateMouth(date)
}
function createItemWeek(name){
return {type:0,date:new Date(),name:name,isDecade:false}
}
function createItemDay(date){
return {type:1,date:date,name:"",isDecade:false}
}
function createItemMonth(date){
return {type:2,date:date,name:"",isDecade:false}
}
function createItemYear(date,isDecade){
return {type:3,date:date,name:"",isDecade:isDecade}
}
function updateDecade(date){
list_model.clear()
var year = date.getFullYear()
const decadeStart = Math.floor(year / 10) * 10;
for(var i = decadeStart ; i< decadeStart+10 ; i++){
list_model.append(createItemYear(new Date(i,0,1),true));
}
for(var j = decadeStart+10 ; j< decadeStart+16 ; j++){
list_model.append(createItemYear(new Date(j,0,1),false));
}
title.text = decadeStart+"-"+(decadeStart+10)
}
function updateYear(date){
list_model.clear()
var year = date.getFullYear()
for(var i = 0 ; i< 12 ; i++){
list_model.append(createItemMonth(new Date(year,i)));
}
for(var j = 0 ; j< 4 ; j++){
list_model.append(createItemMonth(new Date(year+1,j)));
}
title.text = year+"年"
}
function updateMouth(date){
list_model.clear()
list_model.append([createItemWeek("一"),createItemWeek("二"),createItemWeek("三"),createItemWeek("四"),createItemWeek("五"),createItemWeek("六"),createItemWeek("日")])
var year = date.getFullYear()
var month = date.getMonth()
var day = date.getDate()
var firstDayOfMonth = new Date(year, month, 1)
var dayOfWeek = firstDayOfMonth.getDay()
var headerSize = (dayOfWeek===0?7:dayOfWeek)-1
if(headerSize!==0){
var lastMonthYear = year;
var lastMonthMonth = month - 1
if (month === 0) {
lastMonthYear = year - 1
lastMonthMonth = 11
}
var lastMonthDays = new Date(lastMonthYear, lastMonthMonth+1, 0).getDate()
for (var i = headerSize-1; i >= 0; i--) {
list_model.append(createItemDay(new Date(lastMonthYear, lastMonthMonth,lastMonthDays-i)))
}
}
const lastDayOfMonth = new Date(year, month+1, 0).getDate()
for (let day = 1; day <= lastDayOfMonth; day++) {
list_model.append(createItemDay(new Date(year, month,day)))
}
var footerSize = 49-list_model.count
var nextMonthYear = year
var nextMonth = month + 1
if (month === 11) {
nextMonthYear = year + 1
nextMonth = 0
}
const nextDayOfMonth = new Date(nextMonthYear, nextMonth+1, 0).getDate()
for (let j = 1; j <= footerSize; j++) {
list_model.append(createItemDay(new Date(nextMonthYear, nextMonth,j)))
}
title.text = year+"年"+(month+1)+"月"
}
Component{
id:com_week
Item{
@ -473,4 +388,86 @@ Item {
}
}
}
function createItemWeek(name){
return {type:0,date:new Date(),name:name,isDecade:false}
}
function createItemDay(date){
return {type:1,date:date,name:"",isDecade:false}
}
function createItemMonth(date){
return {type:2,date:date,name:"",isDecade:false}
}
function createItemYear(date,isDecade){
return {type:3,date:date,name:"",isDecade:isDecade}
}
function updateDecade(date){
list_model.clear()
var year = date.getFullYear()
const decadeStart = Math.floor(year / 10) * 10;
for(var i = decadeStart ; i< decadeStart+10 ; i++){
list_model.append(createItemYear(new Date(i,0,1),true));
}
for(var j = decadeStart+10 ; j< decadeStart+16 ; j++){
list_model.append(createItemYear(new Date(j,0,1),false));
}
title.text = decadeStart+"-"+(decadeStart+10)
}
function updateYear(date){
list_model.clear()
var year = date.getFullYear()
for(var i = 0 ; i< 12 ; i++){
list_model.append(createItemMonth(new Date(year,i)));
}
for(var j = 0 ; j< 4 ; j++){
list_model.append(createItemMonth(new Date(year+1,j)));
}
title.text = year+"年"
}
function updateMouth(date){
list_model.clear()
list_model.append([createItemWeek("一"),createItemWeek("二"),createItemWeek("三"),createItemWeek("四"),createItemWeek("五"),createItemWeek("六"),createItemWeek("日")])
var year = date.getFullYear()
var month = date.getMonth()
var day = date.getDate()
var firstDayOfMonth = new Date(year, month, 1)
var dayOfWeek = firstDayOfMonth.getDay()
var headerSize = (dayOfWeek===0?7:dayOfWeek)-1
if(headerSize!==0){
var lastMonthYear = year;
var lastMonthMonth = month - 1
if (month === 0) {
lastMonthYear = year - 1
lastMonthMonth = 11
}
var lastMonthDays = new Date(lastMonthYear, lastMonthMonth+1, 0).getDate()
for (var i = headerSize-1; i >= 0; i--) {
list_model.append(createItemDay(new Date(lastMonthYear, lastMonthMonth,lastMonthDays-i)))
}
}
const lastDayOfMonth = new Date(year, month+1, 0).getDate()
for (let day = 1; day <= lastDayOfMonth; day++) {
list_model.append(createItemDay(new Date(year, month,day)))
}
var footerSize = 49-list_model.count
var nextMonthYear = year
var nextMonth = month + 1
if (month === 11) {
nextMonthYear = year + 1
nextMonth = 0
}
const nextDayOfMonth = new Date(nextMonthYear, nextMonth+1, 0).getDate()
for (let j = 1; j <= footerSize; j++) {
list_model.append(createItemDay(new Date(nextMonthYear, nextMonth,j)))
}
title.text = year+"年"+(month+1)+"月"
}
}

4
src/controls/FluColorView.qml
View File

@ -3,11 +3,11 @@ import "../colorpicker"
Item {
property alias colorValue: color_picker.colorValue
width: color_picker.width+10
height: color_picker.height
property alias colorValue: color_picker.colorValue
FluArea{
anchors.fill: parent
radius: 5

2
src/controls/FluContentDialog.qml
View File

@ -12,7 +12,6 @@ Popup {
property string positiveText: "Positive"
signal negativeClicked
signal positiveClicked
property var minWidth: {
if(Window.window==null)
return 400
@ -111,7 +110,6 @@ Popup {
positiveClicked()
}
}
}
}
}

4
src/controls/FluContentPage.qml
View File

@ -6,11 +6,11 @@ import FluentUI 1.0
Item {
id:root
property alias title: text_title.text
default property alias content: container.data
id:root
FluText{
id:text_title
fontStyle: FluText.TitleLarge

10
src/controls/FluDatePicker.qml
View File

@ -6,15 +6,16 @@ import FluentUI 1.0
Rectangle {
id:root
property color dividerColor: FluTheme.isDark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1)
property color hoverColor: FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
property color normalColor: FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
property var window : Window.window
property bool showYear: true
property bool changeFlag: true
readonly property var rowData: ["","",""]
id:root
color: {
if(mouse_area.containsMouse){
return hoverColor
@ -367,9 +368,6 @@ Rectangle {
}
}
property bool changeFlag: true
readonly property var rowData: ["","",""]
function generateYearArray(startYear, endYear) {
const yearArray = [];
for (let year = startYear; year <= endYear; year++) {

5
src/controls/FluDropDownButton.qml
View File

@ -9,6 +9,8 @@ Button {
property color normalColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
property color hoverColor: FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
property color disableColor: FluTheme.isDark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
property var window : Window.window
property alias items: menu.content
id: control
topPadding:5
@ -17,9 +19,6 @@ Button {
rightPadding:35
enabled: !disabled
focusPolicy:Qt.TabFocus
property var window : Window.window
property alias items: menu.content
Keys.onSpacePressed: control.visualFocus&&clicked()

8
src/controls/FluExpander.qml
View File

@ -1,11 +1,13 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
Item {
property string headerText: "Titlte"
property bool expand: false
property int contentHeight : 300
default property alias content: container.data
id:root
height: layout_header.height + container.height
@ -13,10 +15,6 @@ Item {
implicitWidth: width
implicitHeight: height
property int contentHeight : 300
default property alias content: container.data
Rectangle{
id:layout_header
width: parent.width

2
src/controls/FluFilledButton.qml
View File

@ -3,13 +3,13 @@ import QtQuick.Controls 2.15
import FluentUI 1.0
Button {
id: control
property bool disabled: false
property color normalColor: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
property color hoverColor: FluTheme.isDark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1)
property color disableColor: FluTheme.isDark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
id: control
enabled: !disabled
topPadding:5
bottomPadding:5

5
src/controls/FluFocusRectangle.qml
View File

@ -2,12 +2,13 @@
import FluentUI 1.0
Item {
property int radius: 4
id:root
anchors.fill: parent
anchors.margins: -3
property var radius: 4
Rectangle{
width: root.width
height: root.height

43
src/controls/FluInfoBar.qml
View File

@ -7,26 +7,6 @@ FluObject {
property var root;
property int layoutY: 75;
function showSuccess(text,duration,moremsg){
mcontrol.create(mcontrol.const_success,text,duration,moremsg ? moremsg : "");
}
function showInfo(text,duration,moremsg){
mcontrol.create(mcontrol.const_info,text,duration,moremsg ? moremsg : "");
}
function showWarning(text,duration,moremsg){
mcontrol.create(mcontrol.const_warning,text,duration,moremsg ? moremsg : "");
}
function showError(text,duration,moremsg){
mcontrol.create(mcontrol.const_error,text,duration,moremsg ? moremsg : "");
}
function showCustom(itemcomponent,duration){
mcontrol.createCustom(itemcomponent,duration);
}
FluObject{
id:mcontrol
@ -34,9 +14,7 @@ FluObject {
property string const_info: "info";
property string const_warning: "warning";
property string const_error: "error";
property int maxWidth: 300;
property var screenLayout: null;
function create(type,text,duration,moremsg){
@ -230,4 +208,25 @@ FluObject {
}
}
function showSuccess(text,duration,moremsg){
mcontrol.create(mcontrol.const_success,text,duration,moremsg ? moremsg : "");
}
function showInfo(text,duration,moremsg){
mcontrol.create(mcontrol.const_info,text,duration,moremsg ? moremsg : "");
}
function showWarning(text,duration,moremsg){
mcontrol.create(mcontrol.const_warning,text,duration,moremsg ? moremsg : "");
}
function showError(text,duration,moremsg){
mcontrol.create(mcontrol.const_error,text,duration,moremsg ? moremsg : "");
}
function showCustom(itemcomponent,duration){
mcontrol.createCustom(itemcomponent,duration);
}
}

53
src/controls/FluItem.qml Normal file
View File

@ -0,0 +1,53 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15
Item{
id:control
property var radius:[0,0,0,0]
default property alias contentItem: container.data
Item{
id:container
width: control.width
height: control.height
opacity: 0
}
Canvas {
id: canvas
anchors.fill: parent
visible: false
onPaint: {
var ctx = getContext("2d");
var x = 0;
var y = 0;
var w = control.width;
var h = control.height;
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.beginPath();
ctx.moveTo(x + radius[0], y);
ctx.lineTo(x + w - radius[1], y);
ctx.arcTo(x + w, y, x + w, y + radius[1], radius[1]);
ctx.lineTo(x + w, y + h - radius[2]);
ctx.arcTo(x + w, y + h, x + w - radius[2], y + h, radius[2]);
ctx.lineTo(x + radius[3], y + h);
ctx.arcTo(x, y + h, x, y + h - radius[3], radius[3]);
ctx.lineTo(x, y + radius[0]);
ctx.arcTo(x, y, x + radius[0], y, radius[0]);
ctx.closePath();
ctx.fillStyle = control.color;
ctx.fill();
ctx.restore();
}
}
OpacityMask {
anchors.fill: container
source: container
maskSource: canvas
}
}

48
src/controls/FluMediaPlayer.qml
View File

@ -6,14 +6,15 @@ import FluentUI 1.0
Rectangle {
property url source
property bool showControl: false
property real volume: 30
id:control
width: 480
height: 270
color: FluColors.Black
clip: true
property bool showControl: true
MouseArea{
anchors.fill: parent
onClicked: {
@ -37,6 +38,7 @@ Rectangle {
onStatusChanged: {
if(status===6){
slider.maxValue = mediaplayer.duration
showControl = true
}
}
}
@ -85,6 +87,7 @@ Rectangle {
mediaplayer.autoSeek = false
mediaplayer.pause()
}
value:0
onReleased: {
mediaplayer.autoSeek = true
mediaplayer.play()
@ -122,14 +125,24 @@ Rectangle {
text: formatDuration(mediaplayer.duration)
}
FluIconButton{
iconSize: 15
iconSource: mediaplayer.playbackState === Audio.PlayingState ? FluentIcons.Pause : FluentIcons.Play
Row{
spacing: 10
anchors{
horizontalCenter: parent.horizontalCenter
bottom: parent.bottom
bottomMargin: 10
}
FluIconButton{
iconSize: 17
iconSource: FluentIcons.SkipBack10
onClicked: {
mediaplayer.seek(Math.max(mediaplayer.position-10*1000,0))
}
}
FluIconButton{
iconSize: 15
iconSource: mediaplayer.playbackState === Audio.PlayingState ? FluentIcons.Pause : FluentIcons.Play
onClicked: {
if(mediaplayer.playbackState === Audio.PlayingState){
mediaplayer.pause()
@ -138,8 +151,18 @@ Rectangle {
}
}
}
FluIconButton{
iconSize: 17
iconSource: FluentIcons.SkipForward30
onClicked: {
mediaplayer.seek(Math.min(mediaplayer.position+30*1000,mediaplayer.duration))
}
}
}
FluIconButton{
id:btn_volume
iconSize: 17
iconSource: mediaplayer.volume ? FluentIcons.Volume : FluentIcons.Mute
anchors{
@ -149,11 +172,24 @@ Rectangle {
bottomMargin: 10
}
onClicked: {
// FluentIcons.SkipBack10 FluentIcons.SkipForward30
mediaplayer.volume = !mediaplayer.volume
}
}
FluSlider{
id:slider_volume
size: 80
dotSize: 20
value:30
anchors{
left:btn_volume.right
verticalCenter: btn_volume.verticalCenter
leftMargin: 10
}
onValueChanged:{
mediaplayer.volume = value/100
}
}
}

3
src/controls/FluMenu.qml
View File

@ -3,9 +3,10 @@ import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15
Menu {
id: popup
default property alias content: container.data
id: popup
width: 140
height: container.height

5
src/controls/FluMenuItem.qml
View File

@ -3,6 +3,9 @@ import QtQuick.Controls 2.15
Item {
property string text: "MenuItem"
signal clicked
id:root
width: {
if(root.parent){
@ -12,8 +15,6 @@ Item {
}
height: 32
property string text: "MenuItem"
signal clicked
Rectangle{
anchors.centerIn: parent

7
src/controls/FluNavigationView.qml
View File

@ -7,17 +7,14 @@ import FluentUI 1.0
Item {
id:root
property FluObject items
property FluObject footerItems
property int displayMode: width<=700 ? FluNavigationView.Minimal : FluNavigationView.Open
property bool displaMinimalNav : false
property alias actions: layout_actions.data
id:root
onDisplayModeChanged: {
if(displayMode === FluNavigationView.Minimal){
anim_navi.enabled = false

7
src/controls/FluProgressBar.qml
View File

@ -2,15 +2,16 @@
import QtQuick.Controls 2.12
FluRectangle {
id: control
property real progress: 0.5
property bool indeterminate: true
id: control
width: 150
height: 5
radius: [3,3,3,3]
clip: true
color: FluTheme.isDark ? Qt.rgba(41/255,41/255,41/255,1) : Qt.rgba(214/255,214/255,214/255,1)
property real progress: 0.5
property bool indeterminate: true
Component.onCompleted: {
if(indeterminate){

13
src/controls/FluProgressRing.qml
View File

@ -2,19 +2,20 @@
import QtQuick.Controls 2.12
Rectangle {
id: control
property real linWidth : 5
property real progress: 0.25
property bool indeterminate: true
readonly property real radius2 : radius - linWidth/2
property color primaryColor : FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
id: control
width: 44
height: 44
radius: 22
border.width: linWidth
color: "#00000000"
border.color: FluTheme.isDark ? Qt.rgba(41/255,41/255,41/255,1) : Qt.rgba(214/255,214/255,214/255,1)
property real linWidth : 5
property real progress: 0.25
property bool indeterminate: true
readonly property real radius2 : radius - linWidth/2
property color primaryColor : FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
onProgressChanged: {
canvas.requestPaint()

18
src/controls/FluRectangle.qml
View File

@ -3,7 +3,7 @@ import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15
Item{
id:root
id:control
property var radius:[0,0,0,0]
property color color : "#FFFFFF"
property bool shadow: true
@ -11,17 +11,17 @@ Item{
Rectangle{
id:container
width: root.width
height: root.height
width: control.width
height: control.height
opacity: 0
color:root.color
color:control.color
}
FluShadow{
anchors.fill: container
radius: root.radius[0]
radius: control.radius[0]
visible: {
if(root.radius[0] === root.radius[1] && root.radius[0] === root.radius[2] && root.radius[0] === root.radius[3] && root.shadow){
if(control.radius[0] === control.radius[1] && control.radius[0] === control.radius[2] && control.radius[0] === control.radius[3] && control.shadow){
return true
}
return false
@ -36,8 +36,8 @@ Item{
var ctx = getContext("2d");
var x = 0;
var y = 0;
var w = root.width;
var h = root.height;
var w = control.width;
var h = control.height;
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
@ -52,7 +52,7 @@ Item{
ctx.lineTo(x, y + radius[0]);
ctx.arcTo(x, y, x + radius[0], y, radius[0]);
ctx.closePath();
ctx.fillStyle = root.color;
ctx.fillStyle = control.color;
ctx.fill();
ctx.restore();
}

4
src/controls/FluScrollablePage.qml
View File

@ -6,12 +6,12 @@ import FluentUI 1.0
Item {
id:root
property alias title: text_title.text
default property alias content: container.data
property int spacing : 5
id:root
FluText{
id:text_title
fontStyle: FluText.TitleLarge

7
src/controls/FluShadow.qml
View File

@ -1,12 +1,13 @@
import QtQuick 2.15
Item {
property color color: FluTheme.isDark ? "#FFFFFF" : "#999999"
property int radius: 4
id:root
anchors.fill: parent
anchors.margins: -4
property color color: FluTheme.isDark ? "#FFFFFF" : "#999999"
property int radius: 4
Rectangle{
width: root.width

3
src/controls/FluSlider.qml
View File

@ -23,8 +23,9 @@ Item{
height: control.height
width: control.width
rotation: isHorizontal ? 0 : 180
Component.onCompleted: {
seek(0)
seek(value)
}
MouseArea{

185
src/controls/FluTabView.qml Normal file
View File

@ -0,0 +1,185 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
Item {
id:control
anchors.fill: {
if(parent)
return parent
return undefined
}
implicitHeight: height
implicitWidth: width
enum TabWidthBehavior {
Equal,
SizeToContent,
Compact
}
enum CloseButtonVisibility{
Nerver,
Always,
OnHover
}
property int tabWidthBehavior : FluTabView.Equal
property int closeButtonVisibility : FluTabView.Always
QtObject {
id: d
property int dragIndex: -1
property bool dragBehavior: false
}
ListModel{
id:tab_model
ListElement{
icon:""
text:"Document0"
}
ListElement{
icon:""
text:"Document1"
}
ListElement{
icon:""
text:"Document2"
}
}
ListView{
id:tab_nav
height: 34
orientation: ListView.Horizontal
width: parent.width
model: tab_model
move: Transition {
NumberAnimation { properties: "x"; duration: 100; easing.type: Easing.OutCubic }
NumberAnimation { properties: "y"; duration: 100; easing.type: Easing.OutCubic }
}
moveDisplaced: Transition {
NumberAnimation { properties: "x"; duration: 300; easing.type: Easing.OutCubic}
NumberAnimation { properties: "y"; duration: 100; easing.type: Easing.OutCubic }
}
clip: true
delegate: Item{
width: item_container.width
height: item_container.height
z: item_mouse_drag.pressed ? 1000 : 1
Item{
id:item_layout
width: item_container.width
height: item_container.height
FluItem{
id:item_container
property real timestamp: new Date().getTime()
height: tab_nav.height
width: item_text.width+30
radius: [5,5,0,0]
Behavior on x { enabled: d.dragBehavior; NumberAnimation { duration: 200 } }
Behavior on y { enabled: d.dragBehavior; NumberAnimation { duration: 200 } }
MouseArea{
id:item_mouse_hove
anchors.fill: parent
hoverEnabled: true
}
MouseArea{
id:item_mouse_drag
anchors.fill: parent
drag.target: item_container
drag.axis: Drag.XAxis
onPressed: {
item_container.timestamp = new Date().getTime();
d.dragBehavior = false;
var pos = tab_nav.mapFromItem(item_container, 0, 0)
d.dragIndex = model.index
item_container.parent = tab_nav
item_container.x = pos.x
item_container.y = pos.y
}
onReleased: {
var timeDiff = new Date().getTime() - item_container.timestamp
console.debug(timeDiff)
if (timeDiff < 150) {
tab_nav.currentIndex = index
}
d.dragIndex = -1;
var pos = tab_nav.mapToItem(item_layout, item_container.x, item_container.y)
item_container.parent = item_layout;
item_container.x = pos.x;
item_container.y = pos.y;
d.dragBehavior = true;
item_container.x = 0;
item_container.y = 0;
}
onPositionChanged: {
var pos = tab_nav.mapFromItem(item_container, 0, 0);
var idx = tab_nav.indexAt(pos.x, pos.y);
if (idx > -1 && idx < tab_nav.count) {
tab_model.move(d.dragIndex, idx, 1)
d.dragIndex = idx;
}
}
}
Rectangle{
anchors.fill: parent
color: {
if(FluTheme.isDark){
if(item_mouse_hove.containsMouse){
return Qt.rgba(1,1,1,0.03)
}
if(tab_nav.currentIndex === index){
return Qt.rgba(1,1,1,0.06)
}
return Qt.rgba(0,0,0,0)
}else{
if(item_mouse_hove.containsMouse){
return Qt.rgba(0,0,0,0.03)
}
if(tab_nav.currentIndex === index){
return Qt.rgba(0,0,0,0.06)
}
return Qt.rgba(0,0,0,0)
}
}
}
FluText{
id:item_text
anchors.centerIn: parent
text: model.text
rightPadding: 24
}
FluIconButton{
iconSource: FluentIcons.ChromeClose
iconSize: 10
width: 24
height: 24
anchors{
right: parent.right
rightMargin: 5
verticalCenter: parent.verticalCenter
}
}
}
}
}
}
}

1
src/controls/FluTextButton.qml
View File

@ -5,7 +5,6 @@ import FluentUI 1.0
Button {
property bool disabled: false
property color normalColor: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
property color hoverColor: FluTheme.isDark ? Qt.darker(normalColor,1.3) : Qt.lighter(normalColor,1.3)
property color disableColor: FluTheme.isDark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)

18
src/controls/FluTimePicker.qml
View File

@ -6,22 +6,18 @@ import FluentUI 1.0
Rectangle {
id:root
property color dividerColor: FluTheme.isDark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1)
property color hoverColor: FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
property color normalColor: FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
property var window : Window.window
property int hourFormat: FluTimePicker.H
property int isH: hourFormat === FluTimePicker.H
enum HourFormat {
H,
HH
}
property color dividerColor: FluTheme.isDark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1)
property color hoverColor: FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
property color normalColor: FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
property var window : Window.window
property int hourFormat: FluTimePicker.H
property int isH: hourFormat === FluTimePicker.H
id:root
color: {
if(mouse_area.containsMouse){
return hoverColor

13
src/controls/FluTreeView.qml
View File

@ -6,20 +6,19 @@ import FluentUI 1.0
import QtGraphicalEffects 1.15
Item {
id:root
property int selectionMode: FluTreeView.None
property var currentElement
property var currentParentElement
property var rootModel: tree_model.get(0).items
signal itemClicked(var item)
enum TreeViewSelectionMode {
None,
Single,
Multiple
}
property int selectionMode: FluTreeView.None
property var currentElement
property var currentParentElement
property var rootModel: tree_model.get(0).items
signal itemClicked(var item)
id:root
ListModel{
id:tree_model
ListElement{

36
src/controls/FluWindow.qml
View File

@ -6,14 +6,26 @@ import QtGraphicalEffects 1.15
Item {
id:root
property string title: "FluentUI"
property int minimumWidth
property int maximumWidth
property int minimumHeight
property int maximumHeight
property int modality:0
signal initArgument(var argument)
property var pageRegister
default property alias content: container.data
property var window : {
if(Window.window == null)
return null
return Window.window
}
property int borderless:{
if(!FluTheme.isFrameless){
return 0
}
return (window && (window.visibility === Window.Maximized)) ? 0 : 4
}
property color color: {
if(window && window.active){
return FluTheme.isDark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(238/255,244/255,249/255,1)
@ -21,25 +33,9 @@ Item {
return FluTheme.isDark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
}
property string title: "FluentUI"
property int minimumWidth
property int maximumWidth
property int minimumHeight
property int maximumHeight
property int modality:0
id:root
signal initArgument(var argument)
property var pageRegister
property int borderless:{
if(!FluTheme.isFrameless){
return 0
}
return (window && (window.visibility === Window.Maximized)) ? 0 : 4
}
default property alias content: container.data
FluWindowResize{
border:borderless

14
src/controls/TFpsMonitor.qml
View File

@ -1,23 +1,23 @@
import QtQuick 2.15
import FluentUI 1.0
/*! TODO */
Item {
id: toou2d_fps
width: contentItemLoader.width + 5;
height: contentItemLoader.height + 5;
readonly property alias fps: _private.fps;
readonly property alias fpsAvg: _private.fpsAvg;
property color color: "#C0C0C0"
property Component contentItem: contentComponent;
id: control
width: contentItemLoader.width + 5;
height: contentItemLoader.height + 5;
Component{
id:contentComponent
FluText{
color:toou2d_fps.color
color:control.color
text: " Avg " + fpsAvg + " | " + fps + " Fps";
}
}

2
src/res.qrc
View File

@ -58,5 +58,7 @@
<file>colorpicker/content/PanelBorder.qml</file>
<file>colorpicker/content/SBPicker.qml</file>
<file>controls/FluMediaPlayer.qml</file>
<file>controls/FluTabView.qml</file>
<file>controls/FluItem.qml</file>
</qresource>
</RCC>