RinUI 0.0.9__py3-none-any.whl

RinUI/components/MenusAndToolbars/MenuItem.qml

@@ -0,0 +1,119 @@
+import QtQuick 2.15
+import QtQuick.Controls.Basic 2.15
+import QtQuick.Layouts 2.15
+import "../../themes"
+import "../../components"
+
+
+MenuItem {
+    id: root
+    implicitWidth: {
+        const leftMargin = 16;
+        const arrowWidth = arrow.visible ? arrow.width + 16 : root.checked ? indicator.width + 16 : 0;
+        const rightMargin = 16;
+        return leftMargin + contentItem.implicitWidth + arrowWidth + rightMargin;
+    }
+    implicitHeight: Math.max(implicitContentHeight + topPadding + bottomPadding,
+                             34)
+
+    property MenuItemGroup group  // 组
+
+    checkable: group
+    checked: group ? group.checkedButton === root : false
+
+    onGroupChanged: {
+        if (group)
+            group.register(root)
+    }
+
+    Component.onDestruction: {
+        if (group)
+            group.unregister(root)
+    }
+
+    onTriggered: {
+        if (group)
+            group.updateCheck(root)
+    }
+
+    property var parentMenu: undefined
+
+    // accessibility
+    FocusIndicator {
+        control: parent
+        anchors.margins: 5
+        anchors.topMargin: 0
+        anchors.bottomMargin: 0
+    }
+
+    arrow: IconWidget {
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.right: parent.right
+        anchors.margins: 16
+        color: Theme.currentTheme.colors.textSecondaryColor
+        visible: root.subMenu
+        icon: "ic_fluent_chevron_right_20_regular"
+        size: 12
+    }
+
+    indicator: IconWidget {
+        id: indicator
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.margins: 18
+        icon: group ? group.exclusive ? "ic_fluent_circle_20_filled" : "ic_fluent_checkmark_20_filled"
+            : "ic_fluent_checkmark_20_filled"
+        width: 16
+        size: group ? group.exclusive ? 7 : 16 : 16
+        visible: root.checked
+    }
+
+    // 内容 / Content //
+    contentItem: RowLayout {
+        id: row
+        spacing: 16
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.leftMargin: (iconWidget.size ? 16 : 0) + (checkable ? indicator.width + 16 : 0)
+        anchors.margins: 16
+
+        IconWidget {
+            id: iconWidget
+            size: icon || source ? menuText.font.pixelSize * 1.25 : 0  // 图标大小 / Icon Size
+            icon: root.icon.name
+            source: root.icon.source
+        }
+        Text {
+            id: menuText
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+            typography: Typography.Body
+            text: root.text
+            wrapMode: Text.NoWrap
+        }
+        Text {
+            id: shortcutText
+            Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
+            typography: Typography.Caption
+            text: root.action ? root.action.shortcut : ""
+            color: Theme.currentTheme.colors.textSecondaryColor
+            visible: text
+        }
+    }
+
+    // 背景 / Background //
+    background: Rectangle {
+        anchors.fill: parent
+        anchors.margins: 5
+        anchors.topMargin: 0
+        anchors.bottomMargin: 0
+        radius: Theme.currentTheme.appearance.buttonRadius
+        color: enabled ? pressed ? Theme.currentTheme.colors.subtleTertiaryColor
+            : hovered
+            ? Theme.currentTheme.colors.subtleSecondaryColor
+            : "transparent" : "transparent"
+
+        Behavior on color { ColorAnimation { duration: Utils.animationSpeed; easing.type: Easing.OutQuart } }
+    }
+}

RinUI/components/MenusAndToolbars/MenuItemGroup.qml

@@ -0,0 +1,43 @@
+import QtQuick 2.15
+
+QtObject {
+    id: root
+
+    // 用法同ButtonGroup
+    property bool exclusive: true
+    property var items: []
+    property Item checkedItem: null
+    readonly property int checkState: {
+        let count = 0;
+        for (let b of items)
+            if (b.checked)
+                count++;
+        return count === 0 ? Qt.Unchecked :
+               count === items.length ? Qt.Checked :
+               Qt.PartiallyChecked;
+    }
+
+
+    // 方法 / functions //
+    function register(button) {
+        if (items.indexOf(button) === -1)
+            items.push(button)
+    }
+
+    function unregister(button) {
+        const idx = items.indexOf(button)
+        if (idx !== -1)
+            items.splice(idx, 1)
+    }
+
+    function updateCheck(button) {
+        if (exclusive) {
+            for (let b of items) {
+                b.checked = (b === button)
+            }
+            checkedItem = button
+        } else {
+            checkedItem = button.checked ? button : null
+        }
+    }
+}

RinUI/components/MenusAndToolbars/MenuSeparator.qml

@@ -0,0 +1,14 @@
+import QtQuick 2.15
+import QtQuick.Controls.Basic 2.15
+import "../../themes"
+import "../../components"
+
+
+MenuSeparator {
+    id: root
+
+    contentItem: Rectangle {
+        implicitHeight: 1
+        color: Theme.currentTheme.colors.dividerBorderColor
+    }
+}

RinUI/components/MenusAndToolbars/ToolSeparator.qml

@@ -0,0 +1,17 @@
+import QtQuick 2.15
+import QtQuick.Controls.Basic 2.15
+import "../../themes"
+import "../../components"
+
+
+ToolSeparator {
+    padding: vertical ? 2 : 2
+    topPadding: vertical ? 2 : 2
+    bottomPadding: vertical ? 2 : 2
+
+    contentItem: Rectangle {
+        implicitWidth: parent.vertical ? 1 : 16
+        implicitHeight: parent.vertical ? 16 : 1
+        color: Theme.currentTheme.colors.dividerBorderColor
+    }
+}

RinUI/components/Navigation/ErrorPage.qml

@@ -0,0 +1,48 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 2.15
+import RinUI
+
+FluentPage {
+    id: errorPage
+
+    property string errorMessage: "ERROR_MSG"
+    property string page: "page"
+
+    spacing: 4
+
+    Item {
+        height: 64
+    }
+
+    Text {
+        Layout.alignment: Qt.AlignHCenter
+        typography: Typography.Subtitle
+        text: qsTr("Sorry, something went wrong!")
+    }
+
+    Text {
+        Layout.preferredWidth: parent.width * 0.8
+        Layout.alignment: Qt.AlignHCenter
+        horizontalAlignment: Text.AlignHCenter
+        wrapMode: Text.WordWrap
+        typography: Typography.Body
+        text: page + qsTr(" load failed! \n\n Because of ") + errorMessage + qsTr("\nPlease try again later.")
+    }
+
+    Item {
+        height: 8
+    }
+
+
+    Button {
+        Layout.alignment: Qt.AlignHCenter
+        id: retryButton
+        text: qsTr("Retry")
+        // buttonType: "primary"
+        onClicked: {
+            // 重新加载 Home 页
+            safePush(errorPage.page, true)
+        }
+    }
+}

RinUI/components/Navigation/NavigationBar.qml

@@ -0,0 +1,179 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import "../../components"
+import "../../themes"
+
+
+Item {
+    id: navigationBar
+    // implicitWidth: collapsed ? 40 : expandWidth
+    height: parent.height
+
+    property bool collapsed: false
+    property var navigationItems: [
+        // {title: "Title", page: "path/to/page.qml", icon: undefined}
+    ]
+
+    // property int currentSubIndex: -1
+    property bool titleBarEnabled: true
+    property int expandWidth: 280
+    property int minimumExpandWidth: 900
+
+    property alias windowTitle: titleLabel.text
+    property alias windowIcon: iconLabel.source
+    property int windowWidth: minimumExpandWidth
+    property var stackView: parent.stackView
+
+    property string currentPage: ""  // 当前页面的URL
+    property var lastPages: []  // 历史页面的URL栈
+
+    function isNotOverMinimumWidth() {  // 判断窗口是否小于最小宽度
+        return windowWidth < minimumExpandWidth;
+    }
+
+    // 展开收缩动画 //
+    width: collapsed ? 40 : expandWidth
+    implicitWidth: isNotOverMinimumWidth() ? 40 : collapsed ? 40 : expandWidth
+
+    Behavior on width {
+        NumberAnimation {
+            duration: Utils.animationSpeed
+            easing.type: Easing.OutQuint
+        }
+    }
+    Behavior on implicitWidth {
+        NumberAnimation {
+            duration: Utils.animationSpeed
+            easing.type: Easing.OutQuint
+        }
+    }
+
+    Rectangle {
+        id: background
+        anchors.fill: parent
+        anchors.margins: -5
+        anchors.topMargin: -title.height
+        radius: Theme.currentTheme.appearance.windowRadius
+        color: Theme.currentTheme.colors.backgroundAcrylicColor
+        border.color: Theme.currentTheme.colors.flyoutBorderColor
+        z: -1
+        visible: isNotOverMinimumWidth() && !collapsed ? 1 : 0
+
+        Behavior on visible {
+            NumberAnimation {
+                duration: collapsed ? Utils.animationSpeed / 2 : 50
+            }
+        }
+
+        layer.enabled: true
+        layer.effect: Shadow {
+            style: "flyout"
+            source: background
+        }
+    }
+
+    Row {
+        id: title
+        anchors.left: parent.left
+        anchors.bottom: parent.top
+        height: titleBarHeight
+        spacing: 16
+        visible: navigationBar.titleBarEnabled
+
+        // 返回按钮
+        ToolButton {
+            flat: true
+            anchors.verticalCenter: parent.verticalCenter
+            icon.name: "ic_fluent_arrow_left_20_regular"
+            onClicked: navigationView.safePop()
+            width: 40
+            height: 40
+            size: 16
+            enabled: lastPages.length > 1
+
+            ToolTip {
+                parent: parent
+                delay: 500
+                visible: parent.hovered
+                text: qsTr("Back")
+            }
+        }
+
+        //图标
+        IconWidget {
+            id: iconLabel
+            size: 16
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        //标题
+        Text {
+            id: titleLabel
+            anchors.verticalCenter:  parent.verticalCenter
+
+            typography: Typography.Caption
+            // text: title
+        }
+    }
+
+    // 收起切换按钮
+    ToolButton {
+        id: collapseButton
+        flat: true
+        width: 40
+        height: 38
+        // icon.name: collapsed ? "ic_fluent_chevron_right_20_regular" : "ic_fluent_chevron_left_20_regular"
+        icon.name: "ic_fluent_navigation_20_regular"
+        size: 19
+
+        onClicked: {
+            collapsed = !collapsed
+        }
+
+        ToolTip {
+            parent: parent
+            delay: 500
+            visible: parent.hovered && !parent.pressed
+            text: collapsed ? qsTr("Open Navigation") : qsTr("Close Navigation")
+      }
+    }
+
+    Flickable {
+        id: flickable
+        anchors.fill: parent
+        anchors.topMargin: 40
+        contentWidth: parent.width
+        contentHeight: navigationColumn.implicitHeight
+        clip: true
+
+        Column {
+            id: navigationColumn
+            width: flickable.width
+            spacing: 2
+
+            Repeater {
+                model: navigationBar.navigationItems
+                delegate: NavigationItem {
+                    id: item
+                    itemData: modelData
+                    currentPage: navigationBar.stackView
+
+                    // 子菜单重置
+                    Connections {
+                        target: navigationBar
+                        function onCollapsedChanged() {
+                            if (!navigationBar.collapsed) {
+                                return
+                            }
+                            item.collapsed = navigationBar.collapsed
+                        }
+                    }
+                }
+            }
+        }
+
+        ScrollBar.vertical: ScrollBar {
+            policy: ScrollBar.AsNeeded
+        }
+    }
+}

RinUI/components/Navigation/NavigationItem.qml

@@ -0,0 +1,193 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import "../../themes"
+import "../../components"
+
+Item {
+    id: navigationItems
+    property var itemData
+    readonly property bool subItem: itemData.subItems && itemData.subItems.length > 0
+    property var currentPage
+    property bool highlighted: String(navigationBar.currentPage) === String(itemData.page) || (collapsed && subItemHighlighted)
+
+    property bool subItemHighlighted: {
+        if (!subItem) return false;
+        for (let i = 0; i < itemData.subItems.length; i++) {
+            if (String(itemData.subItems[i].page) === String(navigationBar.currentPage)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    property bool collapsed: true  // 是否折叠
+
+    height: 40 + (!collapsed && subItem ? subItemsColumn.height : 0)
+    width: parent ? parent.width : 200
+
+    Button {
+        id: itemBtn
+        // anchors.fill: parent
+        width: parent.width
+        height: 37
+        anchors.topMargin: 2
+        anchors.bottomMargin: 2
+        clip: true
+        flat: true
+        accessibliityIndicator: false
+        background.opacity: navigationItems.highlighted ? 1 : hovered ? 1 : 0
+
+        // accessibility
+        FocusIndicator {
+            control: parent
+            anchors.margins: 2
+        }
+
+        Row {
+            id: left
+            spacing: 16
+            anchors.left: parent.left
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.leftMargin: 11
+            anchors.topMargin: 6
+            anchors.bottomMargin: 8
+
+            IconWidget {
+                id: icon
+                anchors.verticalCenter: parent.verticalCenter
+                size: itemData.icon || itemData.source ? 19 : 0
+                icon: itemData.icon || ""
+                source: itemData.source || ""
+            }
+
+            Text {
+                id: text
+                anchors.verticalCenter: parent.verticalCenter
+                typography: Typography.Body
+                text: itemData.title
+                clip: true
+                opacity: navigationBar.collapsed ? 0 : 1
+                wrapMode: Text.NoWrap
+                horizontalAlignment: Text.AlignLeft
+
+                Behavior on x {
+                    NumberAnimation {
+                        duration: Utils.appearanceSpeed
+                        easing.type: Easing.InOutQuint
+                    }
+                }
+
+                Behavior on opacity {
+                    NumberAnimation {
+                        duration: Utils.appearanceSpeed
+                    }
+                }
+            }
+        }
+
+        // 提示
+        ToolTip {
+            visible: navigationBar.collapsed && itemBtn.hovered
+            delay: 500
+            text: itemData.title
+        }
+
+        Indicator {
+            id: indicator
+            y: (itemBtn.height + 3) / 2 - indicator.height / 2 - 2
+            currentItemHeight: itemBtn.height + 3
+            visible: highlighted ? 1 : 0
+            width: 3
+        }
+
+        // 展开按钮
+        ToolButton {
+            id: expandBtn
+            focusPolicy: Qt.NoFocus
+            anchors.right: parent.right
+            anchors.verticalCenter: parent.verticalCenter
+            width: parent.height
+            height: parent.height
+            hoverable: false
+            size: 14
+            icon.name: "ic_fluent_chevron_down_20_filled"
+            accessibliityIndicator: false
+
+            FocusIndicator {
+                control: parent
+                anchors.margins: 2
+            }
+
+            transform: Rotation {
+                angle: collapsed ? 0 : 180 ; origin.x: 37/2; origin.y: 37/2
+                Behavior on angle { NumberAnimation { duration: Utils.animationSpeed; easing.type: Easing.OutQuint } }
+            }
+
+            visible: subItem && !navigationBar.collapsed
+            opacity: 0.7
+
+            onClicked: { collapsed = !collapsed }
+        }
+
+        onClicked: {
+            if (subItem) {
+                if (!navigationBar.collapsed) {
+                    collapsed = !collapsed
+                } else {
+                    subMenu.open()
+                }
+            }
+            if (itemData.page && currentPage && !navigationItems.highlighted) {
+                // 记录上一次的索引
+                navigationView.safePush(itemData.page, true)
+            }
+        }
+    }
+
+    // 动画 / Animation //
+    Behavior on height { NumberAnimation { duration: Utils.animationSpeed; easing.type: Easing.OutQuint } }
+
+    // 折叠菜单
+    Menu {
+        id: subMenu
+        position: Position.Right
+        Repeater {
+            id: subMenuRepeater
+            model: itemData.subItems
+            delegate: MenuItem {
+                text: modelData.title
+                onClicked: {
+                    if (modelData.page && navigationItems.currentPage) {
+                        navigationView.safePush(modelData.page)
+                    }
+                }
+            }
+        }
+    }
+
+    // 递归处理子项
+    Column {
+        id: subItemsColumn
+        opacity: !collapsed && subItem
+        spacing: 2
+        anchors.top: itemBtn.bottom
+        width: parent.width
+        anchors.topMargin: 1
+        anchors.leftMargin: 16
+        Behavior on opacity { NumberAnimation { duration: Utils.animationSpeed; easing.type: Easing.OutQuint } }
+
+        Repeater {
+            id: subItemsRepeater
+            model: itemData.subItems
+            delegate: NavigationSubItem {
+                id: subItems
+                itemData: modelData
+                currentPage: navigationItems.currentPage
+            }
+        }
+
+        Item {
+            width: parent.width
+            height: 1
+        }
+    }
+}