Procházet zdrojové kódy

Tests: Added manual test cases for .ck-buttons with keystroke previews.

Aleksander Nowodzinski před 6 roky
rodič
revize
ec3eeca407

+ 5 - 0
packages/ckeditor5-theme-lark/tests/manual/theme.html

@@ -77,6 +77,11 @@
 		<div id="button-icon-states"></div>
 	</div>
 
+	<h3>Button: Keystrokes</h3>
+	<div class="ck ck-reset_all">
+		<div id="button-keystroke" class="wrappable"></div>
+	</div>
+
 	<h3>Button: Responsiveness</h3>
 	<div id="button-responsive-1" class="button-responsive ck-reset_all">
 		<div id="button-responsive-2" class="button-responsive">

+ 42 - 1
packages/ckeditor5-theme-lark/tests/manual/theme.js

@@ -62,6 +62,7 @@ const ui = testUtils.createTestUIView( {
 	'buttonStates': '#button-states',
 	'buttonTypes': '#button-types',
 	'buttonIcon': '#button-icon',
+	'buttonKeystroke': '#button-keystroke',
 	'buttonCustom': '#button-custom',
 	'buttonIconCustom': '#button-icon-custom',
 	'buttonIconStates': '#button-icon-states',
@@ -183,6 +184,22 @@ function renderButton() {
 	// TODO: It requires model interface.
 	disabledActionButton.element.classList.add( 'ck-button-action' );
 
+	// --- Keystrokes ------------------------------------------------------------
+
+	ui.buttonKeystroke.add( toolbar( [
+		button( {
+			label: 'Foo',
+			keystroke: 'Ctrl+A',
+			withKeystroke: true
+		} ),
+		button( {
+			label: 'Bar',
+			icon: boldIcon,
+			keystroke: 'Shift+Tab',
+			withKeystroke: true
+		} )
+	] ) );
+
 	// --- Responsive ------------------------------------------------------------
 
 	for ( let i = 1; i < 4; i++ ) {
@@ -251,6 +268,29 @@ function renderDropdown() {
 		} )
 	} );
 
+	collection.add( {
+		type: 'button',
+		model: new Model( {
+			label: 'Icon and key',
+			withText: true,
+			icon: boldIcon,
+			keystroke: 'Shift+Tab',
+			withKeystroke: true
+		} )
+	} );
+
+	collection.add( {
+		type: 'button',
+		model: new Model( {
+			label: 'On with a keystroke',
+			withText: true,
+			isOn: true,
+			icon: boldIcon,
+			keystroke: 'Ctrl+A',
+			withKeystroke: true
+		} )
+	} );
+
 	collection.add( {
 		type: 'switchbutton',
 		model: new Model( {
@@ -475,11 +515,12 @@ function button( {
 	keystroke = null,
 	tooltip,
 	tooltipPosition = 's',
+	withKeystroke = false,
 	icon
 } = {} ) {
 	const button = new ButtonView();
 
-	button.set( { label, isEnabled, isOn, withText, icon, keystroke, tooltip, tooltipPosition } );
+	button.set( { label, isEnabled, isOn, withText, icon, keystroke, tooltip, withKeystroke, tooltipPosition } );
 
 	return button;
 }