Compare commits

..

1 Commits

Author SHA1 Message Date
iunctis
5bf208e920 Simple branch
Less formatting options for a simple toolbar
2020-05-14 15:10:49 +02:00
8 changed files with 95 additions and 327 deletions

View File

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

View File

@ -1,22 +1,17 @@
# MD Composer ~~Extras~~ Color Plus Ultra
# 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~~
* align right
* justify
* ~~float left~~
* ~~float right~~
* ~~columns~~.
* Colorer le texte en bleu, rose, jaune, orange, rouge et vert.
* 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
@ -47,6 +42,7 @@ Test
Test
```
## Questions
For more informations, see:
@ -54,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
@ -64,5 +61,3 @@ 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

View File

@ -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;
}

View File

@ -1,26 +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, [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;
}

View File

@ -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",
@ -41,6 +25,14 @@ 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",
@ -53,73 +45,27 @@ api.onToolbarCreate(toolbar => {
// EXTRAS
api.addToolbarPopupMenuOptionsCallback(() => {
return {
id: "bleu_color",
action: "bleucolor",
icon: "palette",
label: "bleu_color_button"
action: "floatleft",
icon: "indent",
label: "float_left_button"
};
});
api.addToolbarPopupMenuOptionsCallback(() => {
return {
id: "rose_color",
action: "rosecolor",
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"
action: "columns",
icon: "columns",
label: "columns_button"
};
});
api.modifyClass("controller:composer", {
actions: {
bleucolor() {
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");
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");
}
}
});
@ -140,6 +86,10 @@ 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;
@ -148,36 +98,12 @@ 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.columns_button = settings.columns_button;
translations.composer.columns_text =
settings.columns_text;
translations.composer.subscript_button_title = settings.subscript_button;
translations.composer.subscript_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;
translations.float_left_button = settings.float_left_button;
translations.composer.float_left_text =
settings.float_left_text;
</script>

View File

@ -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,54 +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.addToolbarPopupMenuOptionsCallback(() => {
return {
action: "bbcodecolor",
icon: "palette",
label: "bbcode_color_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() {
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");
}
}
});
@ -119,32 +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;
translations.bbcode_color_button = settings.bbcode_color_button;
translations.composer.bbcode_color_text =
settings.bbcode_color_text;
</script>

View File

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

View File

@ -1,126 +1,63 @@
underline_button:
default: "Souligner"
default: "Underline"
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: "Texte"
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_center_button:
default: "Centrer"
default: "Center"
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: "Texte"
default: "Text"
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: "Justifier"
default: "Justify"
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: "Texte"
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.
strikethrough_button:
default: "Barrer"
default: "Strike-through"
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: "Texte"
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: "Exposant"
float_left_button:
default: "Float left"
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: "Texte"
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.
subscript_button:
default: "Indice"
columns_button:
default: "Columns"
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: "Texte"
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.
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-justify|fa-strikethrough|fa-underline|fa-indent|fa-superscript|fa-subscript|fa-palette'
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."