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

add new header for notebook screen & topic

Browse Source
This commit is contained in:
ammarahm-ed
2021-11-30 13:29:33 +05:00
parent fe03fab5dd
commit a28eebf28c
12 changed files with 292 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/mobile/src/components/AddNotebookDialog/index.js
View File

@@ -400,6 +400,11 @@ export class AddNotebookDialog extends React.Component {
type="accent"
onPress={this.addNewNotebook}
/>
<View
style={{
height:35
}}
/>
</View>
<Toast context="local" />

3
apps/mobile/src/components/Header/index.js
View File

@@ -12,7 +12,7 @@ import {HeaderRightMenu} from './HeaderRightMenu';
import {Title} from './title';
export const Header = React.memo(
({root, title, screen, isBack, color, action, rightButtons}) => {
({root, title, screen, isBack, color, action, rightButtons,notebook}) => {
const [state] = useTracked();
const {colors} = state;
const insets = useSafeAreaInsets();
@@ -52,6 +52,7 @@ export const Header = React.memo(
{screen !== 'Search' ? (
<Title
notebook={notebook}
headerColor={color}
heading={title}
screen={screen}

81
apps/mobile/src/components/Header/title.js
View File

@@ -1,12 +1,57 @@
import React from 'react';
import React, {useEffect, useState} from 'react';
import {View} from 'react-native';
import {useTracked} from '../../provider';
import { SIZE } from '../../utils/SizeUtils';
import {
eSendEvent,
eSubscribeEvent,
eUnSubscribeEvent
} from '../../services/EventManager';
import Navigation from '../../services/Navigation';
import {eOnNewTopicAdded, eScrollEvent} from '../../utils/Events';
import {SIZE} from '../../utils/SizeUtils';
import Heading from '../Typography/Heading';
import Paragraph from '../Typography/Paragraph';
export const Title = ({heading, headerColor}) => {
export const Title = ({heading, headerColor, screen, notebook}) => {
const [state] = useTracked();
const {colors} = state;
const [hide, setHide] = useState(screen === 'Notebook' ? true : false);
const onScroll = data => {
if (screen !== 'Notebook') {
setHide(false);
return;
}
if (data.y > 150) {
setHide(false);
} else {
setHide(true);
}
};
useEffect(() => {
eSubscribeEvent(eScrollEvent, onScroll);
return () => {
eUnSubscribeEvent(eScrollEvent, onScroll);
};
}, []);
function navigateToNotebook() {
if (!notebook) return;
let routeName = 'Notebook';
let params = {
menu: false,
notebook: notebook,
title: notebook.title
};
let headerState = {
heading: notebook.title,
id: notebook.id,
type: notebook.type
};
eSendEvent(eOnNewTopicAdded, params);
Navigation.navigate(routeName, params, headerState);
}
return (
<View
@@ -15,17 +60,27 @@ export const Title = ({heading, headerColor}) => {
flexShrink: 1,
flexDirection: 'row'
}}>
<Heading
numberOfLines={1}
style={{
flexWrap: 'wrap'
}}
color={headerColor}>
<Heading color={colors.accent}>
{heading.slice(0, 1) === '#' ? '#' : null}
{!hide ? (
<Heading
onPress={navigateToNotebook}
numberOfLines={notebook ? 2 : 1}
size={notebook ? SIZE.md + 2 : SIZE.xl}
style={{
flexWrap: 'wrap'
}}
color={headerColor}>
{notebook && (
<Paragraph numberOfLines={1} size={SIZE.xs + 2}>
{notebook?.title}
{'\n'}
</Paragraph>
)}
<Heading color={colors.accent}>
{heading.slice(0, 1) === '#' ? '#' : null}
</Heading>
{heading.slice(0, 1) === '#' ? heading.slice(1) : heading}
</Heading>
{heading.slice(0, 1) === '#' ? heading.slice(1) : heading}
</Heading>
) : null}
</View>
);
};

9
apps/mobile/src/components/SelectionWrapper/backfill.js
View File

@@ -1,11 +1,8 @@
import React from 'react';
import {View} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {useTracked} from '../../provider';
import { View } from 'react-native';
import { useTracked } from '../../provider';
import { useEditorStore } from '../../provider/stores';
import {hexToRGBA} from '../../utils/ColorUtils';
import {SIZE} from '../../utils/SizeUtils';
import Heading from '../Typography/Heading';
import { hexToRGBA } from '../../utils/ColorUtils';
export const Filler = ({item, background}) => {
const [state] = useTracked();

19
apps/mobile/src/components/SelectionWrapper/index.js
View File

@@ -1,13 +1,12 @@
import React, {useEffect, useState} from 'react';
import {useWindowDimensions} from 'react-native';
import {useTracked} from '../../provider';
import React, { useEffect, useState } from 'react';
import { useTracked } from '../../provider';
import { useSettingStore } from '../../provider/stores';
import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
import {history} from '../../utils';
import {PressableButton} from '../PressableButton';
import {ActionStrip} from './action-strip';
import {Filler} from './back-fill';
import {SelectionIcon} from './selection';
import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
import { history } from '../../utils';
import { PressableButton } from '../PressableButton';
import { ActionStrip } from './action-strip';
import { Filler } from './back-fill';
import { SelectionIcon } from './selection';
const SelectionWrapper = ({
children,
@@ -55,7 +54,7 @@ const SelectionWrapper = ({
testID={testID}
onLongPress={_onLongPress}
onPress={_onPress}
customSelectedColor={colors.nav}
customSelectedColor={colors.transGray}
customAlpha={!colors.night ? -0.02 : 0.02}
customOpacity={1}
customStyle={{

29
apps/mobile/src/components/SimpleList/index.js
View File

@@ -41,7 +41,8 @@ const SimpleList = ({
headerProps = {
heading: 'Home'
},
screen
screen,
ListHeader
}) => {
const [state] = useTracked();
const {colors} = state;
@@ -103,10 +104,10 @@ const SimpleList = ({
let styles = {
height: '100%',
backgroundColor: colors.bg,
width: '100%',
minHeight: 1,
minWidth: 1
minWidth: 1,
backgroundColor:colors.bg
};
const _keyExtractor = item => item.id || item.title;
@@ -147,15 +148,19 @@ const SimpleList = ({
ListFooterComponent={<Footer />}
ListHeaderComponent={
<>
<Header
title={headerProps.heading}
paragraph={headerProps.paragraph}
onPress={headerProps.onPress}
icon={headerProps.icon}
color={headerProps.color}
type={type}
screen={screen}
/>
{ListHeader ? (
ListHeader
) : (
<Header
title={headerProps.heading}
paragraph={headerProps.paragraph}
onPress={headerProps.onPress}
icon={headerProps.icon}
color={headerProps.color}
type={type}
screen={screen}
/>
)}
</>
}
/>

147
apps/mobile/src/components/SimpleList/notebookheader.js Normal file
View File

@@ -0,0 +1,147 @@
import React, {useState} from 'react';
import {View} from 'react-native';
import {useTracked} from '../../provider';
import {useMenuStore} from '../../provider/stores';
import {ToastEvent} from '../../services/EventManager';
import {db} from '../../utils/database';
import {SIZE} from '../../utils/SizeUtils';
import {ActionIcon} from '../ActionIcon';
import {Button} from '../Button';
import Heading from '../Typography/Heading';
import Paragraph from '../Typography/Paragraph';
export const NotebookHeader = ({notebook, onPress, onEditNotebook}) => {
const [state] = useTracked();
const {colors} = state;
const [isPinnedToMenu, setIsPinnedToMenu] = useState(
db.settings.isPinned(notebook.id)
);
const setMenuPins = useMenuStore(state => state.setMenuPins);
const onPinNotebook = async () => {
try {
if (isPinnedToMenu) {
await db.settings.unpin(notebook.id);
} else {
await db.settings.pin(notebook.type, {id: notebook.id});
ToastEvent.show({
heading: 'Shortcut created',
type: 'success'
});
}
setIsPinnedToMenu(db.settings.isPinned(notebook.id));
setMenuPins();
} catch (e) {}
};
return (
<View
style={{
marginBottom: 5,
padding: 0,
width: '100%',
paddingVertical: 15,
paddingHorizontal: 12,
alignSelf: 'center',
borderRadius: 10,
paddingTop: 25
}}>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center'
}}>
<Heading size={SIZE.xxl}>{notebook.title}</Heading>
<View
style={{
flexDirection: 'row'
}}>
<ActionIcon
name="link-variant"
onPress={onPinNotebook}
customStyle={{
marginRight: 15,
width:40,
height:40
}}
type={isPinnedToMenu ? "transparent" : "grayBg"}
color={isPinnedToMenu ? colors.accent : colors.icon}
size={SIZE.lg}
/>
<ActionIcon
size={SIZE.lg}
onPress={onEditNotebook}
name="pencil"
type="grayBg"
color={colors.icon}
customStyle={{
width:40,
height:40
}}
/>
</View>
</View>
{notebook.description && (
<Paragraph size={SIZE.md} color={colors.pri}>
{notebook.description}
</Paragraph>
)}
{/* <View
style={{
marginTop: 15,
flexDirection: 'row'
}}>
<Button
title="Edit notebook"
width={null}
height={null}
type="transparent"
icon="pencil"
fontSize={SIZE.sm}
onPress={onEditNotebook}
style={{
alignSelf: 'flex-start',
paddingHorizontal: 12,
borderRadius: 100,
height: 30,
marginRight: 10
}}
/>
<Button
width={null}
height={null}
type={isPinnedToMenu ? 'shade' : 'transparent'}
icon="link-variant"
onPress={onPinNotebook}
style={{
alignSelf: 'flex-start',
paddingVertical: 0,
paddingHorizontal: 0,
width: 30,
height: 30,
borderColor: isPinnedToMenu ? colors.accent : colors.icon,
marginRight: 10
}}
/>
</View> */}
<Paragraph
style={{
marginTop: 10,
fontStyle: 'italic'
}}
size={SIZE.xs + 1}
color={colors.icon}>
{notebook.topics.length === 1
? '1 topic'
: `${notebook.topics.length} topics`}
, last modified on {new Date(notebook.dateEdited).toLocaleString()}
</Paragraph>
</View>
);
};

18
apps/mobile/src/utils/database.js
View File

@@ -14,15 +14,15 @@ export const db = new Database(
db.host(
__DEV__
? {
// API_HOST: 'https://api.notesnook.com',
// AUTH_HOST: 'https://auth.streetwriters.co',
// SSE_HOST: 'https://events.streetwriters.co',
// SUBSCRIPTIONS_HOST: 'https://subscriptions.streetwriters.co'
API_HOST: 'http://192.168.10.29:5264',
AUTH_HOST: 'http://192.168.10.29:8264',
SSE_HOST: 'http://192.168.10.29:7264',
SUBSCRIPTIONS_HOST: 'http://192.168.10.29:9264',
ISSUES_HOST: 'http://192.168.10.29:2624'
API_HOST: 'https://api.notesnook.com',
AUTH_HOST: 'https://auth.streetwriters.co',
SSE_HOST: 'https://events.streetwriters.co',
SUBSCRIPTIONS_HOST: 'https://subscriptions.streetwriters.co'
// API_HOST: 'http://192.168.10.29:5264',
// AUTH_HOST: 'http://192.168.10.29:8264',
// SSE_HOST: 'http://192.168.10.29:7264',
// SUBSCRIPTIONS_HOST: 'http://192.168.10.29:9264',
// ISSUES_HOST: 'http://192.168.10.29:2624'
}
: {
API_HOST: 'https://api.notesnook.com',

15
apps/mobile/src/views/Editor/EditorHeader.js
View File

@@ -180,7 +180,7 @@ const EditorHeader = () => {
const onNoteRemoved = async id => {
try {
console.log("NOTE REMOVED",id);
console.log('NOTE REMOVED', id);
await db.notes.remove(id);
if (id !== getNote().id) return;
Navigation.setRoutesToUpdate([
@@ -312,10 +312,15 @@ const EditorHeader = () => {
name="crown"
color={colors.yellow}
customStyle={{
marginLeft: 10,
marginLeft: 10
}}
top={50}
onPress={() => {
onPress={async () => {
let note = getNote();
clearEditor(true, true, true);
await loadNote(note);
return;
if (editing.isFocused) {
safeKeyboardDismiss();
editing.isFocused = true;
@@ -329,7 +334,7 @@ const EditorHeader = () => {
name="cloud-upload-outline"
color={colors.pri}
customStyle={{
marginLeft: 10,
marginLeft: 10
}}
top={50}
onPress={publishNote}
@@ -341,7 +346,7 @@ const EditorHeader = () => {
name="attachment"
color={colors.pri}
customStyle={{
marginLeft: 10,
marginLeft: 10
}}
top={50}
onPress={picker.pick}

5
apps/mobile/src/views/Editor/tiny/toolbar/config.js
View File

@@ -59,7 +59,7 @@ export const IMAGE_TOOLTIP_CONFIG = {
default: null,
type: 'imageoptions',
pageX: 0
}
};
export const TOOLBAR_CONFIG = [
[
@@ -93,6 +93,7 @@ export const TOOLBAR_CONFIG = [
type: 'tooltip',
valueIcon: 'alignleft',
fullname: 'Text Alignment',
premium: true,
group: [
{
format: 'alignleft',
@@ -385,7 +386,7 @@ export const TOOLBAR_CONFIG = [
}
],
[
/* {
/* {
format: 'filepicker',
type: 'format',
fullname: 'Attach file',

20
apps/mobile/src/views/Notebook/index.js
View File

@@ -5,6 +5,7 @@ import { ContainerTopSection } from '../../components/Container/ContainerTopSect
import { Header } from '../../components/Header';
import SelectionHeader from '../../components/SelectionHeader';
import SimpleList from '../../components/SimpleList';
import { NotebookHeader } from '../../components/SimpleList/notebook-header';
import {
eSendEvent,
eSubscribeEvent,
@@ -27,6 +28,7 @@ export const Notebook = ({route, navigation}) => {
db.settings.getGroupOptions('topics')
)
);
console.log('params',route?.params.notebook?.topics)
const params = useRef(route?.params);
const onLoad = data => {
@@ -92,20 +94,13 @@ export const Notebook = ({route, navigation}) => {
return (
<>
<SelectionHeader screen="Notebook" />
<ContainerTopSection>
<Header
title={params.current.title}
isBack={!params.current.menu}
screen="Notebook"
action={_onPressBottomButton}
rightButtons={[
{
icon: 'pencil',
title: 'Edit notebook',
func: () =>
eSendEvent(eOpenAddNotebookDialog, params.current.notebook)
}
]}
/>
</ContainerTopSection>
<SimpleList
@@ -123,6 +118,15 @@ export const Notebook = ({route, navigation}) => {
},
icon: 'pencil'
}}
ListHeader={
<NotebookHeader
onEditNotebook={() => {
eSendEvent(eOpenAddNotebookDialog, params.current.notebook);
}}
onPress={_onPressBottomButton}
notebook={params.current.notebook}
/>
}
focused={() => navigation.isFocused()}
placeholderData={{
heading: params.current.notebook.title,

10
apps/mobile/src/views/Notes/index.js
View File

@@ -24,7 +24,7 @@ import {
} from '../../utils/Events';
import {openLinkInBrowser} from '../../utils/functions';
import {tabBarRef} from '../../utils/Refs';
import { getNote } from '../Editor/Functions';
import {getNote} from '../Editor/Functions';
const getNotes = params => {
if (!params) return [];
@@ -170,7 +170,7 @@ export const Notes = ({route, navigation}) => {
eSendEvent(eOnLoadNote, {type: 'new'});
editing.currentlyEditing = true;
editing.movedAway = false;
}
}
tabBarRef.current?.goToPage(1);
} else {
eSendEvent(eOnLoadNote, {type: 'new'});
@@ -190,7 +190,7 @@ export const Notes = ({route, navigation}) => {
onPress: () => {
if (params.current?.type !== 'topic') return;
eSendEvent(eOpenAddTopicDialog, {
notebookId: params.current?.notebookId,
notebookId: params.current?.notebookId,
toEdit: params.current
});
},
@@ -253,6 +253,10 @@ export const Notes = ({route, navigation}) => {
isBack={!params.current?.menu}
screen="NotesPage"
action={_onPressBottomButton}
notebook={
params.current?.notebookId &&
db.notebooks?.notebook(params.current?.notebookId).data
}
rightButtons={
params.current?.type !== 'topic' ? null : headerRightButtons
}