From 31fcd86565db4ad2e7a1a9d4294c1e8bd04a5a9d Mon Sep 17 00:00:00 2001 From: dkonopka Date: Wed, 4 Sep 2019 10:57:12 +0200 Subject: [PATCH 1/6] Moved todolsit styles to the theme-lark. --- src/todolistui.js | 1 - theme/list.css | 78 ----------------------------------------------- 2 files changed, 79 deletions(-) delete mode 100644 theme/list.css diff --git a/src/todolistui.js b/src/todolistui.js index b13cbbc..1299443 100644 --- a/src/todolistui.js +++ b/src/todolistui.js @@ -10,7 +10,6 @@ import { createUIComponent } from './utils'; import todoListIcon from '../theme/icons/todolist.svg'; -import '../theme/list.css'; import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; diff --git a/theme/list.css b/theme/list.css deleted file mode 100644 index 87112ff..0000000 --- a/theme/list.css +++ /dev/null @@ -1,78 +0,0 @@ -:root { - --ck-todo-list-checkmark-size: 16px; - --ck-color-todo-list-checkmark-background: hsl(120, 100%, 42%); - --ck-color-todo-list-checkmark-border: hsl( 120, 100%, 27%); -} - -.ck .todo-list { - list-style: none; -} - -.ck .todo-list > li { - margin-bottom: 5px; -} - -.ck .todo-list > li > .todo-list { - margin-top: 5px; -} - -/* - * Let's hide native checkbox and make a fancy one. - * - * Note: Checkbox element cannot be hidden using `display: block` or `visibility: hidden`. - * It has to be clickable to not steal the focus after clicking on it. - */ -.ck .todo-list__checkmark input[type='checkbox'] { - display: block; - width: 100%; - height: 100%; - opacity: 0; - margin: 0; -} - -.ck .todo-list__checkmark { - cursor: pointer; - width: var(--ck-todo-list-checkmark-size); - height: var(--ck-todo-list-checkmark-size); - position: relative; - display: inline-block; - left: -23px; - margin-right: -16px; - top: 2px; -} - -.ck .todo-list__checkmark::before { - content: ''; - position: absolute; - display: block; - width: 100%; - height: 100%; - border: 1px solid var(--ck-color-base-text); - border-radius: var(--ck-border-radius); - transition: 250ms ease-in-out box-shadow, 250ms ease-in-out background, 250ms ease-in-out border; - box-sizing: border-box; -} - -.ck .todo-list__checkmark::after { - box-sizing: content-box; - pointer-events: none; - content: ''; - position: absolute; - left: 5px; - top: 3px; - display: block; - width: 3px; - height: 6px; - border: solid #fff; - border-width: 0 2px 2px 0; - transform: rotate(45deg); -} - -.ck .todo-list__checkmark:hover::before { - box-shadow: 0 0 0 5px hsla(0, 0%, 0%, 0.1) -} - -.ck .todo-list__checkmark_checked::before { - background: var(--ck-color-todo-list-checkmark-background); - border-color: var(--ck-color-todo-list-checkmark-border); -} From c39a3039af41971537f003480a35954d8bbe4bcc Mon Sep 17 00:00:00 2001 From: dkonopka Date: Wed, 18 Sep 2019 09:48:39 +0200 Subject: [PATCH 2/6] Bring back UI styles of todo-list. --- src/todolistui.js | 1 + theme/list.css | 21 +++++++++++++++++++++ 2 files changed, 22 insertions(+) create mode 100644 theme/list.css diff --git a/src/todolistui.js b/src/todolistui.js index 1299443..b13cbbc 100644 --- a/src/todolistui.js +++ b/src/todolistui.js @@ -10,6 +10,7 @@ import { createUIComponent } from './utils'; import todoListIcon from '../theme/icons/todolist.svg'; +import '../theme/list.css'; import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; diff --git a/theme/list.css b/theme/list.css new file mode 100644 index 0000000..933fe65 --- /dev/null +++ b/theme/list.css @@ -0,0 +1,21 @@ +.ck .todo-list__checkmark { + display: inline-block; + position: relative; + + &::before { + display: block; + position: absolute; + box-sizing: border-box; + } + + &::after { + display: block; + position: absolute; + box-sizing: content-box; + pointer-events: none; + } + + & input[type='checkbox'] { + display: block; + } +} From cc900c81acf783c6bae2c7a144c1cd2606c76bd6 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Thu, 19 Sep 2019 13:59:07 +0200 Subject: [PATCH 3/6] Tests: Added Font Size feature to the to-do list manual test. --- tests/manual/todo-list.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/tests/manual/todo-list.js b/tests/manual/todo-list.js index b78cc9d..74bc934 100644 --- a/tests/manual/todo-list.js +++ b/tests/manual/todo-list.js @@ -16,13 +16,20 @@ import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'; import Undo from '@ckeditor/ckeditor5-undo/src/undo'; import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard'; import List from '../../src/list'; +import FontSize from '@ckeditor/ckeditor5-font/src/fontsize'; import TodoList from '../../src/todolist'; ClassicEditor .create( document.querySelector( '#editor' ), { - plugins: [ Enter, Typing, Heading, Highlight, Table, Bold, Paragraph, Undo, List, TodoList, Clipboard ], + plugins: [ Enter, Typing, Heading, Highlight, Table, Bold, Paragraph, Undo, List, TodoList, Clipboard, FontSize ], toolbar: [ - 'heading', '|', 'bulletedList', 'numberedList', 'todoList', '|', 'bold', 'highlight', 'insertTable', '|', 'undo', 'redo' + 'heading', + '|', + 'bulletedList', 'numberedList', 'todoList', + '|', + 'bold', 'highlight', 'insertTable', 'fontSize', + '|', + 'undo', 'redo' ], table: { contentToolbar: [ From 14a57737d86c3a7fbd87dea4d934b9fa36ec1e31 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Thu, 19 Sep 2019 16:01:31 +0200 Subject: [PATCH 4/6] Code refactoring in styles. --- theme/list.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/theme/list.css b/theme/list.css index 933fe65..9460f58 100644 --- a/theme/list.css +++ b/theme/list.css @@ -1,4 +1,4 @@ -.ck .todo-list__checkmark { +.ck.ck-editor__editable .todo-list__checkmark { display: inline-block; position: relative; From 2f9fd925705d1ff6778f410c7008a9a3f811112a Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Thu, 19 Sep 2019 16:07:00 +0200 Subject: [PATCH 5/6] Code refactoring in styles. --- theme/list.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/theme/list.css b/theme/list.css index 9460f58..2b525a7 100644 --- a/theme/list.css +++ b/theme/list.css @@ -1,4 +1,9 @@ -.ck.ck-editor__editable .todo-list__checkmark { +/* + * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license + */ + +.ck-editor__editable .todo-list__checkmark { display: inline-block; position: relative; From 90cf29362f13f52363f0ef1cd87875f34c66f334 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Thu, 19 Sep 2019 16:12:30 +0200 Subject: [PATCH 6/6] Added a missing dependency to package.json. --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 1cae68e..5236ba6 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "@ckeditor/ckeditor5-clipboard": "^12.0.2", "@ckeditor/ckeditor5-editor-classic": "^12.1.4", "@ckeditor/ckeditor5-enter": "^11.1.0", + "@ckeditor/ckeditor5-font": "^11.2.2", "@ckeditor/ckeditor5-heading": "^11.0.5", "@ckeditor/ckeditor5-highlight": "^11.0.5", "@ckeditor/ckeditor5-indent": "^10.1.0",