diff --git a/frontend/src/assets/style.scss b/frontend/src/assets/style.scss index 695ef1a..5489f0b 100644 --- a/frontend/src/assets/style.scss +++ b/frontend/src/assets/style.scss @@ -191,6 +191,24 @@ section { font-size: 1.2rem; line-height: 0.95rem; } + .ql-toolbar.ql-snow .ql-picker.ql-size { + .ql-picker-item[data-value="11px"]::before { + content: 'Small'; + font-size: 11px !important; + } + .ql-picker-item[data-value="13px"]::before { + content: 'Normal'; + font-size: 13px !important; + } + .ql-picker-item[data-value="22px"]::before { + content: 'Big'; + font-size: 20px !important; + } + .ql-picker-item[data-value="32px"]::before { + content: 'Huge'; + font-size: 32px !important; + } + } } /* Table colors and padding */ @@ -224,7 +242,7 @@ section { } -/* Fix for button primary colour. */ +/* Fix for input colours */ .button.is-primary { background: $primary; &:hover { @@ -271,6 +289,11 @@ section { margin-bottom: 0; } +/* Tabs */ +.b-tabs .tab-content { + padding-top: 2rem; +} + /* Tags */ .tag { min-width: 75px; @@ -561,9 +584,6 @@ section.campaign { .disabled { opacity: 0.30; } - .tab-content { - padding-top: 30px; - } .box { margin-bottom: 30px; } diff --git a/frontend/src/components/Editor.vue b/frontend/src/components/Editor.vue index fe46614..ef27640 100644 --- a/frontend/src/components/Editor.vue +++ b/frontend/src/components/Editor.vue @@ -60,12 +60,37 @@ import 'quill/dist/quill.snow.css'; import 'quill/dist/quill.core.css'; -import { quillEditor } from 'vue-quill-editor'; +import { quillEditor, Quill } from 'vue-quill-editor'; import CodeFlask from 'codeflask'; import CampaignPreview from './CampaignPreview.vue'; import Media from '../views/Media.vue'; +// Setup Quill to use inline CSS style attributes instead of classes. +Quill.register(Quill.import('attributors/attribute/direction'), true); +Quill.register(Quill.import('attributors/style/align'), true); +Quill.register(Quill.import('attributors/style/background'), true); +Quill.register(Quill.import('attributors/style/color'), true); +Quill.register(Quill.import('formats/indent'), true); + +const quillFontSizes = Quill.import('attributors/style/size'); +quillFontSizes.whitelist = ['11px', '13px', '22px', '32px']; +Quill.register(quillFontSizes, true); + +// Custom class to override the default indent behaviour to get inline CSS +// style instead of classes. +class IndentAttributor extends Quill.import('parchment').Attributor.Style { + multiplier = 30; + + add(node, value) { + return super.add(node, `${value * this.multiplier}px`); + } + + value(node) { + return parseFloat(super.value(node)) / this.multiplier || undefined; + } +} + export default { components: { Media, @@ -120,7 +145,7 @@ export default { container: [ [{ header: [1, 2, 3, false] }], ['bold', 'italic', 'underline', 'strike', 'blockquote', 'code'], - [{ color: [] }, { background: [] }, { size: [] }], + [{ color: [] }, { background: [] }, { size: quillFontSizes.whitelist }], [ { list: 'ordered' }, { list: 'bullet' }, @@ -182,7 +207,7 @@ export default { el.shadowRoot.innerHTML = `