periodic table

2025-07-09 09:41:13 +07:00
parent b0750506cf
commit 8ca2ed6781
4 changed files with 408 additions and 14 deletions
@@ -7,6 +7,7 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Effects
 import QtQuick.Layouts
+import Qt5Compat.GraphicalEffects
 import Quickshell.Io
 import Quickshell
 import Quickshell.Widgets
@@ -15,11 +16,22 @@ import Quickshell.Hyprland

 Scope { // Scope
    id: root
+    property var tabButtonList: [
+        {
+            "icon": "keyboard",
+            "name": qsTr("Keybinds")
+        },
+        {
+            "icon": "experiment",
+            "name": qsTr("Elements")
+        },
+    ]
+    property int selectedTab: 0

    Loader {
        id: cheatsheetLoader
        active: false
-        
+
        sourceComponent: PanelWindow { // Window
            id: cheatsheetRoot
            visible: cheatsheetLoader.active
@@ -32,7 +44,7 @@ Scope { // Scope
            }

            function hide() {
-                cheatsheetLoader.active = false
+                cheatsheetLoader.active = false;
            }
            exclusiveZone: 0
            implicitWidth: cheatsheetBackground.width + Appearance.sizes.elevationMargin * 2
@@ -48,14 +60,14 @@ Scope { // Scope

            HyprlandFocusGrab { // Click outside to close
                id: grab
-                windows: [ cheatsheetRoot ]
+                windows: [cheatsheetRoot]
                active: cheatsheetRoot.visible
                onCleared: () => {
-                    if (!active) cheatsheetRoot.hide()
+                    if (!active)
+                        cheatsheetRoot.hide();
                }
            }

-
            // Background
            StyledRectangularShadow {
                target: cheatsheetBackground
@@ -71,9 +83,24 @@ Scope { // Scope
                implicitWidth: cheatsheetColumnLayout.implicitWidth + padding * 2
                implicitHeight: cheatsheetColumnLayout.implicitHeight + padding * 2

-                Keys.onPressed: (event) => { // Esc to close
+                Keys.onPressed: event => { // Esc to close
                    if (event.key === Qt.Key_Escape) {
-                        cheatsheetRoot.hide()
+                        cheatsheetRoot.hide();
+                    }
+                    if (event.modifiers === Qt.ControlModifier) {
+                        if (event.key === Qt.Key_PageDown) {
+                            root.selectedTab = Math.min(root.selectedTab + 1, root.tabButtonList.length - 1);
+                            event.accepted = true;
+                        } else if (event.key === Qt.Key_PageUp) {
+                            root.selectedTab = Math.max(root.selectedTab - 1, 0);
+                            event.accepted = true;
+                        } else if (event.key === Qt.Key_Tab) {
+                            root.selectedTab = (root.selectedTab + 1) % root.tabButtonList.length;
+                            event.accepted = true;
+                        } else if (event.key === Qt.Key_Backtab) {
+                            root.selectedTab = (root.selectedTab - 1 + root.tabButtonList.length) % root.tabButtonList.length;
+                            event.accepted = true;
+                        }
                    }
                }

@@ -91,7 +118,7 @@ Scope { // Scope
                    }

                    onClicked: {
-                        cheatsheetRoot.hide()
+                        cheatsheetRoot.hide();
                    }

                    contentItem: MaterialSymbol {
@@ -114,10 +141,50 @@ Scope { // Scope
                        font.pixelSize: Appearance.font.pixelSize.title
                        text: qsTr("Cheat sheet")
                    }
-                    CheatsheetKeybinds {}
+                    PrimaryTabBar { // Tab strip
+                        id: tabBar
+                        tabButtonList: root.tabButtonList
+                        externalTrackedTab: root.selectedTab
+                        function onCurrentIndexChanged(currentIndex) {
+                            root.selectedTab = currentIndex;
+                        }
+                    }
+
+                    SwipeView { // Content pages
+                        id: swipeView
+                        Layout.topMargin: 5
+                        Layout.fillWidth: true
+                        Layout.fillHeight: true
+                        spacing: 10
+
+                        Behavior on implicitWidth {
+                            animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                        }
+                        Behavior on implicitHeight {
+                            animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                        }
+
+                        currentIndex: tabBar.externalTrackedTab
+                        onCurrentIndexChanged: {
+                            tabBar.enableIndicatorAnimation = true;
+                            root.selectedTab = currentIndex;
+                        }
+
+                        clip: true
+                        layer.enabled: true
+                        layer.effect: OpacityMask {
+                            maskSource: Rectangle {
+                                width: swipeView.width
+                                height: swipeView.height
+                                radius: Appearance.rounding.small
+                            }
+                        }
+
+                        CheatsheetKeybinds {}
+                        CheatsheetPeriodicTable {}
+                    }
                }
            }
-
        }
    }

@@ -125,15 +192,15 @@ Scope { // Scope
        target: "cheatsheet"

        function toggle(): void {
-            cheatsheetLoader.active = !cheatsheetLoader.active
+            cheatsheetLoader.active = !cheatsheetLoader.active;
        }

        function close(): void {
-            cheatsheetLoader.active = false
+            cheatsheetLoader.active = false;
        }

        function open(): void {
-            cheatsheetLoader.active = true
+            cheatsheetLoader.active = true;
        }
    }

@@ -163,5 +230,4 @@ Scope { // Scope
            cheatsheetLoader.active = false;
        }
    }
-
 }