camelia-studio/md-composer-color-plus-ultra
camelia-studio
/
md-composer-color-plus-ultra
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'color' 

# Conflicts:
#	desktop/head_tag.html
#	mobile/head_tag.html
This commit is contained in:
Esenjin 2024-02-03 11:27:02 +01:00
parent 3f167f5242 f5f36199e6
commit 2ec1ebccc6
4 changed files with 192 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
README.md
View File

@ -1,4 +1,4 @@
# MD Composer Extras
# MD Composer ~~Extras~~ Color Plus Ultra
This Discourse theme component adds formatting options to your Discourse composer.
@ -7,11 +7,12 @@ This Discourse theme component adds formatting options to your Discourse compose
* superscript
* subscript
* center
* align right
* ~~align right~~
* justify
* float left
* float right
* columns.
* ~~float left~~
* ~~float right~~
* ~~columns~~.
* Colorer le texte en bleu, rose, jaune, orange, rouge et vert.
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.
@ -63,3 +64,5 @@ 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

114
desktop/head_tag.html
View File

@ -41,14 +41,6 @@ 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",
@ -59,20 +51,70 @@ api.onToolbarCreate(toolbar => {
});
// EXTRAS
api.addComposerToolbarPopupMenuOption({
action: (toolbarEvent) => {
toolbarEvent.applySurround('[wrap="floatl"]\n', '\n[/wrap]', "float_left_text");
},
icon: 'indent',
label: 'float_left_button',
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="columns"]\n', '\n[/wrap]', "columns_text");
},
icon: 'columns',
label: 'columns_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");
},
}
});
// TEXTS
@ -92,10 +134,6 @@ 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;
@ -112,12 +150,28 @@ 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.composer.bleu_color_button_title = settings.bleu_color_button;
translations.composer.bleu_color_text =
settings.bleu_color_text;
translations.float_left_button = settings.float_left_button;
translations.composer.float_left_text =
settings.float_left_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;
</script>

21
mobile/head_tag.html
View File

@ -61,18 +61,26 @@ 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>", "</sup>", "superscript_text");
superscript() {
this.get("toolbarEvent").applySurround("<sup>", "</sub>", "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() {
@ -83,6 +91,9 @@ 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");
}
}
});
@ -131,5 +142,9 @@ translations.composer.columns_text =
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
View File

@ -1,79 +1,128 @@
underline_button:
default: "Underline"
default: "Souligner"
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: "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.
align_center_button:
default: "Center"
default: "Centrer"
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: "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"
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.
align_justify_button:
default: "Justify"
default: "Justifier"
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: "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.
strikethrough_button:
default: "Strike-through"
default: "Barrer"
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: "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"
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.
superscript_button:
default: "Superscript"
default: "Exposant"
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: "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.
subscript_button:
default: "Subscript"
default: "Indice"
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: "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.
columns_button:
default: "Columns"
bleu_color_button:
default: "Colorer en bleu"
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.
columns_text:
default: "Use the closing tag to mark where the first column ends. The second column will autobreak."
bleu_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.
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-right|fa-align-justify|fa-strikethrough|fa-underline|fa-indent|fa-columns|fa-superscript|fa-subscript'
default: 'fa-align-center|fa-align-justify|fa-strikethrough|fa-underline|fa-indent|fa-superscript|fa-subscript|fa-palette'
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."