Custom zcl dialog (project-chip#1185)

* add custom file type to open file dialog * Modify zcl extension popup style
SiliconLabs · Oct 27, 2023 · b5f28c4 · b5f28c4
1 parent a358035
commit b5f28c4
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 50 deletions.
diff --git a/src-electron/ui/ui-util.ts b/src-electron/ui/ui-util.ts
@@ -108,6 +108,10 @@ function openFileDialogAndReportResult(
 ) {
   let p: Electron.OpenDialogOptions = {
     buttonLabel: 'Generate',
+    filters: [
+      { name: 'ZCL File Type', extensions: ['json', 'xml'] },
+      { name: 'All Files', extensions: ['*'] },
+    ],
   }
 
   if (options.buttonLabel) {

diff --git a/src-shared/types/ui-types.ts b/src-shared/types/ui-types.ts
@@ -22,5 +22,5 @@ export interface UiFileBrowseOptionsType {
   title: string
   defaultPath: string
   buttonLabel: string
+  filters: object
 }
-
diff --git a/src/components/ZclCustomZclView.vue b/src/components/ZclCustomZclView.vue
@@ -15,75 +15,91 @@ limitations under the License.
 -->
 <template>
   <div style="width: 800px; max-width: 80vw">
-    <q-card>
+    <q-card dense>
       <q-card-section>
-        <div class="text-h5">Add Custom ZCL</div>
         <div class="row items-center">
-          <div>
+          <div class="text-h6 col">Add Custom ZCL</div>
+          <div class="col-1 text-right">
+            <q-btn dense flat icon="close" v-close-popup>
+              <q-tooltip>Close</q-tooltip>
+            </q-btn>
+          </div>
+        </div>
+        <div class="column">
+          <div class="col">
             You can use this functionality to add custom ZCL clusters or
             commands to the Zigbee Clusters Configurator
           </div>
-          <q-space />
           <q-btn
             color="primary"
             icon="add"
-            class="v-step-17"
+            class="v-step-17 col q-mx-auto q-mt-md"
             @click="browseForFile()"
+            rounded
+            label="Browse file"
           />
         </div>
       </q-card-section>
-      <q-card-section>
-        <q-list bordered separator>
+      <q-card-section class="q-pt-none">
+        <div class="row items-center">
+          <strong>Added files</strong>
+        </div>
+        <q-list class="cluster-list">
           <div v-for="(sessionPackage, index) in packages" :key="index">
-            <q-item>
+            <q-item dense class="q-px-none">
               <q-item-section>
                 <q-expansion-item>
                   <template #header>
-                    <q-toolbar>
-                      <div>
-                        <strong>{{
-                          getFileName(sessionPackage.pkg.path)
-                        }}</strong>
-                      </div>
-                      <q-space />
-                      <q-btn
-                        label="Delete"
-                        icon="delete"
-                        flat
-                        @click.stop="deletePackage(sessionPackage)"
-                        :disable="sessionPackage.sessionPackage.required == 1"
-                      />
-                      <q-btn
-                        label="Relative to..."
-                        outlined
-                        v-show="false"
-                        @click.stop
+                    <q-item-section avatar class="q-pr-none">
+                      <q-icon
+                        :class="{
+                          'cursor-pointer':
+                            iconName(sessionPackage.pkg.id) == 'error' ||
+                            iconName(sessionPackage.pkg.id) == 'warning',
+                        }"
+                        :name="iconName(sessionPackage.pkg.id)"
+                        :color="iconColor(sessionPackage.pkg.id)"
+                        size="1.5em"
+                        @click="() => handleIconClick(sessionPackage.pkg.id)"
                       />
-                    </q-toolbar>
+                    </q-item-section>
+                    <div class="q-my-auto q-item__label q-item__label__popup">
+                      <strong>{{
+                        getFileName(sessionPackage.pkg.path)
+                      }}</strong>
+                    </div>
+                    <q-space />
+                    <q-btn
+                      v-if="!sessionPackage.sessionPackage.required"
+                      class="q-mx-xl"
+                      label="Delete"
+                      icon="delete"
+                      flat
+                      dense
+                      @click.stop="deletePackage(sessionPackage)"
+                      :disable="sessionPackage.sessionPackage.required"
+                    />
                   </template>
-                  Full File path: {{ sessionPackage.pkg.path }} <br />
-                  Package Type: {{ sessionPackage.pkg.type }} <br />
-                  Version: {{ sessionPackage.pkg.version }} <br />
-                  Required:
-                  {{
-                    sessionPackage.sessionPackage.required ? 'True' : 'False'
-                  }}
-                  <br />
+                  <q-card>
+                    <q-card-section>
+                      <div class="q-mx-lg q-px-lg">
+                        <strong> Full File path:</strong>
+                        {{ sessionPackage.pkg.path }} <br />
+                        <strong> Package Type:</strong>
+                        {{ sessionPackage.pkg.type }} <br />
+                        <strong> Version: </strong
+                        >{{ sessionPackage.pkg.version }} <br />
+                        <strong> Required:</strong>
+                        {{
+                          sessionPackage.sessionPackage.required
+                            ? 'True'
+                            : 'False'
+                        }}
+                      </div>
+                    </q-card-section>
+                  </q-card>
                 </q-expansion-item>
               </q-item-section>
-              <q-item-section side>
-                <q-icon
-                  :class="{
-                    'cursor-pointer':
-                      iconName(sessionPackage.pkg.id) == 'error' ||
-                      iconName(sessionPackage.pkg.id) == 'warning',
-                  }"
-                  :name="iconName(sessionPackage.pkg.id)"
-                  :color="iconColor(sessionPackage.pkg.id)"
-                  size="2em"
-                  @click="() => handleIconClick(sessionPackage.pkg.id)"
-                />
-              </q-item-section>
               <q-dialog v-model="dialogData[sessionPackage.pkg.id]">
                 <q-card>
                   <q-card-section>

diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
@@ -72,6 +72,11 @@ $warning: #f2c037;
             border: 2px solid transparent;
             border-radius: 14px;
             padding: 7px 14px;
+            &__section {
+              &--avatar {
+                min-width: 40px;
+              }
+            }
             &__label {
               transition: all 0.1s ease-in-out;
               width: fit-content;
@@ -115,6 +120,9 @@ $warning: #f2c037;
             padding: 7px 14px;
             &__section {
               margin-bottom: -10px;
+              &--avatar {
+                min-width: 40px;
+              }
             }
             &__label {
               transition: all 0.1s ease-in-out;
@@ -125,6 +133,10 @@ $warning: #f2c037;
               padding: 2px 16px;
               width: fit-content;
               border-radius: 5px 5px 0 0;
+              &__popup {
+                margin-bottom: -10px;
+                padding: 9px 16px;
+              }
             }
           }
           .q-expansion-item__content {
@@ -211,6 +223,10 @@ $warning: #f2c037;
                 padding: 2px 16px;
                 width: fit-content;
                 border-radius: 5px 5px 0 0;
+                &__popup {
+                  margin-bottom: -10px;
+                  padding: 9px 16px;
+                }
               }
             }
             .q-expansion-item__content {
@@ -306,6 +322,11 @@ $warning: #f2c037;
             border: 2px solid transparent;
             border-radius: 14px;
             padding: 7px 14px;
+            &__section {
+              &--avatar {
+                min-width: 40px;
+              }
+            }
             &__label {
               transition: all 0.1s ease-in-out;
               width: fit-content;
@@ -351,6 +372,9 @@ $warning: #f2c037;
             padding: 7px 14px;
             &__section {
               margin-bottom: -10px;
+              &--avatar {
+                min-width: 40px;
+              }
             }
             &__label {
               transition: all 0.1s ease-in-out;
@@ -361,6 +385,10 @@ $warning: #f2c037;
               padding: 2px 16px;
               width: fit-content;
               border-radius: 5px 5px 0 0;
+              &__popup {
+                margin-bottom: -10px;
+                padding: 9px 16px;
+              }
             }
           }
           .q-expansion-item__content {
@@ -450,6 +478,10 @@ $warning: #f2c037;
                 padding: 2px 16px;
                 width: fit-content;
                 border-radius: 5px 5px 0 0;
+                &__popup {
+                  margin-bottom: -10px;
+                  padding: 9px 16px;
+                }
               }
             }
             .q-expansion-item__content {