Merge pull request #8 from thw26/master

Responsiveness and New Buttons

README.md

@@ -1,13 +1,59 @@
-## MD Composer Extras
+# MD Composer Extras
 
-Add some formatting option in your Discourse composer : underline, center, align right, justify and strikethrough
+This Discourse theme component adds formatting options to your Discourse composer.
+
+* underline
+* strikethrough
+* superscript
+* subscript
+* center
+* align right
+* justify
+* 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.
+
+There is currently no implemented option for disabling particular buttons, but this can be done through CSS.
+
+## Columns and Floats
+
+When using columns and floats, note that the text will autobreak once an appropriate amount of content has been placed in the second column or to the side of the float.
+
+Columns have a CSS border to for ease of viewing.
+
+A column is broken by placing `[/wrap]` at the end of the first column's content.
+
+The CSS for columns and floats is disabled on mobile. By default on mobile columns and float will appear as single column content. The missing CSS can be added in again manually.
+
+**Column Example**
+
+Place the following in your editor to see how columns work.
+
+```
+Test
+
+[wrap="columns"]
+1
+2
+3
+[/wrap]
+1
+2
+3
+
+Test
+```
+
+## Questions
 
 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/
 
-<br>
+## Credits
 
 Wrap support by thw26: https://github.com/thw26
 

about.json

@@ -4,6 +4,6 @@
   "license_url": null,
   "about_url": "https://www.mon-discourse.fr/themes/md-composer-extras/",
   "authors": "Steven",
-  "theme_version": "1.2",
+  "theme_version": "1.5",
   "learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
 }

common/common.scss

@@ -9,3 +9,4 @@
 [data-wrap="justify"] {
   text-align: justify;
 }
+

desktop/desktop.scss

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

desktop/head_tag.html

@@ -1,7 +1,5 @@
 <script type="text/discourse-plugin" version="0.8">
 const { iconNode } = require("discourse-common/lib/icon-library");
-
-
 // TOOLBAR
 api.onToolbarCreate(toolbar => {
     toolbar.addButton({
@@ -11,6 +9,30 @@ api.onToolbarCreate(toolbar => {
         perform: e => e.applySurround('[u]', '[/u]', 'underline_text')
     });
 });
+api.onToolbarCreate(toolbar => {
+    toolbar.addButton({
+        id: "strikethrough_button",
+        group: "fontStyles",
+        icon: "strikethrough",
+		perform: e => e.applySurround('<s>', '</s>', 'strikethrough_text')
+    });
+});
+api.onToolbarCreate(toolbar => {
+    toolbar.addButton({
+        id: "superscript_button",
+        group: "fontStyles",
+        icon: "superscript",
+		perform: e => e.applySurround('<sup>', '</sup>', 'superscript_text')
+    });
+});
+api.onToolbarCreate(toolbar => {
+    toolbar.addButton({
+        id: "subscript_button",
+        group: "fontStyles",
+        icon: "subscript",
+		perform: e => e.applySurround('<sub>', '</sub>', 'subscript_text')
+    });
+});
 api.onToolbarCreate(toolbar => {
     toolbar.addButton({
         id: "align_center_button",
@@ -36,23 +58,32 @@ api.onToolbarCreate(toolbar => {
     });
 });
 
-
 // EXTRAS
 api.addToolbarPopupMenuOptionsCallback(() => {
   return {
-      action: "strikethrough",
+      action: "floatleft",
-      icon: "strikethrough",
+      icon: "indent",
-      label: "strikethrough_button"
+      label: "float_left_button"
   };
 });
-api.modifyClass("controller:composer", {
+api.addToolbarPopupMenuOptionsCallback(() => {
-  actions: {
+  return {
-    strikethrough() {
+      action: "columns",
-      this.get("toolbarEvent").applySurround("<s>", "</s>", "strikethrough_prompt");
+      icon: "columns",
-    },
+      label: "columns_button"
-  }
+  };
 });
 
+api.modifyClass("controller:composer", {
+  actions: {
+    floatleft() {
+      this.get("toolbarEvent").applySurround('[wrap="floatl"]\n', '\n[/wrap]', "float_left_text");
+    },
+	columns() {
+	  this.get("toolbarEvent").applySurround('[wrap="columns"]\n', '\n[/wrap]', "columns_text");
+	}
+  }
+});
 
 // TEXTS
 let translations = I18n.translations[I18n.currentLocale()].js;
@@ -62,6 +93,7 @@ if (!translations) {
 if (!translations.composer) {
   translations.composer = {};
 }
+
 translations.composer.underline_button_title = settings.underline_button;
 translations.composer.underline_text =
   settings.underline_text;
@@ -78,7 +110,24 @@ translations.composer.align_justify_button_title = settings.align_justify_button
 translations.composer.align_justify_text =
   settings.align_justify_text;
 
-translations.strikethrough_button = settings.strikethrough_button;
+translations.composer.strikethrough_button_title = settings.strikethrough_button;
-translations.composer.strikethrough_prompt =
+translations.composer.strikethrough_text =
-  settings.strikethrough_prompt;
+  settings.strikethrough_text;
+
+translations.composer.superscript_button_title = settings.superscript_button;
+translations.composer.superscript_text =
+  settings.superscript_text;
+
+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.float_left_button = settings.float_left_button;
+translations.composer.float_left_text =
+  settings.float_left_text;
+ 
 </script>

mobile/head_tag.html

@@ -0,0 +1,135 @@
+<script type="text/discourse-plugin" version="0.8">
+const { iconNode } = require("discourse-common/lib/icon-library");
+// TOOLBAR
+api.onToolbarCreate(toolbar => {
+    toolbar.addButton({
+        id: "underline_button",
+        group: "fontStyles",
+        icon: "underline",
+        perform: e => e.applySurround('[u]', '[/u]', 'underline_text')
+    });
+});
+
+// EXTRAS
+api.addToolbarPopupMenuOptionsCallback(() => {
+  return {
+      action: "strikethrough",
+      icon: "strikethrough",
+      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",
+      icon: "align-center",
+      label: "align_center_button"
+  };
+});
+api.addToolbarPopupMenuOptionsCallback(() => {
+  return {
+      action: "alignright",
+      icon: "align-right",
+      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.modifyClass("controller:composer", {
+  actions: {
+    strikethrough() {
+      this.get("toolbarEvent").applySurround("<s>", "</s>", "strikethrough_text");
+    },
+	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");
+    }
+  }
+});
+
+// TEXTS
+let translations = I18n.translations[I18n.currentLocale()].js;
+if (!translations) {
+  translations = {};
+}
+if (!translations.composer) {
+  translations.composer = {};
+}
+
+translations.composer.underline_button_title = settings.underline_button;
+translations.composer.underline_text =
+  settings.underline_text;
+
+translations.align_center_button = settings.align_center_button;
+translations.composer.align_center_text =
+  settings.align_center_text;
+
+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;
+ 
+</script>

mobile/mobile.scss

@@ -5,3 +5,13 @@
 .d-editor-spacer {
     margin: 0 2px;
 }
+
+[data-wrap="columns"] {
+}
+
+[data-wrap="floatl"] {
+}
+
+[data-wrap="floatr"] {
+}
+

settings.yml

@@ -34,14 +34,46 @@ strikethrough_button:
   default: "Strike-through"
   description:
     en: Enter the text for the title of the button in the composer.
-strikethrough_prompt:
+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"
+  description:
+    en: Enter the placeholder text that appears in the composer after the user clicks the button.
+superscript_button:
+  default: "Superscript"
+  description:
+    en: Enter the text for the title of the button in the composer.
+superscript_text:
+  default: "Text"
+  description:
+    en: Enter the placeholder text that appears in the composer after the user clicks the button.
+subscript_button:
+  default: "Subscript"
+  description:
+    en: Enter the text for the title of the button in the composer.
+subscript_text:
+  default: "Text"
+  description:
+    en: Enter the placeholder text that appears in the composer after the user clicks the button.
+columns_button:
+  default: "Columns"
+  description:
+    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."
+  description:
+    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'
+  default: 'fa-align-center|fa-align-right|fa-align-justify|fa-strikethrough|fa-underline|fa-indent|fa-columns|fa-superscript|fa-subscript'
   description: 
     en: "Include FontAwesome 5 icon classes for each icon used in the list."