diff --git a/app/assets/stylesheets/components/_inbox-entry.scss b/app/assets/stylesheets/components/_inbox-entry.scss index 3fd728a1..a56875cd 100644 --- a/app/assets/stylesheets/components/_inbox-entry.scss +++ b/app/assets/stylesheets/components/_inbox-entry.scss @@ -1,6 +1,10 @@ +@use "sass:map"; + .inbox-entry { $this: &; + position: relative; + &--new { box-shadow: 0 0.125rem 0.25rem var(--primary); @@ -22,6 +26,24 @@ } } + &__close { + position: absolute; + top: map.get($spacers, 3); + right: map.get($spacers, 3); + } + + &__sharing { + position: absolute; + display: flex; + background-color: rgba(var(--raised-bg-rgb), 0.9); + backdrop-filter: blur(3px); + border-radius: var(--card-inner-border-radius); + top: 0; + bottom: 0; + left: 0; + right: 0; + } + .format-help { opacity: .3; } @@ -30,7 +52,7 @@ &:hover .format-help { opacity: 1; } - + .card-header { position: relative; } diff --git a/app/views/inbox/_entry.html.haml b/app/views/inbox/_entry.html.haml index f630d80c..c696c29b 100644 --- a/app/views/inbox/_entry.html.haml +++ b/app/views/inbox/_entry.html.haml @@ -33,19 +33,22 @@ = t("voc.answer") %button.btn.btn-danger.me-sm-1{ name: "ib-destroy", data: { ib_id: i.id } } = t("voc.delete") - %button.btn.btn-default.px-1{ name: "ib-options", data: { ib_id: i.id, state: :hidden } } - %i.fa.fa-chevron-down - %span.pe-none= t(".options") %p.format-help.ms-auto.align-self-center.mt-2.mt-sm-0.text-center = render "shared/format_link" - .card-footer.d-none{ id: "ib-options-#{i.id}" } - %h4= t(".sharing.heading") - - if services.count.positive? - .row - - services.each do |service| - .col-md-3.col-sm-4.col-xs-6 - %label - %input{ type: "checkbox", name: "ib-share", checked: :checked, data: { ib_id: i.id, service: service.provider } } - = raw t(".sharing.post_to", service: service.provider.capitalize) - - else - %p= t(".sharing.none_html", settings: link_to(t(".sharing.settings"), services_path)) + - if current_user.sharing_enabled + .inbox-entry__sharing.text-center.p-2.justify-content-center.d-none{ data: { controller: "inbox-sharing", inbox_sharing_config_value: "{}", inbox_sharing_auto_close_value: current_user.sharing_autoclose.to_s }} + %button.btn-close.inbox-entry__close{ data: { action: "inbox-sharing#close" } } + %span.visually-hidden= t("voc.close") + %div.align-self-center + %p.fs-3.fw-bold= t(".sharing.heading") + %p + %a.btn.btn-primary{ href: "https://twitter.com/intent/tweet?text=", data: { inbox_sharing_target: "twitter" }, target: "_blank" } + %i.fab.fa-twitter.fa-fw + Twitter + %a.btn.btn-primary{ href: "#", data: { inbox_sharing_target: "tumblr" }, target: "_blank" } + %i.fab.fa-tumblr.fa-fw + Tumblr + - if current_user.sharing_custom_url + %a.btn.btn-primary{ href: current_user.sharing_custom_url, data: { inbox_sharing_target: "custom" }, target: "_blank" } + = current_user.display_sharing_custom_url + %p.text-muted= t(".sharing.hint_html", settings: link_to(t(".sharing.settings"), settings_sharing_path)) diff --git a/config/locales/views.en.yml b/config/locales/views.en.yml index 29b241e8..425c1d67 100644 --- a/config/locales/views.en.yml +++ b/config/locales/views.en.yml @@ -214,10 +214,10 @@ en: options: "Sharing Options" placeholder: "Write your answer hereā€¦" sharing: - heading: "Sharing" + heading: "Share answer on..." post_to: "Post to %{service}" - none_html: "You have not connected any services yet. Visit your %{settings} to connect one." - settings: "service settings" + hint_html: "You can customize sharing in your %{settings}" + settings: "settings" show: empty: "Nothing to see here." actions: