Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Admin tooltip improvements #5439

Merged
merged 3 commits into from
Oct 16, 2023
+39 −133
Merged

Admin tooltip improvements #5439

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2ca44e7
Make the tooltips dark by default
elia Oct 13, 2023
5db892e
Widen tooltips so they'll need less vertical space
elia Oct 13, 2023
6777dc6
Simplify the `ui/toggletip` component
elia Oct 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 1 addition & 4 deletions admin/app/components/solidus_admin/products/show/component.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,10 +118,7 @@
checked: f.object.promotionable
) %>
<span class="body-text-sm"><%= Spree::Product.human_attribute_name :promotionable %></span>
<%= render component("ui/toggletip").new(
text: t(".hints.promotionable_html"),
position: :left
) %>
<%= render component("ui/toggletip").new(text: t(".hints.promotionable_html")) %>
</label>
<% end %>

Expand Down
2 changes: 1 addition & 1 deletion admin/app/components/solidus_admin/ui/panel/component.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<% if @title %>
<h2 class="mt-0 px-6 w-full">
<span class="body-title"><%= @title %></span>
<%= render component('ui/toggletip').new(text: @title_hint, position: :left) if @title_hint %>
<%= render component('ui/toggletip').new(text: @title_hint) if @title_hint %>
</h2>
<% end %>

Expand Down
17 changes: 12 additions & 5 deletions admin/app/components/solidus_admin/ui/toggletip/component.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,20 +19,21 @@
"
aria-label="<%= t('.get_help') %>"
>
<%= icon_tag("question-fill", class: "w-[1rem] h-[1rem] #{icon_theme_classes}") %>
<%= icon_tag("question-fill", class: "w-[1rem] h-[1rem] fill-gray-800") %>
</summary>

<div
class="
absolute
inline-block
w-[9rem]
w-48
px-[0.75rem]
body-tiny-bold
rounded
z-10
<%= bubble_position_classes %>
<%= bubble_theme_classes %>
text-white
bg-gray-800
<%= POSITIONS.fetch(@position)[:bubble] %>
"
data-<%= stimulus_id %>-target="bubble"
>
Expand All @@ -43,7 +44,13 @@
block
bg-inherit
py-[0.5rem]
<%= bubble_arrow_pseudo_element %>
before:content['']
before:absolute
before:w-[0.375rem]
before:h-[0.375rem]
before:rotate-45
before:bg-inherit
<%= POSITIONS.fetch(@position)[:arrow] %>
"
data-<%= stimulus_id %>-target="content"
>
Expand Down
93 changes: 8 additions & 85 deletions admin/app/components/solidus_admin/ui/toggletip/component.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,98 +1,21 @@
# frozen_string_literal: true

class SolidusAdmin::UI::Toggletip::Component < SolidusAdmin::BaseComponent
# Icon size: 1rem
# Arrow size: 0.375rem
# Banner padding x: 0.75rem
POSITIONS = {
up: {
arrow: %w[before:top-0 before:left-1/2 before:translate-y-[-50%] before:translate-x-[-50%]],
bubble: %w[translate-x-[calc(-50%+(1rem/2))] translate-y-[calc(0.375rem/2)]]
below: {
arrow: "before:top-0 before:left-1/2 before:translate-y-[-50%] before:translate-x-[-50%]",
bubble: "translate-x-[calc(-50%+(1rem/2))] translate-y-[calc(0.375rem/2)]"
},
up_right: {
arrow: %w[before:top-0 before:right-0 before:translate-y-[-50%]],
bubble: %w[translate-x-[calc(-100%+0.75rem+(1rem/2)+(0.375rem/2))] translate-y-[calc(0.375rem/2)]]
above: {
arrow: "before:bottom-0 before:left-1/2 before:translate-y-[50%] before:translate-x-[-50%]",
bubble: "translate-x-[calc(-50%+(1rem/2))] translate-y-[calc(-100%-1rem-(0.375rem/2))]"
},
right: {
arrow: %w[before:top-1/2 before:right-0 before:translate-y-[-50%] before:translate-x-[0.93rem]],
bubble: %w[translate-x-[calc(-100%+(-0.375rem/2))] translate-y-[calc(-50%-(1rem/2))]]
},
down_right: {
arrow: %w[before:bottom-0 before:right-0 before:translate-y-[50%]],
bubble: %w[translate-x-[calc(-100%+0.75rem+(1rem/2)+(0.376rem/2))] translate-y-[calc(-100%-1rem-(0.375rem/2))]]
},
down: {
arrow: %w[before:bottom-0 before:left-1/2 before:translate-y-[50%] before:translate-x-[-50%]],
bubble: %w[translate-x-[calc(-50%+(1rem/2))] translate-y-[calc(-100%-1rem-(0.375rem/2))]]
},
down_left: {
arrow: %w[before:bottom-0 before:left-0 before:translate-y-[50%]],
bubble: %w[translate-x-[calc(-1rem/2)] translate-y-[calc(-100%-0.75rem-0.375rem)]]
},
left: {
arrow: %w[before:top-1/2 before:left-0 before:translate-y-[-50%] before:translate-x-[-0.93rem]],
bubble: %w[translate-x-[calc(1rem+(0.375rem/2))] translate-y-[calc(-50%-(1rem/2))]]
},
up_left: {
arrow: %w[before:top-0 before:left-0 before:translate-y-[-50%]],
bubble: %w[translate-x-[calc(-0.75rem+0.375rem)] translate-y-[calc(0.375rem/2)]]
},
none: {
arrow: %w[before:hidden],
bubble: %w[translate-x-[calc(-50%+0.75rem)]]
}
}.freeze

THEMES = {
light: {
icon: %w[fill-gray-500],
bubble: %w[text-gray-800 bg-gray-50]
},
dark: {
icon: %w[fill-gray-800],
bubble: %w[text-white bg-gray-800]
}
}.freeze

# @param text [String] The toggletip text
# @param position [Symbol] The position of the arrow in relation to the
# toggletip. The latter will be positioned accordingly in relation to the
# help icon. Defaults to `:up`. See `POSITIONS` for available options.
rainerdema marked this conversation as resolved.
Show resolved Hide resolved
# @param theme [Symbol] The theme of the toggletip. Defaults to `:light`. See
# `THEMES` for available options.
def initialize(text:, position: :down, theme: :light, **attributes)
def initialize(text:, position: :above, **attributes)
@text = text
@position = position
@theme = theme
@attributes = attributes
@attributes[:class] = [
"relative inline-block",
@attributes[:class],
].join(" ")
end

def icon_theme_classes
THEMES.fetch(@theme)[:icon].join(" ")
end

def bubble_theme_classes
THEMES.fetch(@theme)[:bubble].join(" ")
end

def bubble_position_classes
POSITIONS.fetch(@position)[:bubble].join(" ")
end

def bubble_arrow_pseudo_element
(
[
"before:content['']",
"before:absolute",
"before:w-[0.375rem]",
"before:h-[0.375rem]",
"before:rotate-45",
"before:bg-inherit",
] + POSITIONS.fetch(@position)[:arrow]
).join(" ")
@attributes[:class] = "relative inline-block #{@attributes[:class]}"
end
end
20 changes: 3 additions & 17 deletions admin/spec/components/previews/solidus_admin/ui/toggletip/component_preview.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,21 @@

# @component "ui/toggletip"
class SolidusAdmin::UI::Toggletip::ComponentPreview < ViewComponent::Preview
DUMMY_TEXT = "Lorem ipsum dolor sit amet, consectetur adipiscing elit."

include SolidusAdmin::Preview

def overview
render_with_template(
locals: {
text: DUMMY_TEXT,
positions: current_component::POSITIONS.keys,
themes: current_component::THEMES.keys
}
)
render_with_template
end

# @param text text
# @param position select :position_options
# @param theme select :theme_options
# @param open toggle
def playground(text: DUMMY_TEXT, position: :down, theme: :light, open: false)
def playground(text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", position: :above, open: false)
render current_component.new(
text: text,
position: position,
theme: theme,
open: open,
class: "m-80"
class: "m-40"
)
end

Expand All @@ -35,8 +25,4 @@ def playground(text: DUMMY_TEXT, position: :down, theme: :light, open: false)
def position_options
current_component::POSITIONS.keys
end

def theme_options
current_component::THEMES.keys
end
end
35 changes: 14 additions & 21 deletions ...n/spec/components/previews/solidus_admin/ui/toggletip/component_preview/overview.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,14 @@
<table class="w-full">
<legend class="body-title text-center">Click us</legend>
<tr>
<th class="w-[10%]"></th>
<% themes.each do |theme| %>
<th class="px-3 py-1 text-gray-500 text-center"><%= theme.to_s.humanize %></th>
<% end %>
</tr>
<% positions.each do |position| %>
<tr>
<td class="font-bold px-3 py-1"><%= position.to_s.humanize %></td>
<% themes.each do |theme| %>
<td class="py-3">
<div class="flex justify-center">
<%= render current_component.new(text: text, theme: theme, position: position) %>
</div>
</td>
<% end %>
</tr>
<% end %>
</table>
<% current_component::POSITIONS.keys.each do |position| %>
<div class="mb-8">
<h6 class="text-gray-500 mb-3 mt-0">
<%= position.to_s.humanize %>
</h6>

<div class="ml-80">
<%= render current_component.new(
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
position: position
) %>
</div>
</div>
<% end %>