change colors

2025-12-22 22:49:45 +01:00 · 2020-09-10 10:19:36 +05:00
parent f5489463fe
commit 70453b5202
7 changed files with 88 additions and 57 deletions
--- a/apps/mobile/src/common/common.js
+++ b/apps/mobile/src/common/common.js
@@ -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);
--- a/apps/mobile/src/components/ActionSheetComponent/index.js
+++ b/apps/mobile/src/components/ActionSheetComponent/index.js
@@ -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}

--- a/apps/mobile/src/components/Container/ContainerBottomButton.js
+++ b/apps/mobile/src/components/Container/ContainerBottomButton.js
@@ -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={{
--- a/apps/mobile/src/components/ExportDialog/index.js
+++ b/apps/mobile/src/components/ExportDialog/index.js
@@ -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);
--- a/apps/mobile/src/components/Menu/ColorSection.js
+++ b/apps/mobile/src/components/Menu/ColorSection.js
@@ -1,11 +1,12 @@
 import React, { useEffect } from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-import {opacity, pv, SIZE} from '../../common/common';
+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>
  );
--- a/apps/mobile/src/views/Notes/index.js
+++ b/apps/mobile/src/views/Notes/index.js
@@ -18,6 +18,7 @@ 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 {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',
        },
--- a/apps/mobile/src/views/Settings/index.js
+++ b/apps/mobile/src/views/Settings/index.js
@@ -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>