livebook-dev/livebook
1
1
Fork 0
mirror of https://github.com/livebook-dev/livebook.git synced 2025-10-06 19:46:00 +08:00
Code Issues Projects Releases Packages Wiki Activity

Add an option to amplify cell outputs (#689)

Browse source 
* Add an option to amplify cell outputs

* Reorder actions
This commit is contained in:
Jonatan Kłosko 2021-11-09 10:45:05 +01:00 • committed by GitHub
parent 0b30fd02d9
commit c473a8c469
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
assets/css/js_interop.css
View file

@ -86,6 +86,14 @@ solely client-side operations.
@apply bg-blue-300;
}
[data-element="cell"][data-js-amplified] [data-element="outputs-container"] {
@apply bg-white m-0 py-16;
width: 90vw;
position: relative;
left: calc(-45vw + 50%);
}
[data-element="session"]:not([data-js-side-panel-content])
[data-element="side-panel"] {
@apply hidden;

10
assets/js/cell/index.js
View file

@ -49,6 +49,16 @@ const Cell = {
revision
);
// Setup action handlers
if (this.props.type === "elixir") {
const amplifyButton = this.el.querySelector(
`[data-element="amplify-outputs-button"]`
);
amplifyButton.addEventListener("click", (event) => {
this.el.toggleAttribute("data-js-amplified");
});
}
// Setup change indicator
if (this.props.type === "elixir") {
this.state.evaluationDigest = evaluation_digest;

13
lib/livebook_web/live/session_live/cell_component.ex
View file

@ -20,7 +20,6 @@ defmodule LivebookWeb.SessionLive.CellComponent do
~H"""
<div class="mb-1 flex items-center justify-end">
<div class="relative z-20 flex items-center justify-end space-x-2" data-element="actions">
<.cell_link_button cell_id={@cell_view.id} />
<span class="tooltip top" data-tooltip="Edit content" data-element="enable-insert-mode-button">
<button class="icon-button" aria-label="edit content">
<.remix_icon icon="pencil-line" class="text-xl" />
@ -33,6 +32,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
<.remix_icon icon="image-add-line" class="text-xl" />
<% end %>
</span>
<.cell_link_button cell_id={@cell_view.id} />
<.move_cell_up_button cell_id={@cell_view.id} />
<.move_cell_down_button cell_id={@cell_view.id} />
<.delete_cell_button cell_id={@cell_view.id} />
@ -88,8 +88,13 @@ defmodule LivebookWeb.SessionLive.CellComponent do
<% end %>
</div>
<div class="relative z-20 flex items-center justify-end space-x-2" data-element="actions">
<.cell_link_button cell_id={@cell_view.id} />
<span class="tooltip top" data-tooltip="Amplify output" data-element="amplify-outputs-button">
<button class="icon-button" aria-label="amplify outputs">
<.remix_icon icon="zoom-in-line" class="text-xl" />
</button>
</span>
<.cell_settings_button cell_id={@cell_view.id} socket={@socket} session_id={@session_id} />
<.cell_link_button cell_id={@cell_view.id} />
<.move_cell_up_button cell_id={@cell_view.id} />
<.move_cell_down_button cell_id={@cell_view.id} />
<.delete_cell_button cell_id={@cell_view.id} />
@ -100,7 +105,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
<.editor cell_view={@cell_view} />
<%= if @cell_view.outputs != [] do %>
<div class="mt-2">
<div class="mt-2" data-element="outputs-container">
<.outputs cell_view={@cell_view} runtime={@runtime} socket={@socket} />
</div>
<% end %>
@ -112,8 +117,8 @@ defmodule LivebookWeb.SessionLive.CellComponent do
~H"""
<div class="mb-1 flex items-center justify-end">
<div class="relative z-20 flex items-center justify-end space-x-2" data-element="actions">
<.cell_link_button cell_id={@cell_view.id} />
<.cell_settings_button cell_id={@cell_view.id} socket={@socket} session_id={@session_id} />
<.cell_link_button cell_id={@cell_view.id} />
<.move_cell_up_button cell_id={@cell_view.id} />
<.move_cell_down_button cell_id={@cell_view.id} />
<.delete_cell_button cell_id={@cell_view.id} />