mirror of
https://github.com/livebook-dev/livebook.git
synced 2025-09-04 20:14:57 +08:00
Add custom view option to hide code (#2889)
This commit is contained in:
Jonatan Kłosko
GitHub
parent
34364722a8
commit
832c33d61d
6 changed files with 209 additions and 102 deletions
|
|
@ -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]),
|
||||
|
|
|
|||
|
|
@ -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 });
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1131,6 +1131,7 @@ const Session = {
|
|||
this.setView(view, {
|
||||
showSection: false,
|
||||
showMarkdown: false,
|
||||
showCode: true,
|
||||
showOutput: true,
|
||||
spotlight: false,
|
||||
});
|
||||
|
|
@ -1138,6 +1139,7 @@ const Session = {
|
|||
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");
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -109,16 +109,18 @@ defmodule LivebookWeb.SessionLive.CellComponent do
|
|||
</:secondary>
|
||||
</.cell_actions>
|
||||
<.cell_body>
|
||||
<div class="relative">
|
||||
<.cell_editor
|
||||
cell_id={@cell_view.id}
|
||||
tag="primary"
|
||||
empty={@cell_view.empty}
|
||||
language={@cell_view.language}
|
||||
intellisense
|
||||
/>
|
||||
<div class="absolute bottom-2 right-2">
|
||||
<.cell_indicators id={@cell_view.id} variant="editor" cell_view={@cell_view} />
|
||||
<div class="relative" data-el-cell-body-root>
|
||||
<div class="relative" data-el-editor-box>
|
||||
<.cell_editor
|
||||
cell_id={@cell_view.id}
|
||||
tag="primary"
|
||||
empty={@cell_view.empty}
|
||||
language={@cell_view.language}
|
||||
intellisense
|
||||
/>
|
||||
</div>
|
||||
<div class="absolute bottom-2 right-2" data-el-cell-indicators>
|
||||
<.cell_indicators id={@cell_view.id} cell_view={@cell_view} />
|
||||
</div>
|
||||
</div>
|
||||
<.doctest_summary cell_id={@cell_view.id} doctest_summary={@cell_view.eval.doctest_summary} />
|
||||
|
|
@ -151,14 +153,13 @@ defmodule LivebookWeb.SessionLive.CellComponent do
|
|||
</:secondary>
|
||||
</.cell_actions>
|
||||
<.cell_body>
|
||||
<div data-el-info-box>
|
||||
<div class="p-3 flex items-center justify-between border border-gray-200 text-sm text-gray-400 rounded-lg">
|
||||
<span class="font-medium">Notebook dependencies and setup</span>
|
||||
<.cell_indicators id={"#{@cell_view.id}-1"} variant="default" cell_view={@cell_view} />
|
||||
<div class="relative" data-el-cell-body-root>
|
||||
<div data-el-info-box>
|
||||
<div class="py-2 px-3 flex items-center justify-between border border-gray-200 text-sm text-gray-400 rounded-lg">
|
||||
<span class="font-medium">Notebook dependencies and setup</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-el-editor-box>
|
||||
<div class="relative">
|
||||
<div data-el-editor-box>
|
||||
<.cell_editor
|
||||
cell_id={@cell_view.id}
|
||||
tag="primary"
|
||||
|
|
@ -166,18 +167,18 @@ defmodule LivebookWeb.SessionLive.CellComponent do
|
|||
language="elixir"
|
||||
intellisense
|
||||
/>
|
||||
<div class="absolute bottom-2 right-2">
|
||||
<.cell_indicators id={"#{@cell_view.id}-2"} variant="editor" cell_view={@cell_view} />
|
||||
</div>
|
||||
</div>
|
||||
<.evaluation_outputs
|
||||
outputs={@streams.outputs}
|
||||
cell_view={@cell_view}
|
||||
session_id={@session_id}
|
||||
session_pid={@session_pid}
|
||||
client_id={@client_id}
|
||||
/>
|
||||
<div class="absolute bottom-2 right-2" data-el-cell-indicators>
|
||||
<.cell_indicators id={@cell_view.id} cell_view={@cell_view} />
|
||||
</div>
|
||||
</div>
|
||||
<.evaluation_outputs
|
||||
outputs={@streams.outputs}
|
||||
cell_view={@cell_view}
|
||||
session_id={@session_id}
|
||||
session_pid={@session_pid}
|
||||
client_id={@client_id}
|
||||
/>
|
||||
</.cell_body>
|
||||
"""
|
||||
end
|
||||
|
|
@ -206,74 +207,72 @@ defmodule LivebookWeb.SessionLive.CellComponent do
|
|||
</:secondary>
|
||||
</.cell_actions>
|
||||
<.cell_body>
|
||||
<div data-el-ui-box>
|
||||
<%= case @cell_view.status do %>
|
||||
<% :started -> %>
|
||||
<div class={
|
||||
<div class="relative" data-el-cell-body-root>
|
||||
<div data-el-ui-box>
|
||||
<%= case @cell_view.status do %>
|
||||
<% :started -> %>
|
||||
<div class={
|
||||
"flex #{if(@cell_view.editor && @cell_view.editor.placement == :top, do: "flex-col-reverse", else: "flex-col")}"
|
||||
}>
|
||||
<.live_component
|
||||
module={LivebookWeb.JSViewComponent}
|
||||
id={@cell_view.id}
|
||||
js_view={@cell_view.js_view}
|
||||
session_id={@session_id}
|
||||
client_id={@client_id}
|
||||
/>
|
||||
<.cell_editor
|
||||
:if={@cell_view.editor}
|
||||
cell_id={@cell_view.id}
|
||||
tag="secondary"
|
||||
empty={@cell_view.editor.empty}
|
||||
language={@cell_view.editor.language}
|
||||
rounded={@cell_view.editor.placement}
|
||||
intellisense={@cell_view.editor.language == "elixir"}
|
||||
hidden={not @cell_view.editor.visible}
|
||||
/>
|
||||
</div>
|
||||
<% :dead -> %>
|
||||
<div class="info-box">
|
||||
<%= if @installing? do %>
|
||||
Waiting for dependency installation to complete...
|
||||
<% else %>
|
||||
Run the notebook setup to show the contents of this Smart cell.
|
||||
<% end %>
|
||||
</div>
|
||||
<% :down -> %>
|
||||
<div class="info-box flex justify-between items-center">
|
||||
<span>
|
||||
The Smart cell crashed unexpectedly, this is most likely a bug.
|
||||
</span>
|
||||
<.button
|
||||
color="gray"
|
||||
phx-click={JS.push("recover_smart_cell", value: %{cell_id: @cell_view.id})}
|
||||
>
|
||||
Restart Smart cell
|
||||
</.button>
|
||||
</div>
|
||||
<% :starting -> %>
|
||||
<div class="delay-200">
|
||||
<.content_skeleton empty={false} />
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="flex flex-col items-end space-y-2 text-gray-400">
|
||||
<div></div>
|
||||
<.cell_indicators id={"#{@cell_view.id}-1"} variant="default" cell_view={@cell_view} />
|
||||
<.live_component
|
||||
module={LivebookWeb.JSViewComponent}
|
||||
id={@cell_view.id}
|
||||
js_view={@cell_view.js_view}
|
||||
session_id={@session_id}
|
||||
client_id={@client_id}
|
||||
/>
|
||||
<.cell_editor
|
||||
:if={@cell_view.editor}
|
||||
cell_id={@cell_view.id}
|
||||
tag="secondary"
|
||||
empty={@cell_view.editor.empty}
|
||||
language={@cell_view.editor.language}
|
||||
rounded={@cell_view.editor.placement}
|
||||
intellisense={@cell_view.editor.language == "elixir"}
|
||||
hidden={not @cell_view.editor.visible}
|
||||
/>
|
||||
</div>
|
||||
<% :dead -> %>
|
||||
<div class="info-box">
|
||||
<%= if @installing? do %>
|
||||
Waiting for dependency installation to complete...
|
||||
<% else %>
|
||||
Run the notebook setup to show the contents of this Smart cell.
|
||||
<% end %>
|
||||
</div>
|
||||
<% :down -> %>
|
||||
<div class="info-box flex justify-between items-center">
|
||||
<span>
|
||||
The Smart cell crashed unexpectedly, this is most likely a bug.
|
||||
</span>
|
||||
<.button
|
||||
color="gray"
|
||||
phx-click={JS.push("recover_smart_cell", value: %{cell_id: @cell_view.id})}
|
||||
>
|
||||
Restart Smart cell
|
||||
</.button>
|
||||
</div>
|
||||
<% :starting -> %>
|
||||
<div class="delay-200">
|
||||
<.content_skeleton empty={false} />
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<div data-el-editor-box>
|
||||
<div class="relative">
|
||||
<.cell_editor
|
||||
cell_id={@cell_view.id}
|
||||
tag="primary"
|
||||
empty={@cell_view.empty}
|
||||
language="elixir"
|
||||
intellisense
|
||||
read_only
|
||||
/>
|
||||
<div class="absolute bottom-2 right-2">
|
||||
<.cell_indicators id={"#{@cell_view.id}-2"} variant="editor" cell_view={@cell_view} />
|
||||
<div data-el-editor-box>
|
||||
<div class="relative">
|
||||
<.cell_editor
|
||||
cell_id={@cell_view.id}
|
||||
tag="primary"
|
||||
empty={@cell_view.empty}
|
||||
language="elixir"
|
||||
intellisense
|
||||
read_only
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom-2 right-2" data-el-cell-indicators>
|
||||
<.cell_indicators id={@cell_view.id} cell_view={@cell_view} />
|
||||
</div>
|
||||
</div>
|
||||
<.evaluation_outputs
|
||||
outputs={@streams.outputs}
|
||||
|
|
@ -683,24 +682,25 @@ defmodule LivebookWeb.SessionLive.CellComponent do
|
|||
defp cell_indicators(assigns) do
|
||||
~H"""
|
||||
<div class="flex gap-1">
|
||||
<div :if={has_status?(@cell_view)} class={cell_indicator_container_class(@variant)}>
|
||||
<.cell_indicator :if={has_status?(@cell_view)}>
|
||||
<.cell_status id={@id} cell_view={@cell_view} />
|
||||
</div>
|
||||
<div class={cell_indicator_container_class(@variant)}>
|
||||
</.cell_indicator>
|
||||
<.cell_indicator>
|
||||
<.language_icon language={cell_language(@cell_view)} class="w-3 h-3" />
|
||||
</div>
|
||||
</.cell_indicator>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
|
||||
defp cell_indicator_container_class(variant) do
|
||||
[
|
||||
"px-1.5 h-[22px] rounded-lg flex items-center",
|
||||
case variant do
|
||||
"default" -> "bg-gray-50 border border-gray-200 text-gray-500 px-1.5 h-[22px]"
|
||||
"editor" -> "bg-editor-lighter border border-editor text-editor px-1.5 h-[22px]"
|
||||
end
|
||||
]
|
||||
defp cell_indicator(assigns) do
|
||||
~H"""
|
||||
<div
|
||||
data-el-cell-indicator
|
||||
class="px-1.5 h-[22px] rounded-lg flex items-center border bg-editor-lighter border-editor text-editor"
|
||||
>
|
||||
{render_slot(@inner_block)}
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
|
||||
defp cell_language(%{language: language}), do: Atom.to_string(language)
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ defmodule LivebookWeb.SessionLive.CustomViewComponent do
|
|||
>
|
||||
<.switch_field name="show_section" label="Show sections" value={false} />
|
||||
<.switch_field name="show_markdown" label="Show markdown" value={false} />
|
||||
<.switch_field name="show_code" label="Show code" value={false} />
|
||||
<.switch_field name="show_output" label="Show outputs" value={false} />
|
||||
<.switch_field name="spotlight" label="Spotlight focused" value={false} />
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue