noctalia
This commit is contained in:
Domipoke
@@ -0,0 +1,426 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import Quickshell
|
||||
import qs.Commons
|
||||
import qs.Services.Keyboard
|
||||
import qs.Services.Noctalia
|
||||
import qs.Services.UI
|
||||
import qs.Widgets
|
||||
|
||||
Rectangle {
|
||||
id: root
|
||||
focus: true
|
||||
property var clipboardItem: null
|
||||
property var pluginApi: null
|
||||
property var screen: null
|
||||
property var panelRoot: null
|
||||
property string clipboardId: clipboardItem ? clipboardItem.id : ""
|
||||
property string mime: clipboardItem ? clipboardItem.mime : ""
|
||||
property string preview: clipboardItem ? clipboardItem.preview : ""
|
||||
property string pinnedImageDataUrl: "" // For pinned images - data URL
|
||||
|
||||
// Content type detection
|
||||
readonly property bool isImage: clipboardItem && clipboardItem.isImage
|
||||
readonly property bool isColor: {
|
||||
if (isImage || !preview)
|
||||
return false;
|
||||
const trimmed = preview.trim();
|
||||
return /^#[A-Fa-f0-9]{6}$/.test(trimmed) || /^#[A-Fa-f0-9]{3}$/.test(trimmed) || /^[A-Fa-f0-9]{6}$/.test(trimmed) || /^rgba?\(.*\)$/i.test(trimmed);
|
||||
}
|
||||
readonly property bool isLink: !isImage && !isColor && preview && /^https?:\/\//.test(preview.trim())
|
||||
readonly property bool isCode: !isImage && !isColor && !isLink && preview && (preview.includes("function") || preview.includes("import ") || preview.includes("const ") || preview.includes("let ") || preview.includes("var ") || preview.includes("class ") || preview.includes("def ") || preview.includes("return ") || /^[\{\[\(<]/.test(preview.trim()))
|
||||
readonly property bool isEmoji: {
|
||||
if (isImage || isColor || isLink || isCode || !preview)
|
||||
return false;
|
||||
const trimmed = preview.trim();
|
||||
return trimmed.length <= 4 && trimmed.charCodeAt(0) > 255;
|
||||
}
|
||||
readonly property bool isFile: !isImage && !isColor && !isLink && !isCode && !isEmoji && preview && /^(\/|~|file:\/\/)/.test(preview.trim())
|
||||
readonly property bool isText: !isImage && !isColor && !isLink && !isCode && !isEmoji && !isFile
|
||||
|
||||
// Helper to safely access Color singleton
|
||||
function getColor(propName, fallback) {
|
||||
if (typeof Color !== "undefined" && Color[propName])
|
||||
return Color[propName];
|
||||
return fallback;
|
||||
}
|
||||
|
||||
readonly property string colorValue: {
|
||||
if (!isColor || !preview)
|
||||
return "";
|
||||
const trimmed = preview.trim();
|
||||
if (/^#[A-Fa-f0-9]{3,6}$/.test(trimmed))
|
||||
return trimmed;
|
||||
if (/^[A-Fa-f0-9]{6}$/.test(trimmed))
|
||||
return "#" + trimmed;
|
||||
return trimmed;
|
||||
}
|
||||
|
||||
readonly property string typeLabel: isImage ? "Image" : isColor ? "Color" : isLink ? "Link" : isCode ? "Code" : isEmoji ? "Emoji" : isFile ? "File" : "Text"
|
||||
readonly property string typeIcon: isImage ? "photo" : isColor ? "palette" : isLink ? "link" : isCode ? "code" : isEmoji ? "mood-smile" : isFile ? "file" : "align-left"
|
||||
|
||||
// Default colors per card type
|
||||
readonly property var defaultCardColors: {
|
||||
"Text": {
|
||||
bg: "mOutline",
|
||||
separator: "mSurface",
|
||||
fg: "mOnSurface"
|
||||
},
|
||||
"Image": {
|
||||
bg: "mTertiary",
|
||||
separator: "mSurface",
|
||||
fg: "mOnTertiary"
|
||||
},
|
||||
"Link": {
|
||||
bg: "mPrimary",
|
||||
separator: "mSurface",
|
||||
fg: "mOnPrimary"
|
||||
},
|
||||
"Code": {
|
||||
bg: "mSecondary",
|
||||
separator: "mSurface",
|
||||
fg: "mOnSecondary"
|
||||
},
|
||||
"Color": {
|
||||
bg: "mSecondary",
|
||||
separator: "mSurface",
|
||||
fg: "mOnSecondary"
|
||||
},
|
||||
"Emoji": {
|
||||
bg: "mHover",
|
||||
separator: "mSurface",
|
||||
fg: "mOnHover"
|
||||
},
|
||||
"File": {
|
||||
bg: "mError",
|
||||
separator: "mSurface",
|
||||
fg: "mOnError"
|
||||
}
|
||||
}
|
||||
|
||||
// Get color setting for current card type
|
||||
function getCardColorSetting(colorType) {
|
||||
const settings = pluginApi?.pluginSettings?.cardColors;
|
||||
const customColors = pluginApi?.pluginSettings?.customColors;
|
||||
const cardType = typeLabel;
|
||||
|
||||
if (settings && settings[cardType] && settings[cardType][colorType]) {
|
||||
const colorKey = settings[cardType][colorType];
|
||||
if (colorKey === "custom" && customColors && customColors[cardType]) {
|
||||
return customColors[cardType][colorType] || "#888888";
|
||||
}
|
||||
return getColor(colorKey, defaultCardColors[cardType]?.[colorType] || "#888888");
|
||||
}
|
||||
|
||||
// Fallback to default
|
||||
const defaultKey = defaultCardColors[cardType]?.[colorType];
|
||||
return getColor(defaultKey, "#888888");
|
||||
}
|
||||
|
||||
// Colors from settings or defaults
|
||||
readonly property color accentColor: getCardColorSetting("bg")
|
||||
readonly property color accentFgColor: getCardColorSetting("fg")
|
||||
readonly property color separatorColor: getCardColorSetting("separator")
|
||||
|
||||
signal clicked
|
||||
signal deleteClicked
|
||||
signal addToTodoClicked
|
||||
signal pinClicked
|
||||
signal rightClicked
|
||||
property bool selected: false
|
||||
property bool enableTodoIntegration: false
|
||||
property bool isPinned: false
|
||||
|
||||
width: 250
|
||||
height: parent.height
|
||||
|
||||
// Get ToDo pages from plugin
|
||||
function getTodoPages() {
|
||||
const todoApi = PluginService.getPluginAPI("todo");
|
||||
if (!todoApi || !todoApi.pluginSettings || !todoApi.pluginSettings.pages) {
|
||||
return [
|
||||
{
|
||||
id: 0,
|
||||
name: "General"
|
||||
}
|
||||
];
|
||||
}
|
||||
return todoApi.pluginSettings.pages;
|
||||
}
|
||||
|
||||
// Build menu model from ToDo pages
|
||||
function buildTodoMenuModel() {
|
||||
const pages = getTodoPages();
|
||||
const model = [];
|
||||
for (let i = 0; i < pages.length; i++) {
|
||||
model.push({
|
||||
"label": pages[i].name,
|
||||
"action": "page-" + pages[i].id,
|
||||
"icon": "checkbox"
|
||||
});
|
||||
}
|
||||
return model;
|
||||
}
|
||||
|
||||
// Anchor point for context menu positioning
|
||||
Item {
|
||||
id: menuAnchor
|
||||
width: 0
|
||||
height: 0
|
||||
visible: false
|
||||
}
|
||||
|
||||
// Context menu for ToDo page selection
|
||||
NPopupContextMenu {
|
||||
id: todoContextMenu
|
||||
screen: root.screen
|
||||
anchorItem: menuAnchor
|
||||
|
||||
onTriggered: action => {
|
||||
todoContextMenu.visible = false;
|
||||
|
||||
if (action.startsWith("page-")) {
|
||||
const pageId = parseInt(action.replace("page-", ""));
|
||||
if (root.preview) {
|
||||
root.pluginApi?.mainInstance?.addTodoWithText(root.preview.substring(0, 200), pageId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onVisibleChanged: {
|
||||
if (!visible) {
|
||||
// Cleanup when menu closes
|
||||
root.focus = true;
|
||||
if (root.panelRoot && root.panelRoot.activeContextMenu === todoContextMenu) {
|
||||
root.panelRoot.activeContextMenu = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Click outside to close menu
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
enabled: todoContextMenu.visible
|
||||
z: todoContextMenu.visible ? 999 : -1
|
||||
onClicked: {
|
||||
todoContextMenu.visible = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Body background - Same as accent color
|
||||
color: selected ? Qt.darker(accentColor, 1.1) : (mouseArea.containsMouse ? Qt.lighter(accentColor, 1.1) : accentColor)
|
||||
|
||||
radius: (typeof Style !== "undefined") ? Style.radiusM : 16
|
||||
border.width: 2
|
||||
border.color: accentColor // Border same as background
|
||||
|
||||
// Visual indicator for pinned status (small icon in corner)
|
||||
NIcon {
|
||||
visible: root.isPinned
|
||||
anchors.top: parent.top
|
||||
anchors.right: parent.right
|
||||
anchors.margins: 4
|
||||
z: 100
|
||||
icon: "pin-filled"
|
||||
pointSize: 10
|
||||
color: root.accentFgColor
|
||||
opacity: 0.6
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
spacing: 0
|
||||
|
||||
Rectangle {
|
||||
id: headerBar
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 35
|
||||
color: root.accentColor // Header same as background
|
||||
topLeftRadius: (typeof Style !== "undefined") ? Style.radiusM : 16
|
||||
topRightRadius: (typeof Style !== "undefined") ? Style.radiusM : 16
|
||||
bottomLeftRadius: 0
|
||||
bottomRightRadius: 0
|
||||
|
||||
RowLayout {
|
||||
id: headerContent
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.margins: 8
|
||||
spacing: 8
|
||||
NIcon {
|
||||
icon: root.typeIcon
|
||||
pointSize: 13
|
||||
color: root.accentFgColor
|
||||
}
|
||||
NText {
|
||||
text: root.typeLabel
|
||||
color: root.accentFgColor
|
||||
font.bold: true
|
||||
}
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
NIconButton {
|
||||
id: todoButton
|
||||
visible: root.enableTodoIntegration && !root.isImage
|
||||
icon: "checkbox"
|
||||
tooltipText: pluginApi?.tr("card.add-todo")
|
||||
colorFg: root.accentFgColor
|
||||
colorBg: "transparent"
|
||||
colorBgHover: Qt.rgba(0, 0, 0, 0.1)
|
||||
colorBorder: "transparent"
|
||||
colorBorderHover: "transparent"
|
||||
onClicked: {
|
||||
// Close any previously open menu
|
||||
if (root.panelRoot && root.panelRoot.activeContextMenu) {
|
||||
root.panelRoot.activeContextMenu.visible = false;
|
||||
}
|
||||
|
||||
// Position anchor at button location
|
||||
const pos = todoButton.mapToItem(root, 0, todoButton.height);
|
||||
menuAnchor.x = pos.x;
|
||||
menuAnchor.y = pos.y;
|
||||
|
||||
// Show menu and register it as active
|
||||
todoContextMenu.model = root.buildTodoMenuModel();
|
||||
todoContextMenu.visible = true;
|
||||
if (root.panelRoot) {
|
||||
root.panelRoot.activeContextMenu = todoContextMenu;
|
||||
}
|
||||
}
|
||||
}
|
||||
NIconButton {
|
||||
visible: !root.isPinned && (pluginApi?.pluginSettings?.pincardsEnabled ?? true) // Hide pin button if pinned or if feature disabled
|
||||
icon: "pin"
|
||||
tooltipText: pluginApi?.tr("card.pin")
|
||||
colorFg: root.accentFgColor
|
||||
colorBg: "transparent"
|
||||
colorBgHover: Qt.rgba(0, 0, 0, 0.1)
|
||||
colorBorder: "transparent"
|
||||
colorBorderHover: "transparent"
|
||||
onClicked: root.pinClicked()
|
||||
}
|
||||
NIconButton {
|
||||
icon: "trash"
|
||||
tooltipText: pluginApi?.tr("card.delete")
|
||||
colorFg: root.accentFgColor
|
||||
colorBg: "transparent"
|
||||
colorBgHover: Qt.rgba(0, 0, 0, 0.1)
|
||||
colorBorder: "transparent"
|
||||
colorBorderHover: "transparent"
|
||||
onClicked: root.deleteClicked()
|
||||
}
|
||||
}
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
z: -1
|
||||
acceptedButtons: Qt.LeftButton | Qt.RightButton
|
||||
onClicked: mouse => {
|
||||
if (mouse.button === Qt.RightButton) {
|
||||
root.rightClicked()
|
||||
} else {
|
||||
root.clicked()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: parent.width - 10
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
height: 1
|
||||
gradient: Gradient {
|
||||
orientation: Gradient.Horizontal
|
||||
GradientStop {
|
||||
position: 0.0
|
||||
color: "transparent"
|
||||
}
|
||||
GradientStop {
|
||||
position: 0.5
|
||||
color: root.separatorColor
|
||||
}
|
||||
GradientStop {
|
||||
position: 1.0
|
||||
color: "transparent"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
Layout.margins: 8
|
||||
clip: true
|
||||
MouseArea {
|
||||
id: mouseArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
acceptedButtons: Qt.LeftButton | Qt.RightButton
|
||||
onClicked: mouse => {
|
||||
if (mouse.button === Qt.RightButton) {
|
||||
root.rightClicked()
|
||||
} else {
|
||||
root.clicked()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
visible: root.isColor
|
||||
anchors.fill: parent
|
||||
radius: 8
|
||||
color: root.colorValue || "transparent"
|
||||
border.width: 1
|
||||
border.color: root.accentFgColor // Use FG color for border contrast
|
||||
}
|
||||
|
||||
NText {
|
||||
visible: !root.isColor && !root.isImage
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
text: root.preview || ""
|
||||
wrapMode: Text.Wrap
|
||||
elide: Text.ElideRight
|
||||
color: root.accentFgColor
|
||||
font.pointSize: 11
|
||||
verticalAlignment: Text.AlignTop
|
||||
}
|
||||
|
||||
NImageRounded {
|
||||
visible: root.isImage
|
||||
anchors.fill: parent
|
||||
radius: 8
|
||||
imageFillMode: Image.PreserveAspectFit
|
||||
imagePath: {
|
||||
// For pinned images, use data URL directly
|
||||
if (root.pinnedImageDataUrl) {
|
||||
return root.pinnedImageDataUrl;
|
||||
}
|
||||
// For cliphist images, use cache (reactive binding via imageCacheRevision)
|
||||
if (root.isImage && root.pluginApi?.mainInstance) {
|
||||
// Force re-evaluation when cache changes by referencing revision
|
||||
const revision = root.pluginApi.mainInstance.imageCacheRevision;
|
||||
const cache = root.pluginApi.mainInstance.imageCache;
|
||||
return cache[root.clipboardId] || "";
|
||||
}
|
||||
return "";
|
||||
}
|
||||
Component.onCompleted: {
|
||||
// Only decode if not pinned (pinned images have data URL already)
|
||||
if (!root.pinnedImageDataUrl && root.isImage && root.clipboardId && root.pluginApi?.mainInstance) {
|
||||
root.pluginApi.mainInstance.decodeToDataUrl(root.clipboardId, root.mime, null);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Component.onDestruction: {
|
||||
if (todoContextMenu && todoContextMenu.visible) {
|
||||
todoContextMenu.visible = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user