From 47c141d17e2a1be206788a74f6ef9b2e494f9b8f Mon Sep 17 00:00:00 2001
From: Jannik Schönartz
Date: Mon, 22 Apr 2019 23:24:22 +0000
Subject: [webapp/ipxeBuilder] Change expansion-panels to tabs

---
 webapp/src/components/IpxeBuilderModuleConfig.vue | 118 +++++++++-------------
 1 file changed, 48 insertions(+), 70 deletions(-)

(limited to 'webapp/src/components/IpxeBuilderModuleConfig.vue')

diff --git a/webapp/src/components/IpxeBuilderModuleConfig.vue b/webapp/src/components/IpxeBuilderModuleConfig.vue
index 6454d41..638de2d 100644
--- a/webapp/src/components/IpxeBuilderModuleConfig.vue
+++ b/webapp/src/components/IpxeBuilderModuleConfig.vue
@@ -15,6 +15,7 @@
     "general": "general.h",
     "generalSaved": "general.h saved successfully",
     "ipxe": "iPXE",
+    "scripts": "Scripts",
     "script": "Embedded script (EMBED=)",
     "scriptSaved": "Embedded script saved successfully",
     "scrollDown": "Go to the bottom",
@@ -34,6 +35,7 @@
     "efi": "EFI",
     "general": "general.h",
     "generalSaved": "general.h wurde erfolgreich gespeichert",
+    "scripts": "Skripte",
     "ipxe": "iPXE",
     "script": "Eingebettetes Skript (EMBED=)",
     "scriptSaved": "Eingebettetes Skript wurde erfolgreich gespeichert",
@@ -77,70 +79,61 @@
       <v-btn flat color="warning" @click="cancelIpxe" :disabled=!disableButtons><v-icon left>cancel</v-icon>{{ $t('cancelIpxe') }}</v-btn>
       <v-btn flat color="primary" @click="buildIpxe" :disabled=disableButtons><v-icon left>gavel</v-icon>{{ $t('buildIpxe') }}</v-btn>
     </div>
-    <v-subheader></v-subheader>
-    <v-expansion-panel v-model="scriptExpanded" class="non-selectable">
-       <v-expansion-panel-content>
+    <v-subheader>{{ $t('scripts') }}</v-subheader>
+    <v-card class="tabbar-card subtabs" :color="tabsColor">
+      <v-tabs v-model="tabs" grow :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor" hide-slider>
+          <v-tab :class="tabs === 0 ? 'primary--text' : ''"><v-icon class="tabbar-tabicon" :color="tabs === 0 ? 'primary' : ''">description</v-icon>{{ $t('script') }}</v-tab>
+          <v-tab :class="tabs === 1 ? 'primary--text' : ''"><v-icon class="tabbar-tabicon" :color="tabs === 1 ? 'primary' : ''">description</v-icon>{{ $t('trust') }}</v-tab>
+          <v-tab :class="tabs === 2 ? 'primary--text' : ''"><v-icon class="tabbar-tabicon" :color="tabs === 2 ? 'primary' : ''">description</v-icon>{{ $t('general') }}</v-tab>
+          <v-tab :class="tabs === 3 ? 'primary--text' : ''"><v-icon class="tabbar-tabicon" :color="tabs === 3 ? 'primary' : ''">description</v-icon>{{ $t('console') }}</v-tab>
+      </v-tabs>
+    </v-card>
+    <v-tabs-items v-model="tabs" style="padding-bottom: 12px"> <!--20px-->
+      <v-tab-item lazy :transition="false" :reverse-transition="false">
         <div slot="header">{{ $t('script') }}</div>
         <v-card>
           <codemirror class="script-editor" ref="script" v-model="script"></codemirror>
+          <div class="text-xs-right">
+            <v-btn flat color="error" @click="undo('script')"><v-icon left>undo</v-icon>{{ $t('undo') }}</v-btn>
+            <v-btn flat color="success" @click="redo('script')"><v-icon left>redo</v-icon>{{ $t('redo') }}</v-btn>
+            <v-btn color="primary" @click="save('script')"><v-icon left>save</v-icon>{{ $t('save') }}</v-btn>
+          </div>
         </v-card>
-        <!--<v-divider></v-divider>-->
-        <div class="text-xs-right">
-          <v-btn flat color="error" @click="undo('script')"><v-icon left>undo</v-icon>{{ $t('undo') }}</v-btn>
-          <v-btn flat color="success" @click="redo('script')"><v-icon left>redo</v-icon>{{ $t('redo') }}</v-btn>
-          <v-btn color="primary" @click="save('script')"><v-icon left>save</v-icon>{{ $t('save') }}</v-btn>
-        </div>
-      </v-expansion-panel-content>
-    </v-expansion-panel>
-
-    <v-subheader></v-subheader>
-    <v-expansion-panel v-model="certificateExpanded">
-       <v-expansion-panel-content class="non-selectable">
+      </v-tab-item>
+      <v-tab-item lazy :transition="false" :reverse-transition="false">
         <div slot="header">{{ $t('trust') }}</div>
         <v-card>
           <codemirror class="script-editor" ref="certificate" v-model="certificate"></codemirror>
+          <div class="text-xs-right">
+            <v-btn flat color="error" @click="undo('certificate')"><v-icon left>undo</v-icon>{{ $t('undo') }}</v-btn>
+            <v-btn flat color="success" @click="redo('certificate')"><v-icon left>redo</v-icon>{{ $t('redo') }}</v-btn>
+            <v-btn color="primary" @click="save('certificate')"><v-icon left>save</v-icon>{{ $t('save') }}</v-btn>
+          </div>
         </v-card>
-        <!--<v-divider></v-divider>-->
-        <div class="text-xs-right">
-          <v-btn flat color="error" @click="undo('certificate')"><v-icon left>undo</v-icon>{{ $t('undo') }}</v-btn>
-          <v-btn flat color="success" @click="redo('certificate')"><v-icon left>redo</v-icon>{{ $t('redo') }}</v-btn>
-          <v-btn color="primary" @click="save('certificate')"><v-icon left>save</v-icon>{{ $t('save') }}</v-btn>
-        </div>
-      </v-expansion-panel-content>
-    </v-expansion-panel>
-
-    <v-subheader></v-subheader>
-    <v-expansion-panel v-model="generalExpanded">
-       <v-expansion-panel-content class="non-selectable">
+      </v-tab-item>
+      <v-tab-item lazy :transition="false" :reverse-transition="false">
         <div slot="header">{{ $t('general') }}</div>
         <v-card>
           <codemirror class="script-editor" ref="general" v-model="general"></codemirror>
+          <div class="text-xs-right">
+            <v-btn flat color="error" @click="undo('general')"><v-icon left>undo</v-icon>{{ $t('undo') }}</v-btn>
+            <v-btn flat color="success" @click="redo('general')"><v-icon left>redo</v-icon>{{ $t('redo') }}</v-btn>
+            <v-btn color="primary" @click="save('general')"><v-icon left>save</v-icon>{{ $t('save') }}</v-btn>
+          </div>
         </v-card>
-        <!--<v-divider></v-divider>-->
-        <div class="text-xs-right">
-          <v-btn flat color="error" @click="undo('general')"><v-icon left>undo</v-icon>{{ $t('undo') }}</v-btn>
-          <v-btn flat color="success" @click="redo('general')"><v-icon left>redo</v-icon>{{ $t('redo') }}</v-btn>
-          <v-btn color="primary" @click="save('general')"><v-icon left>save</v-icon>{{ $t('save') }}</v-btn>
-        </div>
-      </v-expansion-panel-content>
-    </v-expansion-panel>
-
-    <v-subheader></v-subheader>
-    <v-expansion-panel v-model="consoleExpanded">
-       <v-expansion-panel-content class="non-selectable">
+      </v-tab-item>
+      <v-tab-item lazy :transition="false" :reverse-transition="false">
         <div slot="header">{{ $t('console') }}</div>
         <v-card>
           <codemirror class="script-editor" ref="console" v-model="console"></codemirror>
+          <div class="text-xs-right">
+            <v-btn flat color="error" @click="undo('console')"><v-icon left>undo</v-icon>{{ $t('undo') }}</v-btn>
+            <v-btn flat color="success" @click="redo('console')"><v-icon left>redo</v-icon>{{ $t('redo') }}</v-btn>
+            <v-btn color="primary" @click="save('console')"><v-icon left>save</v-icon>{{ $t('save') }}</v-btn>
+          </div>
         </v-card>
-        <!--<v-divider></v-divider>-->
-        <div class="text-xs-right">
-          <v-btn flat color="error" @click="undo('console')"><v-icon left>undo</v-icon>{{ $t('undo') }}</v-btn>
-          <v-btn flat color="success" @click="redo('console')"><v-icon left>redo</v-icon>{{ $t('redo') }}</v-btn>
-          <v-btn color="primary" @click="save('console')"><v-icon left>save</v-icon>{{ $t('save') }}</v-btn>
-        </div>
-      </v-expansion-panel-content>
-    </v-expansion-panel>
-
+      </v-tab-item>
+    </v-tabs-items>
   </div>
 </template>
 
@@ -160,10 +153,6 @@ export default {
       certificate: '',
       general: '',
       console: '',
-      scriptExpanded: null,
-      certificateExpanded: null,
-      generalExpanded: null,
-      consoleExpanded: null,
       log: [],
       disableButtons: false,
       autoscroll: true
@@ -172,24 +161,6 @@ export default {
   computed: {
     ...mapGetters(['tabsDark', 'tabsColor', 'tabsSliderColor'])
   },
-  watch: {
-    scriptExpanded: async function () {
-      await this.$nextTick()
-      if (this.scriptExpanded === 0) this.$refs.script.refresh()
-    },
-    certificateExpanded: async function () {
-      await this.$nextTick()
-      if (this.certificateExpanded === 0) this.$refs.certificate.refresh()
-    },
-    generalExpanded: async function () {
-      await this.$nextTick()
-      if (this.generalExpanded === 0) this.$refs.general.refresh()
-    },
-    consoleExpanded: async function () {
-      await this.$nextTick()
-      if (this.consoleExpanded === 0) this.$refs.console.refresh()
-    }
-  },
   methods: {
     save (apiPath) {
       axios.put('/api/ipxe/' + this.ipxeVersion + '/' + apiPath, { data: this[apiPath] }).then(result => {
@@ -292,4 +263,11 @@ export default {
     height: 588px;
     overflow: auto;
   }
+
+  .script-editor >>> .CodeMirror {
+    height: calc(90vh - 160px);
+  }
+  .subtabs {
+    z-index: 1;
+  }
 </style>
-- 
cgit v1.2.3-55-g7522

