From 6f212e8990355efc8c701060dd8aada81e00f8f8 Mon Sep 17 00:00:00 2001 From: Iliyan Peychev Date: Mon, 29 Jun 2015 17:30:25 +0200 Subject: [PATCH] Remove "alloy-editor" prefix from the styles Fixes #264 --- .../react/src/assets/font/font-template.css | 4 +- .../src/assets/sass/alloy-editor-core.scss | 458 +++++++++--------- src/ui/react/src/assets/sass/arrow-box.scss | 68 +-- .../sass/skin/ocean/alloy-editor-skin.scss | 116 ++--- .../components/base/button-state-classes.js | 4 +- .../src/components/base/widget-position.js | 2 +- .../src/components/buttons/button-bold.jsx | 4 +- .../buttons/button-camera-image.jsx | 6 +- .../src/components/buttons/button-camera.jsx | 4 +- .../src/components/buttons/button-code.jsx | 4 +- .../buttons/button-command-list-item.jsx | 4 +- .../buttons/button-commands-list.jsx | 6 +- .../src/components/buttons/button-h1.jsx | 4 +- .../src/components/buttons/button-h2.jsx | 4 +- .../src/components/buttons/button-hline.jsx | 4 +- .../buttons/button-image-align-left.jsx | 4 +- .../buttons/button-image-align-right.jsx | 4 +- .../src/components/buttons/button-image.jsx | 4 +- .../src/components/buttons/button-italic.jsx | 4 +- .../components/buttons/button-link-edit.jsx | 16 +- .../src/components/buttons/button-link.jsx | 4 +- .../src/components/buttons/button-ol.jsx | 4 +- .../buttons/button-paragraph-align-left.jsx | 4 +- .../buttons/button-paragraph-align-right.jsx | 4 +- .../buttons/button-paragraph-center.jsx | 4 +- .../buttons/button-paragraph-justify.jsx | 4 +- .../src/components/buttons/button-quote.jsx | 4 +- .../buttons/button-remove-format.jsx | 4 +- .../src/components/buttons/button-strike.jsx | 4 +- .../buttons/button-styles-list-header.jsx | 2 +- .../button-styles-list-item-remove.jsx | 2 +- .../buttons/button-styles-list-item.jsx | 2 +- .../components/buttons/button-styles-list.jsx | 6 +- .../src/components/buttons/button-styles.jsx | 10 +- .../components/buttons/button-subscript.jsx | 4 +- .../components/buttons/button-superscript.jsx | 4 +- .../components/buttons/button-table-cell.jsx | 6 +- .../buttons/button-table-column.jsx | 6 +- .../components/buttons/button-table-edit.jsx | 14 +- .../buttons/button-table-heading.jsx | 10 +- .../buttons/button-table-remove.jsx | 4 +- .../components/buttons/button-table-row.jsx | 6 +- .../src/components/buttons/button-table.jsx | 4 +- .../src/components/buttons/button-twitter.jsx | 6 +- .../src/components/buttons/button-ul.jsx | 4 +- .../components/buttons/button-underline.jsx | 4 +- src/ui/react/src/components/main.jsx | 4 +- .../src/components/toolbars/toolbar-add.jsx | 12 +- .../components/toolbars/toolbar-styles.jsx | 6 +- src/ui/react/test/button-bold.jsx | 2 +- src/ui/react/test/button-table-cell.jsx | 4 +- src/ui/react/test/button-table-column.jsx | 4 +- src/ui/react/test/button-table-heading.jsx | 4 +- src/ui/react/test/button-table-row.jsx | 4 +- src/ui/react/test/button-table.jsx | 4 +- src/ui/react/test/util/utils.js | 2 +- 56 files changed, 453 insertions(+), 447 deletions(-) diff --git a/src/ui/react/src/assets/font/font-template.css b/src/ui/react/src/assets/font/font-template.css index bdb9c56da3..e1aefd991f 100644 --- a/src/ui/react/src/assets/font/font-template.css +++ b/src/ui/react/src/assets/font/font-template.css @@ -9,7 +9,7 @@ font-style: normal; } -[class^="alloy-editor-icon-"], [class*=" alloy-editor-icon-"] { +[class^="icon-"], [class*=" icon-"] { font-family: '<%= fontName %>'; speak: none; font-size: 20px; @@ -25,7 +25,7 @@ } <% _.each(glyphs, function(glyph) { %> -.alloy-editor-icon-<%= glyph.name %>:before { +.icon-<%= glyph.name %>:before { content: "\<%= glyph.unicode %>"; } <% }); %> \ No newline at end of file diff --git a/src/ui/react/src/assets/sass/alloy-editor-core.scss b/src/ui/react/src/assets/sass/alloy-editor-core.scss index 7a9267ddb9..229dbef58f 100644 --- a/src/ui/react/src/assets/sass/alloy-editor-core.scss +++ b/src/ui/react/src/assets/sass/alloy-editor-core.scss @@ -8,308 +8,310 @@ $base-spacing: 10px; $IE9-ONLY: \9; -.alloy-editor-container, [class*=alloy-editor-container-] { - @include align-items(center); - @include display(inline-flex); - @include flex-direction(row); - @include flex-wrap(wrap); +.alloy-editor-ui { + .container, [class^=container-] { + @include align-items(center); + @include display(inline-flex); + @include flex-direction(row); + @include flex-wrap(wrap); + + box-sizing: border-box; + + *, *:after, *:before { + box-sizing: inherit; + color: inherit; + } + + input, textarea, keygen, select, button { + color: initial; + } - box-sizing: border-box; + .container, [class^=container-], .button, .toolbar-element, label { + font-size: $base-font-size; + margin: 0; + position: relative; + + &:not(:last-child) { + margin-right: $base-spacing; + } + } + } - *, *:after, *:before { - box-sizing: inherit; - color: inherit; + .has-dropdown { + display: block; + float: left $IE9-ONLY; + width: $base-button-width; } - input, textarea, keygen, select, button { - color: initial; + IE10-PLUS::-ms-reveal, [class^=toolbar] { + height: $base-button-height; + box-sizing: content-box; } - .alloy-editor-container, [class*=alloy-editor-container-], .alloy-editor-button, .alloy-editor-toolbar-element, label { - font-size: $base-font-size; - margin: 0; - position: relative; + .toolbar, [class^=toolbar-] { + line-height: 1; + padding: $base-spacing; + position: absolute; - &:not(:last-child) { - margin-right: $base-spacing; + input, textarea, keygen, select, button { + font-size: $base-font-size; } - } -} -.alloy-editor-has-dropdown { - display: block; - float: left $IE9-ONLY; - width: $base-button-width; -} + &.toolbar-transition { + @include transition-property (height, left, opacity, top); + @include transition-duration (0.15s); + @include transition-timing-function (ease-out); + } -IE10-PLUS::-ms-reveal, [class*=alloy-editor-toolbar] { - height: $base-button-height; - box-sizing: content-box; -} + .button, .toolbar-element { + border-width: 0; + color: inherit; + cursor: pointer; + margin: 0; + padding: 0; + + &:hover, &:focus { + &:disabled, &.button-disabled { + color: inherit; + } + } -.alloy-editor-toolbar, [class*=alloy-editor-toolbar-] { - line-height: 1; - padding: $base-spacing; - position: absolute; + &:disabled, &.button-disabled { + cursor: auto; + opacity: 0.3; + } + } - input, textarea, keygen, select, button { - font-size: $base-font-size; + .button { + height: $base-button-height; + width: $base-button-width; + } } - &.alloy-editor-toolbar-transition { - @include transition-property (height, left, opacity, top); - @include transition-duration (0.15s); - @include transition-timing-function (ease-out); - } + .dropdown, [class^=dropdown-] { + left: 0; + padding: $base-padding; + position: absolute; + top: $base-button-height + $base-spacing; - .alloy-editor-button, .alloy-editor-toolbar-element { - border-width: 0; - color: inherit; - cursor: pointer; - margin: 0; - padding: 0; + .list-header { + display: inline-block; + margin: 3 * $base-padding 0 0 0; - &:hover, &:focus { - &:disabled, &.alloy-editor-button-disabled { - color: inherit; + &:first-child { + margin-top: $base-padding; } } - &:disabled, &.alloy-editor-button-disabled { - cursor: auto; - opacity: 0.3; - } - } + .toolbar-element { + * { + display: inline; + } - .alloy-editor-button { - height: $base-button-height; - width: $base-button-width; - } -} + &[class^=icon-]:before { + padding-right: $base-padding; + vertical-align: middle; + } -.alloy-editor-dropdown, [class*=alloy-editor-dropdown-] { - left: 0; - padding: $base-padding; - position: absolute; - top: $base-button-height + $base-spacing; + height: 3em; + margin-right: 0; + min-width: 100%; + overflow: hidden; + padding-left: 2 * $base-padding; + text-align: left; + text-overflow: ellipsis; + white-space: nowrap; + width: auto; + } - .alloy-editor-list-header { - display: inline-block; - margin: 3 * $base-padding 0 0 0; + .listbox { + list-style: none; + margin: 0; + padding: 0; + } - &:first-child { - margin-top: $base-padding; + * { + display: block $IE9-ONLY; } } - .alloy-editor-toolbar-element { + .container-edit-link, .container-edit-table { + height: $base-button-height $IE9-ONLY; + * { - display: inline; + float: left $IE9-ONLY; } - &[class*=alloy-editor-icon-]:before { - padding-right: $base-padding; - vertical-align: middle; + label { + position: relative $IE9-ONLY; + top: 50% $IE9-ONLY; + transform: translateY(-50%) $IE9-ONLY; } - height: 3em; - margin-right: 0; - min-width: 100%; - overflow: hidden; - padding-left: 2 * $base-padding; - text-align: left; - text-overflow: ellipsis; - white-space: nowrap; - width: auto; - } - - .alloy-editor-listbox { - list-style: none; - margin: 0; - padding: 0; - } - - * { - display: block $IE9-ONLY; + IE10-PLUS::-ms-reveal, label { + top: 0; + transform: translateY(0); + } } -} - -.alloy-editor-container-edit-link, .alloy-editor-container-edit-table { - height: $base-button-height $IE9-ONLY; - * { - float: left $IE9-ONLY; - } + .container-input { + @include flex-wrap(nowrap); - label { - position: relative $IE9-ONLY; - top: 50% $IE9-ONLY; - transform: translateY(-50%) $IE9-ONLY; - } + padding-left: 4px; + width: 13 * $base-font-size; - IE10-PLUS::-ms-reveal, label { - top: 0; - transform: translateY(0); - } -} - -.alloy-editor-container-input { - @include flex-wrap(nowrap); + &.medium { + width: 7 * $base-font-size; + } - padding-left: 4px; - width: 13 * $base-font-size; + &.small { + width: 3 * $base-font-size; + } - &.medium { - width: 7 * $base-font-size; - } + [class^=icon-] { + font-size: $base-button-height; + line-height: $base-button-height; + } - &.small { - width: 3 * $base-font-size; - } + input, .input { + @include flex(1); - [class*=alloy-editor-icon-] { - font-size: $base-button-height; - line-height: $base-button-height; - } + border-width: 0; + font-family: inherit; + height: auto; + line-height: normal; + margin: 0; + max-width: 100%; + outline: none; + padding: 0; - input, .alloy-editor-input { - @include flex(1); + &::-ms-clear { + display: none; + } - border-width: 0; - font-family: inherit; - height: auto; - line-height: normal; - margin: 0; - max-width: 100%; - outline: none; - padding: 0; + display: inline-block $IE9-ONLY; + margin-left: -$base-padding $IE9-ONLY; + margin-top: $base-padding $IE9-ONLY; + padding-left: $base-padding $IE9-ONLY; + width: 13 * $base-font-size - $base-button-width $IE9-ONLY; - &::-ms-clear { - display: none; + &:focus { + box-shadow: none; + } } - display: inline-block $IE9-ONLY; - margin-left: -$base-padding $IE9-ONLY; - margin-top: $base-padding $IE9-ONLY; - padding-left: $base-padding $IE9-ONLY; - width: 13 * $base-font-size - $base-button-width $IE9-ONLY; - - &:focus { - box-shadow: none; + .icon-remove { + float: right $IE9-ONLY; } } - .alloy-editor-icon-remove { - float: right $IE9-ONLY; - } -} - -.alloy-editor-container-link { - padding: 2px 4px; - - a, .alloy-editor-link { - color: inherit; - display: inline-block; - font-size: $base-font-size; - font-weight: 300; - overflow: hidden; - max-width: 500px; - text-decoration: none; - text-overflow: ellipsis; - vertical-align: middle; - white-space: nowrap; - - &:hover, &:focus { - text-decoration: underline; - } + .container-link { + padding: 2px 4px; - &:before { - content: '\E020'; + a, .link { + color: inherit; display: inline-block; - font-family: 'alloyeditor'; - margin-right: 4px; + font-size: $base-font-size; + font-weight: 300; + overflow: hidden; + max-width: 500px; + text-decoration: none; + text-overflow: ellipsis; vertical-align: middle; - } + white-space: nowrap; - } -} + &:hover, &:focus { + text-decoration: underline; + } -.alloy-editor-container-dropdown, [class*=alloy-editor-container-dropdown-] { - float: left $IE9-ONLY; - width: 5 * $base-button-width; + &:before { + content: '\E020'; + display: inline-block; + font-family: 'alloyeditor'; + margin-right: 4px; + vertical-align: middle; + } - > .alloy-editor-toolbar-element { + } + } + + .container-dropdown, [class^=container-dropdown-] { float: left $IE9-ONLY; - height: $base-button-height; - text-align: left; - width: 100%; + width: 5 * $base-button-width; - .alloy-editor-container { - height: 100% $IE9-ONLY; + > .toolbar-element { + float: left $IE9-ONLY; + height: $base-button-height; + text-align: left; width: 100%; - .alloy-editor-icon-arrow { - @include transform(rotate(90deg)); + .container { + height: 100% $IE9-ONLY; + width: 100%; - float: right $IE9-ONLY; - } + .icon-arrow { + @include transform(rotate(90deg)); - .alloy-editor-container-dropdown-selected-item { - @include flex(1); + float: right $IE9-ONLY; + } - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + .container-dropdown-selected-item { + @include flex(1); - position: relative $IE9-ONLY; - top: 50% $IE9-ONLY; - transform: translateY(-50%) $IE9-ONLY; - } + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + position: relative $IE9-ONLY; + top: 50% $IE9-ONLY; + transform: translateY(-50%) $IE9-ONLY; + } - IE10-PLUS::-ms-reveal, .alloy-editor-container-dropdown-selected-item { - top: 0; - transform: translateY(0); + IE10-PLUS::-ms-reveal, .container-dropdown-selected-item { + top: 0; + transform: translateY(0); + } } } } -} -.alloy-editor-container-dropdown-xl { - width: 8 * $base-button-width; -} + .container-dropdown-xl { + width: 8 * $base-button-width; + } -.alloy-editor-twitter-link { - padding: 0 5px; + .twitter-link { + padding: 0 5px; - &:after { - content: '\E01E'; - display: inline-block; - font-family: alloyeditor; - margin-left: 4px; - vertical-align: middle; + &:after { + content: '\E01E'; + display: inline-block; + font-family: alloyeditor; + margin-left: 4px; + vertical-align: middle; + } } -} -.alloy-editor-placeholder:empty:not(:focus):before { - content: attr(data-placeholder); -} + .camera { + align-items: center; + display: flex; + flex-flow: column; + justify-content: center; -.alloy-editor-camera { - align-items: center; - display: flex; - flex-flow: column; - justify-content: center; + .camera-canvas { + left: -10000px; + position: absolute; + top: -10000px; + } - .alloy-editor-camera-canvas { - left: -10000px; - position: absolute; - top: -10000px; + .camera-shoot { + margin-top: 10px; + } } +} - .alloy-editor-camera-shoot { - margin-top: 10px; - } +.alloy-editor-placeholder:empty:not(:focus):before { + content: attr(data-placeholder); } .alloy-editor-sr-only { diff --git a/src/ui/react/src/assets/sass/arrow-box.scss b/src/ui/react/src/assets/sass/arrow-box.scss index 3aed4f1c02..637f9aeeab 100644 --- a/src/ui/react/src/assets/sass/arrow-box.scss +++ b/src/ui/react/src/assets/sass/arrow-box.scss @@ -3,50 +3,52 @@ $arrow-height: 4px; $arrow-width: 10px; -.alloy-editor-arrow-box { - &:after { - content: ''; - margin: auto; - position: absolute; - } - - &.alloy-editor-arrow-box-bottom { +.alloy-editor-ui { + .alloy-editor-arrow-box { &:after { - @include triangle($arrow-width $arrow-height, currentColor, down); + content: ''; + margin: auto; + position: absolute; + } - left: 0; - right: 0; - top: 100%; + &.alloy-editor-arrow-box-bottom { + &:after { + @include triangle($arrow-width $arrow-height, currentColor, down); + + left: 0; + right: 0; + top: 100%; + } } - } - &.alloy-editor-arrow-box-top { - &:after { - @include triangle($arrow-width $arrow-height, currentColor, up); + &.alloy-editor-arrow-box-top { + &:after { + @include triangle($arrow-width $arrow-height, currentColor, up); - left: 0; - right: 0; - top: -$arrow-height; + left: 0; + right: 0; + top: -$arrow-height; + } } - } - &.alloy-editor-arrow-box-left { - &:after { - @include triangle($arrow-width $arrow-height, currentColor, left); + &.alloy-editor-arrow-box-left { + &:after { + @include triangle($arrow-width $arrow-height, currentColor, left); - left: -$arrow-height; - top: 0; - bottom: 0; + left: -$arrow-height; + top: 0; + bottom: 0; + } } - } - &.alloy-editor-arrow-box-right { - &:after { - @include triangle($arrow-width $arrow-height, currentColor, right); + &.alloy-editor-arrow-box-right { + &:after { + @include triangle($arrow-width $arrow-height, currentColor, right); - right: -$arrow-height; - top: 0; - bottom: 0; + right: -$arrow-height; + top: 0; + bottom: 0; + } } } } \ No newline at end of file diff --git a/src/ui/react/src/assets/sass/skin/ocean/alloy-editor-skin.scss b/src/ui/react/src/assets/sass/skin/ocean/alloy-editor-skin.scss index 5a78815b0d..598b303833 100644 --- a/src/ui/react/src/assets/sass/skin/ocean/alloy-editor-skin.scss +++ b/src/ui/react/src/assets/sass/skin/ocean/alloy-editor-skin.scss @@ -8,81 +8,83 @@ } } -.alloy-editor-toolbar, [class*=alloy-editor-toolbar-] { - background-color: $base-color; - border-radius: 4px; - color: $toolbar-color; - font-family: $font-family; - - &.alloy-editor-arrow-box:after { - color: $base-color; - } - - .alloy-editor-button, .alloy-editor-toolbar-element { - background-color: transparent; - - &:hover { - color: $button-color; +.alloy-editor-ui { + .toolbar, [class^=toolbar-] { + background-color: $base-color; + border-radius: 4px; + color: $toolbar-color; + font-family: $font-family; + + &.alloy-editor-arrow-box:after { + color: $base-color; } - &.alloy-editor-button-pressed { - background-color: $button-color; + .button, .toolbar-element { + background-color: transparent; &:hover { - background-color: $button-pressed-hover-color; - color: inherit; + color: $button-color; } - } - &.alloy-editor-button-disabled { - opacity: 0.3; + &.button-pressed { + background-color: $button-color; + + &:hover { + background-color: $button-pressed-hover-color; + color: inherit; + } + } + + &.button-disabled { + opacity: 0.3; + } } - } - .alloy-editor-container-input { - background-color: $input-background-color; + .container-input { + background-color: $input-background-color; - [class*=alloy-editor-icon-] { - color: $input-icon-color; - opacity: 0.4; + [class^=icon-] { + color: $input-icon-color; + opacity: 0.4; + } } } -} -.alloy-editor-dropdown, [class*=alloy-editor-dropdown-] { - background-color: $dropdown-background-color; - border: 1px solid $dropdown-border-color; - border-radius: 0 0 4px 4px; - box-shadow: 0 2px 4px $dropdown-border-color; - color: $dropdown-color; - - .alloy-editor-list-header { - color: $dropdown-list-header-color; - font-size: small; - font-style: italic; + .dropdown, [class^=dropdown-] { + background-color: $dropdown-background-color; + border: 1px solid $dropdown-border-color; + border-radius: 0 0 4px 4px; + box-shadow: 0 2px 4px $dropdown-border-color; + color: $dropdown-color; + + .list-header { + color: $dropdown-list-header-color; + font-size: small; + font-style: italic; + } } -} -.alloy-editor-toolbar-add { - border-radius: 24px; - padding: 0; + .toolbar-add { + border-radius: 24px; + padding: 0; - &:hover, &:focus { - opacity: 0.7; - } - - .alloy-editor-button-add { &:hover, &:focus { - color: $button-add-color; + opacity: 0.7; } - .alloy-editor-icon-add { - font-size: 12px; - line-height: 24px; + .button-add { + &:hover, &:focus { + color: $button-add-color; + } + + .icon-add { + font-size: 12px; + line-height: 24px; + } } } -} -.alloy-editor-twitter-link { - background-color: $twitter-link-background-color; -} + .twitter-link { + background-color: $twitter-link-background-color; + } +} \ No newline at end of file diff --git a/src/ui/react/src/components/base/button-state-classes.js b/src/ui/react/src/components/base/button-state-classes.js index 435289445a..931d3b3334 100644 --- a/src/ui/react/src/components/base/button-state-classes.js +++ b/src/ui/react/src/components/base/button-state-classes.js @@ -24,12 +24,12 @@ // Check for active state if (AlloyEditor.Lang.isFunction(this.isActive) && this.isActive()) { - stateClasses += 'alloy-editor-button-pressed'; + stateClasses += 'button-pressed'; } // Check for disabled state if (AlloyEditor.Lang.isFunction(this.isDisabled) && this.isDisabled()) { - stateClasses += ' alloy-editor-button-disabled'; + stateClasses += ' button-disabled'; } return stateClasses; diff --git a/src/ui/react/src/components/base/widget-position.js b/src/ui/react/src/components/base/widget-position.js index 6ce3a051fb..3c50ce3a8d 100644 --- a/src/ui/react/src/components/base/widget-position.js +++ b/src/ui/react/src/components/base/widget-position.js @@ -129,7 +129,7 @@ domElement.removeClass('alloy-editor-invisible'); this._animate(function() { - domElement.addClass('alloy-editor-toolbar-transition alloy-editor-visible'); + domElement.addClass('toolbar-transition alloy-editor-visible'); domElement.setStyles({ left: endPoint[0], top: endPoint[1], diff --git a/src/ui/react/src/components/buttons/button-bold.jsx b/src/ui/react/src/components/buttons/button-bold.jsx index 652cdb5246..8c42e1fa21 100644 --- a/src/ui/react/src/components/buttons/button-bold.jsx +++ b/src/ui/react/src/components/buttons/button-bold.jsx @@ -72,11 +72,11 @@ * @return {Object} The content which should be rendered. */ render: function() { - var cssClass = 'alloy-editor-button ' + this.getStateClasses(); + var cssClass = 'button ' + this.getStateClasses(); return ( ); } diff --git a/src/ui/react/src/components/buttons/button-camera-image.jsx b/src/ui/react/src/components/buttons/button-camera-image.jsx index c315f548c7..c5883cf356 100644 --- a/src/ui/react/src/components/buttons/button-camera-image.jsx +++ b/src/ui/react/src/components/buttons/button-camera-image.jsx @@ -71,10 +71,10 @@ }, this._handleStreamSuccess, this._handleStreamError); return ( -
+
- - + +
); }, diff --git a/src/ui/react/src/components/buttons/button-camera.jsx b/src/ui/react/src/components/buttons/button-camera.jsx index ff553ce36e..2ca6e74272 100644 --- a/src/ui/react/src/components/buttons/button-camera.jsx +++ b/src/ui/react/src/components/buttons/button-camera.jsx @@ -65,8 +65,8 @@ navigator.msGetUserMedia); return ( - ); } diff --git a/src/ui/react/src/components/buttons/button-code.jsx b/src/ui/react/src/components/buttons/button-code.jsx index ac8ddbd117..60d30ff6e5 100644 --- a/src/ui/react/src/components/buttons/button-code.jsx +++ b/src/ui/react/src/components/buttons/button-code.jsx @@ -71,11 +71,11 @@ * @return {Object} The content which should be rendered. */ render: function() { - var cssClass = 'alloy-editor-button ' + this.getStateClasses(); + var cssClass = 'button ' + this.getStateClasses(); return ( ); } diff --git a/src/ui/react/src/components/buttons/button-command-list-item.jsx b/src/ui/react/src/components/buttons/button-command-list-item.jsx index 41e62bfb3a..d6e354a244 100644 --- a/src/ui/react/src/components/buttons/button-command-list-item.jsx +++ b/src/ui/react/src/components/buttons/button-command-list-item.jsx @@ -59,10 +59,10 @@ * @return {String} The class name of the Widget. */ _getClassName: function() { - var className = 'alloy-editor-toolbar-element'; + var className = 'toolbar-element'; if (this.props.icon) { - className += ' alloy-editor-icon-' + this.props.icon; + className += ' icon-' + this.props.icon; } return className; diff --git a/src/ui/react/src/components/buttons/button-commands-list.jsx b/src/ui/react/src/components/buttons/button-commands-list.jsx index f673f939a7..2131888891 100644 --- a/src/ui/react/src/components/buttons/button-commands-list.jsx +++ b/src/ui/react/src/components/buttons/button-commands-list.jsx @@ -68,7 +68,7 @@ getDefaultProps: function() { return { circular: false, - descendants: '.alloy-editor-toolbar-element', + descendants: '.toolbar-element', keys: { dismiss: [27], dismissNext: [39], @@ -87,8 +87,8 @@ */ render: function() { return ( -
-
    +
    +
      {this._renderActions(this.props.commands)}
    diff --git a/src/ui/react/src/components/buttons/button-h1.jsx b/src/ui/react/src/components/buttons/button-h1.jsx index 8116ad188e..b37e6c2d28 100644 --- a/src/ui/react/src/components/buttons/button-h1.jsx +++ b/src/ui/react/src/components/buttons/button-h1.jsx @@ -71,11 +71,11 @@ * @return {Object} The content which should be rendered. */ render: function() { - var cssClass = 'alloy-editor-button ' + this.getStateClasses(); + var cssClass = 'button ' + this.getStateClasses(); return ( ); } diff --git a/src/ui/react/src/components/buttons/button-h2.jsx b/src/ui/react/src/components/buttons/button-h2.jsx index ba1a4d702f..6a4d6f45f9 100644 --- a/src/ui/react/src/components/buttons/button-h2.jsx +++ b/src/ui/react/src/components/buttons/button-h2.jsx @@ -72,11 +72,11 @@ * @return {Object} The content which should be rendered. */ render: function() { - var cssClass = 'alloy-editor-button ' + this.getStateClasses(); + var cssClass = 'button ' + this.getStateClasses(); return ( ); } diff --git a/src/ui/react/src/components/buttons/button-hline.jsx b/src/ui/react/src/components/buttons/button-hline.jsx index 9665b9b9a1..83dd0af579 100644 --- a/src/ui/react/src/components/buttons/button-hline.jsx +++ b/src/ui/react/src/components/buttons/button-hline.jsx @@ -72,8 +72,8 @@ */ render: function() { return ( - ); } diff --git a/src/ui/react/src/components/buttons/button-image-align-left.jsx b/src/ui/react/src/components/buttons/button-image-align-left.jsx index 8878cc79c2..4c698e86c5 100644 --- a/src/ui/react/src/components/buttons/button-image-align-left.jsx +++ b/src/ui/react/src/components/buttons/button-image-align-left.jsx @@ -74,11 +74,11 @@ * @return {Object} The content which should be rendered. */ render: function() { - var cssClass = 'alloy-editor-button ' + this.getStateClasses(); + var cssClass = 'button ' + this.getStateClasses(); return ( ); } diff --git a/src/ui/react/src/components/buttons/button-image-align-right.jsx b/src/ui/react/src/components/buttons/button-image-align-right.jsx index 391acb055d..5396372cb5 100644 --- a/src/ui/react/src/components/buttons/button-image-align-right.jsx +++ b/src/ui/react/src/components/buttons/button-image-align-right.jsx @@ -74,11 +74,11 @@ * @return {Object} The content which should be rendered. */ render: function() { - var cssClass = 'alloy-editor-button ' + this.getStateClasses(); + var cssClass = 'button ' + this.getStateClasses(); return ( ); } diff --git a/src/ui/react/src/components/buttons/button-image.jsx b/src/ui/react/src/components/buttons/button-image.jsx index eb39675036..63849f3b87 100644 --- a/src/ui/react/src/components/buttons/button-image.jsx +++ b/src/ui/react/src/components/buttons/button-image.jsx @@ -55,8 +55,8 @@ return (
    - diff --git a/src/ui/react/src/components/buttons/button-italic.jsx b/src/ui/react/src/components/buttons/button-italic.jsx index 2ce257a023..2689b88675 100644 --- a/src/ui/react/src/components/buttons/button-italic.jsx +++ b/src/ui/react/src/components/buttons/button-italic.jsx @@ -72,11 +72,11 @@ * @return {Object} The content which should be rendered. */ render: function() { - var cssClass = 'alloy-editor-button ' + this.getStateClasses(); + var cssClass = 'button ' + this.getStateClasses(); return ( ); } diff --git a/src/ui/react/src/components/buttons/button-link-edit.jsx b/src/ui/react/src/components/buttons/button-link-edit.jsx index 85aaf7a227..a7cdcc156a 100644 --- a/src/ui/react/src/components/buttons/button-link-edit.jsx +++ b/src/ui/react/src/components/buttons/button-link-edit.jsx @@ -68,16 +68,16 @@ }; return ( -
    - -
    - - +
    + +
    -
    ); diff --git a/src/ui/react/src/components/buttons/button-link.jsx b/src/ui/react/src/components/buttons/button-link.jsx index 91dc7a9591..023288ef73 100644 --- a/src/ui/react/src/components/buttons/button-link.jsx +++ b/src/ui/react/src/components/buttons/button-link.jsx @@ -69,7 +69,7 @@ * @return {Object} The content which should be rendered. */ render: function() { - var cssClass = 'alloy-editor-button ' + this.getStateClasses(); + var cssClass = 'button ' + this.getStateClasses(); if (this.props.renderExclusive) { return ( @@ -78,7 +78,7 @@ } else { return ( ); } diff --git a/src/ui/react/src/components/buttons/button-ol.jsx b/src/ui/react/src/components/buttons/button-ol.jsx index 761102149a..9c53e916e6 100644 --- a/src/ui/react/src/components/buttons/button-ol.jsx +++ b/src/ui/react/src/components/buttons/button-ol.jsx @@ -72,11 +72,11 @@ * @return {Object} The content which should be rendered. */ render: function() { - var cssClass = 'alloy-editor-button ' + this.getStateClasses(); + var cssClass = 'button ' + this.getStateClasses(); return ( ); } diff --git a/src/ui/react/src/components/buttons/button-paragraph-align-left.jsx b/src/ui/react/src/components/buttons/button-paragraph-align-left.jsx index 9f8c76241e..33680de35a 100644 --- a/src/ui/react/src/components/buttons/button-paragraph-align-left.jsx +++ b/src/ui/react/src/components/buttons/button-paragraph-align-left.jsx @@ -74,11 +74,11 @@ * @return {Object} The content which should be rendered. */ render: function() { - var cssClass = 'alloy-editor-button ' + this.getStateClasses(); + var cssClass = 'button ' + this.getStateClasses(); return ( ); } diff --git a/src/ui/react/src/components/buttons/button-paragraph-align-right.jsx b/src/ui/react/src/components/buttons/button-paragraph-align-right.jsx index 201ae1289e..5a549af17c 100644 --- a/src/ui/react/src/components/buttons/button-paragraph-align-right.jsx +++ b/src/ui/react/src/components/buttons/button-paragraph-align-right.jsx @@ -74,11 +74,11 @@ * @return {Object} The content which should be rendered. */ render: function() { - var cssClass = 'alloy-editor-button ' + this.getStateClasses(); + var cssClass = 'button ' + this.getStateClasses(); return ( ); } diff --git a/src/ui/react/src/components/buttons/button-paragraph-center.jsx b/src/ui/react/src/components/buttons/button-paragraph-center.jsx index 9090b13be8..2e82758ca8 100644 --- a/src/ui/react/src/components/buttons/button-paragraph-center.jsx +++ b/src/ui/react/src/components/buttons/button-paragraph-center.jsx @@ -74,11 +74,11 @@ * @return {Object} The content which should be rendered. */ render: function() { - var cssClass = 'alloy-editor-button ' + this.getStateClasses(); + var cssClass = 'button ' + this.getStateClasses(); return ( ); } diff --git a/src/ui/react/src/components/buttons/button-paragraph-justify.jsx b/src/ui/react/src/components/buttons/button-paragraph-justify.jsx index ed6f84c1ee..4e0097455d 100644 --- a/src/ui/react/src/components/buttons/button-paragraph-justify.jsx +++ b/src/ui/react/src/components/buttons/button-paragraph-justify.jsx @@ -74,11 +74,11 @@ * @return {Object} The content which should be rendered. */ render: function() { - var cssClass = 'alloy-editor-button ' + this.getStateClasses(); + var cssClass = 'button ' + this.getStateClasses(); return ( ); } diff --git a/src/ui/react/src/components/buttons/button-quote.jsx b/src/ui/react/src/components/buttons/button-quote.jsx index ee57acc970..900440f590 100644 --- a/src/ui/react/src/components/buttons/button-quote.jsx +++ b/src/ui/react/src/components/buttons/button-quote.jsx @@ -72,11 +72,11 @@ * @return {Object} The content which should be rendered. */ render: function() { - var cssClass = 'alloy-editor-button ' + this.getStateClasses(); + var cssClass = 'button ' + this.getStateClasses(); return ( ); } diff --git a/src/ui/react/src/components/buttons/button-remove-format.jsx b/src/ui/react/src/components/buttons/button-remove-format.jsx index cd89cafce6..7550a938fb 100644 --- a/src/ui/react/src/components/buttons/button-remove-format.jsx +++ b/src/ui/react/src/components/buttons/button-remove-format.jsx @@ -68,8 +68,8 @@ */ render: function() { return ( - ); } diff --git a/src/ui/react/src/components/buttons/button-strike.jsx b/src/ui/react/src/components/buttons/button-strike.jsx index e7a886f629..9d9e05f97c 100644 --- a/src/ui/react/src/components/buttons/button-strike.jsx +++ b/src/ui/react/src/components/buttons/button-strike.jsx @@ -72,11 +72,11 @@ * @return {Object} The content which should be rendered. */ render: function() { - var cssClass = 'alloy-editor-button ' + this.getStateClasses(); + var cssClass = 'button ' + this.getStateClasses(); return ( ); } diff --git a/src/ui/react/src/components/buttons/button-styles-list-header.jsx b/src/ui/react/src/components/buttons/button-styles-list-header.jsx index 48d15dc1e0..ffc311af94 100644 --- a/src/ui/react/src/components/buttons/button-styles-list-header.jsx +++ b/src/ui/react/src/components/buttons/button-styles-list-header.jsx @@ -16,7 +16,7 @@ render: function() { if (this.props.styles && this.props.styles.length) { return ( - {this.props.name} + {this.props.name} ); } else { return null; diff --git a/src/ui/react/src/components/buttons/button-styles-list-item-remove.jsx b/src/ui/react/src/components/buttons/button-styles-list-item-remove.jsx index a8581b4cc2..19212735e2 100644 --- a/src/ui/react/src/components/buttons/button-styles-list-item-remove.jsx +++ b/src/ui/react/src/components/buttons/button-styles-list-item-remove.jsx @@ -74,7 +74,7 @@ render: function() { return (
  • - +
    • ); }, diff --git a/src/ui/react/src/components/buttons/button-styles-list-item.jsx b/src/ui/react/src/components/buttons/button-styles-list-item.jsx index 3ec545e0ef..04676ef28b 100644 --- a/src/ui/react/src/components/buttons/button-styles-list-item.jsx +++ b/src/ui/react/src/components/buttons/button-styles-list-item.jsx @@ -55,7 +55,7 @@ // We need to use dangerouselySetInnterHTML since we're not in control of the style // preview that is generated by CKEditor. return ( - + ); }, diff --git a/src/ui/react/src/components/buttons/button-styles-list.jsx b/src/ui/react/src/components/buttons/button-styles-list.jsx index 41ca3c90c3..a3a2408b8a 100644 --- a/src/ui/react/src/components/buttons/button-styles-list.jsx +++ b/src/ui/react/src/components/buttons/button-styles-list.jsx @@ -71,7 +71,7 @@ getDefaultProps: function() { return { circular: false, - descendants: '.alloy-editor-toolbar-element', + descendants: '.toolbar-element', keys: { dismiss: [27], dismissNext: [39], @@ -90,8 +90,8 @@ */ render: function() { return ( -
    -
      +
      +
        diff --git a/src/ui/react/src/components/buttons/button-styles.jsx b/src/ui/react/src/components/buttons/button-styles.jsx index 08a953c56e..c11a474093 100644 --- a/src/ui/react/src/components/buttons/button-styles.jsx +++ b/src/ui/react/src/components/buttons/button-styles.jsx @@ -91,11 +91,11 @@ } return ( -
        - {buttonStylesList} diff --git a/src/ui/react/src/components/buttons/button-subscript.jsx b/src/ui/react/src/components/buttons/button-subscript.jsx index 2c061f35f8..f84213a04b 100644 --- a/src/ui/react/src/components/buttons/button-subscript.jsx +++ b/src/ui/react/src/components/buttons/button-subscript.jsx @@ -72,11 +72,11 @@ * @return {Object} The content which should be rendered. */ render: function() { - var cssClass = 'alloy-editor-button ' + this.getStateClasses(); + var cssClass = 'button ' + this.getStateClasses(); return ( ); } diff --git a/src/ui/react/src/components/buttons/button-superscript.jsx b/src/ui/react/src/components/buttons/button-superscript.jsx index 7258d7e87d..6ec8dba3f0 100644 --- a/src/ui/react/src/components/buttons/button-superscript.jsx +++ b/src/ui/react/src/components/buttons/button-superscript.jsx @@ -72,11 +72,11 @@ * @return {Object} The content which should be rendered. */ render: function() { - var cssClass = 'alloy-editor-button ' + this.getStateClasses(); + var cssClass = 'button ' + this.getStateClasses(); return ( ); } diff --git a/src/ui/react/src/components/buttons/button-table-cell.jsx b/src/ui/react/src/components/buttons/button-table-cell.jsx index 9ad869d446..b46fc78c4a 100644 --- a/src/ui/react/src/components/buttons/button-table-cell.jsx +++ b/src/ui/react/src/components/buttons/button-table-cell.jsx @@ -81,9 +81,9 @@ } return ( -
        - {buttonCommandsList}
        diff --git a/src/ui/react/src/components/buttons/button-table-column.jsx b/src/ui/react/src/components/buttons/button-table-column.jsx index e2924be138..f6234063a6 100644 --- a/src/ui/react/src/components/buttons/button-table-column.jsx +++ b/src/ui/react/src/components/buttons/button-table-column.jsx @@ -81,9 +81,9 @@ } return ( -
        - {buttonCommandsList}
        diff --git a/src/ui/react/src/components/buttons/button-table-edit.jsx b/src/ui/react/src/components/buttons/button-table-edit.jsx index f0fd447870..b6de501ab0 100644 --- a/src/ui/react/src/components/buttons/button-table-edit.jsx +++ b/src/ui/react/src/components/buttons/button-table-edit.jsx @@ -150,19 +150,19 @@ var colsId = time + 'cols'; return ( -
        +
        -
        - +
        +
        -
        - +
        +
        -
        ); diff --git a/src/ui/react/src/components/buttons/button-table-heading.jsx b/src/ui/react/src/components/buttons/button-table-heading.jsx index f993aa5e4d..8ab9f86e20 100644 --- a/src/ui/react/src/components/buttons/button-table-heading.jsx +++ b/src/ui/react/src/components/buttons/button-table-heading.jsx @@ -85,11 +85,11 @@ var activeHeadingLabel = AlloyEditor.Strings['headers' + activeHeading]; return ( -
        - {buttonCommandsList} diff --git a/src/ui/react/src/components/buttons/button-table-remove.jsx b/src/ui/react/src/components/buttons/button-table-remove.jsx index fc78bdfca3..148f8aaf1b 100644 --- a/src/ui/react/src/components/buttons/button-table-remove.jsx +++ b/src/ui/react/src/components/buttons/button-table-remove.jsx @@ -52,8 +52,8 @@ */ render: function() { return ( - ); }, diff --git a/src/ui/react/src/components/buttons/button-table-row.jsx b/src/ui/react/src/components/buttons/button-table-row.jsx index 77ff832a30..74b0f4b093 100644 --- a/src/ui/react/src/components/buttons/button-table-row.jsx +++ b/src/ui/react/src/components/buttons/button-table-row.jsx @@ -81,9 +81,9 @@ } return ( -
        - {buttonCommandsList}
        diff --git a/src/ui/react/src/components/buttons/button-table.jsx b/src/ui/react/src/components/buttons/button-table.jsx index 8ec7518aaf..ee0c52b3ce 100644 --- a/src/ui/react/src/components/buttons/button-table.jsx +++ b/src/ui/react/src/components/buttons/button-table.jsx @@ -61,8 +61,8 @@ ); } else { return ( - ); } diff --git a/src/ui/react/src/components/buttons/button-twitter.jsx b/src/ui/react/src/components/buttons/button-twitter.jsx index 5025e32392..8ca56da5ad 100644 --- a/src/ui/react/src/components/buttons/button-twitter.jsx +++ b/src/ui/react/src/components/buttons/button-twitter.jsx @@ -65,7 +65,7 @@ linkUtils.create( this._getHref(), { - 'class': 'alloy-editor-twitter-link', + 'class': 'twitter-link', 'target': '_blank' } ); @@ -93,11 +93,11 @@ * @return {Object} The content which should be rendered. */ render: function() { - var cssClass = 'alloy-editor-button ' + this.getStateClasses(); + var cssClass = 'button ' + this.getStateClasses(); return ( ); }, diff --git a/src/ui/react/src/components/buttons/button-ul.jsx b/src/ui/react/src/components/buttons/button-ul.jsx index 35a6d1e266..7a31efc6d8 100644 --- a/src/ui/react/src/components/buttons/button-ul.jsx +++ b/src/ui/react/src/components/buttons/button-ul.jsx @@ -72,11 +72,11 @@ * @return {Object} The content which should be rendered. */ render: function() { - var cssClass = 'alloy-editor-button ' + this.getStateClasses(); + var cssClass = 'button ' + this.getStateClasses(); return ( ); } diff --git a/src/ui/react/src/components/buttons/button-underline.jsx b/src/ui/react/src/components/buttons/button-underline.jsx index 6fa9d4a5a7..10ee40751c 100644 --- a/src/ui/react/src/components/buttons/button-underline.jsx +++ b/src/ui/react/src/components/buttons/button-underline.jsx @@ -72,11 +72,11 @@ * @return {Object} The content which should be rendered. */ render: function() { - var cssClass = 'alloy-editor-button ' + this.getStateClasses(); + var cssClass = 'button ' + this.getStateClasses(); return ( ); } diff --git a/src/ui/react/src/components/main.jsx b/src/ui/react/src/components/main.jsx index 815a21becd..a515169d34 100644 --- a/src/ui/react/src/components/main.jsx +++ b/src/ui/react/src/components/main.jsx @@ -66,7 +66,7 @@ getDefaultProps: function() { return { circular: true, - descendants: '[class*=alloy-editor-toolbar-]', + descendants: '[class*=toolbar-]', eventsDelay: 0, keys: { next: 9 @@ -228,7 +228,7 @@ }.bind(this)); return ( -
        +
        {toolbars}
        ); diff --git a/src/ui/react/src/components/toolbars/toolbar-add.jsx b/src/ui/react/src/components/toolbars/toolbar-add.jsx index 16ee2b186e..a68a39abe4 100644 --- a/src/ui/react/src/components/toolbars/toolbar-add.jsx +++ b/src/ui/react/src/components/toolbars/toolbar-add.jsx @@ -75,7 +75,7 @@ getDefaultProps: function() { return { circular: true, - descendants: '.alloy-editor-button', + descendants: '.button', gutterExclusive: { left: 10, top: 0 @@ -128,7 +128,7 @@ return (
        -
        +
        {buttons}
        @@ -150,8 +150,8 @@ } else { if (this.props.selectionData && this.props.selectionData.region) { buttons = ( - ); } @@ -168,10 +168,10 @@ * @return {String} The class name which have to be applied to the DOM element. */ _getToolbarClassName: function() { - var cssClass = 'alloy-editor-toolbar-add'; + var cssClass = 'toolbar-add'; if (this.props.renderExclusive) { - cssClass = 'alloy-editor-toolbar ' + this.getArrowBoxClasses(); + cssClass = 'toolbar ' + this.getArrowBoxClasses(); } return cssClass; diff --git a/src/ui/react/src/components/toolbars/toolbar-styles.jsx b/src/ui/react/src/components/toolbars/toolbar-styles.jsx index d95b59701a..ee50a412eb 100644 --- a/src/ui/react/src/components/toolbars/toolbar-styles.jsx +++ b/src/ui/react/src/components/toolbars/toolbar-styles.jsx @@ -90,7 +90,7 @@ getDefaultProps: function() { return { circular: true, - descendants: '.alloy-editor-button, .alloy-editor-toolbar-element', + descendants: '.button, .toolbar-element', keys: { dismiss: [27], next: [39, 40], @@ -118,7 +118,7 @@ arrowBoxClasses = this.getArrowBoxClasses(); } - var cssClasses = 'alloy-editor-toolbar-styles ' + arrowBoxClasses; + var cssClasses = 'toolbar-styles ' + arrowBoxClasses; var buttons = this.getToolbarButtons( currentSelection.buttons, @@ -129,7 +129,7 @@ return (
        -
        +
        {buttons}
        diff --git a/src/ui/react/test/button-bold.jsx b/src/ui/react/test/button-bold.jsx index c17569eaa0..972e36bcd6 100644 --- a/src/ui/react/test/button-bold.jsx +++ b/src/ui/react/test/button-bold.jsx @@ -37,7 +37,7 @@ var buttonDOMNode = React.findDOMNode(buttonBold); - assert.strictEqual($(buttonDOMNode).hasClass('alloy-editor-button-pressed'), true); + assert.strictEqual($(buttonDOMNode).hasClass('button-pressed'), true); }); }); }()); diff --git a/src/ui/react/test/button-table-cell.jsx b/src/ui/react/test/button-table-cell.jsx index 4a981f869f..3f46c4e559 100644 --- a/src/ui/react/test/button-table-cell.jsx +++ b/src/ui/react/test/button-table-cell.jsx @@ -20,7 +20,7 @@ var menuButton = TestUtils.findRenderedDOMComponentWithTag(buttonTableCell, 'button'); - var dropdown = TestUtils.scryRenderedDOMComponentsWithClass(buttonTableCell, 'alloy-editor-dropdown'); + var dropdown = TestUtils.scryRenderedDOMComponentsWithClass(buttonTableCell, 'dropdown'); assert.ok(menuButton); assert.equal(0, dropdown.length); @@ -29,7 +29,7 @@ it('should show a dropdown with the action buttons when expanded', function() { var buttonTableCell = React.render(, this.container); - var dropdown = TestUtils.findRenderedDOMComponentWithClass(buttonTableCell, 'alloy-editor-dropdown'); + var dropdown = TestUtils.findRenderedDOMComponentWithClass(buttonTableCell, 'dropdown'); var actionButtons = TestUtils.scryRenderedDOMComponentsWithTag(dropdown, 'button'); assert.ok(dropdown); diff --git a/src/ui/react/test/button-table-column.jsx b/src/ui/react/test/button-table-column.jsx index 585e3b6a65..431ee0fdfe 100644 --- a/src/ui/react/test/button-table-column.jsx +++ b/src/ui/react/test/button-table-column.jsx @@ -20,7 +20,7 @@ var menuButton = TestUtils.findRenderedDOMComponentWithTag(buttonTableCol, 'button'); - var dropdown = TestUtils.scryRenderedDOMComponentsWithClass(buttonTableCol, 'alloy-editor-dropdown'); + var dropdown = TestUtils.scryRenderedDOMComponentsWithClass(buttonTableCol, 'dropdown'); assert.ok(menuButton); assert.equal(0, dropdown.length); @@ -29,7 +29,7 @@ it('should show a dropdown with the action buttons when expanded', function() { var buttonTableCol = React.render(, this.container); - var dropdown = TestUtils.findRenderedDOMComponentWithClass(buttonTableCol, 'alloy-editor-dropdown'); + var dropdown = TestUtils.findRenderedDOMComponentWithClass(buttonTableCol, 'dropdown'); var actionButtons = TestUtils.scryRenderedDOMComponentsWithTag(dropdown, 'button'); assert.ok(dropdown); diff --git a/src/ui/react/test/button-table-heading.jsx b/src/ui/react/test/button-table-heading.jsx index 8907c46520..13d5a0ace4 100644 --- a/src/ui/react/test/button-table-heading.jsx +++ b/src/ui/react/test/button-table-heading.jsx @@ -26,7 +26,7 @@ var menuButton = TestUtils.findRenderedDOMComponentWithTag(buttonTableHeading, 'button'); - var dropdown = TestUtils.scryRenderedDOMComponentsWithClass(buttonTableHeading, 'alloy-editor-dropdown'); + var dropdown = TestUtils.scryRenderedDOMComponentsWithClass(buttonTableHeading, 'dropdown'); assert.ok(menuButton); assert.equal(0, dropdown.length); @@ -35,7 +35,7 @@ it('should show a dropdown with the action buttons when expanded', function() { var buttonTableHeading = React.render(, this.container); - var dropdown = TestUtils.findRenderedDOMComponentWithClass(buttonTableHeading, 'alloy-editor-dropdown'); + var dropdown = TestUtils.findRenderedDOMComponentWithClass(buttonTableHeading, 'dropdown'); var actionButtons = TestUtils.scryRenderedDOMComponentsWithTag(dropdown, 'button'); assert.ok(dropdown); diff --git a/src/ui/react/test/button-table-row.jsx b/src/ui/react/test/button-table-row.jsx index 46b9e75f85..28f7e5a88e 100644 --- a/src/ui/react/test/button-table-row.jsx +++ b/src/ui/react/test/button-table-row.jsx @@ -20,7 +20,7 @@ var menuButton = TestUtils.findRenderedDOMComponentWithTag(buttonTableRow, 'button'); - var dropdown = TestUtils.scryRenderedDOMComponentsWithClass(buttonTableRow, 'alloy-editor-dropdown'); + var dropdown = TestUtils.scryRenderedDOMComponentsWithClass(buttonTableRow, 'dropdown'); assert.ok(menuButton); assert.equal(0, dropdown.length); @@ -29,7 +29,7 @@ it('should show a dropdown with the action buttons when expanded', function() { var buttonTableRow = React.render(, this.container); - var dropdown = TestUtils.findRenderedDOMComponentWithClass(buttonTableRow, 'alloy-editor-dropdown'); + var dropdown = TestUtils.findRenderedDOMComponentWithClass(buttonTableRow, 'dropdown'); var actionButtons = TestUtils.scryRenderedDOMComponentsWithTag(dropdown, 'button'); assert.ok(dropdown); diff --git a/src/ui/react/test/button-table.jsx b/src/ui/react/test/button-table.jsx index 0ffe46f333..7961f4cedf 100644 --- a/src/ui/react/test/button-table.jsx +++ b/src/ui/react/test/button-table.jsx @@ -21,7 +21,7 @@ var button = TestUtils.findRenderedDOMComponentWithTag(buttonTable, 'button'); - var editTable = TestUtils.scryRenderedDOMComponentsWithClass(buttonTable, 'alloy-editor-container-edit-table'); + var editTable = TestUtils.scryRenderedDOMComponentsWithClass(buttonTable, 'container-edit-table'); assert.ok(button); assert.notOk(editTable.length); @@ -30,7 +30,7 @@ it('should show the table edit button when in exclusive mode', function() { var buttonTable = React.render(, this.container); - var editTable = TestUtils.findRenderedDOMComponentWithClass(buttonTable, 'alloy-editor-container-edit-table'); + var editTable = TestUtils.findRenderedDOMComponentWithClass(buttonTable, 'container-edit-table'); assert.ok(editTable); }); diff --git a/src/ui/react/test/util/utils.js b/src/ui/react/test/util/utils.js index 9971597117..fee671b97a 100644 --- a/src/ui/react/test/util/utils.js +++ b/src/ui/react/test/util/utils.js @@ -13,7 +13,7 @@ var Simulate = TestUtils.Simulate; var command = function() { - var dropdown = TestUtils.findRenderedDOMComponentWithClass(config.buttonDropdown, 'alloy-editor-dropdown'); + var dropdown = TestUtils.findRenderedDOMComponentWithClass(config.buttonDropdown, 'dropdown'); var commandButtons = TestUtils.findAllInRenderedTree(dropdown, function(component) { return component.props.command === config.buttonCommand;