Merge pull request #5311 from oswaldoacauan/presentation-styles
Presentation and Whiteboard style updates
This commit is contained in:
Anton Georgiev
GitHub
commit
6945be4e17
@ -21,7 +21,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.left{
|
||||
.left {
|
||||
position: absolute;
|
||||
@include mq($small-only) {
|
||||
bottom: $sm-padding-x;
|
||||
@ -31,9 +31,7 @@
|
||||
|
||||
.centerWithActions {
|
||||
@include mq($xsmall-only) {
|
||||
position: absolute;
|
||||
bottom: $sm-padding-x;
|
||||
right: $sm-padding-x;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -53,9 +53,7 @@ $bars-padding: $lg-padding-x - .45rem; // -.45 so user-list and chat title is al
|
||||
|
||||
.content {
|
||||
@extend %full-page;
|
||||
|
||||
order: 3;
|
||||
padding: 0 .25%;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
@ -158,11 +156,6 @@ $bars-padding: $lg-padding-x - .45rem; // -.45 so user-list and chat title is al
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
|
||||
@include mq($small-only) {
|
||||
padding-bottom: $actionsbar-height;
|
||||
margin-bottom: $actionsbar-height;
|
||||
}
|
||||
|
||||
@include mq($portrait) {
|
||||
flex-direction: column;
|
||||
}
|
||||
@ -189,10 +182,4 @@ $bars-padding: $lg-padding-x - .45rem; // -.45 so user-list and chat title is al
|
||||
padding: $bars-padding;
|
||||
position: relative;
|
||||
order: 3;
|
||||
|
||||
@include mq($small-only) {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,6 +16,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
> :first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@ -35,6 +35,7 @@
|
||||
height: 96px;
|
||||
right: 8px;
|
||||
bottom: 8px;
|
||||
margin-top: 0 !important;
|
||||
|
||||
@include mq($portrait) {
|
||||
position: absolute;
|
||||
|
||||
@ -1,30 +1,27 @@
|
||||
@import "/imports/ui/components/button/styles.scss";
|
||||
@import "/imports/ui/stylesheets/variables/_all";
|
||||
|
||||
$controls-color: #212121 !default;
|
||||
$controls-background: #F0F2F6 !default;
|
||||
$controls-color: $color-gray !default;
|
||||
$controls-background: $color-white !default;
|
||||
|
||||
.presentationToolbarWrapper,
|
||||
.zoomWrapper {
|
||||
order: 2;
|
||||
padding: $line-height-computed / 2;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.presentationToolbarWrapper {
|
||||
flex: 1;
|
||||
position: absolute;
|
||||
bottom: .8rem;
|
||||
box-shadow: 0 0 10px -2px rgba(0, 0, 0, .25);
|
||||
align-self: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-top: 2%;
|
||||
margin-bottom: 2%;
|
||||
|
||||
@include mq($portrait) {
|
||||
@include mq($small-only) {
|
||||
margin-top: 5%;
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
@include mq("#{$landscape} and (max-height:#{upper-bound($small-range)}), #{$small-only}") {
|
||||
transform: scale(.75);
|
||||
transform-origin: bottom;
|
||||
}
|
||||
|
||||
button,
|
||||
@ -33,18 +30,31 @@ $controls-background: #F0F2F6 !default;
|
||||
background-color: $controls-background;
|
||||
color: $controls-color;
|
||||
border-top: 0;
|
||||
border-right: $color-gray-light $border-size solid;
|
||||
border-bottom: 0;
|
||||
border-left: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
height: 2.25rem;
|
||||
box-shadow: none !important;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
i {
|
||||
font-weight: bolder;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
|
||||
|
||||
button:first-of-type {
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
button:last-of-type {
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.zoomWrapper {
|
||||
@ -61,11 +71,18 @@ $controls-background: #F0F2F6 !default;
|
||||
.skipSlide,
|
||||
.prevSlide {
|
||||
border: none !important;
|
||||
width: 2.8rem;
|
||||
|
||||
&[aria-disabled="true"] {
|
||||
opacity: 1;
|
||||
background-color: $color-gray-lighter;
|
||||
}
|
||||
}
|
||||
|
||||
.skipSlideSelect {
|
||||
padding: 0 0.8%;
|
||||
border-left: $border-size solid $color-gray-light !important;
|
||||
border-left: $border-size solid $color-gray-lighter !important;
|
||||
border-right: $border-size solid $color-gray-lighter !important;
|
||||
}
|
||||
|
||||
.zoomSlider {
|
||||
|
||||
@ -1,37 +1,33 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const Slide = (props) => {
|
||||
const { imageUri, svgWidth, svgHeight } = props;
|
||||
|
||||
return (
|
||||
<g>
|
||||
{imageUri ?
|
||||
// some pdfs lose a white background color during the conversion to svg
|
||||
// their background color is transparent
|
||||
// that's why we have a white rectangle covering the whole slide area by default
|
||||
<g>
|
||||
<rect
|
||||
x="1"
|
||||
y="1"
|
||||
width={svgWidth - 2}
|
||||
height={svgHeight - 2}
|
||||
fill="white"
|
||||
/>
|
||||
<image
|
||||
x="0"
|
||||
y="0"
|
||||
width={svgWidth}
|
||||
height={svgHeight}
|
||||
xlinkHref={imageUri}
|
||||
strokeWidth="0.8"
|
||||
style={{ WebkitTapHighlightColor: 'transparent' }}
|
||||
/>
|
||||
</g>
|
||||
: null}
|
||||
</g>
|
||||
);
|
||||
};
|
||||
const Slide = ({ imageUri, svgWidth, svgHeight }) => (
|
||||
<g>
|
||||
{imageUri ?
|
||||
// some pdfs lose a white background color during the conversion to svg
|
||||
// their background color is transparent
|
||||
// that's why we have a white rectangle covering the whole slide area by default
|
||||
<g>
|
||||
<rect
|
||||
x="0"
|
||||
y="0"
|
||||
width={svgWidth}
|
||||
height={svgHeight}
|
||||
fill="white"
|
||||
/>
|
||||
<image
|
||||
x="0"
|
||||
y="0"
|
||||
width={svgWidth}
|
||||
height={svgHeight}
|
||||
xlinkHref={imageUri}
|
||||
strokeWidth="0.8"
|
||||
style={{ WebkitTapHighlightColor: 'transparent' }}
|
||||
/>
|
||||
</g>
|
||||
: null}
|
||||
</g>
|
||||
);
|
||||
|
||||
Slide.propTypes = {
|
||||
// Image Uri
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: calc(100% - 1px);
|
||||
height: 100%;
|
||||
width:100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
@ -34,7 +34,7 @@
|
||||
.whiteboardSizeAvailable {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: calc(100% - #{$toolbar-container-width});
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
@ -108,7 +108,9 @@ class WhiteboardToolbar extends Component {
|
||||
// no drawSettings in the sessionStorage - setting default values
|
||||
} else {
|
||||
// setting default drawing settings if they haven't been set previously
|
||||
const { annotationSelected, thicknessSelected, colorSelected, fontSizeSelected } = this.state;
|
||||
const {
|
||||
annotationSelected, thicknessSelected, colorSelected, fontSizeSelected,
|
||||
} = this.state;
|
||||
this.props.actions.setInitialWhiteboardToolbarValues(
|
||||
annotationSelected.value,
|
||||
thicknessSelected.value * 2,
|
||||
@ -306,9 +308,9 @@ class WhiteboardToolbar extends Component {
|
||||
label={intl.formatMessage(intlMessages.toolbarTools)}
|
||||
icon={this.state.annotationSelected.icon}
|
||||
onItemClick={this.displaySubMenu}
|
||||
objectToReturn={'annotationList'}
|
||||
objectToReturn="annotationList"
|
||||
onBlur={this.closeSubMenu}
|
||||
className={cx(styles.toolbarButton, this.state.currentSubmenuOpen === 'annotationList' ? '' : styles.notActive)}
|
||||
className={cx(styles.toolbarButton, this.state.currentSubmenuOpen === 'annotationList' ? styles.toolbarActive : null)}
|
||||
>
|
||||
{this.state.currentSubmenuOpen === 'annotationList' ?
|
||||
<ToolbarSubmenu
|
||||
@ -334,9 +336,9 @@ class WhiteboardToolbar extends Component {
|
||||
label={intl.formatMessage(intlMessages.toolbarFontSize)}
|
||||
customIcon={this.renderFontItemIcon()}
|
||||
onItemClick={this.displaySubMenu}
|
||||
objectToReturn={'fontSizeList'}
|
||||
objectToReturn="fontSizeList"
|
||||
onBlur={this.closeSubMenu}
|
||||
className={cx(styles.toolbarButton, this.state.currentSubmenuOpen === 'fontSizeList' ? '' : styles.notActive)}
|
||||
className={cx(styles.toolbarButton, this.state.currentSubmenuOpen === 'fontSizeList' ? styles.toolbarActive : null)}
|
||||
>
|
||||
{this.state.currentSubmenuOpen === 'fontSizeList' ?
|
||||
<ToolbarSubmenu
|
||||
@ -382,7 +384,7 @@ class WhiteboardToolbar extends Component {
|
||||
onItemClick={this.displaySubMenu}
|
||||
objectToReturn="thicknessList"
|
||||
onBlur={this.closeSubMenu}
|
||||
className={cx(styles.toolbarButton, this.state.currentSubmenuOpen === 'thicknessList' ? '' : styles.notActive)}
|
||||
className={cx(styles.toolbarButton, this.state.currentSubmenuOpen === 'thicknessList' ? styles.toolbarActive : null)}
|
||||
customIcon={this.renderThicknessItemIcon()}
|
||||
>
|
||||
{this.state.currentSubmenuOpen === 'thicknessList' ?
|
||||
@ -417,7 +419,7 @@ class WhiteboardToolbar extends Component {
|
||||
attributeType="XML"
|
||||
from={this.state.prevColorSelected.value}
|
||||
to={this.state.colorSelected.value}
|
||||
begin={'indefinite'}
|
||||
begin="indefinite"
|
||||
dur={TRANSITION_DURATION}
|
||||
repeatCount="0"
|
||||
fill="freeze"
|
||||
@ -428,7 +430,7 @@ class WhiteboardToolbar extends Component {
|
||||
attributeType="XML"
|
||||
from={this.state.prevThicknessSelected.value}
|
||||
to={this.state.thicknessSelected.value}
|
||||
begin={'indefinite'}
|
||||
begin="indefinite"
|
||||
dur={TRANSITION_DURATION}
|
||||
repeatCount="0"
|
||||
fill="freeze"
|
||||
@ -450,7 +452,7 @@ class WhiteboardToolbar extends Component {
|
||||
onItemClick={this.displaySubMenu}
|
||||
objectToReturn="colorList"
|
||||
onBlur={this.closeSubMenu}
|
||||
className={cx(styles.toolbarButton, this.state.currentSubmenuOpen === 'colorList' ? '' : styles.notActive)}
|
||||
className={cx(styles.toolbarButton, this.state.currentSubmenuOpen === 'colorList' ? styles.toolbarActive : null)}
|
||||
customIcon={this.renderColorItemIcon()}
|
||||
>
|
||||
{this.state.currentSubmenuOpen === 'colorList' ?
|
||||
@ -495,7 +497,7 @@ class WhiteboardToolbar extends Component {
|
||||
return (
|
||||
<ToolbarMenuItem
|
||||
label={intl.formatMessage(intlMessages.toolbarUndoAnnotation)}
|
||||
icon={'undo'}
|
||||
icon="undo"
|
||||
onItemClick={this.handleUndo}
|
||||
className={cx(styles.toolbarButton, styles.notActive)}
|
||||
/>
|
||||
@ -508,7 +510,7 @@ class WhiteboardToolbar extends Component {
|
||||
return (
|
||||
<ToolbarMenuItem
|
||||
label={intl.formatMessage(intlMessages.toolbarClearAnnotations)}
|
||||
icon={'circle_close'}
|
||||
icon="circle_close"
|
||||
onItemClick={this.handleClearAll}
|
||||
className={cx(styles.toolbarButton, styles.notActive)}
|
||||
/>
|
||||
@ -532,14 +534,14 @@ class WhiteboardToolbar extends Component {
|
||||
const { annotationSelected } = this.state;
|
||||
const { isPresenter } = this.props;
|
||||
return (
|
||||
<div className={styles.toolbarContainer} style={{ height: this.props.height }}>
|
||||
<div className={styles.toolbarContainer}>
|
||||
<div className={styles.toolbarWrapper}>
|
||||
{this.renderToolItem()}
|
||||
{annotationSelected.value === 'text' ?
|
||||
this.renderFontItem()
|
||||
:
|
||||
this.renderThicknessItem()
|
||||
}
|
||||
this.renderFontItem()
|
||||
:
|
||||
this.renderThicknessItem()
|
||||
}
|
||||
{this.renderColorItem()}
|
||||
{this.renderUndoItem()}
|
||||
{this.renderClearAllItem()}
|
||||
@ -580,27 +582,18 @@ WhiteboardToolbar.propTypes = {
|
||||
annotations: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
|
||||
// defines an array of font-sizes for the Font-size submenu of the text shape
|
||||
fontSizes: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
value: PropTypes.number.isRequired,
|
||||
}).isRequired,
|
||||
).isRequired,
|
||||
fontSizes: PropTypes.arrayOf(PropTypes.shape({
|
||||
value: PropTypes.number.isRequired,
|
||||
}).isRequired).isRequired,
|
||||
|
||||
// defines an array of colors for the toolbar (color submenu)
|
||||
colors: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
value: PropTypes.string.isRequired,
|
||||
}).isRequired,
|
||||
).isRequired,
|
||||
colors: PropTypes.arrayOf(PropTypes.shape({
|
||||
value: PropTypes.string.isRequired,
|
||||
}).isRequired).isRequired,
|
||||
// defines an array of thickness values for the toolbar and their corresponding session values
|
||||
thicknessRadiuses: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
value: PropTypes.number.isRequired,
|
||||
}).isRequired,
|
||||
).isRequired,
|
||||
|
||||
// defines the physical height of the whiteboard
|
||||
height: PropTypes.number.isRequired,
|
||||
thicknessRadiuses: PropTypes.arrayOf(PropTypes.shape({
|
||||
value: PropTypes.number.isRequired,
|
||||
}).isRequired).isRequired,
|
||||
|
||||
intl: intlShape.isRequired,
|
||||
|
||||
|
||||
@ -1,31 +1,30 @@
|
||||
@import "../../../stylesheets/variables/_all";
|
||||
|
||||
$toolbar-left-margin: 6px;
|
||||
$toolbar-button-width: 3.5rem;
|
||||
$toolbar-button-height: 3.5rem;
|
||||
$toolbar-container-width: calc(#{$toolbar-button-width} + 1rem);
|
||||
$toolbar-button-margin-top: 1px;
|
||||
$toolbar-button-margin-bottom: 1px;
|
||||
|
||||
/**********************************************************************************/
|
||||
/* if you want to add/remove a new button to the annotation/color/thickness lists */
|
||||
/* just change the number below and the corresponding list will change its size */
|
||||
/* to fit another button */
|
||||
/**********************************************************************************/
|
||||
$number-of-annotation-list-buttons: 7;
|
||||
$number-of-thickness-list-buttons: 7;
|
||||
$number-of-fontsize-list-buttons: 6;
|
||||
$number-of-color-list-buttons: 12;
|
||||
$number-of-vertical-main-toolbar-buttons: 5;
|
||||
$toolbar-margin: .8rem;
|
||||
$toolbar-box-shadow: 0 0 10px -2px rgba(0, 0, 0, .25);
|
||||
$toolbar-button-width: 3rem;
|
||||
$toolbar-button-height: 3rem;
|
||||
$toolbar-button-font-size: 1.75rem;
|
||||
$toolbar-button-border: 1px;
|
||||
$toolbar-button-border-radius: 5px;
|
||||
$toolbar-list-bg: darken($color-white, 10%);
|
||||
$toolbar-list-color: $color-gray;
|
||||
|
||||
.toolbarContainer {
|
||||
order: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: $toolbar-container-width;
|
||||
margin-left: $toolbar-left-margin;
|
||||
margin-right: $toolbar-margin;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
|
||||
@include mq("#{$landscape} and (max-height:#{upper-bound($small-range)}), #{$small-only}") {
|
||||
transform: scale(.75);
|
||||
transform-origin: right;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbarWrapper {
|
||||
@ -34,6 +33,31 @@ $number-of-vertical-main-toolbar-buttons: 5;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: $toolbar-box-shadow;
|
||||
pointer-events: all;
|
||||
|
||||
.buttonWrapper > .toolbarButton {
|
||||
border-bottom: 1px solid $color-gray-lighter;
|
||||
}
|
||||
|
||||
.buttonWrapper:first-child > .toolbarButton {
|
||||
border-top-left-radius: $toolbar-button-border-radius;
|
||||
border-top-right-radius: $toolbar-button-border-radius;
|
||||
|
||||
&.toolbarActive {
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.buttonWrapper:last-child > .toolbarButton {
|
||||
border-bottom: 0;
|
||||
border-bottom-left-radius: $toolbar-button-border-radius;
|
||||
border-bottom-right-radius: $toolbar-button-border-radius;
|
||||
|
||||
&.toolbarActive {
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttonWrapper {
|
||||
@ -41,8 +65,7 @@ $number-of-vertical-main-toolbar-buttons: 5;
|
||||
min-width: $toolbar-button-width;
|
||||
height: $toolbar-button-height;
|
||||
min-height: $toolbar-button-height;
|
||||
margin-top: $toolbar-button-margin-top;
|
||||
margin-bottom: $toolbar-button-margin-bottom;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toolbarButton {
|
||||
@ -54,12 +77,27 @@ $number-of-vertical-main-toolbar-buttons: 5;
|
||||
flex-direction: row;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
font-size: 2.2rem;
|
||||
border-radius: 0.1rem;
|
||||
font-size: $toolbar-button-font-size;
|
||||
position: relative;
|
||||
border-radius: 0;
|
||||
box-shadow: none !important;
|
||||
z-index: 1;
|
||||
|
||||
&:focus, &:hover {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
i {
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
&.toolbarActive {
|
||||
background-color: $toolbar-list-bg;
|
||||
|
||||
i {
|
||||
color: $toolbar-list-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbarList {
|
||||
@ -67,11 +105,16 @@ $number-of-vertical-main-toolbar-buttons: 5;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
height: $toolbar-button-height;
|
||||
bottom: $toolbar-button-height;
|
||||
background-color: black;
|
||||
opacity: 0.9;
|
||||
position: absolute;
|
||||
right: $toolbar-button-height;
|
||||
top: 0;
|
||||
box-shadow: $toolbar-box-shadow;
|
||||
|
||||
.buttonWrapper:first-child > .toolbarListButton {
|
||||
border-top-left-radius: $toolbar-button-border-radius;
|
||||
border-bottom-left-radius: $toolbar-button-border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbarListButton {
|
||||
@ -80,22 +123,36 @@ $number-of-vertical-main-toolbar-buttons: 5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2.2rem;
|
||||
background-color: $color-gray-dark;
|
||||
border: 0px;
|
||||
border-radius: 0px;
|
||||
// border-radius: 0.1rem;
|
||||
&:hover {
|
||||
background-color: $color-gray-light;
|
||||
}
|
||||
i {
|
||||
color: $color-white;
|
||||
}
|
||||
font-size: $toolbar-button-font-size;
|
||||
background-color: $toolbar-list-bg;
|
||||
border: 0 !important;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
padding: initial;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: darken($toolbar-list-bg, 10%);
|
||||
}
|
||||
|
||||
i {
|
||||
color: $toolbar-list-color;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: $toolbar-list-color;
|
||||
}
|
||||
}
|
||||
|
||||
.selectedListButton {
|
||||
background-color: $color-gray-light;
|
||||
background-color: $toolbar-list-color !important;
|
||||
|
||||
i {
|
||||
color: darken($toolbar-list-bg, 10%) !important;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: darken($toolbar-list-bg, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.customSvgIcon {
|
||||
@ -107,34 +164,7 @@ $number-of-vertical-main-toolbar-buttons: 5;
|
||||
.textThickness {
|
||||
font-family: Arial, sans-serif;
|
||||
font-weight: normal;
|
||||
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
|
||||
text-shadow: -1px 0 darken($toolbar-list-bg, 10%), 0 1px darken($toolbar-list-bg, 10%), 1px 0 darken($toolbar-list-bg, 10%), 0 -1px darken($toolbar-list-bg, 10%);
|
||||
margin: auto;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.annotationList {
|
||||
width: calc(#{$number-of-annotation-list-buttons} * #{$toolbar-button-width});
|
||||
right: calc(#{$number-of-annotation-list-buttons} * #{$toolbar-button-width} + (#{$toolbar-container-width} - #{$toolbar-button-width} ) / 2 + #{$toolbar-left-margin});
|
||||
}
|
||||
|
||||
.thicknessList {
|
||||
width: calc(#{$number-of-thickness-list-buttons} * #{$toolbar-button-width});
|
||||
right: calc(#{$number-of-thickness-list-buttons} * #{$toolbar-button-width} + (#{$toolbar-container-width} - #{$toolbar-button-width} ) / 2 + #{$toolbar-left-margin});
|
||||
}
|
||||
|
||||
.fontSizeList {
|
||||
width: calc(#{$number-of-fontsize-list-buttons} * #{$toolbar-button-width});
|
||||
right: calc(#{$number-of-fontsize-list-buttons} * #{$toolbar-button-width} + (#{$toolbar-container-width} - #{$toolbar-button-width} ) / 2 + #{$toolbar-left-margin});
|
||||
}
|
||||
|
||||
.colorList {
|
||||
width: calc(#{$number-of-color-list-buttons} * #{$toolbar-button-width});
|
||||
right: calc(#{$number-of-color-list-buttons} * #{$toolbar-button-width} + (#{$toolbar-container-width} - #{$toolbar-button-width} ) / 2 + #{$toolbar-left-margin});
|
||||
}
|
||||
|
||||
//Undo and Clear All buttons shouldn't be active
|
||||
.notActive {
|
||||
&:focus {
|
||||
background-color: $color-white;
|
||||
}
|
||||
color: $toolbar-list-color;
|
||||
}
|
||||
|
||||
@ -70,7 +70,7 @@ export default class ToolbarMenuItem extends Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className={styles.buttonWrapper}>
|
||||
<div className={styles.buttonWrapper} hidden={this.props.disabled}>
|
||||
<Button
|
||||
hideLabel
|
||||
role="button"
|
||||
|
||||
@ -96,7 +96,7 @@ class ToolbarSubmenu extends Component {
|
||||
} else if (type === 'thickness') {
|
||||
return (
|
||||
<svg className={styles.customSvgIcon}>
|
||||
<circle cx="50%" cy="50%" r={obj.value} fill="#F3F6F9" />
|
||||
<circle cx="50%" cy="50%" r={obj.value} />
|
||||
</svg>
|
||||
);
|
||||
} else if (type === 'font-size') {
|
||||
@ -197,8 +197,7 @@ class ToolbarSubmenu extends Component {
|
||||
)}
|
||||
key={obj.value}
|
||||
/>
|
||||
),
|
||||
) : null}
|
||||
)) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -209,20 +208,18 @@ ToolbarSubmenu.propTypes = {
|
||||
handleMouseEnter: PropTypes.func.isRequired,
|
||||
handleMouseLeave: PropTypes.func.isRequired,
|
||||
type: PropTypes.string.isRequired,
|
||||
objectsToRender: PropTypes.arrayOf(
|
||||
PropTypes.oneOfType([
|
||||
PropTypes.shape({
|
||||
value: PropTypes.string.isRequired,
|
||||
}),
|
||||
PropTypes.shape({
|
||||
value: PropTypes.number.isRequired,
|
||||
}),
|
||||
PropTypes.shape({
|
||||
value: PropTypes.string.isRequired,
|
||||
icon: PropTypes.string.isRequired,
|
||||
}),
|
||||
]).isRequired,
|
||||
).isRequired,
|
||||
objectsToRender: PropTypes.arrayOf(PropTypes.oneOfType([
|
||||
PropTypes.shape({
|
||||
value: PropTypes.string.isRequired,
|
||||
}),
|
||||
PropTypes.shape({
|
||||
value: PropTypes.number.isRequired,
|
||||
}),
|
||||
PropTypes.shape({
|
||||
value: PropTypes.string.isRequired,
|
||||
icon: PropTypes.string.isRequired,
|
||||
}),
|
||||
]).isRequired).isRequired,
|
||||
objectSelected: PropTypes.oneOfType([
|
||||
PropTypes.shape({
|
||||
value: PropTypes.string.isRequired,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user