Simple branch

Less formatting options for a simple toolbar

README.md

@@ -1,11 +1,9 @@
 # MD Composer Extras
 
-This Discourse theme component adds formatting options to your Discourse composer.
+This Discourse theme component adds formatting options to your Discourse composer. This *simple* branch uses less formatting options
 
 * underline
 * strikethrough
-* superscript
-* subscript
 * center
 * align right
 * justify
@@ -13,9 +11,7 @@ This Discourse theme component adds formatting options to your Discourse compose
 * 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
 
@@ -46,6 +42,7 @@ Test
 Test
 ```
 
+
 ## Questions
 
 For more informations, see: 
@@ -53,6 +50,7 @@ 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

common/common.scss

@@ -10,3 +10,25 @@
   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

@@ -1,22 +0,0 @@
-[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 {
-    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

@@ -17,22 +17,6 @@ api.onToolbarCreate(toolbar => {
 		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",
@@ -114,14 +98,6 @@ translations.composer.strikethrough_button_title = settings.strikethrough_button
 translations.composer.strikethrough_text =
   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;

mobile/head_tag.html

@@ -18,20 +18,6 @@ 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",
@@ -46,43 +32,17 @@ 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.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");
     }
   }
 });
@@ -108,28 +68,8 @@ 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

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

settings.yml

@@ -46,22 +46,6 @@ 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:
@@ -74,6 +58,6 @@ columns_text:
 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-right|fa-align-justify|fa-strikethrough|fa-underline|fa-indent|fa-columns'
   description: 
     en: "Include FontAwesome 5 icon classes for each icon used in the list."