Skip to content

Commit

Permalink
feat: add a close button to close document
Browse files Browse the repository at this point in the history
  • Loading branch information
vimcaw committed Aug 5, 2021
1 parent 24f5e04 commit 37ac3dd
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 22 deletions.
57 changes: 35 additions & 22 deletions src/DocumentWindow/index.tsx
Original file line number Diff line number Diff line change
@@ -1,26 +1,39 @@
import { Flex, View, Text } from '@adobe/react-spectrum';
import { Flex, View, Text, ActionButton, TooltipTrigger, Tooltip } from '@adobe/react-spectrum';
import CloseCircle from '@spectrum-icons/workflow/CloseCircle';
import { observer } from 'mobx-react-lite';
import { useTranslation } from 'react-i18next';
import store from '@store';
import Canvas from '@Canvas';

export default observer(() => (
<Flex flexGrow={1} width={0} direction="column">
<View backgroundColor="gray-300" paddingX="size-200" paddingY="size-100">
{store.activeDocument!.name}
</View>
<Canvas />
<View backgroundColor="gray-300" paddingY="size-0">
<Flex>
<View backgroundColor="gray-200" width="size-1200" paddingX="size-100" paddingY="size-50">
<Flex justifyContent="center">
<Text>{(store.activeDocument!.viewOptions.scale * 100).toFixed(2)}%</Text>
</Flex>
</View>
<View paddingX="size-200" paddingY="size-50">
{/* eslint-disable-next-line i18next/no-literal-string */}
{store.activeDocument!.width}×{store.activeDocument!.height}
</View>
</Flex>
</View>
</Flex>
));
export default observer(() => {
const { t } = useTranslation();
return (
<Flex flexGrow={1} width={0} direction="column">
<View backgroundColor="gray-300" paddingX="size-200" paddingY="size-100">
<Flex justifyContent="center" alignItems="center">
<Text>{store.activeDocument!.name}</Text>
<TooltipTrigger>
<ActionButton isQuiet onPress={store.closeDocument} marginStart="size-100">
<CloseCircle />
</ActionButton>
<Tooltip>{t('close')}</Tooltip>
</TooltipTrigger>
</Flex>
</View>
<Canvas />
<View backgroundColor="gray-300" paddingY="size-0">
<Flex>
<View backgroundColor="gray-200" width="size-1200" paddingX="size-100" paddingY="size-50">
<Flex justifyContent="center">
<Text>{(store.activeDocument!.viewOptions.scale * 100).toFixed(2)}%</Text>
</Flex>
</View>
<View paddingX="size-200" paddingY="size-50">
{/* eslint-disable-next-line i18next/no-literal-string */}
{store.activeDocument!.width}×{store.activeDocument!.height}
</View>
</Flex>
</View>
</Flex>
);
});
1 change: 1 addition & 0 deletions src/lang/en.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,5 @@ export default {
create: 'Create',
cancel: 'Cancel',
layer: 'Layer',
close: 'Close',
};
1 change: 1 addition & 0 deletions src/lang/zh-CN.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,5 @@ export default {
create: '新建',
cancel: '取消',
layer: '图层',
close: '关闭',
} as Translation;
7 changes: 7 additions & 0 deletions src/store/Root.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,13 @@ const Root = types
self.documents.push(newDocument);
self.activeDocument = newDocument;
},
closeDocument() {
if (!self.activeDocument) return;
const index = self.documents.indexOf(self.activeDocument);
self.activeDocument = undefined;
if (!index) return;
self.documents.splice(index, 1);
},
}));

export default Root;

0 comments on commit 37ac3dd

Please sign in to comment.