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

Improve smart cell menu visibility while in insert mode (#1091)

Browse source
This commit is contained in:
Jonatan Kłosko 2022-04-04 22:28:02 +02:00 • committed by GitHub
parent bd87c2f3e1
commit 05687716d4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
assets/css/components.css
View file

@ -212,19 +212,28 @@
@apply relative;
}
.menu-content {
@apply absolute z-30 rounded-lg bg-white flex flex-col py-2 mt-1;
.menu__content {
@apply absolute z-[100] rounded-lg bg-white flex flex-col py-2 mt-1;
box-shadow: 0px 15px 99px rgba(13, 24, 41, 0.15);
}
.menu-content.right {
.menu__content--right {
@apply right-0;
}
.menu-content.left {
.menu__content--left {
@apply left-0;
}
.menu:not(.menu--open) > .menu__overlay,
.menu:not(.menu--open) > .menu__content {
@apply hidden;
}
.menu.menu--open > .menu__overlay {
@apply fixed z-[90] inset-0;
}
.menu-item {
@apply w-full flex space-x-3 px-5 py-2 items-center hover:bg-gray-100 focus:bg-gray-100 whitespace-nowrap;
}
@ -241,11 +250,11 @@
@apply relative;
}
.submenu:not(:hover):not(:focus-within) .submenu-content {
.submenu:not(:hover):not(:focus-within) .submenu__content {
@apply hidden;
}
.submenu-content {
.submenu__content {
@apply absolute -top-2 right-0 translate-x-full pl-2;
}

17
lib/livebook_web/live/live_helpers.ex
View file

@ -448,14 +448,17 @@ defmodule LivebookWeb.LiveHelpers do
~H"""
<div class="menu" id={@id}>
<div
phx-click={not @disabled && JS.toggle(to: "##{@id}-content")}
phx-click-away={JS.hide(to: "##{@id}-content")}
phx-click={not @disabled && JS.add_class("menu--open", to: "##{@id}")}
data-contextmenu-trigger-click={@secondary_click}
phx-window-keydown={JS.hide(to: "##{@id}-content")}
phx-window-keydown={JS.remove_class("menu--open", to: "##{@id}")}
phx-key="escape">
<%= render_slot(@toggle) %>
</div>
<menu id={"#{@id}-content"} class={"hidden menu-content #{@position}"} role="menu">
<div class="menu__overlay"
phx-click-away={JS.remove_class("menu--open", to: "##{@id}")}></div>
<menu class={"menu__content menu__content--#{@position}"}
role="menu"
phx-click-away={JS.remove_class("menu--open", to: "##{@id}")}}>
<%= render_slot(@content) %>
</menu>
</div>
@ -473,15 +476,15 @@ defmodule LivebookWeb.LiveHelpers do
<button class"menu-item" role="menuitem">Submenu</button>
<:content>
<button class"menu-item" role="menuitem">Option 1</button>
<.:content>
</:content>
</.submenu>
"""
def submenu(assigns) do
~H"""
<div class="submenu">
<%= render_slot(@inner_block) %>
<div class="submenu-content">
<menu class="menu-content relative mt-0">
<div class="submenu__content">
<menu class="menu__content relative mt-0">
<%= render_slot(@content) %>
</menu>
</div>

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

@ -7,7 +7,7 @@ defmodule LivebookWeb.SessionLive.InsertButtonsComponent do
role="toolbar"
aria-label="insert new"
data-el-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"}>
<div class={"w-full absolute z-10 hover:z-[100] #{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="code"