Commit 2c490a70 authored by Robert Lyon's avatar Robert Lyon Committed by Yuliya Bozhko
Browse files

Altering the toobar button layout to be more like moodle (Bug #1282341)



Now the 2nd / 3rd rows of buttons are hidden by default and are able
to be toggled on/off with the top left button.

Made the button more accessible by having it highlighted as on when
clicking to show all buttons. And also added different tooltip
messages depending on whether the button is in the on or off state.

Change-Id: Ia4b4f5631218088a4293abc991620c646b8d2d6c
Signed-off-by: Robert Lyon's avatarRobert Lyon <robertl@catalyst.net.nz>
Signed-off-by: default avatarYuliya Bozhko <yuliya.bozhko@totaralms.com>
parent 9fb58c57
/**
*
* @package mahara
* @subpackage core
* @author Catalyst IT Ltd
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL version 3 or later
* @copyright For copyright information on Mahara, please see the README file distributed with this software.
*
*/
/*global tinymce:true */
tinymce.PluginManager.add('tooltoggle', function(editor) {
var tooltoggleState = false, DOM = tinymce.DOM;
editor.addButton('toolbar_toggle', {
icon: 'icon tooltoggle-icon',
tooltip: get_string('toggletoolbarson'),
onclick: function(e) {
jQuery(e.target).closest('.mce-toolbar').siblings().toggleClass('hidden');
tooltoggleState = !tooltoggleState;
editor.fire('ToolToggleStateChanged', {state: tooltoggleState});
},
onPostRender: function() {
var self = this;
editor.on('ToolToggleStateChanged', function(e) {
if (e.state) {
e.target.buttons.toolbar_toggle.tooltip = get_string('toggletoolbarsoff');
}
else {
e.target.buttons.toolbar_toggle.tooltip = get_string('toggletoolbarson');
}
self.active(e.state);
});
}
});
});
......@@ -46,6 +46,8 @@ $string['closehelp'] = 'Close help';
$string['applychanges'] = 'Apply changes';
$string['general'] = 'General';
$string['units'] = 'Units';
$string['toggletoolbarson'] = 'Toggle toolbars on. Show full list of buttons';
$string['toggletoolbarsoff'] = 'Toggle toolbars off. Show basic buttons';
// Objectionable strings.
$string['complaint'] = 'Complaint';
$string['notifyadministrator'] = 'Notify administrator';
......
......@@ -150,9 +150,10 @@ function smarty($javascript = array(), $headers = array(), $pagestrings = array(
}
$toolbar = array(
'"undo redo | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist | link unlink | fullscreen"',
'"fontselect | fontsizeselect | formatselect | bold italic underline strikethrough | forecolor backcolor"',
'"undo redo | cut copy paste | alignleft aligncenter alignright alignjustify | hr emoticons image image2 spellchecker | link unlink | bullist numlist | table"',
null,
'"toolbar_toggle | formatselect | bold italic | bullist numlist | link unlink | image | undo redo"',
'"underline strikethrough subscript superscript | alignleft aligncenter alignright alignjustify | outdent indent | forecolor backcolor | ltr rtl | fullscreen"',
'"fontselect | fontsizeselect | emoticons nonbreaking charmap | spellchecker | table | removeformat pastetext | code"',
);
// For right-to-left langs, reverse button order & align controls right.
......@@ -166,9 +167,10 @@ function smarty($javascript = array(), $headers = array(), $pagestrings = array(
if ($check[$key] == 'tinymce') {
$tinymceconfig = <<<EOF
theme: "modern",
plugins: "textcolor,hr,link,image,table,emoticons,spellchecker,paste,code,fullscreen",
plugins: "tooltoggle,textcolor,link,image,table,emoticons,spellchecker,paste,code,fullscreen,directionality,searchreplace,nonbreaking,charmap",
toolbar1: {$toolbar[1]},
toolbar2: {$toolbar[2]},
toolbar3: {$toolbar[3]},
menubar: false,
fix_list_elements: true,
image_advtab: true,
......@@ -203,6 +205,10 @@ tinyMCE.init({
ed.focus();
}
});
ed.on('LoadContent', function(e) {
// Hide all the 2nd/3rd row menu buttons
jQuery('.mce-toolbar.mce-first').siblings().toggleClass('hidden');
});
{$extrasetup}
}
});
......@@ -994,6 +1000,8 @@ function jsstrings() {
'Help',
'closehelp',
'tabs',
'toggletoolbarson',
'toggletoolbarsoff',
),
'pieforms' => array(
'element.calendar.opendatepicker'
......
......@@ -769,6 +769,13 @@ input.calendar.required {
#mce_fullscreen_container .mceEditor {
display: block;
}
.mce-widget.mce-btn i.tooltoggle-icon {
background-image: url(../../../../js/tinymce/plugins/tooltoggle/img/toolbars.gif);
}
.mce-stack-layout-item .hidden {
display: none;
}
/* files */
a.btn-addfile {
display: inline-block;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment