OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Vectorize mini avatar uploader spinner 

Signed-off-by: Robin Townsend <robin@robin.town>
pull/21833/head
Robin Townsend 2021-04-26 14:10:09 -04:00
parent 40b684d7de
commit d3db5fe77f
3 changed files with 20 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
res/css/views/elements/_MiniAvatarUploader.scss
View File

@ -28,8 +28,7 @@ limitations under the License.
top: 0; top: 0;
} }
&::before, &::after { .mx_MiniAvatarUploader_indicator {
content: '';
position: absolute; position: absolute;
height: 26px; height: 26px;
@ -37,15 +36,15 @@ limitations under the License.
right: -6px; right: -6px;
bottom: -6px; bottom: -6px;
}
&::before {
background-color: $primary-bg-color; background-color: $primary-bg-color;
border-radius: 50%; border-radius: 50%;
z-index: 1; z-index: 1;
}
&::after { .mx_MiniAvatarUploader_cameraIcon {
height: 100%;
width: 100%;
background-color: $secondary-fg-color; background-color: $secondary-fg-color;
mask-position: center; mask-position: center;
mask-repeat: no-repeat; mask-repeat: no-repeat;
@ -53,11 +52,6 @@ limitations under the License.
mask-size: 16px; mask-size: 16px;
z-index: 2; z-index: 2;
} }
&.mx_MiniAvatarUploader_busy::after {
background: url("$(res)/img/spinner.gif") no-repeat center;
background-size: 80%;
mask: unset;
} }
} }

4
res/css/views/rooms/_NewRoomIntro.scss
View File

@ -18,8 +18,8 @@ limitations under the License.
margin: 40px 0 48px 64px; margin: 40px 0 48px 64px;
.mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover) { .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover) {
&::before, &::after { .mx_MiniAvatarUploader_indicator {
content: unset; display: none;
} }
} }

7
src/components/views/elements/MiniAvatarUploader.tsx
View File

@ -19,6 +19,7 @@ import {EventType} from 'matrix-js-sdk/src/@types/event';
import classNames from 'classnames'; import classNames from 'classnames';
import AccessibleButton from "./AccessibleButton"; import AccessibleButton from "./AccessibleButton";
import Spinner from "./Spinner";
import MatrixClientContext from "../../../contexts/MatrixClientContext"; import MatrixClientContext from "../../../contexts/MatrixClientContext";
import {useTimeout} from "../../../hooks/useTimeout"; import {useTimeout} from "../../../hooks/useTimeout";
import Analytics from "../../../Analytics"; import Analytics from "../../../Analytics";
@ -88,6 +89,12 @@ const MiniAvatarUploader: React.FC<IProps> = ({ hasAvatar, hasAvatarLabel, noAva
> >
{ children } { children }
<div className="mx_MiniAvatarUploader_indicator">
{ busy ?
<Spinner w={20} h={20} /> :
<div className="mx_MiniAvatarUploader_cameraIcon"></div> }
</div>
<div className={classNames("mx_Tooltip", { <div className={classNames("mx_Tooltip", {
"mx_Tooltip_visible": visible, "mx_Tooltip_visible": visible,
"mx_Tooltip_invisible": !visible, "mx_Tooltip_invisible": !visible,