Ver código fonte

Merge branch 'master' into t/ckeditor5-table/1

Aleksander Nowodzinski 7 anos atrás
pai
commit
aae280fa8c

+ 1 - 1
packages/ckeditor5-theme-lark/LICENSE.md

@@ -1,7 +1,7 @@
 Software License Agreement
 ==========================
 
-**Lark Theme for CKEditor 5** – https://github.com/ckeditor/ckeditor5 <br>
+**Lark Theme for CKEditor 5** – https://github.com/ckeditor/ckeditor5-theme-lark <br>
 Copyright (c) 2003-2018, [CKSource](http://cksource.com) Frederico Knabben. All rights reserved.
 
 Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html).

+ 12 - 12
packages/ckeditor5-theme-lark/docs/_snippets/examples/custom.css

@@ -4,7 +4,7 @@
  */
 
 :root {
-	/* Overrides the border-radius setting in the theme. */
+	/* Overrides the border radius setting in the theme. */
 	--ck-border-radius: 4px;
 
 	/* Overrides the default font size in the theme. */
@@ -16,7 +16,7 @@
 	--ck-custom-border: hsl(300, 1%, 22%);
 	--ck-custom-white: hsl(0, 0%, 100%);
 
-	/* -- Overrides generic colors -------------------------------------------------------------- */
+	/* -- Overrides generic colors. ------------------------------------------------------------- */
 
 	--ck-color-base-foreground: var(--ck-custom-background);
 	--ck-color-focus-border: hsl(208, 90%, 62%);
@@ -24,7 +24,7 @@
 	--ck-color-shadow-drop: hsla(0, 0%, 0%, 0.2);
 	--ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1);
 
-	/* -- Overrides the default .ck-button class colors ----------------------------------------- */
+	/* -- Overrides the default .ck-button class colors. ---------------------------------------- */
 
 	--ck-color-button-default-background: var(--ck-custom-background);
 	--ck-color-button-default-focus-background: hsl(270, 1%, 22%);
@@ -48,12 +48,12 @@
 	--ck-color-button-save: hsl(120, 100%, 46%);
 	--ck-color-button-cancel: hsl(15, 100%, 56%);
 
-	/* -- Overrides the default .ck-dropdown class colors --------------------------------------- */
+	/* -- Overrides the default .ck-dropdown class colors. -------------------------------------- */
 
 	--ck-color-dropdown-panel-background: var(--ck-custom-background);
 	--ck-color-dropdown-panel-border: var(--ck-custom-foreground);
 
-	/* -- Overrides the default .ck-input class colors ------------------------------------------ */
+	/* -- Overrides the default .ck-input class colors. ----------------------------------------- */
 
 	--ck-color-input-background: var(--ck-custom-foreground);
 	--ck-color-input-border: hsl(257, 3%, 43%);
@@ -62,40 +62,40 @@
 	--ck-color-input-disabled-border: hsl(250, 3%, 38%);
 	--ck-color-input-disabled-text: hsl(0, 0%, 46%);
 
-	/* -- Overrides the default .ck-list class colors ------------------------------------------- */
+	/* -- Overrides the default .ck-list class colors. ------------------------------------------ */
 
 	--ck-color-list-background: var(--ck-custom-background);
 	--ck-color-list-item-background-hover: var(--ck-custom-foreground);
 	--ck-color-list-item-background-active: hsl(208, 88%, 52%);
 	--ck-color-list-item-text-active: var(--ck-custom-white);
 
-	/* -- Overrides the default .ck-balloon-panel class colors ---------------------------------- */
+	/* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */
 
 	--ck-color-panel-background: var(--ck-custom-background);
 	--ck-color-panel-border: var(--ck-custom-border);
 
-	/* -- Overrides the default .ck-toolbar class colors ---------------------------------------- */
+	/* -- Overrides the default .ck-toolbar class colors. --------------------------------------- */
 
 	--ck-color-toolbar-background: var(--ck-custom-background);
 	--ck-color-toolbar-border: var(--ck-custom-border);
 
-	/* -- Overrides the default .ck-tooltip class colors ---------------------------------------- */
+	/* -- Overrides the default .ck-tooltip class colors. --------------------------------------- */
 
 	--ck-color-tooltip-background: hsl(252, 7%, 14%);
 	--ck-color-tooltip-text: hsl(0, 0%, 93%);
 
-	/* -- Overrides the default colors used by ckeditor5-image package -------------------------- */
+	/* -- Overrides the default colors used by the ckeditor5-image package. --------------------- */
 
 	--ck-color-image-caption-background: hsl(0, 0%, 97%);
 	--ck-color-image-caption-text: hsl(0, 0%, 20%);
 
-	/* -- Overrides the default colors used by ckeditor5-widget package ------------------------- */
+	/* -- Overrides the default colors used by the ckeditor5-widget package. -------------------- */
 
 	--ck-color-widget-border-blurred: hsl(0, 0%, 87%);
 	--ck-color-widget-border-hover: hsl(43, 100%, 68%);
 	--ck-color-widget-editable-focused-background: var(--ck-custom-white);
 
-	/* -- Overrides the default colors used by ckeditor5-link package ------------------------- */
+	/* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */
 
 	--ck-color-link-default: hsl(190, 100%, 75%);
 }

+ 22 - 22
packages/ckeditor5-theme-lark/docs/framework/guides/theme-customization.md

@@ -5,17 +5,17 @@ order: 10
 
 # Theme customization
 
-The [`@ckeditor/ckeditor5-theme-lark`](https://www.npmjs.com/package/@ckeditor/ckeditor5-theme-lark) is the default theme of CKEditor 5. Lark is modular, [BEM–friendly](https://en.bem.info/methodology/css/) and built using [PostCSS](http://postcss.org/).
+The [`@ckeditor/ckeditor5-theme-lark`](https://www.npmjs.com/package/@ckeditor/ckeditor5-theme-lark) package contains the default theme of CKEditor 5. Lark is modular, [BEM–friendly](https://en.bem.info/methodology/css/) and built using [PostCSS](http://postcss.org/).
 
 Although it was designed with versatility and the most common editor use cases in mind, some integrations may require adjustments to make it match the style guidelines of the ecosystem. This kind of customization can be done by importing an extra `.css` file and overriding the [native CSS variables](https://www.w3.org/TR/css-variables/).
 
-You can see the demo of an editor with the dark theme as a result of customizations described later in this guide:
+Below you can see a demo of an editor with the dark theme as a result of customizations described later in this guide:
 
 {@snippet examples/theme-lark}
 
 ## Styles processing and bundling
 
-CKEditor 5 is bundled using [webpack](https://webpack.js.org/) and it handles the importing and processing of the styles using the [loaders](https://webpack.js.org/concepts/loaders/). Its configuration can be found in the `webpack.config.js` file.
+CKEditor 5 is bundled using [webpack](https://webpack.js.org/) and it handles the importing and processing of styles using [loaders](https://webpack.js.org/concepts/loaders/). Its configuration can be found in the `webpack.config.js` file.
 
 <info-box info>
 	To learn more about building CKEditor, check out the {@link builds/guides/development/custom-builds Creating custom builds} guide.
@@ -23,7 +23,7 @@ CKEditor 5 is bundled using [webpack](https://webpack.js.org/) and it handles th
 
 The entire process of building and managing the styles boils down to three steps:
 
-1. **Collecting**: Each JavaScript file in the project can import multiple `.css` files using the ES6 [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) directive. Imported files are handled by the [PostCSS Loader](https://www.npmjs.com/package/postcss-loader).
+1. **Collecting**: Each JavaScript file in the project can import multiple `.css` files using the ES6 [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) directive. Imported files are handled by [PostCSS Loader](https://www.npmjs.com/package/postcss-loader).
 
 	```js
 	import '../theme/styles.css';
@@ -44,7 +44,7 @@ The entire process of building and managing the styles boils down to three steps
 	}
 	```
 
-2. **Processing**: The PostCSS Loader processes `.css` files to the output CSS. Each file is compiled asynchronously, in a separate processor thread using pre–defined plugins.
+2. **Processing**: PostCSS Loader processes `.css` files to the output CSS. Each file is compiled asynchronously, in a separate processor thread using pre–defined plugins.
 
 3. **Loading**: Finally the [style loader](https://www.npmjs.com/package/style-loader) loads the output CSS along with the `ckeditor.js` file into a `<style>` element in the `<head>` section of the web page.
 
@@ -60,17 +60,17 @@ The entire process of building and managing the styles boils down to three steps
 
 ## Customization with CSS variables
 
-Having {@link builds/guides/development/custom-builds#forking-an-existing-build cloned} an existing build of CKEditor for a quick start, let's use the full potential of CSS variables. The customization in this guide will make the theme dark, with slightly bigger text and more rounded corners.
+Having {@link builds/guides/development/custom-builds#forking-an-existing-build cloned} an existing build of CKEditor for a quick start, let's use the full potential of CSS variables (custom properties). The customization explained in this guide will make the theme dark, with slightly bigger text and more rounded corners.
 
 <info-box hint>
-	Check out the [colors sheet](https://github.com/ckeditor/ckeditor5-theme-lark/blob/master/theme/ckeditor5-ui/globals/_colors.css) for the full list of customizable colors. You can also browse [other files](https://github.com/ckeditor/ckeditor5-theme-lark/blob/master/theme/ckeditor5-ui/globals) to learn about other useful tools.
+	Check out the [color sheet](https://github.com/ckeditor/ckeditor5-theme-lark/blob/master/theme/ckeditor5-ui/globals/_colors.css) for a full list of customizable colors. You can also browse [other files](https://github.com/ckeditor/ckeditor5-theme-lark/blob/master/theme/ckeditor5-ui/globals) to learn about other useful tools.
 </info-box>
 
 The file containing custom variables will be named `custom.css` and it will look as below:
 
 ```css
 :root {
-	/* Overrides the border-radius setting in the theme. */
+	/* Overrides the border radius setting in the theme. */
 	--ck-border-radius: 4px;
 
 	/* Overrides the default font size in the theme. */
@@ -82,7 +82,7 @@ The file containing custom variables will be named `custom.css` and it will look
 	--ck-custom-border: hsl(300, 1%, 22%);
 	--ck-custom-white: hsl(0, 0%, 100%);
 
-	/* -- Overrides generic colors -------------------------------------------------------------- */
+	/* -- Overrides generic colors. ------------------------------------------------------------- */
 
 	--ck-color-base-foreground: var(--ck-custom-background);
 	--ck-color-focus-border: hsl(208, 90%, 62%);
@@ -90,7 +90,7 @@ The file containing custom variables will be named `custom.css` and it will look
 	--ck-color-shadow-drop: hsla(0, 0%, 0%, 0.2);
 	--ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1);
 
-	/* -- Overrides the default .ck-button class colors ----------------------------------------- */
+	/* -- Overrides the default .ck-button class colors. ---------------------------------------- */
 
 	--ck-color-button-default-background: var(--ck-custom-background);
 	--ck-color-button-default-focus-background: hsl(270, 1%, 22%);
@@ -114,12 +114,12 @@ The file containing custom variables will be named `custom.css` and it will look
 	--ck-color-button-save: hsl(120, 100%, 46%);
 	--ck-color-button-cancel: hsl(15, 100%, 56%);
 
-	/* -- Overrides the default .ck-dropdown class colors --------------------------------------- */
+	/* -- Overrides the default .ck-dropdown class colors. -------------------------------------- */
 
 	--ck-color-dropdown-panel-background: var(--ck-custom-background);
 	--ck-color-dropdown-panel-border: var(--ck-custom-foreground);
 
-	/* -- Overrides the default .ck-input class colors ------------------------------------------ */
+	/* -- Overrides the default .ck-input class colors. ----------------------------------------- */
 
 	--ck-color-input-background: var(--ck-custom-foreground);
 	--ck-color-input-border: hsl(257, 3%, 43%);
@@ -128,52 +128,52 @@ The file containing custom variables will be named `custom.css` and it will look
 	--ck-color-input-disabled-border: hsl(250, 3%, 38%);
 	--ck-color-input-disabled-text: hsl(0, 0%, 46%);
 
-	/* -- Overrides the default .ck-list class colors ------------------------------------------- */
+	/* -- Overrides the default .ck-list class colors. ------------------------------------------ */
 
 	--ck-color-list-background: var(--ck-custom-background);
 	--ck-color-list-item-background-hover: var(--ck-custom-foreground);
 	--ck-color-list-item-background-active: hsl(208, 88%, 52%);
 	--ck-color-list-item-text-active: var(--ck-custom-white);
 
-	/* -- Overrides the default .ck-balloon-panel class colors ---------------------------------- */
+	/* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */
 
 	--ck-color-panel-background: var(--ck-custom-background);
 	--ck-color-panel-border: var(--ck-custom-border);
 
-	/* -- Overrides the default .ck-toolbar class colors ---------------------------------------- */
+	/* -- Overrides the default .ck-toolbar class colors. --------------------------------------- */
 
 	--ck-color-toolbar-background: var(--ck-custom-background);
 	--ck-color-toolbar-border: var(--ck-custom-border);
 
-	/* -- Overrides the default .ck-tooltip class colors ---------------------------------------- */
+	/* -- Overrides the default .ck-tooltip class colors. --------------------------------------- */
 
 	--ck-color-tooltip-background: hsl(252, 7%, 14%);
 	--ck-color-tooltip-text: hsl(0, 0%, 93%);
 
-	/* -- Overrides the default colors used by ckeditor5-image package -------------------------- */
+	/* -- Overrides the default colors used by the ckeditor5-image package. --------------------- */
 
 	--ck-color-image-caption-background: hsl(0, 0%, 97%);
 	--ck-color-image-caption-text: hsl(0, 0%, 20%);
 
-	/* -- Overrides the default colors used by ckeditor5-widget package ------------------------- */
+	/* -- Overrides the default colors used by the ckeditor5-widget package. -------------------- */
 
 	--ck-color-widget-border-blurred: hsl(0, 0%, 87%);
 	--ck-color-widget-border-hover: hsl(43, 100%, 68%);
 	--ck-color-widget-editable-focused-background: var(--ck-custom-white);
 
-	/* -- Overrides the default colors used by ckeditor5-link package ------------------------- */
+	/* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */
 
 	--ck-color-link-default: hsl(190, 100%, 75%);
 }
 ```
 
-This file can be referenced directly in HTML **after the `<link>` tag injected by the editor** and its content will simply override the default CSS variables. CSS variables are natively [supported](https://caniuse.com/#feat=css-variables) in all major web browsers and just like like any other CSS rule, they are prioritized in the order of precedence.
+This file can be referenced directly in HTML **after the `<link>` tag injected by the editor** and its content will simply override the default CSS variables. CSS variables are natively [supported](https://caniuse.com/#feat=css-variables) in all major web browsers and just like any other CSS rule, they are prioritized in the order of precedence.
 
 ```html
 <link rel="stylesheet" href="custom.css" type="text/css">
 ```
 
-Alternatively, the style sheet can also be imported into a JavaScript file that is processed by webpack and the [loaders](#styles-processing-and-bundling) becoming part of the build, e.g. an entry point of the application.
+Alternatively, the style sheet can also be imported into a JavaScript file that is processed by webpack and the [loaders](#styles-processing-and-bundling), becoming a part of the build, e.g. an entry point of the application.
 
 <info-box info>
 	Learn more about {@link framework/guides/quick-start building the editor using webpack}.
@@ -196,4 +196,4 @@ ClassicEditor
 
 ```
 
-It is time to build the editor using `npm run build-ckeditor` and see the results. From now on, the editor's theme is using customized styles, which are part of the build.
+It is time to build the editor using `npm run build-ckeditor` and see the results. From now on, the editor's theme is using customized styles, which are a part of the build.

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

@@ -20,9 +20,11 @@
     "@ckeditor/ckeditor5-editor-classic": "^10.0.0",
     "@ckeditor/ckeditor5-easy-image": "^10.0.0",
     "@ckeditor/ckeditor5-font": "^10.0.0",
+    "@ckeditor/ckeditor5-heading": "^10.0.0",
     "@ckeditor/ckeditor5-highlight": "^10.0.0",
     "@ckeditor/ckeditor5-link": "^10.0.0",
     "@ckeditor/ckeditor5-list": "^10.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^10.0.0",
     "@ckeditor/ckeditor5-undo": "^10.0.0",
     "@ckeditor/ckeditor5-utils": "^10.0.0",
     "@ckeditor/ckeditor5-table": "^0.0.1",

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

@@ -33,6 +33,10 @@ import quote from '@ckeditor/ckeditor5-core/theme/icons/quote.svg';
 import fontFamily from '@ckeditor/ckeditor5-font/theme/icons/font-family.svg';
 import fontSize from '@ckeditor/ckeditor5-font/theme/icons/font-size.svg';
 
+import heading1 from '@ckeditor/ckeditor5-heading/theme/icons/heading1.svg';
+import heading2 from '@ckeditor/ckeditor5-heading/theme/icons/heading2.svg';
+import heading3 from '@ckeditor/ckeditor5-heading/theme/icons/heading3.svg';
+
 import marker from '@ckeditor/ckeditor5-highlight/theme/icons/marker.svg';
 import pen from '@ckeditor/ckeditor5-highlight/theme/icons/pen.svg';
 import eraser from '@ckeditor/ckeditor5-highlight/theme/icons/eraser.svg';
@@ -43,6 +47,8 @@ import unlink from '@ckeditor/ckeditor5-link/theme/icons/unlink.svg';
 import bulletedList from '@ckeditor/ckeditor5-list/theme/icons/bulletedlist.svg';
 import numberedList from '@ckeditor/ckeditor5-list/theme/icons/numberedlist.svg';
 
+import paragraph from '@ckeditor/ckeditor5-paragraph/theme/icons/paragraph.svg';
+
 import table from '@ckeditor/ckeditor5-table/theme/icons/table.svg';
 import tableRow from '@ckeditor/ckeditor5-table/theme/icons/table-row.svg';
 import tableColumn from '@ckeditor/ckeditor5-table/theme/icons/table-column.svg';
@@ -66,6 +72,9 @@ const icons = {
 	// font
 	fontFamily, fontSize,
 
+	// heading
+	heading1, heading2, heading3,
+
 	// highlight
 	marker, pen, eraser,
 
@@ -75,6 +84,9 @@ const icons = {
 	// list
 	bulletedList, numberedList,
 
+	// paragraph
+	paragraph,
+
 	// table
 	table, tableRow, tableColumn, tableMergeCell,
 

+ 95 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-image/imageuploadicon.css

@@ -0,0 +1,95 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+:root {
+	--ck-color-image-upload-icon: hsl(0, 0%, 100%);
+	--ck-color-image-upload-icon-background: hsl(120, 100%, 27%);
+
+	--ck-image-upload-icon-size: 1.25em;
+	--ck-image-upload-icon-width: 2px;
+}
+
+.ck-image-upload-complete-icon {
+	width: var(--ck-image-upload-icon-size);
+	height: var(--ck-image-upload-icon-size);
+	opacity: 0;
+	background: var(--ck-color-image-upload-icon-background);
+	animation-name: ck-upload-complete-icon-show, ck-upload-complete-icon-hide;
+	animation-fill-mode: forwards, forwards;
+	animation-duration: 500ms, 500ms;
+
+	/* Hide completed upload icon after 3 seconds. */
+	animation-delay: 0ms, 3000ms;
+
+	/* This is check icon element made from border-width mixed with animations. */
+	&::after {
+		/* Because of border transformation we need to "hard code" left position. */
+		left: 25%;
+
+		top: 50%;
+		opacity: 0;
+		height: 0;
+		width: 0;
+
+		transform: scaleX(-1) rotate(135deg);
+		transform-origin: left top;
+		border-top: var(--ck-image-upload-icon-width) solid var(--ck-color-image-upload-icon);
+		border-right: var(--ck-image-upload-icon-width) solid var(--ck-color-image-upload-icon);
+
+		animation-name: ck-upload-complete-icon-check;
+		animation-duration: 500ms;
+		animation-delay: 500ms;
+		animation-fill-mode: forwards;
+	}
+}
+
+@keyframes ck-upload-complete-icon-show {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes ck-upload-complete-icon-hide {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		opacity: 0;
+	}
+}
+
+@keyframes ck-upload-complete-icon-check {
+	0% {
+		opacity: 1;
+		height: 0;
+		width: 0;
+	}
+	33% {
+		/*
+		 * We need to use here hardcoded values because Edge is not supporting calc() in @keyframes.
+		 * It should be: width: calc( var(--ck-image-upload-icon-size) / 5 );
+		 */
+		width: 0.25em;
+
+		height: 0;
+	}
+	100% {
+		/*
+		 * We need to use here hardcoded values because Edge is not supporting calc() in @keyframes.
+		 * It should be:
+		 * height: calc( var(--ck-image-upload-icon-size) / 3 );
+		 * width: calc( var(--ck-image-upload-icon-size) / 5 );
+		 */
+		width: 0.25em;
+		height: 0.416em;
+
+		opacity: 1;
+	}
+}

+ 14 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/toolbar/blocktoolbar.css

@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+:root {
+	--ck-color-block-toolbar-button: var(--ck-color-text);
+	--ck-block-toolbar-button-size: var(--ck-font-size-normal);
+}
+
+.ck.ck-block-toolbar-button {
+	color: var(--ck-color-block-toolbar-button);
+	font-size: var(--ck-block-toolbar-size);
+}