We use cookies to ensure you get the best experience on our website
Inicio Explorar Axuda
Rexistro Iniciar sesión
0ct0pu5
/
ente
1
0
Fork 0
Ficheiros Incidencias 0 Pull Requests 0 Wiki
Explorar o código

Fix UX issues.

Pushkar Anand %!s(int64=4) %!d(string=hai) anos
pai
92f37ede48
achega
d13448a18c
Modificáronse 3 ficheiros con 43 adicións e 3 borrados
Unificar vista Mostrar estatísticas de Diff
  1. 21 0
      src/components/power_settings.tsx
  2. 22 2
      src/pages/_app.tsx
  3. 0 1
      src/pages/_document.tsx

+ 21 - 0
src/components/power_settings.tsx
Ver ficheiro 

@@ -0,0 +1,21 @@
 
+import React from 'react';
 
+
 
+export default function PowerSettings(props) {
 
+    return (
 
+        <svg
 
+            xmlns="http://www.w3.org/2000/svg"
 
+            height={props.height}
 
+            viewBox={props.viewBox}
 
+            width={props.width}
 
+        >
 
+            <path d="M0 0h24v24H0z" fill="none"/>
 
+            <path d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z"/>
 
+        </svg>
 
+    );
 
+}
 
+
 
+PowerSettings.defaultProps = {
 
+    height: 24,
 
+    width: 24,
 
+    viewBox: '0 0 24 24',
 
+}

+ 22 - 2
src/pages/_app.tsx
Ver ficheiro 

@@ -4,9 +4,12 @@ import Navbar from 'components/Navbar';
 
 import constants from 'utils/strings/constants';
 
 import constants from 'utils/strings/constants';
 
 import 'bootstrap/dist/css/bootstrap.min.css';
 
 import 'bootstrap/dist/css/bootstrap.min.css';
 
 import Button from 'react-bootstrap/Button';
 
 import Button from 'react-bootstrap/Button';
 
+import Spinner from 'react-bootstrap/Spinner';
 
 import { clearKeys } from 'utils/storage/sessionStorage';
 
 import { clearKeys } from 'utils/storage/sessionStorage';
 
 import { clearData, getData, LS_KEYS } from 'utils/storage/localStorage';
 
 import { clearData, getData, LS_KEYS } from 'utils/storage/localStorage';
 
 import { useRouter } from 'next/router';
 
 import { useRouter } from 'next/router';
 
+import Container from 'components/Container';
 
+import PowerSettings from 'components/power_settings';
 
 
 
 const GlobalStyles = createGlobalStyle`
 
 const GlobalStyles = createGlobalStyle`
 
     html, body {
 
     html, body {
 
@@ -34,6 +37,10 @@ const GlobalStyles = createGlobalStyle`
 
     :root {
 
     :root {
 
         --primary: #e26f99,
 
         --primary: #e26f99,
 
     };
 
     };
 
+
 
+    svg {
 
+        fill: currentColor;
 
+    }
 
 `;
 
 `;
 
 
 
 const Image = styled.img`
 
 const Image = styled.img`
 
@@ -48,6 +55,7 @@ const FlexContainer = styled.div`
 
 export default function App({ Component, pageProps }) {
 
 export default function App({ Component, pageProps }) {
 
     const router = useRouter();
 
     const router = useRouter();
 
     const [user, setUser] = useState();
 
     const [user, setUser] = useState();
 
+    const [loading, setLoading] = useState(false);
 
 
 
     useEffect(() => {
 
     useEffect(() => {
 
         const user = getData(LS_KEYS.USER);
 
         const user = getData(LS_KEYS.USER);
 
@@ -55,9 +63,14 @@ export default function App({ Component, pageProps }) {
 
         console.log(`%c${constants.CONSOLE_WARNING_STOP}`, 'color: red; font-size: 52px;');
 
         console.log(`%c${constants.CONSOLE_WARNING_STOP}`, 'color: red; font-size: 52px;');
 
         console.log(`%c${constants.CONSOLE_WARNING_DESC}`, 'font-size: 20px;');
 
         console.log(`%c${constants.CONSOLE_WARNING_DESC}`, 'font-size: 20px;');
 
 
 
+        router.events.on('routeChangeStart', () => {
 
+            setLoading(true);
 
+        });
 
+
 
         router.events.on('routeChangeComplete', () => {
 
         router.events.on('routeChangeComplete', () => {
 
             const user = getData(LS_KEYS.USER);
 
             const user = getData(LS_KEYS.USER);
 
             setUser(user);
 
             setUser(user);
 
+            setLoading(false);
 
         });
 
         });
 
     }, []);
 
     }, []);
 
 
 
@@ -76,10 +89,17 @@ export default function App({ Component, pageProps }) {
 
                     {constants.COMPANY_NAME}
 
                     {constants.COMPANY_NAME}
 
                 </FlexContainer>
 
                 </FlexContainer>
 
                 {user && <Button variant='link' onClick={logout}>
 
                 {user && <Button variant='link' onClick={logout}>
 
-                    <span className="material-icons">power_settings_new</span>
 
+                    <PowerSettings />
 
                 </Button>}
 
                 </Button>}
 
             </Navbar>
 
             </Navbar>
 
-            <Component />
 
+            {loading
 
+                ? <Container>
 
+                    <Spinner animation="border" role="status" variant="primary">
 
+                        <span className="sr-only">Loading...</span>
 
+                    </Spinner>
 
+                </Container>
 
+                : <Component />
 
+            }
 
         </>
 
         </>
 
     );
 
     );
 
 }
 
 }

+ 0 - 1
src/pages/_document.tsx
Ver ficheiro 

@@ -35,7 +35,6 @@ export default class MyDocument extends Document {
 
             <Html>
 
             <Html>
 
                 <Head>
 
                 <Head>
 
                     <title>ente.io | Privacy friendly alternative to Google Photos</title>
 
                     <title>ente.io | Privacy friendly alternative to Google Photos</title>
 
-                    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
 
                     <link rel="icon" href="/icon.png" type="image/png"/>
 
                     <link rel="icon" href="/icon.png" type="image/png"/>
 
                 </Head>
 
                 </Head>
 
                 <body>
 
                 <body>

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5