diff --git a/src/lib/Controls.scss b/src/lib/Controls.scss index 2f2eccaf4d..c76d8d9254 100644 --- a/src/lib/Controls.scss +++ b/src/lib/Controls.scss @@ -6,7 +6,7 @@ $controls-button-width: 32px; left: 50%; display: flex; background: fade-out($black, .2); - border-radius: 3px; + border-radius: 6px; transform: translateX(-50%); opacity: 0; transition: opacity .5s; @@ -40,13 +40,14 @@ $controls-button-width: 32px; .bp-controls-btn { display: block; - width: 48px; - height: 48px; + width: 44px; + height: 44px; margin: 0; padding: 0; color: $white; background: transparent; border: 1px solid transparent; + border-radius: 6px; outline: 0; cursor: pointer; opacity: .7; diff --git a/src/lib/viewers/controls/_styles.scss b/src/lib/viewers/controls/_styles.scss index 07610e22c0..7a072b2849 100644 --- a/src/lib/viewers/controls/_styles.scss +++ b/src/lib/viewers/controls/_styles.scss @@ -1,30 +1,16 @@ -@import '~box-ui-elements/es/styles/variables'; +@import '~box-ui-elements/es/styles/constants/colors'; +@import '~box-ui-elements/es/styles/deprecated'; $bp-controls-background: fade-out($black, .2); +$bp-controls-opacity: .8; +$bp-controls-outline: inset 0 0 0 1px fade-out($white, .5), 0 1px 2px fade-out($black, .9); +$bp-controls-radius-inner: 4px; +$bp-controls-radius-outer: 6px; +$bp-controls-size-default: 44px; +$bp-controls-size-small: 32px; +$bp-controls-spacing: 6px; -@mixin bp-Control--hover { - opacity: .7; - transition: opacity 150ms; - will-change: opacity; // Prevent flickering in Safari - - &:focus, - &:hover { - opacity: 1; - } -} - -@mixin bp-Control--focus { - outline: 0; - - &:focus { - box-shadow: inset 0 0 0 1px fade-out($white, .5), 0 1px 2px fade-out($black, .9); - } -} - -@mixin bp-ControlButton($height: 48px, $width: 48px) { - @include bp-Control--hover; - @include bp-Control--focus; - +@mixin bp-Control($height: $bp-controls-size-default, $width: $bp-controls-size-default) { display: flex; align-items: center; justify-content: center; @@ -35,6 +21,7 @@ $bp-controls-background: fade-out($black, .2); color: $white; background: transparent; border: 1px solid transparent; + border-radius: $bp-controls-radius-outer; cursor: pointer; user-select: none; touch-action: manipulation; @@ -45,11 +32,62 @@ $bp-controls-background: fade-out($black, .2); opacity: .2; pointer-events: none; } + + @include bp-Control--fade; + @include bp-Control--outline; } -@mixin bp-ControlGroup { +@mixin bp-Control--expand { + margin-top: -$bp-controls-spacing; + margin-bottom: -$bp-controls-spacing; +} + +@mixin bp-Control--fade { + opacity: $bp-controls-opacity; + transition: opacity 150ms; + will-change: opacity; // Prevent flickering in Safari + + &:focus, + &:hover { + opacity: 1; // Show effect for all events in legacy browsers (IE, Safari) + } + + &:focus-visible { + opacity: 1; // Show effect for keyboard events in modern browsers + } + + &:focus:not(:focus-visible) { + opacity: $bp-controls-opacity; // Remove effect for mouse events in modern browsers + } +} + +@mixin bp-Control--outline { + outline: 0; + + &:focus { + box-shadow: $bp-controls-outline; // Show effect for all events in legacy browsers (IE, Safari) + } + + &:focus-visible { + box-shadow: $bp-controls-outline; // Show effect for keyboard events in modern browsers + } + + &:focus:not(:focus-visible) { + box-shadow: none; // Remove effect for mouse events in modern browsers + } +} + +@mixin bp-ControlLabel { display: flex; align-items: center; - margin-right: 4px; - margin-left: 4px; + justify-content: center; + min-width: $bp-controls-size-default; + padding-right: 3px; + padding-left: 3px; + color: $white; + font-size: 13px; + line-height: 1; + white-space: nowrap; + opacity: $bp-controls-opacity; + user-select: none; } diff --git a/src/lib/viewers/controls/annotations/AnnotationsButton.scss b/src/lib/viewers/controls/annotations/AnnotationsButton.scss index 1c58717d5c..43467a61d2 100644 --- a/src/lib/viewers/controls/annotations/AnnotationsButton.scss +++ b/src/lib/viewers/controls/annotations/AnnotationsButton.scss @@ -2,13 +2,13 @@ @import '../styles'; .bp-AnnotationsButton { - @include bp-ControlButton; + @include bp-Control; svg { width: 34px; height: 32px; padding: 4px 5px; - border-radius: 4px; + border-radius: $bp-controls-radius-inner; fill: $white; } diff --git a/src/lib/viewers/controls/annotations/AnnotationsControls.scss b/src/lib/viewers/controls/annotations/AnnotationsControls.scss index 92d04fb386..e17c266623 100644 --- a/src/lib/viewers/controls/annotations/AnnotationsControls.scss +++ b/src/lib/viewers/controls/annotations/AnnotationsControls.scss @@ -2,8 +2,6 @@ @import '../styles'; .bp-AnnotationsControls { - @include bp-ControlGroup; - - padding-left: 4px; - border-left: 1px solid $twos; + display: flex; + align-items: center; } diff --git a/src/lib/viewers/controls/color-picker/ColorPickerControl.scss b/src/lib/viewers/controls/color-picker/ColorPickerControl.scss index 1609681cff..01bd6b5f44 100644 --- a/src/lib/viewers/controls/color-picker/ColorPickerControl.scss +++ b/src/lib/viewers/controls/color-picker/ColorPickerControl.scss @@ -8,7 +8,7 @@ } .bp-ColorPickerControl-toggle { - @include bp-ControlButton; + @include bp-Control; &.bp-is-active, &:focus, @@ -16,7 +16,7 @@ .bp-ColorPickerControl-toggle-background { padding: 8px; background-color: $fours; - border-radius: 4px; + border-radius: $bp-controls-radius-inner; } } } diff --git a/src/lib/viewers/controls/color-picker/ColorPickerPalette.scss b/src/lib/viewers/controls/color-picker/ColorPickerPalette.scss index 9bbb9b7bfc..ce7f8d04ee 100644 --- a/src/lib/viewers/controls/color-picker/ColorPickerPalette.scss +++ b/src/lib/viewers/controls/color-picker/ColorPickerPalette.scss @@ -6,7 +6,7 @@ justify-content: center; padding: 0 8px; background: $bp-controls-background; - border-radius: 4px; + border-radius: $bp-controls-radius-inner; } .bp-ColorPickerPalette-button { @@ -15,7 +15,7 @@ margin: 10px 2px; padding: 0; border: none; - border-radius: 4px; + border-radius: $bp-controls-radius-inner; cursor: pointer; &:focus, diff --git a/src/lib/viewers/controls/controls-bar/ControlsBar.scss b/src/lib/viewers/controls/controls-bar/ControlsBar.scss index 28910225bf..c9d081b73c 100644 --- a/src/lib/viewers/controls/controls-bar/ControlsBar.scss +++ b/src/lib/viewers/controls/controls-bar/ControlsBar.scss @@ -1,12 +1,16 @@ -@import '~box-ui-elements/es/styles/variables'; +@import '../styles'; .bp-ControlsBar { display: flex; align-items: center; - background: fade-out($black, .2); - border-radius: 3px; + background: $bp-controls-background; + border-radius: $bp-controls-radius-outer; + + &:empty { + display: none; + } & + & { - margin-left: 6px; + margin-left: $bp-controls-spacing; } } diff --git a/src/lib/viewers/controls/controls-bar/ControlsBarGroup.scss b/src/lib/viewers/controls/controls-bar/ControlsBarGroup.scss new file mode 100644 index 0000000000..45678261b9 --- /dev/null +++ b/src/lib/viewers/controls/controls-bar/ControlsBarGroup.scss @@ -0,0 +1,20 @@ +@import 'src/lib/viewers/controls/styles'; + +.bp-ControlsBarGroup { + display: flex; + align-items: center; + margin-left: $bp-controls-spacing; + + &:empty { + display: none; + } + + &:last-child { + margin-right: $bp-controls-spacing; + } +} + +.bp-ControlsBarGroup--distinct { + background-color: $bdl-gray-80; + border-radius: $bp-controls-radius-inner; +} diff --git a/src/lib/viewers/controls/controls-bar/ControlsBarGroup.tsx b/src/lib/viewers/controls/controls-bar/ControlsBarGroup.tsx new file mode 100644 index 0000000000..feae86e4e7 --- /dev/null +++ b/src/lib/viewers/controls/controls-bar/ControlsBarGroup.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import classNames from 'classnames'; +import './ControlsBarGroup.scss'; + +export type Props = React.HTMLAttributes & { + isDistinct?: boolean; +}; + +export default function ControlsBarGroup({ children, className, isDistinct }: Props): JSX.Element { + return ( +
+ {children} +
+ ); +} diff --git a/src/lib/viewers/controls/controls-bar/index.ts b/src/lib/viewers/controls/controls-bar/index.ts index a06ea5e909..36c3b0bad7 100644 --- a/src/lib/viewers/controls/controls-bar/index.ts +++ b/src/lib/viewers/controls/controls-bar/index.ts @@ -1 +1,2 @@ export { default } from './ControlsBar'; +export { default as ControlsBarGroup } from './ControlsBarGroup'; diff --git a/src/lib/viewers/controls/findbar/FindBarToggle.scss b/src/lib/viewers/controls/findbar/FindBarToggle.scss index 220d5d7b57..22e4a4d827 100644 --- a/src/lib/viewers/controls/findbar/FindBarToggle.scss +++ b/src/lib/viewers/controls/findbar/FindBarToggle.scss @@ -1,5 +1,5 @@ @import '../styles'; .bp-FindBarToggle { - @include bp-ControlButton; + @include bp-Control; } diff --git a/src/lib/viewers/controls/findbar/FindBarToggle.tsx b/src/lib/viewers/controls/findbar/FindBarToggle.tsx index 5092a2f290..44bf1388ea 100644 --- a/src/lib/viewers/controls/findbar/FindBarToggle.tsx +++ b/src/lib/viewers/controls/findbar/FindBarToggle.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import IconSearch18 from '../icons/IconSearch18'; +import IconSearch24 from '../icons/IconSearch24'; import './FindBarToggle.scss'; export type Props = { @@ -13,7 +13,7 @@ export default function FindBarToggle({ onFindBarToggle }: Props): JSX.Element | return ( ); } diff --git a/src/lib/viewers/controls/findbar/__tests__/FindBarToggle-test.tsx b/src/lib/viewers/controls/findbar/__tests__/FindBarToggle-test.tsx index 76e3c41f23..dc776c6327 100644 --- a/src/lib/viewers/controls/findbar/__tests__/FindBarToggle-test.tsx +++ b/src/lib/viewers/controls/findbar/__tests__/FindBarToggle-test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { shallow, ShallowWrapper } from 'enzyme'; import FindBarToggle from '../FindBarToggle'; -import IconSearch18 from '../../icons/IconSearch18'; +import IconSearch24 from '../../icons/IconSearch24'; describe('FindBarToggle', () => { const getWrapper = (props = {}): ShallowWrapper => shallow(); @@ -22,7 +22,7 @@ describe('FindBarToggle', () => { const wrapper = getWrapper({ onFindBarToggle: jest.fn() }); expect(wrapper.hasClass('bp-FindBarToggle')).toBe(true); - expect(wrapper.exists(IconSearch18)).toBe(true); + expect(wrapper.exists(IconSearch24)).toBe(true); }); test('should return an empty wrapper if no callback is defined', () => { diff --git a/src/lib/viewers/controls/fullscreen/FullscreenToggle.scss b/src/lib/viewers/controls/fullscreen/FullscreenToggle.scss index 8e4ac071b3..272f5d7cc6 100644 --- a/src/lib/viewers/controls/fullscreen/FullscreenToggle.scss +++ b/src/lib/viewers/controls/fullscreen/FullscreenToggle.scss @@ -1,5 +1,5 @@ @import 'src/lib/viewers/controls/styles'; .bp-FullscreenToggle { - @include bp-ControlButton; + @include bp-Control; } diff --git a/src/lib/viewers/controls/icons/IconArrowDown24.tsx b/src/lib/viewers/controls/icons/IconArrowDown24.tsx index ed78a9dbdf..c7e4d90dae 100644 --- a/src/lib/viewers/controls/icons/IconArrowDown24.tsx +++ b/src/lib/viewers/controls/icons/IconArrowDown24.tsx @@ -4,7 +4,6 @@ function IconArrowDown24(props: React.SVGProps): JSX.Element { return ( - ); } diff --git a/src/lib/viewers/controls/icons/IconArrowUp24.tsx b/src/lib/viewers/controls/icons/IconArrowUp24.tsx index b55297d490..daa185e4b5 100644 --- a/src/lib/viewers/controls/icons/IconArrowUp24.tsx +++ b/src/lib/viewers/controls/icons/IconArrowUp24.tsx @@ -3,8 +3,7 @@ import * as React from 'react'; function IconArrowUp24(props: React.SVGProps): JSX.Element { return ( - - + ); } diff --git a/src/lib/viewers/controls/icons/IconSearch18.tsx b/src/lib/viewers/controls/icons/IconSearch18.tsx deleted file mode 100644 index adc846279e..0000000000 --- a/src/lib/viewers/controls/icons/IconSearch18.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import * as React from 'react'; - -function IconSearch18(props: React.SVGProps): JSX.Element { - return ( - - - - - - - ); -} - -export default IconSearch18; diff --git a/src/lib/viewers/controls/icons/IconSearch24.tsx b/src/lib/viewers/controls/icons/IconSearch24.tsx new file mode 100644 index 0000000000..30ac91365d --- /dev/null +++ b/src/lib/viewers/controls/icons/IconSearch24.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; + +function IconSearch24(props: React.SVGProps): JSX.Element { + return ( + + + + ); +} + +export default IconSearch24; diff --git a/src/lib/viewers/controls/icons/IconThumbnailsToggle18.tsx b/src/lib/viewers/controls/icons/IconThumbnailsToggle18.tsx deleted file mode 100644 index b1f1253b88..0000000000 --- a/src/lib/viewers/controls/icons/IconThumbnailsToggle18.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import * as React from 'react'; - -function IconThumbnailsToggle18(props: React.SVGProps): JSX.Element { - return ( - - - - - ); -} - -export default IconThumbnailsToggle18; diff --git a/src/lib/viewers/controls/icons/IconThumbnailsToggle24.tsx b/src/lib/viewers/controls/icons/IconThumbnailsToggle24.tsx new file mode 100644 index 0000000000..ef15317193 --- /dev/null +++ b/src/lib/viewers/controls/icons/IconThumbnailsToggle24.tsx @@ -0,0 +1,14 @@ +import * as React from 'react'; + +function IconThumbnailsToggle24(props: React.SVGProps): JSX.Element { + return ( + + + + ); +} + +export default IconThumbnailsToggle24; diff --git a/src/lib/viewers/controls/icons/IconZoomIn10.tsx b/src/lib/viewers/controls/icons/IconZoomIn10.tsx index e27e0657f5..84d953762b 100644 --- a/src/lib/viewers/controls/icons/IconZoomIn10.tsx +++ b/src/lib/viewers/controls/icons/IconZoomIn10.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; function IconZoomIn10(props: React.SVGProps): JSX.Element { return ( - + ): JSX.Element { return ( - - + + ); } diff --git a/src/lib/viewers/controls/media/DurationLabels.scss b/src/lib/viewers/controls/media/DurationLabels.scss index 8c50e22f24..c5772856b9 100644 --- a/src/lib/viewers/controls/media/DurationLabels.scss +++ b/src/lib/viewers/controls/media/DurationLabels.scss @@ -8,7 +8,7 @@ } .bp-DurationLabels-label { - @include bp-Control--hover; + @include bp-Control--fade; padding-right: 4px; padding-left: 4px; diff --git a/src/lib/viewers/controls/media/_styles.scss b/src/lib/viewers/controls/media/_styles.scss index acdafbfb12..baa844e164 100644 --- a/src/lib/viewers/controls/media/_styles.scss +++ b/src/lib/viewers/controls/media/_styles.scss @@ -4,5 +4,5 @@ $bp-MediaControl-height: 40px; $bp-MediaControl-width: 36px; @mixin bp-MediaButton { - @include bp-ControlButton($width: $bp-MediaControl-width, $height: $bp-MediaControl-height); + @include bp-Control($width: $bp-MediaControl-width, $height: $bp-MediaControl-height); } diff --git a/src/lib/viewers/controls/page/PageControls.scss b/src/lib/viewers/controls/page/PageControls.scss index ebd5713b89..d0c416b1cb 100644 --- a/src/lib/viewers/controls/page/PageControls.scss +++ b/src/lib/viewers/controls/page/PageControls.scss @@ -1,9 +1,11 @@ @import '../styles'; .bp-PageControls { - @include bp-ControlGroup; + display: flex; + align-items: center; } .bp-PageControls-button { - @include bp-ControlButton($width: 32px); + @include bp-Control($width: $bp-controls-size-small); + @include bp-Control--expand; } diff --git a/src/lib/viewers/controls/page/PageControls.tsx b/src/lib/viewers/controls/page/PageControls.tsx index 74a7d89f25..0728679c95 100644 --- a/src/lib/viewers/controls/page/PageControls.tsx +++ b/src/lib/viewers/controls/page/PageControls.tsx @@ -11,7 +11,11 @@ export type Props = { pageNumber: number; }; -export default function PageControls({ onPageChange, onPageSubmit, pageCount, pageNumber }: Props): JSX.Element { +export default function PageControls({ onPageChange, onPageSubmit, pageCount, pageNumber }: Props): JSX.Element | null { + if (pageCount <= 1) { + return null; + } + return (
); } diff --git a/src/lib/viewers/controls/sidebar/__tests__/ThumbnailsToggle-test.tsx b/src/lib/viewers/controls/sidebar/__tests__/ThumbnailsToggle-test.tsx index 6b346b33d4..f14c4931a2 100644 --- a/src/lib/viewers/controls/sidebar/__tests__/ThumbnailsToggle-test.tsx +++ b/src/lib/viewers/controls/sidebar/__tests__/ThumbnailsToggle-test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { shallow, ShallowWrapper } from 'enzyme'; -import IconThumbnailsToggle18 from '../../icons/IconThumbnailsToggle18'; +import IconThumbnailsToggle24 from '../../icons/IconThumbnailsToggle24'; import ThumbnailsToggle from '../ThumbnailsToggle'; describe('ThumbnailsToggle', () => { @@ -22,7 +22,7 @@ describe('ThumbnailsToggle', () => { const wrapper = getWrapper({ onThumbnailsToggle: jest.fn() }); expect(wrapper.hasClass('bp-ThumbnailsToggle')).toBe(true); - expect(wrapper.exists(IconThumbnailsToggle18)).toBe(true); + expect(wrapper.exists(IconThumbnailsToggle24)).toBe(true); }); test('should return an empty wrapper if no callback is defined', () => { diff --git a/src/lib/viewers/controls/slider/SliderControl.scss b/src/lib/viewers/controls/slider/SliderControl.scss index 5bc53f65ef..7a44341edb 100644 --- a/src/lib/viewers/controls/slider/SliderControl.scss +++ b/src/lib/viewers/controls/slider/SliderControl.scss @@ -11,7 +11,7 @@ $bp-SliderControl-track-space: 3px; } .bp-SliderControl-input { - @include bp-Control--focus; + @include bp-Control--outline; position: absolute; width: 100%; diff --git a/src/lib/viewers/controls/zoom/ZoomControls.scss b/src/lib/viewers/controls/zoom/ZoomControls.scss index 1c0589d1c8..ff8f4b486f 100644 --- a/src/lib/viewers/controls/zoom/ZoomControls.scss +++ b/src/lib/viewers/controls/zoom/ZoomControls.scss @@ -1,19 +1,15 @@ @import '../styles'; .bp-ZoomControls { - @include bp-ControlGroup; + display: flex; + align-items: center; } .bp-ZoomControls-button { - @include bp-ControlButton($width: 32px); + @include bp-Control($width: $bp-controls-size-small); + @include bp-Control--expand; } .bp-ZoomControls-current { - display: flex; - align-items: center; - justify-content: center; - min-width: 48px; - color: #fff; - font-size: 14px; - user-select: none; + @include bp-ControlLabel; } diff --git a/src/lib/viewers/doc/DocControls.tsx b/src/lib/viewers/doc/DocControls.tsx index 7775a22626..66e6f01e22 100644 --- a/src/lib/viewers/doc/DocControls.tsx +++ b/src/lib/viewers/doc/DocControls.tsx @@ -1,6 +1,6 @@ import React from 'react'; import AnnotationsControls, { Props as AnnotationsControlsProps } from '../controls/annotations'; -import ControlsBar from '../controls/controls-bar'; +import ControlsBar, { ControlsBarGroup } from '../controls/controls-bar'; import DrawingControls, { Props as DrawingControlsProps } from '../controls/annotations/DrawingControls'; import FindBarToggle, { Props as FindBarToggleProps } from '../controls/findbar'; import FullscreenToggle, { Props as FullscreenToggleProps } from '../controls/fullscreen'; @@ -41,31 +41,39 @@ export default function DocControls({ return ( <> - - - - - - + + + + + + + + + + + + + + - - - - + + + + + + + + - - - + + + + + + + + + ); } diff --git a/src/lib/viewers/text/TextControls.tsx b/src/lib/viewers/text/TextControls.tsx index ac1b9d2828..8761762148 100644 --- a/src/lib/viewers/text/TextControls.tsx +++ b/src/lib/viewers/text/TextControls.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import ControlsBar from '../controls/controls-bar'; +import ControlsBar, { ControlsBarGroup } from '../controls/controls-bar'; import FullscreenToggle, { Props as FullscreenToggleProps } from '../controls/fullscreen'; import ZoomControls, { Props as ZoomControlsProps } from '../controls/zoom'; @@ -15,14 +15,18 @@ export default function TextControls({ }: Props): JSX.Element { return ( - - + + + + + + ); }