8
0
Pārlūkot izejas kodu

Added a label and and outline to the html embed widgets to improve contrast.

Aleksander Nowodzinski 5 gadi atpakaļ
vecāks
revīzija
98d32a452a

+ 1 - 0
packages/ckeditor5-html-embed/src/htmlembedediting.js

@@ -207,6 +207,7 @@ export default class HtmlEmbedEditing extends Plugin {
 
 				writer.setCustomProperty( 'rawHtmlApi', rawHtmlApi, viewContainer );
 				writer.setCustomProperty( 'rawHtml', true, viewContainer );
+				writer.setAttribute( 'data-html-embed-label', t( 'HTML snippet' ), viewContainer );
 
 				return toWidget( viewContainer, writer, {
 					widgetLabel: t( 'HTML snippet' ),

+ 7 - 0
packages/ckeditor5-html-embed/tests/htmlembedediting.js

@@ -242,6 +242,13 @@ describe( 'HtmlEmbedEditing', () => {
 				expect( contentWrapper.hasClass( 'raw-html-embed__content-wrapper' ) );
 			} );
 
+			it( 'the widget should have the data-html-embed-label attribute for the CSS label', () => {
+				setModelData( model, '<rawHtml></rawHtml>' );
+				const widget = viewDocument.getRoot().getChild( 0 );
+
+				expect( widget.getAttribute( 'data-html-embed-label' ) ).to.equal( 'HTML snippet' );
+			} );
+
 			it( 'the main element should expose rawHtmlApi custom property', () => {
 				setModelData( model, '<rawHtml></rawHtml>' );
 				const widget = viewDocument.getRoot().getChild( 0 );

+ 8 - 0
packages/ckeditor5-html-embed/theme/htmlembed.css

@@ -9,6 +9,14 @@
 	margin: 1em auto;
 	position: relative;
 
+	/* ----- Emebed label in the upper left corner ----------------------------------------------- */
+
+	&::before {
+		position: absolute;
+	}
+
+	/* ----- Emebed internals --------------------------------------------------------------------- */
+
 	/* The switch mode button wrapper. */
 	& .raw-html-embed__buttons-wrapper {
 		position: absolute;

+ 42 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-html-embed/htmlembed.css

@@ -6,6 +6,7 @@
 :root {
 	--ck-html-embed-content-width: calc(100% - 1.5 * var(--ck-icon-size));
 	--ck-html-embed-source-height: 10em;
+	--ck-html-embed-unfocused-outline-width: 1px;
 	--ck-html-embed-content-min-height: calc(var(--ck-icon-size) + var(--ck-spacing-standard));
 }
 
@@ -14,6 +15,47 @@
 	font-size: var(--ck-font-size-base);
 	background-color: var(--ck-color-base-foreground);
 
+	&:not(.ck-widget_selected):not(:hover) {
+		outline: var(--ck-html-embed-unfocused-outline-width) dashed var(--ck-color-widget-blurred-border);
+	}
+
+	& .ck-widget__type-around .ck-widget__type-around__button.ck-widget__type-around__button_before {
+		margin-left: 50px;
+	}
+
+	/* ----- Emebed label in the upper left corner ----------------------------------------------- */
+
+	&::before {
+		content: attr(data-html-embed-label);
+		top: calc(-1 * var(--ck-html-embed-unfocused-outline-width));
+		left: var(--ck-spacing-standard);
+		background: hsl(0deg 0% 60%);
+		transition: background var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
+		padding: calc(var(--ck-spacing-tiny) + var(--ck-html-embed-unfocused-outline-width)) var(--ck-spacing-small) var(--ck-spacing-tiny);
+		border-radius: 0 0 var(--ck-border-radius) var(--ck-border-radius);
+		color: var(--ck-color-base-background);
+		font-size: var(--ck-font-size-tiny);
+		font-family: var(--ck-font-face);
+	}
+
+	@nest .ck.ck-editor__editable.ck-blurred &.ck-widget_selected::before {
+		top: 0px;
+		padding: var(--ck-spacing-tiny) var(--ck-spacing-small);
+	}
+
+	@nest .ck.ck-editor__editable:not(.ck-blurred) &.ck-widget_selected::before {
+		top: 0;
+		padding: var(--ck-spacing-tiny) var(--ck-spacing-small);
+		background: var(--ck-color-focus-border);
+	}
+
+	@nest .ck.ck-editor__editable &:not(.ck-widget_selected):hover::before {
+		top: 0px;
+		padding: var(--ck-spacing-tiny) var(--ck-spacing-small);
+	}
+
+	/* ----- Emebed internals --------------------------------------------------------------------- */
+
 	& .raw-html-embed__content-wrapper {
 		padding: var(--ck-spacing-standard);
 	}