Refactor tooltip on the backoffice orders page

This commit is contained in:
Gaetan Craig-Riou
2023-09-25 15:09:53 +02:00
parent 6a1664d2fd
commit 7ce3fea7d5
3 changed files with 22 additions and 10 deletions

View File

@@ -0,0 +1,7 @@
%div{ "data-controller": "tooltip" }
%button{class: button_class, "data-reflex": button_reflex, "data-id": reflex_data_id, "data-tooltip-target": "element" }
.tooltip-container
.tooltip{"data-tooltip-target": "tooltip"}
= sanitize tooltip_text
.arrow{"data-tooltip-target": "arrow"}

View File

@@ -14,6 +14,10 @@
%div{ "data-controller": "tooltip", "data-tooltip-tip-value": order.special_instructions.to_s }
%span.icon-warning-sign{ "data-tooltip-target": "element" }
= t('spree.admin.orders.index.note')
.tooltip-container
.tooltip{"data-tooltip-target": "tooltip"}
= sanitize order.special_instructions.to_s
.arrow{"data-tooltip-target": "arrow"}
%td.align-left
%span.state{ class: order.state.to_s }
= t('js.admin.orders.order_state.' + order.state.to_s)
@@ -41,13 +45,8 @@
%div.row-loading-icons
- if local_assigns[:success]
%i.success.icon-ok-sign{"data-controller": "ephemeral"}
%a.icon_link.with-tip.icon-edit.no-text{href: edit_admin_order_path(order), "data-controller": "tooltip", "data-tooltip-tip-value": t('spree.admin.orders.index.edit'), "data-tooltip-target": "element"}
= render partial: 'admin/shared/tooltip', locals: {link_class: "icon_link with-tip icon-edit no-text" ,link: edit_admin_order_path(order), link_text: "", tooltip_text: t('spree.admin.orders.index.edit')}
- if order.ready_to_ship?
%div{ "data-controller": "tooltip", "data-tooltip-tip-value": t('spree.admin.orders.index.ship') }
%button.icon-road.icon_link.with-tip.no-text{"data-reflex": "click->Admin::OrdersReflex#ship", "data-id": order.id.to_s,
"data-tooltip-target": "element" }
= render partial: 'admin/shared/tooltip_button', locals: {button_class: "icon-road icon_link with-tip no-text", button_reflex: "click->Admin::OrdersReflex#ship", reflex_data_id: order.id.to_s, tooltip_text: t('spree.admin.orders.index.ship')}
- if order.payment_required? && order.pending_payments.reject(&:requires_authorization?).any?
%div{ "data-controller": "tooltip", "data-tooltip-tip-value": t('spree.admin.orders.index.capture') }
%button.icon-capture.icon_link.no-text{"data-reflex": "click->Admin::OrdersReflex#capture", "data-id": order.id.to_s,
"data-tooltip-target": "element" }
= render partial: 'admin/shared/tooltip_button', locals: {button_class: "icon-capture icon_link no-text", button_reflex: "click->Admin::OrdersReflex#capture", reflex_data_id: order.id.to_s, tooltip_text: t('spree.admin.orders.index.capture')}

View File

@@ -443,8 +443,9 @@ describe '
it "displays a note with order instructions" do
within "tr#order_#{order3.id}" do
expect(page).to have_content I18n.t('spree.admin.orders.index.note')
expect(page).to have_css "[data-tooltip-tip-value='#{order3.special_instructions}']"
expect(page).to have_content "Note"
find(".icon-warning-sign").hover
expect(page).to have_content /#{order3.special_instructions}/i
end
end
end
@@ -762,6 +763,11 @@ describe '
# checks shipment state
expect(page).to have_content "READY"
# move away from the Ship button so we can trigger the mouseenter event by moving back.
# We are already on the "Ship" button when it gets rendered because of
# the previous click
find(".icon-edit").hover
# mouse-hovers and finds Ship tooltip
find(".icon-road").hover
expect(page).to have_content "Ship"