From 6d56ef141be513d1cd9e500195c3701d9ae49102 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonatan=20K=C5=82osko?= Date: Mon, 22 Mar 2021 22:15:40 +0100 Subject: [PATCH] Add tooltips (#107) --- assets/css/app.css | 1 + assets/css/tooltips.css | 135 +++++++++++++++++++++ lib/livebook_web/live/cell_component.ex | 84 +++++++------ lib/livebook_web/live/section_component.ex | 8 +- lib/livebook_web/live/session_live.ex | 24 ++-- 5 files changed, 206 insertions(+), 46 deletions(-) create mode 100644 assets/css/tooltips.css diff --git a/assets/css/app.css b/assets/css/app.css index 96678f82c..079f844c7 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -11,3 +11,4 @@ @import "./markdown.css"; @import "./ansi.css"; @import "./js_interop.css"; +@import "./tooltips.css"; diff --git a/assets/css/tooltips.css b/assets/css/tooltips.css new file mode 100644 index 000000000..4d17a5b2f --- /dev/null +++ b/assets/css/tooltips.css @@ -0,0 +1,135 @@ +/* Tooltips */ + +/* +Example usage: + + + ... + +*/ + +/* 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; +} diff --git a/lib/livebook_web/live/cell_component.ex b/lib/livebook_web/live/cell_component.ex index 8f2a1c1de..07cee29d7 100644 --- a/lib/livebook_web/live/cell_component.ex +++ b/lib/livebook_web/live/cell_component.ex @@ -18,23 +18,31 @@ defmodule LivebookWeb.CellComponent do ~L"""
- - - - + + + + + + + + + + + +
@@ -79,23 +87,31 @@ defmodule LivebookWeb.CellComponent do <% end %>
- <%= 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 %> - - - + + <%= 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 %> + + + + + + + + + +
diff --git a/lib/livebook_web/live/section_component.ex b/lib/livebook_web/live/section_component.ex index 33905e2b1..c431e85a6 100644 --- a/lib/livebook_web/live/section_component.ex +++ b/lib/livebook_web/live/section_component.ex @@ -17,9 +17,11 @@ defmodule LivebookWeb.SectionComponent do <%# ^ Note it's important there's no space between

and

because we want the content to exactly match @section.name. %>
- + + +
diff --git a/lib/livebook_web/live/session_live.ex b/lib/livebook_web/live/session_live.ex index c573a97c1..c1df88a0d 100644 --- a/lib/livebook_web/live/session_live.ex +++ b/lib/livebook_web/live/session_live.ex @@ -78,16 +78,22 @@ defmodule LivebookWeb.SessionLive do Lb
<% end %> - - <%= 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 %> + + + + + <%= 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 %> +
- <%= 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 %> + + <%= 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 %> +