@oat-sa/tao-core-ui 1.57.0 → 1.58.0

package/dist/ckeditor/ckConfigurator.js

@@ -53,6 +53,9 @@ define(['jquery', 'lodash', 'ui/ckeditor/dtdHandler', 'ckeditor', 'module'], fun
         }, {
           name: 'links',
           items: ['Link']
+        }, {
+          name: 'language',
+          items: ['Language']
         }],
         flow: [{
           name: 'basicstyles',
@@ -63,6 +66,9 @@ define(['jquery', 'lodash', 'ui/ckeditor/dtdHandler', 'ckeditor', 'module'], fun
         }, {
           name: 'links',
           items: ['Link']
+        }, {
+          name: 'language',
+          items: ['Language']
         }],
         block: [{
           name: 'basicstyles',
@@ -73,6 +79,9 @@ define(['jquery', 'lodash', 'ui/ckeditor/dtdHandler', 'ckeditor', 'module'], fun
         }, {
           name: 'links',
           items: ['Link']
+        }, {
+          name: 'language',
+          items: ['Language']
         }, {
           name: 'styles',
           items: ['Format']
@@ -129,6 +138,9 @@ define(['jquery', 'lodash', 'ui/ckeditor/dtdHandler', 'ckeditor', 'module'], fun
         }, {
           name: 'insert',
           items: ['Link', 'SpecialChar']
+        }, {
+          name: 'language',
+          items: ['Language']
         }],
         table: [{
           name: 'basicstyles',
@@ -142,6 +154,9 @@ define(['jquery', 'lodash', 'ui/ckeditor/dtdHandler', 'ckeditor', 'module'], fun
         }, {
           name: 'paragraph',
           items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock']
+        }, {
+          name: 'language',
+          items: ['Language']
         }]
       };
       /**
@@ -153,7 +168,7 @@ define(['jquery', 'lodash', 'ui/ckeditor/dtdHandler', 'ckeditor', 'module'], fun
         entities: false,
         entities_processNumerical: true,
         autoParagraph: false,
-        extraPlugins: 'confighelper',
+        extraPlugins: 'confighelper, taolanguage',
         floatSpaceDockedOffsetY: 0,
         forcePasteAsPlainText: true,
         skin: 'tao',

package/package.json

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

package/scss/ckeditor/skins/tao/scss/inc/_menu.scss

@@ -52,21 +52,61 @@ Special outer level classes used in this file:
   /* The "button" inside a menu item is a <a> element.
      Transforms it into a block. */
   display: block;
-}
-
-.cke_menuitem span {
-  /* Avoid the text selection cursor inside menu items. */
-  cursor: default;
-  font-size: 12px
+  color: $textColor;
+  padding: 5px 7px;
+  cursor: pointer;
+  // override .cke_reset_all *
+  .cke_menubutton_label {
+    cursor: pointer;
+  }
+}
+
+.cke_menubutton__rtl {
+  padding-right: 40px;
+  position: relative;
+  &:after {
+    content: 'RTL';
+    display: block;
+    color: $grey;
+    border: $grey 1px solid;
+    border-radius: 2px;
+    font-size: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 5px;
+    line-height: 12px;
+    padding: 0 4px;
+    position: absolute;
+  }
+}
+
+.cke_menubutton:active,
+.cke_menubutton:focus {
+  outline: none;
+  background-color: $uiReviewPanelBg;
+  color: $textColor;
+  &:after {
+    color: $grey;
+    border-color: $grey;
+  }
 }
 
 .cke_menubutton:hover,
-.cke_menubutton:focus,
-.cke_menubutton:active {
-  background-color: #D3D3D3;
+.cke_menubutton_on,
+.cke_menubutton_on:focus {
+  background: $uiClickableHoverBg;
+  color: $textHighlight;
   display: block;
+  outline: none;
+  cursor: pointer;
+
+  &:after {
+    color: $textHighlight;
+    border-color: $textHighlight;
+  }
 }
 
+
 .cke_hc .cke_menubutton {
   padding: 2px;
 }
@@ -90,6 +130,7 @@ Special outer level classes used in this file:
 
 /* The menu item icon. */
 .cke_menubutton_icon {
+  display: none;
   background-color: #D7D8D7;
   opacity: 0.70; /* Safari, Opera and Mozilla */
   filter: alpha(opacity=70); /* IE */
@@ -102,12 +143,6 @@ Special outer level classes used in this file:
   padding: 4px 0;
 }
 
-.cke_menubutton:hover .cke_menubutton_icon,
-.cke_menubutton:focus .cke_menubutton_icon,
-.cke_menubutton:active .cke_menubutton_icon {
-  background-color: #D0D2D0;
-}
-
 .cke_menubutton_disabled:hover .cke_menubutton_icon,
 .cke_menubutton_disabled:focus .cke_menubutton_icon,
 .cke_menubutton_disabled:active .cke_menubutton_icon {
@@ -122,6 +157,7 @@ Special outer level classes used in this file:
   background-color: transparent;
   width: 100%;
   vertical-align: middle;
+  font-size: 14px;
 }
 
 .cke_menubutton_disabled .cke_menubutton_label {
@@ -130,22 +166,10 @@ Special outer level classes used in this file:
   filter: alpha(opacity=30);
 }
 
-.cke_menubutton_on {
-  border: 1px solid #dedede;
-  background-color: #f2f2f2;
-  box-shadow: 0 0 2px rgba(0, 0, 0, .1) inset;
-}
-
 .cke_menubutton_on .cke_menubutton_icon {
   padding-right: 3px;
 }
 
-.cke_menubutton:hover,
-.cke_menubutton:focus,
-.cke_menubutton:active {
-  background-color: #EFF0EF;
-}
-
 .cke_panel_frame .cke_menubutton_label {
   display: none;
 }

package/scss/ckeditor/skins/tao/scss/inc/_panel.scss

@@ -47,7 +47,8 @@ panel contents and color panels check menu.css and colorpanel.css.
     visibility: visible;
     width: 120px;
     height: 100px;
-    overflow: hidden;
+    overflow-x: hidden;
+    overflow-y: auto;
 
     background-color: #fff;
     border: 1px solid #b6b6b6;
@@ -56,25 +57,34 @@ panel contents and color panels check menu.css and colorpanel.css.
     border-radius: 3px;
 
     box-shadow: 0 0 3px rgba(0, 0, 0, .15);
+    font-size: 14px;
+}
+.cke_panel_visible .cke_panel {
+    visibility: visible;
 }
-
 /* This class represents panels which are used as context menus. */
 .cke_menu_panel {
     padding: 0;
     margin: 0;
     visibility: hidden;
+    background-color: $textHighlight;
+    border: 1px solid $uiGeneralContentBorder;
+    border-radius: 2px;
+    box-shadow: none;
+    max-height: 60vh;
 }
 
 /* This class represents panels which are used by rich combos. */
 .cke_combopanel {
     width: 150px;
     height: 170px;
+    overflow: hidden;
 }
 
 /* The IFRAME the panel is wrapped into. */
 .cke_panel_frame {
     width: 100%;
-    height: 100%;
+    height: inherit;
     font-size: 12px;
 
     overflow: auto;
@@ -136,7 +146,7 @@ is its visual representation:
     padding: 3px 4px;
     display: block;
     border: 1px solid #fff;
-    color: inherit !important;
+    color: inherit;
     text-decoration: none;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -165,8 +175,9 @@ is its visual representation:
 .cke_panel_listItem a:hover,
 .cke_panel_listItem a:focus,
 .cke_panel_listItem a:active {
-
+    color: $textHighlight;
     background-color: $uiClickableHoverBg;
+    outline: none;
 }
 
 .cke_hc .cke_panel_listItem a {

package/scss/ckeditor/skins/tao/scss/inc/_richcombo.scss

@@ -69,7 +69,6 @@ The visual representation of a rich combo widget looks as follows:
 /* Different states of the container. */
 .cke_combo_off a.cke_combo_button:hover,
 .cke_combo_off a.cke_combo_button:focus {
-
   outline: none;
 }
 
@@ -112,7 +111,6 @@ The visual representation of a rich combo widget looks as follows:
   float: left;
   cursor: default;
   color: #474747;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
   width: 60px;
 }
 

package/scss/ckeditor/skins/tao/scss/inc/_toolbar.scss

@@ -70,11 +70,12 @@ Special outer level classes used in this file:
 /* The box that holds buttons. */
 .cke_toolgroup {
   float: left;
-  margin: 0 2px 2px 0;
+  margin: 0 2px 0 0;
   @include simple-border();
   @include border-radius(1);
 
   background: white();
+  display: flex;
 }
 
 .cke_hc .cke_toolgroup {
@@ -183,8 +184,19 @@ a.cke_button_disabled:active {
   vertical-align: middle;
   float: left;
   cursor: default;
-  color: #474747;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
+
+  &.cke_button__language_label {
+    display: block;
+    cursor: pointer;
+  }
+}
+
+.cke_button__language {
+  cursor: pointer;
+}
+
+.cke_button__language_icon {
+  display: none;
 }
 
 .cke_rtl .cke_button_label {

package/src/ckeditor/ckConfigurator.js

@@ -54,6 +54,9 @@ const ckConfigurator = (function () {
             {
                 name: 'links',
                 items: ['Link']
+            },{
+                name: 'language',
+                items: ['Language']
             }
         ],
         flow: [
@@ -68,6 +71,10 @@ const ckConfigurator = (function () {
             {
                 name: 'links',
                 items: ['Link']
+            },
+            {
+                name: 'language',
+                items: ['Language']
             }
         ],
         block: [
@@ -83,6 +90,10 @@ const ckConfigurator = (function () {
                 name: 'links',
                 items: ['Link']
             },
+            {
+                name: 'language',
+                items: ['Language']
+            },
             {
                 name: 'styles',
                 items: ['Format']
@@ -167,6 +178,10 @@ const ckConfigurator = (function () {
             {
                 name: 'insert',
                 items: ['Link', 'SpecialChar']
+            },
+            {
+                name: 'language',
+                items: ['Language']
             }
         ],
         table: [
@@ -185,6 +200,10 @@ const ckConfigurator = (function () {
             {
                 name: 'paragraph',
                 items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock']
+            },
+            {
+                name: 'language',
+                items: ['Language']
             }
         ]
     };
@@ -197,7 +216,7 @@ const ckConfigurator = (function () {
         entities: false,
         entities_processNumerical: true,
         autoParagraph: false,
-        extraPlugins: 'confighelper',
+        extraPlugins: 'confighelper, taolanguage',
         floatSpaceDockedOffsetY: 0,
         forcePasteAsPlainText: true,
         skin: 'tao',