Add anchor links to sections (#243)

This commit is contained in:
Jonatan Kłosko 2021-04-26 15:24:43 +02:00 committed by GitHub
parent 4aba26c6c6
commit cc2820f17e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 6 deletions

View file

@ -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">

View file

@ -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"