https://github.com/project-chip/zap/issues/299

src/components/ZclCustomZclView.vue

@@ -14,77 +14,67 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 <template>
-  <div>
-    <div class="row q-py-md">
-      <strong>
-        <q-breadcrumbs>
-          <!-- this needs to be updated depending on how the pages will work -->
-          <q-breadcrumbs-el icon="keyboard_arrow_left" to="/">
-            Main Configurator
-          </q-breadcrumbs-el>
-          <q-breadcrumbs-el to="/"> Add Custom ZCL </q-breadcrumbs-el>
-        </q-breadcrumbs>
-      </strong>
-    </div>
-    <div style="padding: 0 10px">
-      <h5 style="margin: 10px 0 0px">
-        <strong> Add Custom ZCL </strong>
-      </h5>
-      <div class="row items-center" style="padding: 10px 10px 10px 10px">
-        <div >
-          You can use this functionality to add custom ZCL clusters or commands to
-          the Zigbee Clusters Configurator
+  <div style="width: 800px; max-width: 80vw">
+    <q-card>
+      <q-card-section>
+        <div class="text-h5">Add Custom ZCL</div>
+        <div class="row items-center">
+          <div>
+            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"
+            @click="browseForFile()"
+          />
         </div>
-        <q-space />
-        <q-btn
-          color="primary"
-          label="Add"
-          @click="browseForFile()"
-          v-close-popup
-        />
-      </div>
-    </div>
-    <div>
-      <q-list bordered separator>
-        <template v-for="(sessionPackage, index) in packages">
-          <q-item v-bind:key="index">
-            <q-item-section>
-              <q-expansion-item>
-                <template slot="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-toolbar>
-                </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-expansion-item>
-            </q-item-section>
-          </q-item>
-        </template>
-      </q-list>
-    </div>
+      </q-card-section>
+      <q-card-section>
+        <q-list bordered separator>
+          <template v-for="(sessionPackage, index) in packages">
+            <q-item v-bind:key="index">
+              <q-item-section>
+                <q-expansion-item>
+                  <template slot="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-toolbar>
+                  </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-expansion-item>
+              </q-item-section>
+            </q-item>
+          </template>
+        </q-list>
+      </q-card-section>
+    </q-card>
   </div>
 </template>
 

src/layouts/ZclConfiguratorLayout.vue

@@ -33,7 +33,8 @@ limitations under the License.
               emit-value
               map-options
               @input="setSelectedEndpoint($event)"
-              style="width: 250px"
+              bg-color="white"
+              style="width: 250px;"
             />
           </q-toolbar-title>
           <q-toolbar-title v-on:click.ctrl="showVersion" v-else>
@@ -59,7 +60,7 @@ limitations under the License.
                 :ripple="false"
                 :unelevated="false"
                 :outline="false"
-                to="/customZcl"
+                @click="zclExtensionDialog = true"
               >
                 <div class="text-align q-ml-xs">ZCL Extensions...</div>
               </q-btn>
@@ -84,6 +85,9 @@ limitations under the License.
         <zcl-cluster-manager  />
       </q-page-container>
     </q-layout>
+    <q-dialog v-model="zclExtensionDialog" style="width:800px;">
+      <ZclExtensionDialog />
+    </q-dialog>
   </div>
 </template>
 
@@ -92,6 +96,7 @@ import ZclGeneralOptionsBar from '../components/ZclGeneralOptionsBar.vue'
 import ZclEndpointManager from '../components/ZclEndpointManager.vue'
 import ZclClusterManager from '../components/ZclClusterManager.vue'
 import InitialContent from '../components/InitialContent.vue'
+import ZclExtensionDialog from '../components/ZclCustomZclView.vue'
 
 const restApi = require('../../src-shared/rest-api.js')
 const commonUrl = require('../../src-shared/common-url.js')
@@ -199,7 +204,8 @@ export default {
   data() {
     return {
       isExpanded: false,
-      globalOptionsDialog:false
+      globalOptionsDialog:false,
+      zclExtensionDialog:false
 
     }
   },
@@ -208,6 +214,7 @@ export default {
     ZclEndpointManager,
     ZclClusterManager,
     InitialContent,
+    ZclExtensionDialog
   },
 }
 </script>