preview related ui elements

FifthTry · Sep 16, 2024 · 58a269b · 58a269b
1 parent bd8c41f
commit 58a269b
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 4 deletions.
diff --git a/components/editor/command-k/command.grammar b/components/editor/command-k/command.grammar
@@ -1,5 +1,5 @@
 @top command {
-    AddFile | ClearOPFS | PushFile | DeleteFile
+    AddFile | ClearOPFS | PushFile | DeleteFile | UpdatePreview
 }
 
 
@@ -21,6 +21,10 @@ ClearOPFS {
     "clear-opfs"
 }
 
+UpdatePreview {
+    "update-preview"
+}
+
 FileName {
     folder? identifier '.' identifier
 }

diff --git a/components/editor/command-k/index.ftd b/components/editor/command-k/index.ftd
@@ -291,6 +291,34 @@ clear-opfs
 
 
 
+-- component show-update-preview-help:
+caption boolean show-question: false
+
+-- ftd.column:
+width: fill-container
+spacing.fixed.px: 5
+padding.px: 5
+
+-- help-header: Update Preview
+show-question: $show-update-preview-help.show-question
+
+-- ftd.text:
+
+You can update the preview by using this command. When you type we don't
+auto update the preview due to performance reason. You can use this command
+to update the preview.
+
+-- ftd.code:
+width: fill-container
+lang: sh
+
+update-preview
+
+-- end: ftd.column
+
+-- end: show-update-preview-help
+
+
 
 
 

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/panels/preview.ftd b/components/editor/panels/preview.ftd
@@ -56,7 +56,21 @@ padding-horizontal.px: 10
 padding-vertical.px: 6
 
 
-    -- ftd.text: Preview
+    -- ftd.row:
+    spacing.fixed.px: 7
+    align-content: center
+
+        -- phosphor.light: seal-check
+        if: { vars.preview-upto-date }
+        size: 14
+
+        -- phosphor.light: seal
+        if: { !vars.preview-upto-date }
+        size: 14
+
+        -- ftd.text: Preview
+
+    -- end: ftd.row
 
     -- ftd.row:
     spacing.fixed.px: 5

diff --git a/components/editor/vars.ftd b/components/editor/vars.ftd
@@ -160,6 +160,8 @@ url: /foo/blog/images/first-image.jpg
 
 
 
+-- boolean $preview-upto-date: true
+
 -- boolean $preview-maximized: false
 
 -- boolean $preview-visible: true
Original file line number	Diff line number	Diff line change
Expand Up		@@ -160,6 +160,8 @@ url: /foo/blog/images/first-image.jpg



		-- boolean $preview-upto-date: true

		-- boolean $preview-maximized: false

		-- boolean $preview-visible: true
Expand Down