PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Vectorize mini avatar uploader spinner

Browse source 
Signed-off-by: Robin Townsend <robin@robin.town>
This commit is contained in:
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

28
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,27 +36,22 @@ 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 {
background-color: $secondary-fg-color; height: 100%;
mask-position: center; width: 100%;
mask-repeat: no-repeat;
mask-image: url('$(res)/img/element-icons/camera.svg');
mask-size: 16px;
z-index: 2;
}
&.mx_MiniAvatarUploader_busy::after { background-color: $secondary-fg-color;
background: url("$(res)/img/spinner.gif") no-repeat center; mask-position: center;
background-size: 80%; mask-repeat: no-repeat;
mask: unset; mask-image: url('$(res)/img/element-icons/camera.svg');
mask-size: 16px;
z-index: 2;
}
} }
} }

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,