Browse Source

Revert "Buttons separators in RWD mobile should not be full height"

This reverts commit 5d22fa5f9fc46efab75234b26218fe5ef6891725.
Paweł Kwaśnik 5 years ago
parent
commit
0c25b60b8a

+ 0 - 4
packages/ckeditor5-link/src/ui/linkformview.js

@@ -24,7 +24,6 @@ import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
 import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
 import '../../theme/linkform.css';
-import ToolbarSeparatorView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarseparatorview';
 
 /**
  * The link form view controller class.
@@ -86,8 +85,6 @@ export default class LinkFormView extends View {
 		 */
 		this.cancelButtonView = this._createButton( t( 'Cancel' ), cancelIcon, 'ck-button-cancel', 'cancel' );
 
-		this.separatorView = new ToolbarSeparatorView();
-
 		/**
 		 * A collection of {@link module:ui/button/switchbuttonview~SwitchButtonView},
 		 * which corresponds to {@link module:link/linkcommand~LinkCommand#manualDecorators manual decorators}
@@ -334,7 +331,6 @@ export default class LinkFormView extends View {
 		}
 
 		children.add( this.saveButtonView );
-		children.add( this.separatorView );
 		children.add( this.cancelButtonView );
 
 		return children;

+ 2 - 6
packages/ckeditor5-link/tests/ui/linkformview.js

@@ -45,17 +45,14 @@ describe( 'LinkFormView', () => {
 		it( 'should create child views', () => {
 			expect( view.urlInputView ).to.be.instanceOf( View );
 			expect( view.saveButtonView ).to.be.instanceOf( View );
-			expect( view.separatorView ).to.be.instanceOf( View );
 			expect( view.cancelButtonView ).to.be.instanceOf( View );
 
 			expect( view.saveButtonView.element.classList.contains( 'ck-button-save' ) ).to.be.true;
-			expect( view.separatorView.element.classList.contains( 'ck-toolbar__separator' ) ).to.be.true;
 			expect( view.cancelButtonView.element.classList.contains( 'ck-button-cancel' ) ).to.be.true;
 
 			expect( view.children.get( 0 ) ).to.equal( view.urlInputView );
 			expect( view.children.get( 1 ) ).to.equal( view.saveButtonView );
-			expect( view.children.get( 2 ) ).to.equal( view.separatorView );
-			expect( view.children.get( 3 ) ).to.equal( view.cancelButtonView );
+			expect( view.children.get( 2 ) ).to.equal( view.cancelButtonView );
 		} );
 
 		it( 'should create #focusTracker instance', () => {
@@ -97,8 +94,7 @@ describe( 'LinkFormView', () => {
 
 			it( 'has button views', () => {
 				expect( view.template.children[ 0 ].get( 1 ) ).to.equal( view.saveButtonView );
-				expect( view.template.children[ 0 ].get( 2 ) ).to.equal( view.separatorView );
-				expect( view.template.children[ 0 ].get( 3 ) ).to.equal( view.cancelButtonView );
+				expect( view.template.children[ 0 ].get( 2 ) ).to.equal( view.cancelButtonView );
 			} );
 		} );
 	} );

+ 1 - 26
packages/ckeditor5-link/theme/linkform.css

@@ -20,32 +20,7 @@
 		}
 
 		& .ck-button {
-			flex-grow: 1;
-		}
-
-		& .ck-toolbar__separator {
-			align-self: stretch;
-			width: 1px;
-			min-width: 1px;
-			background: var(--ck-color-toolbar-border);
-
-			/*
-			 * These margins make the separators look better in balloon toolbars (when aligned with the "tip").
-			 * See https://github.com/ckeditor/ckeditor5/issues/7493.
-			 */
-			margin-top: calc(var(--ck-spacing-large) + var(--ck-spacing-extra-tiny));
-			margin-bottom: var(--ck-spacing-small);
-
-			&::before {
-				content: ".";
-				display: inline-block;
-				position: relative;
-				top: -5px;
-				width: 1px;
-				height: 1px;
-				color: var(--ck-color-base-background);
-				background-color: var(--ck-color-toolbar-border);
-			}
+			flex-basis: 50%;
 		}
 	}
 }

+ 4 - 6
packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css

@@ -27,12 +27,6 @@
 	}
 
 	@mixin ck-media-phone {
-		@mixin ck-dir ltr {
-			& > :not(:first-child) {
-				margin-left: 0;
-			}
-		}
-
 		padding: 0;
 		width: calc(.8 * var(--ck-input-text-width));
 
@@ -55,6 +49,10 @@
 
 			@mixin ck-dir ltr {
 				margin-left: 0;
+
+				&:first-of-type {
+					border-right: 1px solid var(--ck-color-base-border);
+				}
 			}
 
 			@mixin ck-dir rtl {