Merge pull request #103 from Lemoncode/feature/snapshot

Add snapshot example and export button to toolbar

README.md

@@ -6,6 +6,8 @@
 
 Mongo Modeler is a free, open source online web application that allows you to design and model MongoDB databases.
 
+![Mongo Modeler snapshot example, diagram view](./media/mongo-modeler.jpg)
+
 Main features:
 
 - Allows the creation of nested fields.
@@ -35,6 +37,7 @@ Team members participating in this project
 - [Verónica Camarzana](https://github.com/VCamarzana)
 - [Alberto Santiago](https://github.com/AlbertoSSC)
 - [Abel de Tena](https://github.com/AbelDeTena)
+- [Tony Torres](https://github.com/SkayDks)
 - [Juan Pablo Martinez](https://github.com/juanpms2)
 - [Manolo Dorado](https://github.com/manudous)
 - [Braulio Díez](https://github.com/brauliodiez)

src/common/components/icons/export-icon.component.tsx

@@ -0,0 +1,15 @@
+export const ExportIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 256 256"
+    >
+      <path
+        fill="currentColor"
+        d="M214 112v96a14 14 0 0 1-14 14H56a14 14 0 0 1-14-14v-96a14 14 0 0 1 14-14h24a6 6 0 0 1 0 12H56a2 2 0 0 0-2 2v96a2 2 0 0 0 2 2h144a2 2 0 0 0 2-2v-96a2 2 0 0 0-2-2h-24a6 6 0 0 1 0-12h24a14 14 0 0 1 14 14M92.24 68.24L122 38.49V136a6 6 0 0 0 12 0V38.49l29.76 29.75a6 6 0 1 0 8.48-8.48l-40-40a6 6 0 0 0-8.48 0l-40 40a6 6 0 1 0 8.48 8.48"
+      />
+    </svg>
+  );
+};

src/pods/toolbar/components/export-button/export-button.component.tsx

@@ -0,0 +1,14 @@
+import { ToolbarButton } from '../toolbar-button/toolbarButton.component';
+import { ExportIcon } from '@/common/components/icons/export-icon.component';
+import classes from '@/pods/toolbar/toolbar.pod.module.css';
+
+export const ExportButton = () => {
+  return (
+    <ToolbarButton
+      icon={<ExportIcon />}
+      label="Export"
+      onClick={() => console.log('Here we should show export modal dialog')}
+      className={classes.button}
+    />
+  );
+};

src/pods/toolbar/components/export-button/index.ts

@@ -0,0 +1 @@
+export * from './export-button.component';

src/pods/toolbar/toolbar.pod.tsx

@@ -8,15 +8,17 @@ import {
   ThemeToggleButton,
 } from './components';
 import classes from './toolbar.pod.module.css';
+import { ExportButton } from './components/export-button';
 
 export const ToolbarPod: React.FC = () => {
   return (
     <div className={classes.container}>
       <ZoomInButton />
       <ZoomOutButton />
-      <CanvasSettingButton />
-      <RelationButton />
       <EditButton />
+      <RelationButton />
+      <ExportButton />
+      <CanvasSettingButton />
       <ThemeToggleButton darkLabel="Dark Mode" lightLabel="Light Mode" />
     </div>
   );