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

mobile: improve reminder time design

Browse Source
This commit is contained in:
ammarahm-ed
2023-01-11 17:15:00 +05:00
parent 18da6cfc43
commit 5409ac666e
9 changed files with 142 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
apps/mobile/app/components/list-items/note/index.js
View File

@@ -37,6 +37,7 @@ import { SIZE } from "../../../utils/size";
import { Properties } from "../../properties";
import { Button } from "../../ui/button";
import { IconButton } from "../../ui/icon-button";
import { ReminderTime } from "../../ui/reminder-time";
import { TimeSince } from "../../ui/time-since";
import Heading from "../../ui/typography/heading";
import Paragraph from "../../ui/typography/paragraph";
@@ -92,9 +93,9 @@ const NoteItem = ({
const attachmentCount = db.attachments?.ofNote(item.id, "all")?.length || 0;
const notebooks = React.useMemo(() => getNotebook(item), [item]);
const reminders = db.relations.from(item, "reminder");
const current = getUpcomingReminder(reminders);
const reminder = getUpcomingReminder(reminders);
const _update = useRelationStore((state) => state.updater);
const noteColor = COLORS_NOTE[item.color?.toLowerCase()];
return (
<>
<View
@@ -110,14 +111,15 @@ const NoteItem = ({
alignItems: "center",
zIndex: 10,
elevation: 10,
marginBottom: 2.5
marginBottom: 2.5,
flexWrap: "wrap"
}}
>
{notebooks?.map((_item) => (
<Button
title={_item.title}
key={_item}
height={20}
height={25}
icon="book-outline"
type="grayBg"
fontSize={SIZE.xs}
@@ -130,11 +132,23 @@ const NoteItem = ({
marginRight: 5,
borderWidth: 0.5,
borderColor: colors.icon,
paddingHorizontal: 6
paddingHorizontal: 6,
marginBottom: 5
}}
onPress={() => navigateToTopic(_item.topic)}
/>
))}
<ReminderTime
reminder={reminder}
color={noteColor}
onPress={() => {
Properties.present(reminder);
}}
style={{
height: 25
}}
/>
</View>
) : null}
@@ -162,39 +176,6 @@ const NoteItem = ({
</Paragraph>
) : null}
{current &&
current.date && !current.disabled &&
(current.mode !== "once" || current.date > Date.now() || current.snoozeUntil > Date.now()) ? (
<TouchableOpacity
activeOpacity={1}
onPress={() => {
Properties.present(current);
}}
style={{
backgroundColor: colors.nav,
borderRadius: 5,
flexDirection: "row",
paddingHorizontal: 5,
paddingVertical: 3,
alignItems: "center",
marginTop: 5,
justifyContent: "flex-start",
alignSelf: "flex-start"
}}
>
<>
<Icon name="clock-outline" size={SIZE.md} color={colors.accent} />
<Paragraph
size={SIZE.xs + 1}
color={colors.icon}
style={{ marginLeft: 5 }}
>
{formatReminderTime(current)}
</Paragraph>
</>
</TouchableOpacity>
) : null}
<View
style={{
flexDirection: "row",

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

@@ -30,6 +30,7 @@ import SelectionWrapper from "../selection-wrapper";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import ReminderSheet from "../../sheets/reminder";
import { formatReminderTime } from "@notesnook/core/collections/reminders";
import { ReminderTime } from "../../ui/reminder-time";
const ReminderItem = React.memo(
({
@@ -57,7 +58,7 @@ const ReminderItem = React.memo(
<View
style={{
flexWrap: "wrap",
flexShrink: 1,
flexShrink: 1,
opacity: item.disabled ? 0.5 : 1
}}
>
@@ -88,7 +89,6 @@ const ReminderItem = React.memo(
flexWrap: "wrap"
}}
>
{item.disabled ? (
<View
style={{
@@ -145,36 +145,19 @@ const ReminderItem = React.memo(
</Paragraph>
</View>
) : null}
{item.date && !item.disabled ? (
<View
style={{
backgroundColor: colors.nav,
borderRadius: 5,
flexDirection: "row",
paddingHorizontal: 5,
paddingVertical: 3,
alignItems: "center",
marginTop: 5,
justifyContent: "flex-start",
alignSelf: "flex-start"
}}
>
<>
<Icon
name="clock-outline"
size={SIZE.md}
color={colors.accent}
/>
<Paragraph
size={SIZE.xs + 1}
color={colors.icon}
style={{ marginLeft: 5 }}
>
{formatReminderTime(item)}
</Paragraph>
</>
</View>
) : null}
<ReminderTime
reminder={item}
checkIsActive={false}
fontSize={SIZE.xs + 1}
style={{
justifyContent: "flex-start",
borderWidth: 0,
height: 30,
alignSelf: "flex-start",
marginTop: 5
}}
/>
</View>
</View>
<IconButton

2
apps/mobile/app/components/list-items/selection-wrapper/index.js
View File

@@ -103,7 +103,7 @@ const SelectionWrapper = ({
paddingHorizontal: 12,
paddingVertical: compactMode ? 8 : 12,
borderRadius: isSheet ? 10 : 0,
marginBottom: isSheet ? 12 : undefined
marginBottom: isSheet ? 12 : undefined,
}}
>
{item.type === "note" ? (

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

@@ -42,6 +42,7 @@ import {
formatReminderTime,
getUpcomingReminder
} from "@notesnook/core/collections/reminders";
import { ReminderTime } from "../ui/reminder-time";
export const Properties = ({
close = () => {},
item,
@@ -119,37 +120,16 @@ export const Properties = ({
) : null}
{item.type === "reminder" ? (
<View
<ReminderTime
reminder={item}
style={{
backgroundColor: colors.nav,
borderRadius: 5,
flexDirection: "row",
paddingHorizontal: 5,
paddingVertical: 3,
alignItems: "center",
justifyContent: "flex-start",
alignSelf: "flex-start",
marginBottom: 5,
marginTop: !item.description ? 5 : 0
borderWidth: 0,
height: 30,
alignSelf: "flex-start"
}}
>
{item.date ? (
<>
<Icon
name="clock-outline"
size={SIZE.md}
color={colors.accent}
/>
<Paragraph
size={SIZE.xs + 1}
color={colors.icon}
style={{ marginLeft: 5 }}
>
{formatReminderTime(item)}
</Paragraph>
</>
) : null}
</View>
fontSize={SIZE.xs + 1}
/>
) : null}
{item.type === "note" ? <Tags close={close} item={item} /> : null}

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

@@ -101,7 +101,7 @@ export default function ReminderNotify({
alignItems: "center"
}}
>
<Icon name="clock-outline" size={20} color={colors.accent} />
<Icon name="bell" size={20} color={colors.accent} />
<Paragraph style={{ marginLeft: 5 }}>
{dayjs(reminder?.date).format("ddd, YYYY-MM-DD hh:mm A")}
</Paragraph>

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

@@ -46,6 +46,7 @@ import { useRelationStore } from "../../../stores/use-relation-store";
import Paragraph from "../../ui/typography/paragraph";
import PremiumService from "../../../services/premium";
import DatePicker from "react-native-date-picker";
import { ReminderTime } from "../../ui/reminder-time";
type ReminderSheetProps = {
actionSheetRef: RefObject<ActionSheet>;
@@ -528,31 +529,17 @@ export default function ReminderSheet({
</View>
)}
{reminder && reminder.date ? (
<View
style={{
borderRadius: 5,
flexDirection: "row",
paddingVertical: 6,
paddingHorizontal: 12,
alignItems: "center",
justifyContent: "flex-start",
marginBottom: 10,
backgroundColor: colors.nav
}}
>
<>
<Icon name="clock-outline" size={SIZE.md} color={colors.accent} />
<Paragraph
size={SIZE.xs + 1}
color={colors.icon}
style={{ marginLeft: 5 }}
>
{formatReminderTime(reminder)}
</Paragraph>
</>
</View>
) : null}
<ReminderTime
reminder={reminder}
style={{
width: "100%",
justifyContent: "flex-start",
borderWidth: 0,
height: 30,
alignSelf: "flex-start"
}}
/>
</ScrollView>
<Button
style={{

84
apps/mobile/app/components/ui/reminder-time/index.tsx Normal file
View File

@@ -0,0 +1,84 @@
/*
This file is part of the Notesnook project (https://notesnook.com/)
Copyright (C) 2022 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 {
formatReminderTime,
isReminderActive
} from "@notesnook/core/collections/reminders";
import { ViewStyle } from "react-native";
import { Reminder } from "../../../services/notifications";
import { Button, ButtonProps } from "../button";
import { useThemeStore } from "../../../stores/use-theme-store";
import { SIZE } from "../../../utils/size";
export const ReminderTime = ({
checkIsActive = true,
style,
...props
}: {
short?: boolean;
onPress?: () => void;
reminder?: Reminder;
color?: string;
style?: ViewStyle;
checkIsActive?: boolean;
} & ButtonProps) => {
const colors = useThemeStore((state) => state.colors);
const reminder = props.reminder;
const time = !reminder ? undefined : formatReminderTime(reminder);
const isTodayOrTomorrow =
(time?.includes("Today") || time?.includes("Tomorrow")) &&
!time?.includes("Last");
const isActive =
checkIsActive && reminder ? isReminderActive(reminder) : true;
return reminder && isActive ? (
<Button
title={time}
key={reminder.id}
height={20}
icon="bell"
fontSize={SIZE.xs}
iconSize={SIZE.sm}
type="grayBg"
buttonType={
isTodayOrTomorrow
? {
text: props.color || colors.accent
}
: undefined
}
textStyle={{
marginRight: 0
}}
style={{
borderRadius: 5,
marginRight: 5,
borderWidth: 0.5,
borderColor: colors.icon,
paddingHorizontal: 6,
marginBottom: 5,
...(style as ViewStyle)
}}
{...props}
onPress={props.onPress}
/>
) : null;
};

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

@@ -837,7 +837,7 @@ export const settingsGroups: SettingSection[] = [
id: "reminders",
type: "screen",
name: "Reminders",
icon: "clock-outline",
icon: "bell",
description: "Manage and configure reminders in app",
sections: [
{

2
apps/mobile/app/utils/constants.js
View File

@@ -130,7 +130,7 @@ export const MenuItemsList = [
},
{
name: "Reminders",
icon: "clock-outline",
icon: "bell",
close: true
},
{