Compare commits
No commits in common. "2ec1ebccc6257a7528b77bdecc483993a46a4964" and "3f167f5242e7af724849d5d94669f5ea7a2dccdf" have entirely different histories.
2ec1ebccc6
...
3f167f5242
13
README.md
13
README.md
@ -1,4 +1,4 @@
|
||||
# MD Composer ~~Extras~~ Color Plus Ultra
|
||||
# MD Composer Extras
|
||||
|
||||
This Discourse theme component adds formatting options to your Discourse composer.
|
||||
|
||||
@ -7,12 +7,11 @@ This Discourse theme component adds formatting options to your Discourse compose
|
||||
* superscript
|
||||
* subscript
|
||||
* center
|
||||
* ~~align right~~
|
||||
* align right
|
||||
* justify
|
||||
* ~~float left~~
|
||||
* ~~float right~~
|
||||
* ~~columns~~.
|
||||
* Colorer le texte en bleu, rose, jaune, orange, rouge et vert.
|
||||
* 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.
|
||||
|
||||
@ -64,5 +63,3 @@ I took some parts of the Iconified Header Links and Slick Image Gallery theme co
|
||||
|
||||
https://meta.discourse.org/t/iconified-header-links/86307 (adding fa5 icons in the theme component)
|
||||
https://meta.discourse.org/t/slick-image-gallery/81952 (manager the translations inside the theme component)
|
||||
|
||||
Modification de la branche `color` pour l'ajout de couleurs prédéfinies par l'association Camélia Studio : https://camelia-studio.org
|
||||
@ -41,6 +41,14 @@ api.onToolbarCreate(toolbar => {
|
||||
perform: e => e.applySurround('[wrap="center"]\n', '\n[/wrap]', 'align_center_text')
|
||||
});
|
||||
});
|
||||
api.onToolbarCreate(toolbar => {
|
||||
toolbar.addButton({
|
||||
id: "align_right_button",
|
||||
group: "extras",
|
||||
icon: "align-right",
|
||||
perform: e => e.applySurround('[wrap="right"]\n', '\n[/wrap]', 'align_right_text')
|
||||
});
|
||||
});
|
||||
api.onToolbarCreate(toolbar => {
|
||||
toolbar.addButton({
|
||||
id: "align_justify_button",
|
||||
@ -51,70 +59,20 @@ api.onToolbarCreate(toolbar => {
|
||||
});
|
||||
|
||||
// EXTRAS
|
||||
api.addToolbarPopupMenuOptionsCallback(() => {
|
||||
return {
|
||||
action: "bleucolor",
|
||||
icon: "palette",
|
||||
label: "bleu_color_button"
|
||||
};
|
||||
});
|
||||
api.addToolbarPopupMenuOptionsCallback(() => {
|
||||
return {
|
||||
action: "rosecolor",
|
||||
icon: "palette",
|
||||
label: "rose_color_button"
|
||||
};
|
||||
});
|
||||
api.addToolbarPopupMenuOptionsCallback(() => {
|
||||
return {
|
||||
action: "jaunecolor",
|
||||
icon: "palette",
|
||||
label: "jaune_color_button"
|
||||
};
|
||||
});
|
||||
api.addToolbarPopupMenuOptionsCallback(() => {
|
||||
return {
|
||||
action: "orangecolor",
|
||||
icon: "palette",
|
||||
label: "orange_color_button"
|
||||
};
|
||||
});
|
||||
api.addToolbarPopupMenuOptionsCallback(() => {
|
||||
return {
|
||||
action: "rougecolor",
|
||||
icon: "palette",
|
||||
label: "rouge_color_button"
|
||||
};
|
||||
});
|
||||
api.addToolbarPopupMenuOptionsCallback(() => {
|
||||
return {
|
||||
action: "vertcolor",
|
||||
icon: "palette",
|
||||
label: "vert_color_button"
|
||||
};
|
||||
api.addComposerToolbarPopupMenuOption({
|
||||
action: (toolbarEvent) => {
|
||||
toolbarEvent.applySurround('[wrap="floatl"]\n', '\n[/wrap]', "float_left_text");
|
||||
},
|
||||
icon: 'indent',
|
||||
label: 'float_left_button',
|
||||
});
|
||||
|
||||
api.modifyClass("controller:composer", {
|
||||
actions: {
|
||||
bleucolor() {
|
||||
this.get("toolbarEvent").applySurround('[color=#068EEF]', '[/color]', "bleu_color_text");
|
||||
},
|
||||
rosecolor() {
|
||||
this.get("toolbarEvent").applySurround('[color=#EF06A0]', '[/color]', "rose_color_text");
|
||||
},
|
||||
jaunecolor() {
|
||||
this.get("toolbarEvent").applySurround('[color=#EFC906]', '[/color]', "jaune_color_text");
|
||||
},
|
||||
orangecolor() {
|
||||
this.get("toolbarEvent").applySurround('[color=#EF8806]', '[/color]', "orange_color_text");
|
||||
},
|
||||
rougecolor() {
|
||||
this.get("toolbarEvent").applySurround('[color=#EF0606]', '[/color]', "rouge_color_text");
|
||||
},
|
||||
vertcolor() {
|
||||
this.get("toolbarEvent").applySurround('[color=#2A821C]', '[/color]', "vert_color_text");
|
||||
},
|
||||
}
|
||||
api.addComposerToolbarPopupMenuOption({
|
||||
action: (toolbarEvent) => {
|
||||
toolbarEvent.applySurround('[wrap="columns"]\n', '\n[/wrap]', "columns_text");
|
||||
},
|
||||
icon: 'columns',
|
||||
label: 'columns_button',
|
||||
});
|
||||
|
||||
// TEXTS
|
||||
@ -134,6 +92,10 @@ translations.composer.align_center_button_title = settings.align_center_button;
|
||||
translations.composer.align_center_text =
|
||||
settings.align_center_text;
|
||||
|
||||
translations.composer.align_right_button_title = settings.align_right_button;
|
||||
translations.composer.align_right_text =
|
||||
settings.align_right_text;
|
||||
|
||||
translations.composer.align_justify_button_title = settings.align_justify_button;
|
||||
translations.composer.align_justify_text =
|
||||
settings.align_justify_text;
|
||||
@ -150,28 +112,12 @@ translations.composer.subscript_button_title = settings.subscript_button;
|
||||
translations.composer.subscript_text =
|
||||
settings.subscript_text;
|
||||
|
||||
translations.composer.bleu_color_button_title = settings.bleu_color_button;
|
||||
translations.composer.bleu_color_text =
|
||||
settings.bleu_color_text;
|
||||
translations.columns_button = settings.columns_button;
|
||||
translations.composer.columns_text =
|
||||
settings.columns_text;
|
||||
|
||||
translations.composer.rose_color_button_title = settings.rose_color_button;
|
||||
translations.composer.rose_color_text =
|
||||
settings.rose_color_text;
|
||||
|
||||
translations.composer.jaune_color_button_title = settings.jaune_color_button;
|
||||
translations.composer.jaune_color_text =
|
||||
settings.jaune_color_text;
|
||||
|
||||
translations.composer.orange_color_button_title = settings.orange_color_button;
|
||||
translations.composer.orange_color_text =
|
||||
settings.orange_color_text;
|
||||
|
||||
translations.composer.rouge_color_button_title = settings.rouge_color_button;
|
||||
translations.composer.rouge_color_text =
|
||||
settings.rouge_color_text;
|
||||
|
||||
translations.composer.vert_color_button_title = settings.vert_color_button;
|
||||
translations.composer.vert_color_text =
|
||||
settings.vert_color_text;
|
||||
translations.float_left_button = settings.float_left_button;
|
||||
translations.composer.float_left_text =
|
||||
settings.float_left_text;
|
||||
|
||||
</script>
|
||||
|
||||
@ -61,26 +61,18 @@ api.addToolbarPopupMenuOptionsCallback(() => {
|
||||
};
|
||||
});
|
||||
|
||||
api.addToolbarPopupMenuOptionsCallback(() => {
|
||||
return {
|
||||
action: "bbcodecolor",
|
||||
icon: "palette",
|
||||
label: "bbcode_color_button"
|
||||
};
|
||||
});
|
||||
|
||||
api.modifyClass("controller:composer", {
|
||||
actions: {
|
||||
strikethrough() {
|
||||
this.get("toolbarEvent").applySurround("<s>", "</s>", "strikethrough_text");
|
||||
},
|
||||
superscript() {
|
||||
this.get("toolbarEvent").applySurround("<sup>", "</sub>", "superscript_text");
|
||||
superscript() {
|
||||
this.get("toolbarEvent").applySurround("<sup>", "</sup>", "superscript_text");
|
||||
},
|
||||
subscript() {
|
||||
this.get("toolbarEvent").applySurround("<sub>", "</sub>", "subscript_text");
|
||||
},
|
||||
aligncenter() {
|
||||
aligncenter() {
|
||||
this.get("toolbarEvent").applySurround('[wrap="center"]\n', '\n[/wrap]', "align_center_text");
|
||||
},
|
||||
alignright() {
|
||||
@ -91,9 +83,6 @@ api.modifyClass("controller:composer", {
|
||||
},
|
||||
floatleft() {
|
||||
this.get("toolbarEvent").applySurround('[wrap="floatl"]\n', '\n[/wrap]', "float_left_text");
|
||||
},
|
||||
bbcodecolor() {
|
||||
this.get("toolbarEvent").applySurround('[color=#222]', '[/color]', "bbcode_color_text");
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -143,8 +132,4 @@ translations.float_left_button = settings.float_left_button;
|
||||
translations.composer.float_left_text =
|
||||
settings.float_left_text;
|
||||
|
||||
translations.bbcode_color_button = settings.bbcode_color_button;
|
||||
translations.composer.bbcode_color_text =
|
||||
settings.bbcode_color_text;
|
||||
|
||||
</script>
|
||||
|
||||
115
settings.yml
115
settings.yml
@ -1,128 +1,79 @@
|
||||
underline_button:
|
||||
default: "Souligner"
|
||||
default: "Underline"
|
||||
description:
|
||||
fr: Saisissez le texte du titre du bouton dans le compositeur.
|
||||
en: Enter the text for the title of the button in the composer.
|
||||
underline_text:
|
||||
default: "Texte"
|
||||
default: "Text"
|
||||
description:
|
||||
fr: Saisissez le texte de remplacement qui apparaît dans le compositeur après que l'utilisateur ait cliqué sur le bouton.
|
||||
en: Enter the placeholder text that appears in the composer after the user clicks the button.
|
||||
align_center_button:
|
||||
default: "Centrer"
|
||||
default: "Center"
|
||||
description:
|
||||
fr: Saisissez le texte du titre du bouton dans le compositeur.
|
||||
en: Enter the text for the title of the button in the composer.
|
||||
align_center_text:
|
||||
default: "Texte"
|
||||
default: "Text"
|
||||
description:
|
||||
en: Enter the placeholder text that appears in the composer after the user clicks the button.
|
||||
align_right_button:
|
||||
default: "Align right"
|
||||
description:
|
||||
en: Enter the text for the title of the button in the composer.
|
||||
align_right_text:
|
||||
default: "Text"
|
||||
description:
|
||||
fr: Saisissez le texte de remplacement qui apparaît dans le compositeur après que l'utilisateur ait cliqué sur le bouton.
|
||||
en: Enter the placeholder text that appears in the composer after the user clicks the button.
|
||||
align_justify_button:
|
||||
default: "Justifier"
|
||||
default: "Justify"
|
||||
description:
|
||||
fr: Saisissez le texte du titre du bouton dans le compositeur.
|
||||
en: Enter the text for the title of the button in the composer.
|
||||
align_justify_text:
|
||||
default: "Texte"
|
||||
default: "Text"
|
||||
description:
|
||||
fr: Saisissez le texte de remplacement qui apparaît dans le compositeur après que l'utilisateur ait cliqué sur le bouton.
|
||||
en: Enter the placeholder text that appears in the composer after the user clicks the button.
|
||||
strikethrough_button:
|
||||
default: "Barrer"
|
||||
default: "Strike-through"
|
||||
description:
|
||||
fr: Saisissez le texte du titre du bouton dans le compositeur.
|
||||
en: Enter the text for the title of the button in the composer.
|
||||
strikethrough_text:
|
||||
default: "Texte"
|
||||
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:
|
||||
fr: Saisissez le texte de remplacement qui apparaît dans le compositeur après que l'utilisateur ait cliqué sur le bouton.
|
||||
en: Enter the placeholder text that appears in the composer after the user clicks the button.
|
||||
superscript_button:
|
||||
default: "Exposant"
|
||||
default: "Superscript"
|
||||
description:
|
||||
fr: Saisissez le texte du titre du bouton dans le compositeur.
|
||||
en: Enter the text for the title of the button in the composer.
|
||||
superscript_text:
|
||||
default: "Texte"
|
||||
default: "Text"
|
||||
description:
|
||||
fr: Saisissez le texte de remplacement qui apparaît dans le compositeur après que l'utilisateur ait cliqué sur le bouton.
|
||||
en: Enter the placeholder text that appears in the composer after the user clicks the button.
|
||||
subscript_button:
|
||||
default: "Indice"
|
||||
default: "Subscript"
|
||||
description:
|
||||
fr: Saisissez le texte du titre du bouton dans le compositeur.
|
||||
en: Enter the text for the title of the button in the composer.
|
||||
subscript_text:
|
||||
default: "Texte"
|
||||
default: "Text"
|
||||
description:
|
||||
fr: Saisissez le texte de remplacement qui apparaît dans le compositeur après que l'utilisateur ait cliqué sur le bouton.
|
||||
en: Enter the placeholder text that appears in the composer after the user clicks the button.
|
||||
bleu_color_button:
|
||||
default: "Colorer en bleu"
|
||||
columns_button:
|
||||
default: "Columns"
|
||||
description:
|
||||
fr: Saisissez le texte du titre du bouton dans le compositeur.
|
||||
en: Enter the text for the title of the button in the composer.
|
||||
bleu_color_text:
|
||||
default: "Texte"
|
||||
columns_text:
|
||||
default: "Use the closing tag to mark where the first column ends. The second column will autobreak."
|
||||
description:
|
||||
fr: Saisissez le texte de remplacement qui apparaît dans le compositeur après que l'utilisateur ait cliqué sur le bouton.
|
||||
en: Enter the placeholder text that appears in the composer after the user clicks the button.
|
||||
rose_color_button:
|
||||
default: "Colorer en rose"
|
||||
description:
|
||||
fr: Saisissez le texte du titre du bouton dans le compositeur.
|
||||
en: Enter the text for the title of the button in the composer.
|
||||
rose_color_text:
|
||||
default: "Texte"
|
||||
description:
|
||||
fr: Saisissez le texte de remplacement qui apparaît dans le compositeur après que l'utilisateur ait cliqué sur le bouton.
|
||||
en: Enter the placeholder text that appears in the composer after the user clicks the button.
|
||||
jaune_color_button:
|
||||
default: "Colorer en jaune"
|
||||
description:
|
||||
fr: Saisissez le texte du titre du bouton dans le compositeur.
|
||||
en: Enter the text for the title of the button in the composer.
|
||||
jaune_color_text:
|
||||
default: "Texte"
|
||||
description:
|
||||
fr: Saisissez le texte de remplacement qui apparaît dans le compositeur après que l'utilisateur ait cliqué sur le bouton.
|
||||
en: Enter the placeholder text that appears in the composer after the user clicks the button.
|
||||
orange_color_button:
|
||||
default: "Colorer en orange"
|
||||
description:
|
||||
fr: Saisissez le texte du titre du bouton dans le compositeur.
|
||||
en: Enter the text for the title of the button in the composer.
|
||||
orange_color_text:
|
||||
default: "Texte"
|
||||
description:
|
||||
fr: Saisissez le texte de remplacement qui apparaît dans le compositeur après que l'utilisateur ait cliqué sur le bouton.
|
||||
en: Enter the placeholder text that appears in the composer after the user clicks the button.
|
||||
rouge_color_button:
|
||||
default: "Colorer en rouge"
|
||||
description:
|
||||
fr: Saisissez le texte du titre du bouton dans le compositeur.
|
||||
en: Enter the text for the title of the button in the composer.
|
||||
rouge_color_text:
|
||||
default: "Texte"
|
||||
description:
|
||||
fr: Saisissez le texte de remplacement qui apparaît dans le compositeur après que l'utilisateur ait cliqué sur le bouton.
|
||||
en: Enter the placeholder text that appears in the composer after the user clicks the button.
|
||||
vert_color_button:
|
||||
default: "Colorer en vert"
|
||||
description:
|
||||
fr: Saisissez le texte du titre du bouton dans le compositeur.
|
||||
en: Enter the text for the title of the button in the composer.
|
||||
vert_color_text:
|
||||
default: "Texte"
|
||||
description:
|
||||
fr: Saisissez le texte de remplacement qui apparaît dans le compositeur après que l'utilisateur ait cliqué sur le bouton.
|
||||
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-justify|fa-strikethrough|fa-underline|fa-indent|fa-superscript|fa-subscript|fa-palette'
|
||||
default: 'fa-align-center|fa-align-right|fa-align-justify|fa-strikethrough|fa-underline|fa-indent|fa-columns|fa-superscript|fa-subscript'
|
||||
description:
|
||||
fr: "Inclure les classes d'icônes FontAwesome 5 pour chaque icône utilisée dans la liste."
|
||||
en: "Include FontAwesome 5 icon classes for each icon used in the list."
|
||||
|
||||
Loading…
Reference in New Issue
Block a user