Stories improvements

This commit is contained in:
Josh Perez 2022-07-21 21:38:27 -04:00 committed by GitHub
parent 5dfe30d235
commit badf9d7dda
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 44 additions and 30 deletions

View file

@ -0,0 +1 @@
<svg fill="none" height="88" viewBox="0 0 88 88" width="88" xmlns="http://www.w3.org/2000/svg"><path d="m30.6876 32.2705c6.3397 0 11.6353-5.2955 11.6353-11.6352 0-6.3771-5.2956-11.6353-11.6353-11.6353-6.377 0-11.6725 5.2582-11.6725 11.6353 0 6.3397 5.2955 11.6352 11.6725 11.6352zm26.0302 0c6.3397 0 11.6352-5.2955 11.6352-11.6352 0-6.3771-5.2955-11.6353-11.6352-11.6353s-11.6353 5.2582-11.6353 11.6353c0 6.3397 5.2956 11.6352 11.6353 11.6352zm-26.0302-2.7596c-4.848 0-8.8756-4.0649-8.8756-8.8756 0-4.8481 4.0276-8.8757 8.8756-8.8757 4.8108 0 8.8383 4.0276 8.8383 8.8757 0 4.8107-4.0275 8.8756-8.8383 8.8756zm26.0302 0c-4.848 0-8.8756-4.0649-8.8756-8.8756 0-4.8481 4.0276-8.8757 8.8756-8.8757s8.8756 4.0276 8.8756 8.8757c0 4.8107-4.0276 8.8756-8.8756 8.8756zm-39.0825 26.1047c6.377 0 11.6352-5.2955 11.6352-11.6353 0-6.377-5.2582-11.6352-11.6352-11.6352-6.3398 0-11.6353 5.2582-11.6353 11.6352 0 6.3398 5.2955 11.6353 11.6353 11.6353zm52.0975 0c6.3771 0 11.6726-5.2955 11.6726-11.6353 0-6.377-5.2955-11.6352-11.6726-11.6352-6.3397 0-11.6352 5.2582-11.6352 11.6352 0 6.3398 5.2955 11.6353 11.6352 11.6353zm-52.0975-2.7596c-4.8108 0-8.87566-4.0649-8.87566-8.8757 0-4.848 4.06486-8.8756 8.87566-8.8756 4.848 0 8.8756 4.0276 8.8756 8.8756 0 4.8108-4.0276 8.8757-8.8756 8.8757zm52.0975 0c-4.8107 0-8.8756-4.0649-8.8756-8.8757 0-4.848 4.0649-8.8756 8.8756-8.8756 4.8481 0 8.8757 4.0276 8.8757 8.8756 0 4.8108-4.0276 8.8757-8.8757 8.8757zm-39.0452 26.1047c6.3397 0 11.6353-5.2955 11.6353-11.6353 0-6.377-5.2956-11.6352-11.6353-11.6352-6.377 0-11.6725 5.2582-11.6725 11.6352 0 6.3398 5.2955 11.6353 11.6725 11.6353zm26.0302 0c6.3397 0 11.6352-5.2955 11.6352-11.6353 0-6.377-5.2955-11.6352-11.6352-11.6352s-11.6353 5.2582-11.6353 11.6352c0 6.3398 5.2956 11.6353 11.6353 11.6353zm-26.0302-2.7597c-4.848 0-8.8756-4.0648-8.8756-8.8756 0-4.848 4.0276-8.8756 8.8756-8.8756 4.8108 0 8.8383 4.0276 8.8383 8.8756 0 4.8108-4.0275 8.8756-8.8383 8.8756zm26.0302 0c-4.848 0-8.8756-4.0648-8.8756-8.8756 0-4.848 4.0276-8.8756 8.8756-8.8756s8.8756 4.0276 8.8756 8.8756c0 4.8108-4.0276 8.8756-8.8756 8.8756z" fill="#000"/></svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

View file

@ -2620,6 +2620,7 @@ button.ConversationDetails__action-button {
background-color: $color-accent-red; background-color: $color-accent-red;
color: $color-white; color: $color-white;
display: flex; display: flex;
font-size: 10px;
height: 16px; height: 16px;
justify-content: center; justify-content: center;
min-width: 16px; min-width: 16px;
@ -2627,7 +2628,7 @@ button.ConversationDetails__action-button {
padding: 0 2px; padding: 0 2px;
position: absolute; position: absolute;
right: -6px; right: -6px;
top: -6px; top: -4px;
user-select: none; user-select: none;
z-index: $z-index-base; z-index: $z-index-base;
} }

View file

@ -263,6 +263,7 @@ $z-index-window-controls: 10000;
// Component specific // Component specific
// The scroll down button should be above everything in the timeline but // The scroll down button should be above everything in the timeline but
// popups, tooltips, toasts, and other items should stack above it. // popups, tooltips, toasts, and other items should stack above it.
$z-index-story-meta: 3;
$z-index-scroll-down-button: 10; $z-index-scroll-down-button: 10;
$z-index-stories: 97; $z-index-stories: 97;
$z-index-calling: 98; $z-index-calling: 98;

View file

@ -4,6 +4,18 @@
.SignalConnectionsModal { .SignalConnectionsModal {
color: $color-gray-05; 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 { &__list {
margin: 16px 0; margin: 16px 0;

View file

@ -22,8 +22,10 @@
padding-top: calc(14px + var(--title-bar-drag-area-height)); padding-top: calc(14px + var(--title-bar-drag-area-height));
&__settings { &__settings {
margin-left: 24px;
opacity: 1; opacity: 1;
position: absolute;
right: 12px;
top: -6px;
&::after { &::after {
@include dark-theme { @include dark-theme {
@ -40,6 +42,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0 16px; padding: 0 16px;
position: relative;
&--centered { &--centered {
justify-content: flex-start; justify-content: flex-start;
@ -65,6 +68,8 @@
$color-white $color-white
); );
height: 22px; height: 22px;
position: absolute;
right: 63px;
width: 22px; width: 22px;
} }
@ -72,31 +77,15 @@
@include button-reset; @include button-reset;
height: 24px; height: 24px;
position: absolute;
width: 24px; width: 24px;
@include light-theme { @include color-svg(
@include color-svg( '../images/icons/v2/chevron-left-24.svg',
'../images/icons/v2/chevron-left-24.svg', $color-white
$color-gray-60 );
);
}
@include keyboard-mode { @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 { &:hover {
@include color-svg( @include color-svg(
'../images/icons/v2/chevron-left-24.svg', '../images/icons/v2/chevron-left-24.svg',

View file

@ -25,6 +25,7 @@
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
margin-left: 12px; margin-left: 12px;
margin-right: 12px;
&--title { &--title {
@include font-body-1-bold; @include font-body-1-bold;

View file

@ -54,7 +54,7 @@
transform: translateX(-50%); transform: translateX(-50%);
min-width: 284px; min-width: 284px;
width: 56.25vh; width: 56.25vh;
z-index: $z-index-above-above-base; z-index: $z-index-story-meta;
&--group-avatar { &--group-avatar {
margin-left: -8px; margin-left: -8px;

View file

@ -208,7 +208,7 @@ export const StoryViewer = ({
return () => { return () => {
unmountRef.current = true; unmountRef.current = true;
}; };
}); }, []);
const [styles, spring] = useSpring( const [styles, spring] = useSpring(
() => ({ () => ({

View file

@ -906,6 +906,12 @@ export function reducer(
return { return {
...state, ...state,
isShowingStoriesView: !state.isShowingStoriesView, isShowingStoriesView: !state.isShowingStoriesView,
selectedStoryData: state.isShowingStoriesView
? undefined
: state.selectedStoryData,
storyViewMode: state.isShowingStoriesView
? undefined
: state.storyViewMode,
}; };
} }

View file

@ -342,11 +342,14 @@ export const getStories = createSelector(
} }
); );
export const getUnreadStoriesCount = createSelector( export const getUnreadStorySenderCount = createSelector(
getStoriesState, getStoriesState,
({ stories }): number => { ({ stories }): number => {
return stories.filter(story => story.readStatus === ReadStatus.Unread) return new Set(
.length; stories
.filter(story => story.readStatus === ReadStatus.Unread)
.map(story => story.conversationId)
).size;
} }
); );

View file

@ -17,7 +17,7 @@ import {
} from '../selectors/user'; } from '../selectors/user';
import { getMe } from '../selectors/conversations'; import { getMe } from '../selectors/conversations';
import { getStoriesEnabled } from '../selectors/items'; import { getStoriesEnabled } from '../selectors/items';
import { getUnreadStoriesCount } from '../selectors/stories'; import { getUnreadStorySenderCount } from '../selectors/stories';
const mapStateToProps = (state: StateType) => { const mapStateToProps = (state: StateType) => {
const me = getMe(state); const me = getMe(state);
@ -32,7 +32,7 @@ const mapStateToProps = (state: StateType) => {
badge: getPreferredBadgeSelector(state)(me.badges), badge: getPreferredBadgeSelector(state)(me.badges),
theme: getTheme(state), theme: getTheme(state),
i18n: getIntl(state), i18n: getIntl(state),
unreadStoriesCount: getUnreadStoriesCount(state), unreadStoriesCount: getUnreadStorySenderCount(state),
}; };
}; };