frst

1 files changed, 124 insertions, 0 deletions

diff --git a/noctalia/.config/plugins/keybind-cheatsheet/ColorPill.qml b/noctalia/.config/plugins/keybind-cheatsheet/ColorPill.qml
new file mode 100644
index 0000000..98f21fa
--- /dev/null
+++ b/noctalia/.config/plugins/keybind-cheatsheet/ColorPill.qml
@@ -0,0 +1,124 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import qs.Commons
+import qs.Widgets
+
+// Compact color pill: circle + hex code + optional paste icon.
+// Opens NColorPickerDialog on click. Used in pairs (bg + text) per keybind category.
+Rectangle {
+  id: pill
+
+  property var screen
+  property string hexValue: ""
+  property color displayColor: "#888888"
+  property bool textMode: false
+  property string letter: "A"
+  property color textModeBg: "#444444"
+  property string clipboardHex: ""
+  property string placeholderText: ""
+
+  signal colorPicked(color value)
+  signal pasteRequested(string hex)
+
+  readonly property bool hasClipboardColor: clipboardHex.length > 0 &&
+                                            clipboardHex.toLowerCase() !== hexValue.toLowerCase()
+
+  implicitWidth: 150
+  implicitHeight: Math.round(Style.baseWidgetSize * 1.1)
+
+  radius: Style.iRadiusM
+  color: Color.mSurface
+  border.color: mouseArea.containsMouse ? Color.mPrimary : Color.mOutline
+  border.width: Style.borderS
+
+  MouseArea {
+    id: mouseArea
+    anchors.fill: parent
+    hoverEnabled: true
+    cursorShape: Qt.PointingHandCursor
+    onClicked: {
+      var startColor = pill.hexValue.length > 0 ? pill.hexValue : pill.displayColor;
+      var dialog = dialogFactory.createObject(Overlay.overlay, {
+        "selectedColor": startColor,
+        "screen": pill.screen
+      });
+      if (!dialog) return;
+      dialog.colorSelected.connect(function(c) {
+        pill.colorPicked(c);
+      });
+      dialog.open();
+    }
+  }
+
+  Component {
+    id: dialogFactory
+    NColorPickerDialog {}
+  }
+
+  RowLayout {
+    anchors.fill: parent
+    anchors.leftMargin: Style.marginS
+    anchors.rightMargin: Style.marginS
+    spacing: Style.marginS
+
+    Rectangle {
+      Layout.preferredWidth: pill.height * 0.62
+      Layout.preferredHeight: pill.height * 0.62
+      radius: width / 2
+      color: pill.textMode ? pill.textModeBg : pill.displayColor
+      border.color: Color.mOutline
+      border.width: Style.borderS
+
+      NText {
+        anchors.centerIn: parent
+        visible: pill.textMode
+        text: pill.letter
+        color: pill.displayColor
+        font.weight: Style.fontWeightBold
+        pointSize: Style.fontSizeS
+      }
+    }
+
+    NText {
+      Layout.fillWidth: true
+      Layout.alignment: Qt.AlignVCenter
+      text: pill.hexValue.length > 0
+            ? pill.hexValue.toUpperCase()
+            : (pill.placeholderText.length > 0 ? pill.placeholderText : "auto")
+      family: Settings.data.ui.fontFixed
+      color: pill.hexValue.length > 0 ? Color.mOnSurface : Color.mOnSurfaceVariant
+      pointSize: Style.fontSizeXS
+      elide: Text.ElideRight
+    }
+
+    Rectangle {
+      Layout.preferredWidth: pill.height * 0.62
+      Layout.preferredHeight: pill.height * 0.62
+      visible: pill.hasClipboardColor
+      radius: width / 2
+      color: pasteArea.containsMouse ? Color.mPrimary : Color.mSurfaceVariant
+      border.color: Color.mOutline
+      border.width: Style.borderS
+
+      NIcon {
+        anchors.centerIn: parent
+        icon: "clipboard"
+        color: pasteArea.containsMouse ? Color.mOnPrimary : Color.mOnSurfaceVariant
+        pointSize: Style.fontSizeS
+      }
+
+      MouseArea {
+        id: pasteArea
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onClicked: pill.pasteRequested(pill.clipboardHex)
+      }
+
+      ToolTip.visible: pasteArea.containsMouse && pill.clipboardHex.length > 0
+      ToolTip.text: pill.clipboardHex.toUpperCase()
+      ToolTip.delay: 400
+    }
+  }
+}