mirror of
https://github.com/oxen-io/session-desktop.git
synced 2023-12-14 02:12:57 +01:00
fix up onion path animation with no glowing nodes
This commit is contained in:
parent
a3e31fc251
commit
e8020348b4
6 changed files with 29 additions and 40 deletions
|
@ -18,6 +18,10 @@
|
|||
word-break: break-all;
|
||||
}
|
||||
|
||||
.session-icon-button svg path {
|
||||
transition: fill 0.3s ease;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
caret-color: $session-color-green !important;
|
||||
|
|
|
@ -116,7 +116,7 @@ export const ModalStatusLight = (props: StatusLightType) => {
|
|||
glowDuration={glowDuration}
|
||||
glowStartDelay={glowStartDelay}
|
||||
iconType={SessionIconType.Circle}
|
||||
iconSize={SessionIconSize.Medium}
|
||||
iconSize={SessionIconSize.Small}
|
||||
theme={theme}
|
||||
/>
|
||||
);
|
||||
|
|
|
@ -41,8 +41,6 @@ const InviteContactsDialogInner = (props: Props) => {
|
|||
}
|
||||
|
||||
const chatName = convo.get('name');
|
||||
// const chatServer = convo.get('server');
|
||||
// const channelId = convo.get('channelId');
|
||||
const isPublicConvo = convo.isPublic();
|
||||
|
||||
const [contactList, setContactList] = useState(
|
||||
|
|
|
@ -62,43 +62,51 @@ const rotate = keyframes`
|
|||
* Creates a glow animation made for multiple element sequentially
|
||||
*/
|
||||
const glow = (color: string, glowDuration: number, glowStartDelay: number) => {
|
||||
const dropShadowType = `drop-shadow(0px 0px 4px ${color}) `;
|
||||
|
||||
//increase shadow intensity by 3
|
||||
const dropShadow = `${dropShadowType.repeat(1)};`;
|
||||
const dropShadow = `drop-shadow(0px 0px 6px ${color});`;
|
||||
|
||||
// creating keyframe for sequential animations
|
||||
let kf = '';
|
||||
for (let i = 0; i <= glowDuration; i++) {
|
||||
// const percent = (100 / glowDuration) * i;
|
||||
const percent = (100 / glowDuration) * i;
|
||||
if (i === glowStartDelay) {
|
||||
const durationWithLoop = glowDuration + 1;
|
||||
for (let i = 0; i <= durationWithLoop; i++) {
|
||||
const percent = (100 / durationWithLoop) * i;
|
||||
|
||||
if (i === glowStartDelay + 1) {
|
||||
kf += `${percent}% {
|
||||
filter: ${dropShadow}
|
||||
transform: scale(1.5);
|
||||
transform: scale(1.1);
|
||||
}`;
|
||||
} else {
|
||||
kf += `${percent}% {
|
||||
filter: none;
|
||||
transform: scale(0.8);
|
||||
transform: scale(0.9);
|
||||
}`;
|
||||
}
|
||||
}
|
||||
return keyframes`${kf}`;
|
||||
};
|
||||
|
||||
const animation = (props: any) => {
|
||||
const animation = (props: {
|
||||
rotateDuration?: number;
|
||||
glowDuration?: number;
|
||||
glowStartDelay?: number;
|
||||
iconColor?: string;
|
||||
}) => {
|
||||
if (props.rotateDuration) {
|
||||
return css`
|
||||
${rotate} ${props.rotateDuration}s infinite linear;
|
||||
`;
|
||||
} else if (props.glowDuration !== undefined && props.glowStartDelay !== undefined) {
|
||||
} else if (
|
||||
props.glowDuration !== undefined &&
|
||||
props.glowStartDelay !== undefined &&
|
||||
props.iconColor
|
||||
) {
|
||||
return css`
|
||||
${glow(
|
||||
props.iconColor,
|
||||
props.glowDuration,
|
||||
props.glowStartDelay
|
||||
)} ${props.glowDuration}s ease-in infinite;
|
||||
)} ${props.glowDuration}s ease infinite;
|
||||
`;
|
||||
} else {
|
||||
return;
|
||||
|
|
|
@ -1,6 +1,8 @@
|
|||
import React from 'react';
|
||||
|
||||
// tslint:disable-next-line: no-submodule-imports
|
||||
import useNetworkState from 'react-use/lib/useNetworkState';
|
||||
import styled from 'styled-components';
|
||||
import { useNetwork } from '../../../hooks/useNetwork';
|
||||
|
||||
type ContainerProps = {
|
||||
show: boolean;
|
||||
|
@ -24,8 +26,7 @@ const OfflineTitle = styled.h3`
|
|||
const OfflineMessage = styled.div``;
|
||||
|
||||
export const SessionOffline = () => {
|
||||
const isOnline = useNetwork();
|
||||
|
||||
const isOnline = useNetworkState().online;
|
||||
return (
|
||||
<OfflineContainer show={!isOnline}>
|
||||
<OfflineTitle>{window.i18n('offline')}</OfflineTitle>
|
||||
|
|
|
@ -1,22 +0,0 @@
|
|||
import { useEffect, useState } from 'react';
|
||||
|
||||
export function useNetwork() {
|
||||
const [isOnline, setNetwork] = useState(window.navigator.onLine);
|
||||
const updateNetwork = () => {
|
||||
setNetwork(window.navigator.onLine);
|
||||
};
|
||||
|
||||
// there are some weird behavior with this api.
|
||||
// basically, online events might not be called if the pc has a virtual machine running
|
||||
// https://github.com/electron/electron/issues/11290#issuecomment-348598311
|
||||
useEffect(() => {
|
||||
window.addEventListener('offline', updateNetwork);
|
||||
window.addEventListener('online', updateNetwork);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('offline', updateNetwork);
|
||||
window.removeEventListener('online', updateNetwork);
|
||||
};
|
||||
});
|
||||
return isOnline;
|
||||
}
|
Loading…
Reference in a new issue