mirror of
https://github.com/livebook-dev/livebook.git
synced 2024-12-27 01:42:11 +08:00
Add anchor links to sections (#243)
This commit is contained in:
parent
4aba26c6c6
commit
cc2820f17e
2 changed files with 12 additions and 6 deletions
|
@ -19,7 +19,7 @@ defmodule LivebookWeb.SessionLive.CellComponent 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">
|
||||
<%= render_cell_anchor_link(@cell_view) %>
|
||||
<%= render_cell_anchor_link(assigns) %>
|
||||
<span class="tooltip top" aria-label="Edit content" data-element="enable-insert-mode-button">
|
||||
<button class="icon-button">
|
||||
<%= remix_icon("pencil-line", class: "text-xl") %>
|
||||
|
@ -98,7 +98,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
|
|||
<% end %>
|
||||
</div>
|
||||
<div class="relative z-10 flex items-center justify-end space-x-2" data-element="actions">
|
||||
<%= render_cell_anchor_link(@cell_view) %>
|
||||
<%= 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 %>
|
||||
<%= remix_icon("list-settings-line", class: "text-xl") %>
|
||||
|
@ -165,9 +165,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
|
|||
"""
|
||||
end
|
||||
|
||||
defp render_cell_anchor_link(cell_view) do
|
||||
assigns = %{cell_view: cell_view}
|
||||
|
||||
defp render_cell_anchor_link(assigns) do
|
||||
~L"""
|
||||
<span class="tooltip top" aria-label="Link">
|
||||
<a href="#cell-<%= @cell_view.id %>" class="icon-button">
|
||||
|
|
|
@ -3,7 +3,10 @@ defmodule LivebookWeb.SessionLive.SectionComponent do
|
|||
|
||||
def render(assigns) do
|
||||
~L"""
|
||||
<div data-element="section" data-section-id="<%= @section_view.id %>">
|
||||
<div
|
||||
id="section-<%= @section_view.id %>"
|
||||
data-element="section"
|
||||
data-section-id="<%= @section_view.id %>">
|
||||
<div class="flex space-x-4 items-center" data-element="section-headline">
|
||||
<h2 class="flex-grow text-gray-800 font-semibold text-2xl px-1 -ml-1 rounded-lg border border-transparent hover:border-blue-200 focus:border-blue-300"
|
||||
data-element="section-name"
|
||||
|
@ -17,6 +20,11 @@ defmodule LivebookWeb.SessionLive.SectionComponent do
|
|||
<%# ^ Note it's important there's no space between <h2> and </h2>
|
||||
because we want the content to exactly match section name. %>
|
||||
<div class="flex space-x-2 items-center" data-element="section-actions">
|
||||
<span class="tooltip top" aria-label="Link">
|
||||
<a href="#section-<%= @section_view.id %>" class="icon-button">
|
||||
<%= remix_icon("link", class: "text-xl") %>
|
||||
</a>
|
||||
</span>
|
||||
<span class="tooltip top" aria-label="Move up">
|
||||
<button class="icon-button"
|
||||
phx-click="move_section"
|
||||
|
|
Loading…
Reference in a new issue