From 13d9b14c4370084b67e8d5bf735d82fc1ab6c748 Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Wed, 22 Nov 2023 11:01:41 +0100 Subject: [PATCH 1/3] Fix createMenuPositionSidebar style --- src/styles/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/styles.ts b/src/styles/styles.ts index c1b78a224eb3..34669b3caad6 100644 --- a/src/styles/styles.ts +++ b/src/styles/styles.ts @@ -1395,7 +1395,7 @@ const styles = (theme: ThemeColors) => createMenuPositionSidebar: (windowHeight: number) => ({ horizontal: 18, - vertical: windowHeight - 75, + vertical: windowHeight - 87, } satisfies AnchorPosition), createMenuPositionProfile: (windowWidth: number) => From 83478a0cdc86ed16d06524a818cd2b9ae273adc4 Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Thu, 30 Nov 2023 10:07:36 +0100 Subject: [PATCH 2/3] Refactor createMenuPositionSidebar --- src/styles/styles.ts | 6 ++++-- src/styles/variables.ts | 1 + 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/styles/styles.ts b/src/styles/styles.ts index 34669b3caad6..d6247f711547 100644 --- a/src/styles/styles.ts +++ b/src/styles/styles.ts @@ -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: { @@ -1395,7 +1395,9 @@ const styles = (theme: ThemeColors) => createMenuPositionSidebar: (windowHeight: number) => ({ horizontal: 18, - vertical: windowHeight - 87, + // Menu should be displayed 10px 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 (10px) + vertical: windowHeight - (variables.fabBottom + variables.componentSizeLarge + 10), } satisfies AnchorPosition), createMenuPositionProfile: (windowWidth: number) => diff --git a/src/styles/variables.ts b/src/styles/variables.ts index 18800f5748d9..65d7f6a0311d 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -43,6 +43,7 @@ export default { avatarSizeMentionIcon: 16, avatarSizeSmallSubscript: 14, defaultAvatarPreviewSize: 360, + fabBottom: 25, fontSizeOnlyEmojis: 30, fontSizeOnlyEmojisHeight: 35, fontSizeSmall: getValueUsingPixelRatio(11, 17), From 15e50b4acb5f66c063d39187a640686f9d78c383 Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Fri, 1 Dec 2023 11:16:21 +0100 Subject: [PATCH 3/3] Increase the gap between fab and menu --- src/styles/styles.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/styles/styles.ts b/src/styles/styles.ts index d6247f711547..b3cb35c2e50c 100644 --- a/src/styles/styles.ts +++ b/src/styles/styles.ts @@ -1395,9 +1395,9 @@ const styles = (theme: ThemeColors) => createMenuPositionSidebar: (windowHeight: number) => ({ horizontal: 18, - // Menu should be displayed 10px 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 (10px) - vertical: windowHeight - (variables.fabBottom + variables.componentSizeLarge + 10), + // 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) =>