8
0
فهرست منبع

Replace div with unordered list, which better fit in this context. Correct css.

Mateusz Samsel 6 سال پیش
والد
کامیت
dde093d13d

+ 16 - 3
packages/ckeditor5-link/src/ui/linkformview.js

@@ -289,10 +289,23 @@ export default class LinkFormView extends View {
 		if ( this.customAttributes.length ) {
 			const additionalButtonsView = new View();
 			additionalButtonsView.setTemplate( {
-				tag: 'div',
-				children: [ ...this.customAttributesView ],
+				tag: 'ul',
+				children: this.customAttributesView.map( switchButton => ( {
+					tag: 'li',
+					children: [ switchButton ],
+					attributes: {
+						class: [
+							'ck',
+							'ck-list__item'
+						]
+					}
+				} ) ),
 				attributes: {
-					class: 'ck-link-form_additional-buttons'
+					class: [
+						'ck',
+						'ck-reset',
+						'ck-list'
+					]
 				}
 			} );
 			children.add( additionalButtonsView );

+ 3 - 0
packages/ckeditor5-link/tests/manual/linkdecorator.js

@@ -13,6 +13,9 @@ import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import Undo from '@ckeditor/ckeditor5-undo/src/undo';
 import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
 
+// Just to have nicely styles switchbutton;
+import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css';
+
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
 		plugins: [ Link, Typing, Paragraph, Clipboard, Undo, Enter ],

+ 2 - 4
packages/ckeditor5-link/theme/linkform.css

@@ -20,14 +20,12 @@
 
 	/* Buttons like `open in new window` with switch toggler.
 	Added div is a temporary solution to make stronger specificity than `.ck.ck-link-form > :not(:first-child)` in theme-lark. */
-	& div.ck-link-form_additional-buttons {
-		display: flex;
-		flex-wrap: wrap;
+	& ul.ck-list {
 		margin-left: 0;
 		width: 100%;
 	}
 
-	& .ck-link-form_additional-buttons .ck-button {
+	& .ck-list .ck-switchbutton {
 		width: 100%;
 		margin-left: 0;
 		margin-top: var(--ck-spacing-standard);