main
zhuzihcu 2023-03-27 18:24:35 +08:00
parent a2c23231f2
commit 3a32d66d6a
40 changed files with 562 additions and 269 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,13 +1,25 @@
import QtQuick 2.15 import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.15 import QtQuick.Window 2.15
import QtQuick.Layouts 1.15 import QtQuick.Layouts 1.15
import FluentUI 1.0 import FluentUI 1.0
Rectangle{ 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 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: { color: {
if(Window.window == null) if(Window.window == null)
return borerlessColor return borerlessColor
@ -15,7 +27,6 @@ Rectangle{
} }
visible: FluTheme.isFrameless visible: FluTheme.isFrameless
height: visible ? 34 : 0 height: visible ? 34 : 0
width: { width: {
if(parent==null) if(parent==null)
return 200 return 200
@ -23,19 +34,7 @@ Rectangle{
} }
z: 65535 z: 65535
clip: true 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 { TapHandler {
onTapped: if (tapCount === 2) toggleMaximized() onTapped: if (tapCount === 2) toggleMaximized()
@ -48,16 +47,6 @@ Rectangle{
onActiveChanged: if (active) { window.startSystemMove(); } onActiveChanged: if (active) { window.startSystemMove(); }
} }
function toggleMaximized() {
if(!resizable)
return
if (window.visibility === Window.Maximized) {
window.showNormal();
} else {
window.showMaximized();
}
}
FluText { FluText {
text: title text: title
anchors{ anchors{
@ -149,4 +138,14 @@ Rectangle{
anchors.bottom: parent.bottom; anchors.bottom: parent.bottom;
} }
function toggleMaximized() {
if(!resizable)
return
if (window.visibility === Window.Maximized) {
window.showNormal();
} else {
window.showMaximized();
}
}
} }

View File

@ -2,12 +2,6 @@
import FluentUI 1.0 import FluentUI 1.0
Rectangle { 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 default property alias content: container.data
property int paddings : 0 property int paddings : 0
@ -16,6 +10,13 @@ Rectangle {
property int topPadding : 0 property int topPadding : 0
property int bottomPadding : 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 { Item {
id: container id: container
anchors.fill: parent anchors.fill: parent

View File

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

View File

@ -6,13 +6,12 @@ import FluentUI 1.0
Rectangle { 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 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 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 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 var window : Window.window
id:root
color: { color: {
if(mouse_area.containsMouse){ if(mouse_area.containsMouse){
return hoverColor return hoverColor

View File

@ -4,111 +4,26 @@ import FluentUI 1.0
Item { 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 { enum DisplayMode {
Month, Month,
Year, Year,
Decade 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: { Component.onCompleted: {
updateMouth(date) 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{ Component{
id:com_week id:com_week
Item{ 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)+"月"
}
} }

View File

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

View File

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

View File

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

View File

@ -6,15 +6,16 @@ import FluentUI 1.0
Rectangle { 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 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 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 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 var window : Window.window
property bool showYear: true property bool showYear: true
property bool changeFlag: true
readonly property var rowData: ["","",""]
id:root
color: { color: {
if(mouse_area.containsMouse){ if(mouse_area.containsMouse){
return hoverColor return hoverColor
@ -367,9 +368,6 @@ Rectangle {
} }
} }
property bool changeFlag: true
readonly property var rowData: ["","",""]
function generateYearArray(startYear, endYear) { function generateYearArray(startYear, endYear) {
const yearArray = []; const yearArray = [];
for (let year = startYear; year <= endYear; year++) { for (let year = startYear; year <= endYear; year++) {

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 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 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 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 id: control
topPadding:5 topPadding:5
@ -17,9 +19,6 @@ Button {
rightPadding:35 rightPadding:35
enabled: !disabled enabled: !disabled
focusPolicy:Qt.TabFocus focusPolicy:Qt.TabFocus
property var window : Window.window
property alias items: menu.content
Keys.onSpacePressed: control.visualFocus&&clicked() Keys.onSpacePressed: control.visualFocus&&clicked()

View File

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

View File

@ -3,13 +3,13 @@ import QtQuick.Controls 2.15
import FluentUI 1.0 import FluentUI 1.0
Button { Button {
id: control
property bool disabled: false property bool disabled: false
property color normalColor: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark 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 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) 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 enabled: !disabled
topPadding:5 topPadding:5
bottomPadding:5 bottomPadding:5

View File

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

View File

@ -7,26 +7,6 @@ FluObject {
property var root; property var root;
property int layoutY: 75; 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{ FluObject{
id:mcontrol id:mcontrol
@ -34,9 +14,7 @@ FluObject {
property string const_info: "info"; property string const_info: "info";
property string const_warning: "warning"; property string const_warning: "warning";
property string const_error: "error"; property string const_error: "error";
property int maxWidth: 300; property int maxWidth: 300;
property var screenLayout: null; property var screenLayout: null;
function create(type,text,duration,moremsg){ 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
}
}

View File

@ -6,14 +6,15 @@ import FluentUI 1.0
Rectangle { Rectangle {
property url source property url source
property bool showControl: false
property real volume: 30
id:control id:control
width: 480 width: 480
height: 270 height: 270
color: FluColors.Black color: FluColors.Black
clip: true clip: true
property bool showControl: true
MouseArea{ MouseArea{
anchors.fill: parent anchors.fill: parent
onClicked: { onClicked: {
@ -37,6 +38,7 @@ Rectangle {
onStatusChanged: { onStatusChanged: {
if(status===6){ if(status===6){
slider.maxValue = mediaplayer.duration slider.maxValue = mediaplayer.duration
showControl = true
} }
} }
} }
@ -85,6 +87,7 @@ Rectangle {
mediaplayer.autoSeek = false mediaplayer.autoSeek = false
mediaplayer.pause() mediaplayer.pause()
} }
value:0
onReleased: { onReleased: {
mediaplayer.autoSeek = true mediaplayer.autoSeek = true
mediaplayer.play() mediaplayer.play()
@ -122,14 +125,24 @@ Rectangle {
text: formatDuration(mediaplayer.duration) text: formatDuration(mediaplayer.duration)
} }
FluIconButton{
iconSize: 15 Row{
iconSource: mediaplayer.playbackState === Audio.PlayingState ? FluentIcons.Pause : FluentIcons.Play spacing: 10
anchors{ anchors{
horizontalCenter: parent.horizontalCenter horizontalCenter: parent.horizontalCenter
bottom: parent.bottom bottom: parent.bottom
bottomMargin: 10 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: { onClicked: {
if(mediaplayer.playbackState === Audio.PlayingState){ if(mediaplayer.playbackState === Audio.PlayingState){
mediaplayer.pause() 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{ FluIconButton{
id:btn_volume
iconSize: 17 iconSize: 17
iconSource: mediaplayer.volume ? FluentIcons.Volume : FluentIcons.Mute iconSource: mediaplayer.volume ? FluentIcons.Volume : FluentIcons.Mute
anchors{ anchors{
@ -149,11 +172,24 @@ Rectangle {
bottomMargin: 10 bottomMargin: 10
} }
onClicked: { onClicked: {
// FluentIcons.SkipBack10 FluentIcons.SkipForward30
mediaplayer.volume = !mediaplayer.volume 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
}
}
} }

View File

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

View File

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

View File

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

View File

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

View File

@ -2,19 +2,20 @@
import QtQuick.Controls 2.12 import QtQuick.Controls 2.12
Rectangle { 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 width: 44
height: 44 height: 44
radius: 22 radius: 22
border.width: linWidth border.width: linWidth
color: "#00000000" color: "#00000000"
border.color: FluTheme.isDark ? Qt.rgba(41/255,41/255,41/255,1) : Qt.rgba(214/255,214/255,214/255,1) 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: { onProgressChanged: {
canvas.requestPaint() canvas.requestPaint()

View File

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

View File

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

View File

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

View File

@ -23,8 +23,9 @@ Item{
height: control.height height: control.height
width: control.width width: control.width
rotation: isHorizontal ? 0 : 180 rotation: isHorizontal ? 0 : 180
Component.onCompleted: { Component.onCompleted: {
seek(0) seek(value)
} }
MouseArea{ 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
}
}
}
}
}
}
}

View File

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

View File

@ -6,22 +6,18 @@ import FluentUI 1.0
Rectangle { 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 { enum HourFormat {
H, H,
HH 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: { color: {
if(mouse_area.containsMouse){ if(mouse_area.containsMouse){
return hoverColor return hoverColor

View File

@ -6,20 +6,19 @@ import FluentUI 1.0
import QtGraphicalEffects 1.15 import QtGraphicalEffects 1.15
Item { 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 { enum TreeViewSelectionMode {
None, None,
Single, Single,
Multiple 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{ ListModel{
id:tree_model id:tree_model
ListElement{ ListElement{

View File

@ -6,14 +6,26 @@ import QtGraphicalEffects 1.15
Item { 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 : { property var window : {
if(Window.window == null) if(Window.window == null)
return null return null
return Window.window return Window.window
} }
property int borderless:{
if(!FluTheme.isFrameless){
return 0
}
return (window && (window.visibility === Window.Maximized)) ? 0 : 4
}
property color color: { property color color: {
if(window && window.active){ 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) 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) 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" id:root
property int minimumWidth
property int maximumWidth
property int minimumHeight
property int maximumHeight
property int modality:0
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{ FluWindowResize{
border:borderless border:borderless

View File

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

View File

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