Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2026-02-23 19:49:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

mobile: improve ui of side menu user section

Browse Source
This commit is contained in:
Ammar Ahmed
2024-04-25 15:29:42 +05:00
parent 3ae40c09fc
commit c94ef616a5
9 changed files with 66696 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/mobile/app/components/header/right-menus.tsx
View File

@@ -71,7 +71,7 @@ export const RightMenus = ({
testID={notesnook.ids.default.addBtn}
icon={renderedInRoute === "Trash" ? "delete" : "plus"}
iconSize={SIZE.xl}
type="shade"
type="accent"
hitSlop={{
top: 10,
right: 10,
@@ -82,7 +82,7 @@ export const RightMenus = ({
marginLeft: 10,
width: 32,
height: 32,
borderRadius: 5,
borderRadius: 100,
paddingHorizontal: 0,
borderWidth: 1,
borderColor: colors.primary.accent

29
apps/mobile/app/components/side-menu/index.tsx
View File

@@ -155,26 +155,6 @@ export const SideMenu = React.memo(
subscriptionType === SUBSCRIPTION_STATUS.BASIC ? (
<MenuItem testID={pro.name} key={pro.name} item={pro} index={0} />
) : null}
{BottomItemsList.slice(DDS.isLargeTablet() ? 0 : 1, 3).map(
(item, index) => (
<MenuItem
testID={
item.name == "Night mode"
? notesnook.ids.menu.nightmode
: item.name
}
key={item.name}
item={item}
index={index}
rightBtn={
DDS.isLargeTablet() || item.name === "Notesnook Pro"
? undefined
: BottomItemsList[0]
}
/>
)
)}
</View>
{dragging ? (
@@ -206,14 +186,7 @@ export const SideMenu = React.memo(
/>
</View>
) : (
<View
style={{
width: "100%",
paddingHorizontal: 0
}}
>
<UserStatus />
</View>
<UserStatus />
)}
</View>
</View>

93
apps/mobile/app/components/side-menu/user-status.js
View File

@@ -20,7 +20,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
import { useThemeColors } from "@notesnook/theme";
import { useNetInfo } from "@react-native-community/netinfo";
import React from "react";
import { ActivityIndicator, Image, Platform, View } from "react-native";
import {
ActivityIndicator,
Image,
Platform,
TouchableOpacity,
View
} from "react-native";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
import useSyncProgress from "../../hooks/use-sync-progress";
@@ -33,6 +39,7 @@ import { SIZE } from "../../utils/size";
import { Pressable } from "../ui/pressable";
import { TimeSince } from "../ui/time-since";
import Paragraph from "../ui/typography/paragraph";
import Navigation from "../../services/navigation";
export const UserStatus = () => {
const { colors } = useThemeColors();
@@ -53,7 +60,8 @@ export const UserStatus = () => {
alignSelf: "center",
paddingBottom: Platform.OS === "ios" ? insets.bottom / 2 : null,
borderTopWidth: 1,
borderTopColor: colors.primary.border
borderTopColor: colors.primary.border,
backgroundColor: colors.primary.background
}}
>
<View
@@ -64,13 +72,9 @@ export const UserStatus = () => {
}}
>
<Pressable
onPress={async () => {
if (user) {
Sync.run();
} else {
tabBarRef.current?.closeDrawer();
eSendEvent(eOpenLoginDialog);
}
onPress={() => {
Navigation.navigate("Settings");
tabBarRef.current.closeDrawer();
}}
type="plain"
style={{
@@ -78,7 +82,8 @@ export const UserStatus = () => {
justifyContent: "flex-start",
padding: 12,
borderRadius: 0,
alignItems: "center"
alignItems: "center",
gap: 10
}}
>
{userProfile?.profilePicture ? (
@@ -89,8 +94,7 @@ export const UserStatus = () => {
style={{
width: 35,
height: 35,
borderRadius: 100,
marginRight: 10
borderRadius: 100
}}
/>
) : null}
@@ -102,9 +106,7 @@ export const UserStatus = () => {
}}
>
<Paragraph
style={{
flexWrap: "wrap"
}}
numberOfLines={1}
size={SIZE.sm}
color={colors.primary.heading}
>
@@ -113,9 +115,7 @@ export const UserStatus = () => {
: lastSyncStatus === SyncStatus.Failed
? "Sync failed, tap to retry"
: syncing
? `Syncing your notes${
progress ? ` (${progress.current})` : ""
}`
? `Syncing ${progress ? `(${progress.current})` : ""}`
: !userProfile?.fullName
? "Tap to sync"
: userProfile.fullName}
@@ -162,25 +162,56 @@ export const UserStatus = () => {
</Paragraph>
</View>
{user ? (
syncing ? (
<ActivityIndicator color={colors.primary.accent} size={SIZE.xl} />
) : lastSyncStatus === SyncStatus.Failed ? (
<Icon
color={colors.error.icon}
name="sync-alert"
size={SIZE.lg}
allowFontScaling
/>
<Pressable
style={{
borderRadius: 100,
width: 40,
height: 40
}}
hitSlop={{
top: 10,
bottom: 10,
left: 20
}}
onPress={() => {
if (user) {
Sync.run();
} else {
tabBarRef.current?.closeDrawer();
eSendEvent(eOpenLoginDialog);
}
}}
>
{user ? (
syncing ? (
<ActivityIndicator
color={colors.primary.accent}
size={SIZE.xl}
/>
) : lastSyncStatus === SyncStatus.Failed ? (
<Icon
color={colors.error.icon}
name="sync-alert"
size={SIZE.lg}
allowFontScaling
/>
) : (
<Icon
allowFontScaling
color={colors.primary.accent}
name="sync"
size={SIZE.lg}
/>
)
) : (
<Icon
allowFontScaling
color={colors.primary.accent}
name="sync"
size={SIZE.lg}
name="login"
/>
)
) : null}
)}
</Pressable>
</Pressable>
</View>
</View>

18
apps/mobile/app/navigation/tabs-holder.js
View File

@@ -165,9 +165,7 @@ const _TabsHolder = () => {
_deviceMode === "smallTablet"
? dimensions.width -
valueLimiter(dimensions.width * 0.4, 300, 450)
: dimensions.width > 1100
? dimensions.width * 0.55
: dimensions.width * 0.5,
: dimensions.width * 0.48,
zIndex: null,
paddingHorizontal: 0
}
@@ -258,9 +256,7 @@ const _TabsHolder = () => {
position: "relative",
width:
current === "tablet"
? size.width > 1100
? size.width * 0.55
: size.width * 0.5
? size.width * 0.48
: current === "smallTablet"
? size.width - valueLimiter(size.width * 0.4, 300, 450)
: size.width,
@@ -372,15 +368,9 @@ const _TabsHolder = () => {
editor: dimensions.width - valueLimiter(dimensions.width * 0.4, 300, 450)
},
tablet: {
sidebar:
dimensions.width > 1100
? dimensions.width * 0.15
: dimensions.width * 0.2,
sidebar: dimensions.width * 0.22,
list: dimensions.width * 0.3,
editor:
dimensions.width > 1100
? dimensions.width * 0.55
: dimensions.width * 0.5
editor: dimensions.width * 0.48
}
};

2
apps/mobile/app/screens/settings/settings-data.tsx
View File

@@ -456,7 +456,7 @@ export const settingsGroups: SettingSection[] = [
},
{
id: "background-sync",
name: "Background sync (Experimental)",
name: "Background sync (experimental)",
description:
"Periodically wake up the app in background to sync your notes from other devices.",
type: "switch",

19
apps/mobile/app/screens/settings/user-section.js
View File

@@ -104,7 +104,7 @@ const onChangePicture = () => {
const SettingsUserSection = ({ item }) => {
const { colors } = useThemeColors();
const user = useUserStore((state) => state.user);
const [user, premium] = useUserStore((state) => [state.user, state.premium]);
const lastSynced = useUserStore((state) => state.lastSynced);
const lastSyncStatus = useUserStore((state) => state.lastSyncStatus);
const { isInternetReachable } = useNetInfo();
@@ -172,17 +172,20 @@ const SettingsUserSection = ({ item }) => {
alignItems: "center"
}}
>
<Heading color={colors.primary.accent} size={SIZE.sm}>
{SUBSCRIPTION_STATUS_STRINGS[
user.subscription?.type
]?.toUpperCase() || "Basic"}
</Heading>
{premium ? (
<Heading color={colors.primary.accent} size={SIZE.sm}>
{SUBSCRIPTION_STATUS_STRINGS[
user.subscription?.type
]?.toUpperCase() || "Basic"}
</Heading>
) : null}
<Paragraph
onPress={() => {
presentDialog({
title: "Set name",
paragraph: "Set your full name",
title: "Set your full name",
paragraph:
"Your name is end-to-end encrypted and only visible to you.",
positiveText: "Save",
input: true,
inputPlaceholder: "Enter your full name",

BIN
apps/mobile/native/fonts/MaterialCommunityIcons.ttf
View File

Binary file not shown.

66617
apps/mobile/patches/react-native-vector-icons+9.2.0.patch
View File

File diff suppressed because one or more lines are too long

3
apps/mobile/scripts/optimize-fonts.mjs
View File

@@ -79,7 +79,8 @@ const EXTRA_ICON_NAMES = [
"vector-link",
"notebook-plus",
"arrow-right-bold-box-outline",
"arrow-up-bold"
"arrow-up-bold",
"login"
];
const __filename = fileURLToPath(import.meta.url);