Skip to content

Fix createMenuPositionSidebar style #31679

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
shawnborton merged 3 commits into from
Dec 7, 2023
Merged

Fix createMenuPositionSidebar style #31679

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
13d9b14
Fix createMenuPositionSidebar style
WojtekBoman Nov 22, 2023
83478a0
Refactor createMenuPositionSidebar
WojtekBoman Nov 30, 2023
15e50b4
Increase the gap between fab and menu
WojtekBoman Dec 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions src/styles/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1336,7 +1336,7 @@ const styles = (theme: ThemeColors) =>

// The bottom of the floating action button should align with the bottom of the compose box.
// The value should be equal to the height + marginBottom + marginTop of chatItemComposeSecondaryRow
bottom: 25,
bottom: variables.fabBottom,
},

floatingActionButton: {
Expand Down Expand Up @@ -1395,7 +1395,9 @@ const styles = (theme: ThemeColors) =>
createMenuPositionSidebar: (windowHeight: number) =>
({
horizontal: 18,
vertical: windowHeight - 75,
// Menu should be displayed 12px above the floating action button.
// To achieve that sidebar must be moved by: distance from the bottom of the sidebar to the fab (variables.fabBottom) + fab height (variables.componentSizeLarge) + distance above the fab (12px)
vertical: windowHeight - (variables.fabBottom + variables.componentSizeLarge + 12),
} satisfies AnchorPosition),

createMenuPositionProfile: (windowWidth: number) =>
Expand Down
1 change: 1 addition & 0 deletions src/styles/variables.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export default {
avatarSizeMentionIcon: 16,
avatarSizeSmallSubscript: 14,
defaultAvatarPreviewSize: 360,
fabBottom: 25,

@shawnborton shawnborton Dec 1, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does this mean exactly? It's the distance of the FAB to the bottom of the screen? What was it before we made any of these changes?

@WojtekBoman WojtekBoman Dec 1, 2023

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, it's this distance. I've added this variable only to use it in a calculation of the menu position. Thanks to that it's easier to understand how we set the menu position

@shawnborton shawnborton Dec 1, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good.

fontSizeOnlyEmojis: 30,
fontSizeOnlyEmojisHeight: 35,
fontSizeSmall: getValueUsingPixelRatio(11, 17),
Expand Down