fix: Add visible feed back to a file browser that its in read only mode

BBN-Holding · Feb 11, 2024 · 1f27f93 · 1f27f93
1 parent 7098f68
commit 1f27f93
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/deno.jsonc b/deno.jsonc
@@ -1,6 +1,6 @@
 {
     "imports": {
-        "webgen/": "https://raw.githubusercontent.com/lucsoft/WebGen/fac487b/",
+        "webgen/": "https://raw.githubusercontent.com/lucsoft/WebGen/413b30d/",
         // "webgen/": "../WebGen/",
         "std/": "https://deno.land/std@0.215.0/",
         "shared/": "./pages/shared/"

diff --git a/pages/hosting/views/FileBrowser.ts b/pages/hosting/views/FileBrowser.ts
@@ -9,7 +9,7 @@ import { sheetStack } from "../../_legacy/helper.ts";
 import { mapFiletoIcon } from "../constants.ts";
 import { downloadFile, listFiles, messageQueueSidecar } from "../loading.ts";
 import { deleteFileDialog } from "./dialogs/deleteFileDialog.ts";
-import { editFileDialog, editFileLanguage, editFilePath, editFilestreamingText } from "./dialogs/editFileDialog.ts";
+import { editFileDialog, editFileLanguage, editFilePath, editFileReadOnly, editFilestreamingText } from "./dialogs/editFileDialog.ts";
 import './dialogs/exportFileDialog.css';
 import { pathNavigation } from "./pathNavigation.ts";
 import { allFiles, canWriteInFolder, loading, path, uploadingFiles } from "./state.ts";
@@ -156,6 +156,7 @@ export function FileBrowser() {
                                 .onClick(() => {
                                     if (!data.fileMimeType) return;
 
+                                    editFileReadOnly.setValue(!data.canWrite);
                                     editFileLanguage.setValue(data.fileMimeType
                                         .split(";")[ 0 ]
                                         .split("/")[ 1 ]

diff --git a/pages/hosting/views/dialogs/editFileDialog.ts b/pages/hosting/views/dialogs/editFileDialog.ts
@@ -1,7 +1,8 @@
 import loader from "https://esm.sh/@monaco-editor/loader@1.4.0";
 import { editor } from "https://esm.sh/monaco-editor@0.44.0/esm/vs/editor/editor.api.js";
+
 import { delay } from "std/async/delay.ts";
-import { Box, Button, Cache, Custom, Grid, Label, MIcon, SheetDialog, Vertical, asRef, lazyInit, refMerge } from "webgen/mod.ts";
+import { Box, Button, Cache, Color, Custom, Grid, Label, MIcon, SheetDialog, Vertical, asRef, lazyInit, refMerge } from "webgen/mod.ts";
 import { sheetStack } from "../../../_legacy/helper.ts";
 import { uploadFile } from "../../loading.ts";
 import './editFileDialog.css';
@@ -12,6 +13,7 @@ export const editFileLanguage = asRef("yaml");
 export const editFilestreamingText = asRef(new Response("Loading file...").body?.pipeThrough(new TextDecoderStream())!);
 export const editFileDownloading = asRef(true);
 export const editFileUploading = asRef(false);
+export const editFileReadOnly = asRef(false);
 export const editFilePath = asRef("");
 export const editFileCurrentEditor = asRef<editor.IStandaloneCodeEditor | undefined>(undefined);
 
@@ -54,7 +56,7 @@ async function createMonacoEditor() {
     return Custom(box).addClass("file-dialog-shell");
 }
 
-export const editFileDialog = SheetDialog(sheetStack, "Edit File",
+export const editFileDialog = SheetDialog(sheetStack, editFileReadOnly.map<string>(readOnly => readOnly ? "Read File" : "Edit File"),
     Vertical(
         refMerge({
             downloading: editFileDownloading,
@@ -98,7 +100,8 @@ export const editFileDialog = SheetDialog(sheetStack, "Edit File",
                 editFileUploading.setValue(false);
                 await delay(300);
                 editFileDialog.close();
-            }),
+            })
+                .setColor(editFileReadOnly.map<Color>(readOnly => readOnly ? Color.Disabled : Color.Grayscaled))
         )
             .setGap(".5rem")
             .setJustify("end")