[TASK] RTE: Use Bootstrap markup for the toolbar 86/36186/4
authorStanislas Rolland <typo3@sjbr.ca>
Thu, 22 Jan 2015 20:26:30 +0000 (15:26 -0500)
committerStanislas Rolland <typo3@sjbr.ca>
Fri, 23 Jan 2015 01:24:07 +0000 (02:24 +0100)
Releases: master
Resolves: #64443
Change-Id: I165841b60563c87d2934fc6126f834b5f2f262c2
Reviewed-on: http://review.typo3.org/36186
Reviewed-by: Stanislas Rolland <typo3@sjbr.ca>
Tested-by: Stanislas Rolland <typo3@sjbr.ca>
typo3/sysext/rtehtmlarea/Classes/RteHtmlAreaBase.php
typo3/sysext/rtehtmlarea/Resources/Public/Css/Skin/htmlarea.css
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/Configuration/Config.js
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/Editor/Editor.js
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/Editor/Toolbar.js
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/Toolbar/Button.js
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/Toolbar/Select.js
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/Toolbar/ToolbarText.js
typo3/sysext/t3skin/rtehtmlarea/htmlarea.css

index 9d16b94..ca465fd 100644 (file)
@@ -653,13 +653,18 @@ class RteHtmlAreaBase extends \TYPO3\CMS\Backend\Rte\AbstractRte {
                if ($this->client['browser'] == 'msie' || $this->client['browser'] == 'opera') {
                        $this->thisConfig['keepButtonGroupTogether'] = 0;
                }
-               $this->defaultToolbarOrder = 'bar, blockstylelabel, blockstyle, space, textstylelabel, textstyle, linebreak,
+               $this->defaultToolbarOrder = 'bar, blockstylelabel, blockstyle, textstylelabel, textstyle, linebreak,
                        bar, formattext, bold,  strong, italic, emphasis, big, small, insertedtext, deletedtext, citation, code, definition, keyboard, monospaced, quotation, sample, variable, bidioverride, strikethrough, subscript, superscript, underline, span,
-                       bar, fontstyle, space, fontsize, bar, formatblock, insertparagraphbefore, insertparagraphafter, blockquote, line,
+                       bar, fontstyle, fontsize, bar, formatblock, insertparagraphbefore, insertparagraphafter, blockquote, line,
                        bar, left, center, right, justifyfull,
-                       bar, orderedlist, unorderedlist, definitionlist, definitionitem, outdent, indent,  bar, lefttoright, righttoleft, language, showlanguagemarks,
+                       bar, orderedlist, unorderedlist, definitionlist, definitionitem, outdent, indent,
+                       bar, language, showlanguagemarks,lefttoright, righttoleft,
                        bar, textcolor, bgcolor, textindicator,
-                       bar, editelement, showmicrodata, emoticon, insertcharacter, insertsofthyphen, link, unlink, image, table,' . ($this->thisConfig['hideTableOperationsInToolbar'] && is_array($this->thisConfig['buttons.']) && is_array($this->thisConfig['buttons.']['toggleborders.']) && $this->thisConfig['buttons.']['toggleborders.']['keepInToolbar'] ? ' toggleborders,' : '') . ' user, abbreviation, bar, findreplace, spellcheck,
+                       bar, editelement, showmicrodata,
+                       bar, image, emoticon, insertcharacter, insertsofthyphen, abbreviation, user,
+                       bar, link, unlink,
+                       bar, table,' . ($this->thisConfig['hideTableOperationsInToolbar'] && is_array($this->thisConfig['buttons.']) && is_array($this->thisConfig['buttons.']['toggleborders.']) && $this->thisConfig['buttons.']['toggleborders.']['keepInToolbar'] ? ' toggleborders,' : '') . '
+                       bar, findreplace, spellcheck,
                        bar, chMode, inserttag, removeformat, bar, copy, cut, paste, pastetoggle, pastebehaviour, bar, undo, redo, bar, showhelp, about, linebreak,
                        ' . ($this->thisConfig['hideTableOperationsInToolbar'] ? '' : 'bar, toggleborders,') . ' bar, tableproperties, tablerestyle, bar, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, bar,
                        columnproperties, columninsertbefore, columninsertafter, columndelete, columnsplit, bar,
index d65e72c..a8fdf41 100644 (file)
        padding-bottom: 10px;
 }
 /* Selectors for the editor toolbar */
-.htmlarea .unselectable,
-.htmlarea .unselectable * {
-       user-select: none;
-       -o-user-select: none;
-       -ms-user-select: none;
-       -moz-user-select: -moz-none;
-       -webkit-user-select: none;
-       cursor: default;
-}
-.htmlarea .toolbar {
-       cursor: default;
-       border-bottom: 0;
-       margin: 0;
+.htmlarea .btn-toolbar {
        padding: 2px;
 }
-.htmlarea .toolbar .tb-group {
-       clear:none;
-       float:left;
-       margin:1px 2px 0px 0px;
-       padding:0;
-}
-.htmlarea .toolbar .x-form-item {
-       float: left;
-       height: 26px;
-       margin: 0 2px;
+.htmlarea .btn-toolbar .btn-group {
+       margin: 1px 3px;
 }
-.htmlarea .toolbar .toolbar-text .x-form-item-label {
-       display: block;
-       font-weight: normal;
-       width: auto;
+.htmlarea .btn-toolbar .btn {
+       display: inline-block;
+       padding: 0;
 }
-.htmlarea .toolbar .button {
+.htmlarea .btn-toolbar .btn-sm {
        background-color: transparent;
-       border-collapse: separate;
-       border-color: transparent;
-       border-radius: 2px;
-       border-style: solid;
-       border-width: 1px;
-       cursor: pointer;
-       float: left;
-       height: 23px;
-       margin: 0 0 3px 0;
+       height: 24px;
+       margin: 1px 0;
+       padding: 2px 0 0 2px;
        width: 24px;
 }
-.htmlarea .toolbar .button button {
-       background-color: transparent;
-       border: 0 none;
-       cursor: pointer;
-       display: block;
-       -moz-outline: 0 none;
-       outline: 0 none;
+.htmlarea .btn-toolbar .btn-sm + .btn-sm {
+       border-left: 0;
 }
-.htmlarea .toolbar .btn-text {
+.htmlarea .btn-toolbar .btn-sm:not(:last-child) {
+       border-right: 0;
+}
+.htmlarea .btn-toolbar .btn-icon {
        background-image: url("images/sprites/actions.png");
-       background-position: center;
        background-repeat: no-repeat;
-       width: 20px;
+       display: inline-block;
        height: 18px;
-       margin: 2px 0 1px 2px;
+       width: 20px;
 }
-.htmlarea .toolbar .buttonHover {
-       background-color: #DCDCDC;
+.htmlarea .btn-toolbar .btn-sm:hover {
+       background-color: #dcdcdc;
 }
-.htmlarea .toolbar .buttonActive,
-.htmlarea-context-menu .buttonActive {
+.htmlarea .btn-toolbar .btn-active,
+.htmlarea-context-menu .btn-active {
        border-style: solid;
        border-width: 1px;
-       border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
+       border-color: #C5C5D5 #C5C5D5 #C5C5D5 #C5C5D5;
+       background-color: #ffffff;
        text-decoration: none;
        opacity: 1.00;
 }
-.htmlarea .toolbar .indicator {
-       background-color: white;
-       border: 1px solid ButtonShadow;
+.htmlarea .btn-toolbar .toolbar-text {
+       width: auto;
+}
+.htmlarea .btn-toolbar .indicator {
        cursor: default;
-       float: left;
-       height: 18px;
-       overflow: hidden;
-       margin: 3px 1px 5px 1px;
-       padding: 0 2px 4px 0;
+       height: 24px;
        text-align: center;
        width: 24px;
 }
-.htmlarea .toolbar .buttonDisabled {
-       cursor: default;
-       filter: gray() alpha(opacity=25);
-       -moz-opacity: 0.25;
-       opacity: 0.25;
-}
-.htmlarea .toolbar .separator {
-       background-color: rgb(115, 115, 115);
-       float: left;
-       height: 18px;
-       margin: 3px 2px 5px 2px;
-       width: 1px;
-}
-.htmlarea .toolbar .space {
+.htmlarea .btn-toolbar .space {
        background-color: transparent;
        border-style: none;
+       display: block;
        float: left;
        height: 26px;
        margin: 0;
        padding: 0 1px;
        width: 2px;
 }
-.htmlarea .toolbar .space-clear-left {
+.htmlarea .btn-toolbar .space-clear-left {
        clear: left;
+       display: block;
        font-size: 0;
        height: 0;
        line-height: 0;
        overflow: hidden;
 }
-.htmlarea .toolbar .select {
-       height: 17px;
+.htmlarea .btn-toolbar .form-group {
+       display: inline-block;
+       height: 26px;
+       margin: 0 2px 0px 2px;
+}
+.htmlarea .btn-toolbar .form-label {
+       display: inline-block;
+       font-weight: normal;
+       height: 24px;
+       margin: 0;
+       padding: 0 2px;
+       width: auto;
 }
-.htmlarea .toolbar select {
-       border: 1px solid #c7c7c7;
-       border-radius: 2px;
+.htmlarea .btn-toolbar .form-control {
+       border-color: #cccccc;
        display: inline-block;
-       height: 22px !important;
-       margin: 0 0 4px 0;
+       height: 24px;
+       margin: 0;
        padding: 2px 1px;
 }
-.htmlarea .toolbar select option {
-       padding: 2px;
+.htmlarea .btn-toolbar .btn-sm[disabled] .btn-icon,
+.htmlarea .btn-toolbar .form-control[disabled],
+.htmlarea .btn-toolbar .toolbar-text[disabled] {
+       cursor: default;
+       filter: gray() alpha(opacity=40);
+       -moz-opacity: 0.4;
+       opacity: 0.4;
 }
-.htmlarea .toolbar .x-form-field-wrap .x-form-trigger {
-       right: 0;
+.htmlarea .btn-toolbar .form-control option {
+       padding: 2px;
 }
 .htmlarea .editorIframe {
        clear: both;
index 5e28c07..7f532a1 100644 (file)
@@ -75,22 +75,10 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Configuration/Config',
                this.configDefaults = {
                        all: {
                                xtype: 'htmlareabutton',
-                               disabledClass: 'buttonDisabled',
                                textMode: false,
                                selection: false,
                                dialog: false,
                                hidden: false
-                       },
-                       htmlareabutton: {
-                               cls: 'button',
-                               overCls: 'buttonHover',
-                               // Erratic behaviour of click event in WebKit and IE browsers
-                               clickEvent: (UserAgent.isWebKit || UserAgent.isIE) ? 'mousedown' : 'click'
-                       },
-                       htmlareaselect: {
-                               cls: 'select',
-                               labelSeparator: '',
-                               hideLabel: true
                        }
                };
        };
index 3cd37e9..4d6690c 100644 (file)
@@ -198,7 +198,6 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Editor',
                                        // The toolbar
                                        id: this.editorId + '-toolbar',
                                        itemId: 'toolbar',
-                                       cls: 'toolbar',
                                        editorId: this.editorId
                                }),
                                new Iframe({
index 45fa1b9..e5fff45 100644 (file)
@@ -40,11 +40,13 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Toolbar',
                 */
                render: function (container) {
                        this.el = document.createElement('div');
+                       Dom.addClass(this.el, 'btn-toolbar');
+                       this.el.setAttribute('role', 'toolbar');
                        if (this.id) {
                                this.el.setAttribute('id', this.id);
                        }
                        if (this.cls) {
-                               this.el.setAttribute('class', this.cls);
+                               Dom.addClass(this.el, this.cls);
                        }
                        this.el = container.appendChild(this.el);
                        this.addItems();
@@ -88,23 +90,19 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Toolbar',
                                row = editor.config.toolbar[i];
                                if (!firstOnRow) {
                                        // If a visible item was added to the previous line
-                                       this.addSpacer('space-clear-left');
+                                       this.addSpacer(this.el, 'space-clear-left');
                                }
                                firstOnRow = true;
                                // Add the groups
                                for (j = 0, m = row.length; j < m; j++) {
                                        group = row[j];
-                                       // To do: this.config.keepButtonGroupTogether ...
-                                       if (!firstOnRow && !firstInGroup) {
-                                               // If a visible item was added to the line
-                                               this.addSeparator();
-                                       }
+                                       var groupContainer = this.addGroup();
                                        firstInGroup = true;
                                        // Add each item
                                        for (k = 0, p = group.length; k < p; k++) {
                                                item = group[k];
                                                if (item == 'space') {
-                                                       this.addSpacer();
+                                                       this.addSpacer(groupContainer);
                                                } else {
                                                        // Get the item's config as registered by some plugin
                                                        var itemConfig = editor.config.buttonsConfig[item];
@@ -113,16 +111,16 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Toolbar',
                                                                itemConfig.toolbar = this;
                                                                switch (itemConfig.xtype) {
                                                                        case 'htmlareabutton':
-                                                                               this.add(new Button(itemConfig));
+                                                                               this.add(new Button(itemConfig), groupContainer);
                                                                                break;
                                                                        case 'htmlareaselect':
-                                                                               this.add(new Select(itemConfig));
+                                                                               this.add(new Select(itemConfig), groupContainer);
                                                                                break;
                                                                        case 'htmlareatoolbartext':
-                                                                               this.add(new ToolbarText(itemConfig));
+                                                                               this.add(new ToolbarText(itemConfig), groupContainer);
                                                                                break;
                                                                        default:
-                                                                               this.add(itemConfig);
+                                                                               this.add(itemConfig, groupContainer);
                                                                }
                                                                firstInGroup = firstInGroup && itemConfig.hidden;
                                                                firstOnRow = firstOnRow && firstInGroup;
@@ -131,51 +129,55 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Toolbar',
                                        }
                                }
                        }
-                       this.addSpacer('space-clear-left');
                },
 
                /**
                 * Add an item to the toolbar
                 *
                 * @param object item: the item to be added (not yet rendered)
+                * @param object container: the element into which to insert the item
                 * @return void
                 */
-               add: function (item) {
+               add: function (item, container) {
                        if (item.itemId) {
                                this.items[item.itemId] = item;
                        }
-                       item.render(this);
+                       item.render(container);
                },
 
                /**
-                * Add a spacer to the toolbar
+                * Add a group to the toolbar
                 *
-                * @param string cls: a class to be added on the spacer rather than 'space' (default)
+                * @param string cls: a class to be added on the group other than 'btn-group' (default)
                 * @return void
                 */
-               addSpacer: function (cls) {
-                       var spacer = document.createElement('div');
+               addGroup: function (cls) {
+                       var group = document.createElement('div');
                        if (typeof cls === 'string') {
-                               Dom.addClass(spacer, cls);
+                               Dom.addClass(group, cls);
                        } else {
-                               Dom.addClass(spacer, 'space');
+                               Dom.addClass(group, 'btn-group');
                        }
-                       this.el.appendChild(spacer);
+                       group.setAttribute('role', 'group');
+                       group = this.el.appendChild(group);
+                       return group;
                },
 
                /**
-                * Add a separator to the toolbar
+                * Add a spacer to the toolbar
                 *
-                * @param string cls: a class to be added on the separator
+                * @param object container: the element into which to insert the item
+                * @param string cls: a class to be added on the spacer rather than 'space' (default)
                 * @return void
                 */
-               addSeparator: function (cls) {
+               addSpacer: function (container, cls) {
                        var spacer = document.createElement('div');
-                       Dom.addClass(spacer, 'separator');
                        if (typeof cls === 'string') {
                                Dom.addClass(spacer, cls);
+                       } else {
+                               Dom.addClass(spacer, 'space');
                        }
-                       this.el.appendChild(spacer);
+                       container.appendChild(spacer);
                },
 
                /**
index c696368..c96ab57 100644 (file)
@@ -33,39 +33,35 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Toolbar/Button',
                /**
                 * Render the button item (called by the toolbar)
                 *
-                * @param object container: the container of the button (the toolbar object)
+                * @param object container: the container of the button (the toolbar object or a button group)
                 * @return void
                 */
                render: function (container) {
-                       this.el = document.createElement('div');
-                       Dom.addClass(this.el, 'x-form-item');
-                       Dom.addClass(this.el, 'button');
-                       Dom.addClass(this.el, 'unselectable');
-                       this.el.setAttribute('unselectable', 'on');
+                       this.el = document.createElement('button');
+                       this.el.setAttribute('type', 'button');
+                       Dom.addClass(this.el, 'btn');
+                       Dom.addClass(this.el, 'btn-default');
+                       Dom.addClass(this.el, 'btn-sm');
                        if (this.id) {
                                this.el.setAttribute('id', this.id);
                        }
                        if (typeof this.cls === 'string') {
-                               Dom.addClass(this.el, this.cls);
-                       }
-                       if (typeof this.text === 'string') {
-                               this.el.innerHTML = this.text;
+                               Dom.addClass(span, this.cls);
                        }
                        if (typeof this.tooltip === 'string') {
-                               this.el.setAttribute('title', this.tooltip);
+                               this.setTooltip(this.tooltip);
                        }
                        if (this.hidden) {
                                Dom.setStyle(this.el, { display: 'none' } );
                        }
-                       this.buttonElement = document.createElement('button');
-                       this.buttonElement.setAttribute('type', 'button');
-                       Dom.addClass(this.buttonElement, 'btn-text');
+                       container.appendChild(this.el);
+                       var span = document.createElement('span');
+                       Dom.addClass(span, 'btn-icon');
                        if (typeof this.iconCls === 'string') {
-                               Dom.addClass(this.buttonElement, this.iconCls);
+                               Dom.addClass(span, this.iconCls);
                        }
-                       this.buttonElement.innerHTML = '&nbsp;';
-                       this.el.appendChild(this.buttonElement);
-                       container.getEl().appendChild(this.el);
+                       span.innerHTML = typeof this.text === 'string' ? this.text : '&nbsp;';
+                       this.el.appendChild(span);
                        this.initEventListeners();
                },
 
@@ -83,9 +79,7 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Toolbar/Button',
                        var self = this;
                        Event.on(this, 'HTMLAreaEventHotkey', function (event, key, keyEvent) { return self.onHotKey(key, keyEvent); });
                        Event.on(this, 'HTMLAreaEventContextMenu', function (event, button) { return self.onButtonClick(button, event); });
-                       Event.on(this.el, this.clickEvent, function (event) { return self.onButtonClick(self, event); });
-                       Event.on(this.el, 'mouseover', function (event) { return self.onMouseOver(event); });
-                       Event.on(this.el, 'mouseout', function (event) { return self.onMouseOut(event); });
+                       Event.on(this.el, (UserAgent.isWebKit || UserAgent.isIE) ? 'mousedown' : 'click', function (event) { return self.onButtonClick(self, event); });
                        // Monitor toolbar updates in order to refresh the state of the button
                        Event.on(this.getToolbar(), 'HTMLAreaEventToolbarUpdate', function (event, mode, selectionEmpty, ancestors, endPointsInSameBlock) { Event.stopEvent(event); self.onUpdateToolbar(mode, selectionEmpty, ancestors, endPointsInSameBlock); return false; });
                },
@@ -115,7 +109,7 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Toolbar/Button',
                 * Add properties and function to set button active or not depending on current selection
                 */
                inactive: true,
-               activeClass: 'buttonActive',
+               activeClass: 'btn-active',
                setInactive: function (inactive) {
                        this.inactive = inactive;
                        return inactive ? Dom.removeClass(this.el, this.activeClass) : Dom.addClass(this.el, this.activeClass);
@@ -179,22 +173,6 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Toolbar/Button',
                },
 
                /**
-                * Handler invoked when the mouse goes over the button
-                */
-               onMouseOver: function (event) {
-                       if (!this.disabled && this.inactive) {
-                               Dom.addClass(this.el, 'buttonHover');
-                       }
-               },
-
-               /**
-                * Handler invoked when the mouse moves out of the button
-                */
-               onMouseOut: function (event) {
-                       Dom.removeClass(this.el, 'buttonHover');
-               },
-
-               /**
                 * Handler invoked when the hotkey configured for this button is pressed
                 */
                onHotKey: function (key, event) {
@@ -219,15 +197,11 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Toolbar/Button',
                 */
                setTooltip: function (text) {
                        this.tooltip = text;
-                       this.buttonElement.title = text;
+                       this.el.setAttribute('title', this.tooltip);
+                       this.el.setAttribute('aria-label', this.tooltip);
                },
 
                /**
-                * Css class applied when the item is disabled
-                */
-               disabledClass: 'buttonDisabled',
-
-               /**
                 * Setting disabled/enabled by boolean.
                 * @param boolean disabled
                 * @return void
@@ -235,9 +209,9 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Toolbar/Button',
                setDisabled: function(disabled){
                        this.disabled = disabled;
                        if (disabled) {
-                               Dom.addClass(this.el, this.disabledClass);
+                               this.el.setAttribute('disabled', 'disabled');
                        } else {
-                               Dom.removeClass(this.el, this.disabledClass);
+                               this.el.removeAttribute('disabled');
                        }
                },
 
index 5982024..1ceea36 100644 (file)
@@ -39,8 +39,10 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Toolbar/Select',
                 */
                render: function (container) {
                        this.el = document.createElement('div');
-                       Dom.addClass(this.el, 'x-form-item');
+                       Dom.addClass(this.el, 'btn');
+                       Dom.addClass(this.el, 'form-group');
                        this.selectElement = document.createElement('select');
+                       Dom.addClass(this.selectElement, 'form-control');
                        if (this.id) {
                                this.selectElement.setAttribute('id', this.id);
                        }
@@ -64,17 +66,15 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Toolbar/Select',
                                }
                        }
                        this.selectElement = this.el.appendChild(this.selectElement);
-                       this.el = container.getEl().appendChild(this.el);
+                       this.el = container.appendChild(this.el);
                        if (this.fieldLabel) {
-                               var textDiv = document.createElement('div');
-                               Dom.addClass(textDiv, 'x-form-item');
-                               Dom.addClass(textDiv, 'toolbar-text');
-                               var text = document.createElement('label');
-                               text.innerHTML = this.fieldLabel;
-                               Dom.addClass(text, 'x-form-item-label');
-                               text.setAttribute('for', this.selectElement.id);
-                               textDiv.appendChild(text);
-                               this.el.insertBefore(textDiv, this.selectElement);
+                               var label = document.createElement('label');
+                               label.innerHTML = this.fieldLabel;
+                               Dom.addClass(label, 'form-label');
+                               label.setAttribute('for', this.selectElement.id);
+                               this.el.insertBefore(label, this.selectElement);
+                       } else if (typeof this.tooltip === 'string') {
+                               this.selectElement.setAttribute('aria-label', this.tooltip);
                        }
                        this.selectedElementWidth = Dom.getSize(this.selectElement).width;
                        this.initEventListeners();
@@ -337,11 +337,6 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Toolbar/Select',
                },
 
                /**
-                * Css class applied when the select element is disabled
-                */
-               disabledClass: 'buttonDisabled',
-
-               /**
                 * Setting disabled/enabled by boolean.
                 *
                 * @param boolean disabled
@@ -351,10 +346,8 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Toolbar/Select',
                        this.disabled = disabled;
                        if (disabled) {
                                this.selectElement.setAttribute('disabled', 'true');
-                               Dom.addClass(this.selectElement, 'buttonDisabled');
                        } else {
                                this.selectElement.removeAttribute('disabled');
-                               Dom.removeClass(this.selectElement, this.disabledClass);
                        }
                },
 
index c34b73c..6cbed9c 100644 (file)
@@ -37,8 +37,10 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Toolbar/ToolbarText',
                 */
                render: function (container) {
                        this.el = document.createElement('div');
-                       Dom.addClass(this.el, 'x-form-item');
-                       Dom.addClass(this.el, 'x-form-item-label');
+                       Dom.addClass(this.el, 'btn');
+                       Dom.addClass(this.el, 'btn-sm');
+                       Dom.addClass(this.el, 'btn-default');
+                       Dom.addClass(this.el, 'toolbar-text');
                        if (this.id) {
                                this.el.setAttribute('id', this.id);
                        }
@@ -50,8 +52,9 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Toolbar/ToolbarText',
                        }
                        if (typeof this.tooltip === 'string') {
                                this.el.setAttribute('title', this.tooltip);
+                               this.el.setAttribute('aria-label', this.tooltip);
                        }
-                       container.getEl().appendChild(this.el);
+                       container.appendChild(this.el);
                        this.initEventListeners();
                },
 
@@ -89,11 +92,6 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Toolbar/ToolbarText',
                },
 
                /**
-                * Css class applied when the item is disabled
-                */
-               disabledClass: 'buttonDisabled',
-
-               /**
                 * Setting disabled/enabled by boolean.
                 * @param boolean disabled
                 * @return void
@@ -101,9 +99,9 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Toolbar/ToolbarText',
                setDisabled: function(disabled){
                        this.disabled = disabled;
                        if (disabled) {
-                               Dom.addClass(this.el, this.disabledClass);
+                               this.el.setAttribute('disabled', 'disabled');
                        } else {
-                               Dom.removeClass(this.el, this.disabledClass);
+                               this.el.removeAttribute('disabled');
                        }
                },
 
index 78f0e7d..b5ad343 100644 (file)
        padding-bottom: 10px;
 }
 /* Selectors for the editor toolbar */
-.htmlarea .unselectable,
-.htmlarea .unselectable * {
-       user-select: none;
-       -o-user-select: none;
-       -ms-user-select: none;
-       -moz-user-select: -moz-none;
-       -webkit-user-select: none;
-       cursor: default;
-}
-.htmlarea .toolbar {
-       cursor: default;
-       margin: 0;
+.htmlarea .btn-toolbar {
        padding: 2px;
-       font-family: Verdana, Helvetica, Geneva, Arial, sans-serif;
-}
-.htmlarea .toolbar .tb-group {
-       clear:none;
-       float:left;
-       margin:1px 2px 0px 0px;
-       padding:0;
 }
-.htmlarea .toolbar .x-form-item {
-       float: left;
-       height: 26px;
-       margin: 0 2px;
+.htmlarea .btn-toolbar .btn-group {
+       margin: 1px 3px;
 }
-.htmlarea .toolbar .toolbar-text .x-form-item-label {
-       display: block;
-       font-weight: normal;
-       width: auto;
+.htmlarea .btn-toolbar .btn {
+       display: inline-block;
+       padding: 0;
 }
-.htmlarea .toolbar .button {
+.htmlarea .btn-toolbar .btn-sm {
        background-color: transparent;
-       border-style: solid;
-       border-width: 1px;
-       border-color: transparent;
-       border-collapse: separate;
-       border-radius: 2px;
-       cursor: pointer;
-       float: left;
-       height: 23px;
-       margin: 0 0 3px 0;
+       height: 24px;
+       margin: 1px 0;
+       padding: 2px 0 0 2px;
        width: 24px;
 }
-.htmlarea .toolbar .button button {
-       background-color: transparent;
-       border: 0 none;
-       cursor: pointer;
-       display: block;
-       -moz-outline: 0 none;
-       outline: 0 none;
+.htmlarea .btn-toolbar .btn-sm + .btn-sm {
+       border-left: 0;
 }
-.htmlarea .toolbar .btn-text {
+.htmlarea .btn-toolbar .btn-sm:not(:last-child) {
+       border-right: 0;
+}
+.htmlarea .btn-toolbar .btn-icon {
        background-image: url("images/sprites/actions.png");
-       background-position: center;
        background-repeat: no-repeat;
-       width: 20px;
+       display: inline-block;
        height: 18px;
-       margin: 2px 0 1px 2px;
+       width: 20px;
 }
-.htmlarea .toolbar .buttonHover {
-       background-color: #DCDCDC;
+.htmlarea .btn-toolbar .btn-sm:hover {
+       background-color: #dcdcdc;
 }
-.htmlarea .toolbar .buttonActive,
-.htmlarea-context-menu .buttonActive {
+.htmlarea .btn-toolbar .btn-active,
+.htmlarea-context-menu .btn-active {
        border-style: solid;
        border-width: 1px;
        border-color: #C5C5D5 #C5C5D5 #C5C5D5 #C5C5D5;
-       background-color: ButtonHighlight;
+       background-color: #ffffff;
        text-decoration: none;
        opacity: 1.00;
 }
-.htmlarea .toolbar .indicator {
-       background-color: white;
-       border: 1px solid ButtonShadow;
+.htmlarea .btn-toolbar .toolbar-text {
+       width: auto;
+}
+.htmlarea .btn-toolbar .indicator {
        cursor: default;
-       float: left;
-       height: 18px;
-       overflow: hidden;
-       margin: 3px 1px 5px 1px;
-       padding: 0 2px 4px 0;
+       height: 24px;
        text-align: center;
        width: 24px;
 }
-.htmlarea .toolbar .buttonDisabled {
-       cursor: default;
-       filter: gray() alpha(opacity=25);
-       -moz-opacity: 0.25;
-       opacity: 0.25;
-}
-.htmlarea .toolbar .separator {
-       background-color: rgb(115, 115, 115);
-       float: left;
-       height: 18px;
-       margin: 3px 2px 5px 2px;
-       width: 1px;
-}
-.htmlarea .toolbar .space {
+.htmlarea .btn-toolbar .space {
        background-color: transparent;
        border-style: none;
+       display: block;
        float: left;
        height: 26px;
        margin: 0;
        padding: 0 1px;
        width: 2px;
 }
-.htmlarea .toolbar .space-clear-left {
+.htmlarea .btn-toolbar .space-clear-left {
        clear: left;
+       display: block;
        font-size: 0;
        height: 0;
        line-height: 0;
        overflow: hidden;
 }
-.htmlarea .toolbar .select {
-       height: 17px;
-}
-.htmlarea .toolbar select {
-       border: 1px solid #c7c7c7;
-       border-radius: 2px;
+.htmlarea .btn-toolbar .form-group {
        display: inline-block;
-       height: 22px !important;
-       margin: 0 0 4px 0;
-       padding: 2px 1px;
+       height: 26px;
+       margin: 0 2px 0px 2px;
 }
-.htmlarea .toolbar select option {
-       padding: 2px;
+.htmlarea .btn-toolbar .form-label {
+       display: inline-block;
+       font-weight: normal;
+       height: 24px;
+       margin: 0;
+       padding: 0 2px;
+       width: auto;
 }
-.htmlarea .toolbar .x-form-field-wrap .x-form-trigger {
-       right: 0;
+.htmlarea .btn-toolbar .form-control {
+       border-color: #cccccc;
+       display: inline-block;
+       height: 24px;
+       margin: 0;
+       padding: 2px 1px;
 }
-.htmlarea .toolbar .select, .htmlarea .toolbar .select:hover, .htmlarea .toolbar .select:active {
-       background-color:Window;
+.htmlarea .btn-toolbar .btn-sm[disabled] .btn-icon,
+.htmlarea .btn-toolbar .form-control[disabled],
+.htmlarea .btn-toolbar .toolbar-text[disabled] {
+       cursor: default;
+       filter: gray() alpha(opacity=40);
+       -moz-opacity: 0.4;
+       opacity: 0.4;
 }
-.htmlarea .toolbar .select .buttonDisabled {
-       color:GrayText;
-       background-color:#EFEFF4;
+.htmlarea .btn-toolbar .form-control option {
+       padding: 2px;
 }
 .htmlarea .editorIframe {
        clear:both;