Browse Source

Buttons separators in RWD mobile should not be full height

Paweł Kwaśnik 5 years ago
parent
commit
5d22fa5f9f

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

@@ -24,6 +24,7 @@ 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.
@@ -85,6 +86,8 @@ 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}
@@ -331,6 +334,7 @@ export default class LinkFormView extends View {
 		}
 
 		children.add( this.saveButtonView );
+		children.add( this.separatorView );
 		children.add( this.cancelButtonView );
 
 		return children;

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

@@ -45,14 +45,17 @@ 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.cancelButtonView );
+			expect( view.children.get( 2 ) ).to.equal( view.separatorView );
+			expect( view.children.get( 3 ) ).to.equal( view.cancelButtonView );
 		} );
 
 		it( 'should create #focusTracker instance', () => {
@@ -94,7 +97,8 @@ 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.cancelButtonView );
+				expect( view.template.children[ 0 ].get( 2 ) ).to.equal( view.separatorView );
+				expect( view.template.children[ 0 ].get( 3 ) ).to.equal( view.cancelButtonView );
 			} );
 		} );
 	} );

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

@@ -20,7 +20,32 @@
 		}
 
 		& .ck-button {
-			flex-basis: 50%;
+			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);
+			}
 		}
 	}
 }

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

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