New positions added to drop down panel positions.

packages/ckeditor5-ui/src/dropdown/dropdownview.js

@@ -313,12 +313,19 @@ export default class DropdownView extends View {
 	 * @private
 	 */
 	get _panelPositions() {
-		const { southEast, southWest, northEast, northWest } = DropdownView.defaultPanelPositions;
+		const { south, north,
+			southEast, southWest,
+			northEast, northWest,
+			southMiddleEast, southMiddleWest,
+			northMiddleEast, northhMiddleWest
+		} = DropdownView.defaultPanelPositions;
 
 		if ( this.locale.uiLanguageDirection === 'ltr' ) {
-			return [ southEast, southWest, northEast, northWest ];
+			return [ southEast, southMiddleEast, southMiddleWest, southWest, south,
+				northEast, northMiddleEast, northhMiddleWest, northWest, north ];
 		} else {
-			return [ southWest, southEast, northWest, northEast ];
+			return [ southWest, southMiddleWest, southMiddleEast, southEast, south,
+				northWest, northhMiddleWest, northMiddleEast, northEast, north ];
 		}
 	}
 }
@@ -333,6 +340,13 @@ export default class DropdownView extends View {
  *
  * **South**
  *
+ * * `south`
+ *
+ *			[ Button ]
+ *		+-----------------+
+ *		|      Panel      |
+ *		+-----------------+
+ *
  * * `southEast`
  *
  *		[ Button ]
@@ -372,6 +386,13 @@ export default class DropdownView extends View {
  * @member {Object} module:ui/dropdown/dropdownview~DropdownView.defaultPanelPositions
  */
 DropdownView.defaultPanelPositions = {
+	south: ( buttonRect, panelRect ) => {
+		return {
+			top: buttonRect.bottom,
+			left: buttonRect.left - panelRect.width / 2 + buttonRect.width / 2,
+			name: 's'
+		};
+	},
 	southEast: buttonRect => {
 		return {
 			top: buttonRect.bottom,
@@ -386,6 +407,27 @@ DropdownView.defaultPanelPositions = {
 			name: 'sw'
 		};
 	},
+	southMiddleEast: ( buttonRect, panelRect ) => {
+		return {
+			top: buttonRect.bottom,
+			left: buttonRect.left - panelRect.width / 4 + buttonRect.width / 2,
+			name: 'sme'
+		};
+	},
+	southMiddleWest: ( buttonRect, panelRect ) => {
+		return {
+			top: buttonRect.bottom,
+			left: buttonRect.left - panelRect.width * 3 / 4 + buttonRect.width / 2,
+			name: 'smw'
+		};
+	},
+	north: ( buttonRect, panelRect ) => {
+		return {
+			top: buttonRect.top - panelRect.height,
+			left: buttonRect.left - panelRect.width / 2 + buttonRect.width / 2,
+			name: 'n'
+		};
+	},
 	northEast: ( buttonRect, panelRect ) => {
 		return {
 			top: buttonRect.top - panelRect.height,
@@ -399,6 +441,20 @@ DropdownView.defaultPanelPositions = {
 			left: buttonRect.left - panelRect.width + buttonRect.width,
 			name: 'nw'
 		};
+	},
+	northMiddleEast: ( buttonRect, panelRect ) => {
+		return {
+			top: buttonRect.top - panelRect.height,
+			left: buttonRect.left - panelRect.width / 4 + buttonRect.width / 2,
+			name: 'nme'
+		};
+	},
+	northhMiddleWest: ( buttonRect, panelRect ) => {
+		return {
+			top: buttonRect.top - panelRect.height,
+			left: buttonRect.left - panelRect.width * 3 / 4 + buttonRect.width / 2,
+			name: 'nmw'
+		};
 	}
 };
 

packages/ckeditor5-ui/tests/dropdown/dropdownview.js

@@ -135,23 +135,23 @@ describe( 'DropdownView', () => {
 				describe( 'in "auto" mode', () => {
 					it( 'uses _getOptimalPosition() and a dedicated set of positions (LTR)', () => {
 						const spy = testUtils.sinon.spy( DropdownView, '_getOptimalPosition' );
-						const { southEast, southWest, northEast, northWest } = DropdownView.defaultPanelPositions;
+						const { southEast, southWest, northEast, northWest, south } = DropdownView.defaultPanelPositions;
 
 						view.isOpen = true;
 
 						sinon.assert.calledWithExactly( spy, sinon.match( {
 							element: panelView.element,
 							target: buttonView.element,
 							positions: [
-								southEast, southWest, northEast, northWest
+								southEast, southWest, northEast, northWest, south
 							],
 							fitInViewport: true
 						} ) );
 					} );
 
 					it( 'uses _getOptimalPosition() and a dedicated set of positions (RTL)', () => {
 						const spy = testUtils.sinon.spy( DropdownView, '_getOptimalPosition' );
-						const { southEast, southWest, northEast, northWest } = DropdownView.defaultPanelPositions;
+						const { southEast, southWest, northEast, northWest, south } = DropdownView.defaultPanelPositions;
 
 						view.locale.uiLanguageDirection = 'rtl';
 						view.isOpen = true;
@@ -160,7 +160,7 @@ describe( 'DropdownView', () => {
 							element: panelView.element,
 							target: buttonView.element,
 							positions: [
-								southWest, southEast, northWest, northEast
+								southWest, southEast, northWest, northEast, south
 							],
 							fitInViewport: true
 						} ) );
@@ -352,7 +352,15 @@ describe( 'DropdownView', () => {
 		} );
 
 		it( 'should have a proper length', () => {
-			expect( Object.keys( positions ) ).to.have.length( 4 );
+			expect( Object.keys( positions ) ).to.have.length( 5 );
+		} );
+
+		it( 'should define the "south" position', () => {
+			expect( positions.south( buttonRect, panelRect ) ).to.deep.equal( {
+				top: 200,
+				left: 125,
+				name: 's'
+			} );
 		} );
 
 		it( 'should define the "southEast" position', () => {

packages/ckeditor5-ui/theme/components/dropdown/dropdown.css

@@ -5,6 +5,10 @@
 
 @import "../tooltip/mixins/_tooltip.css";
 
+:root {
+	--ck-dropdown-max-width: 75vw;
+}
+
 .ck.ck-dropdown {
 	display: inline-block;
 	position: relative;
@@ -32,6 +36,7 @@
 
 		display: none;
 		z-index: var(--ck-z-modal);
+		max-width: var(--ck-dropdown-max-width);
 
 		position: absolute;
 
@@ -40,12 +45,18 @@
 		}
 
 		&.ck-dropdown__panel_ne,
-		&.ck-dropdown__panel_nw {
+		&.ck-dropdown__panel_nw,
+		&.ck-dropdown__panel_n,
+		&.ck-dropdown__panel_nmw,
+		&.ck-dropdown__panel_nme {
 			bottom: 100%;
 		}
 
 		&.ck-dropdown__panel_se,
-		&.ck-dropdown__panel_sw {
+		&.ck-dropdown__panel_sw,
+		&.ck-dropdown__panel_smw,
+		&.ck-dropdown__panel_sme,
+		&.ck-dropdown__panel_s {
 			/*
 			 * Using transform: translate3d( 0, 100%, 0 ) causes blurry dropdown on Chrome 67-78+ on non-retina displays.
 			 * See https://github.com/ckeditor/ckeditor5/issues/1053.
@@ -63,6 +74,31 @@
 		&.ck-dropdown__panel_sw {
 			right: 0px;
 		}
+
+		&.ck-dropdown__panel_s,
+		&.ck-dropdown__panel_smw,
+		&.ck-dropdown__panel_sme,
+		&.ck-dropdown__panel_n,
+		&.ck-dropdown__panel_nmw,
+		&.ck-dropdown__panel_nme {
+			/* Positioning all panels not aligned to button edge relatively to the center of the button */
+			left: 50%;
+		}
+
+		&.ck-dropdown__panel_s,
+		&.ck-dropdown__panel_n {
+			transform: translateX(-50%);
+		}
+
+		&.ck-dropdown__panel_smw,
+		&.ck-dropdown__panel_nmw {
+			transform: translateX(-75%);
+		}
+
+		&.ck-dropdown__panel_sme,
+		&.ck-dropdown__panel_nme {
+			transform: translateX(-25%);
+		}
 	}
 }
 

packages/ckeditor5-ui/theme/components/dropdown/toolbardropdown.css

@@ -7,16 +7,14 @@
 	--ck-toolbar-dropdown-max-width: 60vw;
 }
 
-.ck.ck-toolbar-dropdown {
-	& .ck-dropdown__panel {
-		/* https://github.com/ckeditor/ckeditor5/issues/5586 */
-		width: max-content;
-		max-width: var(--ck-toolbar-dropdown-max-width);
+.ck.ck-toolbar-dropdown > .ck-dropdown__panel {
+	/* https://github.com/ckeditor/ckeditor5/issues/5586 */
+	width: max-content;
+	max-width: var(--ck-toolbar-dropdown-max-width);
 
-		& .ck-button {
-			&:focus {
-				z-index: calc(var(--ck-z-default) + 1);
-			}
+	& .ck-button {
+		&:focus {
+			z-index: calc(var(--ck-z-default) + 1);
 		}
 	}
 }