Selaa lähdekoodia

Merge branch 'master' into i/5696

Marek Lewandowski 6 vuotta sitten
vanhempi
commit
14fcedf910

+ 1 - 0
packages/ckeditor5-theme-lark/package.json

@@ -14,6 +14,7 @@
   "devDependencies": {
     "@ckeditor/ckeditor5-alignment": "^15.0.0",
     "@ckeditor/ckeditor5-basic-styles": "^15.0.0",
+    "@ckeditor/ckeditor5-code-block": "^0.0.1",
     "@ckeditor/ckeditor5-core": "^15.0.0",
     "@ckeditor/ckeditor5-editor-balloon": "^15.0.0",
     "@ckeditor/ckeditor5-editor-classic": "^15.0.0",

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

@@ -22,6 +22,8 @@ import strikethrough from '@ckeditor/ckeditor5-basic-styles/theme/icons/striketh
 import subscript from '@ckeditor/ckeditor5-basic-styles/theme/icons/subscript.svg';
 import superscript from '@ckeditor/ckeditor5-basic-styles/theme/icons/superscript.svg';
 
+import codeBlock from '@ckeditor/ckeditor5-code-block/theme/icons/codeblock.svg';
+
 import cancel from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
 import check from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
 import eraser from '@ckeditor/ckeditor5-core/theme/icons/eraser.svg';
@@ -82,6 +84,9 @@ const icons = {
 	// basic-styles
 	bold, italic, underline, code, strikethrough, subscript, superscript,
 
+	// code block
+	codeBlock,
+
 	// core
 	check, cancel, eraser, lowVision, quote, image, objectLeft, objectCenter, objectRight, objectFullWidth, pencil, pilcrow,
 

+ 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++ ) {
@@ -252,6 +269,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( {
 			label: 'Disabled',
@@ -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;
 }

+ 28 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-code-block/codeblock.css

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+:root {
+	--ck-color-code-block-label-background: hsl(0, 0%, 46%);
+}
+
+.ck.ck-editor__editable pre[data-language]::after {
+	top: -1px;
+	right: 10px;
+	background: var(--ck-color-code-block-label-background);
+
+	font-size: 10px;
+	font-family: var(--ck-font-face);
+	line-height: 16px;
+	padding: var(--ck-spacing-tiny) var(--ck-spacing-medium);
+	color: hsl(0, 0%, 100%);
+	white-space: nowrap;
+}
+
+.ck.ck-code-block-dropdown .ck-dropdown__panel {
+	/* There could be dozens of languages available. Use scroll to prevent a 10e6px dropdown. */
+	max-height: 250px;
+	overflow-y: auto;
+	overflow-x: hidden;
+}

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

@@ -91,6 +91,10 @@ a.ck.ck-button {
 		& .ck-button__label {
 			@mixin ck-disabled;
 		}
+
+		& .ck-button__keystroke {
+			opacity: .3;
+		}
 	}
 
 	&.ck-button_with-text {
@@ -110,6 +114,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;