From 385caa139a9ded6e3ada49706ed51d99ebc16990 Mon Sep 17 00:00:00 2001 From: Shaban Kamel Date: Tue, 10 Sep 2024 00:41:04 +0300 Subject: [PATCH] Solara --- .../core/dashboard/brand/BrandController.js | 86 +++++++++++-------- solara/lib/core/dashboard/brand/brand.html | 12 +-- solara/lib/core/dashboard/brands/brands.html | 10 --- .../core/dashboard/component/AddFieldSheet.js | 7 +- .../dashboard/component/ConfirmationDialog.js | 2 +- .../dashboard/component/MessageBottomSheet.js | 4 +- 6 files changed, 57 insertions(+), 64 deletions(-) diff --git a/solara/lib/core/dashboard/brand/BrandController.js b/solara/lib/core/dashboard/brand/BrandController.js index 1525913..3a7050f 100644 --- a/solara/lib/core/dashboard/brand/BrandController.js +++ b/solara/lib/core/dashboard/brand/BrandController.js @@ -24,51 +24,63 @@ class BrandController { async initRemote() { this.view.uploadJsonBtn.addEventListener('click', async () => { - try { - const [fileHandle] = await window.showOpenFilePicker({ - types: [{ - description: 'JSON File', - accept: { - 'application/json': ['.json'], - }, - }], - }); - - const file = await fileHandle.getFile(); - - const json = await this.model.getBrandConfigurationsJsonFromDirectory(file); - - if (!json) { - alert("The selected JSON file is not a valid configuration for Solara brands."); - return - } - await this.addBrand(json.brand.key, json.brand.name, json.configurations) - } catch (error) { - console.error('Error:', error); - } + await this.uploadJson() }); this.view.uploadBrandBtn.addEventListener('click', async () => { - try { - const dirHandle = await window.showDirectoryPicker(); - const configurations = await this.model.createBrandConfigurationsFromDirectory(dirHandle); - - this.view.showOnboardBrandForm((key, name) => { - this.addBrand(key, name, configurations) - }) - } catch (error) { - console.error('Error:', error); - } + await this.uploadBrand() }); this.view.addNewBrandBtn.addEventListener('click', async () => { - this.view.showOnboardBrandForm(async (key, name) => { - const configurations = await this.model.createNewBrandConfogurations() - console.log(configurations) - await this.addBrand(key, name, configurations) - }) + await this.addNewBrand() }); } + async uploadJson() { + try { + const [fileHandle] = await window.showOpenFilePicker({ + types: [{ + description: 'JSON File', + accept: { + 'application/json': ['.json'], + }, + }], + }); + + const file = await fileHandle.getFile(); + + const json = await this.model.getBrandConfigurationsJsonFromDirectory(file); + + if (!json) { + alert("The selected JSON file is not a valid configuration for Solara brands."); + return + } + await this.addBrand(json.brand.key, json.brand.name, json.configurations) + } catch (error) { + console.error('Error:', error); + } + } + + async uploadBrand() { + try { + const dirHandle = await window.showDirectoryPicker(); + const configurations = await this.model.createBrandConfigurationsFromDirectory(dirHandle); + + this.view.showOnboardBrandForm((key, name) => { + this.addBrand(key, name, configurations) + }) + } catch (error) { + console.error('Error:', error); + } + } + + async addNewBrand() { + this.view.showOnboardBrandForm(async (key, name) => { + const configurations = await this.model.createNewBrandConfogurations() + console.log(configurations) + await this.addBrand(key, name, configurations) + }) + } + async addBrand(key, name, configurations) { const result = { brand: {key: key, name: name}, diff --git a/solara/lib/core/dashboard/brand/brand.html b/solara/lib/core/dashboard/brand/brand.html index f313946..546fb0a 100644 --- a/solara/lib/core/dashboard/brand/brand.html +++ b/solara/lib/core/dashboard/brand/brand.html @@ -137,16 +137,6 @@ margin-bottom: 32px; } - .overlay { - display: none; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: rgba(0, 0, 0, 0.5); - z-index: 999; - } @media (max-width: 768px) { .container { padding: 10px; @@ -347,7 +337,7 @@ padding: 40px; border-radius: 20px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); - z-index: 1000; + z-index: 999; animation: fadeIn 0.5s ease-out; } diff --git a/solara/lib/core/dashboard/brands/brands.html b/solara/lib/core/dashboard/brands/brands.html index 035edc7..3ea41d6 100644 --- a/solara/lib/core/dashboard/brands/brands.html +++ b/solara/lib/core/dashboard/brands/brands.html @@ -130,16 +130,6 @@ margin-bottom: 20px; text-align: center; } - .overlay { - display: none; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: rgba(0, 0, 0, 0.5); - z-index: 999; - } .brands-list-header { display: flex; justify-content: space-between; diff --git a/solara/lib/core/dashboard/component/AddFieldSheet.js b/solara/lib/core/dashboard/component/AddFieldSheet.js index 5aa2278..64fc825 100644 --- a/solara/lib/core/dashboard/component/AddFieldSheet.js +++ b/solara/lib/core/dashboard/component/AddFieldSheet.js @@ -4,11 +4,11 @@ class AddFieldSheet extends HTMLElement { this.onSubmit = null; this.inputType = null; - this.attachShadow({ mode: 'open' }); + this.attachShadow({mode: 'open'}); this.render(); this.addFieldSheet = this.shadowRoot.querySelector('#addFieldSheet'); - this.overlay = this.shadowRoot.querySelector('.overlay'); + this.overlay = this.shadowRoot.getElementById('overlay'); this.shadowRoot.querySelector('#addFieldForm').onsubmit = (e) => this.handleSubmit(e); this.shadowRoot.querySelector('#colorPicker').oninput = (e) => this.updateFieldValue(e); @@ -53,6 +53,7 @@ class AddFieldSheet extends HTMLElement { right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); + z-index: 999; } .show { display: block; @@ -142,7 +143,7 @@ class AddFieldSheet extends HTMLElement { border-radius: 4px; /* Optional: Rounded corners */ } -
+

Add New Field

diff --git a/solara/lib/core/dashboard/component/ConfirmationDialog.js b/solara/lib/core/dashboard/component/ConfirmationDialog.js index b935d5f..c5b716b 100644 --- a/solara/lib/core/dashboard/component/ConfirmationDialog.js +++ b/solara/lib/core/dashboard/component/ConfirmationDialog.js @@ -59,7 +59,7 @@ class ConfirmationDialog extends HTMLElement { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); - z-index: 1000; + z-index: 999; }
diff --git a/solara/lib/core/dashboard/component/MessageBottomSheet.js b/solara/lib/core/dashboard/component/MessageBottomSheet.js index 4aa0e74..b48c019 100644 --- a/solara/lib/core/dashboard/component/MessageBottomSheet.js +++ b/solara/lib/core/dashboard/component/MessageBottomSheet.js @@ -49,13 +49,13 @@ class MessageBottomSheet extends HTMLElement {
- + `; this.messageBottomSheet = this.shadowRoot.getElementById('messageBottomSheet'); this.messageContent = this.shadowRoot.getElementById('messageContent'); this.closeMessageButton = this.shadowRoot.getElementById('closeMessage'); - this.overlay = this.shadowRoot.querySelector('.overlay'); + this.overlay = this.shadowRoot.getElementById('overlay'); this.closeMessageButton.onclick = () => this.hideMessage(); this.overlay.onclick = () => this.hideMessage();