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

Show insert actions when hovering over free space between cells (#369)

Browse source
This commit is contained in:
Jonatan Kłosko 2021-06-18 16:14:20 +02:00 • committed by GitHub
parent 958c03b195
commit cbdc91d68d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
assets/css/js_interop.css
View file

@ -52,7 +52,12 @@ solely client-side operations.
[data-element="actions"]:not(:focus-within) {
/* Note: using opacity, so the buttons are focusable (via tab navigation)
and when focused we show the actions back. */
@apply opacity-0 pointer-events-none;
@apply opacity-0;
}
[data-element="cell"]:not([data-js-focused])
[data-element="actions"]:not([data-primary]):not(:focus-within) {
@apply pointer-events-none;
}
[data-element="cell"]:not([data-js-focused]):hover

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

@ -18,7 +18,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
def render_cell_content(%{cell_view: %{type: :markdown}} = assigns) do
~L"""
<div class="mb-1 flex items-center justify-end">
<div class="relative z-10 flex items-center justify-end space-x-2" data-element="actions">
<div class="relative z-20 flex items-center justify-end space-x-2" data-element="actions">
<%= render_cell_anchor_link(assigns) %>
<span class="tooltip top" aria-label="Edit content" data-element="enable-insert-mode-button">
<button class="icon-button">
@ -76,7 +76,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
def render_cell_content(%{cell_view: %{type: :elixir}} = assigns) do
~L"""
<div class="mb-1 flex items-center justify-between">
<div class="relative z-10 flex items-center justify-end space-x-2" data-element="actions" data-primary>
<div class="relative z-20 flex items-center justify-end space-x-2" data-element="actions" data-primary>
<%= if @cell_view.evaluation_status == :ready do %>
<button class="text-gray-600 hover:text-gray-800 focus:text-gray-800 flex space-x-1 items-center"
phx-click="queue_cell_evaluation"
@ -97,7 +97,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
</button>
<% end %>
</div>
<div class="relative z-10 flex items-center justify-end space-x-2" data-element="actions">
<div class="relative z-20 flex items-center justify-end space-x-2" data-element="actions">
<%= render_cell_anchor_link(assigns) %>
<span class="tooltip top" aria-label="Cell settings">
<%= live_patch to: Routes.session_path(@socket, :cell_settings, @session_id, @cell_view.id), class: "icon-button" do %>
@ -149,7 +149,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
def render_cell_content(%{cell_view: %{type: :input}} = assigns) do
~L"""
<div class="mb-1 flex items-center justify-end">
<div class="relative z-10 flex items-center justify-end space-x-2" data-element="actions">
<div class="relative z-20 flex items-center justify-end space-x-2" data-element="actions">
<%= render_cell_anchor_link(assigns) %>
<span class="tooltip top" aria-label="Cell settings">
<%= live_patch to: Routes.session_path(@socket, :cell_settings, @session_id, @cell_view.id), class: "icon-button" do %>

2
lib/livebook_web/live/session_live/insert_buttons_component.ex
View file

@ -4,7 +4,7 @@ defmodule LivebookWeb.SessionLive.InsertButtonsComponent do
def render(assigns) do
~L"""
<div class="relative top-0.5 m-0 flex justify-center" data-element="insert-buttons">
<div class="absolute z-10 <%= if(@persistent, do: "opacity-100", else: "opacity-0") %> hover:opacity-100 focus-within:opacity-100 flex space-x-2 justify-center items-center">
<div class="w-full absolute z-10 <%= if(@persistent, do: "opacity-100", else: "opacity-0") %> hover:opacity-100 focus-within:opacity-100 flex space-x-2 justify-center items-center">
<button class="button button-small"
phx-click="insert_cell"
phx-value-type="markdown"