refactor of app component

silicia-apps · Nov 8, 2023 · 2732348 · 2732348
1 parent ff46b17
commit 2732348
Show file tree

Hide file tree

Showing 27 changed files with 5,582 additions and 5,131 deletions.
diff --git a/apps/demo/src/app/app.component.html b/apps/demo/src/app/app.component.html
@@ -1,2 +1,11 @@
-<sio-app leftPanelType="reveal">
+<sio-app
+  title="Demo"
+  leftPanelType="toogle"
+  tabMenuID="main"
+  leftPanelMenuID="main"
+  rightPanelType="overlay"
+  tabDesktopPosition="left"
+  tabMobilePosition="bottom"
+  color="primary"
+>
 </sio-app>
diff --git a/apps/demo/src/app/app.component.scss b/apps/demo/src/app/app.component.scss
@@ -2,4 +2,7 @@ sio-app {
   --sio-left-menu-content-color: #ffffff;
   --sio-left-menu-footer-color: #ffffff;
   --sio-left-menu-header-color: #ffffff;
-}
+  --sio-right-menu-content-color: #ffffff;
+  --sio-right-menu-footer-color: #ffffff;
+  --sio-right-menu-header-color: #ffffff;
+}
diff --git a/apps/demo/src/app/app.routes.ts b/apps/demo/src/app/app.routes.ts
@@ -5,6 +5,10 @@ export const routes: Routes = [
     path: 'home',
     loadComponent: () => import('./home/home.page').then((m) => m.HomePageComponent),
   },
+  {
+    path: 'info',
+    loadComponent: () => import('./info/info.page').then((m) => m.InfoPageComponent),
+  },
   {
     path: '',
     redirectTo: 'home',

diff --git a/apps/demo/src/app/home/home.page.html b/apps/demo/src/app/home/home.page.html
@@ -1,2 +1,2 @@
-<sio-page>    
+<sio-page title="Home">    
 </sio-page>   
diff --git a/apps/demo/src/app/home/home.page.scss b/apps/demo/src/app/home/home.page.scss
@@ -1,27 +0,0 @@
-#container {
-  text-align: center;
-
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-#container strong {
-  font-size: 20px;
-  line-height: 26px;
-}
-
-#container p {
-  font-size: 16px;
-  line-height: 22px;
-
-  color: #8c8c8c;
-
-  margin: 0;
-}
-
-#container a {
-  text-decoration: none;
-}

diff --git a/apps/demo/src/app/info/info.page.html b/apps/demo/src/app/info/info.page.html
@@ -0,0 +1 @@
+<sio-page title="info"></sio-page>
diff --git a/apps/demo/src/app/info/info.page.scss b/apps/demo/src/app/info/info.page.scss
diff --git a/apps/demo/src/app/info/info.page.ts b/apps/demo/src/app/info/info.page.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { SioCommonModule } from '@silicia/core';
+
+@Component({
+  selector: 'sio-info',
+  templateUrl: 'info.page.html',
+  styleUrls: ['info.page.scss'],
+  standalone: true,
+  imports: [SioCommonModule],
+})
+export class InfoPageComponent {
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  constructor() {}
+}
diff --git a/apps/demo/src/environments/environment.ts b/apps/demo/src/environments/environment.ts
@@ -29,17 +29,20 @@ export const environment: SioCoreEnvironmentInterface = {
       default: 'it',
       fallback: 'en',
     },
-    layout: {
-      left_panel: {
-        menu: 'main'
-      }
-    },
     menu: {
       main: {
         id: 'main',
         items: {
           1: { id: 1, icon: 'home', url: 'home', badge: 3 },
-          2: { id: 2, icon: 'information-circle', url: 'about' },
+          2: { id: 2, icon: 'information-circle', url: 'info' },
+          3: { id: 3, icon: 'settings', url: 'settings' },
+        },
+      },
+      secondary: {
+        id: 'secondary',
+        items: {
+          1: { id: 1, icon: 'stats', url: 'stats', badge: 3 },
+          2: { id: 2, icon: 'information-circle', url: 'info' },
           3: { id: 3, icon: 'settings', url: 'settings' },
         },
       },

diff --git a/libs/core/src/lib/components/app/app.component.html b/libs/core/src/lib/components/app/app.component.html
@@ -1,13 +1,29 @@
 <ion-app>
   <div
-    *ngIf="(this.sioCoreAppComponentState.leftPanelType === 'none' &&  this.sioCoreAppComponentState.rightPanelType === 'none') || this.sioCoreAppComponentState.full; then blank; else split">
-  </div>
+    *ngIf="
+      (this.sioCoreAppComponentState.leftPanelType === 'none' &&
+        this.sioCoreAppComponentState.rightPanelType === 'none') ||
+        this.sioCoreAppComponentState.full;
+      then blank;
+      else split
+    "
+  ></div>
   <ng-template #split>
-    <ion-split-pane side="start" when="lg" contentId="main-content"
-      (ionSplitPaneVisible)="sioAppSplitPanelVisible($event)">
-      <ion-menu contentId="main-content"
-        [type]="!(this.sioCoreAppComponentState.leftPanelType === 'none' ||  this.sioCoreAppComponentState.leftPanelType === 'toogle')?this.sioCoreAppComponentState.leftPanelType: 'reveal'"
-        [swipeGesture]="(this.sioCoreAppComponentState.leftPanelType !== 'toogle')">
+    <ion-split-pane
+      when="lg"
+      contentId="main-content"
+      (ionSplitPaneVisible)="sioAppSplitPanelVisible($event)"
+      [disabled]="this.sioCoreAppComponentState.leftPanelType === 'none'"
+    >
+      <ion-menu
+        *ngIf="this.sioCoreAppComponentState.leftPanelType !== 'none'"
+        contentId="main-content"
+        side="start"
+        [type]="this.sioCoreAppComponentState.leftPanelType"
+        [swipeGesture]="
+          this.sioCoreAppComponentState.leftPanelType !== 'toogle'
+        "
+      >
         <ion-header class="ion-no-border">
           <ion-toolbar [color]="this.color">
             <div #left_header>
@@ -16,17 +32,27 @@
             <ng-container *ngIf="!left_header.hasChildNodes()">
               <ion-title>{{
                 (this.sioCoreAppComponentState.state$ | async)?.title
-                }}</ion-title>
+              }}</ion-title>
             </ng-container>
           </ion-toolbar>
         </ion-header>
         <ion-content>
-          <sio-menu *ngIf="this.sioCoreAppComponentState.tabMenuID && this.sioCoreAppComponentState.split" id="tab"></sio-menu>
+          <sio-menu
+            *ngIf="
+              this.sioCoreAppComponentState.tabMenuID &&
+              this.sioCoreAppComponentState.tabDesktopPosition === 'left' &&
+              this.sioCoreAppComponentState.split
+            "
+            id="tab"
+          ></sio-menu>
           <div #left_content>
             <ng-content select="[slot='left_content']"></ng-content>
           </div>
           <ng-container *ngIf="!left_content.hasChildNodes()">
-            <sio-menu *ngIf="this.sioCoreAppComponentState.leftMenuID" [id]="'leftmenu_' + this.sioCoreAppComponentState.leftMenuID"></sio-menu>
+            <sio-menu
+              *ngIf="this.sioCoreAppComponentState.leftMenuID"
+              [menuID]="this.sioCoreAppComponentState.leftMenuID"
+            ></sio-menu>
           </ng-container>
         </ion-content>
         <ion-footer class="ion-no-border">
@@ -35,46 +61,79 @@
           </div>
           <ng-container *ngIf="!side_footer.hasChildNodes()">
             <ion-toolbar class="ion-no-border" [color]="this.color">
-              <ion-item lines="none" [color]="this.color"><ion-label>powered by Sio</ion-label></ion-item>
+              <ion-item lines="none" [color]="this.color"
+                ><ion-label>powered by Sio</ion-label></ion-item
+              >
               <ion-buttons slot="end">
-                <ion-button href="https://github.com/silicia-apps/sio" target="_blank" shape="round" fill="clear">
+                <ion-button
+                  href="https://github.com/silicia-apps/sio"
+                  target="_blank"
+                  shape="round"
+                  fill="clear"
+                >
                   <ion-icon slot="start" name="logo-github"></ion-icon>
                 </ion-button>
               </ion-buttons>
             </ion-toolbar>
           </ng-container>
         </ion-footer>
-      </ion-menu> <ion-menu *ngIf="false" side="end" contentId="right-content"
-        [type]="!(this.sioCoreAppComponentState.rightPanelType === 'none' ||  this.sioCoreAppComponentState.rightPanelType === 'toogle')?this.sioCoreAppComponentState.rightPanelType:'reveal'"
-        [swipeGesture]="(this.sioCoreAppComponentState.rightPanelType !== 'toogle')">
+      </ion-menu>
+      <ion-menu
+        *ngIf="this.sioCoreAppComponentState.rightPanelType !== 'none'"
+        contentId="main-content"
+        side="end"
+        [type]="this.sioCoreAppComponentState.rightPanelType"
+        [swipeGesture]="
+          this.sioCoreAppComponentState.rightPanelType !== 'toogle'
+        "
+      >
         <ion-header class="ion-no-border">
-          <ion-toolbar>
+          <ion-toolbar [color]="this.color">
             <div #right_header>
               <ng-content select="[slot='right_header']"></ng-content>
             </div>
             <ng-container *ngIf="!right_header.hasChildNodes()">
               <ion-title>{{
                 (this.sioCoreAppComponentState.state$ | async)?.title
-                }}</ion-title>
+              }}</ion-title>
             </ng-container>
           </ion-toolbar>
         </ion-header>
         <ion-content>
+          <sio-menu
+            *ngIf="
+              this.sioCoreAppComponentState.tabMenuID &&
+              this.sioCoreAppComponentState.tabDesktopPosition === 'right' &&
+              this.sioCoreAppComponentState.split
+            "
+            id="tab"
+          ></sio-menu>
           <div #right_content>
             <ng-content select="[slot='right_content']"></ng-content>
           </div>
           <ng-container *ngIf="!right_content.hasChildNodes()">
+            <sio-menu
+              *ngIf="this.sioCoreAppComponentState.rightMenuID"
+              [menuID]="this.sioCoreAppComponentState.rightMenuID"
+            ></sio-menu>
           </ng-container>
         </ion-content>
         <ion-footer class="ion-no-border">
           <div #right_footer>
             <ng-content select="[slot='right_footer']"></ng-content>
           </div>
           <ng-container *ngIf="!right_footer.hasChildNodes()">
-            <ion-toolbar>
-              <ion-item lines="none"><ion-label>Writed with love</ion-label></ion-item>
+            <ion-toolbar class="ion-no-border" [color]="this.color">
+              <ion-item lines="none" [color]="this.color"
+                ><ion-label>Writed with love</ion-label></ion-item
+              >
               <ion-buttons slot="end">
-                <ion-button href="https://github.com/silicia-apps/sio" target="_blank" shape="round" fill="clear">
+                <ion-button
+                  href="https://github.com/silicia-apps/sio"
+                  target="_blank"
+                  shape="round"
+                  fill="clear"
+                >
                   <ion-icon slot="start" name="home"></ion-icon>
                 </ion-button>
               </ion-buttons>
@@ -84,15 +143,26 @@
       </ion-menu>
       <ion-router-outlet id="main-content">
         <ng-content></ng-content>
-        <sio-menu *ngIf="this.sioCoreAppComponentState.tabMenuID" id="tab"></sio-menu>
+        <sio-tab
+          *ngIf="this.sioCoreAppComponentState.tabMenuID"
+          [tabID]="this.sioCoreAppComponentState.tabMenuID"
+          [position]="this.sioCoreAppComponentState.split ? this.sioCoreAppComponentState.tabDesktopPosition : this.sioCoreAppComponentState.tabMobilePosition"
+          [color] = "this.color"
+        ></sio-tab>
       </ion-router-outlet>
     </ion-split-pane>
   </ng-template>
   <ng-template #blank>
     <ion-router-outlet id="main-content">
-      <sio-menu *ngIf="this.sioCoreAppComponentState.tabMenuID && this.sioCoreAppComponentState.full" id="tab"
-        position="bottom"></sio-menu>
+      <sio-menu
+        *ngIf="
+          this.sioCoreAppComponentState.tabMenuID &&
+          this.sioCoreAppComponentState.full
+        "
+        menuID="tab"
+        position="bottom"
+      ></sio-menu>
       <ng-content></ng-content>
     </ion-router-outlet>
   </ng-template>
-</ion-app>
+</ion-app>
diff --git a/libs/core/src/lib/components/app/app.component.scss b/libs/core/src/lib/components/app/app.component.scss
@@ -1,19 +1,19 @@
-:host[color="primary"] {
-    --sio-toolbar-color: var(--ion-color-primary);
-    --sio-left-menu-header-color: var(--ion-color-primary);
-    --sio-left-menu-content-color: var(--ion-color-primary);
-    --sio-left-menu-footer-color: var(--ion-color-primary);
-    --sio-right-menu-header-color: var(--ion-color-primary);
-    --sio-right-menu-content-color: var(--ion-color-primary);
-    --sio-right-menu-footer-color: var(--ion-color-primary);
+:host[color='primary'] {
+  --sio-toolbar-color: var(--ion-color-primary);
+  --sio-left-menu-header-color: var(--ion-color-primary);
+  --sio-left-menu-content-color: var(--ion-color-primary);
+  --sio-left-menu-footer-color: var(--ion-color-primary);
+  --sio-right-menu-header-color: var(--ion-color-primary);
+  --sio-right-menu-content-color: var(--ion-color-primary);
+  --sio-right-menu-footer-color: var(--ion-color-primary);
 }
 
-:host[color="danger"] {
-    --sio-toolbar-color: var(--ion-color-danger);
-    --sio-left-menu-header-color: var(--ion-color-danger);
-    --sio-left-menu-footer-color: var(--ion-color-danger);
-    --sio-right-menu-header-color: var(--ion-color-danger);
-    --sio-right-menu-footer-color: var(--ion-color-danger);
+:host[color='danger'] {
+  --sio-toolbar-color: var(--ion-color-danger);
+  --sio-left-menu-header-color: var(--ion-color-danger);
+  --sio-left-menu-footer-color: var(--ion-color-danger);
+  --sio-right-menu-header-color: var(--ion-color-danger);
+  --sio-right-menu-footer-color: var(--ion-color-danger);
 }
 
 :host {
@@ -48,6 +48,7 @@
     ion-menu[side='end'] {
       --background: var(--sio-right-menu-content-color);
       ion-header {
+        --background: var(--sio-right-menu-header-color);
         ion-toolbar {
           --background: var(--sio-right-menu-header-color);
         }
@@ -56,6 +57,7 @@
         --background: var(--sio-right-menu-content-color);
       }
       ion-footer {
+        --background: var(--sio-right-menu-footer-color);
         ion-toolbar {
           --background: var(--sio-right-menu-footer-color);
           ion-item {