浏览代码

Aligned the list styles to the new ListItemView architecture.

Aleksander Nowodzinski 7 年之前
父节点
当前提交
eb0ac31fac

+ 3 - 3
packages/ckeditor5-theme-lark/tests/manual/inverted.html

@@ -59,9 +59,9 @@
 		/* -- Overrides the default .ck-list class colors ------------------------------------------- */
 
 		--ck-color-list-background: var(--ck-custom-background);
-		--ck-color-list-item-background-hover: var(--ck-custom-foreground);
-		--ck-color-list-item-background-active: hsl(208, 88%, 52%);
-		--ck-color-list-item-text-active: var(--ck-custom-white);
+		--ck-color-list-button-background-hover: var(--ck-custom-foreground);
+		--ck-color-list-button-background-active: hsl(208, 88%, 52%);
+		--ck-color-list-button-text-active: var(--ck-custom-white);
 
 		/* -- Overrides the default .ck-balloon-panel class colors ---------------------------------- */
 

+ 24 - 3
packages/ckeditor5-theme-lark/tests/manual/theme.js

@@ -231,14 +231,35 @@ function renderDropdown() {
 
 	[ 'Arial', 'Tahoma', 'Georgia' ].forEach( font => {
 		collection.add( new Model( {
-			label: font,
-			style: `font-family: ${ font }`
+			label: `${ font } (style attr)`,
+			style: `font-family: ${ font }`,
+			withText: true
 		} ) );
 	} );
 
 	collection.add( new Model( {
 		isSeparator: true
-	} ), 2 );
+	} ) );
+
+	collection.add( new Model( {
+		label: 'Bold',
+		withText: true,
+		icon: boldIcon
+	} ) );
+
+	collection.add( new Model( {
+		label: 'This item is on',
+		withText: true,
+		icon: boldIcon,
+		isOn: true
+	} ) );
+
+	collection.add( new Model( {
+		label: 'Disabled',
+		withText: true,
+		icon: boldIcon,
+		isEnabled: false
+	} ) );
 
 	ui.listDropdown.add( toolbar( [
 		listDropdown( {

+ 4 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-heading/heading.css

@@ -8,4 +8,8 @@
 	& .ck-dropdown__button .ck-button__label {
 		width: 8em;
 	}
+
+	& .ck-dropdown__panel .ck-list__item {
+		min-width: 18em;
+	}
 }

+ 0 - 7
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/listdropdown.css

@@ -11,11 +11,4 @@
 	@mixin ck-rounded-corners {
 		border-top-left-radius: 0;
 	}
-
-	/* Using absolute units to make sure each element has the same height and padding.
-	https://github.com/ckeditor/ckeditor5-heading/issues/63 */
-	& > .ck-list__item {
-		line-height: calc(.8*var(--ck-line-height-base)*var(--ck-font-size-base));
-		padding: calc(.4*var(--ck-line-height-base)*var(--ck-font-size-base));
-	}
 }

+ 32 - 19
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css

@@ -15,33 +15,46 @@
 }
 
 .ck.ck-list__item {
-	padding: var(--ck-spacing-medium);
 	cursor: default;
 	min-width: 12em;
 
-	&:hover,
-	&:focus {
-		background: var(--ck-color-list-item-background-hover);
-	}
+	& .ck-button {
+		min-height: unset;
+		width: 100%;
+		text-align: left;
+		border-radius: 0;
+		border: 0;
 
-	&:focus {
-		@mixin ck-box-shadow var(--ck-focus-outer-shadow);
+		/* List items should have the same height. Use absolute units to make sure it is so
+		   because e.g. different heading styles may have different height
+		   https://github.com/ckeditor/ckeditor5-heading/issues/63 */
+		padding:
+			calc(.2*var(--ck-line-height-base)*var(--ck-font-size-base))
+			calc(.4*var(--ck-line-height-base)*var(--ck-font-size-base));
 
-		outline: none;
-	}
+		& .ck-button__label {
+			/* https://github.com/ckeditor/ckeditor5-heading/issues/63 */
+			line-height: calc(1.2*var(--ck-line-height-base)*var(--ck-font-size-base));
+		}
 
-	&.ck-disabled {
-		@mixin ck-disabled;
-	}
-}
+		&:active {
+			box-shadow: none;
+		}
+
+		&.ck-on {
+			background: var(--ck-color-list-button-background-active);
+			color: var(--ck-color-list-button-text-active);
 
-.ck.ck-list__item_active {
-	background: var(--ck-color-list-item-background-active);
-	color: var(--ck-color-list-item-text-active);
+			&:hover:not(ck-disabled),
+			&:focus {
+				background: var(--ck-color-list-button-background-active-focus);
+			}
+		}
 
-	&:hover,
-	&:focus {
-		background: var(--ck-color-list-item-background-active-focus);
+		&:hover:not(.ck-disabled),
+		&:focus {
+			background: var(--ck-color-list-button-background-hover);
+		}
 	}
 }
 

+ 4 - 4
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_colors.css

@@ -62,10 +62,10 @@
 	/* -- List ---------------------------------------------------------------------------------- */
 
 	--ck-color-list-background: 								var(--ck-color-base-background);
-	--ck-color-list-item-background-hover: 						var(--ck-color-base-foreground);
-	--ck-color-list-item-background-active: 					var(--ck-color-base-active);
-	--ck-color-list-item-background-active-focus: 				var(--ck-color-base-active-focus);
-	--ck-color-list-item-text-active:							var(--ck-color-base-background);
+	--ck-color-list-button-background-hover: 					var(--ck-color-base-foreground);
+	--ck-color-list-button-background-active: 					var(--ck-color-base-active);
+	--ck-color-list-button-background-active-focus: 			var(--ck-color-base-active-focus);
+	--ck-color-list-button-text-active:							var(--ck-color-base-background);
 
 	/* -- Panel --------------------------------------------------------------------------------- */