mirror of
https://github.com/oxen-io/session-desktop.git
synced 2023-12-14 02:12:57 +01:00
add some static glowing to the actionpanel light
This commit is contained in:
parent
504a9afc0a
commit
447f862ace
5 changed files with 32 additions and 10 deletions
|
@ -164,6 +164,9 @@ export const ActionPanelOnionStatusLight = (props: {
|
||||||
iconType={SessionIconType.Circle}
|
iconType={SessionIconType.Circle}
|
||||||
iconColor={iconColor}
|
iconColor={iconColor}
|
||||||
onClick={handleClick}
|
onClick={handleClick}
|
||||||
|
glowDuration={10}
|
||||||
|
glowStartDelay={0}
|
||||||
|
noScale={true}
|
||||||
isSelected={isSelected}
|
isSelected={isSelected}
|
||||||
theme={theme}
|
theme={theme}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -12,6 +12,7 @@ export type SessionIconProps = {
|
||||||
glowDuration?: number;
|
glowDuration?: number;
|
||||||
borderRadius?: number;
|
borderRadius?: number;
|
||||||
glowStartDelay?: number;
|
glowStartDelay?: number;
|
||||||
|
noScale?: boolean;
|
||||||
theme?: DefaultTheme;
|
theme?: DefaultTheme;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -46,6 +47,7 @@ type StyledSvgProps = {
|
||||||
borderRadius?: number;
|
borderRadius?: number;
|
||||||
glowDuration?: number;
|
glowDuration?: number;
|
||||||
glowStartDelay?: number;
|
glowStartDelay?: number;
|
||||||
|
noScale?: boolean;
|
||||||
iconColor?: string;
|
iconColor?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -91,16 +93,22 @@ const animation = (props: {
|
||||||
glowDuration?: number;
|
glowDuration?: number;
|
||||||
glowStartDelay?: number;
|
glowStartDelay?: number;
|
||||||
iconColor?: string;
|
iconColor?: string;
|
||||||
|
noScale?: boolean;
|
||||||
}) => {
|
}) => {
|
||||||
if (props.rotateDuration) {
|
if (props.rotateDuration) {
|
||||||
return css`
|
return css`
|
||||||
${rotate} ${props.rotateDuration}s infinite linear;
|
${rotate} ${props.rotateDuration}s infinite linear;
|
||||||
`;
|
`;
|
||||||
} else if (
|
}
|
||||||
props.glowDuration !== undefined &&
|
if (props.noScale) {
|
||||||
props.glowStartDelay !== undefined &&
|
return css``;
|
||||||
props.iconColor
|
}
|
||||||
) {
|
|
||||||
|
if (props.glowDuration === 10) {
|
||||||
|
console.warn('scake', props);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (props.glowDuration !== undefined && props.glowStartDelay !== undefined && props.iconColor) {
|
||||||
return css`
|
return css`
|
||||||
${glow(
|
${glow(
|
||||||
props.iconColor,
|
props.iconColor,
|
||||||
|
@ -108,9 +116,9 @@ const animation = (props: {
|
||||||
props.glowStartDelay
|
props.glowStartDelay
|
||||||
)} ${props.glowDuration}s ease infinite;
|
)} ${props.glowDuration}s ease infinite;
|
||||||
`;
|
`;
|
||||||
} else {
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return;
|
||||||
};
|
};
|
||||||
|
|
||||||
//tslint:disable no-unnecessary-callback-wrapper
|
//tslint:disable no-unnecessary-callback-wrapper
|
||||||
|
@ -119,6 +127,7 @@ const Svg = styled.svg<StyledSvgProps>`
|
||||||
transform: ${props => `rotate(${props.iconRotation}deg)`};
|
transform: ${props => `rotate(${props.iconRotation}deg)`};
|
||||||
animation: ${props => animation(props)};
|
animation: ${props => animation(props)};
|
||||||
border-radius: ${props => props.borderRadius};
|
border-radius: ${props => props.borderRadius};
|
||||||
|
filter: ${props => (props.noScale ? `drop-shadow(0px 0px 4px ${props.iconColor})` : '')};
|
||||||
`;
|
`;
|
||||||
//tslint:enable no-unnecessary-callback-wrapper
|
//tslint:enable no-unnecessary-callback-wrapper
|
||||||
|
|
||||||
|
@ -132,6 +141,7 @@ const SessionSvg = (props: {
|
||||||
rotateDuration?: number;
|
rotateDuration?: number;
|
||||||
glowDuration?: number;
|
glowDuration?: number;
|
||||||
glowStartDelay?: number;
|
glowStartDelay?: number;
|
||||||
|
noScale?: boolean;
|
||||||
borderRadius?: number;
|
borderRadius?: number;
|
||||||
theme: DefaultTheme;
|
theme: DefaultTheme;
|
||||||
}) => {
|
}) => {
|
||||||
|
@ -146,6 +156,7 @@ const SessionSvg = (props: {
|
||||||
glowDuration: props.glowDuration,
|
glowDuration: props.glowDuration,
|
||||||
glowStartDelay: props.glowStartDelay,
|
glowStartDelay: props.glowStartDelay,
|
||||||
iconColor: props.iconColor,
|
iconColor: props.iconColor,
|
||||||
|
noScale: props.noScale,
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -166,6 +177,7 @@ export const SessionIcon = (props: SessionIconProps) => {
|
||||||
glowDuration,
|
glowDuration,
|
||||||
borderRadius,
|
borderRadius,
|
||||||
glowStartDelay,
|
glowStartDelay,
|
||||||
|
noScale,
|
||||||
} = props;
|
} = props;
|
||||||
let { iconSize, iconRotation } = props;
|
let { iconSize, iconRotation } = props;
|
||||||
iconSize = iconSize || SessionIconSize.Medium;
|
iconSize = iconSize || SessionIconSize.Medium;
|
||||||
|
@ -189,6 +201,7 @@ export const SessionIcon = (props: SessionIconProps) => {
|
||||||
rotateDuration={rotateDuration}
|
rotateDuration={rotateDuration}
|
||||||
glowDuration={glowDuration}
|
glowDuration={glowDuration}
|
||||||
glowStartDelay={glowStartDelay}
|
glowStartDelay={glowStartDelay}
|
||||||
|
noScale={noScale}
|
||||||
borderRadius={borderRadius}
|
borderRadius={borderRadius}
|
||||||
iconRotation={iconRotation}
|
iconRotation={iconRotation}
|
||||||
iconColor={iconColor}
|
iconColor={iconColor}
|
||||||
|
|
|
@ -20,6 +20,9 @@ export const SessionIconButton = (props: SProps) => {
|
||||||
isSelected,
|
isSelected,
|
||||||
notificationCount,
|
notificationCount,
|
||||||
theme,
|
theme,
|
||||||
|
glowDuration,
|
||||||
|
glowStartDelay,
|
||||||
|
noScale,
|
||||||
} = props;
|
} = props;
|
||||||
const clickHandler = (e: any) => {
|
const clickHandler = (e: any) => {
|
||||||
if (props.onClick) {
|
if (props.onClick) {
|
||||||
|
@ -42,6 +45,9 @@ export const SessionIconButton = (props: SProps) => {
|
||||||
iconColor={iconColor}
|
iconColor={iconColor}
|
||||||
iconRotation={iconRotation}
|
iconRotation={iconRotation}
|
||||||
theme={themeToUSe}
|
theme={themeToUSe}
|
||||||
|
glowDuration={glowDuration}
|
||||||
|
glowStartDelay={glowStartDelay}
|
||||||
|
noScale={noScale}
|
||||||
/>
|
/>
|
||||||
{Boolean(notificationCount) && <SessionNotificationCount count={notificationCount} />}
|
{Boolean(notificationCount) && <SessionNotificationCount count={notificationCount} />}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -39,7 +39,7 @@ export interface SnodeResponse {
|
||||||
export const NEXT_NODE_NOT_FOUND_PREFIX = 'Next node not found: ';
|
export const NEXT_NODE_NOT_FOUND_PREFIX = 'Next node not found: ';
|
||||||
|
|
||||||
export const CLOCK_OUT_OF_SYNC_MESSAGE_ERROR =
|
export const CLOCK_OUT_OF_SYNC_MESSAGE_ERROR =
|
||||||
'You clock is out of sync with the network. Check your clock';
|
'Your clock is out of sync with the network. Check your clock.';
|
||||||
|
|
||||||
// Returns the actual ciphertext, symmetric key that will be used
|
// Returns the actual ciphertext, symmetric key that will be used
|
||||||
// for decryption, and an ephemeral_key to send to the next hop
|
// for decryption, and an ephemeral_key to send to the next hop
|
||||||
|
|
|
@ -216,7 +216,7 @@ describe('OnionPathsErrors', () => {
|
||||||
throw new Error('Error expected');
|
throw new Error('Error expected');
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
expect(e.message).to.equal(
|
expect(e.message).to.equal(
|
||||||
'You clock is out of sync with the network. Check your clock.'
|
'Your clock is out of sync with the network. Check your clock.'
|
||||||
);
|
);
|
||||||
// this makes sure that this call would not be retried
|
// this makes sure that this call would not be retried
|
||||||
expect(e.name).to.equal('AbortError');
|
expect(e.name).to.equal('AbortError');
|
||||||
|
@ -237,7 +237,7 @@ describe('OnionPathsErrors', () => {
|
||||||
throw new Error('Error expected');
|
throw new Error('Error expected');
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
expect(e.message).to.equal(
|
expect(e.message).to.equal(
|
||||||
'You clock is out of sync with the network. Check your clock.'
|
'Your clock is out of sync with the network. Check your clock.'
|
||||||
);
|
);
|
||||||
// this makes sure that this call would not be retried
|
// this makes sure that this call would not be retried
|
||||||
expect(e.name).to.equal('AbortError');
|
expect(e.name).to.equal('AbortError');
|
||||||
|
|
Loading…
Reference in a new issue