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}
|
||||
iconColor={iconColor}
|
||||
onClick={handleClick}
|
||||
glowDuration={10}
|
||||
glowStartDelay={0}
|
||||
noScale={true}
|
||||
isSelected={isSelected}
|
||||
theme={theme}
|
||||
/>
|
||||
|
|
|
@ -12,6 +12,7 @@ export type SessionIconProps = {
|
|||
glowDuration?: number;
|
||||
borderRadius?: number;
|
||||
glowStartDelay?: number;
|
||||
noScale?: boolean;
|
||||
theme?: DefaultTheme;
|
||||
};
|
||||
|
||||
|
@ -46,6 +47,7 @@ type StyledSvgProps = {
|
|||
borderRadius?: number;
|
||||
glowDuration?: number;
|
||||
glowStartDelay?: number;
|
||||
noScale?: boolean;
|
||||
iconColor?: string;
|
||||
};
|
||||
|
||||
|
@ -91,16 +93,22 @@ const animation = (props: {
|
|||
glowDuration?: number;
|
||||
glowStartDelay?: number;
|
||||
iconColor?: string;
|
||||
noScale?: boolean;
|
||||
}) => {
|
||||
if (props.rotateDuration) {
|
||||
return css`
|
||||
${rotate} ${props.rotateDuration}s infinite linear;
|
||||
`;
|
||||
} else if (
|
||||
props.glowDuration !== undefined &&
|
||||
props.glowStartDelay !== undefined &&
|
||||
props.iconColor
|
||||
) {
|
||||
}
|
||||
if (props.noScale) {
|
||||
return css``;
|
||||
}
|
||||
|
||||
if (props.glowDuration === 10) {
|
||||
console.warn('scake', props);
|
||||
}
|
||||
|
||||
if (props.glowDuration !== undefined && props.glowStartDelay !== undefined && props.iconColor) {
|
||||
return css`
|
||||
${glow(
|
||||
props.iconColor,
|
||||
|
@ -108,9 +116,9 @@ const animation = (props: {
|
|||
props.glowStartDelay
|
||||
)} ${props.glowDuration}s ease infinite;
|
||||
`;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
|
||||
return;
|
||||
};
|
||||
|
||||
//tslint:disable no-unnecessary-callback-wrapper
|
||||
|
@ -119,6 +127,7 @@ const Svg = styled.svg<StyledSvgProps>`
|
|||
transform: ${props => `rotate(${props.iconRotation}deg)`};
|
||||
animation: ${props => animation(props)};
|
||||
border-radius: ${props => props.borderRadius};
|
||||
filter: ${props => (props.noScale ? `drop-shadow(0px 0px 4px ${props.iconColor})` : '')};
|
||||
`;
|
||||
//tslint:enable no-unnecessary-callback-wrapper
|
||||
|
||||
|
@ -132,6 +141,7 @@ const SessionSvg = (props: {
|
|||
rotateDuration?: number;
|
||||
glowDuration?: number;
|
||||
glowStartDelay?: number;
|
||||
noScale?: boolean;
|
||||
borderRadius?: number;
|
||||
theme: DefaultTheme;
|
||||
}) => {
|
||||
|
@ -146,6 +156,7 @@ const SessionSvg = (props: {
|
|||
glowDuration: props.glowDuration,
|
||||
glowStartDelay: props.glowStartDelay,
|
||||
iconColor: props.iconColor,
|
||||
noScale: props.noScale,
|
||||
};
|
||||
|
||||
return (
|
||||
|
@ -166,6 +177,7 @@ export const SessionIcon = (props: SessionIconProps) => {
|
|||
glowDuration,
|
||||
borderRadius,
|
||||
glowStartDelay,
|
||||
noScale,
|
||||
} = props;
|
||||
let { iconSize, iconRotation } = props;
|
||||
iconSize = iconSize || SessionIconSize.Medium;
|
||||
|
@ -189,6 +201,7 @@ export const SessionIcon = (props: SessionIconProps) => {
|
|||
rotateDuration={rotateDuration}
|
||||
glowDuration={glowDuration}
|
||||
glowStartDelay={glowStartDelay}
|
||||
noScale={noScale}
|
||||
borderRadius={borderRadius}
|
||||
iconRotation={iconRotation}
|
||||
iconColor={iconColor}
|
||||
|
|
|
@ -20,6 +20,9 @@ export const SessionIconButton = (props: SProps) => {
|
|||
isSelected,
|
||||
notificationCount,
|
||||
theme,
|
||||
glowDuration,
|
||||
glowStartDelay,
|
||||
noScale,
|
||||
} = props;
|
||||
const clickHandler = (e: any) => {
|
||||
if (props.onClick) {
|
||||
|
@ -42,6 +45,9 @@ export const SessionIconButton = (props: SProps) => {
|
|||
iconColor={iconColor}
|
||||
iconRotation={iconRotation}
|
||||
theme={themeToUSe}
|
||||
glowDuration={glowDuration}
|
||||
glowStartDelay={glowStartDelay}
|
||||
noScale={noScale}
|
||||
/>
|
||||
{Boolean(notificationCount) && <SessionNotificationCount count={notificationCount} />}
|
||||
</div>
|
||||
|
|
|
@ -39,7 +39,7 @@ export interface SnodeResponse {
|
|||
export const NEXT_NODE_NOT_FOUND_PREFIX = 'Next node not found: ';
|
||||
|
||||
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
|
||||
// for decryption, and an ephemeral_key to send to the next hop
|
||||
|
|
|
@ -216,7 +216,7 @@ describe('OnionPathsErrors', () => {
|
|||
throw new Error('Error expected');
|
||||
} catch (e) {
|
||||
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
|
||||
expect(e.name).to.equal('AbortError');
|
||||
|
@ -237,7 +237,7 @@ describe('OnionPathsErrors', () => {
|
|||
throw new Error('Error expected');
|
||||
} catch (e) {
|
||||
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
|
||||
expect(e.name).to.equal('AbortError');
|
||||
|
|
Loading…
Reference in a new issue