Merge pull request #8 from thw26/master

Responsiveness and New Buttons
This commit is contained in:
iunctis.fr 2019-11-17 21:19:15 +01:00 committed by GitHub
commit 69830f1562
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 322 additions and 27 deletions

View File

@ -1,15 +1,61 @@
## MD Composer Extras
# MD Composer Extras
Add some formatting option in your Discourse composer : underline, center, align right, justify and strikethrough
This Discourse theme component adds formatting options to your Discourse composer.
For more informations, see :
* underline
* strikethrough
* superscript
* subscript
* center
* align right
* justify
* float left
* 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
When using columns and floats, note that the text will autobreak once an appropriate amount of content has been placed in the second column or to the side of the float.
Columns have a CSS border to for ease of viewing.
A column is broken by placing `[/wrap]` at the end of the first column's content.
The CSS for columns and floats is disabled on mobile. By default on mobile columns and float will appear as single column content. The missing CSS can be added in again manually.
**Column Example**
Place the following in your editor to see how columns work.
```
Test
[wrap="columns"]
1
2
3
[/wrap]
1
2
3
Test
```
## Questions
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/
<br>
## Credits
Wrap support by thw26 : https://github.com/thw26
Wrap support by thw26: https://github.com/thw26
<br>

View File

@ -4,6 +4,6 @@
"license_url": null,
"about_url": "https://www.mon-discourse.fr/themes/md-composer-extras/",
"authors": "Steven",
"theme_version": "1.2",
"theme_version": "1.5",
"learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}

View File

@ -9,3 +9,4 @@
[data-wrap="justify"] {
text-align: justify;
}

22
desktop/desktop.scss Normal file
View File

@ -0,0 +1,22 @@
[data-wrap="columns"] {
width: 50%;
float: left;
border-right: 1px solid black;
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;
}

View File

@ -1,7 +1,5 @@
<script type="text/discourse-plugin" version="0.8">
const { iconNode } = require("discourse-common/lib/icon-library");
// TOOLBAR
api.onToolbarCreate(toolbar => {
toolbar.addButton({
@ -11,6 +9,30 @@ api.onToolbarCreate(toolbar => {
perform: e => e.applySurround('[u]', '[/u]', 'underline_text')
});
});
api.onToolbarCreate(toolbar => {
toolbar.addButton({
id: "strikethrough_button",
group: "fontStyles",
icon: "strikethrough",
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",
@ -36,23 +58,32 @@ api.onToolbarCreate(toolbar => {
});
});
// EXTRAS
api.addToolbarPopupMenuOptionsCallback(() => {
return {
action: "strikethrough",
icon: "strikethrough",
label: "strikethrough_button"
action: "floatleft",
icon: "indent",
label: "float_left_button"
};
});
api.modifyClass("controller:composer", {
actions: {
strikethrough() {
this.get("toolbarEvent").applySurround("<s>", "</s>", "strikethrough_prompt");
},
}
api.addToolbarPopupMenuOptionsCallback(() => {
return {
action: "columns",
icon: "columns",
label: "columns_button"
};
});
api.modifyClass("controller:composer", {
actions: {
floatleft() {
this.get("toolbarEvent").applySurround('[wrap="floatl"]\n', '\n[/wrap]', "float_left_text");
},
columns() {
this.get("toolbarEvent").applySurround('[wrap="columns"]\n', '\n[/wrap]', "columns_text");
}
}
});
// TEXTS
let translations = I18n.translations[I18n.currentLocale()].js;
@ -62,10 +93,11 @@ if (!translations) {
if (!translations.composer) {
translations.composer = {};
}
translations.composer.underline_button_title = settings.underline_button;
translations.composer.underline_text =
settings.underline_text;
translations.composer.align_center_button_title = settings.align_center_button;
translations.composer.align_center_text =
settings.align_center_text;
@ -78,7 +110,24 @@ translations.composer.align_justify_button_title = settings.align_justify_button
translations.composer.align_justify_text =
settings.align_justify_text;
translations.strikethrough_button = settings.strikethrough_button;
translations.composer.strikethrough_prompt =
settings.strikethrough_prompt;
</script>
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;
translations.float_left_button = settings.float_left_button;
translations.composer.float_left_text =
settings.float_left_text;
</script>

135
mobile/head_tag.html Normal file
View File

@ -0,0 +1,135 @@
<script type="text/discourse-plugin" version="0.8">
const { iconNode } = require("discourse-common/lib/icon-library");
// TOOLBAR
api.onToolbarCreate(toolbar => {
toolbar.addButton({
id: "underline_button",
group: "fontStyles",
icon: "underline",
perform: e => e.applySurround('[u]', '[/u]', 'underline_text')
});
});
// EXTRAS
api.addToolbarPopupMenuOptionsCallback(() => {
return {
action: "strikethrough",
icon: "strikethrough",
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",
icon: "align-center",
label: "align_center_button"
};
});
api.addToolbarPopupMenuOptionsCallback(() => {
return {
action: "alignright",
icon: "align-right",
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");
}
}
});
// TEXTS
let translations = I18n.translations[I18n.currentLocale()].js;
if (!translations) {
translations = {};
}
if (!translations.composer) {
translations.composer = {};
}
translations.composer.underline_button_title = settings.underline_button;
translations.composer.underline_text =
settings.underline_text;
translations.align_center_button = settings.align_center_button;
translations.composer.align_center_text =
settings.align_center_text;
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>

View File

@ -4,4 +4,14 @@
.d-editor-spacer {
margin: 0 2px;
}
}
[data-wrap="columns"] {
}
[data-wrap="floatl"] {
}
[data-wrap="floatr"] {
}

View File

@ -34,14 +34,46 @@ strikethrough_button:
default: "Strike-through"
description:
en: Enter the text for the title of the button in the composer.
strikethrough_prompt:
strikethrough_text:
default: "Text"
description:
en: Enter the placeholder text that appears in the composer after the user clicks the button.
float_left_button:
default: "Float left"
description:
en: Enter the text for the title of the button in the composer.
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:
en: Enter the text for the title of the button in the composer.
columns_text:
default: "Use the closing tag to mark where the first column ends. The second column will autobreak."
description:
en: Enter the placeholder text that appears in the composer after the user clicks the button.
Svg_icons:
type: 'list'
list_type: 'compact'
default: 'fa-align-center|fa-align-right|fa-align-justify|fa-strikethrough|fa-underline'
default: 'fa-align-center|fa-align-right|fa-align-justify|fa-strikethrough|fa-underline|fa-indent|fa-columns|fa-superscript|fa-subscript'
description:
en: "Include FontAwesome 5 icon classes for each icon used in the list."
en: "Include FontAwesome 5 icon classes for each icon used in the list."