Merge pull request #6889 from KDSBrowne/2.2-Edge-support-01

Fix whiteboard toolbar icons not rendering
This commit is contained in:
Anton Georgiev 2019-03-07 14:06:14 -05:00 committed by GitHub
commit 718c32a615
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
43 changed files with 250 additions and 140 deletions

View File

@ -3,7 +3,8 @@
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 300;
src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url('fonts/SourceSansPro/SourceSansPro-Light.ttf') format('ttf');
src: local('Source Sans Pro Light'), local('SourceSansPro-Light'),
url('fonts/SourceSansPro/SourceSansPro-Light.woff') format('woff');
unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@ -11,7 +12,8 @@
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 300;
src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url('fonts/SourceSansPro/SourceSansPro-Light.ttf') format('ttf');
src: local('Source Sans Pro Light'), local('SourceSansPro-Light'),
url('fonts/SourceSansPro/SourceSansPro-Light.woff') format('woff');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@ -19,7 +21,8 @@
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 300;
src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url('fonts/SourceSansPro/SourceSansPro-Light.ttf') format('ttf');
src: local('Source Sans Pro Light'), local('SourceSansPro-Light'),
url('fonts/SourceSansPro/SourceSansPro-Light.woff') format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* vietnamese */
@ -27,7 +30,8 @@
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url('fonts/SourceSansPro/SourceSansPro-Regular.ttf') format('ttf');
src: local('Source Sans Pro'), local('SourceSansPro-Regular'),
url('fonts/SourceSansPro/SourceSansPro-Regular.woff') format('woff');
unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@ -35,7 +39,8 @@
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url('fonts/SourceSansPro/SourceSansPro-Regular.ttf') format('ttf');
src: local('Source Sans Pro'), local('SourceSansPro-Regular'),
url('fonts/SourceSansPro/SourceSansPro-Regular.woff') format('woff');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@ -43,7 +48,8 @@
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url('fonts/SourceSansPro/SourceSansPro-Regular.ttf') format('ttf');
src: local('Source Sans Pro'), local('SourceSansPro-Regular'),
url('fonts/SourceSansPro/SourceSansPro-Regular.woff') format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* vietnamese */
@ -51,7 +57,8 @@
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 600;
src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url('fonts/SourceSansPro/SourceSansPro-Semibold.ttf') format('ttf');
src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'),
url('fonts/SourceSansPro/SourceSansPro-Semibold.woff') format('woff');
unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@ -59,7 +66,8 @@
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 600;
src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url('fonts/SourceSansPro/SourceSansPro-Semibold.ttf') format('ttf');
src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'),
url('fonts/SourceSansPro/SourceSansPro-Semibold.woff') format('woff');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@ -67,7 +75,8 @@
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 600;
src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url('fonts/SourceSansPro/SourceSansPro-Semibold.ttf') format('ttf');
src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'),
url('fonts/SourceSansPro/SourceSansPro-Semibold.woff') format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* vietnamese */
@ -75,7 +84,8 @@
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 700;
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url('fonts/SourceSansPro/SourceSansPro-Bold.ttf') format('ttf');
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'),
url('fonts/SourceSansPro/SourceSansPro-Bold.woff') format('woff');
unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@ -83,7 +93,8 @@
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 700;
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url('fonts/SourceSansPro/SourceSansPro-Bold.ttf') format('ttf');
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'),
url('fonts/SourceSansPro/SourceSansPro-Bold.woff') format('woff');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@ -91,7 +102,8 @@
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 700;
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url('fonts/SourceSansPro/SourceSansPro-Bold.ttf') format('ttf');
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'),
url('fonts/SourceSansPro/SourceSansPro-Bold.woff') format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* vietnamese */
@ -99,7 +111,8 @@
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 300;
src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightIt'), url('fonts/SourceSansPro/SourceSansPro-LightItalic.ttf') format('ttf');
src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightIt'),
url('fonts/SourceSansPro/SourceSansPro-LightItalic.woff') format('woff');
unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@ -107,7 +120,8 @@
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 300;
src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightIt'), url('fonts/SourceSansPro/SourceSansPro-LightItalic.ttf') format('ttf');
src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightIt'),
url('fonts/SourceSansPro/SourceSansPro-LightItalic.woff') format('woff');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@ -115,7 +129,8 @@
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 300;
src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightIt'), url('fonts/SourceSansPro/SourceSansPro-LightItalic.ttf') format('ttf');
src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightIt'),
url('fonts/SourceSansPro/SourceSansPro-LightItalic.woff') format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* vietnamese */
@ -123,7 +138,8 @@
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 400;
src: local('Source Sans Pro Italic'), local('SourceSansPro-It'), url('fonts/SourceSansPro/SourceSansPro-Italic.ttf') format('ttf');
src: local('Source Sans Pro Italic'), local('SourceSansPro-It'),
url('fonts/SourceSansPro/SourceSansPro-Italic.woff') format('woff');
unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@ -131,7 +147,8 @@
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 400;
src: local('Source Sans Pro Italic'), local('SourceSansPro-It'), url('fonts/SourceSansPro/SourceSansPro-Italic.ttf') format('ttf');
src: local('Source Sans Pro Italic'), local('SourceSansPro-It'),
url('fonts/SourceSansPro/SourceSansPro-Italic.woff') format('woff');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@ -139,7 +156,8 @@
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 400;
src: local('Source Sans Pro Italic'), local('SourceSansPro-It'), url('fonts/SourceSansPro/SourceSansPro-Italic.ttf') format('ttf');
src: local('Source Sans Pro Italic'), local('SourceSansPro-It'),
url('fonts/SourceSansPro/SourceSansPro-Italic.woff') format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* vietnamese */
@ -147,7 +165,8 @@
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 600;
src: local('Source Sans Pro Semibold Italic'), local('SourceSansPro-SemiboldIt'), url('fonts/SourceSansPro/SourceSansPro-SemiboldItalic.ttf') format('ttf');
src: local('Source Sans Pro Semibold Italic'), local('SourceSansPro-SemiboldIt'),
url('fonts/SourceSansPro/SourceSansPro-SemiboldItalic.woff') format('woff');
unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@ -155,7 +174,8 @@
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 600;
src: local('Source Sans Pro Semibold Italic'), local('SourceSansPro-SemiboldIt'), url('fonts/SourceSansPro/SourceSansPro-SemiboldItalic.ttf') format('ttf');
src: local('Source Sans Pro Semibold Italic'), local('SourceSansPro-SemiboldIt'),
url('fonts/SourceSansPro/SourceSansPro-SemiboldItalic.woff') format('woff');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@ -163,7 +183,8 @@
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 600;
src: local('Source Sans Pro Semibold Italic'), local('SourceSansPro-SemiboldIt'), url('fonts/SourceSansPro/SourceSansPro-SemiboldItalic.ttf') format('ttf');
src: local('Source Sans Pro Semibold Italic'), local('SourceSansPro-SemiboldIt'),
url('fonts/SourceSansPro/SourceSansPro-SemiboldItalic.woff') format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* vietnamese */
@ -171,7 +192,8 @@
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 700;
src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldIt'), url('fonts/SourceSansPro/SourceSansPro-BoldItalic.ttf') format('ttf');
src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldIt'),
url('fonts/SourceSansPro/SourceSansPro-BoldItalic.woff') format('woff');
unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@ -179,7 +201,8 @@
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 700;
src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldIt'), url('fonts/SourceSansPro/SourceSansPro-BoldItalic.ttf') format('ttf');
src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldIt'),
url('fonts/SourceSansPro/SourceSansPro-BoldItalic.woff') format('woff');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@ -187,6 +210,7 @@
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 700;
src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldIt'), url('fonts/SourceSansPro/SourceSansPro-BoldItalic.ttf') format('ttf');
src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldIt'),
url('fonts/SourceSansPro/SourceSansPro-BoldItalic.woff') format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

View File

@ -50,24 +50,22 @@ const handleClickQuickPoll = (slideId, poll) => {
};
const getAvailableQuickPolls = (slideId, parsedSlides) => {
return parsedSlides.map((poll) => {
const { poll: label, type } = poll;
let itemLabel = label;
const getAvailableQuickPolls = (slideId, parsedSlides) => parsedSlides.map((poll) => {
const { poll: label, type } = poll;
let itemLabel = label;
if (type !== 'YN' && type !== 'TF') {
const { options } = itemLabel;
itemLabel = options.join('/').replace(/[\n.)]/g, '');
}
if (type !== 'YN' && type !== 'TF') {
const { options } = itemLabel;
itemLabel = options.join('/').replace(/[\n.)]/g, '');
}
return (
<DropdownListItem
label={itemLabel}
key={_.uniqueId('quick-poll-item')}
onClick={() => handleClickQuickPoll(slideId, poll)}
/>);
});
};
return (
<DropdownListItem
label={itemLabel}
key={_.uniqueId('quick-poll-item')}
onClick={() => handleClickQuickPoll(slideId, poll)}
/>);
});
const QuickPollDropdown = (props) => {
const { isUserPresenter, intl, parseCurrentSlideContent } = props;

View File

@ -70,8 +70,11 @@
width: 100%;
height: 50%;
opacity: 0;
transition: opacity calc(var(--enableAnimation) * .3s);
pointer-events: none;
[style~="--enableAnimation:1;"] & {
transition: opacity .3s;
}
}
&:before {

View File

@ -33,6 +33,7 @@
&.glow {
border-radius: 50%;
[style~="--enableAnimation:1;"] & {
animation: pulse 1s infinite ease-in;
}

View File

@ -138,10 +138,13 @@
overflow: hidden;
display: inline-block;
vertical-align: bottom;
animation: ellipsis steps(4,end) calc(var(--enableAnimation) * 900ms) infinite;
content: "\2026"; /* ascii code for the ellipsis character */
width: 0;
margin-right: 1.25em;
[style~="--enableAnimation:1;"] & {
animation: ellipsis steps(4,end) 900ms infinite;
}
}
}

View File

@ -10,7 +10,10 @@
i {
color: var(--color-primary);
transition: all calc(var(--enableAnimation) * .2s) ease-in-out;
[style~="--enableAnimation:1;"] & {
transition: all .2s ease-in-out;
}
}
&:hover,

View File

@ -3,18 +3,20 @@
top: -50px;
left: -20px;
font-size: 20px;
animation: bounce calc(var(--enableAnimation) * 2s) infinite;
display: block;
font-family: 'bbb-icons';
content: "\E906";
position: relative;
[style~="--enableAnimation:1;"] & {
animation: bounce 2s infinite;
}
}
:global(.browser-edge) &:after {
top: -50px;
left: -15.5em;
font-size: 20px;
animation: bounceRotate calc(var(--enableAnimation) * 2s) infinite;
}
}
@ -45,7 +47,10 @@
left: 0;
right: 0;
background-color: rgba(0, 0, 0, .85);
animation: fade-in calc(var(--enableAnimation) * .5s) ease-in;
[style~="--enableAnimation:1;"] & {
animation: fade-in .5s ease-in;
}
}
.hint {

View File

@ -49,6 +49,7 @@
padding: 0 0 0 .5rem;
}
}
.joinButton,
.button {
flex: 0 1 48%;
@ -81,16 +82,18 @@
color: var(--color-gray);
}
.connectingAnimation{
&:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
animation: ellipsis steps(4,end) calc(var(--enableAnimation) * 900ms) infinite;
content: "\2026"; /* ascii code for the ellipsis character */
width: 0;
margin-right: 1.25em;
[style~="--enableAnimation:1;"] & {
animation: ellipsis steps(4,end) 900ms infinite;
}
}
}
@ -101,7 +104,6 @@
}
}
.duration {
display: flex;
align-self: center;

View File

@ -52,7 +52,10 @@
vertical-align: middle;
cursor: pointer;
user-select: none;
transition: all calc(var(--enableAnimation) * .2s) ease-in-out;
[style~="--enableAnimation:1;"] & {
transition: all .2s ease-in-out;
}
&:hover,
&:focus {

View File

@ -26,9 +26,12 @@
border-radius: var(--border-radius) 0 0 var(--border-radius);
color: var(--color-gray-light);
padding: var(--sm-padding-y) var(--sm-padding-x);
transition: all calc(var(--enableAnimation) * .3s);
cursor: pointer;
[style~="--enableAnimation:1;"] & {
transition: all .3s;
}
--bg-faded: rgba(167,179,189,0.25);
&:hover,

View File

@ -129,7 +129,10 @@
font-weight: inherit;
border: none;
border-radius: 0.4rem;
transition: box-shadow calc(var(--enableAnimation) * .2s);
[style~="--enableAnimation:1;"] & {
transition: box-shadow .2s;
}
}
input:focus {
@ -145,6 +148,9 @@
.urlError {
color: red;
padding: 1em;
transition: calc(var(--enableAnimation) * 1s);
[style~="--enableAnimation:1;"] & {
transition: 1s;
}
}

View File

@ -38,10 +38,12 @@
height: 18px;
margin: 0 5px;
background-color: var(--loader-bullet);
border-radius: 100%;
display: inline-block;
animation: sk-bouncedelay calc(var(--enableAnimation) * 1.4s) infinite ease-in-out both;
[style~="--enableAnimation:1;"] & {
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
}
.spinner .bounce1 {

View File

@ -42,5 +42,8 @@
.appearActive {
opacity: 1;
transition: opacity calc(var(--enableAnimation) * 700ms) ease-in;
[style~="--enableAnimation:1;"] & {
transition: opacity 700ms ease-in;
}
}

View File

@ -120,7 +120,10 @@
transparent
);
background-size: 1rem 1rem;
animation: bar-stripes calc(var(--enableAnimation) * 1s) linear infinite;
[style~="--enableAnimation:1;"] & {
animation: bar-stripes 1s linear infinite;
}
}
.itemAction,
@ -132,7 +135,11 @@
font-size: 1.35rem;
color: var(--color-gray-light);
padding: 0;
transition: all calc(var(--enableAnimation) * .25s);
[style~="--enableAnimation:1;"] & {
transition: all .25s;
}
:hover, :focus {
padding: unset !important;
}

View File

@ -7,7 +7,10 @@
.enterActive {
opacity: 1;
transition: opacity calc(var(--enableAnimation) * 400ms) ease-in;
[style~="--enableAnimation:1;"] & {
transition: opacity 400ms ease-in;
}
}
.appear {
@ -16,7 +19,10 @@
.appearActive {
opacity: 1;
transition: opacity calc(var(--enableAnimation) * 400ms) ease-in;
[style~="--enableAnimation:1;"] & {
transition: opacity 400ms ease-in;
}
}
.presentationArea {

View File

@ -162,7 +162,6 @@
border: none;
cursor: pointer;
opacity: .5;
transition: calc(var(--enableAnimation) * .3s) ease;
font-size: .35rem;
color: var(--color-gray-dark);
padding: .4rem;
@ -172,6 +171,11 @@
right: var(--md-padding-y);
font-size: 70%;
top: var(--lg-padding-y);
[style~="--enableAnimation:1;"] & {
transition: .3s ease;
}
&:before {
margin-left: -.2rem;
}

View File

@ -23,6 +23,7 @@
text-align: center;
text-transform: capitalize;
font-size: .85rem;
[style~="--enableAnimation:1;"] & {
transition: .3s ease-in-out;
}
@ -51,6 +52,7 @@
vertical-align: middle;
letter-spacing: -.65rem;
z-index: 1;
[style~="--enableAnimation:1;"] & {
transition: .3s ease-in-out;
}

View File

@ -44,11 +44,14 @@
%list-item {
display: flex;
flex-flow: row;
transition: all calc(var(--enableAnimation) * .3s);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
cursor: pointer;
[style~="--enableAnimation:1;"] & {
transition: all .3s;
}
&:first-child {
margin-top: 0;
}
@ -134,7 +137,10 @@
.enterActive,
.appearActive {
opacity: 1;
transition: all calc(var(--enableAnimation) * 600ms);
[style~="--enableAnimation:1;"] & {
transition: all 600ms;
}
}
.leave {
@ -143,5 +149,8 @@
.leaveActive {
opacity: 0;
transition: all calc(var(--enableAnimation) * 600ms);
[style~="--enableAnimation:1;"] & {
transition: all 600ms;
}
}

View File

@ -15,8 +15,11 @@
.enterActive,
.appearActive {
opacity: 1;
transition: all calc(var(--enableAnimation) * 300ms);
max-height: 10rem;
[style~="--enableAnimation:1;"] & {
transition: all 300ms;
}
}
.leave {
@ -26,8 +29,11 @@
.leaveActive {
opacity: 0;
transition: all calc(var(--enableAnimation) * 500ms);
max-height: 0rem;
[style~="--enableAnimation:1;"] & {
transition: all 500ms;
}
}
// Text under username
@ -41,8 +47,11 @@
.subUserNameAppearActive {
transform: translateY(0%);
opacity: 1;
transition: all calc(var(--enableAnimation) * 500ms);
max-height: 10rem;
[style~="--enableAnimation:1;"] & {
transition: all 500ms;
}
}
.subUserNameLeave {
@ -52,8 +61,11 @@
.subUserNameLeaveActive {
opacity: 0;
transition: all calc(var(--enableAnimation) * 300ms);
transform: translateY(-100%);
[style~="--enableAnimation:1;"] & {
transition: all 300ms;
}
}
.actionsHeader {

View File

@ -5,8 +5,11 @@
text-align: center;
flex-basis: 1rem;
justify-content: center;
transition: calc(var(--enableAnimation) * .3s) all;
margin-left: var(--sm-padding-x) / 2;
[style~="--enableAnimation:1;"] & {
transition: .3s all;
}
}
.userIcons {

View File

@ -15,9 +15,12 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: all calc(var(--enableAnimation) * .3s);
font-weight: 400;
color: var(--color-gray-dark);
[style~="--enableAnimation:1;"] & {
transition: all .3s;
}
}
.userNameSub {

View File

@ -55,8 +55,11 @@
border: 5px solid var(--color-white-with-transparency);
border-radius: 5px;
opacity: 0;
transition: opacity calc(var(--enableAnimation) * .1s);
pointer-events: none;
[style~="--enableAnimation:1;"] & {
transition: opacity .1s;
}
}
&.talking::after {
@ -98,7 +101,10 @@
content: "\e949"; /* ascii code for the ellipsis character */
font-family: 'bbb-icons' !important;
display: inline-block;
animation: spin calc(var(--enableAnimation) * 4s) infinite linear;
[style~="--enableAnimation:1;"] & {
animation: spin 4s infinite linear;
}
}
}

View File

@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
import cx from 'classnames';
import { HEXToINTColor, INTToHEXColor } from '/imports/utils/hexInt';
import { defineMessages, injectIntl, intlShape } from 'react-intl';
import RenderInBrowser from 'react-render-in-browser';
import browser from 'browser-detect';
import { noop } from 'lodash';
import injectWbResizeEvent from '/imports/ui/components/presentation/resize-wrapper/component';
@ -60,7 +59,8 @@ const intlMessages = defineMessages({
},
});
const runExceptInEdge = fn => (browser().name === 'edge' ? noop : fn);
const isEdge = browser().name === 'edge';
const runExceptInEdge = fn => (isEdge ? noop : fn);
class WhiteboardToolbar extends Component {
constructor(props) {
@ -439,48 +439,49 @@ class WhiteboardToolbar extends Component {
renderThicknessItemIcon() {
return (
<svg className={styles.customSvgIcon} shapeRendering="geometricPrecision">
<RenderInBrowser only edge>
<circle
cx="50%"
cy="50%"
r={this.state.thicknessSelected.value}
stroke="black"
strokeWidth="1"
fill={this.state.colorSelected.value}
/>
</RenderInBrowser>
<RenderInBrowser except edge>
<circle
shapeRendering="geometricPrecision"
cx="50%"
cy="50%"
stroke="black"
strokeWidth="1"
>
<animate
ref={(ref) => { this.thicknessListIconColor = ref; }}
attributeName="fill"
attributeType="XML"
from={this.state.prevColorSelected.value}
to={this.state.colorSelected.value}
begin="indefinite"
dur={TRANSITION_DURATION}
repeatCount="0"
fill="freeze"
{isEdge
? (
<circle
cx="50%"
cy="50%"
r={this.state.thicknessSelected.value}
stroke="black"
strokeWidth="1"
fill={this.state.colorSelected.value}
/>
<animate
ref={(ref) => { this.thicknessListIconRadius = ref; }}
attributeName="r"
attributeType="XML"
from={this.state.prevThicknessSelected.value}
to={this.state.thicknessSelected.value}
begin="indefinite"
dur={TRANSITION_DURATION}
repeatCount="0"
fill="freeze"
/>
</circle>
</RenderInBrowser>
)
: (
<circle
shapeRendering="geometricPrecision"
cx="50%"
cy="50%"
stroke="black"
strokeWidth="1"
>
<animate
ref={(ref) => { this.thicknessListIconColor = ref; }}
attributeName="fill"
attributeType="XML"
from={this.state.prevColorSelected.value}
to={this.state.colorSelected.value}
begin="indefinite"
dur={TRANSITION_DURATION}
repeatCount="0"
fill="freeze"
/>
<animate
ref={(ref) => { this.thicknessListIconRadius = ref; }}
attributeName="r"
attributeType="XML"
from={this.state.prevThicknessSelected.value}
to={this.state.thicknessSelected.value}
begin="indefinite"
dur={TRANSITION_DURATION}
repeatCount="0"
fill="freeze"
/>
</circle>
)}
</svg>
);
}
@ -521,32 +522,33 @@ class WhiteboardToolbar extends Component {
renderColorItemIcon() {
return (
<svg className={styles.customSvgIcon}>
<RenderInBrowser only edge>
<rect
x="25%"
y="25%"
width="50%"
height="50%"
stroke="black"
strokeWidth="1"
fill={this.state.colorSelected.value}
/>
</RenderInBrowser>
<RenderInBrowser except edge>
<rect x="25%" y="25%" width="50%" height="50%" stroke="black" strokeWidth="1">
<animate
ref={(ref) => { this.colorListIconColor = ref; }}
attributeName="fill"
attributeType="XML"
from={this.state.prevColorSelected.value}
to={this.state.colorSelected.value}
begin="indefinite"
dur={TRANSITION_DURATION}
repeatCount="0"
fill="freeze"
{isEdge
? (
<rect
x="25%"
y="25%"
width="50%"
height="50%"
stroke="black"
strokeWidth="1"
fill={this.state.colorSelected.value}
/>
</rect>
</RenderInBrowser>
) : (
<rect x="25%" y="25%" width="50%" height="50%" stroke="black" strokeWidth="1">
<animate
ref={(ref) => { this.colorListIconColor = ref; }}
attributeName="fill"
attributeType="XML"
from={this.state.prevColorSelected.value}
to={this.state.colorSelected.value}
begin="indefinite"
dur={TRANSITION_DURATION}
repeatCount="0"
fill="freeze"
/>
</rect>
)
}
</svg>
);
}