From 4320bfa856cf56aef96f5c60fac12c9382099835 Mon Sep 17 00:00:00 2001 From: someone-here Date: Thu, 28 Dec 2023 22:58:53 +0530 Subject: [PATCH 1/6] New room visibility format refactor --- src/components/MenuItem.tsx | 22 +++++++++++-------- src/components/SelectionList/BaseListItem.js | 2 +- .../ValuePicker/ValueSelectorModal.js | 2 +- src/components/ValuePicker/index.js | 3 ++- src/pages/workspace/WorkspaceNewRoomPage.js | 2 +- 5 files changed, 18 insertions(+), 13 deletions(-) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index db150d55f0d2..8ac10b109579 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -523,17 +523,21 @@ function MenuItem( {error} )} - {furtherDetailsIcon && !!furtherDetails && ( + {!!furtherDetails && ( - + {furtherDetailsIcon && ( + + + + )} {furtherDetails} diff --git a/src/components/SelectionList/BaseListItem.js b/src/components/SelectionList/BaseListItem.js index 443b930d5e7a..617deeaff8f8 100644 --- a/src/components/SelectionList/BaseListItem.js +++ b/src/components/SelectionList/BaseListItem.js @@ -89,7 +89,7 @@ function BaseListItem({ textStyles={[ styles.optionDisplayName, isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText, - isUserItem || item.isSelected ? styles.sidebarLinkTextBold : null, + isUserItem || item.isSelected || item.alternateText ? styles.sidebarLinkTextBold : null, styles.pre, ]} alternateTextStyles={[styles.optionAlternateText, styles.textLabelSupporting, isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText, styles.pre]} diff --git a/src/components/ValuePicker/ValueSelectorModal.js b/src/components/ValuePicker/ValueSelectorModal.js index edc5a48d0bb3..79608edb3ef4 100644 --- a/src/components/ValuePicker/ValueSelectorModal.js +++ b/src/components/ValuePicker/ValueSelectorModal.js @@ -41,7 +41,7 @@ function ValueSelectorModal({items, selectedItem, label, isVisible, onClose, onI const [sectionsData, setSectionsData] = useState([]); useEffect(() => { - const itemsData = _.map(items, (item) => ({value: item.value, keyForList: item.value, text: item.label, isSelected: item === selectedItem})); + const itemsData = _.map(items, (item) => ({value: item.value, alternateText: item.description, keyForList: item.value, text: item.label, isSelected: item === selectedItem})); setSectionsData(itemsData); }, [items, selectedItem]); diff --git a/src/components/ValuePicker/index.js b/src/components/ValuePicker/index.js index b5ddaa7dcb73..9430b7e29723 100644 --- a/src/components/ValuePicker/index.js +++ b/src/components/ValuePicker/index.js @@ -43,7 +43,7 @@ const defaultProps = { onInputChange: () => {}, }; -function ValuePicker({value, label, items, placeholder, errorText, onInputChange, forwardedRef}) { +function ValuePicker({value, label, items, placeholder, errorText, onInputChange, furtherDetails, forwardedRef}) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const [isPickerVisible, setIsPickerVisible] = useState(false); @@ -76,6 +76,7 @@ function ValuePicker({value, label, items, placeholder, errorText, onInputChange descriptionTextStyle={descStyle} description={label} onPress={showPickerModal} + furtherDetails={furtherDetails} /> diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js index 6f86e871e8ae..f9c82ede47af 100644 --- a/src/pages/workspace/WorkspaceNewRoomPage.js +++ b/src/pages/workspace/WorkspaceNewRoomPage.js @@ -329,9 +329,9 @@ function WorkspaceNewRoomPage(props) { items={visibilityOptions} onValueChange={setVisibility} value={visibility} + furtherDetails={visibilityDescription} /> - {visibilityDescription} {isSmallScreenWidth && } From 5574e3ed7d28bde36fa800b31a4df5581b5909d5 Mon Sep 17 00:00:00 2001 From: someone-here Date: Thu, 28 Dec 2023 23:16:26 +0530 Subject: [PATCH 2/6] Fix lint --- src/components/ValuePicker/index.js | 4 ++++ src/pages/workspace/WorkspaceNewRoomPage.js | 1 - 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/ValuePicker/index.js b/src/components/ValuePicker/index.js index 9430b7e29723..a21402b9993f 100644 --- a/src/components/ValuePicker/index.js +++ b/src/components/ValuePicker/index.js @@ -29,6 +29,9 @@ const propTypes = { /** Callback to call when the input changes */ onInputChange: PropTypes.func, + /** Text to display under the main menu item */ + furtherDetails: PropTypes.string, + /** A ref to forward to MenuItemWithTopDescription */ forwardedRef: refPropTypes, }; @@ -40,6 +43,7 @@ const defaultProps = { items: {}, forwardedRef: undefined, errorText: '', + furtherDetails: undefined, onInputChange: () => {}, }; diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js index f9c82ede47af..cdcbc904d462 100644 --- a/src/pages/workspace/WorkspaceNewRoomPage.js +++ b/src/pages/workspace/WorkspaceNewRoomPage.js @@ -13,7 +13,6 @@ import KeyboardAvoidingView from '@components/KeyboardAvoidingView'; import OfflineIndicator from '@components/OfflineIndicator'; import RoomNameInput from '@components/RoomNameInput'; import ScreenWrapper from '@components/ScreenWrapper'; -import Text from '@components/Text'; import TextInput from '@components/TextInput'; import ValuePicker from '@components/ValuePicker'; import withNavigationFocus from '@components/withNavigationFocus'; From 5adf4bb1fc6d86471a282374587db1fb93e9f207 Mon Sep 17 00:00:00 2001 From: Esh Tanya Gupta <77237602+esh-g@users.noreply.github.com> Date: Fri, 29 Dec 2023 08:42:47 +0530 Subject: [PATCH 3/6] Make condition always boolean Co-authored-by: Abdelhafidh Belalia <16493223+s77rt@users.noreply.github.com> --- src/components/MenuItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 8ac10b109579..6c593227e60a 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -525,7 +525,7 @@ function MenuItem( )} {!!furtherDetails && ( - {furtherDetailsIcon && ( + {!!furtherDetailsIcon && ( Date: Fri, 29 Dec 2023 11:03:13 +0530 Subject: [PATCH 4/6] Add spacing to value picker item --- src/components/SelectionList/BaseListItem.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/SelectionList/BaseListItem.js b/src/components/SelectionList/BaseListItem.js index 617deeaff8f8..64363b4acb2d 100644 --- a/src/components/SelectionList/BaseListItem.js +++ b/src/components/SelectionList/BaseListItem.js @@ -91,6 +91,7 @@ function BaseListItem({ isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText, isUserItem || item.isSelected || item.alternateText ? styles.sidebarLinkTextBold : null, styles.pre, + item.alternateText ? styles.mb1 : null, ]} alternateTextStyles={[styles.optionAlternateText, styles.textLabelSupporting, isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText, styles.pre]} isDisabled={isDisabled} From 4b59b6467c4d4d75c1433261d1a462690d5e7a34 Mon Sep 17 00:00:00 2001 From: someone-here Date: Fri, 29 Dec 2023 20:05:16 +0530 Subject: [PATCH 5/6] Increase font size --- src/styles/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index 8cf880d6bef6..721e6666c071 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1183,7 +1183,7 @@ const styles = (theme: ThemeColors) => furtherDetailsText: { fontFamily: fontFamily.EXP_NEUE, - fontSize: variables.fontSizeSmall, + fontSize: variables.fontSizeLabel, color: theme.textSupporting, }, From 6df2f9b06533595b755b2934526a914b845f7484 Mon Sep 17 00:00:00 2001 From: someone-here Date: Sun, 31 Dec 2023 09:24:15 +0530 Subject: [PATCH 6/6] Reverse font size change --- src/styles/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index 721e6666c071..8cf880d6bef6 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1183,7 +1183,7 @@ const styles = (theme: ThemeColors) => furtherDetailsText: { fontFamily: fontFamily.EXP_NEUE, - fontSize: variables.fontSizeLabel, + fontSize: variables.fontSizeSmall, color: theme.textSupporting, },