Improved layout

.gitignore

@@ -6,6 +6,7 @@ yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
 .pnpm-debug.log*
+.DS_Store
 
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

apps/spa/src/SelectUser.tsx

@@ -3,17 +3,18 @@ import { loginUser, getUsers } from './auth';
 
 export const SelectUser = () => {
   return (
-    <>
-      <h1>Select User</h1>
-      <ul>
+    <div className="app-center">
+      <ul className="select-user">
         {getUsers().map((user) => (
           <li key={user.id}>
-            <button onClick={() => loginUser(user.id)}>
-              {user.name} ({user.role})
+            <button onClick={() => loginUser(user.id)} className="select-user-button">
+              <img className="select-user-icon" src={user.icon} alt="user icon" />
+              <span className="select-user-name">{user.name}</span>
+              <span className="select-user-role">{user.role}</span>
             </button>
           </li>
         ))}
       </ul>
-    </>
+    </div>
   );
 };

apps/spa/src/auth.ts

@@ -1,13 +1,18 @@
+import bernd from './images/man1.png';
+import stefanie from './images/woman1.png';
+
 const users = [
   {
     id: 'bernd',
     name: 'Bernd Müller',
     role: 'Standard',
+    icon: bernd,
   },
   {
     id: 'stefanie',
     name: 'Stefanie Holzer',
     role: 'Administrator',
+    icon: stefanie,
   },
 ];
 

apps/spa/src/index.html

@@ -4,7 +4,7 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
-<title>My Piral Instance</title>
+<title>DWX 24 Demos</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
 <link rel="stylesheet" href="./style.scss">
 </head>

apps/spa/src/layout.tsx

@@ -1,6 +1,14 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-import { ComponentsState, ErrorComponentsState, Menu, Notifications, SwitchErrorInfo, MenuItemProps } from 'piral';
+import {
+  ComponentsState,
+  ErrorComponentsState,
+  Menu,
+  Notifications,
+  SwitchErrorInfo,
+  MenuItemProps,
+  ExtensionSlot,
+} from 'piral';
 import { getCurrentUser, logoutCurrentUser } from './auth';
 import { UpdateDialog } from 'piral-update';
 
@@ -11,12 +19,22 @@ function logout(e: React.SyntheticEvent) {
   logoutCurrentUser();
 }
 
+const showSimpleLogout = () => {
+  return (
+    <a className="nav-link text-dark" href="#" onClick={logout}>
+      Logout
+    </a>
+  );
+};
+
 const defaultMenuItems = (
   <>
     <MenuItem type="general" meta={{}}>
-      <a className="nav-link text-dark" href="#" onClick={logout}>
-        Logout
-      </a>
+      <ExtensionSlot
+        name="user-profile-menu"
+        empty={showSimpleLogout}
+        params={{ user: getCurrentUser(), logout: logoutCurrentUser }}
+      />
     </MenuItem>
   </>
 );
@@ -39,13 +57,21 @@ export const layout: Partial<ComponentsState> = {
       <SwitchErrorInfo {...props} />
     </div>
   ),
+  LoadingIndicator: () => (
+    <div className="app-center">
+      <div className="lds-ellipsis">
+        <div />
+        <div />
+        <div />
+        <div />
+      </div>
+    </div>
+  ),
   DashboardContainer: ({ children }) => (
     <div>
       <h1>Hello, {getCurrentUser().name}!</h1>
       <p>Welcome to the DWX 24 demo web app.</p>
-      <div className="tiles">
-        {children}
-      </div>
+      <div className="tiles">{children}</div>
     </div>
   ),
   UpdateDialog: ({ onApprove, onReject }) => (
@@ -59,12 +85,20 @@ export const layout: Partial<ComponentsState> = {
   ),
   DashboardTile: ({ columns, rows, children }) => <div className={`tile cols-${columns} rows-${rows}`}>{children}</div>,
   Layout: ({ children }) => (
-    <div>
+    <>
       <Notifications />
       <Menu type="general" />
       <UpdateDialog />
-      <div className="container">{children}</div>
-    </div>
+      <div className="container app-content">{children}</div>
+      <footer>
+        <div className="container">
+          &copy; Florian Rappl, 2004.{' '}
+          <a href="https://www.flaticon.com/free-icons/person" title="person icons" target="_blank">
+            Person icons created by Freepik - Flaticon
+          </a>
+        </div>
+      </footer>
+    </>
   ),
   MenuContainer: ({ children }) => {
     const [collapsed, setCollapsed] = React.useState(true);
@@ -73,7 +107,7 @@ export const layout: Partial<ComponentsState> = {
         <nav className="navbar navbar-light navbar-expand-sm navbar-toggleable-sm ng-white border-bottom box-shadow mb-3">
           <div className="container">
             <Link className="navbar-brand" to="/">
-              DWX 24 Demo
+              DWX 24 Demos
             </Link>
             <button
               aria-label="Toggle navigation"

apps/spa/src/modules.d.ts

@@ -0,0 +1 @@
+declare module '*.png';

apps/spa/src/style.scss

@@ -20,6 +20,61 @@ a.navbar-brand {
   word-break: break-all;
 }
 
+.app-center {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.select-user {
+  display: flex;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 1rem;
+
+  > li {
+    flex: 200px;
+    display: flex;
+  }
+}
+
+.select-user-button {
+  border: 1px solid #ccc;
+  background: #dedede;
+  display: flex;
+  padding: 1rem;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.select-user-icon {
+  height: 64px;
+  width: 64px;
+}
+
+.select-user-name {
+  font-weight: bold;
+}
+
+.select-user-role {
+  font-size: 0.8rem;
+}
+
+.app-content {
+  flex: 1;
+}
+
+footer {
+  padding: 1rem 0;
+}
+
 .box-shadow {
   box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
 }
@@ -29,6 +84,16 @@ a.navbar-brand {
   font-weight: bold;
 }
 
+html, body, #app {
+  height: 100%;
+  width: 100%;
+}
+
+#app {
+  display: flex;
+  flex-direction: column;
+}
+
 $tile-height: 70px;
 $tile-width: 70px;
 $tile-gap: 10px;
@@ -148,3 +213,67 @@ $tile-gap: 10px;
     background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.642 15.642" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 15.642 15.642"><path fill-rule="evenodd" d="M8.882,7.821l6.541-6.541c0.293-0.293,0.293-0.768,0-1.061  c-0.293-0.293-0.768-0.293-1.061,0L7.821,6.76L1.28,0.22c-0.293-0.293-0.768-0.293-1.061,0c-0.293,0.293-0.293,0.768,0,1.061  l6.541,6.541L0.22,14.362c-0.293,0.293-0.293,0.768,0,1.061c0.147,0.146,0.338,0.22,0.53,0.22s0.384-0.073,0.53-0.22l6.541-6.541  l6.541,6.541c0.147,0.146,0.338,0.22,0.53,0.22c0.192,0,0.384-0.073,0.53-0.22c0.293-0.293,0.293-0.768,0-1.061L8.882,7.821z"></path></svg>') no-repeat center center;
   }
 }
+
+
+.lds-ellipsis,
+.lds-ellipsis div {
+  box-sizing: border-box;
+}
+.lds-ellipsis {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-ellipsis div {
+  position: absolute;
+  top: 33.33333px;
+  width: 13.33333px;
+  height: 13.33333px;
+  border-radius: 50%;
+  background: currentColor;
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.lds-ellipsis div:nth-child(1) {
+  left: 8px;
+  animation: lds-ellipsis1 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(2) {
+  left: 8px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(3) {
+  left: 32px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(4) {
+  left: 56px;
+  animation: lds-ellipsis3 0.6s infinite;
+}
+
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+
+@keyframes lds-ellipsis2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(24px, 0);
+  }
+}