mirror of
https://github.com/livebook-dev/livebook.git
synced 2025-03-04 02:43:09 +08:00
Add tooltips (#107)
This commit is contained in:
Jonatan Kłosko
GitHub
parent
4061802220
commit
6d56ef141b
5 changed files with 206 additions and 46 deletions
|
|
@ -11,3 +11,4 @@
|
|||
@import "./markdown.css";
|
||||
@import "./ansi.css";
|
||||
@import "./js_interop.css";
|
||||
@import "./tooltips.css";
|
||||
|
|
|
|||
135
assets/css/tooltips.css
Normal file
135
assets/css/tooltips.css
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
/* Tooltips */
|
||||
|
||||
/*
|
||||
Example usage:
|
||||
|
||||
<span class="tooltip top" aria-label="Delete">
|
||||
...
|
||||
</span>
|
||||
*/
|
||||
|
||||
/* Tooltip element wrapping the actual hoverable element */
|
||||
.tooltip {
|
||||
position: relative;
|
||||
--distance: 0px;
|
||||
--arrow-size: 5px;
|
||||
--show-delay: 0.5s;
|
||||
}
|
||||
|
||||
.tooltip.distant {
|
||||
--distance: 28px;
|
||||
}
|
||||
|
||||
/* Tooltip text */
|
||||
.tooltip:before {
|
||||
position: absolute;
|
||||
content: attr(aria-label);
|
||||
white-space: pre;
|
||||
text-align: center;
|
||||
display: block;
|
||||
background-color: #1c273c;
|
||||
color: #f0f5f9;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
border-radius: 4px;
|
||||
padding: 3px 12px;
|
||||
z-index: 100;
|
||||
visibility: hidden;
|
||||
transition-property: visibility;
|
||||
transition-duration: 0s;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
/* Tooltip arrow */
|
||||
.tooltip:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
/* For the arrow we use the triangle trick: https://css-tricks.com/snippets/css/css-triangle/ */
|
||||
border-width: var(--arrow-size);
|
||||
border-style: solid;
|
||||
border-color: #1c273c;
|
||||
visibility: hidden;
|
||||
transition-property: visibility;
|
||||
transition-duration: 0s;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
.tooltip:hover:before {
|
||||
visibility: visible;
|
||||
transition-delay: var(--show-delay);
|
||||
}
|
||||
|
||||
.tooltip:hover:after {
|
||||
visibility: visible;
|
||||
transition-delay: var(--show-delay);
|
||||
}
|
||||
|
||||
/*
|
||||
Note: we let the arrow and content overlap 1px,
|
||||
othrwise there's a tiny space between them.
|
||||
*/
|
||||
|
||||
.tooltip.top:before {
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, calc(1px - var(--arrow-size) - var(--distance)));
|
||||
}
|
||||
|
||||
.tooltip.top:after {
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, calc(0px - var(--distance)));
|
||||
|
||||
border-bottom: none;
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
.tooltip.bottom:before {
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, calc(var(--arrow-size) - 1px + var(--distance)));
|
||||
}
|
||||
|
||||
.tooltip.bottom:after {
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, var(--distance));
|
||||
|
||||
border-top: none;
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
.tooltip.right:before {
|
||||
top: 50%;
|
||||
left: 100%;
|
||||
transform: translate(calc(var(--arrow-size) - 1px + var(--distance)), -50%);
|
||||
}
|
||||
|
||||
.tooltip.right:after {
|
||||
top: 50%;
|
||||
left: 100%;
|
||||
transform: translate(var(--distance), -50%);
|
||||
|
||||
border-left: none;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
.tooltip.left:before {
|
||||
top: 50%;
|
||||
right: 100%;
|
||||
transform: translate(calc(1px - var(--arrow-size) - var(--distance)), -50%);
|
||||
}
|
||||
|
||||
.tooltip.left:after {
|
||||
top: 50%;
|
||||
right: 100%;
|
||||
transform: translate(calc(0px - var(--distance)), -50%);
|
||||
|
||||
border-right: none;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
|
@ -18,23 +18,31 @@ defmodule LivebookWeb.CellComponent do
|
|||
~L"""
|
||||
<div class="mb-1 flex items-center justify-end" data-element="actions">
|
||||
<div class="relative z-10 flex items-center justify-end space-x-2">
|
||||
<button data-element="enable-insert-mode-button">
|
||||
<%= remix_icon("pencil-line", class: "text-xl action-icon") %>
|
||||
</button>
|
||||
<button phx-click="move_cell"
|
||||
phx-value-cell_id="<%= @cell.id %>"
|
||||
phx-value-offset="-1">
|
||||
<%= remix_icon("arrow-up-s-line", class: "text-xl action-icon") %>
|
||||
</button>
|
||||
<button phx-click="move_cell"
|
||||
phx-value-cell_id="<%= @cell.id %>"
|
||||
phx-value-offset="1">
|
||||
<%= remix_icon("arrow-down-s-line", class: "text-xl action-icon") %>
|
||||
</button>
|
||||
<button phx-click="delete_cell"
|
||||
phx-value-cell_id="<%= @cell.id %>">
|
||||
<%= remix_icon("delete-bin-6-line", class: "text-xl action-icon") %>
|
||||
</button>
|
||||
<span class="tooltip top" aria-label="Edit content">
|
||||
<button data-element="enable-insert-mode-button">
|
||||
<%= remix_icon("pencil-line", class: "text-xl action-icon") %>
|
||||
</button>
|
||||
</span>
|
||||
<span class="tooltip top" aria-label="Move up">
|
||||
<button phx-click="move_cell"
|
||||
phx-value-cell_id="<%= @cell.id %>"
|
||||
phx-value-offset="-1">
|
||||
<%= remix_icon("arrow-up-s-line", class: "text-xl action-icon") %>
|
||||
</button>
|
||||
</span>
|
||||
<span class="tooltip top" aria-label="Move down">
|
||||
<button phx-click="move_cell"
|
||||
phx-value-cell_id="<%= @cell.id %>"
|
||||
phx-value-offset="1">
|
||||
<%= remix_icon("arrow-down-s-line", class: "text-xl action-icon") %>
|
||||
</button>
|
||||
</span>
|
||||
<span class="tooltip top" aria-label="Delete">
|
||||
<button phx-click="delete_cell"
|
||||
phx-value-cell_id="<%= @cell.id %>">
|
||||
<%= remix_icon("delete-bin-6-line", class: "text-xl action-icon") %>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -79,23 +87,31 @@ defmodule LivebookWeb.CellComponent do
|
|||
<% end %>
|
||||
</div>
|
||||
<div class="relative z-10 flex items-center justify-end space-x-2">
|
||||
<%= live_patch to: Routes.session_path(@socket, :cell_settings, @session_id, @cell.id) do %>
|
||||
<%= remix_icon("list-settings-line", class: "text-xl action-icon") %>
|
||||
<% end %>
|
||||
<button phx-click="move_cell"
|
||||
phx-value-cell_id="<%= @cell.id %>"
|
||||
phx-value-offset="-1">
|
||||
<%= remix_icon("arrow-up-s-line", class: "text-xl action-icon") %>
|
||||
</button>
|
||||
<button phx-click="move_cell"
|
||||
phx-value-cell_id="<%= @cell.id %>"
|
||||
phx-value-offset="1">
|
||||
<%= remix_icon("arrow-down-s-line", class: "text-xl action-icon") %>
|
||||
</button>
|
||||
<button phx-click="delete_cell"
|
||||
phx-value-cell_id="<%= @cell.id %>">
|
||||
<%= remix_icon("delete-bin-6-line", class: "text-xl action-icon") %>
|
||||
</button>
|
||||
<span class="tooltip top" aria-label="Cell settings">
|
||||
<%= live_patch to: Routes.session_path(@socket, :cell_settings, @session_id, @cell.id) do %>
|
||||
<%= remix_icon("list-settings-line", class: "text-xl action-icon") %>
|
||||
<% end %>
|
||||
</span>
|
||||
<span class="tooltip top" aria-label="Move up">
|
||||
<button phx-click="move_cell"
|
||||
phx-value-cell_id="<%= @cell.id %>"
|
||||
phx-value-offset="-1">
|
||||
<%= remix_icon("arrow-up-s-line", class: "text-xl action-icon") %>
|
||||
</button>
|
||||
</span>
|
||||
<span class="tooltip top" aria-label="Move down">
|
||||
<button phx-click="move_cell"
|
||||
phx-value-cell_id="<%= @cell.id %>"
|
||||
phx-value-offset="1">
|
||||
<%= remix_icon("arrow-down-s-line", class: "text-xl action-icon") %>
|
||||
</button>
|
||||
</span>
|
||||
<span class="tooltip top" aria-label="Delete">
|
||||
<button phx-click="delete_cell"
|
||||
phx-value-cell_id="<%= @cell.id %>">
|
||||
<%= remix_icon("delete-bin-6-line", class: "text-xl action-icon") %>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -17,9 +17,11 @@ defmodule LivebookWeb.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">
|
||||
<button phx-click="delete_section" phx-value-section_id="<%= @section.id %>" tabindex="-1">
|
||||
<%= remix_icon("delete-bin-6-line", class: "text-xl action-icon") %>
|
||||
</button>
|
||||
<span class="tooltip top" aria-label="Delete">
|
||||
<button phx-click="delete_section" phx-value-section_id="<%= @section.id %>" tabindex="-1">
|
||||
<%= remix_icon("delete-bin-6-line", class: "text-xl action-icon") %>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container py-2">
|
||||
|
|
|
|||
|
|
@ -78,16 +78,22 @@ defmodule LivebookWeb.SessionLive do
|
|||
Lb
|
||||
</div>
|
||||
<% end %>
|
||||
<button class="text-2xl text-gray-600 hover:text-gray-50" data-element="sections-panel-toggle">
|
||||
<%= remix_icon("booklet-fill") %>
|
||||
</button>
|
||||
<%= live_patch to: Routes.session_path(@socket, :settings, @session_id, "file") do %>
|
||||
<%= remix_icon("settings-4-fill", class: "text-2xl text-gray-600 hover:text-gray-50 #{if(@live_action == :settings, do: "text-gray-50")}") %>
|
||||
<% end %>
|
||||
<span class="tooltip right distant" aria-label="Sections">
|
||||
<button class="text-2xl text-gray-600 hover:text-gray-50" data-element="sections-panel-toggle">
|
||||
<%= remix_icon("booklet-fill") %>
|
||||
</button>
|
||||
</span>
|
||||
<span class="tooltip right distant" aria-label="Notebook settings">
|
||||
<%= live_patch to: Routes.session_path(@socket, :settings, @session_id, "file") do %>
|
||||
<%= remix_icon("settings-4-fill", class: "text-2xl text-gray-600 hover:text-gray-50 #{if(@live_action == :settings, do: "text-gray-50")}") %>
|
||||
<% end %>
|
||||
</span>
|
||||
<div class="flex-grow"></div>
|
||||
<%= live_patch to: Routes.session_path(@socket, :shortcuts, @session_id) do %>
|
||||
<%= remix_icon("keyboard-box-fill", class: "text-2xl text-gray-600 hover:text-gray-50") %>
|
||||
<% end %>
|
||||
<span class="tooltip right distant" aria-label="Keyboard shortcuts">
|
||||
<%= live_patch to: Routes.session_path(@socket, :shortcuts, @session_id) do %>
|
||||
<%= remix_icon("keyboard-box-fill", class: "text-2xl text-gray-600 hover:text-gray-50") %>
|
||||
<% end %>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-col w-1/5 bg-gray-100 border-r border-gray-200" data-element="sections-panel">
|
||||
<div class="flex-grow flex flex-col space-y-2 pl-4 pt-4"
|
||||
|
|
|
|||
Loading…
Reference in a new issue