add some static glowing to the actionpanel light

This commit is contained in:
Audric Ackermann 2021-06-29 15:20:21 +10:00
parent 504a9afc0a
commit 447f862ace
No known key found for this signature in database
GPG key ID: 999F434D76324AD4
5 changed files with 32 additions and 10 deletions

View file

@ -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}
/> />

View file

@ -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}

View file

@ -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>

View file

@ -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

View file

@ -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');