phlux/mattermostest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[MM-37090] Update loading screen branding (#1706)

Browse Source 
* update loading screen branding

- background
- logo light mode colour

* linting

* build mac installer on pr

* use the actual branch name
This commit is contained in:
Dean Whillier
2021-08-20 13:50:16 -04:00
committed by GitHub
parent ea14159dcc
commit ac61c66ce4
11 changed files with 142 additions and 423 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/renderer/components/LoadingScreen/LoadingBackground.tsx Normal file
View File

@@ -0,0 +1,78 @@
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
function LoadingBackground() {
return (
<div className='LoadingScreen__backgound'>
<svg
viewBox='0 0 1366 728'
xmlns='http://www.w3.org/2000/svg'
preserveAspectRatio='xMidYMid slice'
>
<g style={{transform: 'translate(676px, -200px)'}}>
<g style={{transformOrigin: '450px 267.5px', transform: 'rotate(45deg)'}}>
<use href='#pill'/>
</g>
</g>
<g style={{transform: 'translate(125px, 0px)'}}>
<g style={{transformOrigin: '450px 267.5px', transform: 'rotate(-135deg)'}}>
<use href='#pill'/>
</g>
</g>
<g style={{transform: 'translate(700px, 330px)'}}>
<g style={{transformOrigin: '450px 267.5px', transform: 'rotate(-135deg)'}}>
<use href='#pill'/>
</g>
</g>
<g style={{transform: 'translate(-280px, 190px)'}}>
<g style={{transformOrigin: '450px 267.5px', transform: 'rotate(45deg)'}}>
<use href='#pill'/>
</g>
</g>
<defs>
<mask id='stippleMask'>
<image
width='900'
height='535'
href='../assets/loader/StippleMask.jpg'
/>
</mask>
<g
id='pill'
className='Pill'
>
<rect
className='Pill__stipple'
x='0'
y='0'
width='900'
height='535'
mask='url(#stippleMask)'
/>
<path
className='Pill__shape'
d='M600 40H0V490H600C724.264 490 825 389.264 825 265C825 140.736 724.264 40 600 40Z'
fill='url(#pillGradient)'
/>
</g>
<linearGradient id='pillGradient'>
<stop
className='Pill__gradient'
offset='20%'
stopOpacity='1'
/>
<stop
className='Pill__gradientHighlight'
offset='95%'
stopOpacity='1'
/>
</linearGradient>
</defs>
</svg>
</div>
);
}
export default LoadingBackground;

7
src/renderer/components/LoadingScreen.tsx → src/renderer/components/LoadingScreen/LoadingScreen.tsx
View File

@@ -4,9 +4,11 @@
import React from 'react';
import classNames from 'classnames';
import useTransitionEnd from '../hooks/useTransitionEnd';
import useTransitionEnd from '../../hooks/useTransitionEnd';
import LoadingAnimation from './LoadingAnimation';
import LoadingAnimation from '../LoadingAnimation';
import LoadingBackground from './LoadingBackground';
type Props = {
loading?: boolean;
@@ -63,6 +65,7 @@ function LoadingScreen({loading = false, darkMode = false, onFadeOutComplete = (
'LoadingScreen--loaded': loadingIsComplete && loadAnimationIsComplete,
})}
>
<LoadingBackground/>
<LoadingAnimation
loading={loading}
darkMode={darkMode}

4
src/renderer/components/LoadingScreen/index.ts Normal file
View File

@@ -0,0 +1,4 @@
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
export {default} from './LoadingScreen';

2
src/renderer/css/components/LoadingAnimation.css
View File

@@ -1,6 +1,6 @@
.LoadingAnimation {
--fade-duration: 150ms;
--colour: #166de0;
--colour: #1E325C;
--animation-initial-delay: 500ms;
--animation-start-duration: 750ms;
--animation-end-duration: 600ms;

100
src/renderer/css/components/LoadingScreen.css
View File

@@ -3,57 +3,65 @@ body {
}
.LoadingScreen {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
vertical-align: middle;
background: white url(../../../assets/window-background.svg) no-repeat center;
background-size: cover;
opacity: 1;
visibility: visible;
z-index: 10;
overflow:hidden;
transition: opacity 150ms 0ms ease-out, visibility 150ms 0ms step-start;
}
.LoadingScreen::before, .LoadingScreen::after {
content: "";
display: block;
position: absolute;
width: 460px;
height: 460px;
opacity: 0.1;
background-image: url(../../../assets/window-background-dots.svg);
background-repeat: no-repeat;
background-position: center;
}
.LoadingScreen::before {
left: -210px;
bottom: 10px;
}
.LoadingScreen::after {
right: -80px;
top: 50%;
margin-top: -230px;
--background-color: #F4F4F6;
--background-color-highlight: #FFFFFF;
--stipple-color: #1E325C;
--stipple-opacity: 0.08;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0px;
bottom: 0px;
width: 100vw;
height: 100vh;
vertical-align: middle;
opacity: 1;
visibility: visible;
z-index: 10;
overflow:hidden;
transition: opacity 150ms 0ms ease-out, visibility 150ms 0ms step-start;
}
.LoadingScreen--darkMode {
background-color: #323639;
background-image: url(../../../assets/window-background_dark.svg);
--background-color-highlight: #28427B;
--background-color: #1E325C;
--stipple-color: #14213E;
--stipple-opacity: 0.8;
}
.LoadingScreen--darkMode::before, .LoadingScreen--darkMode::after {
background-image: url(../../../assets/window-background-dots_dark.svg);
.LoadingScreen__backgound,
.LoadingScreen__backgound > svg
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.LoadingScreen__backgound {
background: var(--background-color);
}
.LoadingScreen .Pill__stipple {
fill: var(--stipple-color);
fill-opacity: var(--stipple-opacity);
}
.LoadingScreen .Pill__gradient {
stop-color: var(--background-color);
}
.LoadingScreen .Pill__gradientHighlight {
stop-color: var(--background-color-highlight);
}
.LoadingScreen--loaded {
opacity: 0;
visibility: hidden;
transition: opacity 150ms 0ms ease-in, visibility 150ms 0ms step-end;
opacity: 0;
visibility: hidden;
transition: opacity 150ms 0ms ease-in, visibility 150ms 0ms step-end;
}