Simple branch
Less formatting options for a simple toolbar
This commit is contained in:
iunctis
parent
4401e83c5f
commit
5bf208e920
@ -1,11 +1,9 @@
|
||||
# MD Composer Extras
|
||||
|
||||
This Discourse theme component adds formatting options to your Discourse composer.
|
||||
This Discourse theme component adds formatting options to your Discourse composer. This *simple* branch uses less formatting options
|
||||
|
||||
* underline
|
||||
* strikethrough
|
||||
* superscript
|
||||
* subscript
|
||||
* center
|
||||
* align right
|
||||
* justify
|
||||
@ -13,9 +11,7 @@ This Discourse theme component adds formatting options to your Discourse compose
|
||||
* float right
|
||||
* columns.
|
||||
|
||||
These additions are responsive for desktops and phones, but not for horizon orientation or tablets. These additions have taken into consideration [Slick](https://github.com/discourse/Discourse-Slick-image-gallery), [Tiles](https://github.com/discourse/Discourse-Tiles-image-gallery), and [Events](https://github.com/angusmcleod/discourse-events) when determining what should be placed on the composer bar or in the composer pop out menu.
|
||||
|
||||
There is currently no implemented option for disabling particular buttons, but this can be done through CSS.
|
||||
|
||||
## Columns and Floats
|
||||
|
||||
@ -46,6 +42,7 @@ Test
|
||||
Test
|
||||
```
|
||||
|
||||
|
||||
## Questions
|
||||
|
||||
For more informations, see:
|
||||
@ -53,6 +50,7 @@ For more informations, see:
|
||||
- English : https://meta.discourse.org/t/md-composer-extras/118912
|
||||
- Français : https://www.mon-discourse.fr/themes/md-composer-extras/
|
||||
|
||||
|
||||
## Credits
|
||||
|
||||
Wrap support by thw26: https://github.com/thw26
|
||||
|
||||
@ -10,3 +10,25 @@
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
[data-wrap="columns"] {
|
||||
width: 50%;
|
||||
float: left;
|
||||
border-right: 1px solid $primary;
|
||||
padding-right: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
[data-wrap="floatl"] {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
[data-wrap="floatr"] {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
[data-wrap="columns"] > p, [data-wrap="floatl"] > p, [data-wrap="floatr"] > p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@ -1,22 +0,0 @@
|
||||
[data-wrap="columns"] {
|
||||
width: 50%;
|
||||
float: left;
|
||||
border-right: 1px solid $primary;
|
||||
padding-right: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
[data-wrap="columns"] > p, [data-wrap="floatl"] > p, [data-wrap="floatr"] > p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
[data-wrap="floatl"] {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
[data-wrap="floatr"] {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
}
|
||||
@ -17,22 +17,6 @@ api.onToolbarCreate(toolbar => {
|
||||
perform: e => e.applySurround('<s>', '</s>', 'strikethrough_text')
|
||||
});
|
||||
});
|
||||
api.onToolbarCreate(toolbar => {
|
||||
toolbar.addButton({
|
||||
id: "superscript_button",
|
||||
group: "fontStyles",
|
||||
icon: "superscript",
|
||||
perform: e => e.applySurround('<sup>', '</sup>', 'superscript_text')
|
||||
});
|
||||
});
|
||||
api.onToolbarCreate(toolbar => {
|
||||
toolbar.addButton({
|
||||
id: "subscript_button",
|
||||
group: "fontStyles",
|
||||
icon: "subscript",
|
||||
perform: e => e.applySurround('<sub>', '</sub>', 'subscript_text')
|
||||
});
|
||||
});
|
||||
api.onToolbarCreate(toolbar => {
|
||||
toolbar.addButton({
|
||||
id: "align_center_button",
|
||||
@ -114,14 +98,6 @@ translations.composer.strikethrough_button_title = settings.strikethrough_button
|
||||
translations.composer.strikethrough_text =
|
||||
settings.strikethrough_text;
|
||||
|
||||
translations.composer.superscript_button_title = settings.superscript_button;
|
||||
translations.composer.superscript_text =
|
||||
settings.superscript_text;
|
||||
|
||||
translations.composer.subscript_button_title = settings.subscript_button;
|
||||
translations.composer.subscript_text =
|
||||
settings.subscript_text;
|
||||
|
||||
translations.columns_button = settings.columns_button;
|
||||
translations.composer.columns_text =
|
||||
settings.columns_text;
|
||||
|
||||
@ -18,20 +18,6 @@ api.addToolbarPopupMenuOptionsCallback(() => {
|
||||
label: "strikethrough_button"
|
||||
};
|
||||
});
|
||||
api.addToolbarPopupMenuOptionsCallback(() => {
|
||||
return {
|
||||
action: "superscript",
|
||||
icon: "superscript",
|
||||
label: "superscript_button"
|
||||
};
|
||||
});
|
||||
api.addToolbarPopupMenuOptionsCallback(() => {
|
||||
return {
|
||||
action: "subscript",
|
||||
icon: "subscript",
|
||||
label: "subscript_button"
|
||||
};
|
||||
});
|
||||
api.addToolbarPopupMenuOptionsCallback(() => {
|
||||
return {
|
||||
action: "aligncenter",
|
||||
@ -46,43 +32,17 @@ api.addToolbarPopupMenuOptionsCallback(() => {
|
||||
label: "align_right_button"
|
||||
};
|
||||
});
|
||||
api.addToolbarPopupMenuOptionsCallback(() => {
|
||||
return {
|
||||
action: "alignjustify",
|
||||
icon: "align-justify",
|
||||
label: "align_justify_button"
|
||||
};
|
||||
});
|
||||
api.addToolbarPopupMenuOptionsCallback(() => {
|
||||
return {
|
||||
action: "floatleft",
|
||||
icon: "indent",
|
||||
label: "float_left_button"
|
||||
};
|
||||
});
|
||||
|
||||
api.modifyClass("controller:composer", {
|
||||
actions: {
|
||||
strikethrough() {
|
||||
this.get("toolbarEvent").applySurround("<s>", "</s>", "strikethrough_text");
|
||||
},
|
||||
superscript() {
|
||||
this.get("toolbarEvent").applySurround("<sup>", "</sub>", "superscript_text");
|
||||
},
|
||||
subscript() {
|
||||
this.get("toolbarEvent").applySurround("<sub>", "</sub>", "subscript_text");
|
||||
},
|
||||
aligncenter() {
|
||||
this.get("toolbarEvent").applySurround('[wrap="center"]\n', '\n[/wrap]', "align_center_text");
|
||||
},
|
||||
alignright() {
|
||||
this.get("toolbarEvent").applySurround('[wrap="right"]\n', '\n[/wrap]', "align_right_text");
|
||||
},
|
||||
alignjustify() {
|
||||
this.get("toolbarEvent").applySurround('[wrap="justify"]\n', '\n[/wrap]', "align_justify_text");
|
||||
},
|
||||
floatleft() {
|
||||
this.get("toolbarEvent").applySurround('[wrap="floatl"]\n', '\n[/wrap]', "float_left_text");
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -108,28 +68,8 @@ translations.align_right_button = settings.align_right_button;
|
||||
translations.composer.align_right_text =
|
||||
settings.align_right_text;
|
||||
|
||||
translations.align_justify_button = settings.align_justify_button;
|
||||
translations.composer.align_justify_text =
|
||||
settings.align_justify_text;
|
||||
|
||||
translations.strikethrough_button = settings.strikethrough_button;
|
||||
translations.composer.strikethrough_text =
|
||||
settings.strikethrough_text;
|
||||
|
||||
translations.superscript_button = settings.superscript_button;
|
||||
translations.composer.superscript_text =
|
||||
settings.superscript_text;
|
||||
|
||||
translations.subscript_button = settings.subscript_button;
|
||||
translations.composer.subscript_text =
|
||||
settings.subscript_text;
|
||||
|
||||
translations.columns_button = settings.columns_button;
|
||||
translations.composer.columns_text =
|
||||
settings.columns_text;
|
||||
|
||||
translations.float_left_button = settings.float_left_button;
|
||||
translations.composer.float_left_text =
|
||||
settings.float_left_text;
|
||||
|
||||
</script>
|
||||
|
||||
@ -1,17 +1,8 @@
|
||||
#reply-control .d-editor-button-bar .bullet, #reply-control .d-editor-button-bar .list, #reply-control .d-editor-button-bar .align_justify_button{
|
||||
#reply-control .d-editor-button-bar {
|
||||
.bullet, .list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.d-editor-spacer {
|
||||
}
|
||||
.d-editor-spacer {
|
||||
margin: 0 2px;
|
||||
}
|
||||
}
|
||||
|
||||
[data-wrap="columns"] {
|
||||
}
|
||||
|
||||
[data-wrap="floatl"] {
|
||||
}
|
||||
|
||||
[data-wrap="floatr"] {
|
||||
}
|
||||
|
||||
|
||||
18
settings.yml
18
settings.yml
@ -46,22 +46,6 @@ float_left_text:
|
||||
default: "Text"
|
||||
description:
|
||||
en: Enter the placeholder text that appears in the composer after the user clicks the button.
|
||||
superscript_button:
|
||||
default: "Superscript"
|
||||
description:
|
||||
en: Enter the text for the title of the button in the composer.
|
||||
superscript_text:
|
||||
default: "Text"
|
||||
description:
|
||||
en: Enter the placeholder text that appears in the composer after the user clicks the button.
|
||||
subscript_button:
|
||||
default: "Subscript"
|
||||
description:
|
||||
en: Enter the text for the title of the button in the composer.
|
||||
subscript_text:
|
||||
default: "Text"
|
||||
description:
|
||||
en: Enter the placeholder text that appears in the composer after the user clicks the button.
|
||||
columns_button:
|
||||
default: "Columns"
|
||||
description:
|
||||
@ -74,6 +58,6 @@ columns_text:
|
||||
Svg_icons:
|
||||
type: 'list'
|
||||
list_type: 'compact'
|
||||
default: 'fa-align-center|fa-align-right|fa-align-justify|fa-strikethrough|fa-underline|fa-indent|fa-columns|fa-superscript|fa-subscript'
|
||||
default: 'fa-align-center|fa-align-right|fa-align-justify|fa-strikethrough|fa-underline|fa-indent|fa-columns'
|
||||
description:
|
||||
en: "Include FontAwesome 5 icon classes for each icon used in the list."
|
||||
|
||||
Loading…
Reference in New Issue
Block a user