diff --git a/app/assets/stylesheets/_utilities.scss b/app/assets/stylesheets/_utilities.scss index fc3477d8..5fe1bbae 100644 --- a/app/assets/stylesheets/_utilities.scss +++ b/app/assets/stylesheets/_utilities.scss @@ -6,6 +6,10 @@ font-size: 10em; } +.fs-7 { + font-size: .8rem; +} + .pe-none { pointer-events: none; } diff --git a/app/assets/stylesheets/application.sass.scss b/app/assets/stylesheets/application.sass.scss index 588ed388..4fbee3ef 100644 --- a/app/assets/stylesheets/application.sass.scss +++ b/app/assets/stylesheets/application.sass.scss @@ -80,6 +80,7 @@ $unicodeRangeValues in Lexend.$unicodeMap { "overrides/minicolors", "overrides/modal", "overrides/navbar", +"overrides/popover", "overrides/turbolinks", "overrides/toasts", "overrides/sweet-alert"; diff --git a/app/assets/stylesheets/components/_inbox-entry.scss b/app/assets/stylesheets/components/_inbox-entry.scss index 38cdf4ba..2b4d7076 100644 --- a/app/assets/stylesheets/components/_inbox-entry.scss +++ b/app/assets/stylesheets/components/_inbox-entry.scss @@ -1,4 +1,6 @@ .inbox-entry { + $this: &; + &--new { box-shadow: 0 0.125rem 0.25rem var(--primary); @@ -19,4 +21,13 @@ } } } + + .format-help { + opacity: .3; + } + + &:focus-within .format-help, + &:hover .format-help { + opacity: 1; + } } diff --git a/app/assets/stylesheets/overrides/_popover.scss b/app/assets/stylesheets/overrides/_popover.scss new file mode 100644 index 00000000..7ba4f826 --- /dev/null +++ b/app/assets/stylesheets/overrides/_popover.scss @@ -0,0 +1,13 @@ +.popover { + box-shadow: $box-shadow; + background-color: var(--raised-bg); +} + +.rs-popover { + --popover-arrow-border: transparent; + --popover-border-color: transparent; +} + +.popover-body p:last-child { + margin-bottom: 0; +} diff --git a/app/javascript/retrospring/controllers/format_popup_controller.ts b/app/javascript/retrospring/controllers/format_popup_controller.ts new file mode 100644 index 00000000..e22723ef --- /dev/null +++ b/app/javascript/retrospring/controllers/format_popup_controller.ts @@ -0,0 +1,18 @@ +import { Controller } from '@hotwired/stimulus'; +import { Popover } from 'bootstrap'; + +export default class extends Controller { + connect(): void { + const formatOptionsElement = document.getElementById('formatting-options'); + + this.element.addEventListener('click', e => e.preventDefault()); + + new Popover(this.element, { + html: true, + content: formatOptionsElement.innerHTML, + placement: 'bottom', + trigger: 'focus', + customClass: 'rs-popover' + }) + } +} diff --git a/app/javascript/retrospring/initializers/stimulus.ts b/app/javascript/retrospring/initializers/stimulus.ts index fc65f20e..0c5c43de 100644 --- a/app/javascript/retrospring/initializers/stimulus.ts +++ b/app/javascript/retrospring/initializers/stimulus.ts @@ -2,6 +2,7 @@ import { Application } from "@hotwired/stimulus"; import AnnouncementController from "retrospring/controllers/announcement_controller"; import AutofocusController from "retrospring/controllers/autofocus_controller"; import CharacterCountController from "retrospring/controllers/character_count_controller"; +import FormatPopupController from "retrospring/controllers/format_popup_controller"; /** * This module sets up Stimulus and our controllers @@ -15,4 +16,5 @@ export default function (): void { window['Stimulus'].register('announcement', AnnouncementController); window['Stimulus'].register('autofocus', AutofocusController); window['Stimulus'].register('character-count', CharacterCountController); + window['Stimulus'].register('format-popup', FormatPopupController); } diff --git a/app/views/inbox/_entry.html.haml b/app/views/inbox/_entry.html.haml index 12409502..bab43c53 100644 --- a/app/views/inbox/_entry.html.haml +++ b/app/views/inbox/_entry.html.haml @@ -23,15 +23,17 @@ = render "actions/question", question: i.question - if current_user == i.user .card-body - %textarea.form-control{ name: "ib-answer", placeholder: t(".placeholder"), data: { id: i.id } } - %br/ - %button.btn.btn-success{ name: "ib-answer", data: { ib_id: i.id } } - = t("voc.answer") - %button.btn.btn-danger{ name: "ib-destroy", data: { ib_id: i.id } } - = t("voc.delete") - %button.btn.btn-default{ name: "ib-options", data: { ib_id: i.id, state: :hidden } } - %i.fa.fa-chevron-down - %span.pe-none= t(".options") + %textarea.form-control.mb-3{ name: "ib-answer", placeholder: t(".placeholder"), data: { id: i.id } } + .d-sm-flex + %button.btn.btn-success.me-sm-1{ name: "ib-answer", data: { ib_id: i.id } } + = 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 current_user.services.count.positive? diff --git a/app/views/layouts/base.html.haml b/app/views/layouts/base.html.haml index 6791f897..8b05a3b8 100644 --- a/app/views/layouts/base.html.haml +++ b/app/views/layouts/base.html.haml @@ -30,6 +30,7 @@ = render 'navigation/guest' = render 'shared/announcements' = yield + = render "shared/formatting" - if Rails.env.development? #debug %hr diff --git a/app/views/shared/_format_link.html.haml b/app/views/shared/_format_link.html.haml new file mode 100644 index 00000000..023cbfe5 --- /dev/null +++ b/app/views/shared/_format_link.html.haml @@ -0,0 +1,3 @@ +%a.text-muted.text-decoration-none.fs-7{ href: "#", data: { controller: "format-popup" }, tabindex: "0" } + %i.fab.fa-markdown + = t("voc.format_markdown") diff --git a/app/views/shared/_formatting.html.haml b/app/views/shared/_formatting.html.haml new file mode 100644 index 00000000..30a19851 --- /dev/null +++ b/app/views/shared/_formatting.html.haml @@ -0,0 +1,2 @@ +#formatting-options.d-none{ aria: { hidden: true } } + = t(".body_html", app_name: APP_CONFIG["site_name"]) diff --git a/config/locales/views.en.yml b/config/locales/views.en.yml index efe4373a..583c0616 100644 --- a/config/locales/views.en.yml +++ b/config/locales/views.en.yml @@ -550,6 +550,13 @@ en: unsubscribe_all: "Disable on all devices" description: "Here you can set up or disable push notifications for new questions in your inbox." shared: + formatting: + body_html: | +

%{app_name} uses Markdown for formatting

+

A blank line starts a new paragraph

+

*italic text* for italic text

+

**bold text** for bold text

+

[link](https://example.com) for link

links: about: "About" source: "Source code" diff --git a/config/locales/voc.en.yml b/config/locales/voc.en.yml index 232d5500..7f674a7e 100644 --- a/config/locales/voc.en.yml +++ b/config/locales/voc.en.yml @@ -10,6 +10,7 @@ en: delete: "Delete" edit: "Edit" follow: "Follow" + format_markdown: "Styling with Markdown is supported" load: "Load more" login: "Sign in" logout: "Sign out"