Add custom view option to hide code (#2889)

assets/css/js_interop.css

@@ -151,6 +151,16 @@ solely client-side operations.
   @apply hidden;
 }
 
+[data-el-cell][data-type="smart"]:not([data-js-source-visible])
+  [data-el-cell-indicators] {
+  @apply static flex justify-end pt-2;
+}
+
+[data-el-cell][data-type="smart"]:not([data-js-source-visible])
+  [data-el-cell-indicator] {
+  @apply bg-gray-50 border-gray-200 text-gray-500;
+}
+
 [data-el-session]
   [data-el-cell][data-type="setup"]:not(
     [data-eval-validity="fresh"]:not([data-js-empty])
@@ -159,6 +169,14 @@ solely client-side operations.
   @apply h-0 overflow-hidden;
 }
 
+[data-el-session]
+  [data-el-cell][data-type="setup"]:not(
+    [data-eval-validity="fresh"]:not([data-js-empty])
+  ):not([data-eval-errored]):not([data-js-changed]):not([data-js-focused])
+  [data-el-cell-indicator] {
+  @apply bg-gray-50 border-gray-200 text-gray-500;
+}
+
 [data-el-session]
   [data-el-cell][data-type="setup"][data-js-focused]
   [data-el-info-box],
@@ -341,6 +359,81 @@ solely client-side operations.
   @apply hidden;
 }
 
+[data-js-hide-code][data-el-session]:not([data-js-insert-mode])
+  [data-el-cell]
+  [data-el-cell-indicator],
+[data-js-hide-code][data-el-session]
+  [data-el-cell]:not([data-js-focused])
+  [data-el-cell-indicator] {
+  @apply bg-gray-50 border-gray-200 text-gray-500;
+}
+
+[data-js-hide-code][data-el-session]:not([data-js-insert-mode])
+  [data-el-cell][data-type="code"]
+  [data-el-editor-box],
+[data-js-hide-code][data-el-session][data-js-insert-mode]
+  [data-el-cell][data-type="code"]:not([data-js-focused])
+  [data-el-editor-box] {
+  @apply hidden;
+}
+
+[data-js-hide-code][data-el-session]
+  [data-el-cell][data-type="setup"]
+  [data-el-info-box],
+[data-js-hide-code][data-el-session]:not([data-js-insert-mode])
+  [data-el-cell][data-type="setup"]
+  [data-el-editor-box],
+[data-js-hide-code][data-el-session][data-js-insert-mode]
+  [data-el-cell][data-type="setup"]:not([data-js-focused])
+  [data-el-editor-box] {
+  @apply hidden;
+}
+
+[data-js-hide-code] [data-el-cell][data-type="smart"] [data-el-ui-box] {
+  @apply hidden;
+}
+
+[data-js-hide-code][data-el-session]:not([data-js-insert-mode])
+  [data-el-cell][data-type="smart"]
+  [data-el-editor-box],
+[data-js-hide-code][data-el-session][data-js-insert-mode]
+  [data-el-cell][data-type="smart"]:not([data-js-focused])
+  [data-el-editor-box] {
+  @apply hidden;
+}
+
+[data-js-hide-code][data-el-session]:not([data-js-insert-mode])
+  [data-el-cell][data-type="code"]
+  [data-el-cell-body-root]:after,
+[data-js-hide-code][data-el-session][data-js-insert-mode]
+  [data-el-cell][data-type="code"]:not([data-js-focused])
+  [data-el-cell-body-root]:after,
+[data-js-hide-code][data-el-session]:not([data-js-insert-mode])
+  [data-el-cell][data-type="setup"]
+  [data-el-cell-body-root]:after,
+[data-js-hide-code][data-el-session][data-js-insert-mode]
+  [data-el-cell][data-type="setup"]:not([data-js-focused])
+  [data-el-cell-body-root]:after,
+[data-js-hide-code][data-el-session]:not([data-js-insert-mode])
+  [data-el-cell][data-type="smart"]
+  [data-el-cell-body-root]:after,
+[data-js-hide-code][data-el-session][data-js-insert-mode]
+  [data-el-cell][data-type="smart"]:not([data-js-focused])
+  [data-el-cell-body-root]:after {
+  content: "Code";
+
+  @apply flex py-2 px-3 border border-gray-200 rounded-lg text-sm text-gray-400 font-medium;
+}
+
+[data-js-hide-code][data-el-session]:not([data-js-insert-mode])
+  [data-el-cell][data-type="smart"]
+  [data-el-cell-indicators],
+[data-js-hide-code][data-el-session][data-js-insert-mode]
+  [data-el-cell][data-type="smart"]:not([data-js-focused])
+  [data-el-cell-indicators] {
+  @apply absolute bottom-2 right-2;
+}
+
 [data-js-spotlight]
   :is(
     [data-el-section-headline]:not([data-js-focused]),

assets/js/hooks/custom_view_settings.js

@@ -13,6 +13,9 @@ const CustomViewSettings = {
     const customMarkdownCheckbox = this.el.querySelector(
       `[name="show_markdown"][value="true"]`,
     );
+    const customCodeCheckbox = this.el.querySelector(
+      `[name="show_code"][value="true"]`,
+    );
     const customOutputCheckbox = this.el.querySelector(
       `[name="show_output"][value="true"]`,
     );
@@ -22,6 +25,7 @@ const CustomViewSettings = {
 
     customSectionCheckbox.checked = settings.custom_view_show_section;
     customMarkdownCheckbox.checked = settings.custom_view_show_markdown;
+    customCodeCheckbox.checked = settings.custom_view_show_code;
     customOutputCheckbox.checked = settings.custom_view_show_output;
     customSpotlightCheckbox.checked = settings.custom_view_spotlight;
 
@@ -31,6 +35,9 @@ const CustomViewSettings = {
     customMarkdownCheckbox.addEventListener("change", (event) => {
       settingsStore.update({ custom_view_show_markdown: event.target.checked });
     });
+    customCodeCheckbox.addEventListener("change", (event) => {
+      settingsStore.update({ custom_view_show_code: event.target.checked });
+    });
     customOutputCheckbox.addEventListener("change", (event) => {
       settingsStore.update({ custom_view_show_output: event.target.checked });
     });

assets/js/hooks/session.js

@@ -1131,13 +1131,15 @@ const Session = {
       this.setView(view, {
         showSection: false,
         showMarkdown: false,
+        showCode: true,
         showOutput: true,
         spotlight: false,
       });
     } else if (view === "presentation") {
       this.setView(view, {
         showSection: true,
         showMarkdown: true,
+        showCode: true,
         showOutput: true,
         spotlight: true,
       });
@@ -1147,6 +1149,7 @@ const Session = {
           this.setView(view, {
             showSection: settings.custom_view_show_section,
             showMarkdown: settings.custom_view_show_markdown,
+            showCode: settings.custom_view_show_code,
             showOutput: settings.custom_view_show_output,
             spotlight: settings.custom_view_spotlight,
           });
@@ -1180,6 +1183,7 @@ const Session = {
 
     this.el.toggleAttribute("data-js-hide-section", !options.showSection);
     this.el.toggleAttribute("data-js-hide-markdown", !options.showMarkdown);
+    this.el.toggleAttribute("data-js-hide-code", !options.showCode);
     this.el.toggleAttribute("data-js-hide-output", !options.showOutput);
     this.el.toggleAttribute("data-js-spotlight", options.spotlight);
   },
@@ -1192,6 +1196,7 @@ const Session = {
 
     this.el.removeAttribute("data-js-hide-section");
     this.el.removeAttribute("data-js-hide-markdown");
+    this.el.removeAttribute("data-js-hide-code");
     this.el.removeAttribute("data-js-hide-output");
     this.el.removeAttribute("data-js-spotlight");
   },

assets/js/lib/settings.js

@@ -30,6 +30,7 @@ const DEFAULTSETTINGS = {
   editor_mode: EDITOR_MODE.default,
   custom_view_show_section: true,
   custom_view_show_markdown: true,
+  custom_view_show_code: true,
   custom_view_show_output: true,
   custom_view_spotlight: false,
 };