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/overrides/_popover.scss b/app/assets/stylesheets/overrides/_popover.scss new file mode 100644 index 00000000..90d05ad4 --- /dev/null +++ b/app/assets/stylesheets/overrides/_popover.scss @@ -0,0 +1,13 @@ +.popover { + box-shadow: $box-shadow-sm; + 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); }