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 */
}
-
+
-
+
`;
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();