From 5522992c2923276fca40417401e8fb2c536b4b4f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=B4me=20Lebleu?= Date: Fri, 1 Oct 2021 17:21:12 +0200 Subject: [PATCH] Use SVG icons in StreamField buttons and headers - Simplify rendering of .c-sf-button and its elements - replaces the rendering of `.c-sf-button` as a flexbox by a simple - block element - as it is enough here - and moves text related rules to the `); @@ -119,9 +121,9 @@ export class BaseSequenceChild extends EventEmitter {
- - - +

${h(this.blockDef.meta.label)} diff --git a/client/src/components/StreamField/blocks/StreamBlock.js b/client/src/components/StreamField/blocks/StreamBlock.js index ad8c463b0a..ad1f55341a 100644 --- a/client/src/components/StreamField/blocks/StreamBlock.js +++ b/client/src/components/StreamField/blocks/StreamBlock.js @@ -87,10 +87,10 @@ class StreamBlockMenu extends BaseInsertionControl { blockDefs.forEach(blockDef => { const button = $(` `); grid.append(button); diff --git a/client/src/components/StreamField/blocks/__snapshots__/ListBlock.test.js.snap b/client/src/components/StreamField/blocks/__snapshots__/ListBlock.test.js.snap index 3508047649..9ed8f3fc2c 100644 --- a/client/src/components/StreamField/blocks/__snapshots__/ListBlock.test.js.snap +++ b/client/src/components/StreamField/blocks/__snapshots__/ListBlock.test.js.snap @@ -21,20 +21,28 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be duplicated 1`] = `
- - - + + +

@@ -64,20 +72,28 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be duplicated 1`] = `
- - - + + +

@@ -107,20 +123,28 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be duplicated 1`] = `
- - - + + +

@@ -165,20 +189,28 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered downward 1`]
- - - + + +

@@ -208,20 +240,28 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered downward 1`]
- - - + + +

@@ -266,20 +306,28 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered upward 1`] =
- - - + + +

@@ -309,20 +357,28 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered upward 1`] =
- - - + + +

@@ -367,20 +423,28 @@ exports[`telepath: wagtail.blocks.ListBlock deleteBlock() deletes a block 1`] =
- - - + + +

@@ -410,20 +474,28 @@ exports[`telepath: wagtail.blocks.ListBlock deleteBlock() deletes a block 1`] =
- - - + + +

@@ -468,20 +540,28 @@ exports[`telepath: wagtail.blocks.ListBlock it renders correctly 1`] = `
- - - + + +

@@ -511,20 +591,28 @@ exports[`telepath: wagtail.blocks.ListBlock it renders correctly 1`] = `
- - - + + +

@@ -569,20 +657,28 @@ exports[`telepath: wagtail.blocks.ListBlock setError passes error messages to ch
- - - + + +

@@ -612,20 +708,28 @@ exports[`telepath: wagtail.blocks.ListBlock setError passes error messages to ch
- - - + + +

@@ -670,20 +774,28 @@ exports[`telepath: wagtail.blocks.ListBlock setError renders non-block errors 1`
- - - + + +

@@ -713,20 +825,28 @@ exports[`telepath: wagtail.blocks.ListBlock setError renders non-block errors 1`
- - - + + +

diff --git a/client/src/components/StreamField/blocks/__snapshots__/StreamBlock.test.js.snap b/client/src/components/StreamField/blocks/__snapshots__/StreamBlock.test.js.snap index b51a643381..b11873d897 100644 --- a/client/src/components/StreamField/blocks/__snapshots__/StreamBlock.test.js.snap +++ b/client/src/components/StreamField/blocks/__snapshots__/StreamBlock.test.js.snap @@ -25,20 +25,28 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be duplicated 1`] = `
- - - + + +

Test Block A
@@ -73,20 +81,28 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be duplicated 1`] = `
- - - + + +

Test Block B
@@ -121,20 +137,28 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be duplicated 1`] = `
- - - + + +

Test Block B
@@ -188,20 +212,28 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered downward 1
- - - + + +

Test Block B
@@ -236,20 +268,28 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered downward 1
- - - + + +

Test Block A
@@ -303,20 +343,28 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered upward 1`]
- - - + + +

Test Block B
@@ -351,20 +399,28 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered upward 1`]
- - - + + +

Test Block A
@@ -418,20 +474,28 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders correctly 1`] = `
- - - + + +

Test Block A
@@ -466,20 +530,28 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders correctly 1`] = `
- - - + + +

Test Block B
@@ -533,20 +605,28 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders menus on opening 1`] =
- - - + + +

Test Block A
@@ -570,15 +650,15 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders menus on opening 1`] =
@@ -591,20 +671,28 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders menus on opening 1`] =
- - - + + +

Test Block B
@@ -658,20 +746,28 @@ exports[`telepath: wagtail.blocks.StreamBlock setError renders error messages 1`
- - - + + +

Test Block A
@@ -706,20 +802,28 @@ exports[`telepath: wagtail.blocks.StreamBlock setError renders error messages 1`
- - - + + +

Test Block B
@@ -762,15 +866,15 @@ exports[`telepath: wagtail.blocks.StreamBlock with labels that need escaping it
@@ -783,20 +887,28 @@ exports[`telepath: wagtail.blocks.StreamBlock with labels that need escaping it
- - - + + +

Test Block <A>
@@ -831,20 +943,28 @@ exports[`telepath: wagtail.blocks.StreamBlock with labels that need escaping it
- - - + + +

Test Block <B>
diff --git a/client/src/components/StreamField/scss/_variables.scss b/client/src/components/StreamField/scss/_variables.scss index 49a1cd35b6..26c10cce32 100644 --- a/client/src/components/StreamField/scss/_variables.scss +++ b/client/src/components/StreamField/scss/_variables.scss @@ -31,3 +31,4 @@ $screen-xs-max: 799px !default; $screen-sm-min: 800px !default; $screen-l-min: 1075px !default; $add-panel-gutter: 8px !default; +$font-sans: 'Open Sans', sans-serif !default; diff --git a/client/src/components/StreamField/scss/components/c-sf-block.scss b/client/src/components/StreamField/scss/components/c-sf-block.scss index 5d5fb3c2b4..356e7eb545 100644 --- a/client/src/components/StreamField/scss/components/c-sf-block.scss +++ b/client/src/components/StreamField/scss/components/c-sf-block.scss @@ -58,8 +58,9 @@ } &__icon { + width: 20px; + height: 20px; margin: 0 $header-gutter; - font-size: 20px; transition: color $hover-transition-duration ease-in-out; } } @@ -84,14 +85,14 @@ cursor: pointer; color: $header-text-color; opacity: 1; - transition: opacity $hover-transition-duration ease-in-out, background-color $hover-transition-duration ease-in-out; - transition-property: opacity, color, background-color; - font-size: $action-font-size; + transition: opacity $hover-transition-duration ease-in-out, color $hover-transition-duration ease-in-out, background-color $hover-transition-duration ease-in-out; border-radius: 50%; width: 30px; height: 30px; + line-height: 1; + font-size: $action-font-size; text-align: center; - padding: 0 8px; + padding: 0; &:not(:last-of-type) { margin-right: 3px; @@ -99,23 +100,14 @@ &:focus, &:hover { + color: #333; background-color: rgba(0, 0, 0, 0.05); - - /* stylelint-disable-next-line max-nesting-depth */ - i { - color: #333; - } } - i { - font-style: normal; - transition: color $hover-transition-duration ease-in-out; - - /* stylelint-disable-next-line max-nesting-depth */ - &:before { - vertical-align: top; - margin: 0 0 0 -2px; - } + svg.icon { + width: 1em; + height: 1em; + vertical-align: middle; } &[disabled] { diff --git a/client/src/components/StreamField/scss/components/c-sf-button.scss b/client/src/components/StreamField/scss/components/c-sf-button.scss index c0e9228cfb..942e5d7e2b 100644 --- a/client/src/components/StreamField/scss/components/c-sf-button.scss +++ b/client/src/components/StreamField/scss/components/c-sf-button.scss @@ -1,9 +1,13 @@ .c-sf-button { - $root: &; - display: flex; flex: 1 1 200px; margin: $add-panel-gutter; appearance: none; + color: #333; + line-height: 1.833; + font-weight: 600; + font-size: 12px; + font-family: $font-sans; + text-align: left; background: #eee; padding: $type-button-padding-vertical $type-button-padding-horizontal; border: 1px solid #e6e6e6; @@ -11,17 +15,12 @@ outline: none; cursor: pointer; overflow: hidden; - transition: background-color $hover-transition-duration ease-in-out; - justify-content: center; + transition: background-color $hover-transition-duration ease-in-out, color $hover-transition-duration ease-in-out; &:hover, &:focus { + color: #fff; background-color: $teal; - - #{$root}__icon, - #{$root}__label { - color: #fff; - } } &[disabled] { @@ -29,37 +28,10 @@ pointer-events: none; } - // Fallback for no `grid` support in IE11 - /* stylelint-disable-next-line scss/media-feature-value-dollar-variable */ - @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { - display: inline-block; - margin: 0 10px 10px 0; - } - - &__icon, - &__label { - display: inline-block; - - // Fixes for label elements getting global `label` styles from Wagtail -@jonnyscholes - color: #333; - font-weight: 600; - font-size: 12px; - font-family: 'Open Sans', sans-serif; - transition: color $hover-transition-duration ease-in-out; - } - &__icon { - font-size: 16px; - padding-right: $type-button-padding-horizontal; - - .icon { - &::before { - vertical-align: initial; - } - } - } - - &__label { - padding-top: 2px; + width: 16px; + height: 16px; + margin-right: 0.5em; + vertical-align: text-top; } } diff --git a/docs/releases/2.15.rst b/docs/releases/2.15.rst index 52eb53573d..e4257156e5 100644 --- a/docs/releases/2.15.rst +++ b/docs/releases/2.15.rst @@ -56,6 +56,7 @@ Other features * Added the ability to customise the pre-filled Image title on upload and it now defaults to the filename without the file extension (LB Johnston) * Add support for Python 3.10 (Matt Westcott) * Introduce, ``autocomplete``, a separate method which performs partial matching on specific autocomplete fields. This is useful for suggesting pages to the user in real-time as they type their query. (Karl Hobley, Matt Westcott) + * Use SVG icons in StreamField buttons and headers (Jérôme Lebleu) Bug fixes ~~~~~~~~~