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

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();
export const COLORS_NOTE = {
red: "#f44336",
orange: "#FF9800",
yellow: "#FFD600",
green: "#4CAF50",
blue: "#2196F3",
purple: "#673AB7",
gray: "#9E9E9E",
};
const getDeviceSize = () => {
let dpi = getDpi(pixelDensity);

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

@@ -23,11 +23,19 @@ import {
setColorScheme,
SIZE,
WEIGHT,
COLORS_NOTE,
} from '../../common/common';
import {useTracked} from '../../provider';
import {ACTIONS} from '../../provider/actions';
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 {
refreshNotesPage,
@@ -36,6 +44,7 @@ import {
} from '../../services/events';
import {PremiumTag} from '../Premium/PremiumTag';
import {MMKV} from '../../utils/storage';
import {PressableButton} from '../PressableButton';
const w = Dimensions.get('window').width;
const h = Dimensions.get('window').height;
@@ -433,41 +442,47 @@ export const ActionSheetComponent = ({
</TouchableOpacity>
);
const _renderColor = (color) => (
<TouchableOpacity
key={color}
const _renderColor = (c) => {
console.log(COLORS_NOTE[c]);
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 () => {
let noteColors = note.colors;
if (noteColors.includes(color)) {
await db.notes.note(note.id).uncolor(color);
if (noteColors.includes(color.name)) {
await db.notes.note(note.id).uncolor(color.name);
} else {
await db.notes.note(note.id).color(color);
await db.notes.note(note.id).color(color.name);
}
dispatch({type: ACTIONS.COLORS});
localRefresh(note.type);
}}
style={{
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
borderColor: colors.nav,
}}>
<View
style={{
customStyle={{
width: DDS.isTab ? 400 / 10 : w / 10,
height: DDS.isTab ? 400 / 10 : w / 10,
backgroundColor: color,
borderRadius: 100,
justifyContent: '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} />
) : null}
</View>
</TouchableOpacity>
</PressableButton>
);
};
const _renderRowItem = (rowItem) =>
rowItems.includes(rowItem.name) ? (
@@ -778,9 +793,7 @@ export const ActionSheetComponent = ({
alignItems: 'center',
justifyContent: 'space-between',
}}>
{['red', 'yellow', 'green', 'blue', 'purple', 'orange', 'gray'].map(
_renderColor,
)}
{Object.keys(COLORS_NOTE).map(_renderColor)}
</View>
) : null}

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

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

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

@@ -26,7 +26,7 @@ import Seperator from '../Seperator';
const ExportDialog = () => {
const [state, dispatch] = useTracked();
const {colors, tags, premiumUser} = state;
const [visible, setVisible] = useState(true);
const [visible, setVisible] = useState(false);
const [notes, setNotes] = useState([]);
const [exporting, setExporting] = 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 {Text, TouchableOpacity, View} from 'react-native';
import {opacity, pv, SIZE} from '../../common/common';
import {useTracked} from '../../provider';
import {ACTIONS} from '../../provider/actions';
import {eSendEvent} from '../../services/eventManager';
import {refreshNotesPage} from '../../services/events';
import React, { useEffect } from 'react';
import { Text, View } from 'react-native';
import { COLORS_NOTE, pv, SIZE } from '../../common/common';
import { useTracked } from '../../provider';
import { ACTIONS } from '../../provider/actions';
import { eSendEvent } from '../../services/eventManager';
import { refreshNotesPage } from '../../services/events';
import NavigationService from '../../services/NavigationService';
import { PressableButton } from '../PressableButton';
export const ColorSection = ({noTextMode}) => {
const [state, dispatch] = useTracked();
@@ -21,10 +22,18 @@ export const ColorSection = ({noTextMode}) => {
width: '100%',
paddingHorizontal: 10,
}}>
{colorNotes.map(item => (
<TouchableOpacity
{colorNotes.map((item) => (
<PressableButton
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={() => {
let params = {
type: 'color',
@@ -71,7 +80,7 @@ export const ColorSection = ({noTextMode}) => {
style={{
width: SIZE.md,
height: SIZE.md,
backgroundColor: item.title,
backgroundColor: COLORS_NOTE[item.title],
borderRadius: 100,
justifyContent: 'center',
marginRight: 10,
@@ -105,7 +114,7 @@ export const ColorSection = ({noTextMode}) => {
</Text>
</View>
)}
</TouchableOpacity>
</PressableButton>
))}
</View>
);

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

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