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

Move hub icon inside notebook margins

Browse source
This commit is contained in:
José Valim 2023-03-05 19:28:47 +01:00
parent 5b9e379f6e
commit 2cd6e52b84
1 changed files with 36 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
lib/livebook_web/live/session_live.ex
View file

@ -231,16 +231,41 @@ defmodule LivebookWeb.SessionLive do
class="relative w-full max-w-screen-lg px-4 sm:pl-8 sm:pr-16 md:pl-16 pt-4 sm:py-5 mx-auto" class="relative w-full max-w-screen-lg px-4 sm:pl-8 sm:pr-16 md:pl-16 pt-4 sm:py-5 mx-auto"
data-el-notebook-content data-el-notebook-content
> >
<div <div class="flex flex-nowrap gap-2 pb-4 mb-2 border-b border-gray-200">
class="flex flex-wrap items-center pb-4 mb-2 border-b border-gray-200" <div class="mt-1">
data-el-notebook-headline <.menu position={:bottom_left} id="notebook-hub-menu">
data-focusable-id="notebook" <:toggle>
id="notebook" <span class="tooltip right distant relative" data-tooltip="Select one hub">
phx-hook="Headline" <div class="border rounded-full border-gray-200 hover:border-gray-300 focus:border-gray-300 w-[40px] h-[40px] flex items-center justify-center">
data-on-value-change="set_notebook_name" <span aria-label={@data_view.notebook_hub.hub_name}>
data-metadata="notebook" <%= @data_view.notebook_hub.hub_emoji %>
> </span>
<div class="flex grow"> </div>
</span>
</:toggle>
<.menu_item :for={hub <- @saved_hubs}>
<button
id={"select-hub-#{hub.id}"}
phx-click={JS.push("select_hub", value: %{id: hub.id})}
aria-label={hub.name}
role="menuitem"
>
<%= hub.emoji %>
<span class="ml-2"><%= hub.name %></span>
</button>
</.menu_item>
</.menu>
</div>
<div
class="grow"
data-el-notebook-headline
data-focusable-id="notebook"
id="notebook"
phx-hook="Headline"
data-on-value-change="set_notebook_name"
data-metadata="notebook"
>
<h1 <h1
class="p-1 text-3xl font-semibold text-gray-800 border border-transparent rounded-lg whitespace-pre-wrap" class="p-1 text-3xl font-semibold text-gray-800 border border-transparent rounded-lg whitespace-pre-wrap"
tabindex="0" tabindex="0"
@ -251,32 +276,7 @@ defmodule LivebookWeb.SessionLive do
><%= @data_view.notebook_name %></h1> ><%= @data_view.notebook_name %></h1>
</div> </div>
<div class="flex justify-between items-center pt-1 w-full md:w-auto md:justify-inherit md:items-baseline"> <div class="mt-3">
<div class="md:absolute md:left-0">
<.menu position={:bottom_left} id="notebook-hub-menu">
<:toggle>
<span class="tooltip right distant relative" data-tooltip="Select one hub">
<div class="border-2 rounded-full border-gray-200 hover:border-gray-400 focus:border-gray-400 w-[40px] h-[40px] flex items-center justify-center">
<span aria-label={@data_view.notebook_hub.hub_name}>
<%= @data_view.notebook_hub.hub_emoji %>
</span>
</div>
</span>
</:toggle>
<.menu_item :for={hub <- @saved_hubs}>
<button
id={"select-hub-#{hub.id}"}
phx-click={JS.push("select_hub", value: %{id: hub.id})}
aria-label={hub.name}
role="menuitem"
>
<%= hub.emoji %>
<span class="ml-2"><%= hub.name %></span>
</button>
</.menu_item>
</.menu>
</div>
<.menu id="session-menu"> <.menu id="session-menu">
<:toggle> <:toggle>
<button class="icon-button" aria-label="open notebook menu"> <button class="icon-button" aria-label="open notebook menu">