Procházet zdrojové kódy

Tests: Improved block toolbar manual test.

Oskar Wróbel před 7 roky
rodič
revize
24902ebe64

+ 50 - 6
packages/ckeditor5-ui/tests/manual/blocktoolbar/blocktoolbar.html

@@ -1,12 +1,56 @@
 <div id="editor">
 <div id="editor">
-	<p><em>This</em> is a <strong>first line</strong> of text.</p>
-	<p><em>This</em> is a <strong>second line</strong> of text.</p>
-	<p><em>This</em> is the <strong>end</strong> of text.</p>
+	<h2>The three greatest things you learn from traveling</h2>
+	<p>
+		Like all the great things on earth traveling teaches us by example. Here are some of the most precious lessons
+		I’ve learned over the years of traveling.
+	</p>
+
+	<figure class="image">
+		<img src="./umbrellas.jpg" alt="Three Monks walking on ancient temple.">
+		<figcaption>Leaving your comfort zone might lead you to such beautiful sceneries like this one.</figcaption>
+	</figure>
+
+	<h3>Appreciation of diversity</h3>
+	<p>
+		Getting used to an entirely different culture can be challenging. While it’s also nice to learn about
+		cultures online or from books, nothing comes close to experiencing cultural diversity in person.
+		You learn to appreciate each and every single one of the differences while you become more culturally fluid.
+	</p>
+
+	<blockquote>
+		<p>The real voyage of discovery consists not in seeking new landscapes, but having new eyes.</p>
+		<p><strong>Marcel Proust</strong></p>
+	</blockquote>
+
+	<h3>Improvisation</h3>
+	<p>
+		Life doesn't allow us to execute every single plan perfectly. This especially seems to be the case when
+		you travel. You plan it down to every minute with a big checklist; but when it comes to executing it,
+		something always comes up and you’re left with your improvising skills. You learn to adapt as you go.
+		Here’s how my travel checklist looks now:
+	</p>
+
+	<ul>
+		<li>buy the ticket</li>
+		<li>start your adventure</li>
+	</ul>
+
+	<h3>Confidence</h3>
+	<p>
+		Going to a new place can be quite terrifying. While change and uncertainty makes us scared, traveling
+		teaches us how ridiculous it is to be afraid of something before it happens. The moment you face your
+		fear and see there was nothing to be afraid of, is the moment you discover bliss.
+	</p>
 </div>
 </div>
 
 
 <style>
 <style>
-	.ck-editor {
-		margin: 5em auto;
-		max-width: 70%;
+	#editor {
+		padding-left: 70px;
+		margin: 0 auto;
+		max-width: 800px;
+	}
+
+	.ck-toolbar-block-button {
+		transform: translateX( 20px );
 	}
 	}
 </style>
 </style>

+ 5 - 3
packages/ckeditor5-ui/tests/manual/blocktoolbar/blocktoolbar.js

@@ -5,15 +5,17 @@
 
 
 /* globals window, document, console:false */
 /* globals window, document, console:false */
 
 
-import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import BalloonEditor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor';
 import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
 import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
 import HeadingButtonsUI from '@ckeditor/ckeditor5-heading/src/headingbuttonsui';
 import HeadingButtonsUI from '@ckeditor/ckeditor5-heading/src/headingbuttonsui';
 import ParagraphButtonUI from '@ckeditor/ckeditor5-paragraph/src/paragraphbuttonui';
 import ParagraphButtonUI from '@ckeditor/ckeditor5-paragraph/src/paragraphbuttonui';
+import BalloonToolbar from '../../../src/toolbar/balloon/balloontoolbar';
 import BlockToolbar from '../../../src/toolbar/block/blocktoolbar';
 import BlockToolbar from '../../../src/toolbar/block/blocktoolbar';
 
 
-ClassicEditor
+BalloonEditor
 	.create( document.querySelector( '#editor' ), {
 	.create( document.querySelector( '#editor' ), {
-		plugins: [ ArticlePluginSet, HeadingButtonsUI, ParagraphButtonUI, BlockToolbar ],
+		plugins: [ ArticlePluginSet, HeadingButtonsUI, ParagraphButtonUI, BalloonToolbar, BlockToolbar ],
+		balloonToolbar: [ 'link' ],
 		blockToolbar: [ 'paragraph', 'heading1', 'heading2', 'heading3', 'bulletedList', 'numberedList', 'blockQuote' ]
 		blockToolbar: [ 'paragraph', 'heading1', 'heading2', 'heading3', 'bulletedList', 'numberedList', 'blockQuote' ]
 	} )
 	} )
 	.then( editor => {
 	.then( editor => {

binární
packages/ckeditor5-ui/tests/manual/blocktoolbar/umbrellas.jpg