From 3eb560527fdd34341807ef8830d5ad01a5515cb5 Mon Sep 17 00:00:00 2001 From: Damian Konopka Date: Tue, 15 May 2018 14:23:53 +0200 Subject: [PATCH 1/3] Moved visual styles of finished upload icon from ckeditor5-image. --- theme/ckeditor5-image/imageuploadicon.css | 60 +++++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 theme/ckeditor5-image/imageuploadicon.css diff --git a/theme/ckeditor5-image/imageuploadicon.css b/theme/ckeditor5-image/imageuploadicon.css new file mode 100644 index 0000000..7207b3e --- /dev/null +++ b/theme/ckeditor5-image/imageuploadicon.css @@ -0,0 +1,60 @@ +/* + * 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-fade-in, ck-fade-out; + 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: 1; + height: calc( var(--ck-image-upload-icon-size) / 3 ); + width: calc( var(--ck-image-upload-icon-size) / 5 ); + 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); + } +} + +@keyframes ck-fade-in { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +@keyframes ck-fade-out { + from { + opacity: 1; + } + + to { + opacity: 0; + } +} From c05160d2851cf96de34ced2421f021749163aa0a Mon Sep 17 00:00:00 2001 From: Damian Konopka Date: Tue, 15 May 2018 15:50:31 +0200 Subject: [PATCH 2/3] Reverted check icon animation (with Edge support). --- theme/ckeditor5-image/imageuploadicon.css | 41 +++++++++++++++++++++-- 1 file changed, 38 insertions(+), 3 deletions(-) diff --git a/theme/ckeditor5-image/imageuploadicon.css b/theme/ckeditor5-image/imageuploadicon.css index 7207b3e..9b64a36 100644 --- a/theme/ckeditor5-image/imageuploadicon.css +++ b/theme/ckeditor5-image/imageuploadicon.css @@ -29,13 +29,19 @@ left: 25%; top: 50%; - opacity: 1; - height: calc( var(--ck-image-upload-icon-size) / 3 ); - width: calc( var(--ck-image-upload-icon-size) / 5 ); + 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-check-icon; + animation-duration: 500ms; + animation-delay: 500ms; + animation-fill-mode: forwards; } } @@ -58,3 +64,32 @@ opacity: 0; } } + +@keyframes ck-check-icon { + 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; + } +} From 716210cf63c3c56fca9bd7c49fbf6fa7a0b35b22 Mon Sep 17 00:00:00 2001 From: Damian Konopka Date: Fri, 18 May 2018 09:36:21 +0200 Subject: [PATCH 3/3] Changed naming of CSS animations. --- theme/ckeditor5-image/imageuploadicon.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/theme/ckeditor5-image/imageuploadicon.css b/theme/ckeditor5-image/imageuploadicon.css index 9b64a36..e142de1 100644 --- a/theme/ckeditor5-image/imageuploadicon.css +++ b/theme/ckeditor5-image/imageuploadicon.css @@ -16,7 +16,7 @@ height: var(--ck-image-upload-icon-size); opacity: 0; background: var(--ck-color-image-upload-icon-background); - animation-name: ck-fade-in, ck-fade-out; + animation-name: ck-upload-complete-icon-show, ck-upload-complete-icon-hide; animation-fill-mode: forwards, forwards; animation-duration: 500ms, 500ms; @@ -38,14 +38,14 @@ 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-check-icon; + animation-name: ck-upload-complete-icon-check; animation-duration: 500ms; animation-delay: 500ms; animation-fill-mode: forwards; } } -@keyframes ck-fade-in { +@keyframes ck-upload-complete-icon-show { from { opacity: 0; } @@ -55,7 +55,7 @@ } } -@keyframes ck-fade-out { +@keyframes ck-upload-complete-icon-hide { from { opacity: 1; } @@ -65,7 +65,7 @@ } } -@keyframes ck-check-icon { +@keyframes ck-upload-complete-icon-check { 0% { opacity: 1; height: 0;