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 left
-* ~~float right~~
+* float right
-* ~~columns~~.
+* 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.
 
@@ -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

desktop/head_tag.html

@@ -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(() => {
+api.addComposerToolbarPopupMenuOption({
-  return {
+  action: (toolbarEvent) => {
-      action: "bleucolor",
+    toolbarEvent.applySurround('[wrap="floatl"]\n', '\n[/wrap]', "float_left_text");
-      icon: "palette",
+  },
-      label: "bleu_color_button"
+  icon: 'indent',
-  };
+  label: 'float_left_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.modifyClass("controller:composer", {
+api.addComposerToolbarPopupMenuOption({
-  actions: {
+  action: (toolbarEvent) => {
-    bleucolor() {
+    toolbarEvent.applySurround('[wrap="columns"]\n', '\n[/wrap]', "columns_text");
-      this.get("toolbarEvent").applySurround('[color=#068EEF]', '[/color]', "bleu_color_text");
   },
-    rosecolor() {
+  icon: 'columns',
-      this.get("toolbarEvent").applySurround('[color=#EF06A0]', '[/color]', "rose_color_text");
+  label: 'columns_button',
-    },
-    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
@@ -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.columns_button = settings.columns_button;
-translations.composer.bleu_color_text =
+translations.composer.columns_text =
-  settings.bleu_color_text;
+  settings.columns_text;
 
-translations.composer.rose_color_button_title = settings.rose_color_button;
+translations.float_left_button = settings.float_left_button;
-translations.composer.rose_color_text =
+translations.composer.float_left_text =
-  settings.rose_color_text;
+  settings.float_left_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>

mobile/head_tag.html

@@ -61,21 +61,13 @@ 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");
+      this.get("toolbarEvent").applySurround("<sup>", "</sup>", "superscript_text");
     },
     subscript() {
       this.get("toolbarEvent").applySurround("<sub>", "</sub>", "subscript_text");
@@ -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>

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:
+columns_button:
-  default: "Colorer en bleu"
+  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:
+columns_text:
-  default: "Texte"
+  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."