Merge branch 'MDL-71656-311' of git://github.com/HuongNV13/moodle int…

…o MOODLE_311_STABLE
moodle · Aug 10, 2021 · 774f6ff · 774f6ff
2 parents 1f343bf + f53dd9c
commit 774f6ff
Show file tree

Hide file tree

Showing 14 changed files with 160 additions and 20 deletions.
diff --git a/lib/editor/atto/plugins/backcolor/lang/en/atto_backcolor.php b/lib/editor/atto/plugins/backcolor/lang/en/atto_backcolor.php
@@ -22,5 +22,11 @@
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
 
+$string['color_white'] = 'White';
+$string['color_red'] = 'Red';
+$string['color_yellow'] = 'Yellow';
+$string['color_green'] = 'Green';
+$string['color_blue'] = 'Blue';
+$string['color_black'] = 'Black';
 $string['pluginname'] = 'Background colour';
 $string['privacy:metadata'] = 'The atto_backcolor plugin does not store any personal data.';
diff --git a/lib/editor/atto/plugins/backcolor/lib.php b/lib/editor/atto/plugins/backcolor/lib.php
@@ -0,0 +1,41 @@
+<?php
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Atto text editor integration version file.
+ *
+ * @package    atto_backcolor
+ * @copyright  2021 Huong Nguyen <huongn@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+defined('MOODLE_INTERNAL') || die();
+
+/**
+ * Initialise the js strings required for this module.
+ */
+function atto_backcolor_strings_for_js() {
+    global $PAGE;
+
+    $PAGE->requires->strings_for_js([
+        'color_white',
+        'color_red',
+        'color_yellow',
+        'color_green',
+        'color_blue',
+        'color_black'
+    ], 'atto_backcolor');
+}
diff --git a/lib/editor/atto/plugins/backcolor/styles.css b/lib/editor/atto/plugins/backcolor/styles.css
@@ -1,3 +1,26 @@
 .atto_backcolor_button .dropdown-menu {
     min-width: inherit;
 }
+
+.atto_backcolor_button .dropdown-menu .atto_menuentry {
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+.atto_backcolor_button .dropdown-menu .atto_menuentry a[role=menuitem] {
+    display: flex;
+}
+
+.atto_backcolor_button .dropdown-menu .atto_menuentry a[role=menuitem]:hover,
+.atto_backcolor_button .dropdown-menu .atto_menuentry a[role=menuitem]:focus {
+    box-shadow: #0f6fc5 0 0 3px 1px;
+}
+
+.atto_backcolor_button .dropdown-menu .coloroption {
+    display: flex;
+    align-items: center;
+    float: left;
+    height: 20px;
+    width: 20px;
+    border: 1px solid #ccc;
+}
diff --git a/...ns/backcolor/yui/build/moodle-atto_backcolor-button/moodle-atto_backcolor-button-debug.js b/...ns/backcolor/yui/build/moodle-atto_backcolor-button/moodle-atto_backcolor-button-debug.js
@@ -59,10 +59,10 @@ Y.namespace('M.atto_backcolor').Button = Y.Base.create('button', Y.M.editor_atto
     initializer: function() {
         var items = [];
         Y.Array.each(colors, function(color) {
+            var colorLabel = M.util.get_string('color_' + color.name, 'atto_backcolor');
             items.push({
-                text: '<div style="width: 20px; height: 20px; border: 1px solid #CCC; background-color: ' +
-                        color.color +
-                        '"></div>',
+                text: '<div class="coloroption" style="background-color: '
+                        + color.color + '" aria-label="' + colorLabel + '" title="' + colorLabel + '"></div>',
                 callbackArgs: color.color
             });
         });

diff --git a/...gins/backcolor/yui/build/moodle-atto_backcolor-button/moodle-atto_backcolor-button-min.js b/...gins/backcolor/yui/build/moodle-atto_backcolor-button/moodle-atto_backcolor-button-min.js
diff --git a/.../plugins/backcolor/yui/build/moodle-atto_backcolor-button/moodle-atto_backcolor-button.js b/.../plugins/backcolor/yui/build/moodle-atto_backcolor-button/moodle-atto_backcolor-button.js
@@ -59,10 +59,10 @@ Y.namespace('M.atto_backcolor').Button = Y.Base.create('button', Y.M.editor_atto
     initializer: function() {
         var items = [];
         Y.Array.each(colors, function(color) {
+            var colorLabel = M.util.get_string('color_' + color.name, 'atto_backcolor');
             items.push({
-                text: '<div style="width: 20px; height: 20px; border: 1px solid #CCC; background-color: ' +
-                        color.color +
-                        '"></div>',
+                text: '<div class="coloroption" style="background-color: '
+                        + color.color + '" aria-label="' + colorLabel + '" title="' + colorLabel + '"></div>',
                 callbackArgs: color.color
             });
         });

diff --git a/lib/editor/atto/plugins/backcolor/yui/src/button/js/button.js b/lib/editor/atto/plugins/backcolor/yui/src/button/js/button.js
@@ -57,10 +57,10 @@ Y.namespace('M.atto_backcolor').Button = Y.Base.create('button', Y.M.editor_atto
     initializer: function() {
         var items = [];
         Y.Array.each(colors, function(color) {
+            var colorLabel = M.util.get_string('color_' + color.name, 'atto_backcolor');
             items.push({
-                text: '<div style="width: 20px; height: 20px; border: 1px solid #CCC; background-color: ' +
-                        color.color +
-                        '"></div>',
+                text: '<div class="coloroption" style="background-color: '
+                        + color.color + '" aria-label="' + colorLabel + '" title="' + colorLabel + '"></div>',
                 callbackArgs: color.color
             });
         });

diff --git a/lib/editor/atto/plugins/fontcolor/lang/en/atto_fontcolor.php b/lib/editor/atto/plugins/fontcolor/lang/en/atto_fontcolor.php
@@ -22,5 +22,11 @@
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
 
+$string['color_white'] = 'White';
+$string['color_red'] = 'Red';
+$string['color_yellow'] = 'Yellow';
+$string['color_green'] = 'Green';
+$string['color_blue'] = 'Blue';
+$string['color_black'] = 'Black';
 $string['pluginname'] = 'Font colour';
 $string['privacy:metadata'] = 'The atto_fontcolor plugin does not store any personal data.';
diff --git a/lib/editor/atto/plugins/fontcolor/lib.php b/lib/editor/atto/plugins/fontcolor/lib.php
@@ -0,0 +1,41 @@
+<?php
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Atto text editor integration version file.
+ *
+ * @package    atto_fontcolor
+ * @copyright  2021 Huong Nguyen <huongn@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+defined('MOODLE_INTERNAL') || die();
+
+/**
+ * Initialise the js strings required for this module.
+ */
+function atto_fontcolor_strings_for_js() {
+    global $PAGE;
+
+    $PAGE->requires->strings_for_js([
+        'color_white',
+        'color_red',
+        'color_yellow',
+        'color_green',
+        'color_blue',
+        'color_black'
+    ], 'atto_fontcolor');
+}
diff --git a/lib/editor/atto/plugins/fontcolor/styles.css b/lib/editor/atto/plugins/fontcolor/styles.css
@@ -1,3 +1,26 @@
 .atto_fontcolor_button .dropdown-menu {
     min-width: inherit;
 }
+
+.atto_fontcolor_button .dropdown-menu .atto_menuentry {
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+.atto_fontcolor_button .dropdown-menu .atto_menuentry a[role=menuitem] {
+    display: flex;
+}
+
+.atto_fontcolor_button .dropdown-menu .atto_menuentry a[role=menuitem]:hover,
+.atto_fontcolor_button .dropdown-menu .atto_menuentry a[role=menuitem]:focus {
+    box-shadow: #0f6fc5 0 0 3px 1px;
+}
+
+.atto_fontcolor_button .dropdown-menu .coloroption {
+    display: flex;
+    align-items: center;
+    float: left;
+    height: 20px;
+    width: 20px;
+    border: 1px solid #ccc;
+}
diff --git a/...ns/fontcolor/yui/build/moodle-atto_fontcolor-button/moodle-atto_fontcolor-button-debug.js b/...ns/fontcolor/yui/build/moodle-atto_fontcolor-button/moodle-atto_fontcolor-button-debug.js
@@ -59,10 +59,10 @@ Y.namespace('M.atto_fontcolor').Button = Y.Base.create('button', Y.M.editor_atto
     initializer: function() {
         var items = [];
         Y.Array.each(colors, function(color) {
+            var colorLabel = M.util.get_string('color_' + color.name, 'atto_fontcolor');
             items.push({
-                text: '<div style="width: 20px; height: 20px; border: 1px solid #CCC; background-color: ' +
-                        color.color +
-                        '"></div>',
+                text: '<div class="coloroption" style="background-color: '
+                        + color.color + '" aria-label="' + colorLabel + '" title="' + colorLabel + '"></div>',
                 callbackArgs: color.color,
                 callback: this._changeStyle
             });

diff --git a/...gins/fontcolor/yui/build/moodle-atto_fontcolor-button/moodle-atto_fontcolor-button-min.js b/...gins/fontcolor/yui/build/moodle-atto_fontcolor-button/moodle-atto_fontcolor-button-min.js
diff --git a/.../plugins/fontcolor/yui/build/moodle-atto_fontcolor-button/moodle-atto_fontcolor-button.js b/.../plugins/fontcolor/yui/build/moodle-atto_fontcolor-button/moodle-atto_fontcolor-button.js
@@ -59,10 +59,10 @@ Y.namespace('M.atto_fontcolor').Button = Y.Base.create('button', Y.M.editor_atto
     initializer: function() {
         var items = [];
         Y.Array.each(colors, function(color) {
+            var colorLabel = M.util.get_string('color_' + color.name, 'atto_fontcolor');
             items.push({
-                text: '<div style="width: 20px; height: 20px; border: 1px solid #CCC; background-color: ' +
-                        color.color +
-                        '"></div>',
+                text: '<div class="coloroption" style="background-color: '
+                        + color.color + '" aria-label="' + colorLabel + '" title="' + colorLabel + '"></div>',
                 callbackArgs: color.color,
                 callback: this._changeStyle
             });

diff --git a/lib/editor/atto/plugins/fontcolor/yui/src/button/js/button.js b/lib/editor/atto/plugins/fontcolor/yui/src/button/js/button.js
@@ -57,10 +57,10 @@ Y.namespace('M.atto_fontcolor').Button = Y.Base.create('button', Y.M.editor_atto
     initializer: function() {
         var items = [];
         Y.Array.each(colors, function(color) {
+            var colorLabel = M.util.get_string('color_' + color.name, 'atto_fontcolor');
             items.push({
-                text: '<div style="width: 20px; height: 20px; border: 1px solid #CCC; background-color: ' +
-                        color.color +
-                        '"></div>',
+                text: '<div class="coloroption" style="background-color: '
+                        + color.color + '" aria-label="' + colorLabel + '" title="' + colorLabel + '"></div>',
                 callbackArgs: color.color,
                 callback: this._changeStyle
             });