Merge pull request #479 from Lemoncode/vnext

Version 0.9

Author: brauliodiez

editor.html

@@ -20,10 +20,10 @@
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-    <link rel="manifest" href="/site.webmanifest" />
+    <link rel="manifest" href="/manifest.json" />
     <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
-    <meta name="msapplication-TileColor" content="#da532c" />
-    <meta name="theme-color" content="#ffffff" />
+    <meta name="msapplication-TileColor" content="#ffffff" />
+    <meta name="theme-color" content="#455a6c" />
 
     <title>Mongo Modeler - Community Preview</title>
   </head>

index.html

@@ -20,10 +20,10 @@
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-    <link rel="manifest" href="/site.webmanifest" />
+    <link rel="manifest" href="/manifest.json" />
     <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
-    <meta name="msapplication-TileColor" content="#da532c" />
-    <meta name="theme-color" content="#ffffff" />
+    <meta name="msapplication-TileColor" content="#ffffff" />
+    <meta name="theme-color" content="#142231" />
     <title>Mongo Modeler</title>
     <meta
       name="description"
@@ -149,7 +149,12 @@
         font-weight: 600;
         letter-spacing: 0.2px;
         font-size: 20px;
+      }
+      .info__group {
+        display: flex;
+        align-items: center;
         margin-top: 3.5rem;
+        gap: 0.8em;
       }
 
       img {
@@ -185,14 +190,41 @@
         color: #73cc8f;
         font-weight: 600;
       }
+      .hidden {
+        display: none;
+      }
 
       @media screen and (max-width: 1280px) {
         .info__text {
           padding-top: 0;
         }
+        .info__text h3 {
+          font-size: 26px;
+        }
+        .info__text p {
+          font-size: 20px;
+        }
+        .info__group {
+          margin-top: 3.5rem;
+          gap: 0.8rem;
+        }
+        .info__link {
+          font-size: 18px;
+        }
+        .info__iframe {
+          width: 60%;
+        }
+        .info__group {
+          display: flex;
+          align-items: start;
+          flex-direction: column;
+        }
+        .install__span {
+          padding-left: 18px;
+        }
       }
 
-      @media screen and (max-width: 900px) {
+      @media screen and (max-width: 1000px) {
         body {
           text-align: center;
         }
@@ -205,7 +237,9 @@
           width: 100%;
         }
         .info__iframe {
-          width: 100%;
+          width: 85%;
+          margin-left: auto;
+          margin-right: auto;
         }
         .info__link {
           margin-left: auto;
@@ -217,8 +251,19 @@
         .info__company {
           justify-content: center;
         }
+        .install__span {
+          padding-left: 0px;
+        }
+        .info__group {
+          align-items: center;
+        }
       }
 
+      @media screen and (max-width: 900px) {
+        .info__iframe {
+          width: 100%;
+        }
+      }
       @media screen and (max-width: 600px) {
         .info {
           padding: 0;
@@ -263,7 +308,6 @@
           line-height: 1.1;
         }
       }
-
       @media (hover: hover) {
         a:hover {
           color: #ae7839;
@@ -313,12 +357,14 @@ <h3>
               source <span class="highlight">tool</span> for visualization of
               <span class="highlight">MongoDB</span> schema design
             </h3>
-
             <p>Community preview</p>
-
-            <a href="./editor.html" class="info__link"
-              >Launch MongoDB Designer</a
-            >
+            <div class="info__group">
+              <a href="./editor.html" class="info__link"
+                >Launch MongoDB Designer</a
+              >
+              <span id="install__span" class="install__span hidden">or</span>
+              <a id="install" class="info__link hidden">Install on Device</a>
+            </div>
           </div>
           <div class="info__iframe">
             <iframe
@@ -339,5 +385,36 @@ <h3>
         </p>
       </div>
     </main>
+    <script>
+      let installPrompt = null;
+      const installButton = document.querySelector('#install');
+      const installSpan = document.querySelector('#install__span');
+
+      window.addEventListener('beforeinstallprompt', event => {
+        event.preventDefault();
+        installPrompt = event;
+        installButton.classList.remove('hidden');
+        installSpan.classList.remove('hidden');
+      });
+
+      function disableInAppInstallPrompt() {
+        installPrompt = null;
+        installButton.classList.add('hidden');
+        installSpan.classList.add('hidden');
+      }
+
+      installButton.addEventListener('click', async () => {
+        if (!installPrompt) {
+          return;
+        }
+        const result = await installPrompt.prompt();
+        disableInAppInstallPrompt();
+      });
+
+      window.addEventListener('appinstalled', () => {
+        window.location.href = '/editor.html';
+        disableInAppInstallPrompt();
+      });
+    </script>
   </body>
 </html>

public/android-chrome-128x128.png

@@ -0,0 +1,39 @@
+{
+  "lang": "en",
+  "dir": "ltr",
+  "name": "Mongo Modeler",
+  "description": "A free, online Data Modeling tool for MongoDB",
+  "start_url": "./editor.html",
+  "display_override": ["minimal-ui", "fullscreen"],
+  "display": "standalone",
+  "icons": [
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    }
+  ],
+  "background_color": "#455a6c",
+  "theme_color": "#455a6c"
+}

public/android-chrome-144x144.png

@@ -94,7 +94,7 @@
   --input-border-color: var(--background-400);
   --edit-table-header: var(--background-900);
   --input-border-color-active: var(--primary-300);
-  --input-radio-border-color: var(--primary-300);
+  --input-radio-border-color: var(--background-400);
 
   /* Modal */
   --background-dialog: var(--background-700);
@@ -173,9 +173,9 @@ body {
   --bg-input: #f3f5f7;
   --bg-input-disabled: #f0f2f5;
   --hover-input: #f3f5f7;
-  --input-border-color: #b5b9bc;
+  --input-border-color: var(--background-200);
   --input-border-color-active: var(--primary-500);
-  --input-radio-border-color: var(--primary-500);
+  --input-radio-border-color: var(--background-200);
 
   /*Edit-table*/
   --edit-table-header: #e0e6eb;
@@ -194,7 +194,7 @@ body {
   --bg-checkbox: #e2e7eb;
 
   /* Not working*/
-  --hover-checkbox: var(--background-200);
+  --hover-checkbox: var(--background-300);
 
   /*About*/
   --color-project: var(--primary-500);

public/android-chrome-72x72.png

@@ -1,13 +1,24 @@
 import { MainScene } from '@/scenes';
-import { useThemeContext } from './core/providers';
+import {
+  CanvasSchemaProvider,
+  CanvasViewSettingsProvider,
+  ModalDialogProvider,
+  useThemeContext,
+} from './core/providers';
 
 function App() {
   const { theme } = useThemeContext();
 
   return (
-    <div className={theme.themeMode}>
-      <MainScene />
-    </div>
+    <CanvasViewSettingsProvider>
+      <CanvasSchemaProvider>
+        <ModalDialogProvider>
+          <div className={theme.themeMode}>
+            <MainScene />
+          </div>
+        </ModalDialogProvider>
+      </CanvasSchemaProvider>
+    </CanvasViewSettingsProvider>
   );
 }
 

public/manifest.json

@@ -6,10 +6,11 @@ interface Props {
   onChange: () => void;
   disabled?: boolean;
   ariaLabelledby?: string;
+  ariaLabel?: string;
 }
 
 export const Checkbox: React.FC<Props> = props => {
-  const { id, onChange, disabled, checked, ariaLabelledby } = props;
+  const { id, onChange, disabled, checked, ariaLabelledby, ariaLabel } = props;
 
   return (
     <div className={`${classes.checkbox} ${disabled && classes.disabled}`}>
@@ -20,8 +21,9 @@ export const Checkbox: React.FC<Props> = props => {
         onChange={onChange}
         disabled={disabled}
         aria-labelledby={ariaLabelledby}
+        aria-label={ariaLabel}
       />
-      <div>
+      <div aria-hidden="true">
         <svg viewBox="0,0,50,50">
           <path d="M5 30 L 20 45 L 45 8"></path>
         </svg>

public/site.webmanifest

@@ -10,6 +10,8 @@ interface Props {
   optionsListVisible: boolean;
   handleOptionClick: (option: DropdownOptionVm) => void;
   selectedOption?: string;
+  modalRef: React.RefObject<HTMLUListElement>;
+  label?: string;
 }
 
 export const OptionGroup: React.FC<Props> = props => {
@@ -19,12 +21,19 @@ export const OptionGroup: React.FC<Props> = props => {
     optionsListVisible,
     handleOptionClick,
     selectedOption,
+    modalRef,
+    label,
   } = props;
 
   return (
     <ul
       className={classes.options}
       style={{ display: optionsListVisible ? 'block' : 'none' }}
+      ref={modalRef}
+      onClick={e => e.stopPropagation()}
+      id={`${name}-select`}
+      role="listbox"
+      aria-label={label}
     >
       <Option
         name={name}
@@ -44,22 +53,20 @@ interface OptionProps {
 }
 
 const Option: React.FC<OptionProps> = props => {
-  const { options, selectedOption, name, handleOptionClick } = props;
+  const { options, selectedOption, handleOptionClick, name } = props;
 
   return options.map(option => (
-    <li key={option.id}>
+    <li
+      key={option.id}
+      role="option"
+      onClick={() => handleOptionClick(option)}
+      aria-selected={selectedOption === option.id}
+      id={`${name}-option-${option.id}`}
+    >
+      {option.label}
       <div className={classes.svg}>
         {selectedOption === option.id ? <Tick /> : ''}
       </div>
-      <label>
-        <input
-          type="radio"
-          name={name}
-          value={option.id}
-          onChange={() => handleOptionClick(option)}
-        />
-        {option.label}
-      </label>
     </li>
   ));
 };