From 8f9f9355c7954a6d1b8c31d85861e2c8db5c1e54 Mon Sep 17 00:00:00 2001 From: Alexander Bias Date: Tue, 9 Apr 2019 15:44:14 +0200 Subject: [PATCH] Improvement: Add "Select some text first to apply this style" hint to inline elements. --- CHANGES.md | 1 + lang/en/atto_styles.php | 1 + lib.php | 10 ++++++++++ styles.css | 18 +++++++++++++----- version.php | 2 +- .../moodle-atto_styles-button-debug.js | 7 +++++-- .../moodle-atto_styles-button-min.js | 2 +- .../moodle-atto_styles-button.js | 7 +++++-- yui/src/button/js/button.js | 7 +++++-- 9 files changed, 42 insertions(+), 13 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 5f54650..95950c3 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -6,6 +6,7 @@ Changes ### Unreleased +* 2019-04-09 - Improvement: Add "Select some text first to apply this style" hint to inline elements. * 2019-04-09 - Improvement: Change list item icons to FontAwesome. * 2019-04-09 - Improvement: Add preview to dropdown menu. * 2019-04-09 - Check compatibility for Moodle 3.6, no functionality change. diff --git a/lang/en/atto_styles.php b/lang/en/atto_styles.php index a5400b5..5710a77 100644 --- a/lang/en/atto_styles.php +++ b/lang/en/atto_styles.php @@ -87,6 +87,7 @@
  • Bootstrap alerts
  • Bootstrap utilities
    • '; +$string['inlinehint'] = 'Select some text first to apply this style'; $string['nostyle'] = 'No style'; $string['pluginname'] = 'Styles'; $string['privacy:metadata'] = 'The atto_styles plugin does not store any personal data.'; diff --git a/lib.php b/lib.php index 92cc6e6..9db5899 100644 --- a/lib.php +++ b/lib.php @@ -65,3 +65,13 @@ function atto_styles_get_fontawesome_icon_map() { 'atto_styles:icon' => 'fa-tint' ]; } + +/** + * Get the list of strings for this plugin. + * @param string $elementid + */ +function atto_styles_strings_for_js() { + global $PAGE; + + $PAGE->requires->strings_for_js(array('inlinehint'), 'atto_styles'); +} diff --git a/styles.css b/styles.css index 245729e..9438b53 100644 --- a/styles.css +++ b/styles.css @@ -9,6 +9,13 @@ white-space: nowrap; } +/* Separate the style list menu items more clearly. */ +.editor_atto_menu .atto_styles_button .dropdown-menu > li { + border-bottom: 1px solid #eee; + padding-bottom: 10px; + padding-top: 10px; +} + /* Position menu item icons */ .editor_atto_menu .atto_styles_button .dropdown-menu > li > a i { display: inline-block; @@ -28,16 +35,17 @@ .editor_atto_menu .atto_styles_button .dropdown-menu > li > a span.title { display: inline-block; max-width: calc(100% - 55px) !important; - margin: 5px 0px !important; + margin: 0px !important; } /* Disabled inline style menu item visually */ .editor_atto_menu .disableinline .atto_styles_button .inlinestyle { cursor: default; } -.editor_atto_menu .disableinline .atto_styles_button .inlinestyle span.title { - color: #ccc; +.editor_atto_menu .atto_styles_button .inlinehint { + display: none; } -.editor_atto_menu .disableinline .atto_styles_button .inlinestyle span.preview { - opacity: 0.5; +.editor_atto_menu .disableinline .atto_styles_button .inlinehint { + display: inline-block; + margin-left: 39px; } diff --git a/version.php b/version.php index f0ed0e3..3324f6f 100644 --- a/version.php +++ b/version.php @@ -25,7 +25,7 @@ defined('MOODLE_INTERNAL') || die(); $plugin->component = 'atto_styles'; -$plugin->version = 2019040801; +$plugin->version = 2019040802; $plugin->release = 'v3.5-r2'; $plugin->requires = 2018120300; $plugin->maturity = MATURITY_STABLE; diff --git a/yui/build/moodle-atto_styles-button/moodle-atto_styles-button-debug.js b/yui/build/moodle-atto_styles-button/moodle-atto_styles-button-debug.js index c51d25c..4e4cf18 100644 --- a/yui/build/moodle-atto_styles-button/moodle-atto_styles-button-debug.js +++ b/yui/build/moodle-atto_styles-button/moodle-atto_styles-button-debug.js @@ -45,11 +45,12 @@ Y.namespace('M.atto_styles').Button = Y.Base.create('button', Y.M.editor_atto.Ed var styles = this.get('styles'); styles = JSON.parse(styles); var items = []; - var icon, span, spanpreview; + var icon, span, spanpreview, inlinehint; Y.Array.each(styles, function(style) { icon = ''; span = ''; spanpreview = ''; + inlinehint = ''; if (style.type === 'nostyle') { icon = ''; span = ''; @@ -59,12 +60,14 @@ Y.namespace('M.atto_styles').Button = Y.Base.create('button', Y.M.editor_atto.Ed } else if (style.type == 'inline') { icon = ''; span = ''; + inlinehint = '
    ' + + M.util.get_string('inlinehint', 'atto_styles') + ''; } if (style.preview === true) { spanpreview = ''; } items.push({ - text: span + icon + spanpreview + style.title + '    ', + text: span + icon + spanpreview + style.title + '    ' + inlinehint + '    ', callbackArgs: ['<' + style.type + '>', style.classes] }); }); diff --git a/yui/build/moodle-atto_styles-button/moodle-atto_styles-button-min.js b/yui/build/moodle-atto_styles-button/moodle-atto_styles-button-min.js index f091b8f..eb41689 100644 --- a/yui/build/moodle-atto_styles-button/moodle-atto_styles-button-min.js +++ b/yui/build/moodle-atto_styles-button/moodle-atto_styles-button-min.js @@ -1 +1 @@ -YUI.add("moodle-atto_styles-button",function(e,t){var n="atto_styles";e.namespace("M.atto_styles").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{initializer:function(){var t=this.get("styles");t=JSON.parse(t);var r=[],i,s,o;e.Array.each(t,function(e){i="",s="",o='',e.type==="nostyle"?(i='',s=''):e.type==="block"?(i='',s=''):e.type=="inline"&&(i='',s=''),e.preview===!0&&(o=''),r.push({text:s+i+o+e.title+"",callbackArgs:["<"+e.type+">",e.classes]})});var u=this._showToolbarMenu;this._showToolbarMenu=function(t,n){u.call(this,t,n);var r,i,s;r=this.hasRangeSelected(),i=this.menus[n.buttonClass],s=i.get("contentBox"),r?s.removeClass("disableinline"):s.addClass("disableinline"),this.toolbar.after("click",e.bind(this._setDropdownHeight,this)),e.on("windowresize",e.bind(this._setDropdownHeight,this))},this.addToolbarMenu({icon:"icon",iconComponent:n,buttonClass:"styles",globalItemConfig:{callback:this._changeStyle},items:r})},_changeStyle:function(e,t){var n,r,i,s,o,u,a;if(t[0]===""){r=window.getSelection().focusNode;for(i=r;i;i=i.parentNode){if(i.nodeType!==1)continue;s=window.getComputedStyle(i,null);if(s){i.removeAttribute("class");break}}return}if(t[0]===""){document.execCommand("formatBlock",!1,"
    "),r=window.getSelection().focusNode;for(i=r;i;i=i.parentNode){if(i.nodeType!==1)continue;s=window.getComputedStyle(i,null);if(s){var f=s.getPropertyValue("display");if(f==="block"){n=i;break}}}n.setAttribute("class",t[1])}else{o=t[1].split(" "),u=this.get("host");for(a=0;a",s="",o='',u="",e.type==="nostyle"?(i='',s=''):e.type==="block"?(i='',s=''):e.type=="inline"&&(i='',s='',u='
    '+M.util.get_string("inlinehint","atto_styles")+""),e.preview===!0&&(o=''),r.push({text:s+i+o+e.title+""+u+"    ",callbackArgs:["<"+e.type+">",e.classes]})});var a=this._showToolbarMenu;this._showToolbarMenu=function(t,n){a.call(this,t,n);var r,i,s;r=this.hasRangeSelected(),i=this.menus[n.buttonClass],s=i.get("contentBox"),r?s.removeClass("disableinline"):s.addClass("disableinline"),this.toolbar.after("click",e.bind(this._setDropdownHeight,this)),e.on("windowresize",e.bind(this._setDropdownHeight,this))},this.addToolbarMenu({icon:"icon",iconComponent:n,buttonClass:"styles",globalItemConfig:{callback:this._changeStyle},items:r})},_changeStyle:function(e,t){var n,r,i,s,o,u,a;if(t[0]===""){r=window.getSelection().focusNode;for(i=r;i;i=i.parentNode){if(i.nodeType!==1)continue;s=window.getComputedStyle(i,null);if(s){i.removeAttribute("class");break}}return}if(t[0]===""){document.execCommand("formatBlock",!1,"
    "),r=window.getSelection().focusNode;for(i=r;i;i=i.parentNode){if(i.nodeType!==1)continue;s=window.getComputedStyle(i,null);if(s){var f=s.getPropertyValue("display");if(f==="block"){n=i;break}}}n.setAttribute("class",t[1])}else{o=t[1].split(" "),u=this.get("host");for(a=0;a'; } if (style.preview === true) { spanpreview = ''; } items.push({ - text: span + icon + spanpreview + style.title + '', + text: span + icon + spanpreview + style.title + '' + inlinehint + '', callbackArgs: ['<' + style.type + '>', style.classes] }); }); diff --git a/yui/src/button/js/button.js b/yui/src/button/js/button.js index 23e9b07..815c3cf 100644 --- a/yui/src/button/js/button.js +++ b/yui/src/button/js/button.js @@ -43,11 +43,12 @@ Y.namespace('M.atto_styles').Button = Y.Base.create('button', Y.M.editor_atto.Ed var styles = this.get('styles'); styles = JSON.parse(styles); var items = []; - var icon, span, spanpreview; + var icon, span, spanpreview, inlinehint; Y.Array.each(styles, function(style) { icon = ''; span = ''; spanpreview = ''; + inlinehint = ''; if (style.type === 'nostyle') { icon = ''; span = ''; @@ -57,12 +58,14 @@ Y.namespace('M.atto_styles').Button = Y.Base.create('button', Y.M.editor_atto.Ed } else if (style.type == 'inline') { icon = ''; span = ''; + inlinehint = '
    ' + + M.util.get_string('inlinehint', 'atto_styles') + ''; } if (style.preview === true) { spanpreview = ''; } items.push({ - text: span + icon + spanpreview + style.title + '    ', + text: span + icon + spanpreview + style.title + '    ' + inlinehint + '    ', callbackArgs: ['<' + style.type + '>', style.classes] }); });