From badf9d7dda0d209aed95da9701f3380e56892564 Mon Sep 17 00:00:00 2001 From: Josh Perez <60019601+josh-signal@users.noreply.github.com> Date: Thu, 21 Jul 2022 21:38:27 -0400 Subject: [PATCH] Stories improvements --- images/icons/v2/signal-connections.svg | 1 + stylesheets/_modules.scss | 3 +- stylesheets/_variables.scss | 1 + .../components/SignalConnectionsModal.scss | 12 +++++++ stylesheets/components/Stories.scss | 33 +++++++------------ stylesheets/components/StoryListItem.scss | 1 + stylesheets/components/StoryViewer.scss | 2 +- ts/components/StoryViewer.tsx | 2 +- ts/state/ducks/stories.ts | 6 ++++ ts/state/selectors/stories.ts | 9 +++-- ts/state/smart/MainHeader.tsx | 4 +-- 11 files changed, 44 insertions(+), 30 deletions(-) create mode 100644 images/icons/v2/signal-connections.svg diff --git a/images/icons/v2/signal-connections.svg b/images/icons/v2/signal-connections.svg new file mode 100644 index 000000000000..8be8cef95cfb --- /dev/null +++ b/images/icons/v2/signal-connections.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 6b226dcd2365..9356e39dec59 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -2620,6 +2620,7 @@ button.ConversationDetails__action-button { background-color: $color-accent-red; color: $color-white; display: flex; + font-size: 10px; height: 16px; justify-content: center; min-width: 16px; @@ -2627,7 +2628,7 @@ button.ConversationDetails__action-button { padding: 0 2px; position: absolute; right: -6px; - top: -6px; + top: -4px; user-select: none; z-index: $z-index-base; } diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss index e6d4258ddc43..f0ed98fa0b4b 100644 --- a/stylesheets/_variables.scss +++ b/stylesheets/_variables.scss @@ -263,6 +263,7 @@ $z-index-window-controls: 10000; // Component specific // The scroll down button should be above everything in the timeline but // popups, tooltips, toasts, and other items should stack above it. +$z-index-story-meta: 3; $z-index-scroll-down-button: 10; $z-index-stories: 97; $z-index-calling: 98; diff --git a/stylesheets/components/SignalConnectionsModal.scss b/stylesheets/components/SignalConnectionsModal.scss index 78732cd2b335..9c98103434b9 100644 --- a/stylesheets/components/SignalConnectionsModal.scss +++ b/stylesheets/components/SignalConnectionsModal.scss @@ -4,6 +4,18 @@ .SignalConnectionsModal { color: $color-gray-05; + &__icon { + @include color-svg( + '../images/icons/v2/signal-connections.svg', + $color-ultramarine-light + ); + display: block; + height: 69px; + margin: 0 auto; + margin-bottom: 24px; + width: 75px; + } + &__list { margin: 16px 0; diff --git a/stylesheets/components/Stories.scss b/stylesheets/components/Stories.scss index 487c7f8ff2e9..ca2fb450ef10 100644 --- a/stylesheets/components/Stories.scss +++ b/stylesheets/components/Stories.scss @@ -22,8 +22,10 @@ padding-top: calc(14px + var(--title-bar-drag-area-height)); &__settings { - margin-left: 24px; opacity: 1; + position: absolute; + right: 12px; + top: -6px; &::after { @include dark-theme { @@ -40,6 +42,7 @@ display: flex; justify-content: space-between; padding: 0 16px; + position: relative; &--centered { justify-content: flex-start; @@ -65,6 +68,8 @@ $color-white ); height: 22px; + position: absolute; + right: 63px; width: 22px; } @@ -72,31 +77,15 @@ @include button-reset; height: 24px; + position: absolute; width: 24px; - @include light-theme { - @include color-svg( - '../images/icons/v2/chevron-left-24.svg', - $color-gray-60 - ); - } + @include color-svg( + '../images/icons/v2/chevron-left-24.svg', + $color-white + ); @include keyboard-mode { - &:focus { - @include color-svg( - '../images/icons/v2/chevron-left-24.svg', - $color-ultramarine - ); - } - } - - @include dark-theme { - @include color-svg( - '../images/icons/v2/chevron-left-24.svg', - $color-gray-25 - ); - } - @include dark-keyboard-mode { &:hover { @include color-svg( '../images/icons/v2/chevron-left-24.svg', diff --git a/stylesheets/components/StoryListItem.scss b/stylesheets/components/StoryListItem.scss index 049d3892ca70..c25f81b23d52 100644 --- a/stylesheets/components/StoryListItem.scss +++ b/stylesheets/components/StoryListItem.scss @@ -25,6 +25,7 @@ flex: 1; flex-direction: column; margin-left: 12px; + margin-right: 12px; &--title { @include font-body-1-bold; diff --git a/stylesheets/components/StoryViewer.scss b/stylesheets/components/StoryViewer.scss index 8b16a54a4571..0e6508c7428d 100644 --- a/stylesheets/components/StoryViewer.scss +++ b/stylesheets/components/StoryViewer.scss @@ -54,7 +54,7 @@ transform: translateX(-50%); min-width: 284px; width: 56.25vh; - z-index: $z-index-above-above-base; + z-index: $z-index-story-meta; &--group-avatar { margin-left: -8px; diff --git a/ts/components/StoryViewer.tsx b/ts/components/StoryViewer.tsx index 3fec90603ed2..dc8daceff25c 100644 --- a/ts/components/StoryViewer.tsx +++ b/ts/components/StoryViewer.tsx @@ -208,7 +208,7 @@ export const StoryViewer = ({ return () => { unmountRef.current = true; }; - }); + }, []); const [styles, spring] = useSpring( () => ({ diff --git a/ts/state/ducks/stories.ts b/ts/state/ducks/stories.ts index b0592bb604a5..b9d563b2a558 100644 --- a/ts/state/ducks/stories.ts +++ b/ts/state/ducks/stories.ts @@ -906,6 +906,12 @@ export function reducer( return { ...state, isShowingStoriesView: !state.isShowingStoriesView, + selectedStoryData: state.isShowingStoriesView + ? undefined + : state.selectedStoryData, + storyViewMode: state.isShowingStoriesView + ? undefined + : state.storyViewMode, }; } diff --git a/ts/state/selectors/stories.ts b/ts/state/selectors/stories.ts index c5a64ee3464a..aeccdd7b5720 100644 --- a/ts/state/selectors/stories.ts +++ b/ts/state/selectors/stories.ts @@ -342,11 +342,14 @@ export const getStories = createSelector( } ); -export const getUnreadStoriesCount = createSelector( +export const getUnreadStorySenderCount = createSelector( getStoriesState, ({ stories }): number => { - return stories.filter(story => story.readStatus === ReadStatus.Unread) - .length; + return new Set( + stories + .filter(story => story.readStatus === ReadStatus.Unread) + .map(story => story.conversationId) + ).size; } ); diff --git a/ts/state/smart/MainHeader.tsx b/ts/state/smart/MainHeader.tsx index 1445426f80e2..c6f784fc3f24 100644 --- a/ts/state/smart/MainHeader.tsx +++ b/ts/state/smart/MainHeader.tsx @@ -17,7 +17,7 @@ import { } from '../selectors/user'; import { getMe } from '../selectors/conversations'; import { getStoriesEnabled } from '../selectors/items'; -import { getUnreadStoriesCount } from '../selectors/stories'; +import { getUnreadStorySenderCount } from '../selectors/stories'; const mapStateToProps = (state: StateType) => { const me = getMe(state); @@ -32,7 +32,7 @@ const mapStateToProps = (state: StateType) => { badge: getPreferredBadgeSelector(state)(me.badges), theme: getTheme(state), i18n: getIntl(state), - unreadStoriesCount: getUnreadStoriesCount(state), + unreadStoriesCount: getUnreadStorySenderCount(state), }; };