TINY-1246: reworked skin and fixed a few issues with WindowManager/No…

…tificationManager

src/core/src/demo/js/demo/FullDemo.js

@@ -122,6 +122,7 @@ define(
         visualblocks_content_css: '../../../../plugins/visualblocks/dist/visualblocks/css/visualblocks.css',
         images_upload_url: 'd',
         selector: "textarea",
+        //rtl_ui: true,
         link_list: [
           { title: 'My page 1', value: 'http://www.tinymce.com' },
           { title: 'My page 2', value: 'http://www.moxiecode.com' }
@@ -134,6 +135,24 @@ define(
           { title: 'None', value: '' },
           { title: 'Some class', value: 'class-name' }
         ],
+        importcss_append: true,
+        height: 400,
+        file_picker_callback: function (callback, value, meta) {
+          // Provide file and text for the link dialog
+          if (meta.filetype == 'file') {
+            callback('https://www.google.com/logos/google.jpg', { text: 'My text' });
+          }
+
+          // Provide image and alt text for the image dialog
+          if (meta.filetype == 'image') {
+            callback('https://www.google.com/logos/google.jpg', { alt: 'My alt text' });
+          }
+
+          // Provide alternative source and posted for the media dialog
+          if (meta.filetype == 'media') {
+            callback('movie.mp4', { source2: 'alt.ogg', poster: 'https://www.google.com/logos/google.jpg' });
+          }
+        },
         spellchecker_callback: function (method, text, success, failure) {
           var words = text.match(this.getWordCharPattern());
 
@@ -163,7 +182,7 @@ define(
           "autosave advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker toc",
           "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
           "save table contextmenu directionality emoticons template paste textcolor importcss colorpicker textpattern",
-          "codesample help noneditable"
+          "codesample help noneditable print"
         ],
         add_unload_trigger: false,
         toolbar: "insertfile undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | " +

src/core/src/main/js/api/NotificationManager.js

@@ -34,7 +34,7 @@ define(
 
       var getImplementation = function () {
         var theme = editor.theme;
-        return theme.getNotificationManagerImpl ? theme.getNotificationManagerImpl() : NotificationManagerImpl();
+        return theme && theme.getNotificationManagerImpl ? theme.getNotificationManagerImpl() : NotificationManagerImpl();
       };
 
       var getTopNotification = function () {
@@ -46,7 +46,9 @@ define(
       };
 
       var reposition = function () {
-        getImplementation().reposition(notifications);
+        if (notifications.length > 0) {
+          getImplementation().reposition(notifications);
+        }
       };
 
       var addNotification = function (notification) {

src/core/src/main/js/api/WindowManager.js

@@ -42,7 +42,7 @@ define(
 
       var getImplementation = function () {
         var theme = editor.theme;
-        return theme.getWindowManagerImpl ? theme.getWindowManagerImpl() : WindowManagerImpl();
+        return theme && theme.getWindowManagerImpl ? theme.getWindowManagerImpl() : WindowManagerImpl();
       };
 
       var funcBind = function (scope, f) {
@@ -85,7 +85,7 @@ define(
       };
 
       var getTopWindow = function () {
-        return Option.from(windows[0]);
+        return Option.from(windows[windows.length - 1]);
       };
 
       var open = function (args, params) {

src/plugins/code/src/main/js/ui/Buttons.js

@@ -26,7 +26,6 @@ define(
       editor.addMenuItem('code', {
         icon: 'code',
         text: 'Source code',
-        context: 'tools',
         onclick: function () {
           Dialog.open(editor);
         }

src/plugins/codesample/src/main/js/ui/Buttons.js

@@ -18,6 +18,12 @@ define(
         cmd: 'codesample',
         title: 'Insert/Edit code sample'
       });
+
+      editor.addMenuItem('codesample', {
+        cmd: 'codesample',
+        text: 'Code sample',
+        icon: 'codesample'
+      });
     };
 
     return {

src/plugins/help/src/main/js/ui/Buttons.js

@@ -23,7 +23,7 @@ define(
       editor.addMenuItem('Help', {
         text: 'Help',
         icon: 'help',
-        context: 'view',
+        context: 'help',
         onclick: Dialog.open(editor, pluginUrl)
       });
     };

src/plugins/help/src/main/js/ui/Dialog.js

@@ -30,7 +30,7 @@ define(
           buttons: ButtonsRow.makeRow(),
           onPostRender: function () {
             var title = this.getEl('title');
-            title.innerHTML = '<img src="' + pluginUrl + '/img/logo.png" alt="TinyMCE Logo" style="width: 200px">';
+            title.innerHTML = '<img src="' + pluginUrl + '/img/logo.png" alt="TinyMCE Logo" style="display: inline-block; width: 200px; height: 50px">';
           }
         });
       };

src/plugins/print/src/main/js/ui/Buttons.js

@@ -18,6 +18,12 @@ define(
         title: 'Print',
         cmd: 'mcePrint'
       });
+
+      editor.addMenuItem('print', {
+        text: 'Print',
+        cmd: 'mcePrint',
+        icon: 'print'
+      });
     };
 
     return {

src/plugins/template/src/main/js/ui/Buttons.js

@@ -30,6 +30,7 @@ define(
       editor.addMenuItem('template', {
         text: 'Template',
         onclick: Templates.createTemplateList(editor.settings, showDialog(editor)),
+        icon: 'template',
         context: 'insert'
       });
     };

src/plugins/wordcount/src/main/js/ui/Statusbar.js

@@ -12,12 +12,17 @@ define(
   'tinymce.plugins.wordcount.ui.Statusbar',
   [
     'tinymce.core.util.Delay',
+    'tinymce.core.util.I18n',
     'tinymce.plugins.wordcount.text.WordCount'
   ],
-  function (Delay, WordCount) {
+  function (Delay, I18n, WordCount) {
     var setup = function (editor) {
+      var wordsToHtml = function (editor) {
+        return I18n.translate(['{0} words', WordCount.getCount(editor)]);
+      };
+
       var update = function () {
-        editor.theme.panel.find('#wordcount').text(['Words: {0}', WordCount.getCount(editor)]);
+        editor.theme.panel.find('#wordcount')[0].getEl().innerHTML = wordsToHtml(editor);
       };
 
       editor.on('init', function () {
@@ -29,7 +34,7 @@ define(
             statusbar.insert({
               type: 'label',
               name: 'wordcount',
-              text: ['Words: {0}', WordCount.getCount(editor)],
+              html: wordsToHtml(editor),
               classes: 'wordcount',
               disabled: editor.settings.readonly
             }, 0);

src/plugins/wordcount/src/test/js/browser/core/PluginTest.js

@@ -36,7 +36,7 @@ asynctest(
       return Step.sync(function () {
         var countEl = DOMUtils.DOM.select('.mce-wordcount')[0];
         var value = countEl ? countEl.innerText : '';
-        Assertions.assertEq('wordcount', 'Words: ' + num, value);
+        Assertions.assertEq('wordcount', num + ' WORDS', value.toUpperCase());
       });
     };
 

src/skins/lightgray/src/main/less/Arrows.less

@@ -36,14 +36,14 @@
 
 .@{prefix}-arrow.@{prefix}-arrow-up:after {
   top: -8px;
-  border-bottom-color: mix(@panel-bg, @panel-bg-hlight, 60%);
+  border-bottom-color: @panel-bg;
   border-width: 0 8px 8px;
   margin-left: -8px;
 }
 
 .@{prefix}-arrow.@{prefix}-arrow-down:after {
   bottom: -8px;
-  border-top-color: mix(@panel-bg, @panel-bg-hlight, 60%);
+  border-top-color: @panel-bg;
   border-width: 8px 8px 0;
   margin-left: -8px;
 }
@@ -85,7 +85,7 @@
 .@{prefix}-arrow.@{prefix}-arrow-center.@{prefix}-arrow.@{prefix}-arrow-left:after {
   left: -8px;
   top: 50%;
-  border-right-color: mix(@panel-bg, @panel-bg-hlight, 60%);
+  border-right-color: @panel-bg;
   border-width: 8px 8px 8px 0;
   margin-top: -8px;
 }
@@ -105,7 +105,7 @@
 .@{prefix}-arrow.@{prefix}-arrow-center.@{prefix}-arrow.@{prefix}-arrow-right:after {
   right: -8px;
   top: 50%;
-  border-left-color: mix(@panel-bg, @panel-bg-hlight, 60%);
+  border-left-color: @panel-bg;
   border-width: 8px 0 8px 8px;
   margin-top: -8px;
 }

src/skins/lightgray/src/main/less/Button.less

@@ -5,35 +5,51 @@
   border-color: @btn-border-top @btn-border-right @btn-border-bottom @btn-border-left;
   position: relative;
   text-shadow: @text-shadow;
+  background: @btn-bg;
 
   .inline-block();
   .border-radius(3px);
   .box-shadow(@btn-box-shadow);
-  .vertical-gradient(@btn-bg, @btn-bg-hlight);
 
-  &:hover, &:focus {
-    color: @btn-text;
-    .vertical-gradient(darken(@btn-bg, 5%), darken(@btn-bg-hlight, 5%));
+  &:hover, &:active {
+    background: @btn-bg-hover;
+    color: @btn-text-hover;
     border-color: @btn-border-hover;
   }
 
+  &:focus {
+    background: @btn-bg-focus;
+    color: @btn-text-focus;
+    border-color: @btn-border-focus;
+  }
+
   &.@{prefix}-disabled button, &.@{prefix}-disabled:hover button {
     cursor: default;
     .box-shadow(none);
     .opacity(@btn-box-disabled-opacity);
   }
 
-  &.@{prefix}-active, &.@{prefix}-active:hover {
-    .vertical-gradient(darken(@btn-bg, 10%), darken(@btn-bg-hlight, 5%));
+  &.@{prefix}-active,
+  &.@{prefix}-active:hover,
+  &.@{prefix}-active:focus,
+  &.@{prefix}-active:active {
     .box-shadow(@btn-box-shadow-active);
-    border-color: darken(@btn-bg, 20%);
+    background: @btn-bg-active;
+    color: @btn-text-active;
+    border-color: @btn-border-active;
   }
 
-  &:active {
-    .vertical-gradient(darken(@btn-bg, 7%), darken(@btn-bg-hlight, 5%));
-    .box-shadow(@btn-box-shadow-active);
-    border-color: @btn-border-active;
+  &.@{prefix}-active button, &.@{prefix}-active:hover button,
+  &.@{prefix}-active i, &.@{prefix}-active:hover i {
+    color: @btn-text-active;
+  }
+
+  &:hover .@{prefix}-caret {
+    border-top-color: @btn-chevron-hover;
+  }
 
+  &.@{prefix}-active .@{prefix}-caret, &.@{prefix}-active:hover .@{prefix}-caret {
+    border-top-color: @btn-chevron-active;
   }
 }
 
@@ -67,10 +83,10 @@
   color: @btn-primary-text;
   border: 1px solid transparent;
   border-color: @btn-primary-border;
-  .vertical-gradient(@btn-primary-bg, @btn-primary-bg-hlight);
+  background-color: @btn-primary-bg;
 
   &:hover, &:focus {
-    .vertical-gradient(darken(@btn-primary-bg, 5%), darken(@btn-primary-bg-hlight, 5%));
+    background-color: @btn-primary-bg-hover;
     border-color: @btn-primary-border-hover;
   }
 
@@ -81,7 +97,7 @@
   }
 
   &.@{prefix}-active, &.@{prefix}-active:hover, &:not(.@{prefix}-disabled):active {
-    .vertical-gradient(darken(@btn-primary-bg, 10%), darken(@btn-primary-bg-hlight, 10%));
+    background-color: @btn-primary-bg-active;
     .box-shadow(@btn-box-shadow-active);
   }
 }
@@ -134,7 +150,7 @@
   .inline-block();
   width: 0; height: 0;
   vertical-align: top;
-  border-top: 4px solid @btn-caret-border;
+  border-top: 4px solid @btn-chevron;
   border-right: 4px solid transparent;
   border-left: 4px solid transparent;
   content: "";
@@ -145,7 +161,7 @@
 }
 
 .@{prefix}-caret.@{prefix}-up {
-  border-bottom: 4px solid @btn-caret-border;
+  border-bottom: 4px solid @btn-chevron;
   border-top: 0;
 }
 

src/skins/lightgray/src/main/less/ButtonGroup.less

@@ -1,5 +1,10 @@
 // ButtonGroup
 
+.@{prefix}-toolbar .@{prefix}-btn-group {
+  margin: 0;
+  padding: 2px 0;
+}
+
 .btn-group-border-left(@border-color) when (@has-button-borders = true) {
   border-left: 1px solid @border-color;
 }
@@ -8,7 +13,6 @@
   border-right: 1px solid @border-color;
 }
 
-
 .@{prefix}-btn-group .@{prefix}-btn {
   border-width: @btn-group-border-width;
   margin: 0;
@@ -29,14 +33,14 @@
 
 .@{prefix}-btn-group:not(:first-child) when (@has-button-borders = false) {
   border-left: 1px solid darken(@btn-bg, 15%);
-  padding-left: @flow-layout-spacing + 1px;
-  margin-left: @flow-layout-spacing + 1px;
+  padding-left: 0;
+  margin-left: @flow-layout-spacing;
 }
 
-.@{prefix}-btn-group .@{prefix}-first {
+.@{prefix}-btn-group {
   .border-radius(3px 0 0 3px);
   .btn-group-border-left(@btn-border-left);
-  margin-left: 0;
+  margin-left: 2px;
 }
 
 .@{prefix}-btn-group .@{prefix}-last {
@@ -68,4 +72,4 @@
   border-right:1px solid darken(@btn-bg, 15%);
   padding-right: @flow-layout-spacing + 2px;
   margin-right: @flow-layout-spacing + 2px;
-}
+}

src/skins/lightgray/src/main/less/Checkbox.less

@@ -9,11 +9,8 @@ i.@{prefix}-i-checkbox {
   border: 1px solid @checkbox-border;
   .border-radius(3px);
   .box-shadow(@checkbox-box-shadow);
-  .vertical-gradient(@checkbox-bg, @checkbox-bg-hlight);
+  background-color: @checkbox-bg;
   text-indent: -10em;
-  *font-size: 0;
-  *line-height: 0;
-  *text-indent: 0;
   overflow: hidden;
 }
 
@@ -26,7 +23,7 @@ i.@{prefix}-i-checkbox {
 
 .@{prefix}-checkbox:focus i.@{prefix}-i-checkbox, .@{prefix}-checkbox.@{prefix}-focus i.@{prefix}-i-checkbox {
   border: 1px solid @checkbox-border-focus;
-  .box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px fadeout(@checkbox-border-focus, 15%));
+  .box-shadow(@checkbox-box-shadow-focus);
 }
 
 .@{prefix}-checkbox.@{prefix}-disabled .@{prefix}-label, .@{prefix}-checkbox.@{prefix}-disabled i.@{prefix}-i-checkbox {