livebook-dev/livebook
1
1
Fork 0
mirror of https://github.com/livebook-dev/livebook.git synced 2025-10-24 20:36:26 +08:00
Code Issues Projects Releases Packages Wiki Activity

Respect default elements outline on tab-navigation (#2749)

Browse source
This commit is contained in:
Jonatan Kłosko 2024-08-17 05:17:26 +02:00 • committed by GitHub
parent 987f706f62
commit 05c9c17b8c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 26 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/css/components.css
View file

@ -40,7 +40,7 @@
}
.tabs .tab {
@apply flex items-center space-x-2 px-3 py-2 border-b-2 text-gray-400 border-gray-100 whitespace-nowrap;
@apply flex items-center space-x-2 px-3 py-2 border-b-2 text-gray-400 border-gray-100 whitespace-nowrap focus-visible:bg-gray-50 focus-visible:outline-none focus-visible:rounded-t-lg;
}
.tabs .tab.active {

6
assets/css/global.css
View file

@ -13,12 +13,6 @@
"Segoe UI Emoji";
}
/* Remove the default outline on focused elements */
:focus,
button:focus {
outline: none;
}
menu {
margin: 0;
padding: 0;

2
assets/css/js_interop.css
View file

@ -51,7 +51,7 @@ solely client-side operations.
[data-el-notebook-headline][data-js-focused] [data-el-heading],
[data-el-section-headline][data-js-focused] [data-el-heading] {
@apply border-blue-300;
@apply border-blue-300 outline-none;
}
[data-el-section-headline]:not(:hover):not([data-js-focused])

8
lib/livebook_web/components/core_components.ex
View file

@ -200,7 +200,6 @@ defmodule LivebookWeb.CoreComponents do
role="dialog"
aria-modal="true"
tabindex="0"
autofocus
phx-window-keydown={JS.exec("data-cancel", to: "##{@id}")}
phx-click-away={JS.exec("data-cancel", to: "##{@id}")}
phx-key="escape"
@ -236,6 +235,7 @@ defmodule LivebookWeb.CoreComponents do
def show_modal(js \\ %JS{}, id) do
js
|> JS.show(to: "##{id}")
|> JS.dispatch("lb:focus", to: "##{id}-content")
|> JS.transition(
{"ease-out duration-200", "opacity-0", "opacity-100"},
to: "##{id}-container"
@ -455,7 +455,7 @@ defmodule LivebookWeb.CoreComponents do
~H"""
<li class={[
"w-full",
"[&>:first-child]:w-full [&>:first-child]:flex [&>:first-child]:space-x-3 [&>:first-child]:px-5 [&>:first-child]:py-2 [&>:first-child]:items-center [&>:first-child:hover]:bg-gray-100 [&>:first-child:focus]:bg-gray-100 [&>:first-child]:whitespace-nowrap font-medium",
"[&>:first-child]:w-full [&>:first-child]:flex [&>:first-child]:space-x-3 [&>:first-child]:px-5 [&>:first-child]:py-2 [&>:first-child]:items-center [&>:first-child:hover]:bg-gray-100 [&>:first-child:focus-visible]:bg-gray-100 [&>:first-child:focus-visible]:outline-none [&>:first-child]:whitespace-nowrap font-medium",
menu_item_class(@variant),
@disabled && "pointer-events-none opacity-50"
]}>
@ -889,7 +889,7 @@ defmodule LivebookWeb.CoreComponents do
else
"px-5 py-2 font-medium text-sm"
end,
"inline-flex rounded-lg border whitespace-nowrap items-center justify-center gap-1.5",
"inline-flex rounded-lg border whitespace-nowrap items-center justify-center gap-1.5 focus-visible:outline-none",
if disabled do
"cursor-default pointer-events-none border-transparent bg-gray-100 text-gray-400"
else
@ -961,7 +961,7 @@ defmodule LivebookWeb.CoreComponents do
if disabled do
"cursor-default text-gray-300"
else
"text-gray-500 hover:text-gray-900 focus:bg-gray-100"
"text-gray-500 hover:text-gray-900 hover:bg-gray-50 focus-visible:bg-gray-100 focus-visible:outline-none"
end
]
end

12
lib/livebook_web/components/form_components.ex
View file

@ -39,7 +39,7 @@ defmodule LivebookWeb.FormComponents do
defp input_classes(errors) do
[
"w-full px-3 py-2 text-sm font-normal border rounded-lg placeholder-gray-400 disabled:opacity-70 disabled:cursor-not-allowed",
"w-full px-3 py-2 text-sm font-normal border rounded-lg placeholder-gray-400 disabled:opacity-70 disabled:cursor-not-allowed focus:border-blue-600 focus-visible:outline-none",
if errors == [] do
"bg-gray-50 border-gray-200 text-gray-600"
else
@ -249,7 +249,7 @@ defmodule LivebookWeb.FormComponents do
type="checkbox"
value={@checked_value}
class={[
"appearance-none absolute block w-7 h-7 rounded-full bg-white border-[5px] border-gray-200 cursor-pointer transition-all duration-300",
"appearance-none absolute block w-7 h-7 rounded-full bg-white border-[5px] border-gray-200 cursor-pointer transition-[transform,border-color] duration-300 outline-none",
"peer checked:bg-white checked:border-blue-600 checked:translate-x-full"
]}
name={@name}
@ -258,8 +258,8 @@ defmodule LivebookWeb.FormComponents do
{@rest}
/>
<div class={[
"block h-full w-full rounded-full bg-gray-200 cursor-pointer transition-all duration-300",
"peer-checked:bg-blue-600"
"block h-full w-full rounded-full bg-gray-200 cursor-pointer transition-colors duration-300",
"peer-checked:bg-blue-600 peer-focus-visible:outline peer-focus-visible:outline-offset-2 peer-focus-visible:outline-2 peer-focus-visible:outline-blue-600"
]}>
</div>
</label>
@ -306,7 +306,7 @@ defmodule LivebookWeb.FormComponents do
checked={to_string(@value) == @checked_value}
{@rest}
/>
<div class="w-5 h-5 flex items-center justify-center border border-gray-300 peer-checked:border-transparent bg-white peer-checked:bg-blue-600 rounded">
<div class="w-5 h-5 flex items-center justify-center border border-gray-300 peer-checked:border-transparent bg-white peer-checked:bg-blue-600 rounded peer-focus-visible:outline peer-focus-visible:outline-offset-2 peer-focus-visible:outline-2 peer-focus-visible:outline-blue-600">
<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg">
<path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z" />
</svg>
@ -487,7 +487,7 @@ defmodule LivebookWeb.FormComponents do
id={@id}
name={@name}
class={[
"w-full px-3 py-2 pr-7 appearance-none text-sm border rounded-lg placeholder-gray-400 disabled:opacity-70 disabled:cursor-not-allowed",
"w-full px-3 py-2 pr-7 appearance-none text-sm border rounded-lg placeholder-gray-400 disabled:opacity-70 disabled:cursor-not-allowed focus:border-blue-600 focus-visible:outline-none",
if(@errors == [],
do: "bg-gray-50 border-gray-200 text-gray-600",
else: "bg-red-50 border-red-600 text-red-600"

2
lib/livebook_web/components/layout_components.ex
View file

@ -81,7 +81,7 @@ defmodule LivebookWeb.LayoutComponents do
<div class="flex flex-col">
<div class="space-y-3">
<div class="flex items-center mb-5">
<.link navigate={~p"/"} class="flex items-center border-l-4 border-gray-900 group">
<.link navigate={~p"/"} class="flex items-center ml-1 group">
<img
src={~p"/images/logo.png"}
class="mx-2"

14
lib/livebook_web/live/session_live/cell_component.ex
View file

@ -315,7 +315,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
~H"""
<!-- By setting tabindex we can programmatically focus this element,
also we actually want to make this element tab-focusable -->
<div class="flex relative" data-el-cell-body tabindex="0">
<div class="flex relative focus-visible:outline-none" data-el-cell-body tabindex="0">
<div class="w-1 h-full rounded-lg absolute top-0 -left-3" data-el-cell-focus-indicator></div>
<div class="w-full">
<%= render_slot(@inner_block) %>
@ -328,7 +328,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
~H"""
<div class="flex items-center space-x-1">
<button
class="text-gray-600 hover:text-gray-800 focus:text-gray-800 flex space-x-1 items-center"
class="text-gray-600 hover:text-gray-800 flex space-x-1 items-center"
data-el-queue-cell-evaluation-button
data-cell-id={@cell_id}
>
@ -346,7 +346,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
</button>
<.menu id={"cell-#{@cell_id}-evaluation-menu"} position={:bottom_left} distant>
<:toggle>
<button class="flex text-gray-600 hover:text-gray-800 focus:text-gray-800">
<button class="flex text-gray-600 hover:text-gray-800">
<.remix_icon icon="arrow-down-s-line" class="text-xl" />
</button>
</:toggle>
@ -380,7 +380,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
defp cell_evaluation_button(assigns) do
~H"""
<button
class="text-gray-600 hover:text-gray-800 focus:text-gray-800 flex space-x-1 items-center"
class="text-gray-600 hover:text-gray-800 flex space-x-1 items-center"
phx-click="cancel_cell_evaluation"
phx-value-cell_id={@cell_id}
>
@ -396,7 +396,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
~H"""
<div class="flex items-center space-x-1">
<button
class="text-gray-600 hover:text-gray-800 focus:text-gray-800 flex space-x-1 items-center"
class="text-gray-600 hover:text-gray-800 flex space-x-1 items-center"
data-el-queue-cell-evaluation-button
data-cell-id={@cell_id}
>
@ -411,7 +411,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
<%= unless Livebook.Runtime.fixed_dependencies?(@runtime) do %>
<.menu id="setup-menu" position={:bottom_left} distant>
<:toggle>
<button class="flex text-gray-600 hover:text-gray-800 focus:text-gray-800">
<button class="flex text-gray-600 hover:text-gray-800">
<.remix_icon icon="arrow-down-s-line" class="text-xl" />
</button>
</:toggle>
@ -435,7 +435,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
defp setup_cell_evaluation_button(assigns) do
~H"""
<button
class="text-gray-600 hover:text-gray-800 focus:text-gray-800 flex space-x-1 items-center"
class="text-gray-600 hover:text-gray-800 flex space-x-1 items-center"
phx-click="cancel_cell_evaluation"
phx-value-cell_id={@cell_id}
>

12
lib/livebook_web/live/session_live/render.ex
View file

@ -1231,22 +1231,22 @@ defmodule LivebookWeb.SessionLive.Render do
defp status_button_classes(color) do
[
"text-xl leading-none p-1 flex items-center justify-center rounded-full rounded-full border-2",
"text-xl leading-none p-1 flex items-center justify-center rounded-full rounded-full border-2 focus-visible:outline-none",
case color do
:gray ->
"text-gray-400 border-gray-200 hover:bg-gray-100 focus:bg-gray-100"
"text-gray-400 border-gray-200 hover:bg-gray-100 focus-visible:bg-gray-100"
:blue ->
"text-blue-500 border-blue-400 hover:bg-blue-50 focus:bg-blue-50"
"text-blue-500 border-blue-400 hover:bg-blue-50 focus-visible:bg-blue-50"
:green ->
"text-green-bright-400 border-green-bright-300 hover:bg-green-bright-50 focus:bg-green-bright-50"
"text-green-bright-400 border-green-bright-300 hover:bg-green-bright-50 focus-visible:bg-green-bright-50"
:yellow ->
"text-yellow-bright-300 border-yellow-bright-200 hover:bg-yellow-bright-50 focus:bg-yellow-bright-50"
"text-yellow-bright-300 border-yellow-bright-200 hover:bg-yellow-bright-50 focus-visible:bg-yellow-bright-50"
:red ->
"text-red-400 border-red-300 hover:bg-red-50 focus:bg-red-50"
"text-red-400 border-red-300 hover:bg-red-50 focus-visible:bg-red-50"
end
]
end