Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-22 22:49:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

mobile: finalize sidebar and list revamp

Browse Source
This commit is contained in:
Ammar Ahmed
2025-02-13 10:41:15 +05:00
committed by Abdullah Atta
parent 7f8dc88c5a
commit 74b5e42492
169 changed files with 2272 additions and 1841 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
apps/mobile/app/assets/images/assets.js
View File

File diff suppressed because one or more lines are too long

10
apps/mobile/app/components/announcements/cta.js
View File

@@ -23,7 +23,7 @@ import { Linking, View } from "react-native";
import { useThemeColors } from "@notesnook/theme";
import { eSendEvent, presentSheet } from "../../services/event-manager";
import { eCloseAnnouncementDialog } from "../../utils/events";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import { sleep } from "../../utils/time";
import { PricingPlans } from "../premium/pricing-plans";
import SheetProvider from "../sheet-provider";
@@ -75,7 +75,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
<Button
key={item.title}
title={item.title}
fontSize={SIZE.sm}
fontSize={AppFontSize.sm}
type="transparent"
textStyle={{
textDecorationLine: "underline"
@@ -95,7 +95,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
<Button
key={item.title}
title={item.title}
fontSize={SIZE.sm}
fontSize={AppFontSize.sm}
type="plain"
onPress={() => onPress(item)}
width={null}
@@ -118,7 +118,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
<Button
key={item.title}
title={item.title}
fontSize={SIZE.md}
fontSize={AppFontSize.md}
buttonType={{
color: color ? color : colors.primary.accent,
text: color
@@ -141,7 +141,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
<Button
key={item.title}
title={item.title}
fontSize={SIZE.xs}
fontSize={AppFontSize.xs}
type="plain"
onPress={() => onPress(item)}
width={null}

4
apps/mobile/app/components/announcements/description.js
View File

@@ -18,7 +18,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import React from "react";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import Paragraph from "../ui/typography/paragraph";
import { getStyle } from "./functions";
@@ -30,7 +30,7 @@ export const Description = ({ text, style = {}, inline }) => {
...getStyle(style),
textAlign: inline ? "left" : style?.textAlign
}}
size={inline ? SIZE.sm : SIZE.md}
size={inline ? AppFontSize.sm : AppFontSize.md}
>
{text}
</Paragraph>

4
apps/mobile/app/components/announcements/subheading.js
View File

@@ -18,14 +18,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import React from "react";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import Heading from "../ui/typography/heading";
import { getStyle } from "./functions";
export const SubHeading = ({ text, style = {} }) => {
return (
<Heading
size={SIZE.md + 2}
size={AppFontSize.md + 2}
style={{
marginHorizontal: 12,
marginTop: 12,

6
apps/mobile/app/components/announcements/title.js
View File

@@ -20,7 +20,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
import React from "react";
import { View } from "react-native";
import { useMessageStore } from "../../stores/use-message-store";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import { Button } from "../ui/button";
import Heading from "../ui/typography/heading";
import { getStyle } from "./functions";
@@ -48,7 +48,7 @@ export const Title = ({ text, style = {}, inline }) => {
flexShrink: 1
}}
numberOfLines={1}
size={inline ? SIZE.md : SIZE.xl}
size={inline ? AppFontSize.md : AppFontSize.xl}
>
{inline ? text?.toUpperCase() : text}
</Heading>
@@ -67,7 +67,7 @@ export const Title = ({ text, style = {}, inline }) => {
right: 0
}}
iconSize={24}
fontSize={SIZE.xs}
fontSize={AppFontSize.xs}
style={{
borderRadius: 100,
paddingVertical: 0,

4
apps/mobile/app/components/app-lock-overlay/index.tsx
View File

@@ -44,7 +44,7 @@ import SettingsService from "../../services/settings";
import { useSettingStore } from "../../stores/use-setting-store";
import { useUserStore } from "../../stores/use-user-store";
import { NotesnookModule } from "../../utils/notesnook-module";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import { Toast } from "../toast";
import { Button } from "../ui/button";
import { IconButton } from "../ui/icon-button";
@@ -313,7 +313,7 @@ const AppLockedScreen = () => {
borderRadius: 150,
marginBottom: 10
}}
fontSize={SIZE.md}
fontSize={AppFontSize.md}
/>
</>
) : null}

18
apps/mobile/app/components/attachments/actions.tsx
View File

@@ -45,7 +45,7 @@ import {
eDBItemUpdate,
eOnLoadNote
} from "../../utils/events";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import { sleep } from "../../utils/time";
import { Dialog } from "../dialog";
import { presentDialog } from "../dialog/functions";
@@ -233,7 +233,7 @@ const Actions = ({
style={{
paddingHorizontal: 12
}}
size={SIZE.lg}
size={AppFontSize.lg}
>
{filename}
</Heading>
@@ -247,15 +247,15 @@ const Actions = ({
gap: 10
}}
>
<Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
<Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
{attachment.mimeType}
</Paragraph>
<Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
<Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
{formatBytes(attachment.size)}
</Paragraph>
{notes.length ? (
<Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
<Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
{strings.notes(notes.length)}
</Paragraph>
) : null}
@@ -268,7 +268,7 @@ const Actions = ({
context: "local"
});
}}
size={SIZE.xs}
size={AppFontSize.xs}
color={colors.secondary.paragraph}
>
{attachment.hash}
@@ -292,7 +292,7 @@ const Actions = ({
style={{
paddingHorizontal: 12
}}
size={SIZE.sm}
size={AppFontSize.sm}
>
{strings.listOf()} {strings.dataTypesPlural.note()}:
</Heading>
@@ -314,7 +314,7 @@ const Actions = ({
}}
key={item.id}
>
<Paragraph size={SIZE.xs}>{item.title}</Paragraph>
<Paragraph size={AppFontSize.xs}>{item.title}</Paragraph>
</Pressable>
))}
</>
@@ -335,7 +335,7 @@ const Actions = ({
icon={item.icon}
loading={loading?.name === item.name}
type="plain"
fontSize={SIZE.sm}
fontSize={AppFontSize.sm}
style={{
borderRadius: 0,
justifyContent: "flex-start",

13
apps/mobile/app/components/attachments/attachment-item.tsx
View File

@@ -25,7 +25,7 @@ import { TouchableOpacity, View } from "react-native";
import { db } from "../../common/database";
import { useAttachmentProgress } from "../../hooks/use-attachment-progress";
import { useDBItem } from "../../hooks/use-db-item";
import { SIZE } from "../../utils/size";
import { defaultBorderRadius, AppFontSize } from "../../utils/size";
import { IconButton } from "../ui/icon-button";
import { ProgressCircleComponent } from "../ui/svg/lazy";
import Paragraph from "../ui/typography/paragraph";
@@ -101,7 +101,7 @@ export const AttachmentItem = ({
paddingHorizontal: 2,
width: 30,
height: 30,
borderRadius: 5
borderRadius: defaultBorderRadius
}}
>
<Paragraph
@@ -124,7 +124,7 @@ export const AttachmentItem = ({
}}
>
<Paragraph
size={SIZE.sm}
size={AppFontSize.sm}
style={{
flexWrap: "wrap"
}}
@@ -136,7 +136,10 @@ export const AttachmentItem = ({
</Paragraph>
{!hideWhenNotDownloading ? (
<Paragraph color={colors.secondary.paragraph} size={SIZE.xxs}>
<Paragraph
color={colors.secondary.paragraph}
size={AppFontSize.xxs}
>
{strings.fileSize()}: {formatBytes(attachment.size)}
</Paragraph>
) : null}
@@ -159,7 +162,7 @@ export const AttachmentItem = ({
}}
>
<ProgressCircleComponent
size={SIZE.xxl}
size={AppFontSize.xxl}
progress={
currentProgress?.value ? currentProgress?.value / 100 : 0
}

10
apps/mobile/app/components/attachments/index.tsx
View File

@@ -38,7 +38,7 @@ import { downloadAttachments } from "../../common/filesystem/download-attachment
import { AttachmentGroupProgress } from "../../screens/settings/attachment-group-progress";
import { presentSheet, ToastManager } from "../../services/event-manager";
import { useAttachmentStore } from "../../stores/use-attachment-store";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import { Dialog } from "../dialog";
import { presentDialog } from "../dialog/functions";
import { Header } from "../header";
@@ -375,7 +375,7 @@ export const AttachmentDialog = ({
marginRight: 10
}}
color={colors.primary.paragraph}
size={SIZE.lg}
size={AppFontSize.lg}
onPress={onCheck}
/>
@@ -399,7 +399,7 @@ export const AttachmentDialog = ({
negativeText: strings.cancel()
});
}}
size={SIZE.lg}
size={AppFontSize.lg}
/>
</View>
</View>
@@ -474,7 +474,7 @@ export const AttachmentDialog = ({
<IconButton
type={rechecker.isWorking ? "errorShade" : "plain"}
name={rechecker.isWorking ? "close" : "check"}
size={SIZE.lg}
size={AppFontSize.lg}
color={
rechecker.isWorking ? colors.error.icon : colors.primary.accent
}
@@ -512,7 +512,7 @@ export const AttachmentDialog = ({
}
key={item.title}
title={item.title}
fontSize={SIZE.sm}
fontSize={AppFontSize.sm}
style={{
borderRadius: 100,
paddingHorizontal: 12,

27
apps/mobile/app/components/auth/common.js
View File

@@ -20,23 +20,20 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
import { createRef } from "react";
import { eSendEvent } from "../../services/event-manager";
import { eCloseLoginDialog } from "../../utils/events";
import Navigation from "../../services/navigation";
export const AuthMode = {
login: 0,
signup: 1,
welcomeSignup: 2,
trialSignup: 3
};
export const initialAuthMode = createRef(0);
export function hideAuth() {
eSendEvent(eCloseLoginDialog);
// if (initialAuthMode.current === 2) {
// Navigation.replace(
// {
// name: 'Notes'
// },
// {
// menu: true
// }
// );
// } else {
// Navigation.goBack();
// }
// tabBarRef.current?.unlock();
if (initialAuthMode.current === AuthMode.welcomeSignup) {
Navigation.replace("FluidPanelsView");
} else {
Navigation.goBack();
}
}

85
apps/mobile/app/components/auth/index.js
View File

@@ -17,35 +17,90 @@ You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { strings } from "@notesnook/intl";
import { useThemeColors } from "@notesnook/theme";
import React, { useState } from "react";
import { View } from "react-native";
import { useNavigationFocus } from "../../hooks/use-navigation-focus";
import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
import Navigation from "../../services/navigation";
import { Toast } from "../toast";
import { initialAuthMode } from "./common";
import { Button } from "../ui/button";
import { IconButton } from "../ui/icon-button";
import { AuthMode, initialAuthMode } from "./common";
import { Login } from "./login";
import { Signup } from "./signup";
export const AuthMode = {
login: 0,
signup: 1,
welcomeSignup: 2,
trialSignup: 3
};
import { useNavigationFocus } from "../../hooks/use-navigation-focus";
const Auth = ({ navigation, route }) => {
const [currentAuthMode, setCurrentAuthMode] = useState(
route?.params?.mode || AuthMode.login
);
const { colors } = useThemeColors();
const insets = useGlobalSafeAreaInsets();
initialAuthMode.current = route?.params.mode || AuthMode.login;
useNavigationFocus(navigation, {
onFocus: () => {
//tabBarRef?.current.lock();
initialAuthMode.current = route?.params.mode || AuthMode.login;
}
});
useNavigationFocus(navigation, {});
return (
<View style={{ flex: 1 }}>
<View
style={{
position: "absolute",
paddingTop: insets.top,
top: 0,
zIndex: 999,
backgroundColor: colors.secondary.background,
width: "100%"
}}
>
<View
style={{
flexDirection: "row",
alignItems: "center",
paddingHorizontal: 12,
width: "100%",
height: 50,
justifyContent:
initialAuthMode.current !== AuthMode.welcomeSignup
? "space-between"
: "flex-end"
}}
>
{initialAuthMode.current === AuthMode.welcomeSignup ? null : (
<IconButton
name="arrow-left"
onPress={() => {
if (initialAuthMode.current === 2) {
Navigation.replace("FluidPanelsView");
} else {
Navigation.goBack();
}
}}
color={colors.primary.paragraph}
/>
)}
{initialAuthMode.current !== AuthMode.welcomeSignup ? null : (
<Button
title={strings.skip()}
onPress={() => {
Navigation.goBack();
}}
iconSize={16}
type="plain"
iconPosition="right"
icon="chevron-right"
height={25}
iconStyle={{
marginTop: 2
}}
style={{
paddingHorizontal: 6
}}
/>
)}
</View>
</View>
{currentAuthMode !== AuthMode.login ? (
<Signup
changeMode={(mode) => setCurrentAuthMode(mode)}

35
apps/mobile/app/components/auth/login.js
View File

@@ -17,6 +17,7 @@ You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { strings } from "@notesnook/intl";
import { useThemeColors } from "@notesnook/theme";
import React, { useEffect, useState } from "react";
import { TouchableOpacity, View, useWindowDimensions } from "react-native";
@@ -24,10 +25,9 @@ import { SheetManager } from "react-native-actions-sheet";
import { DDS } from "../../services/device-detection";
import { eSendEvent } from "../../services/event-manager";
import Sync from "../../services/sync";
import { useSettingStore } from "../../stores/use-setting-store";
import { useUserStore } from "../../stores/use-user-store";
import { eUserLoggedIn } from "../../utils/events";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import { sleep } from "../../utils/time";
import SheetProvider from "../sheet-provider";
import { Progress } from "../sheets/progress";
@@ -38,7 +38,6 @@ import Paragraph from "../ui/typography/paragraph";
import { hideAuth } from "./common";
import { ForgotPassword } from "./forgot-password";
import { useLogin } from "./use-login";
import { strings } from "@notesnook/intl";
const LoginSteps = {
emailAuth: 1,
@@ -71,8 +70,8 @@ export const Login = ({ changeMode }) => {
}
}, 5000);
});
const deviceMode = useSettingStore((state) => state.deviceMode);
const { width, height } = useWindowDimensions();
const isTablet = width > 600;
useEffect(() => {
async () => {
setStep(LoginSteps.emailAuth);
@@ -96,6 +95,7 @@ export const Login = ({ changeMode }) => {
backgroundColor: colors.primary.background,
zIndex: 10,
width: "100%",
height: "100%",
alignSelf: "center"
}}
>
@@ -107,12 +107,12 @@ export const Login = ({ changeMode }) => {
borderBottomWidth: 0.8,
marginBottom: 12,
borderBottomColor: colors.primary.border,
alignSelf: deviceMode !== "mobile" ? "center" : undefined,
borderWidth: deviceMode !== "mobile" ? 1 : null,
borderColor: deviceMode !== "mobile" ? colors.primary.border : null,
borderRadius: deviceMode !== "mobile" ? 20 : null,
marginTop: deviceMode !== "mobile" ? 50 : null,
width: deviceMode === "mobile" ? null : "50%",
alignSelf: isTablet ? "center" : undefined,
borderWidth: isTablet ? 1 : null,
borderColor: isTablet ? colors.primary.border : null,
borderRadius: isTablet ? 20 : null,
marginTop: isTablet ? 50 : null,
width: !isTablet ? null : "50%",
minHeight: height * 0.4
}}
>
@@ -146,7 +146,7 @@ export const Login = ({ changeMode }) => {
marginTop: 10
}}
extraBold
size={SIZE.xxl}
size={AppFontSize.xxl}
>
{strings.loginToYourAccount()}
</Heading>
@@ -226,7 +226,7 @@ export const Login = ({ changeMode }) => {
textStyle={{
textDecorationLine: "underline"
}}
fontSize={SIZE.xs}
fontSize={AppFontSize.xs}
type="plain"
/>
</>
@@ -244,11 +244,10 @@ export const Login = ({ changeMode }) => {
login();
}}
style={{
width: 250,
borderRadius: 100
width: 250
}}
height={50}
fontSize={SIZE.md}
fontSize={AppFontSize.md}
type="accent"
title={!loading ? strings.continue() : null}
/>
@@ -269,7 +268,7 @@ export const Login = ({ changeMode }) => {
textStyle={{
textDecorationLine: "underline"
}}
fontSize={SIZE.xs}
fontSize={AppFontSize.xs}
type="errorShade"
/>
)}
@@ -288,12 +287,12 @@ export const Login = ({ changeMode }) => {
}}
>
<Paragraph
size={SIZE.xs + 1}
size={AppFontSize.xs + 1}
color={colors.secondary.paragraph}
>
{strings.dontHaveAccount()}{" "}
<Paragraph
size={SIZE.xs + 1}
size={AppFontSize.xs + 1}
style={{ color: colors.primary.accent }}
>
{strings.signUp()}

17
apps/mobile/app/components/auth/session-expired.js
View File

@@ -34,7 +34,7 @@ import Sync from "../../services/sync";
import { clearAllStores } from "../../stores";
import { useUserStore } from "../../stores/use-user-store";
import { eLoginSessionExpired, eUserLoggedIn } from "../../utils/events";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import { sleep } from "../../utils/time";
import { Dialog } from "../dialog";
import BaseDialog from "../dialog/base-dialog";
@@ -48,18 +48,7 @@ import Heading from "../ui/typography/heading";
import Paragraph from "../ui/typography/paragraph";
import { LoginSteps, useLogin } from "./use-login";
import { strings } from "@notesnook/intl";
function getObfuscatedEmail(email) {
if (!email) return "";
const [username, provider] = email.split("@");
if (username.length === 1) return `****@${provider}`;
return email.replace(/(.{1})(.*)(?=@)/, function (gp1, gp2, gp3) {
for (let i = 0; i < gp3.length; i++) {
gp2 += "*";
}
return gp2;
});
}
import { getObfuscatedEmail } from "../../utils/functions";
export const SessionExpired = () => {
const { colors } = useThemeColors();
@@ -193,7 +182,7 @@ export const SessionExpired = () => {
color={colors.error.icon}
size={50}
/>
<Heading size={SIZE.xxxl} color={colors.primary.heading}>
<Heading size={AppFontSize.xxxl} color={colors.primary.heading}>
{strings.sessionExpired()}
</Heading>
<Paragraph

54
apps/mobile/app/components/auth/signup.js
View File

@@ -17,6 +17,8 @@ You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { strings } from "@notesnook/intl";
import { useThemeColors } from "@notesnook/theme";
import React, { useRef, useState } from "react";
import { TouchableOpacity, View, useWindowDimensions } from "react-native";
import { db } from "../../common/database";
@@ -24,19 +26,16 @@ import { DDS } from "../../services/device-detection";
import { ToastManager } from "../../services/event-manager";
import { clearMessage, setEmailVerifyMessage } from "../../services/message";
import PremiumService from "../../services/premium";
import { useThemeColors } from "@notesnook/theme";
import SettingsService from "../../services/settings";
import { useUserStore } from "../../stores/use-user-store";
import { openLinkInBrowser } from "../../utils/functions";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import { sleep } from "../../utils/time";
import { Button } from "../ui/button";
import Input from "../ui/input";
import Heading from "../ui/typography/heading";
import Paragraph from "../ui/typography/paragraph";
import { hideAuth } from "./common";
import { useSettingStore } from "../../stores/use-setting-store";
import SettingsService from "../../services/settings";
import { strings } from "@notesnook/intl";
export const Signup = ({ changeMode, trial }) => {
const { colors } = useThemeColors();
@@ -50,7 +49,8 @@ export const Signup = ({ changeMode, trial }) => {
const [loading, setLoading] = useState(false);
const setUser = useUserStore((state) => state.setUser);
const setLastSynced = useUserStore((state) => state.setLastSynced);
const deviceMode = useSettingStore((state) => state.deviceMode);
const isTablet = width > 600;
const { width, height } = useWindowDimensions();
const validateInfo = () => {
if (!password.current || !email.current || !confirmPassword.current) {
@@ -103,9 +103,8 @@ export const Signup = ({ changeMode, trial }) => {
style={{
borderRadius: DDS.isTab ? 5 : 0,
backgroundColor: colors.primary.background,
zIndex: 10,
width: "100%",
alignSelf: "center"
height: "100%"
}}
>
<View
@@ -116,12 +115,12 @@ export const Signup = ({ changeMode, trial }) => {
marginBottom: 20,
borderBottomWidth: 0.8,
borderBottomColor: colors.primary.border,
alignSelf: deviceMode !== "mobile" ? "center" : undefined,
borderWidth: deviceMode !== "mobile" ? 1 : null,
borderColor: deviceMode !== "mobile" ? colors.primary.border : null,
borderRadius: deviceMode !== "mobile" ? 20 : null,
marginTop: deviceMode !== "mobile" ? 50 : null,
width: deviceMode === "mobile" ? null : "50%",
alignSelf: isTablet ? "center" : undefined,
borderWidth: isTablet ? 1 : null,
borderColor: isTablet ? colors.primary.border : null,
borderRadius: isTablet ? 20 : null,
marginTop: isTablet ? 50 : null,
width: !isTablet ? null : "50%",
minHeight: height * 0.4
}}
>
@@ -155,7 +154,7 @@ export const Signup = ({ changeMode, trial }) => {
marginBottom: 25,
marginTop: 10
}}
size={SIZE.xxl}
size={AppFontSize.xxl}
>
{strings.createYourAccount()}
</Heading>
@@ -233,12 +232,12 @@ export const Signup = ({ changeMode, trial }) => {
style={{
marginBottom: 25
}}
size={SIZE.xs}
size={AppFontSize.xs}
color={colors.secondary.paragraph}
>
{strings.signupAgreement[0]()}
<Paragraph
size={SIZE.xs}
size={AppFontSize.xs}
onPress={() => {
openLinkInBrowser("https://notesnook.com/tos", colors);
}}
@@ -247,11 +246,12 @@ export const Signup = ({ changeMode, trial }) => {
}}
color={colors.primary.accent}
>
{" "}
{strings.signupAgreement[1]()}
</Paragraph>
</Paragraph>{" "}
{strings.signupAgreement[2]()}
<Paragraph
size={SIZE.xs}
size={AppFontSize.xs}
onPress={() => {
openLinkInBrowser("https://notesnook.com/privacy", colors);
}}
@@ -260,8 +260,9 @@ export const Signup = ({ changeMode, trial }) => {
}}
color={colors.primary.accent}
>
{" "}
{strings.signupAgreement[3]()}
</Paragraph>
</Paragraph>{" "}
{strings.signupAgreement[4]()}
</Paragraph>
@@ -270,11 +271,9 @@ export const Signup = ({ changeMode, trial }) => {
type="accent"
loading={loading}
onPress={signup}
fontSize={SIZE.md}
fontSize={AppFontSize.md}
style={{
marginRight: 12,
width: 250,
borderRadius: 100
width: 250
}}
/>
@@ -290,10 +289,13 @@ export const Signup = ({ changeMode, trial }) => {
paddingVertical: 12
}}
>
<Paragraph size={SIZE.xs + 1} color={colors.secondary.paragraph}>
<Paragraph
size={AppFontSize.xs + 1}
color={colors.secondary.paragraph}
>
{strings.alreadyHaveAccount()}{" "}
<Paragraph
size={SIZE.xs + 1}
size={AppFontSize.xs + 1}
style={{ color: colors.primary.accent }}
>
{strings.login()}

6
apps/mobile/app/components/auth/two-factor.js
View File

@@ -30,7 +30,7 @@ import {
ToastManager
} from "../../services/event-manager";
import { eCloseSheet } from "../../utils/events";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import { Button } from "../ui/button";
import { IconButton } from "../ui/icon-button";
import Input from "../ui/input";
@@ -205,7 +205,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
onSubmitEditing={onNext}
caretHidden
inputStyle={{
fontSize: SIZE.lg,
fontSize: AppFontSize.lg,
height: 60,
textAlign: "center",
letterSpacing: 10,
@@ -288,7 +288,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
flexShrink: 1
}}
>
<Paragraph size={SIZE.md}>{item.title}</Paragraph>
<Paragraph size={AppFontSize.md}>{item.title}</Paragraph>
</View>
</Pressable>
))}

4
apps/mobile/app/components/container/floating-button.tsx
View File

@@ -33,7 +33,7 @@ import { editorState } from "../../screens/editor/tiptap/utils";
import { useSelectionStore } from "../../stores/use-selection-store";
import { useSettingStore } from "../../stores/use-setting-store";
import { getElevationStyle } from "../../utils/elevation";
import { SIZE, normalize } from "../../utils/size";
import { AppFontSize, normalize } from "../../utils/size";
import { DefaultAppStyles } from "../../utils/styles";
interface FloatingButtonProps {
@@ -148,7 +148,7 @@ const FloatingButton = ({
: "plus"
}
color={colors.primary.accent}
size={SIZE.xxxl}
size={AppFontSize.xxxl}
/>
</View>
</TouchableOpacity>

17
apps/mobile/app/components/delay-layout/default-placeholder.tsx
View File

@@ -23,6 +23,7 @@ import { useMessageStore } from "../../stores/use-message-store";
import { useThemeColors } from "@notesnook/theme";
import { ColorValues } from "../../utils/colors";
import { hexToRGBA } from "../../utils/colors";
import { defaultBorderRadius } from "../../utils/size";
export const DefaultPlaceholder = ({ color }: { color: string }) => {
const { colors } = useThemeColors();
@@ -59,7 +60,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
width: 150,
height: 20,
backgroundColor: colors.primary.hover,
borderRadius: 5,
borderRadius: defaultBorderRadius,
marginBottom: 10
}}
/>
@@ -68,7 +69,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
width: 250,
height: 14,
backgroundColor: colors.primary.hover,
borderRadius: 5
borderRadius: defaultBorderRadius
}}
/>
@@ -111,7 +112,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
width: 150,
height: 12,
backgroundColor: colors.secondary.background,
borderRadius: 5,
borderRadius: defaultBorderRadius,
marginBottom: 10
}}
/>
@@ -120,7 +121,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
width: 250,
height: 16,
backgroundColor: colors.secondary.background,
borderRadius: 5
borderRadius: defaultBorderRadius
}}
/>
</View>
@@ -179,7 +180,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
width: 200,
height: 16,
backgroundColor: colors.secondary.background,
borderRadius: 5
borderRadius: defaultBorderRadius
}}
/>
<View
@@ -187,7 +188,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
width: "85%",
height: 13,
backgroundColor: colors.secondary.background,
borderRadius: 5,
borderRadius: defaultBorderRadius,
marginTop: 10
}}
/>
@@ -203,7 +204,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
width: 50,
height: 10,
backgroundColor: colors.secondary.background,
borderRadius: 5
borderRadius: defaultBorderRadius
}}
/>
<View
@@ -211,7 +212,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
width: 60,
height: 10,
backgroundColor: colors.secondary.background,
borderRadius: 5,
borderRadius: defaultBorderRadius,
marginLeft: 10
}}
/>

11
apps/mobile/app/components/delay-layout/settings-placeholder.tsx
View File

@@ -20,6 +20,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
import React from "react";
import { View } from "react-native";
import { useThemeColors } from "@notesnook/theme";
import { defaultBorderRadius } from "../../utils/size";
export const SettingsPlaceholder = () => {
const { colors } = useThemeColors();
@@ -31,7 +32,7 @@ export const SettingsPlaceholder = () => {
width: 100,
height: 12,
backgroundColor: colors.primary.shade,
borderRadius: 5,
borderRadius: defaultBorderRadius,
marginLeft: 12,
marginBottom: 12
}}
@@ -62,7 +63,7 @@ export const SettingsPlaceholder = () => {
width: 150,
height: 12,
backgroundColor: colors.secondary.background,
borderRadius: 5,
borderRadius: defaultBorderRadius,
marginBottom: 10
}}
/>
@@ -71,7 +72,7 @@ export const SettingsPlaceholder = () => {
width: 250,
height: 16,
backgroundColor: colors.secondary.background,
borderRadius: 5
borderRadius: defaultBorderRadius
}}
/>
</View>
@@ -104,7 +105,7 @@ export const SettingsPlaceholder = () => {
width: 150,
height: 12,
backgroundColor: colors.secondary.background,
borderRadius: 5,
borderRadius: defaultBorderRadius,
marginBottom: 10
}}
/>
@@ -113,7 +114,7 @@ export const SettingsPlaceholder = () => {
width: 250,
height: 16,
backgroundColor: colors.secondary.background,
borderRadius: 5
borderRadius: defaultBorderRadius
}}
/>
</View>

6
apps/mobile/app/components/dialog/base-dialog.tsx
View File

@@ -17,6 +17,7 @@ You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { ScopedThemeProvider } from "@notesnook/theme";
import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
import {
ColorValue,
@@ -30,11 +31,8 @@ import {
} from "react-native";
import useIsFloatingKeyboard from "../../hooks/use-is-floating-keyboard";
import { useSettingStore } from "../../stores/use-setting-store";
import { BouncingView } from "../ui/transitions/bouncing-view";
import { ScopedThemeProvider } from "@notesnook/theme";
import SettingsService from "../../services/settings";
import { useUserStore } from "../../stores/use-user-store";
import { useAppState } from "../../hooks/use-app-state";
import { BouncingView } from "../ui/transitions/bouncing-view";
export interface BaseDialogProps extends PropsWithChildren {
animation?: "fade" | "none" | "slide" | undefined;

13
apps/mobile/app/components/dialog/dialog-buttons.js
View File

@@ -22,7 +22,7 @@ import { ActivityIndicator, StyleSheet, View } from "react-native";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import { notesnook } from "../../../e2e/test.ids";
import { useThemeColors } from "@notesnook/theme";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import { Button } from "../ui/button";
import Paragraph from "../ui/typography/paragraph";
import { getColorLinearShade } from "../../utils/colors";
@@ -57,7 +57,10 @@ const DialogButtons = ({
]}
>
{loading ? (
<ActivityIndicator color={colors.primary.accent} size={SIZE.lg} />
<ActivityIndicator
color={colors.primary.accent}
size={AppFontSize.lg}
/>
) : doneText ? (
<View
style={{
@@ -68,7 +71,7 @@ const DialogButtons = ({
<Icon
color={colors.primary.accent}
name="check-circle-outline"
size={SIZE.md}
size={AppFontSize.md}
/>
<Paragraph color={colors.primary.accent}>{" " + doneText}</Paragraph>
</View>
@@ -84,7 +87,7 @@ const DialogButtons = ({
>
<Button
onPress={onPressNegative}
fontSize={SIZE.md}
fontSize={AppFontSize.md}
testID={notesnook.ids.default.dialog.no}
type="plain"
bold
@@ -93,7 +96,7 @@ const DialogButtons = ({
{onPressPositive ? (
<Button
onPress={onPressPositive}
fontSize={SIZE.md}
fontSize={AppFontSize.md}
testID={notesnook.ids.default.dialog.yes}
style={{
marginLeft: 10

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

@@ -20,7 +20,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
import React from "react";
import { Text, View, ViewStyle } from "react-native";
import { useThemeColors } from "@notesnook/theme";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import { Button } from "../ui/button";
import { PressableProps } from "../ui/pressable";
import Heading from "../ui/typography/heading";
@@ -82,7 +82,7 @@ const DialogHeader = ({
>
<Heading
style={{ textAlign: centered ? "center" : "left" }}
size={SIZE.lg}
size={AppFontSize.lg}
>
{title}{" "}
{titlePart ? (

4
apps/mobile/app/components/dialog/index.js
View File

@@ -39,7 +39,7 @@ import { Button } from "../ui/button";
import { getContainerBorder } from "../../utils/colors";
import { Notice } from "../ui/notice";
import { strings } from "@notesnook/intl";
import { br } from "../../utils/size";
import { defaultBorderRadius } from "../../utils/size";
export const Dialog = ({ context = "global" }) => {
const { colors } = useThemeColors();
@@ -126,7 +126,7 @@ export const Dialog = ({ context = "global" }) => {
...getElevationStyle(5),
width: DDS.isTab ? 400 : "85%",
maxHeight: 450,
borderRadius: br,
borderRadius: defaultBorderRadius,
backgroundColor: colors.primary.background,
paddingTop: 12,
...getContainerBorder(colors.primary.border, 0.5),

6
apps/mobile/app/components/dialogs/applock-password/index.tsx
View File

@@ -39,7 +39,7 @@ import {
eCloseAppLocKPasswordDailog,
eOpenAppLockPasswordDialog
} from "../../../utils/events";
import { SIZE } from "../../../utils/size";
import { AppFontSize } from "../../../utils/size";
import { sleep } from "../../../utils/time";
import BaseDialog from "../../dialog/base-dialog";
import DialogButtons from "../../dialog/dialog-buttons";
@@ -192,7 +192,7 @@ export const AppLockPassword = () => {
height: 25,
marginRight: 5
}}
size={SIZE.lg}
size={AppFontSize.lg}
/>
)
}
@@ -248,7 +248,7 @@ export const AppLockPassword = () => {
setSecureTextEntry(true);
});
}}
iconSize={SIZE.lg}
iconSize={AppFontSize.lg}
type="plain"
iconColor={
accountPass ? colors.primary.accent : colors.primary.icon

8
apps/mobile/app/components/dialogs/attach-image-dialog/index.tsx
View File

@@ -27,7 +27,7 @@ import {
import { Image as ImageType } from "react-native-image-crop-picker";
import { useThemeColors } from "@notesnook/theme";
import { presentSheet } from "../../../services/event-manager";
import { SIZE } from "../../../utils/size";
import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
import { Button } from "../../ui/button";
import { IconButton } from "../../ui/icon-button";
import { Notice } from "../../ui/notice";
@@ -80,7 +80,7 @@ export default function AttachImage({
style={{
width: 100,
height: 100,
borderRadius: 5,
borderRadius: defaultBorderRadius,
backgroundColor: "black",
marginRight: 6
}}
@@ -105,7 +105,7 @@ export default function AttachImage({
}}
>
<IconButton
size={SIZE.lg}
size={AppFontSize.lg}
name={compress ? "checkbox-marked" : "checkbox-blank-outline"}
color={compress ? colors.primary.accent : colors.primary.icon}
style={{
@@ -122,7 +122,7 @@ export default function AttachImage({
flexShrink: 1,
marginLeft: 3
}}
size={SIZE.sm}
size={AppFontSize.sm}
>
{strings.compress()} ({strings.recommended().toLowerCase()})
</Paragraph>

6
apps/mobile/app/components/dialogs/jump-to-section/index.tsx
View File

@@ -39,7 +39,7 @@ import {
eOpenJumpToDialog,
eScrollEvent
} from "../../../utils/events";
import { SIZE } from "../../../utils/size";
import { AppFontSize } from "../../../utils/size";
import BaseDialog from "../../dialog/base-dialog";
import { Pressable } from "../../ui/pressable";
import Paragraph from "../../ui/typography/paragraph";
@@ -158,7 +158,7 @@ const JumpToSectionDialog = () => {
>
{loading ? (
<ActivityIndicator
size={SIZE.lg}
size={AppFontSize.lg}
color={colors.primary.accent}
style={{
marginBottom: 20
@@ -196,7 +196,7 @@ const JumpToSectionDialog = () => {
}}
>
<Paragraph
size={SIZE.sm}
size={AppFontSize.sm}
color={
currentIndex === index
? colors.static.white

4
apps/mobile/app/components/dialogs/pdf-preview/index.js
View File

@@ -34,7 +34,7 @@ import {
eUnSubscribeEvent
} from "../../../services/event-manager";
import { useThemeColors } from "@notesnook/theme";
import { SIZE } from "../../../utils/size";
import { AppFontSize } from "../../../utils/size";
import { Dialog } from "../../dialog";
import BaseDialog from "../../dialog/base-dialog";
import { presentDialog } from "../../dialog/functions";
@@ -216,7 +216,7 @@ const PDFPreview = () => {
style={{
marginRight: 12
}}
size={SIZE.xxl}
size={AppFontSize.xxl}
/>
</View>

4
apps/mobile/app/components/dialogs/progress/index.tsx
View File

@@ -21,7 +21,7 @@ import { useThemeColors } from "@notesnook/theme";
import React, { useEffect } from "react";
import { View } from "react-native";
import { eSendEvent, eSubscribeEvent } from "../../../services/event-manager";
import { SIZE } from "../../../utils/size";
import { AppFontSize } from "../../../utils/size";
import { Dialog } from "../../dialog";
import BaseDialog from "../../dialog/base-dialog";
import DialogContainer from "../../dialog/dialog-container";
@@ -131,7 +131,7 @@ export default function Progress() {
textAlign: "center"
}}
color={colors.primary.paragraph}
size={SIZE.lg}
size={AppFontSize.lg}
>
{data?.title}
</Heading>

10
apps/mobile/app/components/dialogs/result/index.js
View File

@@ -27,7 +27,7 @@ import {
import { useThemeColors } from "@notesnook/theme";
import { getElevationStyle } from "../../../utils/elevation";
import { eCloseResultDialog, eOpenResultDialog } from "../../../utils/events";
import { SIZE } from "../../../utils/size";
import { AppFontSize } from "../../../utils/size";
import BaseDialog from "../../dialog/base-dialog";
import { Button } from "../../ui/button";
import Seperator from "../../ui/seperator";
@@ -78,7 +78,7 @@ const ResultDialog = () => {
}}
>
<Heading
size={SIZE.lg}
size={AppFontSize.lg}
textBreakStrategy="balanced"
style={{
alignSelf: "center",
@@ -94,12 +94,12 @@ const ResultDialog = () => {
<Paragraph
color={colors.secondary.paragraph}
size={SIZE.md}
size={AppFontSize.md}
style={{
alignSelf: "center",
textAlign: "center",
maxWidth: "80%",
lineHeight: SIZE.sm + 5
lineHeight: AppFontSize.sm + 5
}}
>
{dialogData.paragraph}
@@ -134,7 +134,7 @@ const ResultDialog = () => {
paddingHorizontal: 12
}}
onPress={close}
fontSize={SIZE.md + 2}
fontSize={AppFontSize.md + 2}
/>
</View>
</View>

12
apps/mobile/app/components/dialogs/result/pro-features.js
View File

@@ -27,7 +27,7 @@ import {
eCloseResultDialog,
eOpenPremiumDialog
} from "../../../utils/events";
import { SIZE } from "../../../utils/size";
import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
import { sleep } from "../../../utils/time";
import Paragraph from "../../ui/typography/paragraph";
export const ProFeatures = ({ count = 6 }) => {
@@ -69,11 +69,15 @@ export const ProFeatures = ({ count = 6 }) => {
paddingHorizontal: 0,
marginBottom: 10,
alignItems: "center",
borderRadius: 5,
borderRadius: defaultBorderRadius,
justifyContent: "flex-start"
}}
>
<Icon size={SIZE.lg} color={colors.primary.accent} name="check" />
<Icon
size={AppFontSize.lg}
color={colors.primary.accent}
name="check"
/>
<Paragraph style={{ marginLeft: 5, flexShrink: 1 }}>
{item.content}
</Paragraph>
@@ -86,7 +90,7 @@ export const ProFeatures = ({ count = 6 }) => {
await sleep(300);
eSendEvent(eOpenPremiumDialog);
}}
size={SIZE.xs}
size={AppFontSize.xs}
style={{
textDecorationLine: "underline",
color: colors.secondary.paragraph

4
apps/mobile/app/components/header/index.tsx
View File

@@ -28,7 +28,7 @@ import {
import { RouteName } from "../../stores/use-navigation-store";
import { useSelectionStore } from "../../stores/use-selection-store";
import { eScrollEvent } from "../../utils/events";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import { DefaultAppStyles } from "../../utils/styles";
import { IconButtonProps } from "../ui/icon-button";
import { Pressable } from "../ui/pressable";
@@ -121,7 +121,7 @@ export const Header = ({
: strings.searchInRoute(title)}
</Paragraph>
) : (
<Heading size={SIZE.lg}>{title}</Heading>
<Heading size={AppFontSize.lg}>{title}</Heading>
)}
<RightMenus rightButton={rightButton} />

6
apps/mobile/app/components/header/title.tsx
View File

@@ -25,7 +25,7 @@ import {
eUnSubscribeEvent
} from "../../services/event-manager";
import { eScrollEvent } from "../../utils/events";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import Tag from "../ui/tag";
import Heading from "../ui/typography/heading";
@@ -75,7 +75,7 @@ export const Title = ({
{!visible ? (
<Heading
numberOfLines={1}
size={SIZE.lg}
size={AppFontSize.lg}
style={{
flexWrap: "wrap",
marginTop: Platform.OS === "ios" ? -1 : 0
@@ -83,7 +83,7 @@ export const Title = ({
color={accentColor || colors.primary.heading}
>
{isTag ? (
<Heading size={SIZE.xl} color={colors.primary.accent}>
<Heading size={AppFontSize.xl} color={colors.primary.accent}>
#
</Heading>
) : null}

87
apps/mobile/app/components/intro/index.js → apps/mobile/app/components/intro/index.tsx
View File

@@ -23,31 +23,27 @@ import React from "react";
import { Linking, ScrollView, useWindowDimensions, View } from "react-native";
import { SwiperFlatList } from "react-native-swiper-flatlist";
import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
import { eSendEvent } from "../../services/event-manager";
import Navigation from "../../services/navigation";
import SettingsService from "../../services/settings";
import { useSettingStore } from "../../stores/use-setting-store";
import { getElevationStyle } from "../../utils/elevation";
import { eOpenLoginDialog } from "../../utils/events";
import { SIZE } from "../../utils/size";
import { AuthMode } from "../auth";
import { AppFontSize } from "../../utils/size";
import { Button } from "../ui/button";
import Heading from "../ui/typography/heading";
import Paragraph from "../ui/typography/paragraph";
import SettingsService from "../../services/settings";
import { AuthMode } from "../auth/common";
const Intro = ({ navigation }) => {
const Intro = () => {
const { colors } = useThemeColors();
const { width, height } = useWindowDimensions();
const deviceMode = useSettingStore((state) => state.deviceMode);
const insets = useGlobalSafeAreaInsets();
const isTablet = width > 600;
const renderItem = React.useCallback(
({ item }) => (
({ item }: { item: (typeof strings.introData)[0] }) => (
<View
style={{
justifyContent: "center",
width: deviceMode !== "mobile" ? width / 2 : width,
paddingHorizontal:
deviceMode !== "mobile" ? (width / 2) * 0.05 : width * 0.05
width: isTablet ? width / 2 : width,
paddingHorizontal: isTablet ? (width / 2) * 0.05 : width * 0.05
}}
>
<View
@@ -88,21 +84,21 @@ const Intro = ({ navigation }) => {
marginBottom: 5
}}
extraBold
size={SIZE.xxl}
size={AppFontSize.xxl}
>
{heading()}
</Heading>
))}
{item.body ? (
<Paragraph size={SIZE.sm}>{item.body()}</Paragraph>
<Paragraph size={AppFontSize.sm}>{item.body()}</Paragraph>
) : null}
{item.tesimonial ? (
<Paragraph
style={{
fontStyle: "italic",
fontSize: SIZE.lg
fontSize: AppFontSize.lg
}}
onPress={() => {
Linking.openURL(item.link);
@@ -114,31 +110,37 @@ const Intro = ({ navigation }) => {
</View>
</View>
),
[colors.primary.accent, colors.secondary.background, deviceMode, width]
[colors.primary.accent, colors.secondary.background, isTablet, width]
);
return (
<ScrollView
testID="notesnook.splashscreen"
style={{
width: "100%"
width: "100%",
backgroundColor: colors.primary.background
}}
>
<View
style={{
width: deviceMode !== "mobile" ? width / 2 : "100%",
backgroundColor: colors.secondary.background,
borderBottomWidth: 1,
borderBottomColor: colors.primary.border,
alignSelf: deviceMode !== "mobile" ? "center" : undefined,
borderWidth: deviceMode !== "mobile" ? 1 : null,
borderColor: deviceMode !== "mobile" ? colors.primary.border : null,
borderRadius: deviceMode !== "mobile" ? 20 : null,
marginTop: deviceMode !== "mobile" ? 50 : null,
paddingTop: insets.top + 10,
paddingBottom: insets.top + 10,
minHeight: height * 0.7 - (insets.top + insets.bottom)
}}
style={[
{
width: "100%",
backgroundColor: colors.secondary.background,
borderBottomWidth: 1,
borderBottomColor: colors.primary.border,
paddingTop: insets.top + 10,
paddingBottom: insets.top + 10,
minHeight: height * 0.7 - (insets.top + insets.bottom)
},
isTablet && {
width: width / 2,
alignSelf: "center",
borderWidth: 1,
borderColor: colors.primary.border,
borderRadius: 20,
marginTop: 50
}
]}
>
<SwiperFlatList
autoplay
@@ -170,23 +172,12 @@ const Intro = ({ navigation }) => {
<Button
width={250}
onPress={async () => {
eSendEvent(eOpenLoginDialog, AuthMode.welcomeSignup);
setTimeout(() => {
SettingsService.set({
introCompleted: true
});
Navigation.replace("Notes", {
canGoBack: false
});
}, 1000);
SettingsService.set({ introCompleted: true });
Navigation.push("Auth", {
mode: AuthMode.welcomeSignup
});
}}
style={{
paddingHorizontal: 24,
alignSelf: "center",
...getElevationStyle(5),
borderRadius: 100
}}
fontSize={SIZE.md}
fontSize={AppFontSize.md}
type="accent"
title={strings.getStarted()}
/>

125
apps/mobile/app/components/intro/welcome.js
View File

File diff suppressed because one or more lines are too long

24
apps/mobile/app/components/list-items/headers/notebook-header.tsx
View File

@@ -23,7 +23,7 @@ import { strings } from "@notesnook/intl";
import { useThemeColors } from "@notesnook/theme";
import React from "react";
import { View } from "react-native";
import { SIZE } from "../../../utils/size";
import { AppFontSize } from "../../../utils/size";
import { DefaultAppStyles } from "../../../utils/styles";
import AppIcon from "../../ui/AppIcon";
import Heading from "../../ui/typography/heading";
@@ -41,7 +41,7 @@ export const NotebookHeader = ({
<View
style={{
paddingHorizontal: DefaultAppStyles.GAP,
marginVertical: DefaultAppStyles.GAP,
marginTop: DefaultAppStyles.GAP,
backgroundColor: colors.secondary.background
}}
>
@@ -52,14 +52,16 @@ export const NotebookHeader = ({
paddingVertical: 25
}}
>
<AppIcon name="notebook" size={SIZE.xxl} />
<Heading size={SIZE.lg}>{notebook.title}</Heading>
<AppIcon name="notebook" size={AppFontSize.xxl} />
{notebook.description ? (
<Paragraph size={SIZE.sm} color={colors.primary.paragraph}>
{notebook.description}
</Paragraph>
) : null}
<View>
<Heading size={AppFontSize.lg}>{notebook.title}</Heading>
{notebook.description ? (
<Paragraph size={AppFontSize.sm} color={colors.primary.paragraph}>
{notebook.description}
</Paragraph>
) : null}
</View>
<View
style={{
@@ -67,11 +69,11 @@ export const NotebookHeader = ({
gap: DefaultAppStyles.GAP_SMALL
}}
>
<Paragraph size={SIZE.xxs} color={colors.secondary.paragraph}>
<Paragraph size={AppFontSize.xxs} color={colors.secondary.paragraph}>
{strings.notes(totalNotes || 0)}
</Paragraph>
<Paragraph color={colors.secondary.paragraph} size={SIZE.xxs}>
<Paragraph color={colors.secondary.paragraph} size={AppFontSize.xxs}>
{getFormattedDate(notebook.dateModified, "date-time")}
</Paragraph>
</View>

27
apps/mobile/app/components/list-items/headers/section-header.tsx
View File

@@ -21,12 +21,12 @@ import { GroupHeader, GroupOptions, ItemType } from "@notesnook/core";
import { strings } from "@notesnook/intl";
import { useThemeColors } from "@notesnook/theme";
import React from "react";
import { useWindowDimensions, View } from "react-native";
import { View } from "react-native";
import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
import { presentSheet } from "../../../services/event-manager";
import SettingsService from "../../../services/settings";
import { RouteName } from "../../../stores/use-navigation-store";
import { SIZE } from "../../../utils/size";
import { AppFontSize } from "../../../utils/size";
import { DefaultAppStyles } from "../../../utils/styles";
import Sort from "../../sheets/sort";
import { IconButton } from "../../ui/icon-button";
@@ -56,8 +56,6 @@ export const SectionHeader = React.memo<
onOpenJumpToDialog
}: SectionHeaderProps) {
const { colors } = useThemeColors();
const { fontScale } = useWindowDimensions();
const groupBy = strings.groupByStrings[groupOptions.groupBy]();
const isCompactModeEnabled = useIsCompactModeEnabled(
dataType as "note" | "notebook"
);
@@ -66,8 +64,7 @@ export const SectionHeader = React.memo<
<View
style={{
width: "100%",
paddingHorizontal: DefaultAppStyles.GAP,
marginVertical: DefaultAppStyles.GAP
paddingHorizontal: DefaultAppStyles.GAP
}}
>
<View
@@ -79,7 +76,7 @@ export const SectionHeader = React.memo<
justifyContent: "space-between",
borderBottomWidth: 1,
borderColor: colors.primary.border,
paddingBottom: DefaultAppStyles.GAP_VERTICAL
paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL
}}
>
<Pressable
@@ -94,14 +91,16 @@ export const SectionHeader = React.memo<
}}
>
<Heading
size={SIZE.sm}
size={AppFontSize.xxs}
style={{
alignSelf: "center",
textAlignVertical: "center"
}}
color={colors.primary.accent}
>
{!item.title || item.title === "" ? strings.pinned() : item.title}
{!item.title || item.title === ""
? strings.pinned().toUpperCase()
: item.title.toUpperCase()}
</Heading>
</Pressable>
@@ -120,6 +119,7 @@ export const SectionHeader = React.memo<
? "sort-ascending"
: "sort-descending"
}
color={colors.secondary.icon}
onPress={() => {
if (!screen) return;
presentSheet({
@@ -130,7 +130,7 @@ export const SectionHeader = React.memo<
width: 25,
height: 25
}}
size={SIZE.lg - 2}
size={AppFontSize.lg - 2}
/>
<IconButton
hidden={
@@ -156,19 +156,20 @@ export const SectionHeader = React.memo<
: "normal"
});
}}
size={SIZE.lg - 2}
size={AppFontSize.lg - 2}
/>
</>
) : null}
<IconButton
{/* <IconButton
style={{
width: 25,
height: 25
}}
color={colors.secondary.icon}
name={"chevron-down"}
size={SIZE.lg - 2}
/>
/> */}
</View>
</View>
</View>

82
apps/mobile/app/components/list-items/note/index.tsx
View File

@@ -32,9 +32,13 @@ import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
import useNavigationStore from "../../../stores/use-navigation-store";
import { useRelationStore } from "../../../stores/use-relation-store";
import { SIZE } from "../../../utils/size";
import { AppFontSize } from "../../../utils/size";
import { NotebooksWithDateEdited, TagsWithDateEdited } from "@notesnook/common";
import {
getFormattedDate,
NotebooksWithDateEdited,
TagsWithDateEdited
} from "@notesnook/common";
import { strings } from "@notesnook/intl";
import { notesnook } from "../../../../e2e/test.ids";
import useIsSelected from "../../../hooks/use-selected";
@@ -48,6 +52,7 @@ import { ReminderTime } from "../../ui/reminder-time";
import { TimeSince } from "../../ui/time-since";
import Heading from "../../ui/typography/heading";
import Paragraph from "../../ui/typography/paragraph";
import dayjs from "dayjs";
type NoteItemProps = {
item: Note | BaseTrashItem<Note>;
@@ -97,11 +102,27 @@ const NoteItem = ({
flexShrink: 1
}}
>
{compactMode ? null : (
<Paragraph
style={{
fontSize: AppFontSize.xxs,
color: colors.secondary.paragraph
}}
>
{getFormattedDate(
date,
dayjs(date).isBefore(dayjs().subtract(1, "day").hour(23))
? "date"
: "time"
)}
</Paragraph>
)}
{compactMode ? (
<Paragraph
numberOfLines={1}
color={color?.colorCode || primaryColors.heading}
size={SIZE.sm}
size={AppFontSize.sm}
style={{
paddingRight: 10
}}
@@ -112,7 +133,7 @@ const NoteItem = ({
<Heading
numberOfLines={1}
color={color?.colorCode || primaryColors.heading}
size={SIZE.sm}
size={AppFontSize.sm}
style={{
paddingRight: 10
}}
@@ -142,7 +163,7 @@ const NoteItem = ({
justifyContent: "flex-start",
alignItems: "center",
width: "100%",
marginTop: 5,
marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL,
columnGap: 8,
rowGap: 4,
flexWrap: "wrap"
@@ -153,7 +174,7 @@ const NoteItem = ({
{item.conflicted ? (
<Icon
name="alert-circle"
size={SIZE.sm}
size={AppFontSize.sm}
color={colors.error.accent}
/>
) : null}
@@ -162,7 +183,7 @@ const NoteItem = ({
<Icon
testID="sync-off"
name="sync-off"
size={SIZE.sm}
size={AppFontSize.sm}
color={primaryColors.icon}
/>
) : null}
@@ -171,20 +192,11 @@ const NoteItem = ({
<Icon
testID="pencil-lock"
name="pencil-lock"
size={SIZE.sm}
size={AppFontSize.sm}
color={primaryColors.icon}
/>
) : null}
<TimeSince
style={{
fontSize: SIZE.xxs,
color: colors.secondary.paragraph
}}
time={date}
updateFrequency={Date.now() - date < 60000 ? 2000 : 60000}
/>
{attachmentsCount > 0 ? (
<View
style={{
@@ -195,12 +207,12 @@ const NoteItem = ({
>
<Icon
name="attachment"
size={SIZE.sm}
size={AppFontSize.sm}
color={primaryColors.icon}
/>
<Paragraph
color={colors.secondary.paragraph}
size={SIZE.xxs}
size={AppFontSize.xxs}
>
{attachmentsCount}
</Paragraph>
@@ -211,7 +223,7 @@ const NoteItem = ({
<Icon
testID="icon-pinned"
name="pin-outline"
size={SIZE.xs}
size={AppFontSize.xs}
color={color?.colorCode || primaryColors.accent}
/>
) : null}
@@ -220,7 +232,7 @@ const NoteItem = ({
<Icon
name="lock"
testID="note-locked-icon"
size={SIZE.sm}
size={AppFontSize.sm}
color={primaryColors.icon}
/>
) : null}
@@ -229,7 +241,7 @@ const NoteItem = ({
<Icon
testID="icon-star"
name="star-outline"
size={SIZE.sm}
size={AppFontSize.sm}
color="orange"
/>
) : null}
@@ -240,9 +252,9 @@ const NoteItem = ({
disabled
color={color?.colorCode}
textStyle={{
fontSize: SIZE.xxxs
fontSize: AppFontSize.xxxs
}}
iconSize={SIZE.xxxs}
iconSize={AppFontSize.xxxs}
style={{
height: "auto"
}}
@@ -271,11 +283,11 @@ const NoteItem = ({
>
<AppIcon
name="book-outline"
size={SIZE.xxxs}
size={AppFontSize.xxxs}
color={colors.secondary.icon}
/>
<Paragraph
size={SIZE.xxxs}
size={AppFontSize.xxxs}
color={colors.secondary.paragraph}
>
{item.title}
@@ -298,7 +310,7 @@ const NoteItem = ({
}}
>
<Paragraph
size={SIZE.xxxs}
size={AppFontSize.xxxs}
color={colors.secondary.paragraph}
>
#{item.title}
@@ -312,7 +324,7 @@ const NoteItem = ({
<>
<Paragraph
color={colors.secondary.paragraph}
size={SIZE.xxs}
size={AppFontSize.xxs}
style={{
marginRight: 6
}}
@@ -326,7 +338,7 @@ const NoteItem = ({
<Paragraph
color={primaryColors.accent}
size={SIZE.xxs}
size={AppFontSize.xxs}
style={{
marginRight: 6
}}
@@ -352,7 +364,7 @@ const NoteItem = ({
style={{
marginRight: 6
}}
size={SIZE.sm}
size={AppFontSize.sm}
color={colors.error.accent}
/>
) : null}
@@ -361,7 +373,7 @@ const NoteItem = ({
<Icon
name="lock"
testID="note-locked-icon"
size={SIZE.sm}
size={AppFontSize.sm}
style={{
marginRight: 6
}}
@@ -373,7 +385,7 @@ const NoteItem = ({
<Icon
testID="icon-star"
name="star-outline"
size={SIZE.sm}
size={AppFontSize.sm}
style={{
marginRight: 6
}}
@@ -383,7 +395,7 @@ const NoteItem = ({
<TimeSince
style={{
fontSize: SIZE.xxs,
fontSize: AppFontSize.xxs,
color: colors.secondary.paragraph,
marginRight: 6
}}
@@ -398,7 +410,7 @@ const NoteItem = ({
<AppIcon
name={selected ? "checkbox-outline" : "checkbox-blank-outline"}
color={selected ? colors.selected.icon : colors.primary.icon}
size={SIZE.lg}
size={AppFontSize.lg}
/>
</>
) : (
@@ -406,7 +418,7 @@ const NoteItem = ({
testID={notesnook.listitem.menu}
color={colors.secondary.icon}
name="dots-horizontal"
size={SIZE.lg}
size={AppFontSize.lg}
onPress={() => !noOpen && Properties.present(item)}
style={{
justifyContent: "center",

24
apps/mobile/app/components/list-items/notebook/index.tsx
View File

@@ -25,7 +25,7 @@ import { View } from "react-native";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import { notesnook } from "../../../../e2e/test.ids";
import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
import { SIZE } from "../../../utils/size";
import { AppFontSize } from "../../../utils/size";
import { Properties } from "../../properties";
import { IconButton } from "../../ui/icon-button";
import Heading from "../../ui/typography/heading";
@@ -61,7 +61,7 @@ export const NotebookItem = ({
>
{compactMode ? (
<Paragraph
size={SIZE.sm}
size={AppFontSize.sm}
numberOfLines={1}
style={{
flexWrap: "wrap"
@@ -71,7 +71,7 @@ export const NotebookItem = ({
</Paragraph>
) : (
<Heading
size={SIZE.md}
size={AppFontSize.md}
numberOfLines={1}
style={{
flexWrap: "wrap"
@@ -83,7 +83,7 @@ export const NotebookItem = ({
{!item.description || compactMode ? null : (
<Paragraph
size={SIZE.sm}
size={AppFontSize.sm}
numberOfLines={2}
style={{
flexWrap: "wrap"
@@ -100,14 +100,14 @@ export const NotebookItem = ({
justifyContent: "flex-start",
alignItems: "center",
marginTop: 5,
height: SIZE.md + 2
height: AppFontSize.md + 2
}}
>
{isTrash ? (
<>
<Paragraph
color={colors.secondary.paragraph}
size={SIZE.xs}
size={AppFontSize.xs}
style={{
textAlignVertical: "center",
marginRight: 6
@@ -121,7 +121,7 @@ export const NotebookItem = ({
</Paragraph>
<Paragraph
color={colors.primary.accent}
size={SIZE.xs}
size={AppFontSize.xs}
style={{
textAlignVertical: "center",
marginRight: 6
@@ -134,7 +134,7 @@ export const NotebookItem = ({
) : (
<Paragraph
color={colors.secondary.paragraph}
size={SIZE.xs}
size={AppFontSize.xs}
style={{
marginRight: 6
}}
@@ -144,7 +144,7 @@ export const NotebookItem = ({
)}
<Paragraph
color={colors.secondary.paragraph}
size={SIZE.xs}
size={AppFontSize.xs}
style={{
marginRight: 6
}}
@@ -155,7 +155,7 @@ export const NotebookItem = ({
{item.pinned ? (
<Icon
name="pin-outline"
size={SIZE.sm}
size={AppFontSize.sm}
style={{
marginRight: 10,
marginTop: 2
@@ -176,7 +176,7 @@ export const NotebookItem = ({
<>
<Paragraph
color={colors.primary.icon}
size={SIZE.xs}
size={AppFontSize.xs}
style={{
marginRight: 6
}}
@@ -190,7 +190,7 @@ export const NotebookItem = ({
color={colors.primary.heading}
name="dots-horizontal"
testID={notesnook.ids.notebook.menu}
size={SIZE.xl}
size={AppFontSize.xl}
onPress={() => Properties.present(item)}
style={{
justifyContent: "center",

20
apps/mobile/app/components/list-items/reminder/index.tsx
View File

@@ -22,7 +22,7 @@ import React from "react";
import { View } from "react-native";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import { notesnook } from "../../../../e2e/test.ids";
import { SIZE } from "../../../utils/size";
import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
import { Properties } from "../../properties";
import ReminderSheet from "../../sheets/reminder";
import { IconButton } from "../../ui/icon-button";
@@ -62,7 +62,7 @@ const ReminderItem = React.memo(
style={{
flexWrap: "wrap"
}}
size={SIZE.md}
size={AppFontSize.md}
>
{item.title}
</Heading>
@@ -89,7 +89,7 @@ const ReminderItem = React.memo(
<View
style={{
backgroundColor: colors.secondary.background,
borderRadius: 5,
borderRadius: defaultBorderRadius,
flexDirection: "row",
paddingHorizontal: 6,
alignItems: "center",
@@ -102,11 +102,11 @@ const ReminderItem = React.memo(
>
<Icon
name="bell-off-outline"
size={SIZE.md}
size={AppFontSize.md}
color={colors.error.icon}
/>
<Paragraph
size={SIZE.xs}
size={AppFontSize.xs}
color={colors.secondary.paragraph}
style={{ marginLeft: 5 }}
>
@@ -118,7 +118,7 @@ const ReminderItem = React.memo(
<View
style={{
backgroundColor: colors.secondary.background,
borderRadius: 5,
borderRadius: defaultBorderRadius,
flexDirection: "row",
paddingHorizontal: 6,
alignItems: "center",
@@ -131,11 +131,11 @@ const ReminderItem = React.memo(
>
<Icon
name="reload"
size={SIZE.md}
size={AppFontSize.md}
color={colors.primary.accent}
/>
<Paragraph
size={SIZE.xs}
size={AppFontSize.xs}
color={colors.secondary.paragraph}
style={{ marginLeft: 5 }}
>
@@ -147,7 +147,7 @@ const ReminderItem = React.memo(
<ReminderTime
reminder={item}
checkIsActive={false}
fontSize={SIZE.xs}
fontSize={AppFontSize.xs}
style={{
justifyContent: "flex-start",
height: 25,
@@ -160,7 +160,7 @@ const ReminderItem = React.memo(
testID={notesnook.listitem.menu}
color={colors.primary.paragraph}
name="dots-horizontal"
size={SIZE.xl}
size={AppFontSize.xl}
onPress={() => Properties.present(item, isSheet)}
style={{
justifyContent: "center",

4
apps/mobile/app/components/list-items/selection-wrapper/selection.tsx
View File

@@ -24,7 +24,7 @@ import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
import useIsSelected from "../../../hooks/use-selected";
import { useSelectionStore } from "../../../stores/use-selection-store";
import { SIZE } from "../../../utils/size";
import { AppFontSize } from "../../../utils/size";
import { Item, TrashItem } from "@notesnook/core";
export const SelectionIcon = ({ item }: { item: Item }) => {
@@ -52,7 +52,7 @@ export const SelectionIcon = ({ item }: { item: Item }) => {
>
{selected ? (
<Icon
size={compactMode ? SIZE.xl - 2 : SIZE.xl}
size={compactMode ? AppFontSize.xl - 2 : AppFontSize.xl}
color={selected ? colors.selected.accent : colors.primary.icon}
name={"check"}
/>

10
apps/mobile/app/components/list-items/tag/index.tsx
View File

@@ -23,7 +23,7 @@ import React from "react";
import { View } from "react-native";
import { notesnook } from "../../../../e2e/test.ids";
import { TaggedNotes } from "../../../screens/notes/tagged";
import { SIZE } from "../../../utils/size";
import { AppFontSize } from "../../../utils/size";
import { Properties } from "../../properties";
import { IconButton } from "../../ui/icon-button";
import Heading from "../../ui/typography/heading";
@@ -60,9 +60,9 @@ const TagItem = React.memo(
flexShrink: 1
}}
>
<Heading size={SIZE.md}>
<Heading size={AppFontSize.md}>
<Heading
size={SIZE.md}
size={AppFontSize.md}
style={{
color: colors.primary.accent
}}
@@ -73,7 +73,7 @@ const TagItem = React.memo(
</Heading>
<Paragraph
color={colors.secondary.paragraph}
size={SIZE.xs}
size={AppFontSize.xs}
style={{
marginTop: 5
}}
@@ -85,7 +85,7 @@ const TagItem = React.memo(
<IconButton
color={colors.primary.heading}
name="dots-horizontal"
size={SIZE.xl}
size={AppFontSize.xl}
onPress={() => {
Properties.present(item);
}}

34
apps/mobile/app/components/list/card.tsx
View File

@@ -21,16 +21,24 @@ import { useThemeColors } from "@notesnook/theme";
import React from "react";
import { Dimensions, View } from "react-native";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import { useMessageStore } from "../../stores/use-message-store";
import { SIZE } from "../../utils/size";
import { Message, useMessageStore } from "../../stores/use-message-store";
import { AppFontSize } from "../../utils/size";
import { DefaultAppStyles } from "../../utils/styles";
import { Pressable } from "../ui/pressable";
import Paragraph from "../ui/typography/paragraph";
export const Card = ({ color }: { color?: string }) => {
export const Card = ({
color,
customMessage
}: {
color?: string;
customMessage?: Omit<Message, "data">;
}) => {
const { colors } = useThemeColors();
color = color ? color : colors.primary.accent;
const messageBoardState = useMessageStore((state) => state.message);
const messageBoardState = useMessageStore(
(state) => customMessage || state.message
);
const announcements = useMessageStore((state) => state.announcements);
const fontScale = Dimensions.get("window").fontScale;
@@ -40,7 +48,7 @@ export const Card = ({ color }: { color?: string }) => {
style={{
width: "100%",
paddingHorizontal: DefaultAppStyles.GAP,
marginTop: DefaultAppStyles.GAP
paddingVertical: DefaultAppStyles.GAP_VERTICAL
}}
>
<Pressable
@@ -51,11 +59,7 @@ export const Card = ({ color }: { color?: string }) => {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
paddingHorizontal: DefaultAppStyles.GAP_SMALL,
width: "100%",
backgroundColor: colors.secondary.background,
borderWidth: 1,
borderColor: colors.primary.border
width: "100%"
}}
>
<View
@@ -75,7 +79,7 @@ export const Card = ({ color }: { color?: string }) => {
}}
>
<Icon
size={SIZE.xxxl}
size={AppFontSize.xxxl}
color={
messageBoardState.type === "error" ? colors.error.icon : color
}
@@ -95,11 +99,15 @@ export const Card = ({ color }: { color?: string }) => {
flexWrap: "nowrap",
flexShrink: 1
}}
size={AppFontSize.xs}
color={colors.primary.heading}
>
{messageBoardState.actionText}
</Paragraph>
<Paragraph color={colors.secondary.paragraph} size={SIZE.xxs}>
<Paragraph
color={colors.secondary.paragraph}
size={AppFontSize.xxs}
>
{messageBoardState.message}
</Paragraph>
</View>
@@ -119,7 +127,7 @@ export const Card = ({ color }: { color?: string }) => {
color={
messageBoardState.type === "error" ? colors.error.icon : color
}
size={SIZE.lg}
size={AppFontSize.lg}
/>
</View>
)}

8
apps/mobile/app/components/list/empty.tsx
View File

@@ -24,7 +24,7 @@ import { notesnook } from "../../../e2e/test.ids";
import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
import { TTip, useTip } from "../../services/tip-manager";
import { useSettingStore } from "../../stores/use-setting-store";
import { SIZE } from "../../utils/size";
import { defaultBorderRadius, AppFontSize } from "../../utils/size";
import { Tip } from "../tip";
import { Button } from "../ui/button";
import Seperator from "../ui/seperator";
@@ -109,7 +109,7 @@ export const Empty = React.memo(function Empty({
}}
style={{
alignSelf: "flex-start",
borderRadius: 5,
borderRadius: defaultBorderRadius,
height: 40
}}
/>
@@ -125,12 +125,12 @@ export const Empty = React.memo(function Empty({
}}
>
<Heading>{placeholder?.title}</Heading>
<Paragraph size={SIZE.sm} textBreakStrategy="balanced">
<Paragraph size={AppFontSize.sm} textBreakStrategy="balanced">
{placeholder?.loading}
</Paragraph>
<Seperator />
<ActivityIndicator
size={SIZE.lg}
size={AppFontSize.lg}
color={color || colors.primary.accent}
/>
</View>

11
apps/mobile/app/components/list/reorderable-list.tsx
View File

@@ -27,7 +27,7 @@ import {
} from "react-native-drax";
import { fluidTabsRef } from "../../utils/global-refs";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import { useSideBarDraggingStore } from "../side-menu/dragging-store";
import { IconButton } from "../ui/icon-button";
@@ -78,13 +78,15 @@ function ReorderableList<T extends { id: string }>({
return isHidden && !dragging ? null : (
<View
style={{
flexDirection: "row"
flexDirection: "row",
width: "100%"
}}
>
<View
style={{
opacity: isHidden ? 0.4 : 1,
flexGrow: 1,
opacity: isHidden ? 0.4 : 1
flexShrink: 1
}}
>
{renderDraggableItem(info, props)}
@@ -93,13 +95,12 @@ function ReorderableList<T extends { id: string }>({
<IconButton
name={!isHidden ? "minus" : "plus"}
color={colors.primary.icon}
size={SIZE.lg}
size={AppFontSize.lg}
top={0}
bottom={0}
onPress={() => {
const _hiddenItems = hiddenItemsState.slice();
const index = _hiddenItems.indexOf(info.item.id);
if (index === -1) {
_hiddenItems.push(info.item?.id);
} else {

10
apps/mobile/app/components/merge-conflicts/index.js
View File

@@ -38,7 +38,7 @@ import Navigation from "../../services/navigation";
import Sync from "../../services/sync";
import { useSettingStore } from "../../stores/use-setting-store";
import { eOnLoadNote, eShowMergeDialog } from "../../utils/events";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import BaseDialog from "../dialog/base-dialog";
import DialogButtons from "../dialog/dialog-buttons";
import DialogContainer from "../dialog/dialog-container";
@@ -164,7 +164,7 @@ const MergeConflicts = () => {
<Paragraph
style={{ flexWrap: "wrap" }}
color={colors.secondary.paragraph}
size={SIZE.xs}
size={AppFontSize.xs}
>
<Text
style={{
@@ -203,7 +203,7 @@ const MergeConflicts = () => {
borderRadius: 100,
paddingHorizontal: 12
}}
fontSize={SIZE.xs}
fontSize={AppFontSize.xs}
/>
) : null}
<View style={{ width: 10 }} />
@@ -220,7 +220,7 @@ const MergeConflicts = () => {
borderRadius: 100,
paddingHorizontal: 12
}}
fontSize={SIZE.xs}
fontSize={AppFontSize.xs}
color={colors.error.paragraph}
onPress={() => {
setDialogVisible(true);
@@ -238,7 +238,7 @@ const MergeConflicts = () => {
marginLeft: 10
}}
type="accent"
fontSize={SIZE.xs}
fontSize={AppFontSize.xs}
title={
keeping && !isDiscarded ? strings.undo() : strings.keep()
}

8
apps/mobile/app/components/note-history/index.tsx
View File

@@ -30,7 +30,7 @@ import { db } from "../../common/database";
import { useDBItem } from "../../hooks/use-db-item";
import { presentSheet } from "../../services/event-manager";
import { openLinkInBrowser } from "../../utils/functions";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import DialogHeader from "../dialog/dialog-header";
import SheetProvider from "../sheet-provider";
import { Pressable } from "../ui/pressable";
@@ -97,7 +97,7 @@ const HistoryItem = ({
{!item ? null : (
<>
<Paragraph>{getDate(item.dateCreated, item.dateModified)}</Paragraph>
<Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
<Paragraph color={colors.secondary.paragraph} size={AppFontSize.xs}>
{getTimeAgo(item.dateModified)}
</Paragraph>
</>
@@ -170,7 +170,7 @@ export default function NoteHistory({
>
{_loading ? (
<ActivityIndicator
size={SIZE.xl}
size={AppFontSize.xl}
color={colors.primary.accent}
/>
) : (
@@ -187,7 +187,7 @@ export default function NoteHistory({
/>
</View>
<Paragraph
size={SIZE.xs}
size={AppFontSize.xs}
color={colors.secondary.paragraph}
style={{
alignSelf: "center"

33
apps/mobile/app/components/premium/component.js
View File

@@ -17,6 +17,7 @@ You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { useThemeColors } from "@notesnook/theme";
import React, { useState } from "react";
import { ActivityIndicator, Platform, ScrollView, View } from "react-native";
import { LAUNCH_ROCKET } from "../../assets/images/assets";
@@ -24,17 +25,13 @@ import { db } from "../../common/database";
import { usePricing } from "../../hooks/use-pricing";
import { DDS } from "../../services/device-detection";
import { eSendEvent, presentSheet } from "../../services/event-manager";
import { useThemeColors } from "@notesnook/theme";
import Navigation from "../../services/navigation";
import { useUserStore } from "../../stores/use-user-store";
import { getElevationStyle } from "../../utils/elevation";
import {
eClosePremiumDialog,
eCloseSheet,
eOpenLoginDialog
} from "../../utils/events";
import { SIZE } from "../../utils/size";
import { eClosePremiumDialog, eCloseSheet } from "../../utils/events";
import { AppFontSize } from "../../utils/size";
import { sleep } from "../../utils/time";
import { AuthMode } from "../auth";
import { AuthMode } from "../auth/common";
import SheetProvider from "../sheet-provider";
import { Toast } from "../toast";
import { Button } from "../ui/button";
@@ -66,9 +63,9 @@ export const Component = ({ close, promo }) => {
});
} else {
close();
setTimeout(() => {
eSendEvent(eOpenLoginDialog, AuthMode.trialSignup);
}, 400);
Navigation.navigate("Auth", {
mode: AuthMode.trialSignup
});
}
};
@@ -137,14 +134,14 @@ export const Component = ({ close, promo }) => {
<Heading
key="heading"
size={SIZE.lg}
size={AppFontSize.lg}
style={{
alignSelf: "center",
paddingTop: 20
}}
>
Notesnook{" "}
<Heading size={SIZE.lg} color={colors.primary.accent}>
<Heading size={AppFontSize.lg} color={colors.primary.accent}>
Pro
</Heading>
</Heading>
@@ -154,7 +151,7 @@ export const Component = ({ close, promo }) => {
style={{
marginBottom: 20
}}
size={SIZE.md}
size={AppFontSize.md}
color={colors.primary.accent}
/>
) : (
@@ -163,7 +160,7 @@ export const Component = ({ close, promo }) => {
alignSelf: "center",
marginBottom: 20
}}
size={SIZE.md}
size={AppFontSize.md}
>
(
{Platform.OS === "android"
@@ -176,7 +173,7 @@ export const Component = ({ close, promo }) => {
<Paragraph
key="description"
size={SIZE.md}
size={AppFontSize.md}
style={{
paddingHorizontal: 12,
textAlign: "center",
@@ -231,7 +228,7 @@ export const Component = ({ close, promo }) => {
{!user || userCanRequestTrial ? (
<Paragraph
color={colors.secondary.paragraph}
size={SIZE.xs}
size={AppFontSize.xs}
style={{
alignSelf: "center",
textAlign: "center",
@@ -242,7 +239,7 @@ export const Component = ({ close, promo }) => {
{user
? 'On clicking "Try free for 14 days", your free trial will be activated.'
: "After sign up you will be asked to activate your free trial."}{" "}
<Paragraph size={SIZE.xs} style={{ fontWeight: "bold" }}>
<Paragraph size={AppFontSize.xs} style={{ fontWeight: "bold" }}>
No credit card is required.
</Paragraph>
</Paragraph>

10
apps/mobile/app/components/premium/expiring.js
View File

@@ -32,7 +32,7 @@ import {
eOpenResultDialog,
eOpenTrialEndingDialog
} from "../../utils/events";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import { sleep } from "../../utils/time";
import BaseDialog from "../dialog/base-dialog";
import DialogContainer from "../dialog/dialog-container";
@@ -127,7 +127,7 @@ export const Expiring = () => {
paddingTop: 0,
paddingBottom: 20
}}
size={SIZE.md + 2}
size={AppFontSize.md + 2}
>
Upgrade now to continue using all the pro features after
your trial ends
@@ -143,7 +143,7 @@ export const Expiring = () => {
await sleep(300);
eSendEvent(eOpenPremiumDialog, promo);
}}
size={SIZE.xs}
size={AppFontSize.xs}
style={{
textDecorationLine: "underline",
color: colors.secondary.paragraph,
@@ -176,7 +176,7 @@ export const Expiring = () => {
promo?.discount > 30 ? null : promo
);
}}
fontSize={SIZE.md + 2}
fontSize={AppFontSize.md + 2}
style={{
marginBottom: status.extend ? 0 : 10,
marginTop: 10,
@@ -201,7 +201,7 @@ export const Expiring = () => {
button: "Continue"
});
}}
fontSize={SIZE.xs}
fontSize={AppFontSize.xs}
height={30}
style={{
marginBottom: 10

12
apps/mobile/app/components/premium/feature.js
View File

@@ -21,7 +21,7 @@ import React from "react";
import { Text, View } from "react-native";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import { useThemeColors } from "@notesnook/theme";
import { SIZE } from "../../utils/size";
import { defaultBorderRadius, AppFontSize } from "../../utils/size";
import Paragraph from "../ui/typography/paragraph";
import { ProTag } from "./pro-tag";
@@ -53,7 +53,7 @@ export const FeatureBlock = ({
marginLeft: 5,
flexShrink: 1
}}
size={SIZE.sm}
size={AppFontSize.sm}
>
{content}
</Paragraph>
@@ -65,12 +65,12 @@ export const FeatureBlock = ({
justifyContent: "center",
padding: 10,
marginRight: 10,
borderRadius: 5,
borderRadius: defaultBorderRadius,
minWidth: 100
}}
>
<Icon color={colors.primary.icon} name={icon} size={SIZE.xl} />
<Paragraph size={SIZE.md}>
<Icon color={colors.primary.icon} name={icon} size={AppFontSize.xl} />
<Paragraph size={AppFontSize.md}>
<Text style={{ color: colors.primary.accent }}>{highlight}</Text>
{content ? "\n" + content : null}
</Paragraph>
@@ -78,7 +78,7 @@ export const FeatureBlock = ({
{pro ? (
<>
<View style={{ height: 5 }} />
<ProTag width={50} size={SIZE.xs} background={proTagBg} />
<ProTag width={50} size={AppFontSize.xs} background={proTagBg} />
</>
) : (
<View

25
apps/mobile/app/components/premium/group.js
View File

@@ -20,7 +20,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
import React from "react";
import { ScrollView, View } from "react-native";
import { useThemeColors } from "@notesnook/theme";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import Heading from "../ui/typography/heading";
import Paragraph from "../ui/typography/paragraph";
import { FeatureBlock } from "./feature";
@@ -33,18 +33,25 @@ export const Group = ({ item, index }) => {
<View
style={{
paddingHorizontal: 12,
backgroundColor: index % 2 !== 0 ? colors.primary.background : colors.secondary.background,
backgroundColor:
index % 2 !== 0
? colors.primary.background
: colors.secondary.background,
paddingVertical: 40
}}
>
{item?.pro ? (
<ProTag
size={SIZE.sm}
background={index % 2 === 0 ? colors.primary.background : colors.secondary.background}
size={AppFontSize.sm}
background={
index % 2 === 0
? colors.primary.background
: colors.secondary.background
}
/>
) : null}
<Heading>{item.title}</Heading>
<Paragraph size={SIZE.md}>{item.detail}</Paragraph>
<Paragraph size={AppFontSize.md}>{item.detail}</Paragraph>
{item.features && (
<ScrollView
@@ -60,7 +67,11 @@ export const Group = ({ item, index }) => {
{...item}
detail={item.detail}
pro={item.pro}
proTagBg={index % 2 === 0 ? colors.primary.background : colors.secondary.background}
proTagBg={
index % 2 === 0
? colors.primary.background
: colors.secondary.background
}
/>
))}
</ScrollView>
@@ -70,7 +81,7 @@ export const Group = ({ item, index }) => {
style={{
marginTop: 10
}}
size={SIZE.xs}
size={AppFontSize.xs}
color={colors.secondary.paragraph}
>
{item.info}

4
apps/mobile/app/components/premium/offer.js
View File

@@ -20,7 +20,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
import React from "react";
import { Text } from "react-native";
import { useThemeColors } from "@notesnook/theme";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import Paragraph from "../ui/typography/paragraph";
export const Offer = ({
@@ -36,7 +36,7 @@ export const Offer = ({
textAlign: "center",
paddingVertical: padding
}}
size={SIZE.xxxl}
size={AppFontSize.xxxl}
>
GET {off}
<Text style={{ color: colors.primary.accent }}>%</Text> OFF!{"\n"}

6
apps/mobile/app/components/premium/premium-toast.js
View File

@@ -35,7 +35,7 @@ import {
eOpenPremiumDialog,
eShowGetPremium
} from "../../utils/events";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import { sleep } from "../../utils/time";
import { Button } from "../ui/button";
import Heading from "../ui/typography/heading";
@@ -120,7 +120,7 @@ export const PremiumToast = ({ context = "global", offset = 0 }) => {
flexWrap: "wrap"
}}
color={colors.primary.accent}
size={SIZE.md}
size={AppFontSize.md}
>
{msg.title}
</Heading>
@@ -129,7 +129,7 @@ export const PremiumToast = ({ context = "global", offset = 0 }) => {
style={{
flexWrap: "wrap"
}}
size={SIZE.sm}
size={AppFontSize.sm}
color={colors.primary.paragraph}
>
{msg.desc}

10
apps/mobile/app/components/premium/pricing-item.tsx
View File

@@ -19,7 +19,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
import React from "react";
import { Platform, View } from "react-native";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import { Pressable } from "../ui/pressable";
import Heading from "../ui/typography/heading";
import Paragraph from "../ui/typography/paragraph";
@@ -59,13 +59,13 @@ export const PricingItem = ({
>
{!compact && (
<View>
<Heading size={SIZE.lg - 2}>
<Heading size={AppFontSize.lg - 2}>
{product?.type === "yearly" || product?.offerType === "yearly"
? "Yearly"
: "Monthly"}
</Heading>
{product?.info && (
<Paragraph size={SIZE.xs}>{product.info}</Paragraph>
<Paragraph size={AppFontSize.xs}>{product.info}</Paragraph>
)}
</View>
)}
@@ -75,13 +75,13 @@ export const PricingItem = ({
style={{
textDecorationLine: strikethrough ? "line-through" : undefined
}}
size={SIZE.sm}
size={AppFontSize.sm}
>
<Heading
style={{
textDecorationLine: strikethrough ? "line-through" : undefined
}}
size={SIZE.lg - 2}
size={AppFontSize.lg - 2}
>
{Platform.OS === "android"
? (product.data as RNIap.SubscriptionAndroid | undefined)

43
apps/mobile/app/components/premium/pricing-plans.tsx
View File

@@ -17,6 +17,8 @@ You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { strings } from "@notesnook/intl";
import { useThemeColors } from "@notesnook/theme";
import React, { useCallback, useEffect, useState } from "react";
import { ActivityIndicator, Platform, Text, View } from "react-native";
import * as RNIap from "react-native-iap";
@@ -27,18 +29,19 @@ import {
presentSheet,
ToastManager
} from "../../services/event-manager";
import Navigation from "../../services/navigation";
import PremiumService from "../../services/premium";
import { useThemeColors } from "@notesnook/theme";
import { useSettingStore } from "../../stores/use-setting-store";
import { useUserStore } from "../../stores/use-user-store";
import {
eClosePremiumDialog,
eCloseSheet,
eCloseSimpleDialog,
eOpenLoginDialog
eCloseSimpleDialog
} from "../../utils/events";
import { openLinkInBrowser } from "../../utils/functions";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import { sleep } from "../../utils/time";
import { AuthMode } from "../auth/common";
import { Dialog } from "../dialog";
import BaseDialog from "../dialog/base-dialog";
import { presentDialog } from "../dialog/functions";
@@ -47,8 +50,6 @@ import Heading from "../ui/typography/heading";
import Paragraph from "../ui/typography/paragraph";
import { Walkthrough } from "../walkthroughs";
import { PricingItem } from "./pricing-item";
import { useSettingStore } from "../../stores/use-setting-store";
import { strings } from "@notesnook/intl";
const UUID_PREFIX = "0bdaea";
const UUID_VERSION = "4";
@@ -290,7 +291,7 @@ export const PricingPlans = ({
style={{
alignSelf: "center"
}}
size={SIZE.lg}
size={AppFontSize.lg}
>
{(Platform.OS === "android"
? (monthlyPlan?.product as RNIap.SubscriptionAndroid | undefined)
@@ -373,7 +374,7 @@ export const PricingPlans = ({
<Heading
style={{
paddingTop: 15,
fontSize: SIZE.lg
fontSize: AppFontSize.lg
}}
>
Special offer for you
@@ -390,7 +391,7 @@ export const PricingPlans = ({
alignSelf: "center",
textAlign: "center"
}}
size={SIZE.xxl}
size={AppFontSize.xxl}
>
{Platform.OS === "android"
? (product.data as RNIap.SubscriptionAndroid)
@@ -411,7 +412,7 @@ export const PricingPlans = ({
alignSelf: "center",
textAlign: "center"
}}
size={SIZE.md}
size={AppFontSize.md}
>
then {getStandardPrice()} {product?.offerType}.
</Paragraph>
@@ -557,9 +558,9 @@ export const PricingPlans = ({
onPress={() => {
eSendEvent(eClosePremiumDialog);
eSendEvent(eCloseSheet);
setTimeout(() => {
eSendEvent(eOpenLoginDialog, 1);
}, 400);
Navigation.navigate("Auth", {
mode: AuthMode.login
});
}}
title={"Sign up for free"}
type="accent"
@@ -574,7 +575,7 @@ export const PricingPlans = ({
promo &&
!promo.promoCode.startsWith("com.streetwriters.notesnook") ? (
<Paragraph
size={SIZE.md}
size={AppFontSize.md}
textBreakStrategy="balanced"
style={{
alignSelf: "center",
@@ -629,7 +630,7 @@ export const PricingPlans = ({
{!user || !upgrade ? (
<Paragraph
color={colors.secondary.paragraph}
size={SIZE.xs}
size={AppFontSize.xs}
style={{
alignSelf: "center",
textAlign: "center",
@@ -640,7 +641,7 @@ export const PricingPlans = ({
{user
? 'On clicking "Try free for 14 days", your free trial will be activated.'
: "After sign up you will be asked to activate your free trial."}{" "}
<Paragraph size={SIZE.xs} style={{ fontWeight: "bold" }}>
<Paragraph size={AppFontSize.xs} style={{ fontWeight: "bold" }}>
No credit card is required.
</Paragraph>
</Paragraph>
@@ -651,7 +652,7 @@ export const PricingPlans = ({
{Platform.OS === "ios" ? (
<Paragraph
textBreakStrategy="balanced"
size={SIZE.xs}
size={AppFontSize.xs}
color={colors.secondary.paragraph}
style={{
alignSelf: "center",
@@ -665,7 +666,7 @@ export const PricingPlans = ({
</Paragraph>
) : (
<Paragraph
size={SIZE.xs}
size={AppFontSize.xs}
color={colors.secondary.paragraph}
style={{
alignSelf: "center",
@@ -685,7 +686,7 @@ export const PricingPlans = ({
}}
>
<Paragraph
size={SIZE.xs}
size={AppFontSize.xs}
color={colors.secondary.paragraph}
style={{
maxWidth: "100%",
@@ -694,7 +695,7 @@ export const PricingPlans = ({
>
By subscribing, you agree to our{" "}
<Paragraph
size={SIZE.xs}
size={AppFontSize.xs}
onPress={() => {
openLinkInBrowser("https://notesnook.com/tos")
.catch(() => {})
@@ -709,7 +710,7 @@ export const PricingPlans = ({
</Paragraph>
and{" "}
<Paragraph
size={SIZE.xs}
size={AppFontSize.xs}
onPress={() => {
openLinkInBrowser("https://notesnook.com/privacy")
.catch(() => {})

13
apps/mobile/app/components/properties/color-tags.tsx
View File

@@ -31,7 +31,7 @@ import { useMenuStore } from "../../stores/use-menu-store";
import { useRelationStore } from "../../stores/use-relation-store";
import { useSettingStore } from "../../stores/use-setting-store";
import { refreshNotesPage } from "../../utils/events";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import ColorPicker from "../dialogs/color-picker";
import { Button } from "../ui/button";
import NativeTooltip from "../../utils/tooltip";
@@ -85,7 +85,12 @@ const ColorItem = ({ item, note }: { item: Color; note: Note }) => {
}}
>
{isLinked ? (
<Icon testID="icon-check" name="check" color="white" size={SIZE.lg} />
<Icon
testID="icon-check"
name="check"
color="white"
size={AppFontSize.lg}
/>
) : null}
</Pressable>
);
@@ -151,7 +156,7 @@ export const ColorTags = ({ item }: { item: Note }) => {
icon="plus"
iconPosition="right"
height={30}
fontSize={SIZE.xs}
fontSize={AppFontSize.xs}
style={{
marginRight: 5,
borderRadius: 100,
@@ -178,7 +183,7 @@ export const ColorTags = ({ item }: { item: Note }) => {
testID="icon-plus"
name="plus"
color={colors.primary.icon}
size={SIZE.lg}
size={AppFontSize.lg}
/>
</Pressable>
)

6
apps/mobile/app/components/properties/date-meta.js
View File

@@ -20,7 +20,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
import React from "react";
import { View } from "react-native";
import { useThemeColors } from "@notesnook/theme";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import Paragraph from "../ui/typography/paragraph";
import { getFormattedDate } from "@notesnook/common";
import { strings } from "@notesnook/intl";
@@ -47,10 +47,10 @@ export const DateMeta = ({ item }) => {
paddingVertical: 3
}}
>
<Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
<Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
{strings.dateDescFromKey(key)}
</Paragraph>
<Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
<Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
{getFormattedDate(item[key], "date-time")}
</Paragraph>
</View>

31
apps/mobile/app/components/properties/index.js
View File

@@ -27,7 +27,7 @@ import { eSendEvent, presentSheet } from "../../services/event-manager";
import { ColorValues } from "../../utils/colors";
import { eOnLoadNote } from "../../utils/events";
import { fluidTabsRef } from "../../utils/global-refs";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import SheetProvider from "../sheet-provider";
import { IconButton } from "../ui/icon-button";
import { Pressable } from "../ui/pressable";
@@ -39,6 +39,7 @@ import { Items } from "./items";
import Notebooks from "./notebooks";
import { TagStrip, Tags } from "./tags";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import { DefaultAppStyles } from "../../utils/styles";
const Line = ({ top = 6, bottom = 6 }) => {
const { colors } = useThemeColors();
@@ -81,13 +82,14 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
data={[0]}
keyExtractor={() => "properties-scroll-item"}
renderItem={() => (
<View>
<View
style={{
gap: DefaultAppStyles.GAP_VERTICAL
}}
>
<View
style={{
paddingHorizontal: 12,
marginTop: 5,
zIndex: 10,
marginBottom: 5
paddingHorizontal: DefaultAppStyles.GAP
}}
>
<View
@@ -119,12 +121,12 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
) : item.type === "tag" ? (
<Icon
name="pound"
size={SIZE.lg}
size={AppFontSize.lg}
color={colors.primary.icon}
/>
) : null}
<Heading size={SIZE.lg}>{item.title}</Heading>
<Heading size={AppFontSize.lg}>{item.title}</Heading>
</View>
{item.type === "note" ? (
@@ -132,7 +134,7 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
name="open-in-new"
type="plain"
color={colors.primary.icon}
size={SIZE.lg}
size={AppFontSize.lg}
style={{
alignSelf: "flex-start"
}}
@@ -169,7 +171,7 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
backgroundColor: "transparent",
paddingHorizontal: 0
}}
fontSize={SIZE.xs}
fontSize={AppFontSize.xs}
/>
) : null}
</View>
@@ -184,15 +186,8 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
</>
) : null}
{item.type === "note" ? (
<View
style={{
paddingHorizontal: 12
}}
>
<Notebooks note={item} close={close} />
</View>
<Notebooks note={item} close={close} />
) : null}
<Items
item={item}
buttons={buttons}

142
apps/mobile/app/components/properties/items.tsx
View File

@@ -20,13 +20,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
import { Item } from "@notesnook/core";
import { useThemeColors } from "@notesnook/theme";
import React from "react";
import { Dimensions, ScrollView, View } from "react-native";
import { Dimensions, View } from "react-native";
import SwiperFlatList from "react-native-swiper-flatlist";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import { Action, ActionId, useActions } from "../../hooks/use-actions";
import { useStoredRef } from "../../hooks/use-stored-ref";
import { DDS } from "../../services/device-detection";
import { useSettingStore } from "../../stores/use-setting-store";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import { DefaultAppStyles } from "../../utils/styles";
import { Button } from "../ui/button";
import { Pressable } from "../ui/pressable";
@@ -66,6 +67,9 @@ const COLUMN_BAR_ITEMS: ActionId[] = [
"pin",
"default-notebook",
"add-shortcut",
"reorder",
"rename-color",
"rename-tag",
"trash"
];
@@ -89,8 +93,8 @@ export const Items = ({ item, close }: { item: Item; close: () => void }) => {
const columnItemWidth =
deviceMode !== "mobile"
? (width - 16) / columnItemsCount
: (width - 16) / columnItemsCount;
? (width - DefaultAppStyles.GAP) / columnItemsCount
: (width - DefaultAppStyles.GAP) / columnItemsCount;
const topBarItems = selectedActions
.filter((item) => TOP_BAR_ITEMS.indexOf(item.id) > -1)
@@ -134,7 +138,7 @@ export const Items = ({ item, close }: { item: Item; close: () => void }) => {
onPress={item.onPress}
type={item.checked ? "shade" : "secondary"}
style={{
height: columnItemWidth - 8,
height: columnItemWidth / 1.5,
width: columnItemWidth - 8,
borderRadius: 10,
justifyContent: "center",
@@ -145,7 +149,13 @@ export const Items = ({ item, close }: { item: Item; close: () => void }) => {
<Icon
allowFontScaling
name={item.icon}
size={DDS.isTab ? SIZE.xxl : shouldShrink ? SIZE.xxl : SIZE.lg}
size={
DDS.isTab
? AppFontSize.xxl
: shouldShrink
? AppFontSize.xxl
: AppFontSize.lg
}
color={
item.checked
? item.activeColor || colors.primary.accent
@@ -157,7 +167,7 @@ export const Items = ({ item, close }: { item: Item; close: () => void }) => {
</Pressable>
<Paragraph
size={SIZE.xxs}
size={AppFontSize.xxs}
textBreakStrategy="simple"
style={{ textAlign: "center" }}
>
@@ -189,7 +199,7 @@ export const Items = ({ item, close }: { item: Item; close: () => void }) => {
title={item.title}
icon={item.icon}
type={item.checked ? "inverted" : "plain"}
fontSize={SIZE.sm}
fontSize={AppFontSize.sm}
style={{
borderRadius: 0,
justifyContent: "flex-start",
@@ -218,24 +228,21 @@ export const Items = ({ item, close }: { item: Item; close: () => void }) => {
key={item.id}
testID={"icon-" + item.id}
style={{
alignSelf: "flex-start",
paddingHorizontal: 0,
flex: 1
width: columnItemWidth - 8
}}
>
<View
style={{
height: topBarItemHeight,
height: columnItemWidth / 2,
width: columnItemWidth - DefaultAppStyles.GAP_SMALL,
justifyContent: "center",
alignItems: "center",
marginBottom: DDS.isTab ? 7 : 3.5,
borderRadius: 100
alignItems: "center"
}}
>
<Icon
name={item.icon}
allowFontScaling
size={DDS.isTab ? SIZE.xxl : SIZE.md + 4}
size={DDS.isTab ? AppFontSize.xxl : AppFontSize.md + 4}
color={
item.checked
? item.activeColor || colors.primary.accent
@@ -248,7 +255,7 @@ export const Items = ({ item, close }: { item: Item; close: () => void }) => {
<Paragraph
textBreakStrategy="simple"
size={SIZE.xxs}
size={AppFontSize.xxs}
style={{ textAlign: "center" }}
>
{item.title}
@@ -260,42 +267,79 @@ export const Items = ({ item, close }: { item: Item; close: () => void }) => {
colors.error.icon,
colors.primary.accent,
colors.secondary.icon,
topBarItemHeight,
columnItemWidth,
topBarSorting
]
);
return item.type === "note" ? (
<>
<ScrollView
horizontal
style={{
paddingHorizontal: 16,
marginTop: 6,
marginBottom: 6
}}
showsHorizontalScrollIndicator={false}
contentContainerStyle={{
paddingRight: 25,
gap: 15
}}
>
{topBarItems.map(renderTopBarItem)}
</ScrollView>
const getTopBarItemChunksOfFour = () => {
const chunks = [];
for (let i = 0; i < topBarItems.length; i += 5) {
chunks.push(topBarItems.slice(i, i + 5));
}
return chunks;
};
<View
style={{
flexDirection: "row",
flexWrap: "wrap",
marginTop: 10,
gap: 5,
paddingHorizontal: DefaultAppStyles.GAP
}}
>
{bottomGridItems.map((item) => renderRowItem({ item }))}
</View>
</>
) : (
<View>{columnItems.map(renderColumnItem)}</View>
return (
<View
style={{
gap: DefaultAppStyles.GAP
}}
>
{item.type === "note" ? (
<>
<View>
<SwiperFlatList
data={getTopBarItemChunksOfFour()}
autoplay={false}
showPagination
paginationStyleItemActive={{
borderRadius: 2,
backgroundColor: colors.selected.background,
height: 6,
marginHorizontal: 2
}}
paginationStyleItemInactive={{
borderRadius: 2,
backgroundColor: colors.secondary.background,
height: 6,
marginHorizontal: 2
}}
paginationStyle={{
position: "relative",
marginHorizontal: 2,
marginBottom: 0,
marginTop: DefaultAppStyles.GAP
}}
renderItem={({ item, index }) => (
<View
style={{
flexDirection: "row",
paddingHorizontal: DefaultAppStyles.GAP,
gap: 5,
width: width
}}
>
{item.map(renderTopBarItem)}
</View>
)}
/>
</View>
<View
style={{
flexDirection: "row",
flexWrap: "wrap",
gap: 5,
paddingHorizontal: DefaultAppStyles.GAP
}}
>
{bottomGridItems.map((item) => renderRowItem({ item }))}
</View>
</>
) : (
<View>{columnItems.map(renderColumnItem)}</View>
)}
</View>
);
};

74
apps/mobile/app/components/properties/notebooks.js
View File

@@ -25,7 +25,7 @@ import { db } from "../../common/database";
import NotebookScreen from "../../screens/notebook";
import { eSendEvent, presentSheet } from "../../services/event-manager";
import { eClearEditor } from "../../utils/events";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import { Button } from "../ui/button";
import Heading from "../ui/typography/heading";
import { Pressable } from "../ui/pressable";
@@ -72,7 +72,7 @@ export default function Notebooks({ note, close, full }) {
<Icon
name="book-outline"
color={colors.primary.accent}
size={SIZE.sm}
size={AppFontSize.sm}
style={{
marginRight: 5
}}
@@ -82,7 +82,7 @@ export default function Notebooks({ note, close, full }) {
style={{
maxWidth: "50%"
}}
size={SIZE.sm}
size={AppFontSize.sm}
>
{item.title}
</Heading>
@@ -92,40 +92,46 @@ export default function Notebooks({ note, close, full }) {
return noteNotebooks.length === 0 ? null : (
<View
style={{
width: "100%",
borderRadius: 10,
marginTop: 6
paddingHorizontal: 12
}}
>
{full
? noteNotebooks.map(renderItem)
: noteNotebooks.slice(0, 1).map(renderItem)}
<View
style={{
width: "100%",
borderRadius: 10,
marginTop: 6
}}
>
{full
? noteNotebooks.map(renderItem)
: noteNotebooks.slice(0, 1).map(renderItem)}
{noteNotebooks.length > 1 && !full ? (
<Button
title={strings.viewAllLinkedNotebooks()}
fontSize={SIZE.xs}
style={{
alignSelf: "flex-end",
marginRight: 12,
paddingHorizontal: 0,
backgroundColor: "transparent"
}}
type="plain"
textStyle={{
textDecorationLine: "underline"
}}
height={20}
onPress={() => {
presentSheet({
context: "properties",
component: (ref, close) => (
<Notebooks note={note} close={close} full={true} />
)
});
}}
/>
) : undefined}
{noteNotebooks.length > 1 && !full ? (
<Button
title={strings.viewAllLinkedNotebooks()}
fontSize={AppFontSize.xs}
style={{
alignSelf: "flex-end",
marginRight: 12,
paddingHorizontal: 0,
backgroundColor: "transparent"
}}
type="plain"
textStyle={{
textDecorationLine: "underline"
}}
height={20}
onPress={() => {
presentSheet({
context: "properties",
component: (ref, close) => (
<Notebooks note={note} close={close} full={true} />
)
});
}}
/>
) : undefined}
</View>
</View>
);
}

6
apps/mobile/app/components/properties/synced.js
View File

@@ -21,7 +21,7 @@ import { useThemeColors } from "@notesnook/theme";
import React from "react";
import { useUserStore } from "../../stores/use-user-store";
import { openLinkInBrowser } from "../../utils/functions";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import { DefaultAppStyles } from "../../utils/styles";
import { sleep } from "../../utils/time";
import { Button } from "../ui/button";
@@ -40,8 +40,8 @@ export const Synced = ({ item, close }) => {
padding: DefaultAppStyles.GAP_VERTICAL_SMALL,
paddingHorizontal: DefaultAppStyles.GAP_SMALL
}}
fontSize={SIZE.xxxs}
iconSize={SIZE.xs}
fontSize={AppFontSize.xxxs}
iconSize={AppFontSize.xs}
icon="shield-key-outline"
type="shade"
title="Encrypted and synced"

6
apps/mobile/app/components/properties/tags.js
View File

@@ -22,7 +22,7 @@ import { View } from "react-native";
import { db } from "../../common/database";
import { TaggedNotes } from "../../screens/notes/tagged";
import { useThemeColors } from "@notesnook/theme";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import { sleep } from "../../utils/time";
import ManageTagsSheet from "../sheets/manage-tags";
import { Button } from "../ui/button";
@@ -57,7 +57,7 @@ export const Tags = ({ item, close }) => {
icon="plus"
iconPosition="right"
height={30}
fontSize={SIZE.sm - 1}
fontSize={AppFontSize.sm - 1}
style={{
height: 35,
borderRadius: 100
@@ -117,7 +117,7 @@ const TagItem = ({ tag, close }) => {
title={"#" + tag.title}
type="plain"
height={20}
fontSize={SIZE.xs}
fontSize={AppFontSize.xs}
style={style}
textStyle={{
color: colors.secondary.paragraph

8
apps/mobile/app/components/selection-header/index.tsx
View File

@@ -37,7 +37,7 @@ import { useSelectionStore } from "../../stores/use-selection-store";
import { deleteItems } from "../../utils/functions";
import { fluidTabsRef } from "../../utils/global-refs";
import { updateNotebook } from "../../utils/notebooks";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import { DefaultAppStyles } from "../../utils/styles";
import { sleep } from "../../utils/time";
import { presentDialog } from "../dialog/functions";
@@ -164,7 +164,7 @@ export const SelectionHeader = React.memo(
.getState()
.setAll(allSelected ? [] : [...((await items?.ids()) || [])]);
}}
size={SIZE.lg}
size={AppFontSize.lg}
color={allSelected ? colors.primary.accent : colors.primary.icon}
name="select-all"
/>
@@ -276,7 +276,7 @@ export const SelectionHeader = React.memo(
].map((item) =>
!item.visible ? null : (
<IconButton
size={SIZE.lg}
size={AppFontSize.lg}
type="plain"
name={item.icon}
key={item.title}
@@ -293,7 +293,7 @@ export const SelectionHeader = React.memo(
</View>
<IconButton
size={SIZE.lg}
size={AppFontSize.lg}
onPress={() => {
clearSelection();
}}

10
apps/mobile/app/components/sheet-provider/index.js
View File

@@ -27,7 +27,7 @@ import {
} from "../../services/event-manager";
import { useThemeColors } from "@notesnook/theme";
import { eCloseSheet, eOpenSheet } from "../../utils/events";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import { sleep } from "../../utils/time";
import { Button } from "../ui/button";
import SheetWrapper from "../ui/sheet";
@@ -180,7 +180,7 @@ const SheetProvider = ({ context = "global" }) => {
type="plain"
key={v}
textStyle={{ fontWeight: "normal" }}
fontSize={SIZE.sm}
fontSize={AppFontSize.sm}
icon="check"
width="100%"
style={{
@@ -223,7 +223,7 @@ const SheetProvider = ({ context = "global" }) => {
marginBottom: 10
}}
width="100%"
fontSize={SIZE.md}
fontSize={AppFontSize.md}
/>
))}
@@ -234,14 +234,14 @@ const SheetProvider = ({ context = "global" }) => {
marginTop: 10,
textDecorationLine: "underline"
}}
size={SIZE.xs}
size={AppFontSize.xs}
onPress={data.learnMorePress}
color={colors.secondary.paragraph}
>
<Icon
color={colors.primary.icon}
name="information-outline"
size={SIZE.xs}
size={AppFontSize.xs}
/>{" "}
{data.learnMore}
</Paragraph>

6
apps/mobile/app/components/sheets/add-notebook/index.tsx
View File

@@ -35,7 +35,7 @@ import { useNotebookStore } from "../../../stores/use-notebook-store";
import { useRelationStore } from "../../../stores/use-relation-store";
import { eOnNotebookUpdated } from "../../../utils/events";
import { getParentNotebookId } from "../../../utils/notebooks";
import { SIZE } from "../../../utils/size";
import { AppFontSize } from "../../../utils/size";
import { Button } from "../../ui/button";
import Input from "../../ui/input";
import Seperator from "../../ui/seperator";
@@ -118,7 +118,7 @@ export const AddNotebookSheet = ({
paddingHorizontal: 12
}}
>
<Heading size={SIZE.lg}>
<Heading size={AppFontSize.lg}>
{notebook ? strings.editNotebook() : strings.newNotebook()}
</Heading>
@@ -160,7 +160,7 @@ export const AddNotebookSheet = ({
title={notebook ? strings.save() : strings.add()}
type="accent"
height={45}
fontSize={SIZE.md}
fontSize={AppFontSize.md}
style={{
paddingHorizontal: 24,
width: "100%"

4
apps/mobile/app/components/sheets/add-to/index.tsx
View File

@@ -44,7 +44,7 @@ import { useRelationStore } from "../../../stores/use-relation-store";
import { useSelectionStore } from "../../../stores/use-selection-store";
import { useSettingStore } from "../../../stores/use-setting-store";
import { updateNotebook } from "../../../utils/notebooks";
import { SIZE } from "../../../utils/size";
import { AppFontSize } from "../../../utils/size";
import { Dialog } from "../../dialog";
import DialogHeader from "../../dialog/dialog-header";
import SheetProvider from "../../sheet-provider";
@@ -314,7 +314,7 @@ const MoveNoteSheet = ({
>
{loading ? (
<ActivityIndicator
size={SIZE.lg}
size={AppFontSize.lg}
color={colors.primary.accent}
/>
) : (

12
apps/mobile/app/components/sheets/add-to/notebook-item.tsx
View File

@@ -24,7 +24,7 @@ import { notesnook } from "../../../../e2e/test.ids";
import { useTotalNotes } from "../../../hooks/use-db-item";
import { useNotebook } from "../../../hooks/use-notebook";
import useNavigationStore from "../../../stores/use-navigation-store";
import { SIZE } from "../../../utils/size";
import { AppFontSize } from "../../../utils/size";
import { IconButton } from "../../ui/icon-button";
import { Pressable } from "../../ui/pressable";
import Paragraph from "../../ui/typography/paragraph";
@@ -147,7 +147,7 @@ export const NotebookItem = ({
>
{nestedNotebooks?.placeholders.length ? (
<IconButton
size={SIZE.xl}
size={AppFontSize.xl}
color={isSelected ? colors.selected.icon : colors.primary.icon}
onPress={() => {
if (!item?.id) return;
@@ -166,7 +166,7 @@ export const NotebookItem = ({
) : null}
<IconButton
size={SIZE.xl}
size={AppFontSize.xl}
color={
isSelected
? colors.selected.icon
@@ -198,7 +198,7 @@ export const NotebookItem = ({
color={
isFocused ? colors.selected.paragraph : colors.secondary.paragraph
}
size={SIZE.sm}
size={AppFontSize.sm}
>
{item?.title}
</Paragraph>
@@ -212,7 +212,7 @@ export const NotebookItem = ({
}}
>
{item?.id && totalNotes?.(item?.id) ? (
<Paragraph size={SIZE.sm} color={colors.secondary.paragraph}>
<Paragraph size={AppFontSize.sm} color={colors.secondary.paragraph}>
{totalNotes(item?.id)}
</Paragraph>
) : null}
@@ -238,7 +238,7 @@ export const NotebookItem = ({
bottom={0}
top={0}
color={colors.primary.icon}
size={SIZE.xl}
size={AppFontSize.xl}
/>
</View>
</Pressable>

16
apps/mobile/app/components/sheets/editor-tabs/index.tsx
View File

@@ -32,7 +32,7 @@ import {
import { editorController } from "../../../screens/editor/tiptap/utils";
import { eSendEvent, presentSheet } from "../../../services/event-manager";
import { eUnlockNote } from "../../../utils/events";
import { SIZE } from "../../../utils/size";
import { AppFontSize } from "../../../utils/size";
import { IconButton } from "../../ui/icon-button";
import { Pressable } from "../../ui/pressable";
import Heading from "../../ui/typography/heading";
@@ -101,15 +101,15 @@ const TabItemComponent = (props: {
{props.tab.session?.noteLocked ? (
<>
{props.tab.session?.locked ? (
<Icon size={SIZE.md} name="lock" />
<Icon size={AppFontSize.md} name="lock" />
) : (
<Icon size={SIZE.md} name="lock-open-outline" />
<Icon size={AppFontSize.md} name="lock-open-outline" />
)}
</>
) : null}
{props.tab.session?.readonly ? (
<Icon size={SIZE.md} name="pencil-lock" />
<Icon size={AppFontSize.md} name="pencil-lock" />
) : null}
<Paragraph
@@ -119,7 +119,7 @@ const TabItemComponent = (props: {
: colors.primary.paragraph
}
numberOfLines={1}
size={SIZE.md}
size={AppFontSize.md}
>
{props.tab.session?.noteId
? item?.title || strings.untitledNote()
@@ -136,7 +136,7 @@ const TabItemComponent = (props: {
>
<IconButton
name="pin"
size={SIZE.lg}
size={AppFontSize.lg}
color={props.tab.pinned ? colors.primary.accent : colors.primary.icon}
onPress={() => {
useTabStore.getState().updateTab(props.tab.id, {
@@ -152,7 +152,7 @@ const TabItemComponent = (props: {
{!props.tab?.pinned ? (
<IconButton
name="close"
size={SIZE.lg}
size={AppFontSize.lg}
color={colors.primary.icon}
onPress={() => {
const isLastTab = useTabStore.getState().tabs.length === 1;
@@ -215,7 +215,7 @@ export default function EditorTabs({
alignItems: "center"
}}
>
<Heading size={SIZE.lg}>{strings.tabs()}</Heading>
<Heading size={AppFontSize.lg}>{strings.tabs()}</Heading>
<IconButton
onPress={() => {
useTabStore.getState().newTab();

20
apps/mobile/app/components/sheets/export-notes/index.tsx
View File

@@ -41,7 +41,7 @@ import Exporter from "../../../services/exporter";
import PremiumService from "../../../services/premium";
import { useUserStore } from "../../../stores/use-user-store";
import { getElevationStyle } from "../../../utils/elevation";
import { SIZE, ph, pv } from "../../../utils/size";
import { AppFontSize, defaultBorderRadius, ph, pv } from "../../../utils/size";
import { sleep } from "../../../utils/time";
import { Dialog } from "../../dialog";
import DialogHeader from "../../dialog/dialog-header";
@@ -203,7 +203,7 @@ const ExportNotesSheet = ({
<View
style={{
backgroundColor: colors.primary.shade,
borderRadius: 5,
borderRadius: defaultBorderRadius,
height: 60,
width: 60,
justifyContent: "center",
@@ -215,7 +215,7 @@ const ExportNotesSheet = ({
color={
item.pro ? colors.primary.accent : colors.primary.icon
}
size={SIZE.xxxl + 10}
size={AppFontSize.xxxl + 10}
/>
</View>
<View
@@ -224,7 +224,7 @@ const ExportNotesSheet = ({
}}
>
{!item.pro ? <ProTag size={12} /> : null}
<Heading style={{ marginLeft: 10 }} size={SIZE.md}>
<Heading style={{ marginLeft: 10 }} size={AppFontSize.md}>
{item.title}
</Heading>
{/* <Paragraph
@@ -294,7 +294,7 @@ const ExportNotesSheet = ({
}
type="accent"
width={250}
fontSize={SIZE.md}
fontSize={AppFontSize.md}
style={{
marginTop: 10,
borderRadius: 100
@@ -323,7 +323,7 @@ const ExportNotesSheet = ({
title={strings.share()}
type="secondaryAccented"
width={250}
fontSize={SIZE.md}
fontSize={AppFontSize.md}
style={{
marginTop: 10,
borderRadius: 100
@@ -351,7 +351,7 @@ const ExportNotesSheet = ({
title={strings.exportAgain()}
type="inverted"
width={250}
fontSize={SIZE.md}
fontSize={AppFontSize.md}
style={{
marginTop: 10,
borderRadius: 100
@@ -384,7 +384,7 @@ ExportNotesSheet.present = async (ids?: string[], allNotes?: boolean) => {
const styles = StyleSheet.create({
container: {
...getElevationStyle(5),
borderRadius: 5,
borderRadius: defaultBorderRadius,
paddingVertical: pv
},
buttonContainer: {
@@ -395,7 +395,7 @@ const styles = StyleSheet.create({
paddingVertical: pv,
paddingHorizontal: ph,
marginTop: 10,
borderRadius: 5,
borderRadius: defaultBorderRadius,
width: "100%",
justifyContent: "center",
alignItems: "center",
@@ -405,7 +405,7 @@ const styles = StyleSheet.create({
buttonText: {
//fontFamily: "sans-serif",
color: "white",
fontSize: SIZE.sm,
fontSize: AppFontSize.sm,
marginLeft: 5
},
overlay: {

6
apps/mobile/app/components/sheets/export-notes/share.jsx
View File

@@ -21,7 +21,7 @@ import React from "react";
import { View } from "react-native";
import FileViewer from "react-native-file-viewer";
import { ToastManager } from "../../../services/event-manager";
import { SIZE } from "../../../utils/size";
import { AppFontSize } from "../../../utils/size";
import { Button } from "../../ui/button";
import { strings } from "@notesnook/intl";
export const ShareComponent = ({ uri, name, padding }) => {
@@ -35,7 +35,7 @@ export const ShareComponent = ({ uri, name, padding }) => {
title={strings.open()}
type="accent"
width="100%"
fontSize={SIZE.md}
fontSize={AppFontSize.md}
onPress={async () => {
FileViewer.open(uri, {
showOpenWithDialog: true,
@@ -53,7 +53,7 @@ export const ShareComponent = ({ uri, name, padding }) => {
title={strings.share()}
type="shade"
width="100%"
fontSize={SIZE.md}
fontSize={AppFontSize.md}
style={{
marginTop: 10
}}

18
apps/mobile/app/components/sheets/github/issue.js
View File

@@ -28,7 +28,7 @@ import { ToastManager } from "../../../services/event-manager";
import PremiumService from "../../../services/premium";
import { useUserStore } from "../../../stores/use-user-store";
import { openLinkInBrowser } from "../../../utils/functions";
import { SIZE } from "../../../utils/size";
import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
import DialogHeader from "../../dialog/dialog-header";
import { Button } from "../../ui/button";
import Seperator from "../../ui/seperator";
@@ -147,11 +147,11 @@ Logged in: ${user ? "yes" : "no"}`,
style={{
borderWidth: 1,
borderColor: colors.primary.border,
borderRadius: 5,
borderRadius: defaultBorderRadius,
padding: 12,
fontFamily: "OpenSans-Regular",
marginBottom: 10,
fontSize: SIZE.md,
fontSize: AppFontSize.md,
color: colors.primary.heading
}}
placeholderTextColor={colors.primary.placeholder}
@@ -180,18 +180,18 @@ Logged in: ${user ? "yes" : "no"}`,
style={{
borderWidth: 1,
borderColor: colors.primary.border,
borderRadius: 5,
borderRadius: defaultBorderRadius,
padding: 12,
fontFamily: "OpenSans-Regular",
maxHeight: 200,
fontSize: SIZE.sm,
fontSize: AppFontSize.sm,
marginBottom: 2.5,
color: colors.primary.paragraph
}}
placeholderTextColor={colors.primary.placeholder}
/>
<Paragraph
size={SIZE.xs}
size={AppFontSize.xs}
color={colors.secondary.paragraph}
>{`App version: ${getVersion()} Platform: ${
Platform.OS
@@ -208,7 +208,7 @@ Logged in: ${user ? "yes" : "no"}`,
<Paragraph
color={colors.secondary.paragraph}
size={SIZE.xs}
size={AppFontSize.xs}
style={{
marginTop: 10,
textAlign: "center"
@@ -217,7 +217,9 @@ Logged in: ${user ? "yes" : "no"}`,
{strings.issueNotice[0]()}{" "}
<Text
onPress={() => {
Linking.openURL("https://github.com/streetwriters/notesnook/issues");
Linking.openURL(
"https://github.com/streetwriters/notesnook/issues"
);
}}
style={{
textDecorationLine: "underline",

15
apps/mobile/app/components/sheets/link-note/index.tsx
View File

@@ -33,7 +33,7 @@ import { db } from "../../../common/database";
import { useDBItem } from "../../../hooks/use-db-item";
import { editorController } from "../../../screens/editor/tiptap/utils";
import { presentSheet } from "../../../services/event-manager";
import { SIZE } from "../../../utils/size";
import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
import { Button } from "../../ui/button";
import Input from "../../ui/input";
import { Pressable } from "../../ui/pressable";
@@ -122,7 +122,7 @@ const ListBlockItem = ({
<View
style={{
borderRadius: 5,
borderRadius: defaultBorderRadius,
backgroundColor: colors.secondary.background,
height: 25,
minWidth: 25,
@@ -130,7 +130,7 @@ const ListBlockItem = ({
justifyContent: "center"
}}
>
<Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
<Paragraph color={colors.secondary.paragraph} size={AppFontSize.xs}>
{item.type.toUpperCase()}
</Paragraph>
</View>
@@ -254,7 +254,7 @@ export default function LinkNote(props: {
gap: 10
}}
>
<Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
<Paragraph color={colors.secondary.paragraph} size={AppFontSize.xs}>
{strings.linkNoteSelectedNote()}
</Paragraph>
<Pressable
@@ -284,7 +284,10 @@ export default function LinkNote(props: {
>
<Paragraph numberOfLines={1}>{selectedNote?.title}</Paragraph>
<Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
<Paragraph
color={colors.secondary.paragraph}
size={AppFontSize.xs}
>
{strings.tapToDeselect()}
</Paragraph>
</View>
@@ -296,7 +299,7 @@ export default function LinkNote(props: {
marginBottom: 12
}}
color={colors.secondary.paragraph}
size={SIZE.xs}
size={AppFontSize.xs}
>
{strings.linkNoteToSection()}
</Paragraph>

16
apps/mobile/app/components/sheets/manage-tags/index.tsx
View File

@@ -43,7 +43,7 @@ import {
} from "../../../stores/item-selection-store";
import { useRelationStore } from "../../../stores/use-relation-store";
import { useTagStore } from "../../../stores/use-tag-store";
import { SIZE } from "../../../utils/size";
import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
import Input from "../../ui/input";
import { Pressable } from "../../ui/pressable";
import Heading from "../../ui/typography/heading";
@@ -250,7 +250,7 @@ const ManageTagsSheet = (props: {
button={{
icon: "magnify",
color: colors.primary.accent,
size: SIZE.lg,
size: AppFontSize.lg,
onPress: () => {}
}}
testID="tag-input"
@@ -284,10 +284,14 @@ const ManageTagsSheet = (props: {
onPress={onSubmit}
type="selected"
>
<Heading size={SIZE.sm} color={colors.selected.heading}>
<Heading size={AppFontSize.sm} color={colors.selected.heading}>
{strings.add()} {'"' + "#" + query + '"'}
</Heading>
<Icon name="plus" color={colors.selected.icon} size={SIZE.lg} />
<Icon
name="plus"
color={colors.selected.icon}
size={AppFontSize.lg}
/>
</Pressable>
) : null}
@@ -403,13 +407,13 @@ const TagItem = ({
/>
)}
{tag ? (
<Paragraph size={SIZE.sm}>{"#" + tag?.title}</Paragraph>
<Paragraph size={AppFontSize.sm}>{"#" + tag?.title}</Paragraph>
) : (
<View
style={{
width: 200,
height: 30,
borderRadius: 5
borderRadius: defaultBorderRadius
}}
/>
)}

4
apps/mobile/app/components/sheets/move-notebook/index.tsx
View File

@@ -35,7 +35,7 @@ import {
findRootNotebookId,
getParentNotebookId
} from "../../../utils/notebooks";
import { SIZE } from "../../../utils/size";
import { AppFontSize } from "../../../utils/size";
import { Dialog } from "../../dialog";
import DialogHeader from "../../dialog/dialog-header";
import { presentDialog } from "../../dialog/functions";
@@ -322,7 +322,7 @@ const NotebookItem = ({
false
);
}}
size={SIZE.lg}
size={AppFontSize.lg}
/>
</View>
</Pressable>

6
apps/mobile/app/components/sheets/move-notes/movenote.tsx
View File

@@ -30,7 +30,7 @@ import { presentSheet } from "../../../services/event-manager";
import Navigation from "../../../services/navigation";
import { createItemSelectionStore } from "../../../stores/item-selection-store";
import { updateNotebook } from "../../../utils/notebooks";
import { SIZE } from "../../../utils/size";
import { AppFontSize } from "../../../utils/size";
import { Dialog } from "../../dialog";
import DialogHeader from "../../dialog/dialog-header";
import { Button } from "../../ui/button";
@@ -131,7 +131,7 @@ export const MoveNotes = ({
button={{
icon: "magnify",
color: colors.primary.accent,
size: SIZE.lg,
size: AppFontSize.lg,
onPress: () => {}
}}
testID="search-input"
@@ -270,7 +270,7 @@ const SelectableNoteItem = React.memo(
<Paragraph
numberOfLines={1}
color={colors?.secondary.paragraph}
size={SIZE.xs}
size={AppFontSize.xs}
>
{item.headline}
</Paragraph>

6
apps/mobile/app/components/sheets/new-feature/index.tsx
View File

@@ -26,7 +26,7 @@ import { features } from "../../../features";
import { eSendEvent, presentSheet } from "../../../services/event-manager";
import SettingsService from "../../../services/settings";
import { eCloseSheet } from "../../../utils/events";
import { SIZE } from "../../../utils/size";
import { AppFontSize } from "../../../utils/size";
import { Button } from "../../ui/button";
import Seperator from "../../ui/seperator";
import Heading from "../../ui/typography/heading";
@@ -56,7 +56,7 @@ const NewFeature = ({
maxHeight: "100%"
}}
>
<Heading color={colors.secondary.heading} size={SIZE.md}>
<Heading color={colors.secondary.heading} size={AppFontSize.md}>
{strings.newVersionHighlights(version)}
</Heading>
@@ -74,7 +74,7 @@ const NewFeature = ({
marginBottom: 10
}}
>
<Heading size={SIZE.lg - 2}>{item.title}</Heading>
<Heading size={AppFontSize.lg - 2}>{item.title}</Heading>
<Paragraph selectable>{item.body}</Paragraph>
</View>
))}

16
apps/mobile/app/components/sheets/notebook-sheet/index.tsx
View File

@@ -43,7 +43,7 @@ import { useSelectionStore } from "../../../stores/use-selection-store";
import { eOnNotebookUpdated } from "../../../utils/events";
import { deleteItems } from "../../../utils/functions";
import { findRootNotebookId } from "../../../utils/notebooks";
import { SIZE, normalize } from "../../../utils/size";
import { AppFontSize, normalize } from "../../../utils/size";
import { Properties } from "../../properties";
import { IconButton } from "../../ui/icon-button";
import { Pressable } from "../../ui/pressable";
@@ -264,7 +264,7 @@ export const NotebookSheet = () => {
width: normalize(50)
}}
>
<Icon name="plus" color="white" size={SIZE.xxl} />
<Icon name="plus" color="white" size={AppFontSize.xxl} />
</View>
</Pressable>
</View>
@@ -283,7 +283,7 @@ export const NotebookSheet = () => {
alignItems: "center"
}}
>
<Paragraph size={SIZE.xs} color={colors.primary.icon}>
<Paragraph size={AppFontSize.xs} color={colors.primary.icon}>
{strings.notebooks()}
</Paragraph>
<View
@@ -539,7 +539,7 @@ const NotebookItem = ({
>
{nestedNotebooks?.placeholders.length ? (
<IconButton
size={SIZE.lg}
size={AppFontSize.lg}
color={isSelected ? colors.selected.icon : colors.primary.icon}
onPress={() => {
if (!item?.id) return;
@@ -566,7 +566,7 @@ const NotebookItem = ({
{enabled ? (
<IconButton
size={SIZE.lg}
size={AppFontSize.lg}
color={isSelected ? colors.selected.icon : colors.primary.icon}
top={0}
left={0}
@@ -589,7 +589,7 @@ const NotebookItem = ({
color={
isFocused ? colors.selected.paragraph : colors.secondary.paragraph
}
size={SIZE.sm}
size={AppFontSize.sm}
>
{item?.title}
</Paragraph>
@@ -603,7 +603,7 @@ const NotebookItem = ({
}}
>
{item?.id && totalNotes?.(item?.id) ? (
<Paragraph size={SIZE.sm} color={colors.secondary.paragraph}>
<Paragraph size={AppFontSize.sm} color={colors.secondary.paragraph}>
{totalNotes(item?.id)}
</Paragraph>
) : null}
@@ -622,7 +622,7 @@ const NotebookItem = ({
bottom={0}
top={0}
color={colors.primary.icon}
size={SIZE.xl}
size={AppFontSize.xl}
/>
</View>
</Pressable>

4
apps/mobile/app/components/sheets/progress/index.tsx
View File

@@ -22,7 +22,7 @@ import { View } from "react-native";
import useSyncProgress from "../../../hooks/use-sync-progress";
import { presentSheet } from "../../../services/event-manager";
import { useThemeColors } from "@notesnook/theme";
import { SIZE } from "../../../utils/size";
import { AppFontSize } from "../../../utils/size";
import Seperator from "../../ui/seperator";
import { ProgressBarComponent } from "../../ui/svg/lazy";
import Heading from "../../ui/typography/heading";
@@ -52,7 +52,7 @@ export const Progress = () => {
paddingBottom: 15
}}
>
<Heading size={SIZE.lg}>{strings.syncingHeading()}</Heading>
<Heading size={AppFontSize.lg}>{strings.syncingHeading()}</Heading>
<Paragraph>{strings.syncingDesc()}</Paragraph>
<Seperator />
<View

34
apps/mobile/app/components/sheets/publish-note/index.tsx
View File

@@ -27,7 +27,7 @@ import Navigation from "../../../services/navigation";
import { useAttachmentStore } from "../../../stores/use-attachment-store";
import { useThemeColors } from "@notesnook/theme";
import { openLinkInBrowser } from "../../../utils/functions";
import { SIZE } from "../../../utils/size";
import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
import DialogHeader from "../../dialog/dialog-header";
import { Button } from "../../ui/button";
import { IconButton } from "../../ui/icon-button";
@@ -158,7 +158,7 @@ const PublishNoteSheet = ({
marginTop: 10,
backgroundColor: colors.secondary.background,
padding: 12,
borderRadius: 5
borderRadius: defaultBorderRadius
}}
>
<View
@@ -167,8 +167,10 @@ const PublishNoteSheet = ({
flexShrink: 1
}}
>
<Heading size={SIZE.md}>{strings.publishedAt()}:</Heading>
<Paragraph size={SIZE.sm} numberOfLines={1}>
<Heading size={AppFontSize.md}>
{strings.publishedAt()}:
</Heading>
<Paragraph size={AppFontSize.sm} numberOfLines={1}>
{publishUrl}
</Paragraph>
<Paragraph
@@ -179,7 +181,7 @@ const PublishNoteSheet = ({
console.error(e);
}
}}
size={SIZE.xs}
size={AppFontSize.xs}
style={{
marginTop: 5,
color: colors.primary.paragraph
@@ -200,7 +202,7 @@ const PublishNoteSheet = ({
});
}}
color={colors.primary.accent}
size={SIZE.lg}
size={AppFontSize.lg}
name="content-copy"
/>
</View>
@@ -218,7 +220,7 @@ const PublishNoteSheet = ({
marginBottom: 10,
backgroundColor: colors.secondary.background,
paddingVertical: 12,
borderRadius: 5,
borderRadius: defaultBorderRadius,
marginTop: 10
}}
>
@@ -228,7 +230,7 @@ const PublishNoteSheet = ({
setIsLocked(!isLocked);
}}
color={isLocked ? colors.selected.icon : colors.primary.icon}
size={SIZE.xl}
size={AppFontSize.xl}
name={
isLocked
? "check-circle-outline"
@@ -242,7 +244,9 @@ const PublishNoteSheet = ({
flexShrink: 1
}}
>
<Heading size={SIZE.md}>{strings.monographPassHeading()}</Heading>
<Heading size={AppFontSize.md}>
{strings.monographPassHeading()}
</Heading>
<Paragraph>{strings.monographPassDesc()}</Paragraph>
</View>
</TouchableOpacity>
@@ -257,7 +261,7 @@ const PublishNoteSheet = ({
alignItems: "center",
backgroundColor: colors.secondary.background,
paddingVertical: 12,
borderRadius: 5
borderRadius: defaultBorderRadius
}}
>
<IconButton
@@ -265,7 +269,7 @@ const PublishNoteSheet = ({
setSelfDestruct(!selfDestruct);
}}
color={selfDestruct ? colors.selected.icon : colors.primary.icon}
size={SIZE.xl}
size={AppFontSize.xl}
name={
selfDestruct
? "check-circle-outline"
@@ -279,7 +283,7 @@ const PublishNoteSheet = ({
flexShrink: 1
}}
>
<Heading size={SIZE.md}>
<Heading size={AppFontSize.md}>
{strings.monographSelfDestructHeading()}
</Heading>
<Paragraph>{strings.monographSelfDestructDesc()}</Paragraph>
@@ -318,7 +322,7 @@ const PublishNoteSheet = ({
<>
<Button
onPress={deletePublishedNote}
fontSize={SIZE.md}
fontSize={AppFontSize.md}
type="error"
title={strings.unpublish()}
style={{
@@ -330,7 +334,7 @@ const PublishNoteSheet = ({
<Seperator half />
<Button
onPress={publishNote}
fontSize={SIZE.md}
fontSize={AppFontSize.md}
style={{
width: isPublished ? "49%" : 250,
borderRadius: isPublished ? 5 : 100
@@ -345,7 +349,7 @@ const PublishNoteSheet = ({
<Paragraph
color={colors.secondary.paragraph}
size={SIZE.xs}
size={AppFontSize.xs}
style={{
textAlign: "center",
marginTop: 10,

10
apps/mobile/app/components/sheets/rate-app/index.js
View File

@@ -27,7 +27,7 @@ import { clearMessage } from "../../../services/message";
import SettingsService from "../../../services/settings";
import { STORE_LINK } from "../../../utils/constants";
import { eCloseRateDialog, eOpenRateDialog } from "../../../utils/events";
import { SIZE } from "../../../utils/size";
import { AppFontSize } from "../../../utils/size";
import { Button } from "../../ui/button";
import Seperator from "../../ui/seperator";
import SheetWrapper from "../../ui/sheet";
@@ -87,12 +87,12 @@ const RateAppSheet = () => {
}}
>
<Heading>{strings.rateAppHeading()}</Heading>
<Paragraph size={SIZE.md}>{strings.rateAppDesc()}</Paragraph>
<Paragraph size={AppFontSize.md}>{strings.rateAppDesc()}</Paragraph>
<Seperator half />
<Button
onPress={rateApp}
fontSize={SIZE.md}
fontSize={AppFontSize.md}
width="100%"
type="accent"
title={strings.rateApp()}
@@ -115,14 +115,14 @@ const RateAppSheet = () => {
setVisible(false);
clearMessage();
}}
fontSize={SIZE.md}
fontSize={AppFontSize.md}
type="error"
width="48%"
title={strings.never()}
/>
<Button
onPress={onClose}
fontSize={SIZE.md}
fontSize={AppFontSize.md}
width="48%"
type="secondary"
title={strings.later()}

18
apps/mobile/app/components/sheets/recovery-key/index.jsx
View File

@@ -36,7 +36,7 @@ import {
import { clearMessage } from "../../../services/message";
import SettingsService from "../../../services/settings";
import { eOpenRecoveryKeyDialog } from "../../../utils/events";
import { SIZE } from "../../../utils/size";
import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
import { sleep } from "../../../utils/time";
import DialogHeader from "../../dialog/dialog-header";
import { Button } from "../../ui/button";
@@ -235,14 +235,14 @@ class RecoveryKeySheet extends React.Component {
<View
style={{
borderRadius: 5,
borderRadius: defaultBorderRadius,
padding: 12,
marginTop: 10
}}
>
<Paragraph
color={colors.primary.paragraph}
size={SIZE.sm}
size={AppFontSize.sm}
numberOfLines={2}
selectable
style={{
@@ -294,7 +294,7 @@ class RecoveryKeySheet extends React.Component {
title={strings.copyToClipboard()}
width="100%"
type="secondaryAccented"
fontSize={SIZE.md}
fontSize={AppFontSize.md}
/>
<Seperator />
<Button
@@ -302,7 +302,7 @@ class RecoveryKeySheet extends React.Component {
onPress={this.saveQRCODE}
width="100%"
type="secondaryAccented"
fontSize={SIZE.md}
fontSize={AppFontSize.md}
icon="qrcode"
/>
<Seperator />
@@ -312,7 +312,7 @@ class RecoveryKeySheet extends React.Component {
width="100%"
type="secondaryAccented"
icon="text"
fontSize={SIZE.md}
fontSize={AppFontSize.md}
/>
<Seperator />
@@ -322,13 +322,13 @@ class RecoveryKeySheet extends React.Component {
width="100%"
type="secondaryAccented"
icon="cloud"
fontSize={SIZE.md}
fontSize={AppFontSize.md}
/>
<Seperator />
<Paragraph
color={colors.secondary.paragraph}
size={SIZE.sm}
size={AppFontSize.sm}
numberOfLines={2}
style={{
width: "100%",
@@ -343,7 +343,7 @@ class RecoveryKeySheet extends React.Component {
title={strings.done()}
width="100%"
type="error"
fontSize={SIZE.md}
fontSize={AppFontSize.md}
onPress={this.close}
/>
</View>

13
apps/mobile/app/components/sheets/references/index.tsx
View File

@@ -35,7 +35,7 @@ import { eSendEvent, presentSheet } from "../../../services/event-manager";
import { useRelationStore } from "../../../stores/use-relation-store";
import { eOnLoadNote } from "../../../utils/events";
import { fluidTabsRef } from "../../../utils/global-refs";
import { SIZE } from "../../../utils/size";
import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
import SheetProvider from "../../sheet-provider";
import { Button } from "../../ui/button";
import { IconButton } from "../../ui/icon-button";
@@ -106,7 +106,7 @@ const ListBlockItem = ({
<View
style={{
borderRadius: 5,
borderRadius: defaultBorderRadius,
backgroundColor: colors.secondary.background,
width: 25,
height: 25,
@@ -114,7 +114,7 @@ const ListBlockItem = ({
justifyContent: "center"
}}
>
<Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
<Paragraph color={colors.secondary.paragraph} size={AppFontSize.xs}>
{item.type.toUpperCase()}
</Paragraph>
</View>
@@ -327,7 +327,7 @@ const ListNoteItem = ({
}}
>
<IconButton
size={SIZE.xl}
size={AppFontSize.xl}
onPress={() => {
if (!item?.id) return;
useExpandedStore.getState().setExpanded(item?.id);
@@ -354,7 +354,10 @@ const ListNoteItem = ({
}}
>
{loading ? (
<ActivityIndicator color={colors.primary.accent} size={SIZE.lg} />
<ActivityIndicator
color={colors.primary.accent}
size={AppFontSize.lg}
/>
) : (
<>
{listType === "linkedNotes" ? (

4
apps/mobile/app/components/sheets/relations-list/index.tsx
View File

@@ -30,7 +30,7 @@ import {
presentSheet
} from "../../../services/event-manager";
import { useRelationStore } from "../../../stores/use-relation-store";
import { SIZE } from "../../../utils/size";
import { AppFontSize } from "../../../utils/size";
import DialogHeader from "../../dialog/dialog-header";
import List from "../../list";
import SheetProvider from "../../sheet-provider";
@@ -119,7 +119,7 @@ export const RelationsList = ({
onPress={() => {
onAdd?.();
}}
fontSize={SIZE.sm}
fontSize={AppFontSize.sm}
// width="100%"
type="inverted"
icon="plus"

8
apps/mobile/app/components/sheets/reminder-notify/index.tsx
View File

@@ -29,7 +29,7 @@ import {
} from "../../../services/event-manager";
import Notifications from "../../../services/notifications";
import { useThemeColors } from "@notesnook/theme";
import { SIZE } from "../../../utils/size";
import { AppFontSize } from "../../../utils/size";
import List from "../../list";
import { Button } from "../../ui/button";
import Heading from "../../ui/typography/heading";
@@ -135,7 +135,7 @@ export default function ReminderNotify({
marginTop: 10
}}
>
<Paragraph size={SIZE.xs}>{strings.remindMeIn()}:</Paragraph>
<Paragraph size={AppFontSize.xs}>{strings.remindMeIn()}:</Paragraph>
{QuickActions.map((item) => {
return (
<Button
@@ -143,7 +143,7 @@ export default function ReminderNotify({
key={item.title}
title={item.title}
height={30}
fontSize={SIZE.xs}
fontSize={AppFontSize.xs}
style={{ marginLeft: 10, borderRadius: 100 }}
onPress={() => onSnooze(item.time)}
/>
@@ -168,7 +168,7 @@ export default function ReminderNotify({
<Paragraph
style={{
color: colors.secondary.paragraph,
fontSize: SIZE.xs,
fontSize: AppFontSize.xs,
marginBottom: 10
}}
>

21
apps/mobile/app/components/sheets/reminder/index.tsx
View File

@@ -31,7 +31,7 @@ import {
ToastManager,
presentSheet
} from "../../../services/event-manager";
import { SIZE } from "../../../utils/size";
import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
import { Button } from "../../ui/button";
import Input from "../../ui/input";
@@ -228,7 +228,7 @@ export default function ReminderSheet({
maxHeight: "100%"
}}
>
<Heading size={SIZE.lg}>
<Heading size={AppFontSize.lg}>
{reminder ? strings.editReminder() : strings.newReminder()}
</Heading>
@@ -324,7 +324,7 @@ export default function ReminderSheet({
style={{
backgroundColor: colors.secondary.background,
padding: 12,
borderRadius: 5,
borderRadius: defaultBorderRadius,
marginBottom: 12
}}
>
@@ -382,7 +382,7 @@ export default function ReminderSheet({
type={
selectedDays.indexOf(index) > -1 ? "selected" : "plain"
}
fontSize={SIZE.sm - 1}
fontSize={AppFontSize.sm - 1}
style={{
width: 40,
height: 40,
@@ -410,7 +410,7 @@ export default function ReminderSheet({
? "selected"
: "plain"
}
fontSize={SIZE.sm - 1}
fontSize={AppFontSize.sm - 1}
style={{
width: 40,
height: 40,
@@ -480,7 +480,7 @@ export default function ReminderSheet({
title={date ? date.toLocaleDateString() : strings.selectDate()}
type={date ? "secondaryAccented" : "secondary"}
icon="calendar"
fontSize={SIZE.md}
fontSize={AppFontSize.md}
onPress={() => {
showDatePicker();
}}
@@ -493,7 +493,7 @@ export default function ReminderSheet({
reminderMode === ReminderModes.Permanent ? null : (
<View
style={{
borderRadius: 5,
borderRadius: defaultBorderRadius,
flexDirection: "row",
paddingVertical: 6,
paddingHorizontal: 12,
@@ -504,7 +504,10 @@ export default function ReminderSheet({
}}
>
<>
<Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
<Paragraph
size={AppFontSize.xs}
color={colors.secondary.paragraph}
>
{recurringMode === RecurringModes.Daily
? strings.reminderRepeatStrings.day(
dayjs(date).format("hh:mm A")
@@ -598,7 +601,7 @@ export default function ReminderSheet({
title={strings.save()}
type="accent"
height={45}
fontSize={SIZE.md}
fontSize={AppFontSize.md}
style={{
paddingHorizontal: 24,
marginTop: 10,

199
apps/mobile/app/components/sheets/sort/index.tsx
View File

@@ -31,16 +31,26 @@ import { db } from "../../../common/database";
import { eSendEvent } from "../../../services/event-manager";
import Navigation from "../../../services/navigation";
import { RouteName } from "../../../stores/use-navigation-store";
import { useNotebookStore } from "../../../stores/use-notebook-store";
import { useTagStore } from "../../../stores/use-tag-store";
import { GROUP, SORT } from "../../../utils/constants";
import { eGroupOptionsUpdated, refreshNotesPage } from "../../../utils/events";
import { SIZE } from "../../../utils/size";
import { AppFontSize } from "../../../utils/size";
import { DefaultAppStyles } from "../../../utils/styles";
import AppIcon from "../../ui/AppIcon";
import { Button } from "../../ui/button";
import { Pressable } from "../../ui/pressable";
import Heading from "../../ui/typography/heading";
import Paragraph from "../../ui/typography/paragraph";
const Sort = ({ type, screen }: { type: ItemType; screen: RouteName }) => {
const Sort = ({
type,
screen,
hideGroupOptions
}: {
type: ItemType;
screen?: RouteName;
hideGroupOptions?: boolean;
}) => {
const { colors } = useThemeColors();
const [groupOptions, setGroupOptions] = useState(
db.settings.getGroupOptions(
@@ -54,7 +64,12 @@ const Sort = ({ type, screen }: { type: ItemType; screen: RouteName }) => {
await db.settings.setGroupOptions(groupType, _groupOptions);
setGroupOptions(_groupOptions);
setTimeout(() => {
Navigation.queueRoutesForUpdate(screen);
if (screen) Navigation.queueRoutesForUpdate(screen);
if (type === "notebook") {
useNotebookStore.getState().refresh();
} else if (type === "tag") {
useTagStore.getState().refresh();
}
eSendEvent(eGroupOptionsUpdated, groupType);
eSendEvent(refreshNotesPage);
}, 1);
@@ -88,7 +103,7 @@ const Sort = ({ type, screen }: { type: ItemType; screen: RouteName }) => {
}}
>
<Heading
size={SIZE.md}
size={AppFontSize.md}
style={{
alignSelf: "center"
}}
@@ -119,7 +134,7 @@ const Sort = ({ type, screen }: { type: ItemType; screen: RouteName }) => {
}
height={30}
iconPosition="right"
fontSize={SIZE.sm}
fontSize={AppFontSize.sm}
type="plain"
style={{
paddingHorizontal: DefaultAppStyles.GAP_SMALL
@@ -135,95 +150,16 @@ const Sort = ({ type, screen }: { type: ItemType; screen: RouteName }) => {
borderBottomColor: colors.primary.border
}}
>
{groupOptions?.groupBy === "abc" ? (
<Button
type="secondary"
title={strings.title()}
height={40}
iconPosition="left"
icon={"check"}
buttonType={{ text: colors.primary.accent }}
fontSize={SIZE.sm}
iconSize={SIZE.md}
/>
) : (
Object.keys(SORT).map((item) =>
(item === "dueDate" && screen !== "Reminders") ||
(screen !== "Tags" &&
screen !== "Reminders" &&
item === "dateModified") ||
((screen === "Tags" || screen === "Reminders") &&
item === "dateEdited") ? null : (
<Pressable
key={item}
type={groupOptions?.sortBy === item ? "selected" : "plain"}
noborder
style={{
width: "100%",
justifyContent: "space-between",
height: 40,
flexDirection: "row",
borderRadius: 0,
paddingHorizontal: DefaultAppStyles.GAP
}}
onPress={async () => {
const _groupOptions: GroupOptions = {
...groupOptions,
sortBy:
type === "trash"
? "dateDeleted"
: (item as SortOptions["sortBy"])
};
await updateGroupOptions(_groupOptions);
}}
>
<Paragraph>
{strings.sortByStrings[
item as keyof typeof strings.sortByStrings
]()}
</Paragraph>
{groupOptions.sortBy === item ? (
<AppIcon
size={SIZE.lg}
name="check"
color={colors.selected.accent}
/>
) : null}
</Pressable>
)
)
)}
</View>
<>
<View
style={{
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
paddingHorizontal: DefaultAppStyles.GAP,
paddingVertical: DefaultAppStyles.GAP_VERTICAL
}}
>
<Heading size={SIZE.md}>{strings.groupBy()}</Heading>
</View>
<View
style={{
borderRadius: 0,
flexDirection: "row",
flexWrap: "wrap"
}}
>
{Object.keys(GROUP).map((item) => (
{Object.keys(SORT).map((item) =>
(item === "dueDate" && screen !== "Reminders") ||
(screen !== "Tags" &&
screen !== "Reminders" &&
item === "dateModified") ||
((screen === "Tags" || screen === "Reminders") &&
item === "dateEdited") ? null : (
<Pressable
key={item}
type={
groupOptions?.groupBy === GROUP[item as keyof typeof GROUP]
? "selected"
: "plain"
}
type={groupOptions?.sortBy === item ? "selected" : "plain"}
noborder
style={{
width: "100%",
@@ -245,22 +181,87 @@ const Sort = ({ type, screen }: { type: ItemType; screen: RouteName }) => {
}}
>
<Paragraph>
{strings.groupByStrings[
item as keyof typeof strings.groupByStrings
{strings.sortByStrings[
item as keyof typeof strings.sortByStrings
]()}
</Paragraph>
{groupOptions.groupBy === item ? (
{groupOptions.sortBy === item ? (
<AppIcon
size={SIZE.lg}
size={AppFontSize.lg}
name="check"
color={colors.selected.accent}
/>
) : null}
</Pressable>
))}
</View>
</>
)
)}
</View>
{!hideGroupOptions ? (
<>
<View
style={{
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
paddingHorizontal: DefaultAppStyles.GAP,
paddingVertical: DefaultAppStyles.GAP_VERTICAL
}}
>
<Heading size={AppFontSize.md}>{strings.groupBy()}</Heading>
</View>
<View
style={{
borderRadius: 0,
flexDirection: "row",
flexWrap: "wrap"
}}
>
{Object.keys(GROUP).map((item) => (
<Pressable
key={item}
type={
groupOptions?.groupBy === GROUP[item as keyof typeof GROUP]
? "selected"
: "plain"
}
noborder
style={{
width: "100%",
justifyContent: "space-between",
height: 40,
flexDirection: "row",
borderRadius: 0,
paddingHorizontal: DefaultAppStyles.GAP
}}
onPress={async () => {
const _groupOptions: GroupOptions = {
...groupOptions,
groupBy: item as GroupOptions["groupBy"]
};
await updateGroupOptions(_groupOptions);
}}
>
<Paragraph>
{strings.groupByStrings[
item as keyof typeof strings.groupByStrings
]()}
</Paragraph>
{groupOptions.groupBy === item ? (
<AppIcon
size={AppFontSize.lg}
name="check"
color={colors.selected.accent}
/>
) : null}
</Pressable>
))}
</View>
</>
) : null}
</View>
);
};

6
apps/mobile/app/components/sheets/toc/index.tsx
View File

@@ -21,7 +21,7 @@ import React from "react";
import { View } from "react-native";
import { Pressable } from "../../ui/pressable";
import Paragraph from "../../ui/typography/paragraph";
import { SIZE } from "../../../utils/size";
import { AppFontSize } from "../../../utils/size";
import { presentSheet } from "../../../services/event-manager";
import Heading from "../../ui/typography/heading";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
@@ -86,7 +86,7 @@ const TableOfContentsItem: React.FC<{
? colors.selected.paragraph
: colors.primary.paragraph
}
size={SIZE.md}
size={AppFontSize.md}
>
{item?.title || strings.newNote()}
</Paragraph>
@@ -112,7 +112,7 @@ const TableOfContents = ({ toc, close }: TableOfContentsProps) => {
alignItems: "center"
}}
>
<Heading size={SIZE.lg}>{strings.toc()}</Heading>
<Heading size={AppFontSize.lg}>{strings.toc()}</Heading>
</View>
<FlatList

10
apps/mobile/app/components/sheets/update/index.js
View File

@@ -25,7 +25,7 @@ import Config from "react-native-config";
import deviceInfoModule from "react-native-device-info";
import { useThemeColors } from "@notesnook/theme";
import { STORE_LINK } from "../../../utils/constants";
import { SIZE } from "../../../utils/size";
import { AppFontSize } from "../../../utils/size";
import { Button } from "../../ui/button";
import Seperator from "../../ui/seperator";
import { SvgView } from "../../ui/svg";
@@ -102,7 +102,7 @@ export const Update = ({ version: appVersion, fwdRef }) => {
{!version ? (
<>
<ProgressBarComponent
size={SIZE.xxl}
size={AppFontSize.xxl}
indeterminate={true}
color={colors.primary.accent}
borderWidth={0}
@@ -113,13 +113,13 @@ export const Update = ({ version: appVersion, fwdRef }) => {
style={{
marginTop: 5
}}
size={SIZE.md}
size={AppFontSize.md}
>
{strings.checkNewVersion()}
</Paragraph>
</>
) : (
<Paragraph size={SIZE.md}>{strings.noUpdates()}</Paragraph>
<Paragraph size={AppFontSize.md}>{strings.noUpdates()}</Paragraph>
)}
</View>
</>
@@ -161,7 +161,7 @@ export const Update = ({ version: appVersion, fwdRef }) => {
width: "100%"
}}
>
<Heading size={SIZE.md}>{strings.releaseNotes()}:</Heading>
<Heading size={AppFontSize.md}>{strings.releaseNotes()}:</Heading>
{version.body ? (
<Paragraph

121
apps/mobile/app/components/sheets/user/index.tsx
View File

@@ -27,14 +27,16 @@ import useSyncProgress from "../../../hooks/use-sync-progress";
import { presentSheet } from "../../../services/event-manager";
import Navigation from "../../../services/navigation";
import { SyncStatus, useUserStore } from "../../../stores/use-user-store";
import { SIZE } from "../../../utils/size";
import { getObfuscatedEmail } from "../../../utils/functions";
import { AppFontSize } from "../../../utils/size";
import { DefaultAppStyles } from "../../../utils/styles";
import { AuthMode } from "../../auth/common";
import { Card } from "../../list/card";
import AppIcon from "../../ui/AppIcon";
import { Button } from "../../ui/button";
import { Pressable } from "../../ui/pressable";
import { TimeSince } from "../../ui/time-since";
import Paragraph from "../../ui/typography/paragraph";
import Sync from "../../../services/sync";
export const UserSheet = () => {
const ref = useSheetRef();
@@ -58,7 +60,6 @@ export const UserSheet = () => {
style={{
width: "100%",
justifyContent: "center",
paddingHorizontal: DefaultAppStyles.GAP,
gap: DefaultAppStyles.GAP
}}
>
@@ -66,19 +67,23 @@ export const UserSheet = () => {
<View
style={{
flexDirection: "row",
alignItems: "center"
alignItems: "center",
paddingHorizontal: DefaultAppStyles.GAP,
gap: DefaultAppStyles.GAP_SMALL
}}
>
<Image
source={{
uri: userProfile?.profilePicture
}}
style={{
width: 40,
height: 40,
borderRadius: 10
}}
/>
{userProfile?.profilePicture ? (
<Image
source={{
uri: userProfile?.profilePicture
}}
style={{
width: 40,
height: 40,
borderRadius: 10
}}
/>
) : null}
<View
style={{
@@ -87,27 +92,17 @@ export const UserSheet = () => {
justifyContent: "space-between"
}}
>
<View style={{ marginLeft: 10 }}>
<Paragraph size={SIZE.xs}>{userProfile?.fullName}</Paragraph>
<View>
<Paragraph size={AppFontSize.xs}>
{userProfile?.fullName || getObfuscatedEmail(user.email)}
</Paragraph>
<Paragraph
style={{
flexWrap: "wrap"
}}
size={SIZE.xxs}
size={AppFontSize.xxs}
color={colors.secondary.heading}
>
<AppIcon
name="checkbox-blank-circle"
size={10}
allowFontScaling
color={
!user || lastSyncStatus === SyncStatus.Failed
? colors.error.icon
: isOffline
? colors.static.orange
: colors.success.icon
}
/>{" "}
{!user ? (
strings.notLoggedIn()
) : lastSynced && lastSynced !== "Never" ? (
@@ -122,7 +117,7 @@ export const UserSheet = () => {
{!syncing ? (
<TimeSince
style={{
fontSize: SIZE.xxs,
fontSize: AppFontSize.xxs,
color: colors.secondary.paragraph
}}
updateFrequency={30 * 1000}
@@ -133,13 +128,25 @@ export const UserSheet = () => {
</>
) : (
strings.never()
)}
)}{" "}
<AppIcon
name="checkbox-blank-circle"
size={10}
allowFontScaling
color={
!user || lastSyncStatus === SyncStatus.Failed
? colors.error.icon
: isOffline
? colors.static.orange
: colors.success.icon
}
/>
</Paragraph>
</View>
{syncing ? (
<ActivityIndicator
color={colors.primary.accent}
size={SIZE.xxl}
size={AppFontSize.xxl}
/>
) : null}
</View>
@@ -150,11 +157,24 @@ export const UserSheet = () => {
width: "100%"
}}
>
<Card />
<Card
customMessage={{
visible: true,
message: strings.notLoggedIn(),
actionText: strings.loginMessageActionText(),
icon: "account-outline",
onPress: () => {
ref.current?.hide();
Navigation.navigate("Auth", {
mode: AuthMode.login
});
}
}}
/>
</View>
)}
{user ? (
{/* {user ? (
<View
style={{
paddingVertical: DefaultAppStyles.GAP_SMALL,
@@ -176,8 +196,10 @@ export const UserSheet = () => {
justifyContent: "space-between"
}}
>
<Paragraph size={SIZE.xxs}>{strings.storage()}</Paragraph>
<Paragraph size={SIZE.xxs}>50/100MB {strings.used()}</Paragraph>
<Paragraph size={AppFontSize.xxs}>{strings.storage()}</Paragraph>
<Paragraph size={AppFontSize.xxs}>
50/100MB {strings.used()}
</Paragraph>
</View>
<View
style={{
@@ -209,10 +231,13 @@ export const UserSheet = () => {
}}
>
<View>
<Paragraph size={SIZE.sm}>{strings.freePlan()}</Paragraph>
<Paragraph color={colors.secondary.paragraph} size={SIZE.xxxs}>
<Paragraph size={AppFontSize.sm}>{strings.freePlan()}</Paragraph>
<Paragraph
color={colors.secondary.paragraph}
size={AppFontSize.xxxs}
>
{strings.viewAllLimits()}
<AppIcon name="information" size={SIZE.xxxs} />
<AppIcon name="information" size={AppFontSize.xxxs} />
</Paragraph>
</View>
@@ -220,7 +245,7 @@ export const UserSheet = () => {
title={strings.upgradeNow()}
onPress={() => {}}
type="accent"
fontSize={SIZE.xs}
fontSize={AppFontSize.xs}
style={{
paddingHorizontal: DefaultAppStyles.GAP_SMALL,
height: "auto",
@@ -229,7 +254,8 @@ export const UserSheet = () => {
/>
</View>
</View>
) : null}
) : null} */}
<View
style={{
borderBottomWidth: 1,
@@ -245,9 +271,11 @@ export const UserSheet = () => {
>
{[
{
icon: "account-outline",
title: strings.editProfile(),
onPress: () => {},
icon: "reload",
title: strings.syncNow(),
onPress: () => {
Sync.run();
},
hidden: !user
},
{
@@ -255,7 +283,6 @@ export const UserSheet = () => {
title: strings.settings(),
onPress: () => {
ref.current?.hide();
Navigation.closeDrawer();
Navigation.navigate("Settings");
}
},
@@ -277,7 +304,7 @@ export const UserSheet = () => {
flexDirection: "row",
justifyContent: "flex-start",
gap: DefaultAppStyles.GAP_SMALL,
paddingHorizontal: DefaultAppStyles.GAP_SMALL
paddingHorizontal: DefaultAppStyles.GAP
}}
onPress={() => {
item.onPress();
@@ -286,7 +313,7 @@ export const UserSheet = () => {
<AppIcon
color={colors.secondary.icon}
name={item.icon}
size={SIZE.xl}
size={AppFontSize.xl}
/>
<Paragraph>{item.title}</Paragraph>
</Pressable>

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

@@ -19,7 +19,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
import { useThemeColors } from "@notesnook/theme";
import React from "react";
import { Image, View } from "react-native";
import { View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import {
NavigationState,
@@ -31,13 +31,17 @@ import {
} from "react-native-tab-view";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import { db } from "../../common/database";
import { useGroupOptions } from "../../hooks/use-group-options";
import { presentSheet, ToastManager } from "../../services/event-manager";
import Navigation from "../../services/navigation";
import { useUserStore } from "../../stores/use-user-store";
import { useThemeStore } from "../../stores/use-theme-store";
import { deleteItems } from "../../utils/functions";
import { rootNavigatorRef } from "../../utils/global-refs";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import { DefaultAppStyles } from "../../utils/styles";
import { AddNotebookSheet } from "../sheets/add-notebook";
import { MoveNotebookSheet } from "../sheets/move-notebook";
import Sort from "../sheets/sort";
import { IconButton } from "../ui/icon-button";
import { Pressable } from "../ui/pressable";
import Paragraph from "../ui/typography/paragraph";
import { SideMenuHome } from "./side-menu-home";
@@ -47,6 +51,9 @@ import {
useSideMenuNotebookSelectionStore,
useSideMenuTagsSelectionStore
} from "./stores";
import { presentDialog } from "../dialog/functions";
import { strings } from "@notesnook/intl";
import { useTagStore } from "../../stores/use-tag-store";
const renderScene = SceneMap({
home: SideMenuHome,
notebooks: SideMenuNotebooks,
@@ -70,10 +77,6 @@ export const SideMenu = React.memo(
{
key: "tags",
title: "Tags"
},
{
key: "settings",
title: "Settings"
}
]);
@@ -92,6 +95,7 @@ export const SideMenu = React.memo(
onIndexChange={setIndex}
swipeEnabled={false}
animationEnabled={false}
lazy={true}
/>
</SafeAreaView>
);
@@ -99,78 +103,16 @@ export const SideMenu = React.memo(
() => true
);
const SettingsIcon = (props: {
route: Route;
isFocused: boolean;
jumpTo: (routeName: string) => void;
}) => {
const { colors } = useThemeColors();
const userProfile = useUserStore((state) => state.profile);
const user = useUserStore((state) => state.user);
return (
<Pressable
key={props.route.key}
onPress={() => {
rootNavigatorRef.navigate("Settings");
// if (!user) {
// rootNavigatorRef.navigate("Settings");
// return;
// }
// UserSheet.present();
}}
style={{
borderRadius: 10,
paddingVertical: 2,
width: "25%"
}}
type={props.isFocused ? "selected" : "plain"}
>
{userProfile?.profilePicture ? (
<Image
source={{
uri: userProfile?.profilePicture
}}
style={{
width: SIZE.lg,
height: SIZE.lg,
borderRadius: 100
}}
/>
) : (
<Icon
name="cog-outline"
color={props.isFocused ? colors.primary.accent : colors.primary.icon}
size={SIZE.lg}
/>
)}
<Paragraph
color={
props.isFocused
? colors.primary.paragraph
: colors.secondary.paragraph
}
style={{
opacity: props.isFocused ? 1 : 0.6
}}
size={SIZE.xxxs - 1}
>
{userProfile?.fullName
? userProfile.fullName.split(" ")[0]
: props.route.title}
</Paragraph>
</Pressable>
);
};
const TabBar = (
props: SceneRendererProps & {
navigationState: NavigationState<Route>;
options: Record<string, TabDescriptor<Route>> | undefined;
}
) => {
const { colors } = useThemeColors();
const { colors, isDark } = useThemeColors();
const groupOptions = useGroupOptions(
props.navigationState.index === 1 ? "notebook" : "tags"
);
const notebookSelectionEnabled = useSideMenuNotebookSelectionStore(
(state) => state.enabled
);
@@ -183,8 +125,6 @@ const TabBar = (
switch (key) {
case "home":
return "home-outline";
case "settings":
return "cog-outline";
case "notebooks":
return "book-outline";
case "tags":
@@ -202,7 +142,9 @@ const TabBar = (
justifyContent: "space-between",
backgroundColor: colors.primary.background,
paddingHorizontal: DefaultAppStyles.GAP,
paddingVertical: DefaultAppStyles.GAP_SMALL
paddingVertical: DefaultAppStyles.GAP_SMALL,
borderTopWidth: 1,
borderTopColor: colors.primary.border
}}
>
{isSelectionEnabled ? (
@@ -287,11 +229,11 @@ const TabBar = (
<Icon
name={item.icon}
color={colors.primary.icon}
size={SIZE.lg}
size={AppFontSize.lg}
/>
<Paragraph
color={colors.secondary.paragraph}
size={SIZE.xxxs - 1}
size={AppFontSize.xxxs - 1}
>
{item.title}
</Paragraph>
@@ -301,65 +243,159 @@ const TabBar = (
</>
) : (
<>
{props.navigationState.routes.map((route, index) => {
const isFocused = props.navigationState.index === index;
<View
style={{
flexDirection: "row",
gap: DefaultAppStyles.GAP_SMALL
}}
>
{props.navigationState.routes.map((route, index) => {
const isFocused = props.navigationState.index === index;
return route.key === "settings" ? (
<SettingsIcon
isFocused={isFocused}
jumpTo={props.jumpTo}
route={route}
/>
) : (
<Pressable
key={route.key}
onPress={() => {
props.jumpTo(route.key);
switch (route.key) {
case "notebooks":
Navigation.routeNeedsUpdate(
"Notebooks",
Navigation.routeUpdateFunctions.Notebooks
);
break;
case "tags":
Navigation.routeNeedsUpdate(
"Tags",
Navigation.routeUpdateFunctions.Tags
);
break;
default:
break;
return (
<Pressable
key={route.key}
onPress={() => {
props.jumpTo(route.key);
switch (route.key) {
case "notebooks":
Navigation.routeNeedsUpdate(
"Notebooks",
Navigation.routeUpdateFunctions.Notebooks
);
break;
case "tags":
Navigation.routeNeedsUpdate(
"Tags",
Navigation.routeUpdateFunctions.Tags
);
break;
default:
break;
}
}}
style={{
borderRadius: 10,
opacity: isFocused ? 1 : 0.6,
paddingVertical: 2,
width: 40,
height: 40
}}
type={isFocused ? "selected" : "plain"}
>
<Icon
name={getIcon(route.key)}
color={
isFocused ? colors.primary.accent : colors.primary.icon
}
size={AppFontSize.lg}
/>
</Pressable>
);
})}
</View>
<View
style={{
flexDirection: "row",
alignItems: "center",
gap: DefaultAppStyles.GAP_SMALL
}}
>
{props.navigationState.index > 0 ? (
<>
<IconButton
name="plus"
size={AppFontSize.lg - 2}
onPress={() => {
if (props.navigationState.index === 1) {
AddNotebookSheet.present();
} else {
presentDialog({
title: strings.addTag(),
paragraph: strings.addTagDesc(),
input: true,
positiveText: "Add",
positivePress: async (tag) => {
if (tag) {
await db.tags.add({
title: tag
});
useTagStore.getState().refresh();
return true;
}
ToastManager.show({
context: "local",
type: "error",
message: strings.allFieldsRequired()
});
return false;
}
});
}
}}
style={{
width: 35,
height: 35
}}
/>
<IconButton
name={
groupOptions.sortDirection === "asc"
? "sort-ascending"
: "sort-descending"
}
color={colors.secondary.icon}
onPress={() => {
presentSheet({
component: (
<Sort
type={
props.navigationState.index === 1
? "notebook"
: "tag"
}
hideGroupOptions
/>
)
});
}}
style={{
width: 35,
height: 35
}}
size={AppFontSize.lg - 2}
/>
{/* <IconButton
name="magnify"
color={colors.secondary.icon}
onPress={() => {}}
style={{
width: 35,
height: 35
}}
size={SIZE.lg - 2}
/> */}
</>
) : null}
{props.navigationState.index === 0 ? (
<IconButton
onPress={() => {
useThemeStore.getState().setColorScheme();
}}
style={{
borderRadius: 10,
opacity: isFocused ? 1 : 0.6,
paddingVertical: 2,
width: "25%"
width: 28,
height: 28
}}
type={isFocused ? "selected" : "plain"}
>
<Icon
name={getIcon(route.key)}
color={
isFocused ? colors.primary.accent : colors.primary.icon
}
size={SIZE.lg}
/>
<Paragraph
color={
isFocused
? colors.primary.paragraph
: colors.secondary.paragraph
}
size={SIZE.xxxs - 1}
>
{route.title}
</Paragraph>
</Pressable>
);
})}
color={colors.primary.icon}
name={isDark ? "weather-night" : "weather-sunny"}
size={AppFontSize.lg - 2}
/>
) : null}
</View>
</>
)}
</View>

15
apps/mobile/app/components/side-menu/menu-item.tsx
View File

@@ -31,7 +31,7 @@ import useNavigationStore, {
import { useNoteStore } from "../../stores/use-notes-store";
import { useTrashStore } from "../../stores/use-trash-store";
import { SideMenuItem } from "../../utils/menu-items";
import { SIZE } from "../../utils/size";
import { defaultBorderRadius, AppFontSize } from "../../utils/size";
import { DefaultAppStyles } from "../../utils/styles";
import { Pressable } from "../ui/pressable";
import Paragraph from "../ui/typography/paragraph";
@@ -138,13 +138,16 @@ function _MenuItem({
style={{
width: "100%",
alignSelf: "center",
borderRadius: 5,
borderRadius: defaultBorderRadius,
flexDirection: "row",
paddingHorizontal: DefaultAppStyles.GAP_SMALL,
justifyContent: "space-between",
alignItems: "center",
paddingVertical: DefaultAppStyles.GAP_VERTICAL
}}
onLayout={(e) => {
console.log(e.nativeEvent.layout);
}}
>
<View
style={{
@@ -154,7 +157,7 @@ function _MenuItem({
}}
>
{renderIcon ? (
renderIcon(item, SIZE.md)
renderIcon(item, AppFontSize.md)
) : (
<Icon
style={{
@@ -170,7 +173,7 @@ function _MenuItem({
? colors.selected.paragraph
: colors.secondary.icon
}
size={SIZE.md}
size={AppFontSize.md}
/>
)}
@@ -178,7 +181,7 @@ function _MenuItem({
color={
isFocused ? colors.primary.paragraph : colors.secondary.paragraph
}
size={SIZE.sm}
size={AppFontSize.sm}
>
{item.title}
</Paragraph>
@@ -186,7 +189,7 @@ function _MenuItem({
{menuItemCount > 0 ? (
<Paragraph
size={SIZE.xxs}
size={AppFontSize.xxs}
color={
isFocused ? colors.primary.paragraph : colors.secondary.paragraph
}

98
apps/mobile/app/components/side-menu/side-menu-header.tsx
View File

@@ -18,14 +18,66 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { useThemeColors } from "@notesnook/theme";
import React from "react";
import { View } from "react-native";
import { useThemeStore } from "../../stores/use-theme-store";
import { SIZE } from "../../utils/size";
import { Image, View } from "react-native";
import { NOTESNOOK_LOGO_SVG } from "../../assets/images/assets";
import { useUserStore } from "../../stores/use-user-store";
import { AppFontSize } from "../../utils/size";
import { DefaultAppStyles } from "../../utils/styles";
import { UserSheet } from "../sheets/user";
import AppIcon from "../ui/AppIcon";
import { IconButton, IconButtonProps } from "../ui/icon-button";
import { Pressable } from "../ui/pressable";
import { SvgView } from "../ui/svg";
import Heading from "../ui/typography/heading";
const SettingsIcon = () => {
const { colors } = useThemeColors();
const userProfile = useUserStore((state) => state.profile);
return (
<Pressable
onPress={() => {
UserSheet.present();
}}
style={{
width: 40,
height: 40
}}
>
{userProfile?.profilePicture ? (
<Image
source={{
uri: userProfile?.profilePicture
}}
style={{
width: 25,
height: 25,
borderRadius: 100
}}
/>
) : (
<AppIcon
name="cog-outline"
color={colors.primary.icon}
size={AppFontSize.lg}
/>
)}
{/* <Paragraph
color={colors.secondary.paragraph}
style={{
opacity: 1
}}
size={SIZE.xxxs - 1}
>
{userProfile?.fullName
? userProfile.fullName.split(" ")[0]
: strings.settings()}
</Paragraph> */}
</Pressable>
);
};
export const SideMenuHeader = (props: { rightButtons?: IconButtonProps[] }) => {
const { colors, isDark } = useThemeColors();
return (
@@ -34,7 +86,10 @@ export const SideMenuHeader = (props: { rightButtons?: IconButtonProps[] }) => {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
marginBottom: DefaultAppStyles.GAP
borderBottomWidth: 1,
borderBottomColor: colors.primary.border,
paddingBottom: DefaultAppStyles.GAP,
paddingHorizontal: DefaultAppStyles.GAP
}}
>
<View
@@ -52,26 +107,10 @@ export const SideMenuHeader = (props: { rightButtons?: IconButtonProps[] }) => {
borderRadius: 10
}}
>
<SvgView
width={28}
height={28}
src={`<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_24_33)">
<path d="M1024 0H0V1024H1024V0Z" fill="black"/>
<path d="M724.985 682.919C707.73 733.33 673.15 775.984 627.397 803.291C581.645 830.598 527.687 840.787 475.128 832.044C422.568 823.301 374.814 796.194 340.365 755.546C305.916 714.898 287.006 663.347 287 610.064V499.814L366.121 532.867V610.019C366.114 630.798 370.555 651.337 379.145 670.256C387.735 689.176 400.276 706.037 415.925 719.707C418.895 722.294 421.978 724.814 425.161 727.166C448.518 744.554 476.563 754.518 505.655 755.763C506.645 755.763 507.601 755.842 508.58 755.864C509.559 755.887 510.83 755.864 511.955 755.864C513.08 755.864 514.205 755.864 515.33 755.864C516.455 755.864 517.265 755.864 518.255 755.763C547.336 754.515 575.371 744.56 598.726 727.188C601.899 724.837 604.981 722.328 607.963 719.741C628.519 701.761 643.619 678.375 651.545 652.241L724.985 682.919Z" fill="white"/>
<path d="M737 414V610.065C737 612.596 737 615.139 736.842 617.67L657.879 584.651V414C657.866 376.316 643.272 340.099 617.154 312.934C591.035 285.77 555.419 269.766 517.765 268.274C480.11 266.782 443.339 279.918 415.154 304.931C386.968 329.944 369.554 364.893 366.56 402.457C366.279 406.26 366.121 410.119 366.121 414V462.712L287 429.637V189H512C571.674 189 628.903 212.705 671.099 254.901C713.295 297.097 737 354.326 737 414Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_24_33">
<rect width="1024" height="1024" rx="200" fill="white"/>
</clipPath>
</defs>
</svg>
`}
/>
<SvgView width={28} height={28} src={NOTESNOOK_LOGO_SVG} />
</View>
<Heading size={SIZE.lg}>Notesnook</Heading>
<Heading size={AppFontSize.lg}>Notesnook</Heading>
</View>
<View
@@ -90,22 +129,11 @@ export const SideMenuHeader = (props: { rightButtons?: IconButtonProps[] }) => {
height: 28
}}
color={colors.primary.icon}
size={SIZE.lg}
size={AppFontSize.lg}
/>
))}
<IconButton
onPress={() => {
useThemeStore.getState().setColorScheme();
}}
style={{
width: 28,
height: 28
}}
color={colors.primary.icon}
name={isDark ? "weather-night" : "weather-sunny"}
size={SIZE.lg}
/>
<SettingsIcon />
</View>
</View>
);

11
apps/mobile/app/components/side-menu/side-menu-home.tsx
View File

@@ -22,7 +22,6 @@ import React from "react";
import { View } from "react-native";
import { DraxProvider, DraxScrollView } from "react-native-drax";
import { db } from "../../common/database";
import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
import { useMenuStore } from "../../stores/use-menu-store";
import { useSettingStore } from "../../stores/use-setting-store";
import { MenuItemsList } from "../../utils/menu-items";
@@ -51,15 +50,19 @@ export function SideMenuHome() {
width: "100%",
paddingTop: DefaultAppStyles.GAP_SMALL,
backgroundColor: colors.primary.background,
gap: DefaultAppStyles.GAP,
paddingHorizontal: DefaultAppStyles.GAP
gap: DefaultAppStyles.GAP
}}
>
<SideMenuHeader />
{!isAppLoading && introCompleted ? (
<DraxProvider>
<DraxScrollView nestedScrollEnabled={false}>
<DraxScrollView
nestedScrollEnabled={false}
style={{
paddingHorizontal: DefaultAppStyles.GAP
}}
>
<ReorderableList
onListOrderChanged={(data) => {
db.settings.setSideBarOrder("routes", data);

61
apps/mobile/app/components/side-menu/side-menu-list-empty.tsx Normal file
View File

@@ -0,0 +1,61 @@
/*
This file is part of the Notesnook project (https://notesnook.com/)
Copyright (C) 2023 Streetwriters (Private) Limited
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import React from "react";
import { View } from "react-native";
import { SideMenuHeader } from "./side-menu-header";
import Paragraph from "../ui/typography/paragraph";
import { AppFontSize } from "../../utils/size";
import { useThemeColors } from "@notesnook/theme";
import { DefaultAppStyles } from "../../utils/styles";
type SideMenuListEmptyProps = {
placeholder: string;
};
export const SideMenuListEmpty = (props: SideMenuListEmptyProps) => {
const { colors } = useThemeColors();
return (
<View
style={{
width: "100%",
height: "100%"
}}
>
<View
style={{
backgroundColor: colors.primary.background,
paddingTop: DefaultAppStyles.GAP_SMALL
}}
>
<SideMenuHeader />
</View>
<View
style={{
alignItems: "center",
justifyContent: "center",
flexGrow: 1
}}
>
<Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
{props.placeholder}
</Paragraph>
</View>
</View>
);
};

195
apps/mobile/app/components/side-menu/side-menu-notebooks.tsx
View File

@@ -18,32 +18,33 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { Notebook } from "@notesnook/core";
import { strings } from "@notesnook/intl";
import { useThemeColors } from "@notesnook/theme";
import React, { useEffect } from "react";
import { FlatList, ListRenderItemInfo, View } from "react-native";
import { FlatList, TextInput, View } from "react-native";
import { UseBoundStore } from "zustand";
import { db } from "../../common/database";
import { useTotalNotes } from "../../hooks/use-db-item";
import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
import NotebookScreen from "../../screens/notebook";
import {
eSubscribeEvent,
eUnSubscribeEvent
} from "../../services/event-manager";
import Navigation from "../../services/navigation";
import { TreeItem } from "../../stores/create-notebook-tree-stores";
import { SelectionStore } from "../../stores/item-selection-store";
import useNavigationStore from "../../stores/use-navigation-store";
import { useNotebooks } from "../../stores/use-notebook-store";
import { eOnNotebookUpdated } from "../../utils/events";
import { SIZE } from "../../utils/size";
import { AppFontSize, defaultBorderRadius } from "../../utils/size";
import { DefaultAppStyles } from "../../utils/styles";
import { Properties } from "../properties";
import { AddNotebookSheet } from "../sheets/add-notebook";
import AppIcon from "../ui/AppIcon";
import { IconButton } from "../ui/icon-button";
import { Pressable } from "../ui/pressable";
import Paragraph from "../ui/typography/paragraph";
import { SideMenuHeader } from "./side-menu-header";
import { SideMenuListEmpty } from "./side-menu-list-empty";
import {
useSideMenuNotebookExpandedStore,
useSideMenuNotebookSelectionStore,
@@ -229,7 +230,7 @@ const NotebookItem = ({
width: "100%",
alignItems: "center",
flexDirection: "row",
borderRadius: 5,
borderRadius: defaultBorderRadius,
paddingRight: DefaultAppStyles.GAP_SMALL
}}
>
@@ -240,10 +241,12 @@ const NotebookItem = ({
}}
>
<IconButton
size={SIZE.md}
size={AppFontSize.md}
color={selected ? colors.selected.icon : colors.primary.icon}
onPress={() => {
onToggleExpanded?.();
if (item.hasChildren) {
onToggleExpanded?.();
}
}}
top={0}
left={0}
@@ -252,16 +255,22 @@ const NotebookItem = ({
style={{
width: 32,
height: 32,
borderRadius: 5
borderRadius: defaultBorderRadius
}}
name={expanded ? "chevron-down" : "chevron-right"}
name={
!item.hasChildren
? "book-outline"
: expanded
? "chevron-down"
: "chevron-right"
}
/>
<Paragraph
color={
isFocused ? colors.selected.paragraph : colors.secondary.paragraph
}
size={SIZE.xs}
size={AppFontSize.sm}
>
{notebook?.title}
</Paragraph>
@@ -290,7 +299,10 @@ const NotebookItem = ({
) : (
<>
{totalNotes(notebook?.id) ? (
<Paragraph size={SIZE.xxs} color={colors.secondary.paragraph}>
<Paragraph
size={AppFontSize.xxs}
color={colors.secondary.paragraph}
>
{totalNotes?.(notebook?.id)}
</Paragraph>
) : null}
@@ -304,17 +316,36 @@ const NotebookItem = ({
export const SideMenuNotebooks = () => {
const tree = useSideMenuNotebookTreeStore((state) => state.tree);
const [notebooks, loading] = useNotebooks();
const insets = useGlobalSafeAreaInsets();
const { colors } = useThemeColors();
const [filteredNotebooks, setFilteredNotebooks] = React.useState(notebooks);
const searchTimer = React.useRef<NodeJS.Timeout>();
const lastQuery = React.useRef<string>();
const loadRootNotebooks = React.useCallback(async () => {
if (!notebooks) return;
if (!filteredNotebooks) return;
const _notebooks: Notebook[] = [];
for (let i = 0; i < notebooks.placeholders.length; i++) {
_notebooks[i] = (await notebooks?.item(i))?.item as Notebook;
for (let i = 0; i < filteredNotebooks.placeholders.length; i++) {
_notebooks[i] = (await filteredNotebooks?.item(i))?.item as Notebook;
}
useSideMenuNotebookTreeStore.getState().addNotebooks("root", _notebooks, 0);
}, [filteredNotebooks]);
const updateNotebooks = React.useCallback(() => {
if (lastQuery.current) {
db.lookup
.notebooks(lastQuery.current)
.sorted()
.then((filtered) => {
setFilteredNotebooks(filtered);
});
} else {
setFilteredNotebooks(notebooks);
}
}, [notebooks]);
useEffect(() => {
updateNotebooks();
}, [updateNotebooks]);
useEffect(() => {
(async () => {
if (!loading) {
@@ -352,34 +383,71 @@ export const SideMenuNotebooks = () => {
});
}, []);
const renderItem = React.useCallback((info: ListRenderItemInfo<TreeItem>) => {
return <NotebookItemWrapper index={info.index} item={info.item} />;
}, []);
const renderItem = React.useCallback(
(info: { item: TreeItem; index: number }) => {
return <NotebookItemWrapper index={info.index} item={info.item} />;
},
[]
);
return (
<FlatList
<View
style={{
paddingHorizontal: DefaultAppStyles.GAP,
paddingTop: DefaultAppStyles.GAP_SMALL
height: "100%"
}}
data={tree}
keyExtractor={(item) => item.notebook.id}
windowSize={3}
ListHeaderComponent={
<SideMenuHeader
rightButtons={[
{
name: "plus",
onPress: () => {
AddNotebookSheet.present();
}
}
]}
>
{!notebooks || notebooks.placeholders.length === 0 ? (
<SideMenuListEmpty
placeholder={strings.emptyPlaceholders("notebook")}
/>
}
stickyHeaderIndices={[0]}
renderItem={renderItem}
/>
) : (
<>
<FlatList
data={tree}
bounces={false}
bouncesZoom={false}
overScrollMode="never"
ListHeaderComponent={
<View
style={{
backgroundColor: colors.primary.background,
paddingTop: DefaultAppStyles.GAP_SMALL
}}
>
<SideMenuHeader />
</View>
}
renderItem={renderItem}
/>
<View
style={{
width: "100%",
paddingHorizontal: DefaultAppStyles.GAP,
backgroundColor: colors.primary.background,
borderTopColor: colors.primary.border,
borderTopWidth: 1
}}
>
<TextInput
placeholder="Filter notebooks..."
style={{
fontFamily: "Inter-Regular",
fontSize: AppFontSize.xs
}}
cursorColor={colors.primary.accent}
onChangeText={async (value) => {
searchTimer.current && clearTimeout(searchTimer.current);
searchTimer.current = setTimeout(async () => {
lastQuery.current = value;
updateNotebooks();
}, 500);
}}
placeholderTextColor={colors.primary.placeholder}
/>
</View>
</>
)}
</View>
);
};
@@ -390,6 +458,7 @@ const NotebookItemWrapper = ({
item: TreeItem;
index: number;
}) => {
const { colors } = useThemeColors();
const expanded = useSideMenuNotebookExpandedStore(
(state) => state.expanded[item.notebook.id]
);
@@ -425,26 +494,34 @@ const NotebookItemWrapper = ({
}, [item.notebook.id]);
return (
<NotebookItem
item={item}
index={index}
expanded={expanded}
onToggleExpanded={() => {
useSideMenuNotebookExpandedStore
.getState()
.setExpanded(item.notebook.id);
<View
style={{
paddingHorizontal: DefaultAppStyles.GAP,
marginTop: index === 0 ? DefaultAppStyles.GAP : 0
}}
selected={selected}
selectionEnabled={selectionEnabled}
selectionStore={useSideMenuNotebookSelectionStore}
onItemUpdate={onItemUpdate}
focused={focused}
onPress={() => {
NotebookScreen.navigate(item.notebook, false);
}}
onLongPress={() => {
Properties.present(item.notebook, false);
}}
/>
>
<NotebookItem
item={item}
index={index}
expanded={expanded}
onToggleExpanded={() => {
useSideMenuNotebookExpandedStore
.getState()
.setExpanded(item.notebook.id);
}}
selected={selected}
selectionEnabled={selectionEnabled}
selectionStore={useSideMenuNotebookSelectionStore}
onItemUpdate={onItemUpdate}
focused={focused}
onPress={() => {
NotebookScreen.navigate(item.notebook, false);
Navigation.closeDrawer();
}}
onLongPress={() => {
Properties.present(item.notebook, false);
}}
/>
</View>
);
};

279
apps/mobile/app/components/side-menu/side-menu-tags.tsx
View File

@@ -20,22 +20,24 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
import { Tag, VirtualizedGrouping } from "@notesnook/core";
import { useThemeColors } from "@notesnook/theme";
import React, { useEffect } from "react";
import { View } from "react-native";
import { FlashList } from "react-native-actions-sheet/dist/src/views/FlashList";
import { db } from "../../common/database";
import { TextInput, View } from "react-native";
import { FlashList } from "@shopify/flash-list";
import { DatabaseLogger, db } from "../../common/database";
import { useDBItem, useTotalNotes } from "../../hooks/use-db-item";
import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
import { TaggedNotes } from "../../screens/notes/tagged";
import useNavigationStore from "../../stores/use-navigation-store";
import { useTags } from "../../stores/use-tag-store";
import { SIZE } from "../../utils/size";
import { defaultBorderRadius, AppFontSize } from "../../utils/size";
import { DefaultAppStyles } from "../../utils/styles";
import { Properties } from "../properties";
import AppIcon from "../ui/AppIcon";
import { Pressable } from "../ui/pressable";
import Paragraph from "../ui/typography/paragraph";
import { SideMenuHeader } from "./side-menu-header";
import { SideMenuListEmpty } from "./side-menu-list-empty";
import { useSideMenuTagsSelectionStore } from "./stores";
import { strings } from "@notesnook/intl";
import Navigation from "../../services/navigation";
const TagItem = (props: {
tags: VirtualizedGrouping<Tag>;
@@ -60,100 +62,120 @@ const TagItem = (props: {
}
}, [item]);
return item ? (
<Pressable
type={isSelected || isFocused ? "selected" : "transparent"}
onLongPress={() => {
Properties.present(item);
}}
testID={`tag-item-${props.id}`}
onPress={() => {
if (enabled) {
useSideMenuTagsSelectionStore
.getState()
.markAs(item, isSelected ? "deselected" : "selected");
if (
useSideMenuTagsSelectionStore.getState().getSelectedItemIds()
.length === 0
) {
useSideMenuTagsSelectionStore.setState({
enabled: false
});
}
} else {
TaggedNotes.navigate(item, false);
}
}}
return (
<View
style={{
justifyContent: "space-between",
width: "100%",
alignItems: "center",
flexDirection: "row",
borderRadius: 5,
paddingRight: DefaultAppStyles.GAP_SMALL
paddingHorizontal: DefaultAppStyles.GAP,
marginTop: (props.id as number) === 0 ? DefaultAppStyles.GAP : 0
}}
>
<View
style={{
flexDirection: "row",
alignItems: "center"
}}
>
<View
{item ? (
<Pressable
type={isSelected || isFocused ? "selected" : "transparent"}
onLongPress={() => {
Properties.present(item);
}}
testID={`tag-item-${props.id}`}
onPress={() => {
if (enabled) {
useSideMenuTagsSelectionStore
.getState()
.markAs(item, isSelected ? "deselected" : "selected");
if (
useSideMenuTagsSelectionStore.getState().getSelectedItemIds()
.length === 0
) {
useSideMenuTagsSelectionStore.setState({
enabled: false
});
}
} else {
TaggedNotes.navigate(item, false);
Navigation.closeDrawer();
}
}}
style={{
width: 32,
height: 32,
justifyContent: "center",
alignItems: "center"
justifyContent: "space-between",
width: "100%",
alignItems: "center",
flexDirection: "row",
borderRadius: defaultBorderRadius,
paddingRight: DefaultAppStyles.GAP_SMALL
}}
>
<AppIcon
size={SIZE.md}
color={isFocused ? colors.selected.icon : colors.secondary.icon}
name="pound"
/>
</View>
<View
style={{
flexDirection: "row",
alignItems: "center"
}}
>
<View
style={{
width: 32,
height: 32,
justifyContent: "center",
alignItems: "center"
}}
>
<AppIcon
size={AppFontSize.md}
color={isFocused ? colors.selected.icon : colors.secondary.icon}
name="pound"
/>
</View>
<Paragraph
color={
isFocused ? colors.selected.paragraph : colors.secondary.paragraph
}
size={SIZE.xs}
>
{item?.title}
</Paragraph>
</View>
{enabled ? (
<View
style={{
width: 22,
height: 22,
justifyContent: "center",
alignItems: "center"
}}
>
<AppIcon
name={isSelected ? "checkbox-outline" : "checkbox-blank-outline"}
color={isSelected ? colors.selected.icon : colors.primary.icon}
/>
</View>
) : (
<>
{item?.id && totalNotes.totalNotes?.(item?.id) ? (
<Paragraph size={SIZE.xxs} color={colors.secondary.paragraph}>
{totalNotes.totalNotes(item?.id)}
<Paragraph
color={
isFocused
? colors.selected.paragraph
: colors.secondary.paragraph
}
size={AppFontSize.sm}
>
{item?.title}
</Paragraph>
) : null}
</>
)}
</Pressable>
) : null;
</View>
{enabled ? (
<View
style={{
width: 22,
height: 22,
justifyContent: "center",
alignItems: "center"
}}
>
<AppIcon
name={
isSelected ? "checkbox-outline" : "checkbox-blank-outline"
}
color={isSelected ? colors.selected.icon : colors.primary.icon}
/>
</View>
) : (
<>
{item?.id && totalNotes.totalNotes?.(item?.id) ? (
<Paragraph
size={AppFontSize.xxs}
color={colors.secondary.paragraph}
>
{totalNotes.totalNotes(item?.id)}
</Paragraph>
) : null}
</>
)}
</Pressable>
) : null}
</View>
);
};
export const SideMenuTags = () => {
const [tags] = useTags();
const insets = useGlobalSafeAreaInsets();
const { colors } = useThemeColors();
const [filteredTags, setFilteredTags] = React.useState(tags);
const searchTimer = React.useRef<NodeJS.Timeout>();
const lastQuery = React.useRef<string>();
useEffect(() => {
useSideMenuTagsSelectionStore.setState({
@@ -180,28 +202,91 @@ export const SideMenuTags = () => {
});
}, []);
const updateTags = React.useCallback(() => {
if (lastQuery.current) {
console.log("Looking up...", lastQuery.current);
db.lookup
.tags(lastQuery.current.trim())
.sorted()
.then(async (filtered) => {
setFilteredTags(filtered);
});
} else {
setFilteredTags(tags);
}
}, [tags]);
useEffect(() => {
updateTags();
}, [updateTags]);
const renderItem = React.useCallback(
(info: { index: number }) => {
return <TagItem id={info.index} tags={tags!} />;
return <TagItem id={info.index} tags={filteredTags!} />;
},
[tags]
[filteredTags]
);
return (
<View
style={{
paddingHorizontal: DefaultAppStyles.GAP,
paddingTop: DefaultAppStyles.GAP_SMALL,
width: "100%",
height: "100%"
}}
>
<SideMenuHeader />
<FlashList
data={tags?.placeholders}
estimatedItemSize={32}
renderItem={renderItem}
/>
{!tags || tags?.placeholders.length === 0 ? (
<SideMenuListEmpty placeholder={strings.emptyPlaceholders("tag")} />
) : (
<>
<FlashList
data={filteredTags?.placeholders}
bounces={false}
estimatedItemSize={35}
bouncesZoom={false}
overScrollMode="never"
ListHeaderComponent={
<View
style={{
backgroundColor: colors.primary.background
}}
>
<SideMenuHeader />
</View>
}
renderItem={renderItem}
/>
<View
style={{
width: "100%",
paddingHorizontal: DefaultAppStyles.GAP,
backgroundColor: colors.primary.background,
borderTopColor: colors.primary.border,
borderTopWidth: 1
}}
>
<TextInput
placeholder="Filter tags..."
style={{
fontFamily: "Inter-Regular",
fontSize: AppFontSize.xs
}}
cursorColor={colors.primary.accent}
onChangeText={async (value) => {
searchTimer.current && clearTimeout(searchTimer.current);
searchTimer.current = setTimeout(async () => {
try {
lastQuery.current = value;
updateTags();
} catch (e) {
DatabaseLogger.error(e);
}
}, 500);
}}
placeholderTextColor={colors.primary.placeholder}
/>
</View>
</>
)}
</View>
);
};

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

@@ -25,14 +25,13 @@ import { ActivityIndicator, Image, Platform, 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";
import { eSendEvent } from "../../services/event-manager";
import Navigation from "../../services/navigation";
import Sync from "../../services/sync";
import { useThemeStore } from "../../stores/use-theme-store";
import { SyncStatus, useUserStore } from "../../stores/use-user-store";
import { eOpenLoginDialog } from "../../utils/events";
import { fluidTabsRef } from "../../utils/global-refs";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import { AuthMode } from "../auth/common";
import { IconButton } from "../ui/icon-button";
import { Pressable } from "../ui/pressable";
import { TimeSince } from "../ui/time-since";
@@ -97,7 +96,7 @@ export const UserStatus = () => {
) : (
<Icon
name="cog-outline"
size={SIZE.lg - 2}
size={AppFontSize.lg - 2}
color={colors.secondary.icon}
style={{
paddingLeft: 8
@@ -113,7 +112,7 @@ export const UserStatus = () => {
>
<Paragraph
numberOfLines={1}
size={SIZE.sm}
size={AppFontSize.sm}
color={colors.primary.heading}
>
{!user || !userProfile?.fullName
@@ -125,7 +124,7 @@ export const UserStatus = () => {
style={{
flexWrap: "wrap"
}}
size={SIZE.xs}
size={AppFontSize.xs}
color={colors.secondary.heading}
>
{!user ? (
@@ -142,7 +141,7 @@ export const UserStatus = () => {
{!syncing ? (
<TimeSince
style={{
fontSize: SIZE.xs,
fontSize: AppFontSize.xs,
color: colors.secondary.paragraph
}}
time={lastSynced}
@@ -184,7 +183,7 @@ export const UserStatus = () => {
}}
name="theme-light-dark"
color={isDark ? colors.primary.accent : colors.primary.icon}
size={SIZE.lg}
size={AppFontSize.lg}
style={{
borderRadius: 100,
width: 40,
@@ -207,7 +206,9 @@ export const UserStatus = () => {
Sync.run();
} else {
fluidTabsRef.current?.closeDrawer();
eSendEvent(eOpenLoginDialog);
Navigation.navigate("Auth", {
mode: AuthMode.login
});
}
}}
>
@@ -215,13 +216,13 @@ export const UserStatus = () => {
syncing ? (
<ActivityIndicator
color={colors.primary.accent}
size={SIZE.xl}
size={AppFontSize.xl}
/>
) : lastSyncStatus === SyncStatus.Failed ? (
<Icon
color={colors.error.icon}
name="sync-alert"
size={SIZE.lg}
size={AppFontSize.lg}
allowFontScaling
/>
) : (
@@ -229,14 +230,14 @@ export const UserStatus = () => {
allowFontScaling
color={colors.primary.icon}
name="sync"
size={SIZE.lg}
size={AppFontSize.lg}
/>
)
) : (
<Icon
allowFontScaling
color={colors.primary.accent}
size={SIZE.lg}
size={AppFontSize.lg}
name="login"
/>
)}

12
apps/mobile/app/components/tip/index.tsx
View File

@@ -24,7 +24,7 @@ import { MMKV } from "../../common/database/mmkv";
import { eSendEvent, presentSheet } from "../../services/event-manager";
import { TTip } from "../../services/tip-manager";
import { eCloseSheet } from "../../utils/events";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import { Button } from "../ui/button";
import Seperator from "../ui/seperator";
import Paragraph from "../ui/typography/paragraph";
@@ -70,8 +70,8 @@ export const Tip = ({
<Button
title={strings.tip()}
icon="information"
fontSize={SIZE.xs}
iconSize={SIZE.xs}
fontSize={AppFontSize.xs}
iconSize={AppFontSize.xs}
style={{
width: undefined,
height: 22,
@@ -91,8 +91,8 @@ export const Tip = ({
title={strings.neverShowAgain()}
type="secondary"
icon="close"
fontSize={SIZE.xs}
iconSize={SIZE.xs}
fontSize={AppFontSize.xs}
iconSize={AppFontSize.xs}
onPress={() => {
MMKV.setItem("neverShowSheetTips", "true");
eSendEvent(eCloseSheet);
@@ -114,7 +114,7 @@ export const Tip = ({
<Paragraph
style={textStyle}
color={colors.primary.paragraph}
size={SIZE.md}
size={AppFontSize.md}
>
{tip.text()}
</Paragraph>

10
apps/mobile/app/components/toast/index.tsx
View File

@@ -37,7 +37,7 @@ import {
} from "../../services/event-manager";
import { getElevationStyle } from "../../utils/elevation";
import { eHideToast, eShowToast } from "../../utils/events";
import { SIZE } from "../../utils/size";
import { AppFontSize } from "../../utils/size";
import { Button } from "../ui/button";
import Heading from "../ui/typography/heading";
import Paragraph from "../ui/typography/paragraph";
@@ -162,7 +162,7 @@ export const Toast = ({ context = "global" }) => {
? "information"
: "close"
}
size={isFullToastMessage ? SIZE.xxxl : SIZE.xl}
size={isFullToastMessage ? AppFontSize.xxxl : AppFontSize.xl}
color={
toastOptions?.icon
? toastOptions?.icon
@@ -185,7 +185,7 @@ export const Toast = ({ context = "global" }) => {
{isFullToastMessage ? (
<Heading
color={!isDark ? colors.static.black : colors.static.white}
size={SIZE.sm}
size={AppFontSize.sm}
>
{toastOptions.heading}
</Heading>
@@ -194,7 +194,7 @@ export const Toast = ({ context = "global" }) => {
{toastOptions.message || toastOptions.heading ? (
<Paragraph
color={!isDark ? colors.static.black : colors.static.white}
size={SIZE.xs}
size={AppFontSize.xs}
>
{toastOptions.message || toastOptions.heading}
</Paragraph>
@@ -205,7 +205,7 @@ export const Toast = ({ context = "global" }) => {
{toastOptions.func ? (
<Button
testID={notesnook.toast.button}
fontSize={SIZE.md}
fontSize={AppFontSize.md}
type={toastOptions.type === "error" ? "errorShade" : "transparent"}
onPress={toastOptions.func}
title={toastOptions.actionText}

8
apps/mobile/app/components/ui/AppIcon/index.tsx
View File

@@ -20,7 +20,7 @@ import { useThemeColors } from "@notesnook/theme";
import React from "react";
import { ColorValue, TextProps } from "react-native";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import { SIZE } from "../../../utils/size";
import { AppFontSize } from "../../../utils/size";
export interface IconProps extends TextProps {
/**
@@ -48,6 +48,10 @@ export interface IconProps extends TextProps {
export default function AppIcon(props: IconProps) {
const { colors } = useThemeColors();
return (
<Icon size={SIZE.md} color={colors.primary.icon} {...(props as any)} />
<Icon
size={AppFontSize.md}
color={colors.primary.icon}
{...(props as any)}
/>
);
}

8
apps/mobile/app/components/ui/button/index.tsx
View File

@@ -30,7 +30,7 @@ import {
} from "react-native";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import { useUserStore } from "../../../stores/use-user-store";
import { SIZE } from "../../../utils/size";
import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
import NativeTooltip from "../../../utils/tooltip";
import { ProTag } from "../../premium/pro-tag";
import { Pressable, PressableProps, useButton } from "../pressable";
@@ -66,9 +66,9 @@ export const Button = ({
loading = false,
title = null,
icon,
fontSize = SIZE.sm,
fontSize = AppFontSize.sm,
type = "transparent",
iconSize = SIZE.md,
iconSize = AppFontSize.md,
style = {},
accentColor,
accentText = "#ffffff",
@@ -127,7 +127,7 @@ export const Button = ({
? width * growFactor
: (width as DimensionValue) || undefined,
paddingHorizontal: 12,
borderRadius: 5,
borderRadius: defaultBorderRadius,
alignSelf: "center",
justifyContent: "center",
alignItems: "center",

4
apps/mobile/app/components/ui/icon-button/index.tsx
View File

@@ -22,7 +22,7 @@ import React from "react";
import { ColorValue, GestureResponderEvent, TextStyle } from "react-native";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import { RGB_Linear_Shade, hexToRGBA } from "../../../utils/colors";
import { SIZE } from "../../../utils/size";
import { AppFontSize } from "../../../utils/size";
import NativeTooltip from "../../../utils/tooltip";
import { Pressable, PressableProps } from "../pressable";
export interface IconButtonProps extends PressableProps {
@@ -44,7 +44,7 @@ export const IconButton = ({
name,
color,
style,
size = SIZE.xxl,
size = AppFontSize.xxl,
iconStyle = {},
left = 10,
right = 10,

Some files were not shown because too many files have changed in this diff Show More