8
0
Oskar Wróbel 8 лет назад
Родитель
Сommit
486fd7c6e1

+ 11 - 64
packages/ckeditor5-ui/tests/manual/tickets/170/1.html

@@ -1,70 +1,14 @@
-<div class="container-a">
-	<div class="container-b">
+<div class="container-outer">
+	<div class="container-inner">
 		<div>
 			<div id="editor-attach">
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
 				<p>Balloon is attached to the <strong>TARGET</strong> element.</p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
 			</div>
 		</div>
 
 		<div>
 			<div id="editor-stick">
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
 				<p>Balloon sticks to the <strong>TARGET</strong> element.</p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
-				<p></p>
 			</div>
 		</div>
 	</div>
@@ -75,22 +19,25 @@
 		height: 100%;
 	}
 
-	.balloon-content {
-		padding: 10px;
-		font-size: 16px;
+	.ck-balloon-panel {
+		padding: 2em;
 	}
 
 	.ck-editor__editable {
 		max-height: 300px;
 	}
 
-	.container-a {
+	.ck-editor__editable p {
+		margin: 470px 0;
+	}
+
+	.container-outer {
 		height: 500px;
 		width: 750px;
 		overflow: scroll;
 	}
 
-	.container-b {
+	.container-inner {
 		padding: 500px 30px 30px;
 		display: flex;
 		width: 1000px;
@@ -98,7 +45,7 @@
 		background: #e1e1e1;
 	}
 
-	.container-b > div {
+	.container-inner > div {
 		margin: 0 20px;
 	}
 </style>

+ 4 - 25
packages/ckeditor5-ui/tests/manual/tickets/170/1.js

@@ -8,30 +8,9 @@
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classic';
 import ArticlePresets from '@ckeditor/ckeditor5-presets/src/article';
 import BalloonPanelView from '@ckeditor/ckeditor5-ui/src/panel/balloon/balloonpanelview';
-import View from '@ckeditor/ckeditor5-ui/src/view';
-import Template from '@ckeditor/ckeditor5-ui/src/template';
 
-// Content of the balloon panel.
-class BalloonContentView extends View {
-	constructor() {
-		super();
-
-		this.template = new Template( {
-			tag: 'div',
-			attributes: {
-				class: 'balloon-content'
-			},
-			children: [
-				{
-					text: 'Balloon'
-				}
-			]
-		} );
-	}
-}
-
-// Set initial scroll of one of the container element.
-document.querySelector( '.container-a' ).scrollTop = 450;
+// Set initial scroll for the outer container element.
+document.querySelector( '.container-outer' ).scrollTop = 450;
 
 // Init editor with balloon attached to the target element.
 ClassicEditor.create( document.querySelector( '#editor-attach' ), {
@@ -41,7 +20,7 @@ ClassicEditor.create( document.querySelector( '#editor-attach' ), {
 .then( editor => {
 	const panel = new BalloonPanelView();
 
-	panel.content.add( new BalloonContentView() );
+	panel.element.innerHTML = 'Balloon content.';
 	editor.ui.view.body.add( panel );
 
 	editor.ui.view.element.querySelector( '.ck-editor__editable' ).scrollTop = 360;
@@ -67,7 +46,7 @@ ClassicEditor.create( document.querySelector( '#editor-stick' ), {
 .then( editor => {
 	const panel = new BalloonPanelView();
 
-	panel.content.add( new BalloonContentView() );
+	panel.element.innerHTML = 'Balloon content.';
 	editor.ui.view.body.add( panel );
 
 	editor.ui.view.element.querySelector( '.ck-editor__editable' ).scrollTop = 360;