From 699e8591227a3f955f366cb72177e2fdae0d5b02 Mon Sep 17 00:00:00 2001 From: Mick Ryan Date: Tue, 26 May 2020 09:16:51 -0700 Subject: [PATCH] fix(controls): update region annotation icon (#1212) * fix(controls): update region annotation icon * fix(controls): update region annotation icon * Fix test * fix(controls): update region annotation icon * Remove un-needed class --- src/lib/AnnotationControls.scss | 21 ++++++++++++++------ src/lib/AnnotationControls.ts | 4 ++-- src/lib/__tests__/AnnotationControls-test.js | 4 ++-- src/lib/icons/region_comment.svg | 2 +- 4 files changed, 20 insertions(+), 11 deletions(-) diff --git a/src/lib/AnnotationControls.scss b/src/lib/AnnotationControls.scss index b52de78f4..adf7fc648 100644 --- a/src/lib/AnnotationControls.scss +++ b/src/lib/AnnotationControls.scss @@ -1,23 +1,32 @@ .bp-AnnotationControls-group { - padding: 0 4px 0 8px; + padding-left: 4px; border-left: 1px solid $twos; .bp-AnnotationControls-regionBtn { - width: $controls-button-width; - height: $controls-button-width; - border-radius: 4px; + position: relative; + display: flex; + align-items: center; + justify-content: center; svg { fill: $white; } &.is-active { - background-color: $white; - svg { fill: $black; } } + + &.is-active::before { + position: absolute; + z-index: -1; + width: 34px; + height: 32px; + background-color: $white; + border-radius: 4px; + content: ''; + } } &.is-hidden { diff --git a/src/lib/AnnotationControls.ts b/src/lib/AnnotationControls.ts index 4961d4179..c87125d31 100644 --- a/src/lib/AnnotationControls.ts +++ b/src/lib/AnnotationControls.ts @@ -1,7 +1,7 @@ import noop from 'lodash/noop'; import { ICON_REGION_COMMENT } from './icons/icons'; -import Controls, { CLASS_BOX_CONTROLS_GROUP_BUTTON } from './Controls'; +import Controls from './Controls'; import fullscreen from './Fullscreen'; export const CLASS_ANNOTATIONS_GROUP = 'bp-AnnotationControls-group'; @@ -153,7 +153,7 @@ export default class AnnotationControls { const regionButton = this.controls.add( __('region_comment'), this.handleClick(onRegionClick, AnnotationMode.REGION), - `${CLASS_BOX_CONTROLS_GROUP_BUTTON} ${CLASS_REGION_BUTTON}`, + CLASS_REGION_BUTTON, ICON_REGION_COMMENT, 'button', groupElement, diff --git a/src/lib/__tests__/AnnotationControls-test.js b/src/lib/__tests__/AnnotationControls-test.js index acfac3ee5..47c9b3b50 100644 --- a/src/lib/__tests__/AnnotationControls-test.js +++ b/src/lib/__tests__/AnnotationControls-test.js @@ -7,7 +7,7 @@ import AnnotationControls, { CLASS_GROUP_HIDE, CLASS_REGION_BUTTON, } from '../AnnotationControls'; -import Controls, { CLASS_BOX_CONTROLS_GROUP_BUTTON } from '../Controls'; +import Controls from '../Controls'; import fullscreen from '../Fullscreen'; let annotationControls; @@ -89,7 +89,7 @@ describe('lib/AnnotationControls', () => { expect(annotationControls.controls.add).to.be.calledWith( __('region_comment'), stubs.regionHandler, - `${CLASS_BOX_CONTROLS_GROUP_BUTTON} ${CLASS_REGION_BUTTON}`, + CLASS_REGION_BUTTON, ICON_REGION_COMMENT, 'button', sinon.match.any, diff --git a/src/lib/icons/region_comment.svg b/src/lib/icons/region_comment.svg index 44d60d9e7..4027ddb2d 100644 --- a/src/lib/icons/region_comment.svg +++ b/src/lib/icons/region_comment.svg @@ -1 +1 @@ - \ No newline at end of file +