context menu ui wip

FifthTry · Aug 14, 2024 · 6bf4635 · 6bf4635
1 parent a0782a4
commit 6bf4635
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 13 deletions.
diff --git a/components/editor/command-k/command-editor.mjs b/components/editor/command-k/command-editor.mjs
@@ -3,6 +3,7 @@ import {keymap} from "@codemirror/view";
 import {insertNewlineAndIndent} from "@codemirror/commands";
 import {repl, repl_parser} from "./language";
 import {autocompletion, completionKeymap} from '@codemirror/autocomplete';
+import {update_context_menu_path} from "../panels/package/package-content";
 
 export class CommandEditor extends HTMLElement {
     constructor() {
@@ -44,6 +45,7 @@ window.ide_open_command_k = (cmd) => {
         selection: {anchor: cmd.length, head: cmd.length}
     });
     window.command_editor.focus();
+    ide_clear_context_menu();
 }
 
 function get_extensions() {
@@ -110,6 +112,7 @@ window.ide_run_command_parser = run_parser;
 document.addEventListener("keydown", (e) => {
     if (e.key === "Escape") {
         ftd.set_value("ui.fifthtry.com/components/editor/vars#command-k", false);
+        ide_clear_context_menu();
     } else if (e.key === "s" && (e.metaKey || e.ctrlKey)) {
         ide_open_command_k("push-file " + ftd.get_value("ui.fifthtry.com/components/editor/vars#current-file"));
         e.preventDefault();
@@ -119,3 +122,9 @@ document.addEventListener("keydown", (e) => {
         window.command_editor.focus();
     }
 });
+
+window.ide_clear_context_menu = () => {
+    ftd.set_value("ui.fifthtry.com/components/editor/vars#context-menu-path", "");
+    ftd.set_value("ui.fifthtry.com/components/editor/vars#context-menu-visible", "hidden");
+    update_context_menu_path("");
+}
diff --git a/components/editor/editor-bundle.js b/components/editor/editor-bundle.js
diff --git a/components/editor/editor-bundle.js.map b/components/editor/editor-bundle.js.map
diff --git a/components/editor/editor.mjs b/components/editor/editor.mjs
@@ -12,6 +12,7 @@ import {
     initialize_package_ui,
     update_current_file,
     update_modified_files,
+    update_context_menu_path,
     update_only_show_modified_files,
 } from "./panels/package/package-content";
 import {indentationMarkers} from '@replit/codemirror-indentation-markers';
@@ -124,6 +125,7 @@ function v(name) {
 
 const VAR_PACKAGE_DATA = v`package-data`;
 const VAR_CURRENT_FILE = v`current-file`;
+const VAR_CONTEXT_MENU_PATH = v`context-menu-path`;
 const VAR_MODIFIED_FILES = v`modified-files`;
 const VAR_ONLY_MODIFIED_FILES = v`only-show-modified-files`;
 const VAR_PREVIEW_CONTENT = v`preview-content`;
@@ -134,6 +136,7 @@ window.ide_update_ftd_var = function (name, value) {
     if (name === VAR_PACKAGE_DATA) update_package_content(value.folders, value.files);
     if (name === VAR_CURRENT_FILE) update_current_file(value);
     if (name === VAR_MODIFIED_FILES) update_modified_files(value);
+    if (name === VAR_CONTEXT_MENU_PATH) update_context_menu_path(value);
 
     if (name === VAR_PREVIEW_CONTENT) {
         console.log('ide_update_ftd_var', name, "<html omitted>");

diff --git a/components/editor/ftd2.mjs b/components/editor/ftd2.mjs
@@ -75,7 +75,6 @@ export class FastnTik {
     }
 
     set(new_value) {
-        console.log("set called", this.#value, new_value)
         this.set_key([], new_value)
     }
 
@@ -90,7 +89,6 @@ export class FastnTik {
 
     set_key(key, new_value) {
         if (key.length === 0) {
-            console.log("set_key called", this.#value, key, new_value);
             this.#value = new_value;
             return this.notify_preact();
         }
@@ -104,7 +102,6 @@ export class FastnTik {
 
         f[key[i]] = new_value; // the last element
 
-        console.log("set_key called", this.#value, key, new_value);
         this.notify_preact()
 
         // earlier we had a ctx tracking based approach, where we also passed

diff --git a/components/editor/panels/package/index.ftd b/components/editor/panels/package/index.ftd
@@ -122,14 +122,16 @@ if: { vars.context-menu-visible == "folder" }
 
 
 
+
+
 -- component cm:
 children c:
 
 -- ftd.column:
 anchor: window
 left.px: $vars.context-menu-left
 top.px: $vars.context-menu-top
-$on-click-outside$: $ftd.set-string($a = $vars.context-menu-visible, v = hidden)
+$on-click-outside$: $vars.clear-context-menu()
 z-index: 100
 children: $cm.c
 background.solid: white
@@ -140,11 +142,23 @@ border-color: #f5f5f5
 
 -- end: cm
 
+
+
+
+
+
 -- component file-context-menu:
 
 -- cm:
 
--- ftd.text: File Context Menu
+-- ftd.text: Push
+if: { ftd.list_contains(vars.modified-files, vars.context-menu-path) }
+$on-click$: $vars.open-command-k-with-current-file(cmd=push-file)
+
+-- ftd.text: Delete
+$on-click$: $vars.open-command-k-with-current-file(cmd=delete-file)
+
+;; -- ftd.text: Rename
 
 -- end: cm
 
@@ -154,11 +168,14 @@ border-color: #f5f5f5
 
 
 
+
+
 -- component folder-context-menu:
 
 -- cm:
 
--- ftd.text: Folder Context Menu
+-- ftd.text: Add File
+$on-click$: $vars.open-command-k-with-current-folder(cmd=add-file)
 
 -- end: cm
 

diff --git a/components/editor/panels/package/package-content.mjs b/components/editor/panels/package/package-content.mjs
@@ -4,6 +4,7 @@ import * as preact from "preact";
 const ROOT_ID = "package-content-placeholder";
 const ROOT_DATA = "outer-folder";
 const CURRENT_FILE = "current-file";
+const CONTEXT_MENU_PATH = "context-menu-path";
 const MODIFIED_FILES = "modified-files";
 const ONLY_MODIFIED_FILES = "only-modified-files";
 
@@ -24,6 +25,11 @@ export function update_modified_files(files) {
     ftd2.set_value(ROOT_ID, MODIFIED_FILES, files);
 }
 
+export function update_context_menu_path(context_menu_path) {
+    console.log("update_context_menu_path", context_menu_path);
+    ftd2.set_value(ROOT_ID, CONTEXT_MENU_PATH, context_menu_path);
+}
+
 export function update_current_file(current_file) {
     ftd2.set_value(ROOT_ID, CURRENT_FILE, current_file);
     let p = ftd2.get_value(ROOT_ID, ROOT_DATA);
@@ -74,12 +80,13 @@ function show_package_content({folders, files, ftd_root}) {
         {folders, files, name: "root", open: true}, ftd_root, ROOT_DATA
     );
     let current_file = new ftd2.FastnTik(null, ftd_root, CURRENT_FILE).get();
+    let context_menu_path = new ftd2.FastnTik("", ftd_root, CONTEXT_MENU_PATH).get();
     let modified_files = new ftd2.FastnTik([], ftd_root, MODIFIED_FILES).get();
     let only_modified_files = new ftd2.FastnTik(false, ftd_root, ONLY_MODIFIED_FILES).get();
     return preact.h(
         show_folder, {
             folder, hide_name: true, level: 0,
-            current_file, modified_files, only_modified_files,
+            current_file, context_menu_path, modified_files, only_modified_files,
             parent_full_name: "",
         }
     );
@@ -100,7 +107,7 @@ const file_color = (file, is_modified) => {
     }
 }
 
-function triple_dot_icon(open, isFile) {
+function triple_dot_icon(open, isFile, fullPath) {
     if (!open.get()) return null;
     return hover_icon(
         "dots-three-circle-vertical", {
@@ -113,6 +120,9 @@ function triple_dot_icon(open, isFile) {
                 );
                 ftd.set_value("ui.fifthtry.com/components/editor/vars#context-menu-left", pos.left + 16);
                 ftd.set_value("ui.fifthtry.com/components/editor/vars#context-menu-top", pos.top + 16);
+                console.log("ui.fifthtry.com/components/editor/vars#context-menu-path", fullPath);
+                ftd.set_value("ui.fifthtry.com/components/editor/vars#context-menu-path", fullPath);
+                update_context_menu_path(fullPath);
                 e.preventDefault();
                 e.stopPropagation();
                 return false;
@@ -171,6 +181,7 @@ const show_file = ({
                        file,
                        level,
                        current_file,
+                       context_menu_path,
                        modified_files,
                        only_modified_files,
                    }) => {
@@ -187,6 +198,13 @@ const show_file = ({
 
     let triple_dot = new ftd2.FastnTik(false);
 
+    let background = "white";
+    if (file.full_name === context_menu_path) {
+        background = "#f5f5f5";
+    } else if (file.full_name === current_file && context_menu_path === "") {
+        background = "#f0f0f0";
+    }
+
     return preact.h(
         "a", {
             style: {
@@ -198,7 +216,7 @@ const show_file = ({
                 flexDirection: "row",
                 width: "100%",
                 gap: "3px",
-                background: file.full_name === current_file ? "#f5f5f5" : "white",
+                background,
                 position: "relative",
             },
             onmouseenter: () => triple_dot.set(true),
@@ -207,7 +225,7 @@ const show_file = ({
         },
         icon("file-text", {}),
         file.name,
-        triple_dot_icon(triple_dot, true),
+        triple_dot_icon(triple_dot, true, file.full_name),
     )
 }
 
@@ -217,6 +235,7 @@ const show_folder = ({
                          level,
                          hide_name,
                          current_file,
+                         context_menu_path,
                          modified_files,
                          only_modified_files,
                      }) => {
@@ -261,6 +280,7 @@ const show_folder = ({
                 width: "100%",
                 "font-family": "monospace",
                 fontSize: "12px",
+                background: folder.get().full_name === context_menu_path ? "#f5f5f5" : "white",
             }
         },
         preact.h(
@@ -283,19 +303,21 @@ const show_folder = ({
                 },
                 icon(open.get() ? "folder-open" : "folder", {}),
                 folder.get().name,
-                triple_dot_icon(triple_dot, false),
+                triple_dot_icon(triple_dot, false, folder.get().full_name),
             ),
             open.get() ? folder.index("folders").map((f) => preact.h(show_folder, {
                 folder: f,
                 level: level + 1,
                 current_file,
+                context_menu_path,
                 modified_files,
                 only_modified_files,
                 parent_full_name: full_name,
             })).concat(folder.index("files").map((f) => preact.h(show_file, {
                 file: f.get(),
                 level: level + 1,
                 current_file,
+                context_menu_path,
                 modified_files,
                 only_modified_files,
             }))) : [],

diff --git a/components/editor/vars.ftd b/components/editor/vars.ftd
@@ -20,6 +20,7 @@
 -- boolean $command-k-valid: false
 -- optional string $command-k-error:
 
+-- string $context-menu-path: yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
 -- string $context-menu-visible: hidden
 -- integer $context-menu-left: 0
 -- integer $context-menu-top: 0
@@ -249,6 +250,17 @@ string file: $current-file
 
 ide_open_command_k(cmd + " " + file)
 
+
+-- void open-command-k-with-current-folder(cmd):
+string cmd:
+string folder: $context-menu-path
+
+ide_open_command_k(cmd + " " + folder)
+
 -- void run-command():
 
 ide_run_command_parser()
+
+-- void clear-context-menu():
+
+ide_clear_context_menu()