Преглед изворни кода

Fix split button styling and related class names.

panr пре 5 година
родитељ
комит
8b81dfaa75

+ 9 - 0
packages/ckeditor5-image/src/imageinsert/imageinsertui.js

@@ -130,6 +130,15 @@ export default class ImageInsertUI extends Plugin {
 		const splitButtonView = dropdownView.buttonView;
 
 		splitButtonView.actionView = editor.ui.componentFactory.create( 'imageUpload' );
+		// After we replaced action button with `imageUpload` component,
+		// we have lost a proper styling and some minor visual quirks have appeared.
+		// Brining back original split button classes helps fix the button styling
+		// See https://github.com/ckeditor/ckeditor5/issues/7986.
+		splitButtonView.actionView.extendTemplate( {
+			attributes: {
+				class: 'ck ck-button ck-splitbutton__action'
+			}
+		} );
 
 		panelView.children.add( imageInsertView );
 

+ 3 - 3
packages/ckeditor5-image/src/imageinsert/ui/imageinsertpanelview.js

@@ -151,7 +151,7 @@ export default class ImageInsertPanelView extends View {
 			attributes: {
 				class: [
 					'ck',
-					'ck-image-upload-form'
+					'ck-image-insert-form'
 				],
 
 				tabindex: '-1'
@@ -164,7 +164,7 @@ export default class ImageInsertPanelView extends View {
 						this.insertButtonView,
 						this.cancelButtonView
 					],
-					class: 'ck-image-upload-form__action-row'
+					class: 'ck-image-insert-form__action-row'
 				} )
 			]
 		} );
@@ -247,7 +247,7 @@ export default class ImageInsertPanelView extends View {
 
 		panelView.extendTemplate( {
 			attributes: {
-				class: 'ck-image-upload__panel'
+				class: 'ck-image-insert__panel'
 			}
 		} );
 

+ 1 - 1
packages/ckeditor5-image/src/imageinsert/utils.js

@@ -35,7 +35,7 @@ export function prepareIntegrations( editor ) {
 		const ckFinderButton = editor.ui.componentFactory.create( 'ckfinder' );
 		ckFinderButton.set( {
 			withText: true,
-			class: 'ck-image-upload__ck-finder-button'
+			class: 'ck-image-insert__ck-finder-button'
 		} );
 
 		// We want to close the dropdown panel view when user clicks the ckFinderButton.

+ 1 - 1
packages/ckeditor5-image/tests/imageinsert/ui/imageinsertpanelview.js

@@ -140,7 +140,7 @@ describe( 'ImageUploadPanelView', () => {
 	describe( 'template', () => {
 		it( 'should create element from the template', () => {
 			expect( view.element.classList.contains( 'ck' ) ).to.true;
-			expect( view.element.classList.contains( 'ck-image-upload-form' ) ).to.true;
+			expect( view.element.classList.contains( 'ck-image-insert-form' ) ).to.true;
 			expect( view.element.getAttribute( 'tabindex' ) ).to.equal( '-1' );
 		} );
 

+ 1 - 1
packages/ckeditor5-image/tests/imageinsert/utils.js

@@ -43,7 +43,7 @@ describe( 'Upload utils', () => {
 
 			const openCKFinderExtendedView = Object.values( prepareIntegrations( editor ) )[ 1 ];
 
-			expect( openCKFinderExtendedView.class ).contains( 'ck-image-upload__ck-finder-button' );
+			expect( openCKFinderExtendedView.class ).contains( 'ck-image-insert__ck-finder-button' );
 			expect( openCKFinderExtendedView.label ).to.equal( 'Insert image or file' );
 			expect( openCKFinderExtendedView.withText ).to.be.true;
 

+ 9 - 2
packages/ckeditor5-image/theme/imageinsert.css

@@ -3,14 +3,21 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-.ck.ck-image-upload__panel {
+.ck.ck-image-insert__panel {
 	padding: var(--ck-spacing-standard);
 }
 
-.ck.ck-image-upload__ck-finder-button {
+.ck.ck-image-insert__ck-finder-button {
 	display: block;
 	width: 100%;
 	margin: var(--ck-spacing-standard) auto;
 	border: 1px solid hsl(0, 0%, 80%);
 	border-radius: var(--ck-border-radius);
 }
+
+/* https://github.com/ckeditor/ckeditor5/issues/7986 */
+.ck.ck-splitbutton > .ck-file-dialog-button.ck-button {
+	padding: 0;
+	margin: 0;
+	border: none;
+}

+ 1 - 1
packages/ckeditor5-image/theme/imageinsertformrowview.css

@@ -14,7 +14,7 @@
 		flex-grow: 1;
 	}
 
-	&.ck-image-upload-form__action-row {
+	&.ck-image-insert-form__action-row {
 		margin-top: var(--ck-spacing-standard);
 
 		& .ck-button-save,