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,17 +1,22 @@
-# MD Composer Extras
+# MD Composer ~~Extras~~ Color Plus Ultra
 
-This Discourse theme component adds formatting options to your Discourse composer. This *simple* branch uses less formatting options
+This Discourse theme component adds formatting options to your Discourse composer.
 
 * underline
 * strikethrough
+* 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.
 
+There is currently no implemented option for disabling particular buttons, but this can be done through CSS.
 
 ## Columns and Floats
 
@@ -42,7 +47,6 @@ Test
 Test
 ```
 
-
 ## Questions
 
 For more informations, see: 
@@ -50,7 +54,6 @@ 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/
 
-
 ## Credits
 
 Wrap support by thw26: https://github.com/thw26
@@ -61,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

common/common.scss

@@ -10,25 +10,3 @@
   text-align: justify;
 }
 
-[data-wrap="columns"] {
-  width: 50%;
-  float: left;
-  border-right: 1px solid $primary;
-  padding-right: 5px;
-  margin-right: 5px;
-}
-
-[data-wrap="floatl"] {
-  float: left;
-  margin-right: 10px;
-}
-
-[data-wrap="floatr"] {
-  float: right;
-  margin-left: 10px;
-}
-
-[data-wrap="columns"] > p, [data-wrap="floatl"] > p, [data-wrap="floatr"] > p {
-    margin-top: 0;
-    margin-bottom: 0;
-}

desktop/desktop.scss

@@ -0,0 +1,26 @@
+[data-wrap="columns"] {
+  width: 50%;
+  float: left;
+  border-right: 1px solid $primary;
+  padding-right: 5px;
+  margin-right: 5px;
+}
+
+[data-wrap="columns"] > p, [data-wrap="floatl"] > p, [data-wrap="floatr"] > p, [data-wrap="floatc"] > p {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+[data-wrap="floatl"] {
+  float: left;
+  margin-right: 10px;
+}
+
+[data-wrap="floatr"] {
+  float: right;
+  margin-left: 10px;
+}
+
+[data-wrap="floatc"] {
+  clear: both;
+}

desktop/head_tag.html

@@ -19,18 +19,26 @@ api.onToolbarCreate(toolbar => {
 });
 api.onToolbarCreate(toolbar => {
     toolbar.addButton({
-        id: "align_center_button",
+        id: "superscript_button",
-        group: "extras",
+        group: "fontStyles",
-        icon: "align-center",
+        icon: "superscript",
-        perform: e => e.applySurround('[wrap="center"]\n', '\n[/wrap]', 'align_center_text')
+		perform: e => e.applySurround('<sup>', '</sup>', 'superscript_text')
     });
 });
 api.onToolbarCreate(toolbar => {
     toolbar.addButton({
-        id: "align_right_button",
+        id: "subscript_button",
+        group: "fontStyles",
+        icon: "subscript",
+		perform: e => e.applySurround('<sub>', '</sub>', 'subscript_text')
+    });
+});
+api.onToolbarCreate(toolbar => {
+    toolbar.addButton({
+        id: "align_center_button",
         group: "extras",
-        icon: "align-right",
+        icon: "align-center",
-        perform: e => e.applySurround('[wrap="right"]\n', '\n[/wrap]', 'align_right_text')
+        perform: e => e.applySurround('[wrap="center"]\n', '\n[/wrap]', 'align_center_text')
     });
 });
 api.onToolbarCreate(toolbar => {
@@ -45,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");
-	}
   }
 });
 
@@ -86,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;
@@ -98,12 +148,36 @@ translations.composer.strikethrough_button_title = settings.strikethrough_button
 translations.composer.strikethrough_text =
   settings.strikethrough_text;
   
-translations.columns_button = settings.columns_button;
+translations.composer.superscript_button_title = settings.superscript_button;
-translations.composer.columns_text =
+translations.composer.superscript_text =
-  settings.columns_text;
+  settings.superscript_text;
 
-translations.float_left_button = settings.float_left_button;
+translations.composer.subscript_button_title = settings.subscript_button;
-translations.composer.float_left_text =
+translations.composer.subscript_text =
-  settings.float_left_text;
+  settings.subscript_text;
+
+translations.bleu_color_button = settings.bleu_color_button;
+translations.composer.bleu_color_text =
+  settings.bleu_color_text;
+
+translations.rose_color_button = settings.rose_color_button;
+translations.composer.rose_color_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

@@ -18,6 +18,20 @@ api.addToolbarPopupMenuOptionsCallback(() => {
       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",
@@ -32,17 +46,54 @@ api.addToolbarPopupMenuOptionsCallback(() => {
       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.addToolbarPopupMenuOptionsCallback(() => {
+  return {
+      action: "bbcodecolor",
+      icon: "palette",
+      label: "bbcode_color_button"
+  };
+});
 
 api.modifyClass("controller:composer", {
   actions: {
     strikethrough() {
       this.get("toolbarEvent").applySurround("<s>", "</s>", "strikethrough_text");
     },
-	aligncenter() {
+    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");
+    },
+    bbcodecolor() {
+      this.get("toolbarEvent").applySurround('[color=#222]', '[/color]', "bbcode_color_text");
     }
   }
 });
@@ -68,8 +119,32 @@ 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;
+  
+translations.bbcode_color_button = settings.bbcode_color_button;
+translations.composer.bbcode_color_text =
+  settings.bbcode_color_text;
+ 
 </script>

mobile/mobile.scss

@@ -1,8 +1,18 @@
-#reply-control .d-editor-button-bar {
+#reply-control .d-editor-button-bar .bullet, #reply-control .d-editor-button-bar .list, #reply-control .d-editor-button-bar .align_justify_button{
-	.bullet, .list {
+    display: none;
-		display: none;
+}
-	}
+
-	.d-editor-spacer {
+.d-editor-spacer {
-		margin: 0 2px;
+    margin: 0 2px;
-	}
+}
+
+[data-wrap="columns"] {
+}
+
+[data-wrap="floatl"] {
+}
+
+[data-wrap="floatr"] {
+}
+[data-wrap="floatc"] {
 }

settings.yml

@@ -1,63 +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:
+    fr: Saisissez le texte de remplacement qui apparaît dans le compositeur après que l'utilisateur a cliqué sur le bouton.
-  default: "Float left"
+superscript_button:
+  default: "Exposant"
   description:
     en: Enter the text for the title of the button in the composer.
-float_left_text:
+    fr: Saisissez le texte du titre du bouton dans le compositeur.
-  default: "Text"
+superscript_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"
+subscript_button:
+  default: "Indice"
   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."
+subscript_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.
+bleu_color_button:
+  default: "Colorer en bleu"
+  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.
+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'
+  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."