Improvement: Add "Select some text first to apply this style" hint to…

… inline elements.

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.

lang/en/atto_styles.php

@@ -87,6 +87,7 @@
 <li><a href="http://v4-alpha.getbootstrap.com/components/alerts/">Bootstrap alerts</a></li>
 <li><a href="http://v4-alpha.getbootstrap.com/utilities/">Bootstrap utilities</a></li>
 </ul>';
+$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.';

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');
+}

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

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;

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 = '<i></i>';
             span = '<span>';
             spanpreview = '<span class="title">';
+            inlinehint = '';
             if (style.type === 'nostyle') {
                 icon = '<i class="fa fa-fw fa-times"></i>';
                 span = '<span class="nostyle">';
@@ -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 = '<i class="fa fa-fw fa-i-cursor"></i>';
                 span = '<span class="inlinestyle">';
+                inlinehint = '<br /><span class="inlinehint tag tag-info">' +
+                    M.util.get_string('inlinehint', 'atto_styles') + '</span>';
             }
             if (style.preview === true) {
                 spanpreview = '<span class="preview ' + style.classes + '">';
             }
             items.push({
-                text: span + icon + spanpreview + style.title + '</span></span>',
+                text: span + icon + spanpreview + style.title + '</span>' + inlinehint + '</span>',
                 callbackArgs: ['<' + style.type + '>', style.classes]
             });
         });

yui/build/moodle-atto_styles-button/moodle-atto_styles-button.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 = '<i></i>';
             span = '<span>';
             spanpreview = '<span class="title">';
+            inlinehint = '';
             if (style.type === 'nostyle') {
                 icon = '<i class="fa fa-fw fa-times"></i>';
                 span = '<span class="nostyle">';
@@ -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 = '<i class="fa fa-fw fa-i-cursor"></i>';
                 span = '<span class="inlinestyle">';
+                inlinehint = '<br /><span class="inlinehint tag tag-info">' +
+                    M.util.get_string('inlinehint', 'atto_styles') + '</span>';
             }
             if (style.preview === true) {
                 spanpreview = '<span class="preview ' + style.classes + '">';
             }
             items.push({
-                text: span + icon + spanpreview + style.title + '</span></span>',
+                text: span + icon + spanpreview + style.title + '</span>' + inlinehint + '</span>',
                 callbackArgs: ['<' + style.type + '>', style.classes]
             });
         });

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 = '<i></i>';
             span = '<span>';
             spanpreview = '<span class="title">';
+            inlinehint = '';
             if (style.type === 'nostyle') {
                 icon = '<i class="fa fa-fw fa-times"></i>';
                 span = '<span class="nostyle">';
@@ -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 = '<i class="fa fa-fw fa-i-cursor"></i>';
                 span = '<span class="inlinestyle">';
+                inlinehint = '<br /><span class="inlinehint tag tag-info">' +
+                    M.util.get_string('inlinehint', 'atto_styles') + '</span>';
             }
             if (style.preview === true) {
                 spanpreview = '<span class="preview ' + style.classes + '">';
             }
             items.push({
-                text: span + icon + spanpreview + style.title + '</span></span>',
+                text: span + icon + spanpreview + style.title + '</span>' + inlinehint + '</span>',
                 callbackArgs: ['<' + style.type + '>', style.classes]
             });
         });