Command Palette: additional icons / css fix #251
Conversation
… to remove bottom scrollbar empty space on Command Palatte
|
This pull request is automatically being deployed by Amplify Hosting (learn more). |
|
@jimniels could you review this PR? |
| @@ -2,9 +2,10 @@ import { CommandPaletteListItemSharedProps } from '../CommandPaletteListItem'; | |||
| import { CommandPaletteListItem } from '../CommandPaletteListItem'; | |||
| import { copyToClipboard, cutToClipboard, pasteFromClipboard } from '../../../../core/actions/clipboard'; | |||
| import { KeyboardSymbols } from '../../../../helpers/keyboardSymbols'; | |||
| import { ContentCopy, ContentPaste, ContentCut, East } from '@mui/icons-material'; | |||
| import { ContentCopy, ContentPaste, ContentCut, East, UndoOutlined } from '@mui/icons-material'; | |||
There was a problem hiding this comment.
Looks like UndoOutlined isn't being used here. We should remove it
| @@ -91,7 +91,7 @@ export const CommandPalette = (props: Props) => { | |||
| /> | |||
|
|
|||
| <Divider /> | |||
| <div style={{ maxHeight: '330px', overflow: 'scroll' }}> | |||
| <div style={{ maxHeight: '330px', overflowY: 'scroll', paddingBottom: '5px' }}> | |||
There was a problem hiding this comment.
Good catch on being more explicit about overflow direction here 👍
| @@ -2,13 +2,15 @@ import { CommandPaletteListItemSharedProps } from '../CommandPaletteListItem'; | |||
| import { CommandPaletteListItem } from '../CommandPaletteListItem'; | |||
| import { newGridFile, openGridFile } from '../../../../core/actions/gridFile/OpenGridFile'; | |||
| import { SaveGridFile } from '../../../../core/actions/gridFile/SaveGridFile'; | |||
| import { UnarchiveOutlined, NoteAddOutlined, SaveAlt } from '@mui/icons-material'; | |||
There was a problem hiding this comment.
I'm thinking about these icons a little more...
Here's my thoughts, tell me what you think:
I don't love how different these icons are from each other. They're all conceptually about "file" but their icons are all so different. Even the arrows on the icons are differently-shaped arrows
I feel like using the outline of a "file" for each icon would be the most intuitive. It doesn't look like the default material UI has three different "file" icons representing new, save, and open. If we go with just what they have, I would think FileOpenOutlined might be best for open. As for save, maybe the traditional floppy disk SaveOutlined would be best?
Even that, I still don't love. Again, I feel like the notion of a "document" icon that is repeated for each would be the most useful. Maybe we could create our own "save" icon that is the same as the existing "FileOpenOutlined" but we reverse the direction of the arrow, e.g.
That last one is the one I like the best. What do you think?
There was a problem hiding this comment.
Happy to show you how to create that file too...it's pretty straightforward.
There was a problem hiding this comment.
I dig the last iteration for now. I know the MUI icons aren't the greatest. Which file are you referring? Just manipulating the svg of the icon?
There was a problem hiding this comment.
Yeah, the "new file" would just be the same icon. "open file" would be the UploadFile icon, and the "save file" would be a custom one we create from the UploadFile icon where we just invert the direction of the arrow.
adding more icons to the command palette for consistency, and CSS fix to remove bottom scrollbar empty space on Command Palette