From a2310439dbbd1dbbe59c68d063305b79bc6bf18b Mon Sep 17 00:00:00 2001 From: yougotwill Date: Fri, 26 Jul 2024 15:35:01 +1000 Subject: [PATCH 1/4] fix: blocked list is now accessible on smaller screens prevent name overflow --- ts/components/MemberListItem.tsx | 8 +++-- ts/components/settings/BlockedList.tsx | 45 ++++++++++---------------- 2 files changed, 23 insertions(+), 30 deletions(-) diff --git a/ts/components/MemberListItem.tsx b/ts/components/MemberListItem.tsx index 261ffe3a42..7c64a0ea14 100644 --- a/ts/components/MemberListItem.tsx +++ b/ts/components/MemberListItem.tsx @@ -53,13 +53,15 @@ const StyledInfo = styled.div` min-width: 0; `; -const StyledName = styled.span` +const StyledName = styled.span<{ maxNameWidth?: string }>` font-weight: bold; margin-inline-start: var(--margins-md); margin-inline-end: var(--margins-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + + ${props => props.maxNameWidth && `max-width: ${props.maxNameWidth};`} `; const StyledCheckContainer = styled.div` @@ -74,6 +76,7 @@ export const MemberListItem = (props: { isZombie?: boolean; inMentions?: boolean; // set to true if we are rendering members but in the Mentions picker disableBg?: boolean; + maxNameWidth?: string; isAdmin?: boolean; // if true, we add a small crown on top of their avatar onSelect?: (pubkey: string) => void; onUnselect?: (pubkey: string) => void; @@ -88,6 +91,7 @@ export const MemberListItem = (props: { onUnselect, inMentions, disableBg, + maxNameWidth, dataTestId, } = props; @@ -114,7 +118,7 @@ export const MemberListItem = (props: { > - {memberName} + {memberName} {!inMentions && ( diff --git a/ts/components/settings/BlockedList.tsx b/ts/components/settings/BlockedList.tsx index 10b622b53a..bb4b051a43 100644 --- a/ts/components/settings/BlockedList.tsx +++ b/ts/components/settings/BlockedList.tsx @@ -6,20 +6,19 @@ import { useSet } from '../../hooks/useSet'; import { ToastUtils } from '../../session/utils'; import { BlockedNumberController } from '../../util'; import { SessionButton, SessionButtonColor } from '../basic/SessionButton'; -import { SpacerLG } from '../basic/Text'; +import { SpacerLG, SpacerSM } from '../basic/Text'; import { SessionIconButton } from '../icon'; import { MemberListItem } from '../MemberListItem'; -import { SettingsTitleAndDescription } from './SessionSettingListItem'; +import { SessionSettingsItemWrapper, SettingsTitleAndDescription } from './SessionSettingListItem'; const BlockedEntriesContainer = styled.div` - flex-shrink: 1; - overflow: auto; - min-height: 40px; - max-height: 100%; + display: flex; + flex-direction: column; + flex: 1; + width: 100%; `; const BlockedEntriesRoundedContainer = styled.div` - overflow: hidden; background: var(--background-secondary-color); border: 1px solid var(--border-color); border-radius: 16px; @@ -27,36 +26,22 @@ const BlockedEntriesRoundedContainer = styled.div` margin: 0 var(--margins-lg); `; -const BlockedContactsSection = styled.div` - display: flex; - flex-direction: column; - min-height: 80px; - - background: var(--settings-tab-background-color); - color: var(--settings-tab-text-color); - border-top: 1px solid var(--border-color); - border-bottom: 1px solid var(--border-color); - - margin-bottom: var(--margins-lg); -`; - const BlockedContactListTitle = styled.div` display: flex; justify-content: space-between; - min-height: 45px; align-items: center; `; const BlockedContactListTitleButtons = styled.div` display: flex; align-items: center; + min-height: 34px; // height of the unblock button `; -export const StyledBlockedSettingItem = styled.div<{ clickable: boolean }>` +export const StyledBlockedSettingItem = styled.div<{ clickable: boolean; expanded: boolean }>` font-size: var(--font-size-md); - padding: var(--margins-lg); - cursor: ${props => (props.clickable ? 'pointer' : 'unset')}; + ${props => props.expanded && 'padding-bottom: var(--margins-lg);'} `; const BlockedEntries = (props: { @@ -78,6 +63,7 @@ const BlockedEntries = (props: { onSelect={addToSelected} onUnselect={removeFromSelected} disableBg={true} + maxNameWidth={'33vw'} /> ); })} @@ -121,8 +107,11 @@ export const BlockedContactsList = () => { } return ( - - + + {noBlockedNumbers ? ( @@ -157,9 +146,9 @@ export const BlockedContactsList = () => { addToSelected={addToSelected} removeFromSelected={removeFromSelected} /> - + ) : null} - + ); }; From 4152e4a59d98c033f4b482018acd31105c285226 Mon Sep 17 00:00:00 2001 From: William Grant Date: Fri, 26 Jul 2024 16:08:59 +1000 Subject: [PATCH 2/4] fix: review feedback --- ts/components/MemberListItem.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ts/components/MemberListItem.tsx b/ts/components/MemberListItem.tsx index 7c64a0ea14..c6bef22fd6 100644 --- a/ts/components/MemberListItem.tsx +++ b/ts/components/MemberListItem.tsx @@ -53,7 +53,7 @@ const StyledInfo = styled.div` min-width: 0; `; -const StyledName = styled.span<{ maxNameWidth?: string }>` +const StyledName = styled.span<{ maxWidth?: string }>` font-weight: bold; margin-inline-start: var(--margins-md); margin-inline-end: var(--margins-md); @@ -61,7 +61,7 @@ const StyledName = styled.span<{ maxNameWidth?: string }>` overflow: hidden; text-overflow: ellipsis; - ${props => props.maxNameWidth && `max-width: ${props.maxNameWidth};`} + ${props => props.maxWidth && `max-width: ${props.maxWidth};`} `; const StyledCheckContainer = styled.div` @@ -118,7 +118,7 @@ export const MemberListItem = (props: { > - {memberName} + {memberName} {!inMentions && ( From 4b0b813362df7e6db0657b8a0022e581c6e1d33b Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Mon, 29 Jul 2024 10:55:54 +1000 Subject: [PATCH 3/4] fix: blocked list overflow by setting parent width correctly --- stylesheets/_modules.scss | 2 +- stylesheets/_session.scss | 2 +- stylesheets/_session_conversation.scss | 2 +- ts/components/MemberListItem.tsx | 4 +--- ts/components/SessionInboxView.tsx | 2 +- .../leftpane/LeftPaneSectionContainer.tsx | 2 +- ts/components/settings/BlockedList.tsx | 1 - ts/themes/globals.tsx | 15 ++++++++++++++- 8 files changed, 20 insertions(+), 10 deletions(-) diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index c37d708bda..744121653b 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -952,7 +952,7 @@ .module-left-pane { display: inline-flex; flex-direction: column; - width: 380px; + width: var(--left-panel-width); height: 100%; } diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index b8278f858c..0924a93920 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -503,7 +503,7 @@ label { } .session-settings { - width: 100%; + width: var(--main-panel-content-width); height: 100%; display: flex; flex-direction: column; diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index d0cf549a3e..5f35c9b345 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -53,7 +53,7 @@ flex-grow: 1; display: flex; flex-direction: column; - max-width: calc(100vw - 380px); + width: var(--main-panel-content-width); height: 100%; .selection-mode { diff --git a/ts/components/MemberListItem.tsx b/ts/components/MemberListItem.tsx index c6bef22fd6..5035323283 100644 --- a/ts/components/MemberListItem.tsx +++ b/ts/components/MemberListItem.tsx @@ -76,7 +76,6 @@ export const MemberListItem = (props: { isZombie?: boolean; inMentions?: boolean; // set to true if we are rendering members but in the Mentions picker disableBg?: boolean; - maxNameWidth?: string; isAdmin?: boolean; // if true, we add a small crown on top of their avatar onSelect?: (pubkey: string) => void; onUnselect?: (pubkey: string) => void; @@ -91,7 +90,6 @@ export const MemberListItem = (props: { onUnselect, inMentions, disableBg, - maxNameWidth, dataTestId, } = props; @@ -118,7 +116,7 @@ export const MemberListItem = (props: { > - {memberName} + {memberName} {!inMentions && ( diff --git a/ts/components/SessionInboxView.tsx b/ts/components/SessionInboxView.tsx index b4ff71b007..63b33018c6 100644 --- a/ts/components/SessionInboxView.tsx +++ b/ts/components/SessionInboxView.tsx @@ -52,7 +52,7 @@ function makeLookup(items: Array, key: string): { [key: string]: T } { moment.locale((window.i18n as any).getLocale()); const StyledGutter = styled.div` - width: 380px !important; + width: var(--left-panel-width) !important; transition: none; `; diff --git a/ts/components/leftpane/LeftPaneSectionContainer.tsx b/ts/components/leftpane/LeftPaneSectionContainer.tsx index 263d332884..beb3d1cdeb 100644 --- a/ts/components/leftpane/LeftPaneSectionContainer.tsx +++ b/ts/components/leftpane/LeftPaneSectionContainer.tsx @@ -1,7 +1,7 @@ import styled from 'styled-components'; export const LeftPaneSectionContainer = styled.div` - width: 80px; + width: var(--actions-panel-width); display: flex; flex-direction: column; align-items: center; diff --git a/ts/components/settings/BlockedList.tsx b/ts/components/settings/BlockedList.tsx index bb4b051a43..588362d741 100644 --- a/ts/components/settings/BlockedList.tsx +++ b/ts/components/settings/BlockedList.tsx @@ -63,7 +63,6 @@ const BlockedEntries = (props: { onSelect={addToSelected} onUnselect={removeFromSelected} disableBg={true} - maxNameWidth={'33vw'} /> ); })} diff --git a/ts/themes/globals.tsx b/ts/themes/globals.tsx index d0743586ca..2662d5bd45 100644 --- a/ts/themes/globals.tsx +++ b/ts/themes/globals.tsx @@ -3,7 +3,7 @@ import { hexColorToRGB } from '../util/hexColorToRGB'; import { COLORS } from './constants/colors'; // These variables are independent of the current theme -export type ThemeGlobals = { +type ThemeGlobals = { /* Fonts */ '--font-default': string; '--font-accent': string; @@ -92,6 +92,15 @@ export type ThemeGlobals = { '--right-panel-height': string; '--right-panel-attachment-width': string; '--right-panel-attachment-height': string; + + /* Left Panel */ + '--left-panel-width': string; + + /* Actions panel (the 80px of the 380px of the left pane) */ + '--actions-panel-width': string; + + /* Main panel */ + '--main-panel-content-width': string; }; // These are only set once in the global style (at root). @@ -166,6 +175,10 @@ export const THEME_GLOBALS: ThemeGlobals = { '--right-panel-attachment-width': 'calc(var(--right-panel-width) - 2 * var(--margins-2xl) - 7px)', '--right-panel-attachment-height': 'calc(var(--right-panel-height) - 2 * var(--margins-2xl) -7px)', + + '--left-panel-width': '380px', + '--actions-panel-width': '80px', + '--main-panel-content-width': 'calc(100vw - var(--left-panel-width))', }; // These should only be needed for the global style (at root). From f0836de707762167bef097ee8e04e6944d019d16 Mon Sep 17 00:00:00 2001 From: yougotwill Date: Mon, 29 Jul 2024 11:12:06 +1000 Subject: [PATCH 4/4] fix: remove unneeded maxWidth correct text alignment for enter key settings for smaller screens --- ts/components/MemberListItem.tsx | 4 +--- ts/components/basic/SessionRadioGroup.tsx | 1 + 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/ts/components/MemberListItem.tsx b/ts/components/MemberListItem.tsx index 5035323283..261ffe3a42 100644 --- a/ts/components/MemberListItem.tsx +++ b/ts/components/MemberListItem.tsx @@ -53,15 +53,13 @@ const StyledInfo = styled.div` min-width: 0; `; -const StyledName = styled.span<{ maxWidth?: string }>` +const StyledName = styled.span` font-weight: bold; margin-inline-start: var(--margins-md); margin-inline-end: var(--margins-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - - ${props => props.maxWidth && `max-width: ${props.maxWidth};`} `; const StyledCheckContainer = styled.div` diff --git a/ts/components/basic/SessionRadioGroup.tsx b/ts/components/basic/SessionRadioGroup.tsx index b0867e3d70..83518ebcbe 100644 --- a/ts/components/basic/SessionRadioGroup.tsx +++ b/ts/components/basic/SessionRadioGroup.tsx @@ -57,6 +57,7 @@ export const SessionRadioGroup = (props: Props) => { }} beforeMargins={'0 var(--margins-sm) 0 0 '} radioPosition={radioPosition} + style={{ textAlign: 'start' }} /> ); })}