Regroup cell insert buttons (#1073)

* Regroup cell insert buttons

* Add spacing to divider

* Split into two menus

* Remove smart cell icon
This commit is contained in:
Jonatan Kłosko 2022-03-24 19:02:31 +01:00 committed by GitHub
parent bc4c04c1b7
commit 4369a45bd5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 13 deletions

View file

@ -8,25 +8,38 @@ defmodule LivebookWeb.SessionLive.InsertButtonsComponent do
aria-label="insert new"
data-element="insert-buttons">
<div class={"w-full absolute z-10 focus-within:z-[11] #{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-base button-small"
phx-click="insert_cell_below"
phx-value-type="markdown"
phx-value-section_id={@section_id}
phx-value-cell_id={@cell_id}
>+ Markdown</button>
<button class="button-base button-small"
phx-click="insert_cell_below"
phx-value-type="code"
phx-value-section_id={@section_id}
phx-value-cell_id={@cell_id}
>+ Code</button>
<button class="button-base button-small"
phx-click="insert_section_below"
phx-value-section_id={@section_id}
phx-value-cell_id={@cell_id}
>+ Section</button>
<.menu id={"#{@id}-block-menu"} position="left">
<:toggle>
<button class="button-base button-small">+ Block</button>
</:toggle>
<:content>
<button class="menu-item text-gray-500"
role="menuitem"
phx-click="insert_cell_below"
phx-value-type="markdown"
phx-value-section_id={@section_id}
phx-value-cell_id={@cell_id}>
<.remix_icon icon="markdown-fill" />
<span class="font-medium">Markdown</span>
</button>
<button class="menu-item text-gray-500"
role="menuitem"
phx-click="insert_section_below"
phx-value-section_id={@section_id}
phx-value-cell_id={@cell_id}>
<.remix_icon icon="h-2" />
<span class="font-medium">Section</span>
</button>
</:content>
</.menu>
<%= if @smart_cell_definitions != [] do %>
<.menu id={"#{@id}-smart-cell-menu"}>
<.menu id={"#{@id}-smart-menu"} position="left">
<:toggle>
<button class="button-base button-small">+ Smart</button>
</:toggle>

View file

@ -106,7 +106,7 @@ defmodule LivebookWeb.SessionLiveTest do
{:ok, view, _} = live(conn, "/sessions/#{session.id}")
view
|> element("button", "+ Markdown")
|> element("button", "Markdown")
|> render_click()
assert %{notebook: %{sections: [%{cells: [%Cell.Markdown{}]}]}} =