Merge pull request #3 from ckeditor/t/2

Internal: Improved visual representation of page break element. Closes #2.
ckeditor · Sep 30, 2019 · 7ba8b66 · 7ba8b66
2 parents f5849d5 + 09b5ae3
commit 7ba8b66
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 5 deletions.
diff --git a/src/pagebreakediting.js b/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 );
 			}
 		} );

diff --git a/tests/pagebreakediting.js b/tests/pagebreakediting.js
@@ -209,7 +209,7 @@ describe( 'PageBreakEditing', () => {
 				setModelData( model, '<pageBreak></pageBreak>' );
 
 				expect( getViewData( view, { withoutSelection: true } ) ).to.equal(
-					'<div class="ck-page-break ck-widget" contenteditable="false"></div>'
+					'<div class="ck-page-break ck-widget" contenteditable="false"><span class="ck-page-break_label">Page break</span></div>'
 				);
 			} );
 

diff --git a/theme/pagebreak.css b/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;
+	align-items: center;
+	justify-content: center;
+}
+
+.ck .ck-page-break::after {
+	content: '';
+	position: absolute;
+	border-bottom: 2px dashed var(--ck-color-toolbar-border);
+	width: 100%;
+}
+
+.ck .ck-page-break_label {
+	position: relative;
+	z-index: var(--ck-z-default);
+	padding: var(--ck-spacing-small) 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-base-text);
+	background: var(--ck-color-base-background);
+	box-shadow: 2px 2px 1px var(--ck-color-shadow-drop);
 }