diff --git a/example/AppInfo.cpp b/example/AppInfo.cpp index 418540a..a01a1d0 100644 --- a/example/AppInfo.cpp +++ b/example/AppInfo.cpp @@ -6,7 +6,7 @@ AppInfo::AppInfo(QObject *parent) : QObject{parent} { - version("1.2.4"); + version("1.2.5"); lang(new En()); } diff --git a/example/T_Pivot.qml b/example/T_Pivot.qml index d8546ff..0da0dae 100644 --- a/example/T_Pivot.qml +++ b/example/T_Pivot.qml @@ -21,6 +21,7 @@ FluScrollablePage{ FluPivot{ anchors.fill: parent + currentIndex: 2 FluPivotItem{ title:"All" contentItem:FluText{ diff --git a/example/page/MainPage.qml b/example/page/MainPage.qml index fc4edf5..f35fef5 100644 --- a/example/page/MainPage.qml +++ b/example/page/MainPage.qml @@ -26,12 +26,24 @@ FluWindow { SystemTrayIcon { visible: true icon.source: "qrc:/res/image/favicon.ico" - - onActivated: { - window.show() - window.raise() - window.requestActivate() + tooltip: "FluentUI" + menu: Menu { + MenuItem { + text: "退出" + onTriggered: { + window.destoryWindow() + FluApp.closeApp() + } + } } + onActivated: + (reason)=>{ + if(reason === SystemTrayIcon.Trigger){ + window.show() + window.raise() + window.requestActivate() + } + } } diff --git a/src/FluApp.cpp b/src/FluApp.cpp index 60dca18..b7f8027 100644 --- a/src/FluApp.cpp +++ b/src/FluApp.cpp @@ -127,3 +127,7 @@ void FluApp::clipText(const QString& text){ QString FluApp::uuid(){ return QUuid::createUuid().toString(); } + +void FluApp::closeApp(){ + qApp->exit(0); +} diff --git a/src/FluApp.h b/src/FluApp.h index 7c9ad28..5c33bd9 100644 --- a/src/FluApp.h +++ b/src/FluApp.h @@ -34,6 +34,8 @@ public: Q_INVOKABLE QString uuid(); + Q_INVOKABLE void closeApp(); + public: QMap wnds; private: diff --git a/src/NativeEventFilter.cpp b/src/NativeEventFilter.cpp index dc715a8..440210d 100644 --- a/src/NativeEventFilter.cpp +++ b/src/NativeEventFilter.cpp @@ -10,72 +10,67 @@ bool NativeEventFilter::nativeEventFilter(const QByteArray &eventType, void *mes { #ifdef Q_OS_WIN if (eventType == "windows_generic_MSG" && FluTheme::getInstance()->frameless()) { - MSG* msg = static_cast(message); - if (msg == Q_NULLPTR) - return false; - switch(msg->message) { - case WM_COMMAND: { - SendMessage(msg->hwnd, WM_SYSCOMMAND, msg->wParam, msg->lParam); - *result = DefWindowProc(msg->hwnd, msg->message, msg->wParam, msg->lParam); - return true; - } - case WM_NCCALCSIZE:{ - NCCALCSIZE_PARAMS& params = *reinterpret_cast(msg->lParam); - if (params.rgrc[0].top != 0) - params.rgrc[0].top -= 1; - *result = WVR_REDRAW; + MSG* msg = static_cast(message); + if (msg == Q_NULLPTR) + return false; + switch(msg->message) { + case WM_NCCALCSIZE:{ + NCCALCSIZE_PARAMS& params = *reinterpret_cast(msg->lParam); + if (params.rgrc[0].top != 0) + params.rgrc[0].top -= 1; + *result = WVR_REDRAW; + return true; + } + case WM_NCHITTEST: { + auto view = FluApp::getInstance()->wnds[(WId)msg->hwnd]; + bool isResize = !(view->maximumWidth()==view->minimumWidth()&&view->maximumHeight()==view->minimumHeight()); + const LONG borderWidth = 8; + RECT winrect; + GetWindowRect(msg->hwnd, &winrect); + long x = GET_X_LPARAM(msg->lParam); + long y = GET_Y_LPARAM(msg->lParam); + if (x >= winrect.left && x < winrect.left + borderWidth && + y < winrect.bottom && y >= winrect.bottom - borderWidth && isResize) { + *result = HTBOTTOMLEFT; return true; } - case WM_NCHITTEST: { - auto view = FluApp::getInstance()->wnds[(WId)msg->hwnd]; - bool isResize = !(view->maximumWidth()==view->minimumWidth()&&view->maximumHeight()==view->minimumHeight()); - const LONG borderWidth = 8; - RECT winrect; - GetWindowRect(msg->hwnd, &winrect); - long x = GET_X_LPARAM(msg->lParam); - long y = GET_Y_LPARAM(msg->lParam); - if (x >= winrect.left && x < winrect.left + borderWidth && + if (x < winrect.right && x >= winrect.right - borderWidth && y < winrect.bottom && y >= winrect.bottom - borderWidth && isResize) { - *result = HTBOTTOMLEFT; - return true; - } - if (x < winrect.right && x >= winrect.right - borderWidth && - y < winrect.bottom && y >= winrect.bottom - borderWidth && isResize) { - *result = HTBOTTOMRIGHT; - return true; - } - if (x >= winrect.left && x < winrect.left + borderWidth && - y >= winrect.top && y < winrect.top + borderWidth && isResize) { - *result = HTTOPLEFT; - return true; - } - if (x < winrect.right && x >= winrect.right - borderWidth && - y >= winrect.top && y < winrect.top + borderWidth && isResize) { - *result = HTTOPRIGHT; - return true; - } - if (x >= winrect.left && x < winrect.left + borderWidth && isResize) { - *result = HTLEFT; - return true; - } - if (x < winrect.right && x >= winrect.right - borderWidth && isResize) { - *result = HTRIGHT; - return true; - } - if (y < winrect.bottom && y >= winrect.bottom - borderWidth && isResize) { - *result = HTBOTTOM; - return true; - } - if (y >= winrect.top && y < winrect.top + borderWidth && isResize) { - *result = HTTOP; - return true; - } - return false; + *result = HTBOTTOMRIGHT; + return true; } - default: - break; + if (x >= winrect.left && x < winrect.left + borderWidth && + y >= winrect.top && y < winrect.top + borderWidth && isResize) { + *result = HTTOPLEFT; + return true; } + if (x < winrect.right && x >= winrect.right - borderWidth && + y >= winrect.top && y < winrect.top + borderWidth && isResize) { + *result = HTTOPRIGHT; + return true; + } + if (x >= winrect.left && x < winrect.left + borderWidth && isResize) { + *result = HTLEFT; + return true; + } + if (x < winrect.right && x >= winrect.right - borderWidth && isResize) { + *result = HTRIGHT; + return true; + } + if (y < winrect.bottom && y >= winrect.bottom - borderWidth && isResize) { + *result = HTBOTTOM; + return true; + } + if (y >= winrect.top && y < winrect.top + borderWidth && isResize) { + *result = HTTOP; + return true; + } + return false; } + default: + break; + } + } #endif return false; } diff --git a/src/controls/FluCalendarPicker.qml b/src/controls/FluCalendarPicker.qml index 26dcfbc..6fae9c5 100644 --- a/src/controls/FluCalendarPicker.qml +++ b/src/controls/FluCalendarPicker.qml @@ -67,21 +67,26 @@ Rectangle { modal: true dim:false enter: Transition { - NumberAnimation { - property: "y" - from:0 - to:popup.y - duration: 150 - } + reversible: true NumberAnimation { property: "opacity" from:0 to:1 - duration: 150 + duration: 83 } } + + exit:Transition { + NumberAnimation { + property: "opacity" + from:1 + to:0 + duration: 83 + } + } + contentItem: Item{ - anchors.fill: parent + clip: true FluCalendarView{ id:container onDateClicked: @@ -94,15 +99,19 @@ Rectangle { } } } - background: Item{} + background: Item{ + FluShadow{ + radius: 5 + } + } function showPopup() { var pos = control.mapToItem(null, 0, 0) - if(window.height>pos.y+control.height+popup.height){ + if(window.height>pos.y+control.height+container.height){ popup.y = control.height - } else if(pos.y>popup.height){ - popup.y = -popup.height + } else if(pos.y>container.height){ + popup.y = -container.height } else { - popup.y = window.height-(pos.y+popup.height) + popup.y = window.height-(pos.y+container.height) } popup.x = -(popup.width-control.width)/2 popup.open() diff --git a/src/controls/FluColorPicker.qml b/src/controls/FluColorPicker.qml index 7c6989e..f5b226c 100644 --- a/src/controls/FluColorPicker.qml +++ b/src/controls/FluColorPicker.qml @@ -33,34 +33,42 @@ FluControl{ height: container.height width: container.width contentItem: Item{ - anchors.fill: parent + clip: true FluColorView{ id:container } } - background:Item{} - enter: Transition { - NumberAnimation { - property: "y" - from:0 - to:popup.y - duration: 150 + background:Item{ + FluShadow{ + radius: 5 } + } + enter: Transition { + reversible: true NumberAnimation { property: "opacity" from:0 to:1 - duration: 150 + duration: 83 + } + } + + exit:Transition { + NumberAnimation { + property: "opacity" + from:1 + to:0 + duration: 83 } } function showPopup() { var pos = control.mapToItem(null, 0, 0) - if(window.height>pos.y+control.height+popup.height){ + if(window.height>pos.y+control.height+container.height){ popup.y = control.height - } else if(pos.y>popup.height){ - popup.y = -popup.height + } else if(pos.y>container.height){ + popup.y = -container.height } else { - popup.y = window.height-(pos.y+popup.height) + popup.y = window.height-(pos.y+container.height) } popup.x = -(popup.width-control.width)/2 popup.open() diff --git a/src/controls/FluDatePicker.qml b/src/controls/FluDatePicker.qml index 0376666..84be305 100644 --- a/src/controls/FluDatePicker.qml +++ b/src/controls/FluDatePicker.qml @@ -100,240 +100,252 @@ Rectangle { Menu{ id:popup modal: true - width: 300 - height: 340 + width: container.width + height: container.height dim:false enter: Transition { - NumberAnimation { - property: "y" - from:0 - to:popup.y - duration: 150 - } + reversible: true NumberAnimation { property: "opacity" from:0 to:1 - duration: 150 + duration: 83 } } - background:Item{} - contentItem: Rectangle{ - id:container - radius: 4 - anchors.fill: parent - color: FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1) - MouseArea{ - anchors.fill: parent + + exit:Transition { + NumberAnimation { + property: "opacity" + from:1 + to:0 + duration: 83 } + } + background:Item{ FluShadow{ radius: 4 } + } + contentItem: Item{ + clip: true + Rectangle{ + id:container + radius: 4 + width: 300 + height: 340 + color: FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1) + MouseArea{ + anchors.fill: parent + } + FluShadow{ + radius: 4 + } - RowLayout{ - id:layout_content - spacing: 0 - width: parent.width - height: 300 + RowLayout{ + id:layout_content + spacing: 0 + width: parent.width + height: 300 - Component{ - id:list_delegate + Component{ + id:list_delegate - Item{ - height:38 - width:getListView().width + Item{ + height:38 + width:getListView().width - function getListView(){ - if(type === 0) - return list_view_1 - if(type === 1) - return list_view_2 - if(type === 2) - return list_view_3 - } - - - Rectangle{ - anchors.fill: parent - anchors.topMargin: 2 - anchors.bottomMargin: 2 - anchors.leftMargin: 5 - anchors.rightMargin: 5 - color: { - if(getListView().currentIndex === position){ - if(FluTheme.dark){ - return item_mouse.containsMouse ? Qt.darker(FluTheme.primaryColor.lighter,1.1) : FluTheme.primaryColor.lighter - }else{ - return item_mouse.containsMouse ? Qt.lighter(FluTheme.primaryColor.dark,1.1): FluTheme.primaryColor.dark - } - } - if(item_mouse.containsMouse){ - return FluTheme.dark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1) - } - return FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0) + function getListView(){ + if(type === 0) + return list_view_1 + if(type === 1) + return list_view_2 + if(type === 2) + return list_view_3 } - radius: 3 - MouseArea{ - id:item_mouse + + + Rectangle{ anchors.fill: parent - hoverEnabled: true - onClicked: { - getListView().currentIndex = position - if(type === 0){ - text_year.text = model - list_view_2.model = generateMonthArray(1,12) - text_month.text = list_view_2.model[list_view_2.currentIndex] - - list_view_3.model = generateMonthDaysArray(list_view_1.model[list_view_1.currentIndex],list_view_2.model[list_view_2.currentIndex]) - text_day.text = list_view_3.model[list_view_3.currentIndex] - } - if(type === 1){ - text_month.text = model - list_view_3.model = generateMonthDaysArray(list_view_1.model[list_view_1.currentIndex],list_view_2.model[list_view_2.currentIndex]) - text_day.text = list_view_3.model[list_view_3.currentIndex] - - } - if(type === 2){ - text_day.text = model - } - } - } - FluText{ - text:model - color: { + anchors.topMargin: 2 + anchors.bottomMargin: 2 + anchors.leftMargin: 5 + anchors.rightMargin: 5 + color: { if(getListView().currentIndex === position){ if(FluTheme.dark){ - return Qt.rgba(0,0,0,1) + return item_mouse.containsMouse ? Qt.darker(FluTheme.primaryColor.lighter,1.1) : FluTheme.primaryColor.lighter }else{ - return Qt.rgba(1,1,1,1) + return item_mouse.containsMouse ? Qt.lighter(FluTheme.primaryColor.dark,1.1): FluTheme.primaryColor.dark + } + } + if(item_mouse.containsMouse){ + return FluTheme.dark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1) + } + return FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0) + } + radius: 3 + MouseArea{ + id:item_mouse + anchors.fill: parent + hoverEnabled: true + onClicked: { + getListView().currentIndex = position + if(type === 0){ + text_year.text = model + list_view_2.model = generateMonthArray(1,12) + text_month.text = list_view_2.model[list_view_2.currentIndex] + + list_view_3.model = generateMonthDaysArray(list_view_1.model[list_view_1.currentIndex],list_view_2.model[list_view_2.currentIndex]) + text_day.text = list_view_3.model[list_view_3.currentIndex] + } + if(type === 1){ + text_month.text = model + list_view_3.model = generateMonthDaysArray(list_view_1.model[list_view_1.currentIndex],list_view_2.model[list_view_2.currentIndex]) + text_day.text = list_view_3.model[list_view_3.currentIndex] + + } + if(type === 2){ + text_day.text = model } - }else{ - return FluTheme.dark ? "#FFFFFF" : "#1A1A1A" } } - anchors.centerIn: parent + FluText{ + text:model + color: { + if(getListView().currentIndex === position){ + if(FluTheme.dark){ + return Qt.rgba(0,0,0,1) + }else{ + return Qt.rgba(1,1,1,1) + } + }else{ + return FluTheme.dark ? "#FFFFFF" : "#1A1A1A" + } + } + anchors.centerIn: parent + } } } } + + ListView{ + id:list_view_1 + width: 100 + height: parent.height + boundsBehavior:Flickable.StopAtBounds + ScrollBar.vertical: FluScrollBar {} + model: generateYearArray(1924,2048) + clip: true + preferredHighlightBegin: 0 + preferredHighlightEnd: 0 + highlightMoveDuration: 0 + visible: showYear + delegate: Loader{ + property var model: modelData + property int type:0 + property int position:index + sourceComponent: list_delegate + } + } + Rectangle{ + width: 1 + height: parent.height + color: dividerColor + } + ListView{ + id:list_view_2 + width: showYear ? 100 : 150 + height: parent.height + clip: true + ScrollBar.vertical: FluScrollBar {} + preferredHighlightBegin: 0 + preferredHighlightEnd: 0 + highlightMoveDuration: 0 + boundsBehavior:Flickable.StopAtBounds + delegate: Loader{ + property var model: modelData + property int type:1 + property int position:index + sourceComponent: list_delegate + } + } + Rectangle{ + width: 1 + height: parent.height + color: dividerColor + } + ListView{ + id:list_view_3 + width: showYear ? 100 : 150 + height: parent.height + clip: true + preferredHighlightBegin: 0 + preferredHighlightEnd: 0 + highlightMoveDuration: 0 + ScrollBar.vertical: FluScrollBar {} + Layout.alignment: Qt.AlignVCenter + boundsBehavior:Flickable.StopAtBounds + delegate: Loader{ + property var model: modelData + property int type:2 + property int position:index + sourceComponent: list_delegate + } + } } - ListView{ - id:list_view_1 - width: 100 - height: parent.height - boundsBehavior:Flickable.StopAtBounds - ScrollBar.vertical: FluScrollBar {} - model: generateYearArray(1924,2048) - clip: true - preferredHighlightBegin: 0 - preferredHighlightEnd: 0 - highlightMoveDuration: 0 - visible: showYear - delegate: Loader{ - property var model: modelData - property int type:0 - property int position:index - sourceComponent: list_delegate - } - } Rectangle{ - width: 1 - height: parent.height + width: parent.width + height: 1 + anchors.top: layout_content.bottom color: dividerColor } - ListView{ - id:list_view_2 - width: showYear ? 100 : 150 - height: parent.height - clip: true - ScrollBar.vertical: FluScrollBar {} - preferredHighlightBegin: 0 - preferredHighlightEnd: 0 - highlightMoveDuration: 0 - boundsBehavior:Flickable.StopAtBounds - delegate: Loader{ - property var model: modelData - property int type:1 - property int position:index - sourceComponent: list_delegate - } - } + Rectangle{ - width: 1 - height: parent.height - color: dividerColor - } - ListView{ - id:list_view_3 - width: showYear ? 100 : 150 - height: parent.height - clip: true - preferredHighlightBegin: 0 - preferredHighlightEnd: 0 - highlightMoveDuration: 0 - ScrollBar.vertical: FluScrollBar {} - Layout.alignment: Qt.AlignVCenter - boundsBehavior:Flickable.StopAtBounds - delegate: Loader{ - property var model: modelData - property int type:2 - property int position:index - sourceComponent: list_delegate - } - } - } - - Rectangle{ - width: parent.width - height: 1 - anchors.top: layout_content.bottom - color: dividerColor - } - - Rectangle{ - id:layout_actions - height: 40 - radius: 5 - color: FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1) - anchors{ - bottom:parent.bottom - left: parent.left - right: parent.right - } - - Item { - id:divider - width: 1 - height: parent.height - anchors.centerIn: parent - } - - FluButton{ + id:layout_actions + height: 40 + radius: 5 + color: FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1) anchors{ + bottom:parent.bottom left: parent.left - leftMargin: 20 - rightMargin: 10 - right: divider.left - verticalCenter: parent.verticalCenter - } - text: "取消" - onClicked: { - popup.close() - } - } - - FluFilledButton{ - anchors{ right: parent.right - left: divider.right - rightMargin: 20 - leftMargin: 10 - verticalCenter: parent.verticalCenter } - text: "确定" - onClicked: { - changeFlag = false - popup.close() + + Item { + id:divider + width: 1 + height: parent.height + anchors.centerIn: parent + } + + FluButton{ + anchors{ + left: parent.left + leftMargin: 20 + rightMargin: 10 + right: divider.left + verticalCenter: parent.verticalCenter + } + text: "取消" + onClicked: { + popup.close() + } + } + + FluFilledButton{ + anchors{ + right: parent.right + left: divider.right + rightMargin: 20 + leftMargin: 10 + verticalCenter: parent.verticalCenter + } + text: "确定" + onClicked: { + changeFlag = false + popup.close() + } } } } @@ -362,12 +374,12 @@ Rectangle { text_day.text = day var pos = root.mapToItem(null, 0, 0) - if(window.height>pos.y+root.height+popup.height){ + if(window.height>pos.y+root.height+container.height){ popup.y = root.height - } else if(pos.y>popup.height){ - popup.y = -popup.height + } else if(pos.y>container.height){ + popup.y = -container.height } else { - popup.y = window.height-(pos.y+popup.height) + popup.y = window.height-(pos.y+container.height) } popup.open() } diff --git a/src/controls/FluDropDownButton.qml b/src/controls/FluDropDownButton.qml index 146506d..b25a85d 100644 --- a/src/controls/FluDropDownButton.qml +++ b/src/controls/FluDropDownButton.qml @@ -76,12 +76,13 @@ FluControl { onClicked: { var pos = control.mapToItem(null, 0, 0) - if(window.height>pos.y+control.height+menu.height){ + var containerHeight = menu.getContainerHeight() + if(window.height>pos.y+control.height+containerHeight){ menu.y = control.height - }else if(pos.y>menu.height){ - menu.y = -menu.height + }else if(pos.y>containerHeight){ + menu.y = -containerHeight }else{ - menu.y = window.height-(pos.y+menu.height) + menu.y = window.height-(pos.y+containerHeight) } menu.open() } diff --git a/src/controls/FluExpander.qml b/src/controls/FluExpander.qml index bcce701..36765be 100644 --- a/src/controls/FluExpander.qml +++ b/src/controls/FluExpander.qml @@ -84,7 +84,9 @@ Item { height: expand ? contentHeight : 0 Behavior on height { NumberAnimation{ - duration: 150 + duration: 167 + easing.type: Easing.Bezier + easing.bezierCurve: expand ? [ 0, 0, 0, 1 ] : [ 1, 0, 0, 0 ] } } } diff --git a/src/controls/FluMenu.qml b/src/controls/FluMenu.qml index f8b0e32..7068318 100644 --- a/src/controls/FluMenu.qml +++ b/src/controls/FluMenu.qml @@ -12,38 +12,50 @@ Menu { modal:true dim:false enter: Transition { - NumberAnimation { - property: "y" - from:0 - to:popup.y - duration: animEnabled ? 150 : 0 - } + reversible: true NumberAnimation { property: "opacity" from:0 to:1 - duration: animEnabled ? 150 : 0 + duration: 83 + } + } + + exit:Transition { + NumberAnimation { + property: "opacity" + from:1 + to:0 + duration: 83 + } + } + + background:Item{ + FluShadow{ + radius: 5 } } - background:Item{} contentItem: Item { + clip: true Rectangle{ anchors.fill: parent color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,0.97) : Qt.rgba(237/255,237/255,237/255,0.97) radius: 5 } - FluShadow{ - radius: 5 - } Column{ + id:container spacing: 5 topPadding: 5 bottomPadding: 5 width: popup.width - id:container function closePopup(){ popup.close() } } } + + function getContainerHeight(){ + return container.height + } + } diff --git a/src/controls/FluNavigationView.qml b/src/controls/FluNavigationView.qml index 5c07d68..ca9d1e6 100644 --- a/src/controls/FluNavigationView.qml +++ b/src/controls/FluNavigationView.qml @@ -120,7 +120,9 @@ Item { } Behavior on height { NumberAnimation{ - duration: 150 + duration: 167 + easing.type: Easing.Bezier + easing.bezierCurve: [ 0, 0, 0, 1 ] } } } @@ -137,7 +139,9 @@ Item { } Behavior on height { NumberAnimation{ - duration: 150 + duration: 167 + easing.type: Easing.Bezier + easing.bezierCurve: [ 0, 0, 0, 1 ] } } width: layout_list.width @@ -206,12 +210,12 @@ Item { visible:opacity Behavior on opacity { NumberAnimation{ - duration: 220 + duration: 83 } } Behavior on rotation { NumberAnimation{ - duration: 150 + duration: 83 } } } @@ -290,7 +294,7 @@ Item { visible:opacity Behavior on opacity { NumberAnimation{ - duration: 220 + duration: 83 } } anchors{ @@ -313,7 +317,9 @@ Item { Item{ Behavior on height { NumberAnimation{ - duration: 150 + duration: 167 + easing.type: Easing.Bezier + easing.bezierCurve: [ 0, 0, 0, 1 ] } } clip: true @@ -442,7 +448,7 @@ Item { visible:opacity Behavior on opacity { NumberAnimation{ - duration: 220 + duration: 83 } } color:{ @@ -504,7 +510,9 @@ Item { } Behavior on Layout.preferredWidth{ NumberAnimation{ - duration: 220 + duration: 167 + easing.type: Easing.Bezier + easing.bezierCurve: [ 0, 0, 0, 1 ] } } } @@ -544,10 +552,24 @@ Item { clip: true popEnter : Transition{} popExit : Transition { - NumberAnimation { properties: "y"; from: 0; to: nav_swipe.height; duration: 200 } + NumberAnimation { + properties: "y" + from: 0 + to: nav_swipe.height + duration: 167 + easing.type: Easing.Bezier + easing.bezierCurve: [ 1, 0, 0, 0 ] + } } pushEnter: Transition { - NumberAnimation { properties: "y"; from: nav_swipe.height; to: 0; duration: 200 } + NumberAnimation { + properties: "y"; + from: nav_swipe.height; + to: 0 + duration: 167 + easing.type: Easing.Bezier + easing.bezierCurve: [ 0, 0, 0, 1 ] + } } pushExit : Transition{} replaceEnter : Transition{} @@ -573,13 +595,17 @@ Item { } Behavior on width{ NumberAnimation{ - duration: 150 + duration: 167 + easing.type: Easing.Bezier + easing.bezierCurve: [ 0, 0, 0, 1 ] } } Behavior on x{ id:anim_layout_list_x NumberAnimation{ - duration: 150 + duration: 167 + easing.type: Easing.Bezier + easing.bezierCurve: [ 0, 0, 0, 1 ] } } anchors{ @@ -626,7 +652,7 @@ Item { visible: opacity Behavior on opacity{ NumberAnimation{ - duration: 100 + duration: 83 } } } @@ -636,7 +662,7 @@ Item { opacity:d.isCompactAndNotPanel Behavior on opacity{ NumberAnimation{ - duration: 220 + duration: 83 } } hoverColor: FluTheme.dark ? Qt.rgba(1,1,1,0.03) : Qt.rgba(0,0,0,0.03) @@ -774,7 +800,7 @@ Item { property: "opacity" from:0 to:1 - duration: 150 + duration: 83 } } background: Rectangle{ diff --git a/src/controls/FluPivot.qml b/src/controls/FluPivot.qml index baf0a2b..fc9301d 100644 --- a/src/controls/FluPivot.qml +++ b/src/controls/FluPivot.qml @@ -7,6 +7,7 @@ Item { id:control default property alias content: d.children + property alias currentIndex: nav_list.currentIndex property color normalColor: FluTheme.dark ? FluColors.Grey120 : FluColors.Grey120 property color hoverColor: FluTheme.dark ? FluColors.Grey10 : FluColors.Black diff --git a/src/controls/FluTimePicker.qml b/src/controls/FluTimePicker.qml index 54f55b6..9339e05 100644 --- a/src/controls/FluTimePicker.qml +++ b/src/controls/FluTimePicker.qml @@ -99,243 +99,249 @@ Rectangle { text:"AM/PM" } - Popup{ + Menu{ id:popup - width: 300 - height: 340 + width: container.width + height: container.height modal: true dim:false enter: Transition { + reversible: true NumberAnimation { property: "opacity" from:0 to:1 - duration: 150 - } - NumberAnimation { - property: "y" - from:0 - to:popup.y - duration: 150 + duration: 83 } } - background:Item{} - contentItem: Rectangle{ - id:container - anchors.fill: parent - radius: 4 - color: FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1) - MouseArea{ - anchors.fill: parent + + exit:Transition { + NumberAnimation { + property: "opacity" + from:1 + to:0 + duration: 83 } + } + background:Item{ FluShadow{ radius: 4 } + } + contentItem: Item{ + clip: true + Rectangle{ + id:container + height: 340 + width: 300 + radius: 4 + color: FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1) + MouseArea{ + anchors.fill: parent + } + RowLayout{ + id:layout_content + spacing: 0 + width: parent.width + height: 300 - RowLayout{ - id:layout_content - spacing: 0 - width: parent.width - height: 300 + Component{ + id:list_delegate - Component{ - id:list_delegate + Item{ + height:38 + width:getListView().width - Item{ - height:38 - width:getListView().width - - function getListView(){ - if(type === 0) - return list_view_1 - if(type === 1) - return list_view_2 - if(type === 2) - return list_view_3 - } - - - Rectangle{ - anchors.fill: parent - anchors.topMargin: 2 - anchors.bottomMargin: 2 - anchors.leftMargin: 5 - anchors.rightMargin: 5 - color: { - if(getListView().currentIndex === position){ - if(FluTheme.dark){ - return item_mouse.containsMouse ? Qt.darker(FluTheme.primaryColor.lighter,1.1) : FluTheme.primaryColor.lighter - }else{ - return item_mouse.containsMouse ? Qt.lighter(FluTheme.primaryColor.dark,1.1): FluTheme.primaryColor.dark - } - } - if(item_mouse.containsMouse){ - return FluTheme.dark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1) - } - return FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0) + function getListView(){ + if(type === 0) + return list_view_1 + if(type === 1) + return list_view_2 + if(type === 2) + return list_view_3 } - radius: 3 - MouseArea{ - id:item_mouse + + + Rectangle{ anchors.fill: parent - hoverEnabled: true - onClicked: { - getListView().currentIndex = position - if(type === 0){ - text_hour.text = model - } - if(type === 1){ - text_minute.text = model - } - if(type === 2){ - text_ampm.text = model - } - } - } - FluText{ - text:model - color: { + anchors.topMargin: 2 + anchors.bottomMargin: 2 + anchors.leftMargin: 5 + anchors.rightMargin: 5 + color: { if(getListView().currentIndex === position){ if(FluTheme.dark){ - return Qt.rgba(0,0,0,1) + return item_mouse.containsMouse ? Qt.darker(FluTheme.primaryColor.lighter,1.1) : FluTheme.primaryColor.lighter }else{ - return Qt.rgba(1,1,1,1) + return item_mouse.containsMouse ? Qt.lighter(FluTheme.primaryColor.dark,1.1): FluTheme.primaryColor.dark + } + } + if(item_mouse.containsMouse){ + return FluTheme.dark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1) + } + return FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0) + } + radius: 3 + MouseArea{ + id:item_mouse + anchors.fill: parent + hoverEnabled: true + onClicked: { + getListView().currentIndex = position + if(type === 0){ + text_hour.text = model + } + if(type === 1){ + text_minute.text = model + } + if(type === 2){ + text_ampm.text = model } - }else{ - return FluTheme.dark ? "#FFFFFF" : "#1A1A1A" } } - anchors.centerIn: parent + FluText{ + text:model + color: { + if(getListView().currentIndex === position){ + if(FluTheme.dark){ + return Qt.rgba(0,0,0,1) + }else{ + return Qt.rgba(1,1,1,1) + } + }else{ + return FluTheme.dark ? "#FFFFFF" : "#1A1A1A" + } + } + anchors.centerIn: parent + } } } } + + ListView{ + id:list_view_1 + width: isH ? 100 : 150 + height: parent.height + boundsBehavior:Flickable.StopAtBounds + ScrollBar.vertical: FluScrollBar {} + preferredHighlightBegin: 0 + preferredHighlightEnd: 0 + highlightMoveDuration: 0 + model: isH ? generateArray(1,12) : generateArray(0,23) + clip: true + delegate: Loader{ + property var model: modelData + property int type:0 + property int position:index + sourceComponent: list_delegate + } + } + Rectangle{ + width: 1 + height: parent.height + color: dividerColor + } + ListView{ + id:list_view_2 + width: isH ? 100 : 150 + height: parent.height + model: generateArray(0,59) + clip: true + preferredHighlightBegin: 0 + preferredHighlightEnd: 0 + highlightMoveDuration: 0 + ScrollBar.vertical: FluScrollBar {} + boundsBehavior:Flickable.StopAtBounds + delegate: Loader{ + property var model: modelData + property int type:1 + property int position:index + sourceComponent: list_delegate + } + } + Rectangle{ + width: 1 + height: parent.height + color: dividerColor + visible: isH + } + ListView{ + id:list_view_3 + width: 100 + height: 76 + model: ["上午","下午"] + clip: true + visible: isH + preferredHighlightBegin: 0 + preferredHighlightEnd: 0 + highlightMoveDuration: 0 + ScrollBar.vertical: FluScrollBar {} + Layout.alignment: Qt.AlignVCenter + boundsBehavior:Flickable.StopAtBounds + delegate: Loader{ + property var model: modelData + property int type:2 + property int position:index + sourceComponent: list_delegate + } + } } - ListView{ - id:list_view_1 - width: isH ? 100 : 150 - height: parent.height - boundsBehavior:Flickable.StopAtBounds - ScrollBar.vertical: FluScrollBar {} - preferredHighlightBegin: 0 - preferredHighlightEnd: 0 - highlightMoveDuration: 0 - model: isH ? generateArray(1,12) : generateArray(0,23) - clip: true - delegate: Loader{ - property var model: modelData - property int type:0 - property int position:index - sourceComponent: list_delegate - } - } Rectangle{ - width: 1 - height: parent.height + width: parent.width + height: 1 + anchors.top: layout_content.bottom color: dividerColor } - ListView{ - id:list_view_2 - width: isH ? 100 : 150 - height: parent.height - model: generateArray(0,59) - clip: true - preferredHighlightBegin: 0 - preferredHighlightEnd: 0 - highlightMoveDuration: 0 - ScrollBar.vertical: FluScrollBar {} - boundsBehavior:Flickable.StopAtBounds - delegate: Loader{ - property var model: modelData - property int type:1 - property int position:index - sourceComponent: list_delegate - } - } + Rectangle{ - width: 1 - height: parent.height - color: dividerColor - visible: isH - } - ListView{ - id:list_view_3 - width: 100 - height: 76 - model: ["上午","下午"] - clip: true - visible: isH - preferredHighlightBegin: 0 - preferredHighlightEnd: 0 - highlightMoveDuration: 0 - ScrollBar.vertical: FluScrollBar {} - Layout.alignment: Qt.AlignVCenter - boundsBehavior:Flickable.StopAtBounds - delegate: Loader{ - property var model: modelData - property int type:2 - property int position:index - sourceComponent: list_delegate - } - } - } - - Rectangle{ - width: parent.width - height: 1 - anchors.top: layout_content.bottom - color: dividerColor - } - - Rectangle{ - id:layout_actions - height: 40 - radius: 5 - color: FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1) - anchors{ - bottom:parent.bottom - left: parent.left - right: parent.right - } - - Item { - id:divider - width: 1 - height: parent.height - anchors.centerIn: parent - } - - FluButton{ + id:layout_actions + height: 40 + radius: 5 + color: FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1) anchors{ + bottom:parent.bottom left: parent.left - leftMargin: 20 - rightMargin: 10 - right: divider.left - verticalCenter: parent.verticalCenter - } - text: "取消" - onClicked: { - popup.close() - } - } - - FluFilledButton{ - anchors{ right: parent.right - left: divider.right - rightMargin: 20 - leftMargin: 10 - verticalCenter: parent.verticalCenter } - text: "确定" - onClicked: { - changeFlag = false - popup.close() + + Item { + id:divider + width: 1 + height: parent.height + anchors.centerIn: parent + } + + FluButton{ + anchors{ + left: parent.left + leftMargin: 20 + rightMargin: 10 + right: divider.left + verticalCenter: parent.verticalCenter + } + text: "取消" + onClicked: { + popup.close() + } + } + + FluFilledButton{ + anchors{ + right: parent.right + left: divider.right + rightMargin: 20 + leftMargin: 10 + verticalCenter: parent.verticalCenter + } + text: "确定" + onClicked: { + changeFlag = false + popup.close() + } } } - } - } y:35 function showPopup() { @@ -373,12 +379,12 @@ Rectangle { } var pos = root.mapToItem(null, 0, 0) - if(window.height>pos.y+root.height+popup.height){ + if(window.height>pos.y+root.height+container.height){ popup.y = root.height - } else if(pos.y>popup.height){ - popup.y = -popup.height + } else if(pos.y>container.height){ + popup.y = -container.height } else { - popup.y = window.height-(pos.y+popup.height) + popup.y = window.height-(pos.y+container.height) } popup.open() } diff --git a/src/controls/FluToggleSwitch.qml b/src/controls/FluToggleSwitch.qml index 04e6e7b..f8b005f 100644 --- a/src/controls/FluToggleSwitch.qml +++ b/src/controls/FluToggleSwitch.qml @@ -72,16 +72,32 @@ FluControl { anchors.verticalCenter: parent.verticalCenter color: selected ? "#FFFFFF" : "#666666" Behavior on anchors.leftMargin { - NumberAnimation { duration: 150 } + NumberAnimation { + duration: 167 + easing.type: Easing.Bezier + easing.bezierCurve: [ 1, 0, 0, 0 ] + } } Behavior on anchors.rightMargin { - NumberAnimation { duration: 150 } + NumberAnimation { + duration: 167 + easing.type: Easing.Bezier + easing.bezierCurve: [ 1, 0, 0, 0 ] + } } Behavior on width { - NumberAnimation { duration: 150 } + NumberAnimation { + duration: 167 + easing.type: Easing.Bezier + easing.bezierCurve: [ 1, 0, 0, 0 ] + } } Behavior on scale { - NumberAnimation { duration: 150 } + NumberAnimation { + duration: 167 + easing.type: Easing.Bezier + easing.bezierCurve: [ 1, 0, 0, 0 ] + } } } } diff --git a/src/controls/FluWindow.qml b/src/controls/FluWindow.qml index 9d11d39..5c403ef 100644 --- a/src/controls/FluWindow.qml +++ b/src/controls/FluWindow.qml @@ -51,7 +51,7 @@ ApplicationWindow { onClosing: (event)=>{ if(closeDestory){ - helper.destoryWindow() + destoryWindow() }else{ visible = false event.accepted = false @@ -94,6 +94,10 @@ ApplicationWindow { return helper.createRegister(window,path) } + function destoryWindow(){ + helper.destoryWindow() + } + function onResult(data){ if(pageRegister){ pageRegister.onResult(data)