From e97ac5d7c7a9365b658b3625b7e9f8020aa64a96 Mon Sep 17 00:00:00 2001 From: audric Date: Fri, 14 Jan 2022 14:55:12 +1100 Subject: [PATCH] make the DL spinner a styled component --- stylesheets/_modules.scss | 90 -------------- stylesheets/_theme_dark.scss | 4 - ts/components/basic/Spinner.tsx | 112 ++++++++++++------ ts/components/conversation/Image.tsx | 2 + .../message-content/MessageAttachment.tsx | 2 +- ts/receiver/receiver.ts | 2 +- 6 files changed, 83 insertions(+), 129 deletions(-) diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index b30249321..e1ce2b3cb 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -1359,96 +1359,6 @@ @include color-svg('../images/x-16.svg', $color-gray-60); } -// Module: Spinner - -.module-spinner__container { - margin-inline-start: auto; - margin-inline-end: auto; - position: relative; - height: 56px; - width: 56px; -} - -.module-spinner__circle { - position: absolute; - top: 0; - left: 0; - - @include color-svg('../images/spinner-track-56.svg', $color-white-04); - z-index: 2; - height: 56px; - width: 56px; -} -.module-spinner__arc { - position: absolute; - top: 0; - left: 0; - - @include color-svg('../images/spinner-56.svg', var(--color-text)); - - z-index: 3; - height: 56px; - width: 56px; - - animation: spinner-arc-animation 1000ms linear infinite; -} - -@keyframes spinner-arc-animation { - 0% { - transform: rotate(0deg); - } - 50% { - transform: rotate(180deg); - } - 100% { - transform: rotate(360deg); - } -} - -// In these --small and --mini sizes, we're exploding our @color-svg mixin so we don't -// have to duplicate our background colors for the dark/ios/size matrix. - -.module-spinner__container--small { - height: 24px; - width: 24px; -} -.module-spinner__circle--small { - -webkit-mask: url('../images/spinner-track-24.svg') no-repeat center; - -webkit-mask-size: 100%; - height: 24px; - width: 24px; -} -.module-spinner__arc--small { - -webkit-mask: url('../images/spinner-24.svg') no-repeat center; - -webkit-mask-size: 100%; - height: 24px; - width: 24px; -} - -.module-spinner__container--mini { - height: 14px; - width: 14px; -} -.module-spinner__circle--mini { - -webkit-mask: url('../images/spinner-track-24.svg') no-repeat center; - -webkit-mask-size: 100%; - height: 14px; - width: 14px; -} -.module-spinner__arc--mini { - -webkit-mask: url('../images/spinner-24.svg') no-repeat center; - -webkit-mask-size: 100%; - height: 14px; - width: 14px; -} - -.module-spinner__circle--incoming { - background-color: rgba(var(--color-received-message-text), 0.2); -} - -.module-spinner__circle--outgoing { - background-color: rgba(var(--color-sent-message-text), 0.2); -} // Module: Search Results diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss index 2d4c6df91..d8ff4f04a 100644 --- a/stylesheets/_theme_dark.scss +++ b/stylesheets/_theme_dark.scss @@ -405,10 +405,6 @@ // Module: Spinner - .module-spinner__circle { - background-color: $color-white-04; - } - .module-search-results__conversations-header { color: $color-gray-05; } diff --git a/ts/components/basic/Spinner.tsx b/ts/components/basic/Spinner.tsx index acd8e484d..b3ad430b3 100644 --- a/ts/components/basic/Spinner.tsx +++ b/ts/components/basic/Spinner.tsx @@ -1,41 +1,87 @@ import React from 'react'; -import classNames from 'classnames'; +import styled from 'styled-components'; -interface Props { - size: 'small' | 'mini' | 'normal'; +type Props = { + size: 'small' | 'normal'; direction?: string; -} +}; -export class Spinner extends React.Component { - public render() { - const { size, direction } = this.props; +// Module: Spinner +const spinner56Path = + 'M52.3599009,14.184516 C54.6768062,18.2609741 56,22.9759628 56,28 C56,43.463973 43.463973,56 28,56 L28,54 C42.3594035,54 54,42.3594035 54,28 C54,23.3403176 52.7742128,18.9669331 50.6275064,15.1847144 L52.3599009,14.184516 Z'; + +const spinner24Path = + 'M22.5600116,6.29547931 C23.4784938,7.99216184 24,9.93517878 24,12 C24,18.627417 18.627417,24 12,24 L12,22 C17.5228475,22 22,17.5228475 22,12 C22,10.2995217 21.5755584,8.6981771 20.8268371,7.29612807 L22.5600116,6.29547931 Z'; + +const SpinnerArc = styled.svg` + position: absolute; + top: 0; + left: 0; + background: none; + z-index: 3; + height: 56px; + width: 56px; + + animation: spinner-arc-animation 3000ms linear infinite; + animation-play-state: inherit; + + @keyframes spinner-arc-animation { + 0% { + transform: rotate(0deg); + } + 50% { + transform: rotate(180deg); + } + 100% { + transform: rotate(360deg); + } + } +`; + +const SpinnerContainer = styled.div` + margin-inline-start: auto; + margin-inline-end: auto; + position: relative; + height: 56px; + width: 56px; + + /* :hover { + animation-play-state: running; + } + animation-play-state: paused; + */ + animation-play-state: running; +`; + +const SpinnerContainerSmall = styled(SpinnerContainer)` + height: 24px; + width: 24px; +`; + +const SpinnerArcSmall = styled(SpinnerArc)` + height: 24px; + width: 24px; +`; + +export const Spinner = (props: Props) => { + const { size } = props; + + if (size === 'small') { return ( -
-
-
-
+ + + + + ); } -} + + return ( + + + + + + ); +}; diff --git a/ts/components/conversation/Image.tsx b/ts/components/conversation/Image.tsx index 73b8f2866..f2aed75a2 100644 --- a/ts/components/conversation/Image.tsx +++ b/ts/components/conversation/Image.tsx @@ -94,6 +94,8 @@ export const Image = (props: Props) => { style={{ maxHeight: `${height}px`, maxWidth: `${width}px`, + width: `${width}px`, + height: `${height}px`, lineHeight: `${height}px`, textAlign: 'center', }} diff --git a/ts/components/conversation/message/message-content/MessageAttachment.tsx b/ts/components/conversation/message/message-content/MessageAttachment.tsx index 071367e10..bf7e10545 100644 --- a/ts/components/conversation/message/message-content/MessageAttachment.tsx +++ b/ts/components/conversation/message/message-content/MessageAttachment.tsx @@ -155,7 +155,7 @@ export const MessageAttachment = (props: Props) => {
{pending ? (
- +
) : (
diff --git a/ts/receiver/receiver.ts b/ts/receiver/receiver.ts index 0e2212ce1..758499aab 100644 --- a/ts/receiver/receiver.ts +++ b/ts/receiver/receiver.ts @@ -262,7 +262,7 @@ export async function handleOpenGroupV2Message( const { base64EncodedData, sentTimestamp, sender, serverId } = message; const { serverUrl, roomId } = roomInfos; if (!base64EncodedData || !sentTimestamp || !sender || !serverId) { - window?.log?.warn('Invalid data passed to handleMessageEvent.', message); + window?.log?.warn('Invalid data passed to handleOpenGroupV2Message.', message); return; }