Improve context menu

2026-09-22 19:15:08 +03:00 · 2025-08-23 20:32:22 +03:00
parent 320c6bbe95
commit b939067114
6 changed files with 135 additions and 111 deletions
@@ -27,4 +27,88 @@

 button, input {
    font: inherit;
+}
+
+.context-menu {
+    position: fixed;
+    background-color: $color-dark-surface-container;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+    padding: 0.5rem 0;
+    z-index: 1000;
+    display: none;
+    min-width: 150px;
+    max-width: 200px;
+    white-space: nowrap;
+    user-select: none;
+
+    .context-menu-item {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.75rem 1rem;
+        cursor: pointer;
+        color: $color-dark-on-surface;
+        transition: background-color 0.2s ease;
+        font-size: 0.9rem;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+
+        .material-symbols {
+            font-size: 1.1rem;
+            flex-shrink: 0;
+        }
+    }
+
+    &.pos-top-left {
+        transform-origin: top right;
+    }
+    &.pos-top-right {
+        transform-origin: top left;
+    }
+    &.pos-bottom-left {
+        transform-origin: bottom right;
+    }
+    &.pos-bottom-right {
+        transform-origin: bottom left;
+    }
+
+    &.open {
+        animation: context-menu-open 0.25s ease;
+    }
+
+    @keyframes context-menu-open {
+        0% {
+            opacity: 0;
+            transform: scale(0.5);
+        }
+
+        100% {
+            opacity: 1;
+            transform: scale(1);
+        }
+    }
+}
+
+// Dialog content styles
+.dialog-content {
+    padding: 1.5rem;
+
+    h3 {
+        margin: 0 0 1rem 0;
+        color: $color-dark-on-surface;
+        font-size: 1.2rem;
+    }
+
+    .dialog-actions {
+        display: flex;
+        gap: 0.75rem;
+        justify-content: flex-end;
+        margin-top: 1.5rem;
+    }
 }