From af79a0fd2f1bdd5be023c4bb76a3aa60d1b42f19 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonatan=20K=C5=82osko?= Date: Tue, 23 Mar 2021 14:10:34 +0100 Subject: [PATCH] Improve tab navigation (#109) * Ignore editor for tab movement * Improve tab behaviour within notebook * Highlight focused regular buttons * Show tooltips on focused elements --- assets/css/components.css | 24 +++++---- assets/css/js_interop.css | 11 ++-- assets/css/tooltips.css | 8 +-- assets/js/cell/live_editor.js | 1 + lib/livebook_web/live/cell_component.ex | 52 +++++++++++-------- .../live/insert_cell_component.ex | 6 +-- lib/livebook_web/live/section_component.ex | 4 +- lib/livebook_web/live/session_live.ex | 12 +++-- lib/livebook_web/live/sessions_component.ex | 4 +- 9 files changed, 71 insertions(+), 51 deletions(-) diff --git a/assets/css/components.css b/assets/css/components.css index d78b317ca..9773275d0 100644 --- a/assets/css/components.css +++ b/assets/css/components.css @@ -5,7 +5,7 @@ } .button:not(:disabled) { - @apply hover:bg-gray-50; + @apply hover:bg-gray-50 focus:bg-gray-50; } .button:disabled { @@ -21,7 +21,7 @@ } .button-danger:not(:disabled) { - @apply hover:bg-red-100; + @apply hover:bg-red-100 focus:bg-red-100; } .button-primary { @@ -29,7 +29,7 @@ } .button-primary:not(:disabled) { - @apply hover:bg-blue-700; + @apply hover:bg-blue-700 focus:bg-blue-700; } .choice-button { @@ -40,6 +40,18 @@ @apply bg-blue-100 border-blue-600; } +.icon-button { + @apply p-1 flex items-center justify-center text-gray-400 hover:text-gray-800; +} + +.icon-button:focus { + @apply rounded-full bg-gray-100; +} + +.icon-button i { + line-height: 1; +} + /* Form fields */ .input { @@ -88,9 +100,3 @@ .tabs .tab.active { @apply text-blue-600 border-blue-600; } - -/* Icons */ - -.action-icon { - @apply text-gray-400 hover:text-gray-800; -} diff --git a/assets/css/js_interop.css b/assets/css/js_interop.css index 0491c3d2b..4a1c21345 100644 --- a/assets/css/js_interop.css +++ b/assets/css/js_interop.css @@ -42,13 +42,16 @@ solely client-side operations. @apply border-blue-300 border-opacity-100; } -[data-element="cell"]:not([data-js-focused]) [data-element="actions"] { - @apply invisible; +[data-element="cell"]:not([data-js-focused]) + [data-element="actions"]:not(:focus-within) { + /* Note: using opacity, so the buttons are focusable (via tab navigation) + and when focused we show the actions back. */ + @apply opacity-0 pointer-events-none; } [data-element="cell"]:not([data-js-focused]):hover - [data-element="primary-actions"] { - @apply visible; + [data-element="actions"][data-primary] { + @apply opacity-100 pointer-events-auto; } [data-element="section-list-item"][data-js-is-viewed] { diff --git a/assets/css/tooltips.css b/assets/css/tooltips.css index 4d17a5b2f..77e69a1e4 100644 --- a/assets/css/tooltips.css +++ b/assets/css/tooltips.css @@ -11,7 +11,7 @@ Example usage: /* Tooltip element wrapping the actual hoverable element */ .tooltip { position: relative; - --distance: 0px; + --distance: 4px; --arrow-size: 5px; --show-delay: 0.5s; } @@ -55,12 +55,14 @@ Example usage: transition-delay: 0s; } -.tooltip:hover:before { +.tooltip:hover:before, +.tooltip:focus-within:before { visibility: visible; transition-delay: var(--show-delay); } -.tooltip:hover:after { +.tooltip:hover:after, +.tooltip:focus-within:after { visibility: visible; transition-delay: var(--show-delay); } diff --git a/assets/js/cell/live_editor.js b/assets/js/cell/live_editor.js index 7e7156cf3..7f4dbfb4c 100644 --- a/assets/js/cell/live_editor.js +++ b/assets/js/cell/live_editor.js @@ -78,6 +78,7 @@ class LiveEditor { renderLineHighlight: "none", theme: "custom", fontFamily: "JetBrains Mono", + tabIndex: -1, }); this.editor.getModel().updateOptions({ diff --git a/lib/livebook_web/live/cell_component.ex b/lib/livebook_web/live/cell_component.ex index 07cee29d7..b6c06f21e 100644 --- a/lib/livebook_web/live/cell_component.ex +++ b/lib/livebook_web/live/cell_component.ex @@ -16,31 +16,34 @@ defmodule LivebookWeb.CellComponent do def render_cell_content(%{cell: %{type: :markdown}} = assigns) do ~L""" -
-
+
+
- - - -
@@ -64,10 +67,10 @@ defmodule LivebookWeb.CellComponent do def render_cell_content(%{cell: %{type: :elixir}} = assigns) do ~L""" -
-
+
+
<%= if @cell_info.evaluation_status == :ready do %> - <% else %> - <% 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") %> + <%= live_patch to: Routes.session_path(@socket, :cell_settings, @session_id, @cell.id), class: "icon-button" do %> + <%= remix_icon("list-settings-line", class: "text-xl") %> <% end %> - - -
diff --git a/lib/livebook_web/live/insert_cell_component.ex b/lib/livebook_web/live/insert_cell_component.ex index 9d581f0c1..c8ef66da9 100644 --- a/lib/livebook_web/live/insert_cell_component.ex +++ b/lib/livebook_web/live/insert_cell_component.ex @@ -4,15 +4,15 @@ defmodule LivebookWeb.InsertCellComponent do def render(assigns) do ~L"""
-
hover:opacity-100 flex space-x-2 justify-center items-center"> - -
diff --git a/lib/livebook_web/live/session_live.ex b/lib/livebook_web/live/session_live.ex index c1df88a0d..fd15f67f8 100644 --- a/lib/livebook_web/live/session_live.ex +++ b/lib/livebook_web/live/session_live.ex @@ -79,19 +79,21 @@ defmodule LivebookWeb.SessionLive do
<% 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")}") %> + <%= live_patch to: Routes.session_path(@socket, :settings, @session_id, "file"), + class: "text-gray-600 hover:text-gray-50 focus:text-gray-50 #{if(@live_action == :settings, do: "text-gray-50")}" do %> + <%= remix_icon("settings-4-fill", class: "text-2xl") %> <% 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") %> + <%= live_patch to: Routes.session_path(@socket, :shortcuts, @session_id), + class: "text-gray-600 hover:text-gray-50 focus:text-gray-50" do %> + <%= remix_icon("keyboard-box-fill", class: "text-2xl") %> <% end %>
diff --git a/lib/livebook_web/live/sessions_component.ex b/lib/livebook_web/live/sessions_component.ex index dd4e41e0c..1ac937b8f 100644 --- a/lib/livebook_web/live/sessions_component.ex +++ b/lib/livebook_web/live/sessions_component.ex @@ -17,8 +17,8 @@ defmodule LivebookWeb.SessionsComponent do
-