Răsfoiți Sursa

Changed button parameter.

Oskar Wrobel 9 ani în urmă
părinte
comite
9bf0a61dfe

+ 8 - 9
packages/ckeditor5-theme-lark/tests/manual/theme.js

@@ -161,14 +161,12 @@ function renderButton( ui ) {
 		isEnabled: false
 	} ) );
 
-	const notextButton = button( {
+	ui.add( 'button-icon-states', button( {
 		label: 'Bold',
-		noText: true,
+		withText: false,
 		icon: 'bold',
 		iconAlign: 'left'
-	} );
-
-	ui.add( 'button-icon-states', notextButton );
+	} ) );
 
 	const colChangeButton = button( {
 		label: 'Icon follows text color',
@@ -198,7 +196,7 @@ function renderButton( ui ) {
 
 		const notextButton = button( {
 			label: 'Link',
-			noText: true,
+			withText: false,
 			icon: 'link',
 			iconAlign: 'left'
 		} );
@@ -352,12 +350,12 @@ function icon( name ) {
 
 function button( {
 	label = 'Button',
-	noText = false,
 	isEnabled = true,
 	isOn = false,
+	withText = true,
 	icon, iconAlign
 } = {} ) {
-	const model = new Model( { label, noText, isEnabled, isOn, icon, iconAlign } );
+	const model = new Model( { label, isEnabled, isOn, withText, icon, iconAlign } );
 
 	return new Button( model, new ButtonView() );
 }
@@ -376,9 +374,10 @@ function dropdown( {
 	label = 'Dropdown',
 	isEnabled = true,
 	isOn = false,
+	withText = true,
 	content = new Model( { items: new Collection( { idProperty: 'label' } ) } )
 } = {} ) {
-	const model = new Model( { label, isEnabled, content, isOn } );
+	const model = new Model( { label, isEnabled, content, isOn, withText } );
 	const dropdown = new ListDropdown( model, new ListDropdownView() );
 
 	return dropdown;

+ 20 - 15
packages/ckeditor5-theme-lark/theme/components/button.scss

@@ -67,22 +67,34 @@
 a.ck-button {
 	display: inline-block;
 	overflow: hidden;
-	padding: ck-spacing( 'small' ) ck-spacing();
+	padding: ck-spacing( 'small' );
 
 	@include ck-button( 'background' );
 	@include ck-unselectable();
 	@include ck-rounded-corners();
 
-	&.ck-button-notext {
-		padding: ck-spacing( 'small' );
+	@include ck-button-icon {
+		margin-left: 0;
+		margin-right: 0;
+	}
+
+	&.ck-button-with-text {
+		padding: ck-spacing( 'small' ) ck-spacing();
 
-		@include ck-button-icon {
-			margin-left: 0;
-			margin-right: 0;
+		.ck-icon {
+			&-left {
+				margin-left: -#{ck-spacing( 'small' )};
+				margin-right: ck-spacing( 'small' );
+			}
+
+			&-right {
+				margin-right: -#{ck-spacing( 'small' )};
+				margin-left: ck-spacing( 'small' );
+			}
 		}
 
 		.ck-button__label {
-			display: none;
+			display: block;
 		}
 	}
 
@@ -112,17 +124,10 @@ a.ck-button {
 		use * {
 			color: inherit;
 		}
-
-		&-left {
-			margin-left: -#{ck-spacing( 'small' )};
-		}
-
-		&-right {
-			margin-right: -#{ck-spacing( 'small' )};
-		}
 	}
 
 	.ck-button__label {
+		display: none;
 		float: left;
 		line-height: inherit;
 		font-size: inherit;