Merge pull request 'Merci Xefir ?!!' (#15) from color into master

Reviewed-on: #15

.discourse-compatibility

@@ -0,0 +1 @@
+< 3.2.0.beta2: 1cc5d51137652c3977640f064739a08b1d1fe1be

README.md

@@ -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 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.
 
@@ -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

desktop/desktop.scss

@@ -6,7 +6,7 @@
   margin-right: 5px;
 }
 
-[data-wrap="columns"] > p, [data-wrap="floatl"] > p, [data-wrap="floatr"] > p {
+[data-wrap="columns"] > p, [data-wrap="floatl"] > p, [data-wrap="floatr"] > p, [data-wrap="floatc"] > p {
     margin-top: 0;
     margin-bottom: 0;
 }
@@ -20,3 +20,7 @@
   float: right;
   margin-left: 10px;
 }
+
+[data-wrap="floatc"] {
+  clear: both;
+}

desktop/head_tag.html

@@ -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",
@@ -61,27 +53,73 @@ api.onToolbarCreate(toolbar => {
 // EXTRAS
 api.addToolbarPopupMenuOptionsCallback(() => {
   return {
-      action: "floatleft",
+      id: "bleu_color",
-      icon: "indent",
+      action: "bleucolor",
-      label: "float_left_button"
+      icon: "palette",
+      label: "bleu_color_button"
   };
 });
 api.addToolbarPopupMenuOptionsCallback(() => {
   return {
-      action: "columns",
+      id: "rose_color",
-      icon: "columns",
+      action: "rosecolor",
-      label: "columns_button"
+      icon: "palette",
+      label: "rose_color_button"
+  };
+});
+api.addToolbarPopupMenuOptionsCallback(() => {
+  return {
+      id: "jaune_color",
+      action: "jaunecolor",
+      icon: "palette",
+      label: "jaune_color_button"
+  };
+});
+api.addToolbarPopupMenuOptionsCallback(() => {
+  return {
+      id: "orange_color",
+      action: "orangecolor",
+      icon: "palette",
+      label: "orange_color_button"
+  };
+});
+api.addToolbarPopupMenuOptionsCallback(() => {
+  return {
+      id: "rouge_color",
+      action: "rougecolor",
+      icon: "palette",
+      label: "rouge_color_button"
+  };
+});
+api.addToolbarPopupMenuOptionsCallback(() => {
+  return {
+      id: "vert_color",
+      action: "vertcolor",
+      icon: "palette",
+      label: "vert_color_button"
   };
 });
 
 api.modifyClass("controller:composer", {
   actions: {
-    floatleft() {
+    bleucolor() {
-      this.get("toolbarEvent").applySurround('[wrap="floatl"]\n', '\n[/wrap]', "float_left_text");
+      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");
     },
-	columns() {
-	  this.get("toolbarEvent").applySurround('[wrap="columns"]\n', '\n[/wrap]', "columns_text");
-	}
   }
 });
 
@@ -102,10 +140,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;
@@ -122,12 +156,28 @@ translations.composer.subscript_button_title = settings.subscript_button;
 translations.composer.subscript_text =
   settings.subscript_text;
 
-translations.columns_button = settings.columns_button;
+translations.bleu_color_button = settings.bleu_color_button;
-translations.composer.columns_text =
+translations.composer.bleu_color_text =
-  settings.columns_text;
+  settings.bleu_color_text;
 
-translations.float_left_button = settings.float_left_button;
+translations.rose_color_button = settings.rose_color_button;
-translations.composer.float_left_text =
+translations.composer.rose_color_text =
-  settings.float_left_text;
+  settings.rose_color_text;
+
+translations.jaune_color_button = settings.jaune_color_button;
+translations.composer.jaune_color_text =
+  settings.jaune_color_text;
+
+translations.orange_color_button = settings.orange_color_button;
+translations.composer.orange_color_text =
+  settings.orange_color_text;
+
+translations.rouge_color_button = settings.rouge_color_button;
+translations.composer.rouge_color_text =
+  settings.rouge_color_text;
+
+translations.vert_color_button = settings.vert_color_button;
+translations.composer.vert_color_text =
+  settings.vert_color_text;
 
 </script>

mobile/head_tag.html

@@ -61,6 +61,14 @@ api.addToolbarPopupMenuOptionsCallback(() => {
   };
 });
 
+api.addToolbarPopupMenuOptionsCallback(() => {
+  return {
+      action: "bbcodecolor",
+      icon: "palette",
+      label: "bbcode_color_button"
+  };
+});
+
 api.modifyClass("controller:composer", {
   actions: {
     strikethrough() {
@@ -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");
     }
   }
 });
@@ -132,4 +143,8 @@ 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>

mobile/mobile.scss

@@ -14,4 +14,5 @@
 
 [data-wrap="floatr"] {
 }
-
+[data-wrap="floatc"] {
+}

settings.yml

@@ -1,79 +1,126 @@
 underline_button:
-  default: "Underline"
+  default: "Souligner"
   description:
     en: Enter the text for the title of the button in the composer.
+    fr: Saisissez le texte du titre du bouton dans le compositeur.
 underline_text:
-  default: "Text"
+  default: "Texte"
   description:
     en: Enter the placeholder text that appears in the composer after the user clicks the button.
+    fr: Saisissez le texte de remplacement qui apparaît dans le compositeur après que l'utilisateur a cliqué sur le bouton.
 align_center_button:
-  default: "Center"
+  default: "Centrer"
   description:
     en: Enter the text for the title of the button in the composer.
+    fr: Saisissez le texte du titre du bouton dans le compositeur.
 align_center_text:
-  default: "Text"
+  default: "Texte"
-  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:
     en: Enter the placeholder text that appears in the composer after the user clicks the button.
+    fr: Saisissez le texte de remplacement qui apparaît dans le compositeur après que l'utilisateur a cliqué sur le bouton.
 align_justify_button:
-  default: "Justify"
+  default: "Justifier"
   description:
     en: Enter the text for the title of the button in the composer.
+    fr: Saisissez le texte du titre du bouton dans le compositeur.
 align_justify_text:
-  default: "Text"
+  default: "Texte"
   description:
     en: Enter the placeholder text that appears in the composer after the user clicks the button.
+    fr: Saisissez le texte de remplacement qui apparaît dans le compositeur après que l'utilisateur a cliqué sur le bouton.
 strikethrough_button:
-  default: "Strike-through"
+  default: "Barrer"
   description:
     en: Enter the text for the title of the button in the composer.
+    fr: Saisissez le texte du titre du bouton dans le compositeur.
 strikethrough_text:
-  default: "Text"
+  default: "Texte"
-  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.
+    fr: Saisissez le texte de remplacement qui apparaît dans le compositeur après que l'utilisateur a cliqué sur le bouton.
 superscript_button:
-  default: "Superscript"
+  default: "Exposant"
   description:
     en: Enter the text for the title of the button in the composer.
+    fr: Saisissez le texte du titre du bouton dans le compositeur.
 superscript_text:
-  default: "Text"
+  default: "Texte"
   description:
     en: Enter the placeholder text that appears in the composer after the user clicks the button.
+    fr: Saisissez le texte de remplacement qui apparaît dans le compositeur après que l'utilisateur a cliqué sur le bouton.
 subscript_button:
-  default: "Subscript"
+  default: "Indice"
   description:
     en: Enter the text for the title of the button in the composer.
+    fr: Saisissez le texte du titre du bouton dans le compositeur.
 subscript_text:
-  default: "Text"
+  default: "Texte"
   description:
     en: Enter the placeholder text that appears in the composer after the user clicks the button.
-columns_button:
+    fr: Saisissez le texte de remplacement qui apparaît dans le compositeur après que l'utilisateur a cliqué sur le bouton.
-  default: "Columns"
+bleu_color_button:
+  default: "Colorer en bleu"
   description:
     en: Enter the text for the title of the button in the composer.
-columns_text:
+    fr: Saisissez le texte du titre du bouton dans le compositeur.
-  default: "Use the closing tag to mark where the first column ends. The second column will autobreak."
+bleu_color_text:
+  default: "Texte"
   description:
     en: Enter the placeholder text that appears in the composer after the user clicks the button.
-
+    fr: Saisissez le texte de remplacement qui apparaît dans le compositeur après que l'utilisateur a cliqué sur le bouton.
+rose_color_button:
+  default: "Colorer en rose"
+  description:
+    en: Enter the text for the title of the button in the composer.
+    fr: Saisissez le texte du titre du bouton dans le compositeur.
+rose_color_text:
+  default: "Texte"
+  description:
+    en: Enter the placeholder text that appears in the composer after the user clicks the button.
+    fr: Saisissez le texte de remplacement qui apparaît dans le compositeur après que l'utilisateur a cliqué sur le bouton.
+jaune_color_button:
+  default: "Colorer en jaune"
+  description:
+    en: Enter the text for the title of the button in the composer.
+    fr: Saisissez le texte du titre du bouton dans le compositeur.
+jaune_color_text:
+  default: "Texte"
+  description:
+    en: Enter the placeholder text that appears in the composer after the user clicks the button.
+    fr: Saisissez le texte de remplacement qui apparaît dans le compositeur après que l'utilisateur a cliqué sur le bouton.
+orange_color_button:
+  default: "Colorer en orange"
+  description:
+    en: Enter the text for the title of the button in the composer.
+    fr: Saisissez le texte du titre du bouton dans le compositeur.
+orange_color_text:
+  default: "Texte"
+  description:
+    en: Enter the placeholder text that appears in the composer after the user clicks the button.
+    fr: Saisissez le texte de remplacement qui apparaît dans le compositeur après que l'utilisateur a cliqué sur le bouton.
+rouge_color_button:
+  default: "Colorer en rouge"
+  description:
+    en: Enter the text for the title of the button in the composer.
+    fr: Saisissez le texte du titre du bouton dans le compositeur.
+rouge_color_text:
+  default: "Texte"
+  description:
+    en: Enter the placeholder text that appears in the composer after the user clicks the button.
+    fr: Saisissez le texte de remplacement qui apparaît dans le compositeur après que l'utilisateur a cliqué sur le bouton.
+vert_color_button:
+  default: "Colorer en vert"
+  description:
+    en: Enter the text for the title of the button in the composer.
+    fr: Saisissez le texte du titre du bouton dans le compositeur.
+vert_color_text:
+  default: "Texte"
+  description:
+    en: Enter the placeholder text that appears in the composer after the user clicks the button.
+    fr: Saisissez le texte de remplacement qui apparaît dans le compositeur après que l'utilisateur a cliqué sur le bouton.
 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: 
     en: "Include FontAwesome 5 icon classes for each icon used in the list."