feat(components): add RailActionButton, AboutDialog, and register new types

- Add RailActionButton reusable side-rail button component - Add AboutDialog popup component - Register new types in qmldir files - Register TransportBar in components qmldir
2026-06-29 14:56:16 -07:00
parent 3fef31efff
commit c622a4cc23
4 changed files with 209 additions and 0 deletions
@@ -0,0 +1,137 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import ISC
+
+Popup {
+    id: root
+    modal: true
+    dim: true
+    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
+    width: 420
+    height: 340
+    anchors.centerIn: Overlay.overlay
+
+    background: Rectangle {
+        radius: Theme.radiusMd
+        color: Theme.cardBackground
+        border.color: Theme.cardBorder
+        border.width: 1
+    }
+
+    ColumnLayout {
+        anchors.fill: parent
+        anchors.margins: 24
+        spacing: 16
+
+        // ── Title ──
+        Label {
+            text: "About"
+            font.pixelSize: Theme.font2xl
+            font.bold: true
+            color: Theme.headingColor
+        }
+
+        // ── App info ──
+        ColumnLayout {
+            spacing: 4
+
+            Label {
+                text: "ISenseCloud (ISC)"
+                font.pixelSize: Theme.fontLg
+                color: Theme.headingColor
+            }
+
+            Label {
+                text: "Version 0.1.0"
+                font.pixelSize: Theme.fontSm
+                color: Theme.bodyColor
+            }
+
+            Label {
+                text: "Temperature-sensing wafer monitoring"
+                font.pixelSize: Theme.fontSm
+                color: Theme.bodyColor
+                wrapMode: Text.WordWrap
+                Layout.fillWidth: true
+            }
+        }
+
+        // ── Separator ──
+        Rectangle {
+            Layout.fillWidth: true
+            height: 1
+            color: Theme.cardBorder
+        }
+
+        // ── License grid ──
+        Rectangle {
+            Layout.fillWidth: true
+            Layout.preferredHeight: 100
+            radius: Theme.radiusSm
+            color: Theme.panelBackground
+            border.color: Theme.cardBorder
+            border.width: 1
+
+            ColumnLayout {
+                anchors.fill: parent
+                anchors.margins: 10
+                spacing: 2
+
+                Label {
+                    text: "LICENSE"
+                    color: Theme.panelTitleText
+                    font.pixelSize: Theme.fontXs
+                    font.letterSpacing: 0.5
+                }
+
+                // Grid header
+                RowLayout {
+                    Layout.fillWidth: true
+                    spacing: 4
+                    Label { text: "Wafer SN"; font.pixelSize: Theme.fontXs; font.bold: true; color: Theme.subheadingColor; Layout.preferredWidth: 100 }
+                    Label { text: "Mfg Date"; font.pixelSize: Theme.fontXs; font.bold: true; color: Theme.subheadingColor; Layout.preferredWidth: 80 }
+                    Label { text: "Level"; font.pixelSize: Theme.fontXs; font.bold: true; color: Theme.subheadingColor; Layout.preferredWidth: 60 }
+                }
+
+                Rectangle {
+                    Layout.fillWidth: true
+                    height: 1
+                    color: Theme.softBorder
+                }
+
+                Label {
+                    text: "No license loaded"
+                    color: Theme.bodyColor
+                    font.pixelSize: Theme.fontSm
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                    verticalAlignment: Text.AlignVCenter
+                    horizontalAlignment: Text.AlignHCenter
+                }
+            }
+        }
+
+        // ── Close ──
+        Button {
+            text: "Close"
+            Layout.alignment: Qt.AlignRight
+            Layout.preferredWidth: 100
+            Layout.preferredHeight: 32
+            onClicked: root.close()
+
+            background: Rectangle {
+                radius: Theme.radiusSm
+                color: parent.hovered ? Theme.buttonNeutralHover : Theme.buttonNeutralBackground
+                border.color: Theme.fieldBorder
+                border.width: 1
+            }
+            contentItem: Label {
+                text: parent.text
+                color: Theme.buttonNeutralText
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+            }
+        }
+    }
+}
@@ -0,0 +1,70 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.impl
+import ISC
+
+// ===== Rail Action Button =====
+// Reusable pill-style button for rail action panels.
+// Icon left, uppercase label, fixed height, hover/active backgrounds.
+Rectangle {
+    id: root
+
+    property string label: ""
+    property string iconSource: ""
+    property bool destructive: false
+    property color _textColor: !root.enabled ? Theme.sideMutedText
+        : root.destructive ? Theme.statusErrorColor
+        : Theme.headingColor
+
+    signal clicked()
+
+    implicitHeight: Theme.sideButtonHeight
+    radius: 8
+    color: mouseArea.containsMouse || mouseArea.pressed
+        ? Theme.sideActiveBackground : "transparent"
+    border.width: 0
+
+    Behavior on color {
+        ColorAnimation { duration: 100 }
+    }
+
+    Row {
+        anchors.fill: parent
+        anchors.leftMargin: 12
+        anchors.rightMargin: 12
+        spacing: 10
+
+        IconImage {
+            anchors.verticalCenter: parent.verticalCenter
+            width: 18
+            height: 18
+            source: root.iconSource
+            sourceSize.width: 18
+            sourceSize.height: 18
+            color: root._textColor
+            opacity: root.enabled ? 0.85 : 0.35
+        }
+
+        Label {
+            anchors.verticalCenter: parent.verticalCenter
+            text: root.label
+            color: root._textColor
+            font.family: Theme.uiFontFamily
+            font.pixelSize: Theme.fontSm
+            font.bold: true
+            font.letterSpacing: 1.2
+            opacity: root.enabled ? 1.0 : 0.4
+            elide: Text.ElideRight
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        hoverEnabled: root.enabled
+        cursorShape: root.enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
+        onClicked: {
+            if (root.enabled) root.clicked()
+        }
+    }
+}
@@ -5,3 +5,4 @@ ReadoutPanel 1.0 ReadoutPanel.qml
 TransportBar 1.0 TransportBar.qml
 WaferMapView 1.0 WaferMapView.qml
 ReplaceSensorDialog 1.0 ReplaceSensorDialog.qml
+RailActionButton 1.0 RailActionButton.qml
@@ -4,6 +4,7 @@ module ISC
 # ===== Root Components =====
 Main 1.0 Main.qml
 HomePage 1.0 HomePage.qml
+AboutDialog 1.0 AboutDialog.qml

 # ===== Singleton Theme =====
 singleton Theme 1.0 Theme.qml