Release 3.6.0

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@oat-sa/tao-core-ui",
-    "version": "3.5.0",
+    "version": "3.6.0",
     "displayName": "TAO Core UI",
     "description": "UI libraries of TAO",
     "scripts": {

scss/inc/_base.scss

@@ -396,6 +396,11 @@ body {
         margin: 20px 0 20px 20px;
     }
 
+    .tao-centered {
+        margin: 20px auto;
+        display: block;
+    }
+
     .txt-ctr {
         text-align: center;
     }

scss/inc/fonts/_tao-icon-classes.scss

@@ -1,4 +1,5 @@
 /* Do not edit */[class^="icon-"], [class*=" icon-"] { @include tao-icon-setup; }
+%icon-align-center-before, .icon-align-center:before { @include icon-align-center; }
 %icon-multiple-magicwand-before, .icon-multiple-magicwand:before { @include icon-multiple-magicwand; }
 %icon-sd-import-before, .icon-sd-import:before { @include icon-sd-import; }
 %icon-sd-export-before, .icon-sd-export:before { @include icon-sd-export; }

scss/inc/fonts/_tao-icon-def.scss

@@ -1,10 +1,10 @@
 /* Do not edit */@font-face {
   font-family: 'tao';
-  src:  url('#{$fontPath}tao/tao.eot?8uy0x');
-  src:  url('#{$fontPath}tao/tao.eot?8uy0x#iefix') format('embedded-opentype'),
-    url('#{$fontPath}tao/tao.ttf?8uy0x') format('truetype'),
-    url('#{$fontPath}tao/tao.woff?8uy0x') format('woff'),
-    url('#{$fontPath}tao/tao.svg?8uy0x#tao') format('svg');
+  src:  url('#{$fontPath}tao/tao.eot?y6cmhc');
+  src:  url('#{$fontPath}tao/tao.eot?y6cmhc#iefix') format('embedded-opentype'),
+    url('#{$fontPath}tao/tao.ttf?y6cmhc') format('truetype'),
+    url('#{$fontPath}tao/tao.woff?y6cmhc') format('woff'),
+    url('#{$fontPath}tao/tao.svg?y6cmhc#tao') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;

scss/inc/fonts/_tao-icon-vars.scss

@@ -13,6 +13,7 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+@mixin icon-align-center { content: "\e92a"; }
 @mixin icon-multiple-magicwand { content: "\e929"; }
 @mixin icon-sd-import { content: "\e91f"; }
 @mixin icon-sd-export { content: "\e924"; }

src/mediaEditor/plugins/mediaAlignment/helper.js

@@ -20,6 +20,7 @@ import _ from 'lodash';
 
 export const FLOAT_LEFT_CLASS = 'wrap-left';
 export const FLOAT_RIGHT_CLASS = 'wrap-right';
+export const CENTER_CLASS = 'tao-centered';
 
 const searchRecurse = (parentElement, serial) => {
     if (!parentElement) {
@@ -49,8 +50,8 @@ export const positionFloat = function positionFloat(widget, position) {
         return;
     }
 
-    widget.$container.removeClass(`${FLOAT_LEFT_CLASS} ${FLOAT_RIGHT_CLASS}`);
-    widget.$original.removeClass(`${FLOAT_LEFT_CLASS} ${FLOAT_RIGHT_CLASS}`);
+    widget.$container.removeClass(`${FLOAT_LEFT_CLASS} ${FLOAT_RIGHT_CLASS} ${CENTER_CLASS}`);
+    widget.$original.removeClass(`${FLOAT_LEFT_CLASS} ${FLOAT_RIGHT_CLASS} ${CENTER_CLASS}`);
 
     let className;
 
@@ -61,6 +62,9 @@ export const positionFloat = function positionFloat(widget, position) {
         case 'left':
             className = FLOAT_LEFT_CLASS;
             break;
+        case 'center':
+            className = CENTER_CLASS;
+            break;
         case 'default':
             className = '';
     }
@@ -108,4 +112,7 @@ export const initAlignment = function initAlignment(widget) {
     if (widget.element.hasClass(FLOAT_RIGHT_CLASS)) {
         return positionFloat(widget, 'right');
     }
+    if (widget.element.hasClass(CENTER_CLASS)) {
+        return positionFloat(widget, 'center');
+    }
 };

src/mediaEditor/plugins/mediaAlignment/mediaAlignmentComponent.js

@@ -26,7 +26,7 @@ import _ from 'lodash';
 import component from 'ui/component';
 import tpl from 'ui/mediaEditor/plugins/mediaAlignment/tpl/mediaAlignment';
 import 'ui/mediaEditor/plugins/mediaAlignment/style.css';
-import { FLOAT_LEFT_CLASS, FLOAT_RIGHT_CLASS } from './helper';
+import { FLOAT_LEFT_CLASS, FLOAT_RIGHT_CLASS, CENTER_CLASS } from './helper';
 
 /**
  * Creates mediaAlignment component
@@ -44,18 +44,19 @@ export default function mediaAlignmentFactory($container, media) {
          */
         update(conf) {
             $template.find('input:checked').prop('checked', false);
+            $template.find(`input[name="${conf}"]`).prop('checked', true);
             switch (conf) {
-                case 'wrap-right':
+                case FLOAT_RIGHT_CLASS:
                     conf = 'right';
-                    $template.find('input[name="wrap-right"]').prop('checked', true);
                     break;
-                case 'wrap-left':
+                case FLOAT_LEFT_CLASS:
                     conf = 'left';
-                    $template.find('input[name="wrap-left"]').prop('checked', true);
+                    break;
+                case CENTER_CLASS:
+                    conf = 'center';
                     break;
                 default:
                     conf = 'default';
-                    $template.find('input[name="wrap-inline"]').prop('checked', true);
                     break;
             }
             media.align = conf;
@@ -78,9 +79,11 @@ export default function mediaAlignmentFactory($container, media) {
             const classListTag = container.classList;
 
             if (classListTag.contains(FLOAT_RIGHT_CLASS)) {
-                this.update('wrap-right');
+                this.update(FLOAT_RIGHT_CLASS);
             } else if (classListTag.contains(FLOAT_LEFT_CLASS)) {
-                this.update('wrap-left');
+                this.update(FLOAT_LEFT_CLASS);
+            } else if (classListTag.contains(CENTER_CLASS)) {
+                this.update(CENTER_CLASS);
             } else {
                 this.update('wrap-inline');
             }

src/mediaEditor/plugins/mediaAlignment/tpl/mediaAlignment.tpl

@@ -21,5 +21,12 @@
             <span class="icon-wrap-right"></span>
             {{__ 'Wrap image right'}}
         </label>
+        <br>
+        <label class="smaller-prompt">
+            <input type="radio" name="tao-centered"/>
+            <span class="icon-radio"></span>
+            <span class="icon-align-center"></span>
+            {{__ 'Center'}}
+        </label>
     </fieldset>
 </div>