8
0
Просмотр исходного кода

Merge branch 'master' into t/ckeditor5/1058

Piotrek Koszuliński 7 лет назад
Родитель
Сommit
ee40b610c0

+ 1 - 1
packages/ckeditor5-ui/package.json

@@ -38,7 +38,7 @@
     "lodash-cli": "^4"
   },
   "engines": {
-    "node": ">=6.0.0",
+    "node": ">=6.9.0",
     "npm": ">=3.0.0"
   },
   "author": "CKSource (http://cksource.com/)",

+ 9 - 1
packages/ckeditor5-ui/src/panel/balloon/balloonpanelview.js

@@ -234,7 +234,7 @@ export default class BalloonPanelView extends View {
 			fitInViewport: true
 		}, options );
 
-		const { top, left, name: position } = getOptimalPosition( positionOptions );
+		const { top, left, name: position } = BalloonPanelView._getOptimalPosition( positionOptions );
 
 		Object.assign( this, { top, left, position } );
 	}
@@ -415,6 +415,14 @@ BalloonPanelView.arrowHorizontalOffset = 25;
  */
 BalloonPanelView.arrowVerticalOffset = 10;
 
+/**
+ * Function used to calculate the optimal position for the balloon.
+ *
+ * @protected
+ * @member {Function} module:ui/panel/balloon/balloonpanelview~BalloonPanelView._getOptimalPosition
+ */
+BalloonPanelView._getOptimalPosition = getOptimalPosition;
+
 /**
  * A default set of positioning functions used by the balloon panel view
  * when attaching using {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView#attachTo} method.

+ 6 - 2
packages/ckeditor5-ui/src/toolbar/balloon/balloontoolbar.js

@@ -59,8 +59,12 @@ export default class BalloonToolbar extends Plugin {
 		 * @type {module:utils:focustracker~FocusTracker}
 		 */
 		this.focusTracker = new FocusTracker();
-		this.focusTracker.add( editor.ui.view.editableElement );
-		this.focusTracker.add( this.toolbarView.element );
+
+		// Wait for the EditorUI#init. EditableElement is not available before.
+		editor.once( 'uiReady', () => {
+			this.focusTracker.add( editor.ui.view.editableElement );
+			this.focusTracker.add( this.toolbarView.element );
+		} );
 
 		/**
 		 * The contextual balloon plugin instance.

+ 2 - 2
packages/ckeditor5-ui/tests/manual/tickets/418/1.js

@@ -5,7 +5,7 @@
 
 /* globals window, document, console:false */
 
-import BalloonEditor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor';
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
 import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
 import List from '@ckeditor/ckeditor5-list/src/list';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
@@ -19,7 +19,7 @@ import Link from '@ckeditor/ckeditor5-link/src/link';
 import BlockToolbar from '../../../../src/toolbar/block/blocktoolbar';
 import BalloonToolbar from '../../../../src/toolbar/balloon/balloontoolbar';
 
-BalloonEditor
+ClassicEditor
 	.create( document.querySelector( '#editor' ), {
 		plugins: [
 			Essentials,

+ 1 - 2
packages/ckeditor5-ui/tests/panel/balloon/balloonpanelview.js

@@ -9,7 +9,6 @@ import ViewCollection from '../../../src/viewcollection';
 import BalloonPanelView from '../../../src/panel/balloon/balloonpanelview';
 import ButtonView from '../../../src/button/buttonview';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
-import * as positionUtils from '@ckeditor/ckeditor5-utils/src/dom/position';
 
 testUtils.createSinonSandbox();
 
@@ -173,7 +172,7 @@ describe( 'BalloonPanelView', () => {
 		} );
 
 		it( 'should use default options', () => {
-			const spy = testUtils.sinon.spy( positionUtils, 'getOptimalPosition' );
+			const spy = testUtils.sinon.spy( BalloonPanelView, '_getOptimalPosition' );
 
 			view.attachTo( { target } );
 

+ 4 - 3
packages/ckeditor5-ui/theme/components/list/list.css

@@ -8,8 +8,6 @@
 .ck.ck-list {
 	@mixin ck-unselectable;
 
-	/* Crop the the items when the list has huge border-radius. */
-	overflow: hidden;
 	display: flex;
 	flex-direction: column;
 
@@ -18,7 +16,10 @@
 		display: block;
 	}
 
-	& .ck-list__item:focus {
+	/* Make sure that whatever child of the list item gets focus, it remains on the
+	top. Thanks to that, styles like box-shadow, outline, etc. are not masked by
+	adjacent list items. */
+	& .ck-list__item > *:focus {
 		position: relative;
 		z-index: var(--ck-z-default);
 	}

+ 11 - 6
packages/ckeditor5-ui/theme/components/panel/balloonpanel.css

@@ -3,6 +3,11 @@
  * For licensing, see LICENSE.md.
  */
 
+:root {
+	/* Make sure the balloon arrow does not float over its children. */
+	--ck-balloon-panel-arrow-z-index: calc(var(--ck-z-default) - 3);
+}
+
 .ck.ck-balloon-panel {
 	display: none;
 	position: absolute;
@@ -17,31 +22,31 @@
 		}
 
 		&::before {
-			z-index: var(--ck-z-default);
+			z-index: var(--ck-balloon-panel-arrow-z-index);
 		}
 
 		&::after {
-			z-index: calc(var(--ck-z-default) + 1 );
+			z-index: calc(var(--ck-balloon-panel-arrow-z-index) + 1);
 		}
 	}
 
 	&[class*="arrow_n"] {
 		&::before {
-			z-index: var(--ck-z-default);
+			z-index: var(--ck-balloon-panel-arrow-z-index);
 		}
 
 		&::after {
-			z-index: calc(var(--ck-z-default) + 1);
+			z-index: calc(var(--ck-balloon-panel-arrow-z-index) + 1);
 		}
 	}
 
 	&[class*="arrow_s"] {
 		&::before {
-			z-index: var(--ck-z-default);
+			z-index: var(--ck-balloon-panel-arrow-z-index);
 		}
 
 		&::after {
-			z-index: calc(var(--ck-z-default) + 1);
+			z-index: calc(var(--ck-balloon-panel-arrow-z-index) + 1);
 		}
 	}