admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Refactoring shortcuts and commandbar (#412)

Browse Source 
* Begin refactoring shortcuts and commandbar

* Continue refacto hotkeys

* Remove debug logs

* Add new story

* Simplify hotkeys

* Simplify hotkeys

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Félix Malfait
2023-06-25 22:25:31 -07:00
committed by GitHub
parent 9bd8f6df01
commit 827d6390e4
19 changed files with 387 additions and 414 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/modules/ui/layout/DefaultLayout.tsx
View File

@ -2,7 +2,7 @@ import styled from '@emotion/styled';
import { useRecoilState, useRecoilValue } from 'recoil';
import { currentUserState } from '@/auth/states/currentUserState';
import { CommandMenu } from '@/search/components/CommandMenu';
import { CommandMenu } from '@/command-menu/components/CommandMenu';
import { AppNavbar } from '~/AppNavbar';
import { NavbarContainer } from './navbar/NavbarContainer';

7
front/src/modules/ui/layout/styles/themes.ts
View File

@ -31,9 +31,12 @@ const lightThemeSpecific = {
blueHighTransparency: 'rgba(25, 97, 237, 0.03)',
blueLowTransparency: 'rgba(25, 97, 237, 0.32)',
boxShadow: '0px 2px 4px 0px #0F0F0F0A',
modalBoxShadow: '0px 3px 12px rgba(0, 0, 0, 0.09)',
modalBoxShadow:
'2px 4px 16px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.04)',
lightBoxShadow:
'0px 2px 4px 0px rgba(0, 0, 0, 0.04), 0px 0px 4px 0px rgba(0, 0, 0, 0.08)',
heavyBoxShadow:
'0px 16px 40px 0px rgba(0, 0, 0, 0.24), 0px 0px 12px 0px rgba(0, 0, 0, 0.24)',
};
const darkThemeSpecific: typeof lightThemeSpecific = {
@ -52,6 +55,8 @@ const darkThemeSpecific: typeof lightThemeSpecific = {
modalBoxShadow: '0px 3px 12px rgba(0, 0, 0, 0.09)', // TODO change color for dark theme
lightBoxShadow:
'0px 2px 4px 0px rgba(0, 0, 0, 0.04), 0px 0px 4px 0px rgba(0, 0, 0, 0.08)',
heavyBoxShadow:
'box-shadow: 0px 16px 40px 0px rgba(0, 0, 0, 0.24), 0px 0px 12px 0px rgba(0, 0, 0, 0.24)',
};
export const lightTheme = { ...commonTheme, ...lightThemeSpecific };

3
front/src/modules/ui/layout/top-bar/TopBar.tsx
View File

@ -1,6 +1,7 @@
import { ReactNode } from 'react';
import styled from '@emotion/styled';
import { useDirectHotkeys } from '@/hotkeys/hooks/useDirectHotkeys';
import { IconPlus } from '@/ui/icons/index';
import NavCollapseButton from '../navbar/NavCollapseButton';
@ -49,6 +50,8 @@ type OwnProps = {
};
export function TopBar({ title, icon, onAddButtonClick }: OwnProps) {
useDirectHotkeys('c', () => onAddButtonClick && onAddButtonClick());
return (
<>
<TopBarContainer>