diff --git a/README.md b/README.md index 0d03d2c..f67c1fc 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,61 @@ -## 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. -For more informations, see : +* 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/ -
+## Credits -Wrap support by thw26 : https://github.com/thw26 +Wrap support by thw26: https://github.com/thw26
diff --git a/about.json b/about.json index 30e719b..376fa5f 100644 --- a/about.json +++ b/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" } diff --git a/common/common.scss b/common/common.scss index b05689c..02b102c 100644 --- a/common/common.scss +++ b/common/common.scss @@ -9,3 +9,4 @@ [data-wrap="justify"] { text-align: justify; } + diff --git a/desktop/desktop.scss b/desktop/desktop.scss new file mode 100644 index 0000000..e00e26b --- /dev/null +++ b/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; +} diff --git a/common/head_tag.html b/desktop/head_tag.html similarity index 52% rename from common/head_tag.html rename to desktop/head_tag.html index e35f487..d06c12f 100644 --- a/common/head_tag.html +++ b/desktop/head_tag.html @@ -1,7 +1,5 @@ \ No newline at end of file +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; + +translations.float_left_button = settings.float_left_button; +translations.composer.float_left_text = + settings.float_left_text; + + diff --git a/mobile/head_tag.html b/mobile/head_tag.html new file mode 100644 index 0000000..15d015b --- /dev/null +++ b/mobile/head_tag.html @@ -0,0 +1,135 @@ + diff --git a/mobile/mobile.scss b/mobile/mobile.scss index e57a9fd..ce05862 100644 --- a/mobile/mobile.scss +++ b/mobile/mobile.scss @@ -4,4 +4,14 @@ .d-editor-spacer { margin: 0 2px; -} \ No newline at end of file +} + +[data-wrap="columns"] { +} + +[data-wrap="floatl"] { +} + +[data-wrap="floatr"] { +} + diff --git a/settings.yml b/settings.yml index 2075af4..2382838 100644 --- a/settings.yml +++ b/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." \ No newline at end of file + en: "Include FontAwesome 5 icon classes for each icon used in the list."