ソースを参照

Improed visual representation of page break element.

dkonopka 6 年 前
コミット
1380d5838d

+ 7 - 0
packages/ckeditor5-page-break/src/pagebreakediting.js

@@ -58,10 +58,17 @@ export default class PageBreakEditing extends Plugin {
 			view: ( modelElement, viewWriter ) => {
 				const label = t( 'Page break' );
 				const viewWrapper = viewWriter.createContainerElement( 'div' );
+				const viewLabelElement = viewWriter.createContainerElement( 'span' );
+				const innerText = viewWriter.createText( t( 'Page break' ) );
 
 				viewWriter.addClass( 'ck-page-break', viewWrapper );
 				viewWriter.setCustomProperty( 'pageBreak', true, viewWrapper );
 
+				viewWriter.addClass( 'ck-page-break_label', viewLabelElement );
+
+				viewWriter.insert( viewWriter.createPositionAt( viewWrapper, 0 ), viewLabelElement );
+				viewWriter.insert( viewWriter.createPositionAt( viewLabelElement, 0 ), innerText );
+
 				return toPageBreakWidget( viewWrapper, viewWriter, label );
 			}
 		} );

+ 27 - 4
packages/ckeditor5-page-break/theme/pagebreak.css

@@ -4,9 +4,32 @@
  */
 
 .ck .ck-page-break {
+	position: relative;
 	clear: both;
-	padding: 5px;
-	border: 2px dashed var(--ck-color-toolbar-border);
-	border-left: 0;
-	border-right: 0;
+	padding: 5px 0;
+	display: flex;
+	justify-content: center;
+}
+
+.ck .ck-page-break::after {
+	content: '';
+	position: absolute;
+	border-bottom: 2px dashed var(--ck-color-toolbar-border);
+	width: 100%;
+	top: 50%;
+	transform: translateY( -50% );
+}
+
+.ck .ck-page-break_label {
+	position: relative;
+	z-index: var(--ck-z-default);
+	padding: var(--ck-spacing-tiny) var(--ck-spacing-standard);
+	display: block;
+	text-transform: uppercase;
+	border: 1px solid var(--ck-color-toolbar-border);
+	border-radius: var(--ck-border-radius);
+	font-size: var(--ck-font-size-small);
+	font-weight: bold;
+	color: var(--ck-color-toolbar-border);
+	background: var(--ck-color-base-background);
 }