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

change colors

Browse Source
This commit is contained in:
ammarahm-ed
2020-09-10 10:19:36 +05:00
parent f5489463fe
commit 70453b5202
7 changed files with 88 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/mobile/src/common/common.js
View File

@@ -72,6 +72,17 @@ let adjustedHeight = windowSize.height * PixelRatio.get();
const pixelDensity = PixelRatio.get(); const pixelDensity = PixelRatio.get();
export const COLORS_NOTE = {
red: "#f44336",
orange: "#FF9800",
yellow: "#FFD600",
green: "#4CAF50",
blue: "#2196F3",
purple: "#673AB7",
gray: "#9E9E9E",
};
const getDeviceSize = () => { const getDeviceSize = () => {
let dpi = getDpi(pixelDensity); let dpi = getDpi(pixelDensity);

57
apps/mobile/src/components/ActionSheetComponent/index.js
View File

@@ -23,11 +23,19 @@ import {
setColorScheme, setColorScheme,
SIZE, SIZE,
WEIGHT, WEIGHT,
COLORS_NOTE,
} from '../../common/common'; } from '../../common/common';
import {useTracked} from '../../provider'; import {useTracked} from '../../provider';
import {ACTIONS} from '../../provider/actions'; import {ACTIONS} from '../../provider/actions';
import NavigationService from '../../services/NavigationService'; import NavigationService from '../../services/NavigationService';
import {timeConverter, ToastEvent, DDS, db} from '../../utils/utils'; import {
timeConverter,
ToastEvent,
DDS,
db,
hexToRGBA,
RGB_Linear_Shade,
} from '../../utils/utils';
import {openVault, eSendEvent} from '../../services/eventManager'; import {openVault, eSendEvent} from '../../services/eventManager';
import { import {
refreshNotesPage, refreshNotesPage,
@@ -36,6 +44,7 @@ import {
} from '../../services/events'; } from '../../services/events';
import {PremiumTag} from '../Premium/PremiumTag'; import {PremiumTag} from '../Premium/PremiumTag';
import {MMKV} from '../../utils/storage'; import {MMKV} from '../../utils/storage';
import {PressableButton} from '../PressableButton';
const w = Dimensions.get('window').width; const w = Dimensions.get('window').width;
const h = Dimensions.get('window').height; const h = Dimensions.get('window').height;
@@ -433,41 +442,47 @@ export const ActionSheetComponent = ({
</TouchableOpacity> </TouchableOpacity>
); );
const _renderColor = (color) => ( const _renderColor = (c) => {
<TouchableOpacity console.log(COLORS_NOTE[c]);
key={color} const color = {
name: c,
value: COLORS_NOTE[c],
};
return (
<PressableButton
color={RGB_Linear_Shade(
!colors.night ? -0.2 : 0.2,
hexToRGBA(color.value, 1),
)}
selectedColor={color.value}
alpha={!colors.night ? -0.1 : 0.1}
opacity={1}
key={color.value}
onPress={async () => { onPress={async () => {
let noteColors = note.colors; let noteColors = note.colors;
if (noteColors.includes(color)) { if (noteColors.includes(color.name)) {
await db.notes.note(note.id).uncolor(color); await db.notes.note(note.id).uncolor(color.name);
} else { } else {
await db.notes.note(note.id).color(color); await db.notes.note(note.id).color(color.name);
} }
dispatch({type: ACTIONS.COLORS}); dispatch({type: ACTIONS.COLORS});
localRefresh(note.type); localRefresh(note.type);
}} }}
style={{ customStyle={{
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
borderColor: colors.nav,
}}>
<View
style={{
width: DDS.isTab ? 400 / 10 : w / 10, width: DDS.isTab ? 400 / 10 : w / 10,
height: DDS.isTab ? 400 / 10 : w / 10, height: DDS.isTab ? 400 / 10 : w / 10,
backgroundColor: color,
borderRadius: 100, borderRadius: 100,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
}}> }}>
{note && note.colors && note.colors.includes(color) ? ( {note && note.colors && note.colors.includes(color.name) ? (
<Icon name="check" color="white" size={SIZE.lg} /> <Icon name="check" color="white" size={SIZE.lg} />
) : null} ) : null}
</View> </PressableButton>
</TouchableOpacity>
); );
};
const _renderRowItem = (rowItem) => const _renderRowItem = (rowItem) =>
rowItems.includes(rowItem.name) ? ( rowItems.includes(rowItem.name) ? (
@@ -778,9 +793,7 @@ export const ActionSheetComponent = ({
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
}}> }}>
{['red', 'yellow', 'green', 'blue', 'purple', 'orange', 'gray'].map( {Object.keys(COLORS_NOTE).map(_renderColor)}
_renderColor,
)}
</View> </View>
) : null} ) : null}

4
apps/mobile/src/components/Container/ContainerBottomButton.js
View File

@@ -65,8 +65,8 @@ export const ContainerBottomButton = ({root}) => {
], ],
}}> }}>
<PressableButton <PressableButton
color={colors.accent} color={containerBottomButton.color? containerBottomButton.color : colors.accent}
selectedColor={colors.accent} selectedColor={containerBottomButton.color? containerBottomButton.color : colors.accent}
onPress={containerBottomButton.bottomButtonOnPress}> onPress={containerBottomButton.bottomButtonOnPress}>
<View <View
style={{ style={{

2
apps/mobile/src/components/ExportDialog/index.js
View File

@@ -26,7 +26,7 @@ import Seperator from '../Seperator';
const ExportDialog = () => { const ExportDialog = () => {
const [state, dispatch] = useTracked(); const [state, dispatch] = useTracked();
const {colors, tags, premiumUser} = state; const {colors, tags, premiumUser} = state;
const [visible, setVisible] = useState(true); const [visible, setVisible] = useState(false);
const [notes, setNotes] = useState([]); const [notes, setNotes] = useState([]);
const [exporting, setExporting] = useState(false); const [exporting, setExporting] = useState(false);
const [complete, setComplete] = useState(false); const [complete, setComplete] = useState(false);

33
apps/mobile/src/components/Menu/ColorSection.js
View File

@@ -1,11 +1,12 @@
import React, {useEffect} from 'react'; import React, { useEffect } from 'react';
import {Text, TouchableOpacity, View} from 'react-native'; import { Text, View } from 'react-native';
import {opacity, pv, SIZE} from '../../common/common'; import { COLORS_NOTE, pv, SIZE } from '../../common/common';
import {useTracked} from '../../provider'; import { useTracked } from '../../provider';
import {ACTIONS} from '../../provider/actions'; import { ACTIONS } from '../../provider/actions';
import {eSendEvent} from '../../services/eventManager'; import { eSendEvent } from '../../services/eventManager';
import {refreshNotesPage} from '../../services/events'; import { refreshNotesPage } from '../../services/events';
import NavigationService from '../../services/NavigationService'; import NavigationService from '../../services/NavigationService';
import { PressableButton } from '../PressableButton';
export const ColorSection = ({noTextMode}) => { export const ColorSection = ({noTextMode}) => {
const [state, dispatch] = useTracked(); const [state, dispatch] = useTracked();
@@ -21,10 +22,18 @@ export const ColorSection = ({noTextMode}) => {
width: '100%', width: '100%',
paddingHorizontal: 10, paddingHorizontal: 10,
}}> }}>
{colorNotes.map(item => ( {colorNotes.map((item) => (
<TouchableOpacity <PressableButton
key={item.id} key={item.id}
activeOpacity={opacity / 2} onPress={_onPress}
color={
currentScreen === item.name.toLowerCase()
? colors.shade
: 'transparent'
}
selectedColor={colors.accent}
alpha={!colors.night ? -0.02 : 0.02}
opacity={0.12}
onPress={() => { onPress={() => {
let params = { let params = {
type: 'color', type: 'color',
@@ -71,7 +80,7 @@ export const ColorSection = ({noTextMode}) => {
style={{ style={{
width: SIZE.md, width: SIZE.md,
height: SIZE.md, height: SIZE.md,
backgroundColor: item.title, backgroundColor: COLORS_NOTE[item.title],
borderRadius: 100, borderRadius: 100,
justifyContent: 'center', justifyContent: 'center',
marginRight: 10, marginRight: 10,
@@ -105,7 +114,7 @@ export const ColorSection = ({noTextMode}) => {
</Text> </Text>
</View> </View>
)} )}
</TouchableOpacity> </PressableButton>
))} ))}
</View> </View>
); );

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

@@ -16,8 +16,9 @@ import {
} from '../../services/events'; } from '../../services/events';
import {openEditorAnimation} from '../../utils/animations'; import {openEditorAnimation} from '../../utils/animations';
import {db, DDS, editing, ToastEvent} from '../../utils/utils'; import {db, DDS, editing, ToastEvent} from '../../utils/utils';
import { NoteItemWrapper } from '../../components/SimpleList/NoteItemWrapper'; import {NoteItemWrapper} from '../../components/SimpleList/NoteItemWrapper';
import { Placeholder } from '../../components/ListPlaceholders'; import {Placeholder} from '../../components/ListPlaceholders';
import {COLORS_NOTE} from '../../common/common';
export const Notes = ({route, navigation}) => { export const Notes = ({route, navigation}) => {
const [state, dispatch] = useTracked(); const [state, dispatch] = useTracked();
@@ -61,7 +62,7 @@ export const Notes = ({route, navigation}) => {
}; };
}, []); }, []);
const init = data => { const init = (data) => {
params = route.params; params = route.params;
if (data) { if (data) {
params = data; params = data;
@@ -92,7 +93,7 @@ export const Notes = ({route, navigation}) => {
menu: params.type === 'color' ? true : false, menu: params.type === 'color' ? true : false,
canGoBack: params.type === 'color' ? false : true, canGoBack: params.type === 'color' ? false : true,
route: route, route: route,
color: params.type == 'color' ? params.title : null, color: params.type == 'color' ? COLORS_NOTE[params.title] : null,
navigation: navigation, navigation: navigation,
}, },
}); });
@@ -100,7 +101,7 @@ export const Notes = ({route, navigation}) => {
type: ACTIONS.CONTAINER_BOTTOM_BUTTON, type: ACTIONS.CONTAINER_BOTTOM_BUTTON,
state: { state: {
visible: true, visible: true,
color: params.type == 'color' ? params.title : null, color: params.type == 'color' ? COLORS_NOTE[params.title] : null,
bottomButtonOnPress: _bottomBottomOnPress, bottomButtonOnPress: _bottomBottomOnPress,
bottomButtonText: 'Create a new note', bottomButtonText: 'Create a new note',
}, },
@@ -197,7 +198,7 @@ export const Notes = ({route, navigation}) => {
focused={isFocused} focused={isFocused}
customRefresh={_onRefresh} customRefresh={_onRefresh}
RenderItem={NoteItemWrapper} RenderItem={NoteItemWrapper}
placeholder={<Placeholder type="notes"/>} placeholder={<Placeholder type="notes" />}
placeholderText={`Add some notes to this" ${ placeholderText={`Add some notes to this" ${
params.type ? params.type : 'topic.' params.type ? params.type : 'topic.'
}`} }`}

5
apps/mobile/src/views/Settings/index.js
View File

@@ -530,14 +530,11 @@ export const Settings = ({route, navigation}) => {
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
}}> }}>
<View
style={{
}}>
{colors.accent === item ? ( {colors.accent === item ? (
<Icon size={SIZE.lg} color="white" name="check" /> <Icon size={SIZE.lg} color="white" name="check" />
) : null} ) : null}
</View>
</PressableButton> </PressableButton>
))} ))}
</View> </View>