From 39bc785073fd63e954b7445c331797ac4e6b34a2 Mon Sep 17 00:00:00 2001 From: Tim Wright Date: Tue, 30 Oct 2018 16:28:37 -0400 Subject: [PATCH 1/6] merge from upstream --- gutenberg-mobile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gutenberg-mobile b/gutenberg-mobile index c90c36410d4c0c..776bb23f7f19ef 160000 --- a/gutenberg-mobile +++ b/gutenberg-mobile @@ -1 +1 @@ -Subproject commit c90c36410d4c0c3f2dea84ca666b1b585408a03f +Subproject commit 776bb23f7f19ef57b491f9708e9795b3a2ddb68e From cc87beb9947e06990f3d5dc574656c811c3696ec Mon Sep 17 00:00:00 2001 From: Tim Wright Date: Wed, 28 Nov 2018 13:49:45 -0500 Subject: [PATCH 2/6] local save --- package-lock.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5d995bca4758f9..907960cc5096e2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11402,7 +11402,7 @@ }, "yargs": { "version": "11.1.0", - "resolved": "http://registry.npmjs.org/yargs/-/yargs-11.1.0.tgz", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-11.1.0.tgz", "integrity": "sha512-NwW69J42EsCSanF8kyn5upxvjp5ds+t3+udGBeTbFnERA+lF541DDpMawzo4z6W/QrzNM18D+BPMiOBibnFV5A==", "dev": true, "requires": { @@ -12713,7 +12713,7 @@ }, "yargs": { "version": "11.1.0", - "resolved": "http://registry.npmjs.org/yargs/-/yargs-11.1.0.tgz", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-11.1.0.tgz", "integrity": "sha512-NwW69J42EsCSanF8kyn5upxvjp5ds+t3+udGBeTbFnERA+lF541DDpMawzo4z6W/QrzNM18D+BPMiOBibnFV5A==", "dev": true, "requires": { From 2cf001e4a61c869eb19e2bbc90ec50ff5bb65584 Mon Sep 17 00:00:00 2001 From: Tim Wright Date: Fri, 30 Nov 2018 13:38:10 -0500 Subject: [PATCH 3/6] darked focus state outline for block lists --- packages/editor/src/components/block-list/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss index 3ecb8dcc263b82..250786c8153c3a 100644 --- a/packages/editor/src/components/block-list/style.scss +++ b/packages/editor/src/components/block-list/style.scss @@ -130,10 +130,10 @@ // Selected style &.is-selected > .editor-block-list__block-edit::before { // Use opacity to work in various editor styles. - outline: $border-width solid $dark-opacity-light-500; + outline: $border-width solid $dark-opacity-200; .is-dark-theme & { - outline-color: $light-opacity-light-500; + outline-color: $light-opacity-300; } } From e2bb065fb38269b92631fd7657ac283729e9a02f Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Wed, 6 Feb 2019 11:27:00 -0500 Subject: [PATCH 4/6] Make selected block outline darker (with animation) Adds a darker border to block borders, but fades it out to a lighter border after 1 second. --- assets/stylesheets/_animations.scss | 20 +++++++++++++++++++ .../src/components/block-list/style.scss | 14 ++++++++----- .../src/components/block-toolbar/style.scss | 11 ++++++---- 3 files changed, 36 insertions(+), 9 deletions(-) diff --git a/assets/stylesheets/_animations.scss b/assets/stylesheets/_animations.scss index 755161bc852ff5..3e68f2376dee63 100644 --- a/assets/stylesheets/_animations.scss +++ b/assets/stylesheets/_animations.scss @@ -6,3 +6,23 @@ animation: edit-post__fade-in-animation $speed ease-out $delay; animation-fill-mode: forwards; } + +/** + * Outline animation + */ + +@keyframes outline-fade-animation { + from { + outline-color: $dark-opacity-200; + border-color: $dark-opacity-200; + } + to { + outline-color: $dark-opacity-light-500; + border-color: $dark-opacity-light-500; + } +} + +@mixin outline-fade-animation($speed: 0.2s, $delay: 1s) { + animation: outline-fade-animation $speed ease-out $delay; + animation-fill-mode: forwards; +} diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss index 250786c8153c3a..127d0bfdd58ac6 100644 --- a/packages/editor/src/components/block-list/style.scss +++ b/packages/editor/src/components/block-list/style.scss @@ -131,6 +131,7 @@ &.is-selected > .editor-block-list__block-edit::before { // Use opacity to work in various editor styles. outline: $border-width solid $dark-opacity-200; + @include outline-fade-animation(); .is-dark-theme & { outline-color: $light-opacity-300; @@ -302,7 +303,7 @@ // Position toolbar better on mobile. .editor-block-contextual-toolbar { width: auto; - border-bottom: $border-width solid $light-gray-500; + border-bottom: $border-width solid $dark-opacity-200; bottom: auto; } } @@ -563,8 +564,9 @@ margin-top: $block-toolbar-height; margin-right: -$block-padding; margin-left: -$block-padding; - border-top: $border-width solid $light-gray-500; + border-top: $border-width solid $dark-opacity-200; height: $block-toolbar-height; + @include outline-fade-animation(); @include break-small() { display: none; @@ -765,7 +767,9 @@ right: -$block-padding; // Paint the borders on the toolbar itself on mobile. - border-top: $border-width solid $light-gray-500; + border-top: $border-width solid $dark-opacity-200; + @include outline-fade-animation(); + .components-toolbar { border-top: none; border-bottom: none; @@ -774,8 +778,8 @@ @include break-small() { border-top: none; .components-toolbar { - border-top: $border-width solid $light-gray-500; - border-bottom: $border-width solid $light-gray-500; + border-top: $border-width solid $dark-opacity-200; + border-bottom: $border-width solid $dark-opacity-200; } } } diff --git a/packages/editor/src/components/block-toolbar/style.scss b/packages/editor/src/components/block-toolbar/style.scss index 77b15329ad1e27..59a871a5c0e7e6 100644 --- a/packages/editor/src/components/block-toolbar/style.scss +++ b/packages/editor/src/components/block-toolbar/style.scss @@ -11,15 +11,18 @@ } // Show a left border on the parent container. - border-left: $border-width solid $light-gray-500; + border-left: $border-width solid $dark-opacity-200; + @include outline-fade-animation(); // The component is born with a border, but we only need some of them. .components-toolbar { border: 0; - border-top: $border-width solid $light-gray-500; - border-bottom: $border-width solid $light-gray-500; + border-top: $border-width solid $dark-opacity-200; + border-bottom: $border-width solid $dark-opacity-200; // Add a right border to show as separator in the block toolbar. - border-right: $border-width solid $light-gray-500; + border-right: $border-width solid $dark-opacity-200; + + @include outline-fade-animation(); } } From 619b6f75deea3a51dee3a12735b7d167824e6379 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Thu, 7 Feb 2019 12:37:53 -0500 Subject: [PATCH 5/6] Remove border animation when top toolbar is active. --- .../src/components/header/header-toolbar/style.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss index 02410b24407a54..a47238d9779c59 100644 --- a/packages/edit-post/src/components/header/header-toolbar/style.scss +++ b/packages/edit-post/src/components/header/header-toolbar/style.scss @@ -38,6 +38,12 @@ border-bottom: none; } + .editor-block-toolbar, + .components-toolbar { + border-color: $dark-opacity-light-500; + animation: none; + } + .is-sidebar-opened & { display: none; } From 037e54188d8431b2ac49deca0a48030e04a5f1e9 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Thu, 7 Feb 2019 12:46:25 -0500 Subject: [PATCH 6/6] Apply fade animation to the page title. --- packages/editor/src/components/post-permalink/style.scss | 3 ++- packages/editor/src/components/post-title/style.scss | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/post-permalink/style.scss b/packages/editor/src/components/post-permalink/style.scss index c35abcb009dfca..825378ae146d6e 100644 --- a/packages/editor/src/components/post-permalink/style.scss +++ b/packages/editor/src/components/post-permalink/style.scss @@ -9,7 +9,8 @@ white-space: nowrap; // Use opacity to work in various editor styles. - border: $border-width solid $dark-opacity-light-500; + border: $border-width solid $dark-opacity-200; + @include outline-fade-animation(); background-clip: padding-box; // Put toolbar snugly to edge on mobile. diff --git a/packages/editor/src/components/post-title/style.scss b/packages/editor/src/components/post-title/style.scss index 71fc698dea2024..dd5c4130871a87 100644 --- a/packages/editor/src/components/post-title/style.scss +++ b/packages/editor/src/components/post-title/style.scss @@ -50,7 +50,8 @@ &:not(.is-focus-mode) { &.is-selected .editor-post-title__input { // use opacity to work in various editor styles - border-color: $dark-opacity-light-500; + border-color: $dark-opacity-200; + @include outline-fade-animation(); .is-dark-theme & { border-color: $light-opacity-light-500;