From 947aea0743ada5c572c814e3e89deb480c2b22ea Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 6 Aug 2019 17:28:10 +0200 Subject: [PATCH 1/7] Adjusted toolbar styles for grouping feature. --- .../components/toolbar/toolbar.css | 53 +++++++++++-------- 1 file changed, 30 insertions(+), 23 deletions(-) diff --git a/theme/ckeditor5-ui/components/toolbar/toolbar.css b/theme/ckeditor5-ui/components/toolbar/toolbar.css index 1d6b37f..7fb0fd5 100644 --- a/theme/ckeditor5-ui/components/toolbar/toolbar.css +++ b/theme/ckeditor5-ui/components/toolbar/toolbar.css @@ -12,15 +12,6 @@ padding: 0 var(--ck-spacing-small); border: 1px solid var(--ck-color-toolbar-border); - & > * { - /* (#11) Separate toolbar items. */ - margin-right: var(--ck-spacing-small); - - /* Make sure items wrapped to the next line have v-spacing */ - margin-top: var(--ck-spacing-small); - margin-bottom: var(--ck-spacing-small); - } - &.ck-toolbar_vertical { /* Items in a vertical toolbar span the entire width. */ padding: 0; @@ -41,23 +32,39 @@ } } - & > *:last-child { - margin-right: 0; + & > .ck-toolbar__items { + &:not(:only-child) { + margin-right: var(--ck-spacing-small); + } + + & > * { + /* (#11) Separate toolbar items. */ + margin-right: var(--ck-spacing-small); + + /* Make sure items wrapped to the next line have v-spacing */ + margin-top: var(--ck-spacing-small); + margin-bottom: var(--ck-spacing-small); + } + + & > *:last-child { + margin-right: 0; + } + + & > .ck.ck-toolbar__separator { + align-self: stretch; + width: 1px; + margin-top: 0; + margin-bottom: 0; + background: var(--ck-color-toolbar-border); + } + } + + /* Pull the grouped items dropdown to the right */ + & > .ck.ck-toolbar__grouped-dropdown { + margin-left: auto; } @nest .ck-toolbar-container & { border: 0; } } - -.ck.ck-toolbar__separator { - align-self: stretch; - width: 1px; - margin-top: 0; - margin-bottom: 0; - background: var(--ck-color-toolbar-border); -} - -.ck.ck-toolbar__newline { - margin: 0; -} From 943c2f5a02cab892c90be38e2582b61c0e11fafd Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Wed, 7 Aug 2019 13:21:48 +0200 Subject: [PATCH 2/7] Improvements to toolbar styles and toolbar grouping. --- theme/ckeditor5-ui/components/toolbar/toolbar.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/theme/ckeditor5-ui/components/toolbar/toolbar.css b/theme/ckeditor5-ui/components/toolbar/toolbar.css index 7fb0fd5..a1ca6a2 100644 --- a/theme/ckeditor5-ui/components/toolbar/toolbar.css +++ b/theme/ckeditor5-ui/components/toolbar/toolbar.css @@ -17,7 +17,7 @@ padding: 0; /* Specificity matters here. See https://github.com/ckeditor/ckeditor5-theme-lark/issues/168. */ - & > .ck { + & > .ck-toolbar__items > .ck { /* Items in a vertical toolbar should span the horizontal space. */ width: 100%; @@ -34,7 +34,7 @@ & > .ck-toolbar__items { &:not(:only-child) { - margin-right: var(--ck-spacing-small); + margin-right: var(--ck-spacing-large); } & > * { From ca2ce66cb9b2bc1e784068f774b6bfaf436cfd78 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Wed, 7 Aug 2019 13:30:07 +0200 Subject: [PATCH 3/7] Improvements to toolbar styles and toolbar grouping. --- theme/ckeditor5-ui/components/toolbar/toolbar.css | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/theme/ckeditor5-ui/components/toolbar/toolbar.css b/theme/ckeditor5-ui/components/toolbar/toolbar.css index a1ca6a2..427ab74 100644 --- a/theme/ckeditor5-ui/components/toolbar/toolbar.css +++ b/theme/ckeditor5-ui/components/toolbar/toolbar.css @@ -40,10 +40,6 @@ & > * { /* (#11) Separate toolbar items. */ margin-right: var(--ck-spacing-small); - - /* Make sure items wrapped to the next line have v-spacing */ - margin-top: var(--ck-spacing-small); - margin-bottom: var(--ck-spacing-small); } & > *:last-child { @@ -59,6 +55,13 @@ } } + & > .ck-toolbar__items > *, + & > .ck.ck-toolbar__grouped-dropdown { + /* Make sure items wrapped to the next line have v-spacing */ + margin-top: var(--ck-spacing-small); + margin-bottom: var(--ck-spacing-small); + } + /* Pull the grouped items dropdown to the right */ & > .ck.ck-toolbar__grouped-dropdown { margin-left: auto; From 7ab0191cf69770787159b582c3d8ed1d04d0e3b1 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Wed, 7 Aug 2019 15:15:07 +0200 Subject: [PATCH 4/7] Used a separator before the toolbar overflowed items group dropdown. --- .../components/toolbar/toolbar.css | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/theme/ckeditor5-ui/components/toolbar/toolbar.css b/theme/ckeditor5-ui/components/toolbar/toolbar.css index 427ab74..a6ab928 100644 --- a/theme/ckeditor5-ui/components/toolbar/toolbar.css +++ b/theme/ckeditor5-ui/components/toolbar/toolbar.css @@ -45,14 +45,6 @@ & > *:last-child { margin-right: 0; } - - & > .ck.ck-toolbar__separator { - align-self: stretch; - width: 1px; - margin-top: 0; - margin-bottom: 0; - background: var(--ck-color-toolbar-border); - } } & > .ck-toolbar__items > *, @@ -62,9 +54,17 @@ margin-bottom: var(--ck-spacing-small); } - /* Pull the grouped items dropdown to the right */ & > .ck.ck-toolbar__grouped-dropdown { - margin-left: auto; + padding-left: var(--ck-spacing-small); + } + + & .ck.ck-toolbar__separator { + align-self: stretch; + width: 1px; + min-width: 1px; + margin-top: 0; + margin-bottom: 0; + background: var(--ck-color-toolbar-border); } @nest .ck-toolbar-container & { From 32ad18fd17118f4049151b9ab820ca93deef654e Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Mon, 9 Sep 2019 14:15:55 +0200 Subject: [PATCH 5/7] Added an RTL UI support in the automatic toolbar grouping feature. --- theme/ckeditor5-ui/components/toolbar/toolbar.css | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/theme/ckeditor5-ui/components/toolbar/toolbar.css b/theme/ckeditor5-ui/components/toolbar/toolbar.css index 1a8bbe5..4a4168e 100644 --- a/theme/ckeditor5-ui/components/toolbar/toolbar.css +++ b/theme/ckeditor5-ui/components/toolbar/toolbar.css @@ -71,8 +71,16 @@ margin-bottom: var(--ck-spacing-small); } - & > .ck.ck-toolbar__grouped-dropdown { - padding-left: var(--ck-spacing-small); + @mixin ck-dir ltr { + & > .ck.ck-toolbar__grouped-dropdown { + padding-left: var(--ck-spacing-small); + } + } + + @mixin ck-dir rtl { + & > .ck.ck-toolbar__grouped-dropdown { + padding-right: var(--ck-spacing-small); + } } & .ck.ck-toolbar__separator { From f99e09d6e02c82289add41fb19fcd6b0584a11e2 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Wed, 11 Sep 2019 16:04:40 +0200 Subject: [PATCH 6/7] Updated toolbar styles to consider items grouping in a decoupled editor. --- .../components/toolbar/toolbar.css | 34 ++++++++++++------- 1 file changed, 22 insertions(+), 12 deletions(-) diff --git a/theme/ckeditor5-ui/components/toolbar/toolbar.css b/theme/ckeditor5-ui/components/toolbar/toolbar.css index 4a4168e..f59acb1 100644 --- a/theme/ckeditor5-ui/components/toolbar/toolbar.css +++ b/theme/ckeditor5-ui/components/toolbar/toolbar.css @@ -71,18 +71,6 @@ margin-bottom: var(--ck-spacing-small); } - @mixin ck-dir ltr { - & > .ck.ck-toolbar__grouped-dropdown { - padding-left: var(--ck-spacing-small); - } - } - - @mixin ck-dir rtl { - & > .ck.ck-toolbar__grouped-dropdown { - padding-right: var(--ck-spacing-small); - } - } - & .ck.ck-toolbar__separator { align-self: stretch; width: 1px; @@ -96,3 +84,25 @@ border: 0; } } + +/* + * Note: In some cases (e.g. a decoupled editor), the toolbar has its own "dir" + * because its parent is not controlled by the editor framework. + */ +[dir="ltr"] .ck.ck-toolbar, +.ck.ck-toolbar[dir="ltr"] { + & > .ck.ck-toolbar__grouped-dropdown { + padding-left: var(--ck-spacing-small); + } +} + +/* + * Note: In some cases (e.g. a decoupled editor), the toolbar has its own "dir" + * because its parent is not controlled by the editor framework. + */ +[dir="rtl"] .ck.ck-toolbar, +.ck.ck-toolbar[dir="rtl"] { + & > .ck.ck-toolbar__grouped-dropdown { + padding-right: var(--ck-spacing-small); + } +} From 72af809f24b854adaac8100bea44d85006bf313b Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Fri, 13 Sep 2019 13:20:14 +0200 Subject: [PATCH 7/7] Style improvements in the toolbar component. --- .../components/toolbar/toolbar.css | 58 ++++++++++++------- 1 file changed, 38 insertions(+), 20 deletions(-) diff --git a/theme/ckeditor5-ui/components/toolbar/toolbar.css b/theme/ckeditor5-ui/components/toolbar/toolbar.css index f59acb1..f84bf77 100644 --- a/theme/ckeditor5-ui/components/toolbar/toolbar.css +++ b/theme/ckeditor5-ui/components/toolbar/toolbar.css @@ -18,30 +18,10 @@ /* Make sure items wrapped to the next line have v-spacing */ margin-top: var(--ck-spacing-small); margin-bottom: var(--ck-spacing-small); - } - & > * { /* (#11) Separate toolbar items. */ margin-right: var(--ck-spacing-small); } - - @mixin ck-dir rtl { - & > * { - /* (#11) Separate toolbar items. */ - margin-left: var(--ck-spacing-small); - margin-right: 0; - } - - & > *:last-child { - margin-left: 0; - } - } - - @mixin ck-dir ltr { - & > *:last-child { - margin-right: 0; - } - } } &.ck-toolbar_vertical { @@ -71,6 +51,16 @@ margin-bottom: var(--ck-spacing-small); } + & > .ck.ck-toolbar__grouped-dropdown { + /* + * Dropdown button has asymmetric padding to fit the arrow. + * This button has no arrow so let's revert that padding back to normal. + */ + & > .ck.ck-button.ck-dropdown__button { + padding-left: var(--ck-spacing-tiny); + } + } + & .ck.ck-toolbar__separator { align-self: stretch; width: 1px; @@ -94,6 +84,17 @@ & > .ck.ck-toolbar__grouped-dropdown { padding-left: var(--ck-spacing-small); } + + & > .ck.ck-toolbar__items { + & > *:last-child { + margin-right: 0; + } + } + + /* Some spacing between the items and the separator before the grouped items dropdown. */ + &.ck-toolbar_grouping > .ck-toolbar__items { + margin-right: var(--ck-spacing-small); + } } /* @@ -105,4 +106,21 @@ & > .ck.ck-toolbar__grouped-dropdown { padding-right: var(--ck-spacing-small); } + + & > .ck.ck-toolbar__items { + & > * { + /* (#11) Separate toolbar items. */ + margin-left: var(--ck-spacing-small); + margin-right: 0; + } + + & > *:last-child { + margin-left: 0; + } + } + + /* Some spacing between the items and the separator before the grouped items dropdown. */ + &.ck-toolbar_grouping > .ck-toolbar__items { + margin-left: var(--ck-spacing-small); + } }