diff --git a/src/components/ContextMenu.tsx b/src/components/ContextMenu.tsx index 61fc499..e580c64 100644 --- a/src/components/ContextMenu.tsx +++ b/src/components/ContextMenu.tsx @@ -16,6 +16,7 @@ import { MaterialDesign3DynamicSchemeSource, MaterialDesign3SchemeSource, } from '../material-3-scheme'; +import { Q2SchemeSource } from '../q-2-scheme'; import { QSchemeSource } from '../q-scheme'; import { currentPickedColor } from '../stores/colors'; import { activeSchemeAtom, useActiveScheme, useUpdateScheme } from '../stores/schemes'; @@ -101,6 +102,79 @@ const QSchemeMenu: FC = ({ color, afterClick }) => { ); }; +const Q2SchemeMenu: FC = ({ color, afterClick }) => { + const { showToast } = useNotification(); + const activeSchemeId = useAtomValue(activeSchemeAtom); + const updateScheme = useUpdateScheme(activeSchemeId); + const updateSchemeContent = useCallback( + (content: keyof QSchemeSource) => { + updateScheme((prev) => { + prev.schemeStorage.source[content] = color; + return prev; + }); + showToast( + NotificationType.SUCCESS, + `${capitalize(content)} color in active scheme updated.`, + 'tabler:settings-up', + 3000, + ); + afterClick?.(); + }, + [color, activeSchemeId, updateScheme], + ); + const addCustomColor = useCallback(() => { + updateScheme((prev) => { + const source = prev.schemeStorage.source as Q2SchemeSource; + const colorAmount = size(source.custom_colors); + source.custom_colors[`Custom Color ${colorAmount + 1}`] = color; + return prev; + }); + + showToast(NotificationType.SUCCESS, `New color entry added.`, 'tabler:settings-up', 3000); + + afterClick?.(); + }, [color, activeSchemeId, updateScheme]); + + return ( + <> +
+
updateSchemeContent('primary')}> + Set as Primary color +
+
updateSchemeContent('secondary')}> + Set as Secondary color +
+
updateSchemeContent('tertiary')}> + Set as Tertiary color +
+
updateSchemeContent('accent')}> + Set as Accent color +
+
updateSchemeContent('danger')}> + Set as Danger color +
+
updateSchemeContent('success')}> + Set as Success color +
+
updateSchemeContent('warning')}> + Set as Warn color +
+
updateSchemeContent('info')}> + Set as Info color +
+
updateSchemeContent('foreground')}> + Set as Foreground color +
+
updateSchemeContent('background')}> + Set as Background color +
+
+ Add to Custom colors +
+ + ); +}; + const SwatchSchemeMenu: FC = ({ color, afterClick }) => { const { showToast } = useNotification(); const activeSchemeId = useAtomValue(activeSchemeAtom); @@ -253,6 +327,8 @@ export const ContextMenuBody: FC = ({ color, afterClick, x switch (activeScheme?.type) { case 'q_scheme': return ; + case 'q_2_scheme': + return ; case 'swatch_scheme': return ; case 'material_2':