diff --git a/images/logo-parts/base.svg b/images/logo-parts/base.svg new file mode 100644 index 0000000000..f1c1260636 --- /dev/null +++ b/images/logo-parts/base.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/logo-parts/p1.svg b/images/logo-parts/p1.svg new file mode 100644 index 0000000000..efd7d1e9a4 --- /dev/null +++ b/images/logo-parts/p1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/logo-parts/p10.svg b/images/logo-parts/p10.svg new file mode 100644 index 0000000000..2ed31901cc --- /dev/null +++ b/images/logo-parts/p10.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/logo-parts/p11.svg b/images/logo-parts/p11.svg new file mode 100644 index 0000000000..a5046179f2 --- /dev/null +++ b/images/logo-parts/p11.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/logo-parts/p12.svg b/images/logo-parts/p12.svg new file mode 100644 index 0000000000..b6966d0259 --- /dev/null +++ b/images/logo-parts/p12.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/logo-parts/p13.svg b/images/logo-parts/p13.svg new file mode 100644 index 0000000000..0380fbd817 --- /dev/null +++ b/images/logo-parts/p13.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/logo-parts/p14.svg b/images/logo-parts/p14.svg new file mode 100644 index 0000000000..44e5eda3b4 --- /dev/null +++ b/images/logo-parts/p14.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/logo-parts/p15.svg b/images/logo-parts/p15.svg new file mode 100644 index 0000000000..f2d3a9021a --- /dev/null +++ b/images/logo-parts/p15.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/logo-parts/p16.svg b/images/logo-parts/p16.svg new file mode 100644 index 0000000000..4185c38d2b --- /dev/null +++ b/images/logo-parts/p16.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/logo-parts/p2.svg b/images/logo-parts/p2.svg new file mode 100644 index 0000000000..84255e452e --- /dev/null +++ b/images/logo-parts/p2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/logo-parts/p3.svg b/images/logo-parts/p3.svg new file mode 100644 index 0000000000..eedbb66c15 --- /dev/null +++ b/images/logo-parts/p3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/logo-parts/p4.svg b/images/logo-parts/p4.svg new file mode 100644 index 0000000000..93932c9309 --- /dev/null +++ b/images/logo-parts/p4.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/logo-parts/p5.svg b/images/logo-parts/p5.svg new file mode 100644 index 0000000000..f55f9ba1d0 --- /dev/null +++ b/images/logo-parts/p5.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/logo-parts/p6.svg b/images/logo-parts/p6.svg new file mode 100644 index 0000000000..1df6c5b30b --- /dev/null +++ b/images/logo-parts/p6.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/logo-parts/p7.svg b/images/logo-parts/p7.svg new file mode 100644 index 0000000000..a9b3d09e75 --- /dev/null +++ b/images/logo-parts/p7.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/logo-parts/p8.svg b/images/logo-parts/p8.svg new file mode 100644 index 0000000000..8940b8ddd8 --- /dev/null +++ b/images/logo-parts/p8.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/logo-parts/p9.svg b/images/logo-parts/p9.svg new file mode 100644 index 0000000000..ffc18eff9d --- /dev/null +++ b/images/logo-parts/p9.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/stylesheets/components/Inbox.scss b/stylesheets/components/Inbox.scss index 769a538e16..75a0cb15b2 100644 --- a/stylesheets/components/Inbox.scss +++ b/stylesheets/components/Inbox.scss @@ -34,3 +34,45 @@ } } } + +.Inbox__logo { + flex-shrink: 0; + + display: block; + width: 150px; + height: 150px; + margin-block: 24px; + position: relative; + + .Inbox__logo__part { + width: 100%; + height: 100%; + position: absolute; + } + + .Inbox__logo__part--base { + @include color-svg('../images/logo-parts/base.svg', $color-white); + z-index: 1; + } + + .Inbox__logo__part--segment { + opacity: 0; + z-index: 2; + } + + .Inbox__logo__part--animated { + transition: opacity 250ms, transform 250ms; + } + + @for $i from 1 through 16 { + .Inbox__logo__part--segment:nth-child(#{$i + 1}) { + @include color-svg('../images/logo-parts/p#{$i}.svg', $color-white); + transform: rotate(#{(16 - $i) * 22.5}deg); + } + } + + .Inbox__logo__part--segment:nth-child(n).Inbox__logo__part--visible { + transform: rotate(0deg); + opacity: 1; + } +} diff --git a/ts/components/Inbox.stories.tsx b/ts/components/Inbox.stories.tsx index 6ecbc01712..083d97ad82 100644 --- a/ts/components/Inbox.stories.tsx +++ b/ts/components/Inbox.stories.tsx @@ -19,10 +19,12 @@ export default { args: { i18n, hasInitialLoadCompleted: false, + isAlpha: false, isCustomizingPreferredReactions: false, }, argTypes: { daysAgo: { control: { type: 'number' } }, + isAlpha: { control: { type: 'boolean' } }, }, } satisfies Meta; diff --git a/ts/components/Inbox.tsx b/ts/components/Inbox.tsx index 6a79300d0b..c84fc443ca 100644 --- a/ts/components/Inbox.tsx +++ b/ts/components/Inbox.tsx @@ -3,6 +3,7 @@ import type { ReactNode } from 'react'; import React, { useEffect, useState, useMemo } from 'react'; +import classNames from 'classnames'; import type { LocalizerType } from '../types/Util'; import * as log from '../logging/log'; import { SECOND, DAY } from '../util/durations'; @@ -13,6 +14,7 @@ export type PropsType = { envelopeTimestamp: number | undefined; hasInitialLoadCompleted: boolean; i18n: LocalizerType; + isAlpha: boolean; isCustomizingPreferredReactions: boolean; navTabsCollapsed: boolean; onToggleNavTabsCollapse: (navTabsCollapsed: boolean) => unknown; @@ -23,11 +25,14 @@ export type PropsType = { renderStoriesTab: () => JSX.Element; }; +const PART_COUNT = 16; + export function Inbox({ firstEnvelopeTimestamp, envelopeTimestamp, hasInitialLoadCompleted, i18n, + isAlpha, isCustomizingPreferredReactions, navTabsCollapsed, onToggleNavTabsCollapse, @@ -89,7 +94,7 @@ export function Inbox({ }, [hasInitialLoadCompleted]); if (!internalHasInitialLoadCompleted) { - let loadingProgress = 0; + let loadingProgress = 100; if ( firstEnvelopeTimestamp !== undefined && envelopeTimestamp !== undefined @@ -122,11 +127,38 @@ export function Inbox({ } } + let logo: JSX.Element; + if (isAlpha) { + const parts = new Array(); + parts.push( + + ); + for (let i = 0; i < PART_COUNT; i += 1) { + const isVisible = i <= (loadingProgress * PART_COUNT) / 100; + parts.push( + + ); + } + logo =
{parts}
; + } else { + logo =
; + } + return (
-
+ {logo} + {envelopeTimestamp === undefined ? (
diff --git a/ts/state/smart/Inbox.tsx b/ts/state/smart/Inbox.tsx index a7544c4a99..40fc4aed69 100644 --- a/ts/state/smart/Inbox.tsx +++ b/ts/state/smart/Inbox.tsx @@ -4,6 +4,7 @@ import React, { memo } from 'react'; import { useSelector } from 'react-redux'; import { Inbox } from '../../components/Inbox'; +import { isAlpha } from '../../util/version'; import { getIntl } from '../selectors/user'; import { SmartCustomizingPreferredReactionsModal } from './CustomizingPreferredReactionsModal'; import { getIsCustomizingPreferredReactions } from '../selectors/preferredReactions'; @@ -58,6 +59,7 @@ export const SmartInbox = memo(function SmartInbox(): JSX.Element { firstEnvelopeTimestamp={firstEnvelopeTimestamp} hasInitialLoadCompleted={hasInitialLoadCompleted} i18n={i18n} + isAlpha={isAlpha(window.getVersion())} isCustomizingPreferredReactions={isCustomizingPreferredReactions} navTabsCollapsed={navTabsCollapsed} onToggleNavTabsCollapse={toggleNavTabsCollapse}