Solara

Solara-Kit · Sep 15, 2024 · 07f6118 · 07f6118
1 parent f04817b
commit 07f6118
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 18 deletions.
diff --git a/solara/lib/core/dashboard/brand/BrandDetail.js b/solara/lib/core/dashboard/brand/BrandDetail.js
@@ -3,6 +3,10 @@ import BrandDetailModel from './BrandDetailModel.js';
 import BrandDetailView from './BrandDetailView.js';
 import BrandDetailController from './BrandDetailController.js';
 
+window.onload = function () {
+    document.getElementById('loadingOverlay').style.display = 'none';
+};
+
 document.addEventListener('DOMContentLoaded', async () => {
     const model = new BrandDetailModel();
     const view = new BrandDetailView(model);

diff --git a/solara/lib/core/dashboard/brand/BrandDetailController.js b/solara/lib/core/dashboard/brand/BrandDetailController.js
@@ -112,6 +112,7 @@ class BrandDetailController {
 
     async onLoadSections(configuraationsResult) {
         try {
+            this.view.header.style.display = 'flex';
             this.view.updateAppNameTitle(`${configuraationsResult.brand.key} (${configuraationsResult.brand.name})`);
             await this.showSections(configuraationsResult);
             this.view.showIndex();

diff --git a/solara/lib/core/dashboard/brand/BrandDetailView.js b/solara/lib/core/dashboard/brand/BrandDetailView.js
@@ -7,7 +7,11 @@ import '../component/MessageBottomSheet.js';
 class BrandDetailView {
     constructor(model) {
         this.model = model;
+
+        this.header = document.getElementById('header');
+
         this.brandDetailsContainer = document.getElementById('brand-details-container');
+        this.addBrandOverlay = document.getElementById('add-brand-overlay');
         this.addBrandContainer = document.getElementById('add-brand-container');
 
         this.sectionsContainer = document.getElementById('sections');
@@ -38,11 +42,15 @@ class BrandDetailView {
     }
 
     async setupLocal() {
+        this.addBrandOverlay.style.display = 'none'
+        this.header.style.display = 'flex'
         this.allBrandsButton.style.display = 'block'
         this.toggleAddBrandContainer(false);
     }
 
     async setupRemote() {
+        this.addBrandOverlay.style.display = 'flex'
+        this.header.style.display = 'none'
         this.allBrandsButton.style.display = 'none'
         this.toggleAddBrandContainer(true);
     }

diff --git a/solara/lib/core/dashboard/brand/brand.html b/solara/lib/core/dashboard/brand/brand.html
@@ -267,6 +267,12 @@
             }
 
             .header-container {
+                display: none;
+                align-items: center;
+                justify-content: center;
+            }
+
+            .header-content {
                 display: flex;
                 align-items: center;
                 justify-content: center;
@@ -294,35 +300,21 @@
             .scroll-down header {
                 transform: translateY(-100%);
             }
-            .logo {
-                width: 50px;
-                height: 50px;
-                margin-right: 20px;
-                filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.3));
-                transition: transform 0.3s ease;
-            }
-            .logo:hover {
-                transform: scale(1.1);
-            }
+
             h1 {
                 margin: 0;
                 font-size: 2.5em;
             }
 
             .action-buttons {
-                flex-direction: column;
-                gap: 20px;
+
             }
 
             .action-buttons button {
                 min-width: 250px;
                 background-color: var(--primary-color);
                 color: white;
-                padding: 12px 10px;
                 margin: 10px;
-                border: none;
-                border-radius: 4px;
-                cursor: pointer;
                 font-size: 18px;
                 transition: background-color 0.3s ease, opacity 0.3s ease;
             }
@@ -378,7 +370,20 @@
                 align-items: center;
             }
 
+            .add-brand-overlay {
+                display: none;
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                color: white;
+                background-color: black;
+                z-index: 998;
+            }
+
             .add-brand-container {
+                display: none;
                 position: fixed;
                 top: 50%;
                 left: 50%;
@@ -392,6 +397,7 @@
                 animation: fadeIn 0.5s ease-out;
             }
 
+
             @keyframes fadeIn {
                 from {
                     opacity: 0;
@@ -474,18 +480,43 @@
             #add-brand-container {
                 display: none;
             }
+
+            .loading-overlay {
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background-color: black;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                z-index: 9999;
+            }
+
+            .loading-overlay-logo {
+                width: 150px;
+                height: 150px;
+                margin-right: 20px;
+                filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.3));
+                transition: transform 0.3s ease;
+            }
         </style>
     </head>
     <body>
 
-        <header>
-            <div class="header-container">
+        <header id="header"  class="header-container">
+            <div  class="header-content">
                 <img class="logo" src="../solara.png" alt="Splash Image">
                 <h1><span id="brandNametitle"></span></h1>
             </div>
 
         </header>
 
+        <div class="loading-overlay" id="loadingOverlay">
+            <img class="loading-overlay-logo" src="../solara.png" alt="Loading Logo">
+        </div>
+
         <div class="container">
             <div class="row">
 
@@ -511,6 +542,8 @@ <h1><span id="brandNametitle"></span></h1>
                         </div>
                     </div>
 
+                    <div class="add-brand-overlay" id="add-brand-overlay"></div>
+
                     <div id="add-brand-container" class="add-brand-container">
                         <img src="../solara.png" alt="Solara Logo">
                         <h2>Solara simplifies the management of your brand configurations, allowing you to access and update them anytime, anywhere.</h2>
@@ -521,6 +554,7 @@ <h2>Solara simplifies the management of your brand configurations, allowing you
                         <div class="button-message" style="  animation-delay: 1.1s;">You also have the option to create new brand configurations.</div>
                         <button id="newBrandBtn" style="  animation-delay: 1.3s;">New Brand</button>
                     </div>
+
                 </div>