Merge branch 't/14569' into major

CHANGES.md

@@ -5,6 +5,7 @@ CKEditor 4 Changelog
 
 New Features:
 
+* [#14569](http://dev.ckeditor.com/ticket/14569): Added new CKEditor skin.
 * [#12541](http://dev.ckeditor.com/ticket/12541): Added the [Upload File](http://ckeditor.com/addon/uploadfile) plugin.
 * [#13794](http://dev.ckeditor.com/ticket/13794): [Upload Image](http://ckeditor.com/addon/uploadimage) Use `uploaded.width/height` if set.
 * [#13829](http://dev.ckeditor.com/ticket/13829): Fixed: No class in [Widget](http://ckeditor.com/addon/widget) wrapper that would identify the widget type.

ckeditor.js

@@ -42,7 +42,7 @@ else {
  *
  *		CKEDITOR.skinName = 'myskin,/customstuff/myskin/';
  *
- * @cfg {String} [skinName='moono']
+ * @cfg {String} [skinName='moono-lisa']
  * @member CKEDITOR
  */
-CKEDITOR.skinName = 'moono';
+CKEDITOR.skinName = 'moono-lisa';

dev/builder/build-config.js

@@ -6,7 +6,7 @@
 /* exported CKBUILDER_CONFIG */
 
 var CKBUILDER_CONFIG = {
-	skin: 'moono',
+	skin: 'moono-lisa',
 	ignore: [
 		'bender.js',
 		'.bender',

plugins/dialog/plugin.js

@@ -2106,9 +2106,10 @@ CKEDITOR.DIALOG_STATE_BUSY = 2;
 	}
 
 	function showCover( editor ) {
-		var win = CKEDITOR.document.getWindow();
-		var config = editor.config,
-			backgroundColorStyle = config.dialog_backgroundCoverColor || 'white',
+		var win = CKEDITOR.document.getWindow(),
+			config = editor.config,
+			skinName = ( CKEDITOR.skinName || editor.config.skin ),
+			backgroundColorStyle = config.dialog_backgroundCoverColor || ( skinName == 'moono-lisa' ? 'black' : 'white' ),
 			backgroundCoverOpacity = config.dialog_backgroundCoverOpacity,
 			baseFloatZIndex = config.baseFloatZIndex,
 			coverKey = CKEDITOR.tools.genKey( backgroundColorStyle, backgroundCoverOpacity, baseFloatZIndex ),

plugins/find/dialogs/find.js

@@ -588,6 +588,7 @@
 				},
 				{
 					type: 'fieldset',
+					className: 'cke_dialog_find_fieldset',
 					label: CKEDITOR.tools.htmlEncode( lang.findOptions ),
 					style: 'margin-top:29px',
 					children: [ {

plugins/flash/dialogs/flash.js

@@ -327,6 +327,7 @@
 						type: 'hbox',
 						widths: [ '280px', '110px' ],
 						align: 'right',
+						className: 'cke_dialog_flash_url',
 						children: [ {
 							id: 'src',
 							type: 'text',

plugins/forms/dialogs/select.js

@@ -1,4 +1,4 @@
-/**
+/**
  * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md or http://ckeditor.com/license
  */
@@ -210,6 +210,7 @@ CKEDITOR.dialog.add( 'select', function( editor ) {
 			},
 			{
 				type: 'hbox',
+				className: 'cke_dialog_forms_select_order_txtsize',
 				widths: [ '175px', '170px' ],
 				children: [ {
 					id: 'txtSize',
@@ -248,6 +249,7 @@ CKEDITOR.dialog.add( 'select', function( editor ) {
 			{
 				type: 'hbox',
 				widths: [ '115px', '115px', '100px' ],
+				className: 'cke_dialog_forms_select_order',
 				children: [ {
 					type: 'vbox',
 					children: [ {

plugins/image/dialogs/image.js

@@ -1,4 +1,4 @@
-/**
+/**
  * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md or http://ckeditor.com/license
  */
@@ -270,7 +270,7 @@
 
 			return {
 				title: editor.lang.image[ dialogType == 'image' ? 'title' : 'titleButton' ],
-				minWidth: 420,
+				minWidth: ( CKEDITOR.skinName || editor.config.skin ) == 'moono-lisa' ? 500 : 420,
 				minHeight: 360,
 				onShow: function() {
 					this.imageElement = false;
@@ -490,6 +490,7 @@
 							type: 'hbox',
 							widths: [ '280px', '110px' ],
 							align: 'right',
+							className: 'cke_dialog_image_url',
 							children: [ {
 								id: 'txtUrl',
 								type: 'text',
@@ -692,6 +693,7 @@
 								{
 									id: 'ratioLock',
 									type: 'html',
+									className: 'cke_dialog_image_ratiolock',
 									style: 'margin-top:30px;width:40px;height:40px;',
 									onLoad: function() {
 										// Activate Reset button
@@ -1014,6 +1016,7 @@
 					{
 						type: 'button',
 						id: 'browse',
+						className: 'cke_dialog_image_browse',
 						filebrowser: {
 							action: 'Browse',
 							target: 'Link:txtUrl',

plugins/link/dialogs/link.js

@@ -109,7 +109,7 @@
 
 		return {
 			title: linkLang.title,
-			minWidth: 350,
+			minWidth: ( CKEDITOR.skinName || editor.config.skin ) == 'moono-lisa' ? 450 : 350,
 			minHeight: 240,
 			contents: [ {
 				id: 'info',

plugins/toolbar/plugin.js

@@ -190,13 +190,15 @@
 					output.push( '<span class="cke_toolbox_main"' + ( expanded ? '>' : ' style="display:none">' ) );
 
 				var toolbars = editor.toolbox.toolbars,
-					toolbar = getToolbarConfig( editor );
+					toolbar = getToolbarConfig( editor ),
+					toolbarLength = toolbar.length;
 
-				for ( var r = 0; r < toolbar.length; r++ ) {
+				for ( var r = 0; r < toolbarLength; r++ ) {
 					var toolbarId,
 						toolbarObj = 0,
 						toolbarName,
 						row = toolbar[ r ],
+						lastToolbarInRow = row !== '/' && ( toolbar[ r + 1 ] === '/' || r == toolbarLength - 1 ),
 						items;
 
 					// It's better to check if the row object is really
@@ -244,7 +246,8 @@
 								toolbarName = row.name && ( editor.lang.toolbar.toolbarGroups[ row.name ] || row.name );
 
 								// Output the toolbar opener.
-								output.push( '<span id="', toolbarId, '" class="cke_toolbar"', ( toolbarName ? ' aria-labelledby="' + toolbarId + '_label"' : '' ), ' role="toolbar">' );
+								output.push( '<span id="', toolbarId, '" class="cke_toolbar' + ( lastToolbarInRow ? ' cke_toolbar_last"' : '"' ),
+									( toolbarName ? ' aria-labelledby="' + toolbarId + '_label"' : '' ), ' role="toolbar">' );
 
 								// If a toolbar name is available, send the voice label.
 								toolbarName && output.push( '<span id="', toolbarId, '_label" class="cke_voice_label">', toolbarName, '</span>' );

samples/less/custom.less

@@ -49,16 +49,6 @@ main .grid-container.freed-width {
 	border: dashed 5px @global-link-font-color;
 }
 
-// There were some inherited styles for links.
-div.cke a.cke_button,
-div.cke .cke_combo_button {
-	border-bottom: none;
-
-	&.cke_combo_button {
-		border-bottom: 1px solid #a6a6a6;
-	}
-}
-
 #main .adjoined-top:before {
 	height: 335px;
 }
@@ -170,4 +160,4 @@ header {
 			display: none;
 		} );
 	}
-}
+}

skins/moono-lisa/colorpanel.css

@@ -0,0 +1,183 @@
+/*
+Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+
+/*
+colorpanel.css (part of editor.css)
+=====================================
+
+The color panel is related to the contents part of the panels that are
+displayed when clicking the color buttons of the toolbar. See panels.css for
+styles related to the outer part of panels.
+
+The following is the visual representation of the color panel contents:
+
++-- .cke_panel_block.cke_colorblock --+
+| +-- a.cke_colorauto --------------+ |
+| |                                 | |
+| |         AUTOMATIC COLOR         | |
+| |                                 | |
+| +---------------------------------+ |
+| +-- table ------------------------+ |
+| |                                 | |
+| |          COLOR PALETTE          | |
+| |                                 | |
+| |---------------------------------| |
+| |          "More Colors"          | |
+| +---------------------------------+ |
++-------------------------------------+
+
+The AUTOMATIC COLOR section is an <a> containing a table with two cells with
+the following contents:
+
++-- TD -----------------+ +-- TD -----------------+
+| +-- .cke_colorbox --+ | |                       |
+| |                   | | |      "Automatic"      |
+| +-------------------+ | |                       |
++-----------------------+ +-----------------------+
+
+The COLOR PALETTE section instead is a table with a variable number of cells
+(by default 8). Each cell represents a color box, with the following structure:
+
++-- A.cke_colorbox ---------+
+| +-- SPAN.cke_colorbox --+ |
+| |                       | |
+| +-----------------------+ |
++---------------------------+
+*/
+
+/* The container of the color palette. */
+.cke_colorblock
+{
+	padding: 10px;
+	font-size: 11px;
+	font-family: 'Microsoft Sans Serif', Tahoma, Arial, Verdana, Sans-Serif;
+}
+
+.cke_colorblock,
+.cke_colorblock a
+{
+	text-decoration: none;
+	color: #000;
+}
+
+/* The wrapper of the span.cke_colorbox. It provides an extra border and padding. */
+a.cke_colorbox
+{
+	padding: 2px;
+	float: left;
+	width: 20px;
+	height: 20px;
+}
+
+.cke_rtl a.cke_colorbox
+{
+	float: right;
+}
+
+/* Different states of the a.cke_colorbox wrapper. */
+a:hover.cke_colorbox,
+a:focus.cke_colorbox,
+a:active.cke_colorbox
+{
+	outline: none;
+	padding: 0;
+	border: 2px solid #139FF7;
+}
+
+a:hover.cke_colorbox
+{
+	border-color: #bcbcbc;
+}
+
+/* The box which is to represent a single color on the color palette.
+   It is a small, square-shaped element which can be selected from the palette. */
+span.cke_colorbox
+{
+	width: 20px;
+	height: 20px;
+	float: left;
+}
+
+.cke_rtl span.cke_colorbox
+{
+	float: right;
+}
+
+/* Buttons which are visible at the top/bottom of the color palette:
+   - cke_colorauto (TOP) applies the automatic color.
+   - cke_colormore (BOTTOM) executes the color dialog.
+*/
+a.cke_colorauto,
+a.cke_colormore
+{
+	border: #fff 1px solid;
+	padding: 3px;
+	display: block;
+	cursor: pointer;
+}
+
+a.cke_colorauto
+{
+	padding: 0;
+	border: 1px solid transparent;
+	margin-bottom: 6px;
+	height: 26px;
+	line-height: 26px;
+}
+
+a.cke_colormore
+{
+	margin-top: 10px;
+	height: 20px;
+	line-height: 19px;
+}
+
+/* Different states of cke_colorauto/cke_colormore buttons. */
+a:hover.cke_colorauto,
+a:hover.cke_colormore,
+a:focus.cke_colorauto,
+a:focus.cke_colormore,
+a:active.cke_colorauto,
+a:active.cke_colormore
+{
+	outline: none;
+	border: #139FF7 1px solid;
+	background-color: #f8f8f8;
+}
+
+a:hover.cke_colorauto,
+a:hover.cke_colormore
+{
+	border-color: #bcbcbc;
+}
+
+.cke_colorauto span.cke_colorbox
+{
+	width: 18px;
+	height: 18px;
+	border: 1px solid #808080;
+	margin-left: 1px;
+	margin-top: 3px;
+}
+
+.cke_rtl .cke_colorauto span.cke_colorbox
+{
+	margin-left: 0;
+	margin-right: 1px;
+}
+
+span.cke_colorbox[style*="#ffffff"],
+span.cke_colorbox[style*="#FFFFFF"],
+span.cke_colorbox[style="background-color:#fff"],
+span.cke_colorbox[style="background-color:#FFF"],
+
+/* IE, Edge */
+span.cke_colorbox[style*="rgb(255,255,255)"],
+span.cke_colorbox[style*="rgb(255, 255, 255)"]
+{
+	border: 1px solid #808080;
+	width: 18px;
+	height: 18px;
+}