keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

feat: moved spinners into new loading folder

Browse Source 
converted session-loader sass to styled components
pull/3056/head
William Grant 1 year ago
parent 1f5691d88f
commit 3250a2819f
25 changed files with 101 additions and 95 deletions
Show Stats Download Patch File Download Diff File

58
stylesheets/_session.scss
Unescape Escape View File

@ -444,64 +444,6 @@ label {
}
}
.session-loader {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
flex-shrink: 0;
div {
position: absolute;
top: 33px;
width: 13px;
height: 13px;
border-radius: 50%;
background: var(--primary-color);
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
div:nth-child(1) {
left: 8px;
animation: session-loader1 0.6s infinite;
}
div:nth-child(2) {
left: 8px;
animation: session-loader2 0.6s infinite;
}
div:nth-child(3) {
left: 32px;
animation: session-loader2 0.6s infinite;
}
div:nth-child(4) {
left: 56px;
animation: session-loader3 0.6s infinite;
}
@keyframes session-loader1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes session-loader3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes session-loader2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(24px, 0);
}
}
}
.session-settings {
width: 100%;
height: 100%;

2
ts/components/SessionPasswordPrompt.tsx
Unescape Escape View File

@ -12,8 +12,8 @@ import { switchPrimaryColorTo } from '../themes/switchPrimaryColor';
import { switchThemeTo } from '../themes/switchTheme';
import { SessionToastContainer } from './SessionToastContainer';
import { SessionWrapperModal } from './SessionWrapperModal';
import { SessionSpinner } from './basic/SessionSpinner';
import { SessionToast } from './basic/SessionToast';
import { SessionSpinner } from './loading';
interface State {
errorCount: number;

16
ts/components/basic/SessionSpinner.tsx
Unescape Escape View File

@ -1,16 +0,0 @@
type Props = {
loading: boolean;
};
export const SessionSpinner = (props: Props) => {
const { loading } = props;
return loading ? (
<div className="session-loader" data-testid="loading-spinner">
<div />
<div />
<div />
<div />
</div>
) : null;
};

2
ts/components/calling/InConversationCallContainer.tsx
Unescape Escape View File

@ -21,7 +21,7 @@ import { useVideoCallEventsListener } from '../../hooks/useVideoEventListener';
import { DEVICE_DISABLED_DEVICE_ID } from '../../session/utils/calling/CallManager';
import { CallWindowControls } from './CallButtons';
import { SessionSpinner } from '../basic/SessionSpinner';
import { SessionSpinner } from '../loading';
const VideoContainer = styled.div`
height: 100%;

2
ts/components/conversation/Image.tsx
Unescape Escape View File

@ -6,7 +6,7 @@ import { isNumber } from 'lodash';
import { useDisableDrag } from '../../hooks/useDisableDrag';
import { useEncryptedFileFetch } from '../../hooks/useEncryptedFileFetch';
import { AttachmentType, AttachmentTypeWithPath } from '../../types/Attachment';
import { Spinner } from '../basic/Spinner';
import { Spinner } from '../loading';
type Props = {
alt: string;

2
ts/components/conversation/SessionConversation.tsx
Unescape Escape View File

@ -56,7 +56,7 @@ import { ConversationHeaderWithDetails } from './header/ConversationHeader';
import { isAudio } from '../../types/MIME';
import { HTMLDirection } from '../../util/i18n';
import { NoticeBanner } from '../NoticeBanner';
import { SessionSpinner } from '../basic/SessionSpinner';
import { SessionSpinner } from '../loading';
import { RightPanel, StyledRightPanelContainer } from './right-panel/RightPanel';
const DEFAULT_JPEG_QUALITY = 0.85;

2
ts/components/conversation/StagedLinkPreview.tsx
Unescape Escape View File

@ -5,8 +5,8 @@ import { Image } from './Image';
import { fromArrayBufferToBase64 } from '../../session/utils/String';
import { isImage } from '../../types/MIME';
import { Flex } from '../basic/Flex';
import { SessionSpinner } from '../basic/SessionSpinner';
import { SessionIconButton } from '../icon';
import { SessionSpinner } from '../loading';
import { StagedLinkPreviewImage } from './composition/CompositionBox';
type Props = {

2
ts/components/conversation/message/message-content/MessageAttachment.tsx
Unescape Escape View File

@ -28,7 +28,7 @@ import {
isVideo,
} from '../../../../types/Attachment';
import { saveAttachmentToDisk } from '../../../../util/attachmentsUtil';
import { Spinner } from '../../../basic/Spinner';
import { Spinner } from '../../../loading';
import { AudioPlayerWithEncryptedFile } from '../../H5AudioPlayer';
import { ImageGrid } from '../../ImageGrid';
import { LightBoxOptions } from '../../SessionConversation';

2
ts/components/dialog/BanOrUnbanUserDialog.tsx
Unescape Escape View File

@ -17,8 +17,8 @@ import { SessionHeaderSearchInput } from '../SessionHeaderSearchInput';
import { SessionWrapperModal } from '../SessionWrapperModal';
import { Flex } from '../basic/Flex';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { SessionSpinner } from '../basic/SessionSpinner';
import { SpacerSM } from '../basic/Text';
import { SessionSpinner } from '../loading';
async function banOrUnBanUserCall(
convo: ConversationModel,

2
ts/components/dialog/DeleteAccountModal.tsx
Unescape Escape View File

@ -6,8 +6,8 @@ import { forceSyncConfigurationNowIfNeeded } from '../../session/utils/sync/sync
import { updateConfirmModal, updateDeleteAccountModal } from '../../state/ducks/modalDialog';
import { SessionWrapperModal } from '../SessionWrapperModal';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { SessionSpinner } from '../basic/SessionSpinner';
import { SpacerLG } from '../basic/Text';
import { SessionSpinner } from '../loading';
import { Data } from '../../data/data';
import { deleteAllLogs } from '../../node/logs';

2
ts/components/dialog/EditProfileDialog.tsx
Unescape Escape View File

@ -18,8 +18,8 @@ import { saveQRCode } from '../../util/saveQRCode';
import { setLastProfileUpdateTimestamp } from '../../util/storage';
import { SessionWrapperModal } from '../SessionWrapperModal';
import { SessionButton, SessionButtonType } from '../basic/SessionButton';
import { SessionSpinner } from '../basic/SessionSpinner';
import { SessionIconButton } from '../icon';
import { SessionSpinner } from '../loading';
const handleSaveQRCode = (event: MouseEvent) => {
event.preventDefault();

2
ts/components/dialog/EditProfilePictureModal.tsx
Unescape Escape View File

@ -7,9 +7,9 @@ import { editProfileModal, updateEditProfilePictureModel } from '../../state/duc
import { pickFileForAvatar } from '../../types/attachments/VisualAttachment';
import { SessionWrapperModal } from '../SessionWrapperModal';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { SessionSpinner } from '../basic/SessionSpinner';
import { SpacerLG } from '../basic/Text';
import { SessionIconButton } from '../icon';
import { SessionSpinner } from '../loading';
import { ProfileAvatar } from './EditProfileDialog';
const StyledAvatarContainer = styled.div`

2
ts/components/dialog/ModeratorsAddDialog.tsx
Unescape Escape View File

@ -11,7 +11,7 @@ import { SessionHeaderSearchInput } from '../SessionHeaderSearchInput';
import { SessionWrapperModal } from '../SessionWrapperModal';
import { Flex } from '../basic/Flex';
import { SessionButton, SessionButtonType } from '../basic/SessionButton';
import { SessionSpinner } from '../basic/SessionSpinner';
import { SessionSpinner } from '../loading';
type Props = {
conversationId: string;

2
ts/components/dialog/ModeratorsRemoveDialog.tsx
Unescape Escape View File

@ -13,7 +13,7 @@ import { updateRemoveModeratorsModal } from '../../state/ducks/modalDialog';
import { MemberListItem } from '../MemberListItem';
import { SessionWrapperModal } from '../SessionWrapperModal';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { SessionSpinner } from '../basic/SessionSpinner';
import { SessionSpinner } from '../loading';
type Props = {
conversationId: string;

4
ts/components/dialog/OnionStatusPathDialog.tsx
Unescape Escape View File

@ -16,9 +16,9 @@ import {
} from '../../state/selectors/onions';
import { Flex } from '../basic/Flex';
import { SessionSpinner } from '../basic/SessionSpinner';
import { SessionIcon, SessionIconButton } from '../icon';
import { SessionWrapperModal } from '../SessionWrapperModal';
import { SessionIcon, SessionIconButton } from '../icon';
import { SessionSpinner } from '../loading';
export type StatusLightType = {
glowStartDelay: number;

2
ts/components/dialog/ReactClearAllModal.tsx
Unescape Escape View File

@ -8,7 +8,7 @@ import { updateReactClearAllModal } from '../../state/ducks/modalDialog';
import { SessionWrapperModal } from '../SessionWrapperModal';
import { Flex } from '../basic/Flex';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { SessionSpinner } from '../basic/SessionSpinner';
import { SessionSpinner } from '../loading';
type Props = {
reaction: string;

2
ts/components/dialog/SessionConfirm.tsx
Unescape Escape View File

@ -13,9 +13,9 @@ import { SessionWrapperModal } from '../SessionWrapperModal';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { SessionHtmlRenderer } from '../basic/SessionHTMLRenderer';
import { SessionRadioGroup, SessionRadioItems } from '../basic/SessionRadioGroup';
import { SessionSpinner } from '../basic/SessionSpinner';
import { SpacerLG } from '../basic/Text';
import { SessionIcon, SessionIconSize, SessionIconType } from '../icon';
import { SessionSpinner } from '../loading';
const StyledSubText = styled(SessionHtmlRenderer)<{ textLength: number }>`
font-size: var(--font-size-md);

2
ts/components/leftpane/overlay/OverlayClosedGroup.tsx
Unescape Escape View File

@ -6,7 +6,7 @@ import styled from 'styled-components';
import { SessionButton } from '../../basic/SessionButton';
import { SessionIdEditable } from '../../basic/SessionIdEditable';
import { SessionSpinner } from '../../basic/SessionSpinner';
import { SessionSpinner } from '../../loading';
import { MemberListItem } from '../../MemberListItem';
import { OverlayHeader } from './OverlayHeader';

2
ts/components/leftpane/overlay/OverlayCommunity.tsx
Unescape Escape View File

@ -14,7 +14,7 @@ import { ToastUtils } from '../../../session/utils';
import { resetLeftOverlayMode } from '../../../state/ducks/section';
import { SessionButton } from '../../basic/SessionButton';
import { SessionIdEditable } from '../../basic/SessionIdEditable';
import { SessionSpinner } from '../../basic/SessionSpinner';
import { SessionSpinner } from '../../loading';
import { OverlayHeader } from './OverlayHeader';
import {

2
ts/components/leftpane/overlay/OverlayMessage.tsx
Unescape Escape View File

@ -11,7 +11,7 @@ import { openConversationWithMessages } from '../../../state/ducks/conversations
import { resetLeftOverlayMode } from '../../../state/ducks/section';
import { SessionButton } from '../../basic/SessionButton';
import { SessionIdEditable } from '../../basic/SessionIdEditable';
import { SessionSpinner } from '../../basic/SessionSpinner';
import { SessionSpinner } from '../../loading';
import { OverlayHeader } from './OverlayHeader';
import { ONSResolve } from '../../../session/apis/snode_api/onsResolve';

2
ts/components/leftpane/overlay/SessionJoinableDefaultRooms.tsx
Unescape Escape View File

@ -9,8 +9,8 @@ import { StateType } from '../../../state/reducer';
import { Avatar, AvatarSize } from '../../avatar/Avatar';
import { Flex } from '../../basic/Flex';
import { PillContainerHoverable, StyledPillContainerHoverable } from '../../basic/PillContainer';
import { SessionSpinner } from '../../basic/SessionSpinner';
import { H3 } from '../../basic/Text';
import { SessionSpinner } from '../../loading';
export type JoinableRoomProps = {
completeUrl: string;

4
ts/components/loading/index.tsx
Unescape Escape View File

@ -0,0 +1,4 @@
import { SessionSpinner } from './spinner/SessionSpinner';
import { Spinner } from './spinner/Spinner';
export { SessionSpinner, Spinner };

76
ts/components/loading/spinner/SessionSpinner.tsx
Unescape Escape View File

@ -0,0 +1,76 @@
import styled from 'styled-components';
type Props = {
loading: boolean;
};
const StyledSessionSpinner = styled.div`
display: inline-block;
position: relative;
width: 80px;
height: 80px;
flex-shrink: 0;
div {
position: absolute;
top: 33px;
width: 13px;
height: 13px;
border-radius: 50%;
background: var(--primary-color);
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
div:nth-child(1) {
left: 8px;
animation: session-loader1 0.6s infinite;
}
div:nth-child(2) {
left: 8px;
animation: session-loader2 0.6s infinite;
}
div:nth-child(3) {
left: 32px;
animation: session-loader2 0.6s infinite;
}
div:nth-child(4) {
left: 56px;
animation: session-loader3 0.6s infinite;
}
@keyframes session-loader1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes session-loader3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes session-loader2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(24px, 0);
}
}
`;
export const SessionSpinner = (props: Props) => {
const { loading } = props;
return loading ? (
<StyledSessionSpinner data-testid="loading-spinner">
<div />
<div />
<div />
<div />
</StyledSessionSpinner>
) : null;
};

0
ts/components/basic/Spinner.tsx → ts/components/loading/spinner/Spinner.tsx
Unescape Escape View File

2
ts/components/registration/SignInTab.tsx
Unescape Escape View File

@ -3,8 +3,8 @@ import { ToastUtils } from '../../session/utils';
import { sanitizeSessionUsername } from '../../session/utils/String';
import { Flex } from '../basic/Flex';
import { SessionButton } from '../basic/SessionButton';
import { SessionSpinner } from '../basic/SessionSpinner';
import { SpacerLG } from '../basic/Text';
import { SessionSpinner } from '../loading';
import {
RegistrationContext,
RegistrationPhase,

Write Preview
Loading…
Cancel
Save