From 0ffb7163968f9caf0c27b5d6f3306b660045eb74 Mon Sep 17 00:00:00 2001 From: dkonopka Date: Thu, 16 May 2019 09:52:58 +0200 Subject: [PATCH 01/10] Introduced styles for fake panels. --- .../components/panel/fakepanel.css | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 theme/ckeditor5-ui/components/panel/fakepanel.css diff --git a/theme/ckeditor5-ui/components/panel/fakepanel.css b/theme/ckeditor5-ui/components/panel/fakepanel.css new file mode 100644 index 0000000..e7549e9 --- /dev/null +++ b/theme/ckeditor5-ui/components/panel/fakepanel.css @@ -0,0 +1,39 @@ +/* + * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +@import "../../../mixins/_rounded.css"; +@import "../../../mixins/_shadow.css"; + +:root { + --ck-balloon-fake-panel-offset: 8px; +} + +/* Let's use `ck-balloon-panel` appearance. See: balloonpanel.css. */ +.ck .ck-fake-panels div { + @mixin ck-rounded-corners; + @mixin ck-drop-shadow; + + min-height: 15px; + + background: var(--ck-color-panel-background); + border: 1px solid var(--ck-color-panel-border); + + width: 100%; + height: 100%; +} + +.ck .ck-fake-panels div:nth-child( 1 ) { + margin-left: var(--ck-balloon-fake-panel-offset); + margin-top: var(--ck-balloon-fake-panel-offset); +} + +.ck .ck-fake-panels div:nth-child( 2 ) { + margin-left: calc(var(--ck-balloon-fake-panel-offset) * 2); + margin-top: calc(var(--ck-balloon-fake-panel-offset) * 2); +} +.ck .ck-fake-panels div:nth-child( 3 ) { + margin-left: calc(var(--ck-balloon-fake-panel-offset) * 2); + margin-top: calc(var(--ck-balloon-fake-panel-offset) * 3); +} From eaa25afa4c00318ed2066f17c4dd30ea75b769b4 Mon Sep 17 00:00:00 2001 From: dkonopka Date: Thu, 16 May 2019 09:56:20 +0200 Subject: [PATCH 02/10] Fixed styles for 3rd fake panel. --- theme/ckeditor5-ui/components/panel/fakepanel.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/theme/ckeditor5-ui/components/panel/fakepanel.css b/theme/ckeditor5-ui/components/panel/fakepanel.css index e7549e9..38b0afb 100644 --- a/theme/ckeditor5-ui/components/panel/fakepanel.css +++ b/theme/ckeditor5-ui/components/panel/fakepanel.css @@ -34,6 +34,6 @@ margin-top: calc(var(--ck-balloon-fake-panel-offset) * 2); } .ck .ck-fake-panels div:nth-child( 3 ) { - margin-left: calc(var(--ck-balloon-fake-panel-offset) * 2); + margin-left: calc(var(--ck-balloon-fake-panel-offset) * 3); margin-top: calc(var(--ck-balloon-fake-panel-offset) * 3); } From acbf638bc28afb0c73d2db6f15bc314f6752a192 Mon Sep 17 00:00:00 2001 From: dkonopka Date: Thu, 16 May 2019 10:04:06 +0200 Subject: [PATCH 03/10] Added border-radius to panels. --- theme/ckeditor5-ui/components/panel/fakepanel.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/theme/ckeditor5-ui/components/panel/fakepanel.css b/theme/ckeditor5-ui/components/panel/fakepanel.css index 38b0afb..a8049ce 100644 --- a/theme/ckeditor5-ui/components/panel/fakepanel.css +++ b/theme/ckeditor5-ui/components/panel/fakepanel.css @@ -3,7 +3,6 @@ * For licensing, see LICENSE.md. */ -@import "../../../mixins/_rounded.css"; @import "../../../mixins/_shadow.css"; :root { @@ -12,13 +11,13 @@ /* Let's use `ck-balloon-panel` appearance. See: balloonpanel.css. */ .ck .ck-fake-panels div { - @mixin ck-rounded-corners; @mixin ck-drop-shadow; min-height: 15px; background: var(--ck-color-panel-background); border: 1px solid var(--ck-color-panel-border); + border-radius: var(--ck-border-radius); width: 100%; height: 100%; From 77b6dedace78c986330655fe567104ab86f86e0f Mon Sep 17 00:00:00 2001 From: dkonopka Date: Thu, 16 May 2019 15:48:49 +0200 Subject: [PATCH 04/10] Disabled parent balloon box shadow with fake panels. --- theme/ckeditor5-ui/components/panel/balloonrotator.css | 8 ++++++++ theme/ckeditor5-ui/components/panel/fakepanel.css | 4 +++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/theme/ckeditor5-ui/components/panel/balloonrotator.css b/theme/ckeditor5-ui/components/panel/balloonrotator.css index 791d7ca..44761a4 100644 --- a/theme/ckeditor5-ui/components/panel/balloonrotator.css +++ b/theme/ckeditor5-ui/components/panel/balloonrotator.css @@ -21,3 +21,11 @@ margin-left: var(--ck-spacing-standard); } } + +.ck .ck-balloon-rotator__content { + + /* Disable default annotation shadow inside rotator with fake panels. */ + & .ck.ck-annotation-wrapper { + box-shadow: none; + } +} diff --git a/theme/ckeditor5-ui/components/panel/fakepanel.css b/theme/ckeditor5-ui/components/panel/fakepanel.css index a8049ce..5527efb 100644 --- a/theme/ckeditor5-ui/components/panel/fakepanel.css +++ b/theme/ckeditor5-ui/components/panel/fakepanel.css @@ -25,7 +25,9 @@ .ck .ck-fake-panels div:nth-child( 1 ) { margin-left: var(--ck-balloon-fake-panel-offset); - margin-top: var(--ck-balloon-fake-panel-offset); + + /* Because of parent shadow, we need to move panel by fixed value. */ + margin-top: calc( var(--ck-balloon-fake-panel-offset) + 1px ); } .ck .ck-fake-panels div:nth-child( 2 ) { From 43d69ea1ecb47a55e0be15e6b94fb58edc15a3c3 Mon Sep 17 00:00:00 2001 From: dkonopka Date: Tue, 21 May 2019 10:08:46 +0200 Subject: [PATCH 05/10] Changed `.ck-fake-panels` to `.ck-fake-panel`. --- theme/ckeditor5-ui/components/panel/fakepanel.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/theme/ckeditor5-ui/components/panel/fakepanel.css b/theme/ckeditor5-ui/components/panel/fakepanel.css index 5527efb..ffe1ae1 100644 --- a/theme/ckeditor5-ui/components/panel/fakepanel.css +++ b/theme/ckeditor5-ui/components/panel/fakepanel.css @@ -10,7 +10,7 @@ } /* Let's use `ck-balloon-panel` appearance. See: balloonpanel.css. */ -.ck .ck-fake-panels div { +.ck .ck-fake-panel div { @mixin ck-drop-shadow; min-height: 15px; @@ -23,18 +23,18 @@ height: 100%; } -.ck .ck-fake-panels div:nth-child( 1 ) { +.ck .ck-fake-panel div:nth-child( 1 ) { margin-left: var(--ck-balloon-fake-panel-offset); /* Because of parent shadow, we need to move panel by fixed value. */ margin-top: calc( var(--ck-balloon-fake-panel-offset) + 1px ); } -.ck .ck-fake-panels div:nth-child( 2 ) { +.ck .ck-fake-panel div:nth-child( 2 ) { margin-left: calc(var(--ck-balloon-fake-panel-offset) * 2); margin-top: calc(var(--ck-balloon-fake-panel-offset) * 2); } -.ck .ck-fake-panels div:nth-child( 3 ) { +.ck .ck-fake-panel div:nth-child( 3 ) { margin-left: calc(var(--ck-balloon-fake-panel-offset) * 3); margin-top: calc(var(--ck-balloon-fake-panel-offset) * 3); } From f097d79b2d0e1cd569c8691c5c374aaf61090302 Mon Sep 17 00:00:00 2001 From: dkonopka Date: Tue, 21 May 2019 11:29:30 +0200 Subject: [PATCH 06/10] Support fake panels for balloon positioned above element. --- .../components/panel/fakepanel.css | 22 ++++++++++++------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/theme/ckeditor5-ui/components/panel/fakepanel.css b/theme/ckeditor5-ui/components/panel/fakepanel.css index ffe1ae1..85b80aa 100644 --- a/theme/ckeditor5-ui/components/panel/fakepanel.css +++ b/theme/ckeditor5-ui/components/panel/fakepanel.css @@ -6,10 +6,11 @@ @import "../../../mixins/_shadow.css"; :root { - --ck-balloon-fake-panel-offset: 8px; + --ck-balloon-fake-panel-offset-horizontal: 8px; + --ck-balloon-fake-panel-offset-vertical: 8px; } -/* Let's use `ck-balloon-panel` appearance. See: balloonpanel.css. */ +/* Let's use `.ck-balloon-panel` appearance. See: balloonpanel.css. */ .ck .ck-fake-panel div { @mixin ck-drop-shadow; @@ -24,17 +25,22 @@ } .ck .ck-fake-panel div:nth-child( 1 ) { - margin-left: var(--ck-balloon-fake-panel-offset); + margin-left: var(--ck-balloon-fake-panel-offset-horizontal); /* Because of parent shadow, we need to move panel by fixed value. */ - margin-top: calc( var(--ck-balloon-fake-panel-offset) + 1px ); + margin-top: calc( var(--ck-balloon-fake-panel-offset-vertical) + 1px ); } .ck .ck-fake-panel div:nth-child( 2 ) { - margin-left: calc(var(--ck-balloon-fake-panel-offset) * 2); - margin-top: calc(var(--ck-balloon-fake-panel-offset) * 2); + margin-left: calc(var(--ck-balloon-fake-panel-offset-horizontal) * 2); + margin-top: calc(var(--ck-balloon-fake-panel-offset-vertical) * 2); } .ck .ck-fake-panel div:nth-child( 3 ) { - margin-left: calc(var(--ck-balloon-fake-panel-offset) * 3); - margin-top: calc(var(--ck-balloon-fake-panel-offset) * 3); + margin-left: calc(var(--ck-balloon-fake-panel-offset-horizontal) * 3); + margin-top: calc(var(--ck-balloon-fake-panel-offset-vertical) * 3); +} + +/* If balloon is positioned above element, we need to move fake panel to the top. */ +.ck .ck-balloon-panel_arrow_s + .ck-fake-panel { + --ck-balloon-fake-panel-offset-vertical: -8px; } From 16ac7e8bb9c2769ad005aa90dc7b6311afc536dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oskar=20Wr=C3=B3bel?= Date: Wed, 22 May 2019 12:28:00 +0200 Subject: [PATCH 07/10] Changed fake panel offsets. --- theme/ckeditor5-ui/components/panel/fakepanel.css | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/theme/ckeditor5-ui/components/panel/fakepanel.css b/theme/ckeditor5-ui/components/panel/fakepanel.css index 85b80aa..bc30e9e 100644 --- a/theme/ckeditor5-ui/components/panel/fakepanel.css +++ b/theme/ckeditor5-ui/components/panel/fakepanel.css @@ -6,8 +6,8 @@ @import "../../../mixins/_shadow.css"; :root { - --ck-balloon-fake-panel-offset-horizontal: 8px; - --ck-balloon-fake-panel-offset-vertical: 8px; + --ck-balloon-fake-panel-offset-horizontal: 6px; + --ck-balloon-fake-panel-offset-vertical: 6px; } /* Let's use `.ck-balloon-panel` appearance. See: balloonpanel.css. */ @@ -26,9 +26,7 @@ .ck .ck-fake-panel div:nth-child( 1 ) { margin-left: var(--ck-balloon-fake-panel-offset-horizontal); - - /* Because of parent shadow, we need to move panel by fixed value. */ - margin-top: calc( var(--ck-balloon-fake-panel-offset-vertical) + 1px ); + margin-top: var(--ck-balloon-fake-panel-offset-vertical); } .ck .ck-fake-panel div:nth-child( 2 ) { From fc45de1ded509c3fa75fd8c3634b8d8e6c3624e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oskar=20Wr=C3=B3bel?= Date: Wed, 22 May 2019 13:31:09 +0200 Subject: [PATCH 08/10] Minor adjustment of fake panel offset. --- theme/ckeditor5-ui/components/panel/fakepanel.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/theme/ckeditor5-ui/components/panel/fakepanel.css b/theme/ckeditor5-ui/components/panel/fakepanel.css index bc30e9e..2e533bb 100644 --- a/theme/ckeditor5-ui/components/panel/fakepanel.css +++ b/theme/ckeditor5-ui/components/panel/fakepanel.css @@ -40,5 +40,5 @@ /* If balloon is positioned above element, we need to move fake panel to the top. */ .ck .ck-balloon-panel_arrow_s + .ck-fake-panel { - --ck-balloon-fake-panel-offset-vertical: -8px; + --ck-balloon-fake-panel-offset-vertical: -6px; } From ec1088c4403bbfb6d0f826615e8c8a27b6be96a7 Mon Sep 17 00:00:00 2001 From: dkonopka Date: Wed, 22 May 2019 13:49:48 +0200 Subject: [PATCH 09/10] Proper fake panel position for balloon with se or sw class. --- theme/ckeditor5-ui/components/panel/fakepanel.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/theme/ckeditor5-ui/components/panel/fakepanel.css b/theme/ckeditor5-ui/components/panel/fakepanel.css index 2e533bb..53374d5 100644 --- a/theme/ckeditor5-ui/components/panel/fakepanel.css +++ b/theme/ckeditor5-ui/components/panel/fakepanel.css @@ -39,6 +39,8 @@ } /* If balloon is positioned above element, we need to move fake panel to the top. */ -.ck .ck-balloon-panel_arrow_s + .ck-fake-panel { +.ck .ck-balloon-panel_arrow_s + .ck-fake-panel, +.ck .ck-balloon-panel_arrow_se + .ck-fake-panel, +.ck .ck-balloon-panel_arrow_sw + .ck-fake-panel { --ck-balloon-fake-panel-offset-vertical: -6px; } From 9c903f3b2f89dad8eb3351b81ee1ca3bc00abd10 Mon Sep 17 00:00:00 2001 From: dkonopka Date: Wed, 22 May 2019 14:03:15 +0200 Subject: [PATCH 10/10] Make counter margins equal to the navigation buttons. --- theme/ckeditor5-ui/components/panel/balloonrotator.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/theme/ckeditor5-ui/components/panel/balloonrotator.css b/theme/ckeditor5-ui/components/panel/balloonrotator.css index 44761a4..a3018b9 100644 --- a/theme/ckeditor5-ui/components/panel/balloonrotator.css +++ b/theme/ckeditor5-ui/components/panel/balloonrotator.css @@ -18,7 +18,9 @@ /* Gives counter more breath than buttons. */ & .ck-balloon-rotator__counter { margin-right: var(--ck-spacing-standard); - margin-left: var(--ck-spacing-standard); + + /* We need to use smaller margin because of previous button's right margin. */ + margin-left: var(--ck-spacing-small); } }