Add Stimulus controller to launch format popup
This commit is contained in:
parent
eccb51eab0
commit
30933e6ca1
|
@ -6,6 +6,10 @@
|
||||||
font-size: 10em;
|
font-size: 10em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fs-7 {
|
||||||
|
font-size: .8rem;
|
||||||
|
}
|
||||||
|
|
||||||
.pe-none {
|
.pe-none {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
|
@ -80,6 +80,7 @@ $unicodeRangeValues in Lexend.$unicodeMap {
|
||||||
"overrides/minicolors",
|
"overrides/minicolors",
|
||||||
"overrides/modal",
|
"overrides/modal",
|
||||||
"overrides/navbar",
|
"overrides/navbar",
|
||||||
|
"overrides/popover",
|
||||||
"overrides/turbolinks",
|
"overrides/turbolinks",
|
||||||
"overrides/toasts",
|
"overrides/toasts",
|
||||||
"overrides/sweet-alert";
|
"overrides/sweet-alert";
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
|
@ -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'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
|
@ -2,6 +2,7 @@ import { Application } from "@hotwired/stimulus";
|
||||||
import AnnouncementController from "retrospring/controllers/announcement_controller";
|
import AnnouncementController from "retrospring/controllers/announcement_controller";
|
||||||
import AutofocusController from "retrospring/controllers/autofocus_controller";
|
import AutofocusController from "retrospring/controllers/autofocus_controller";
|
||||||
import CharacterCountController from "retrospring/controllers/character_count_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
|
* This module sets up Stimulus and our controllers
|
||||||
|
@ -15,4 +16,5 @@ export default function (): void {
|
||||||
window['Stimulus'].register('announcement', AnnouncementController);
|
window['Stimulus'].register('announcement', AnnouncementController);
|
||||||
window['Stimulus'].register('autofocus', AutofocusController);
|
window['Stimulus'].register('autofocus', AutofocusController);
|
||||||
window['Stimulus'].register('character-count', CharacterCountController);
|
window['Stimulus'].register('character-count', CharacterCountController);
|
||||||
|
window['Stimulus'].register('format-popup', FormatPopupController);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue