Add Stimulus controller to launch format popup

This commit is contained in:
Andreas Nedbal 2023-01-10 15:49:52 +01:00
parent eccb51eab0
commit 30933e6ca1
5 changed files with 38 additions and 0 deletions

View file

@ -6,6 +6,10 @@
font-size: 10em;
}
.fs-7 {
font-size: .8rem;
}
.pe-none {
pointer-events: none;
}

View file

@ -80,6 +80,7 @@ $unicodeRangeValues in Lexend.$unicodeMap {
"overrides/minicolors",
"overrides/modal",
"overrides/navbar",
"overrides/popover",
"overrides/turbolinks",
"overrides/toasts",
"overrides/sweet-alert";

View file

@ -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;
}

View file

@ -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'
})
}
}

View file

@ -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);
}