8
0
Просмотр исходного кода

Merge pull request #252 from ckeditor/i/5782

Feature: Implemented styles for `.ck-button` with a keystroke preview (see ckeditor/ckeditor5#5782).
Piotrek Koszuliński 6 лет назад
Родитель
Сommit
f44886dd7f

+ 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;
 }

+ 25 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/button.css

@@ -63,6 +63,10 @@ a.ck.ck-button {
 		& .ck-button__label {
 			@mixin ck-disabled;
 		}
+
+		& .ck-button__keystroke {
+			opacity: .3;
+		}
 	}
 
 	&.ck-button_with-text {
@@ -81,6 +85,27 @@ a.ck.ck-button {
 		}
 	}
 
+	&.ck-button_with-keystroke {
+		& .ck-button__label {
+			flex-grow: 1;
+		}
+	}
+
+	& .ck-button__keystroke {
+		color: inherit;
+
+		@mixin ck-dir ltr {
+			margin-left: var(--ck-spacing-large);
+		}
+
+		@mixin ck-dir rtl {
+			margin-right: var(--ck-spacing-large);
+		}
+
+		font-weight: bold;
+		opacity: .7;
+	}
+
 	/* A style of the button which is currently on, e.g. its feature is active. */
 	&.ck-on {
 		@mixin ck-button-colors --ck-color-button-on;