fix(ui): title align & tooltip

Voxelum · Jul 14, 2019 · 739a8c8 · 739a8c8
1 parent 485e326
commit 739a8c8
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 22 deletions.
diff --git a/src/renderer/assets/common.css b/src/renderer/assets/common.css
@@ -24,11 +24,15 @@
 
 .card-list {
     padding: 10px;
-    margin: 0px 5px 20px 5px;
+    margin: 0px 0px 0px 0px;
     min-height: 80vh;
     max-height: 80vh;
+}
 
+.card-list .list {
     overflow: auto;
+    min-height: 70vh;
+    max-height: 70vh;
 }
 
 .card-list .v-input__slot {
@@ -53,4 +57,19 @@
 
 .v-menu { /* fix wrong menu width */
     max-width: 0px;
-}
+}
+
+.main-body .container h1.flex {
+    margin-bottom: 10px;
+    padding: 6px 8px !important;
+}
+
+.main-body .container {
+    padding-left: 30px;
+    padding-right: 30px;
+}
+
+.main-body .v-form .container {
+    padding-left: 30px;
+    padding-right: 30px;
+}
diff --git a/src/renderer/windows/main/AdvancedSettingPage.vue b/src/renderer/windows/main/AdvancedSettingPage.vue
@@ -1,7 +1,7 @@
 <template>
   <v-container grid-list-xs fill-height style="overflow: auto;">
     <v-layout row wrap justify-start align-content-start>
-      <v-flex tag="h1" style="margin-bottom: 10px;" class="white--text" xs12>
+      <v-flex tag="h1" class="white--text" xs12>
         <span class="headline">{{ $t('profile.launchingDetail') }}</span>
       </v-flex>
       <v-flex d-flex xs12>
@@ -50,24 +50,26 @@ export default {
       return this.$repo.state.java.all;
     },
   },
-  activated() { this.save(); },
-  deactivated() { this.load(); },
+  mounted() { this.load(); },
+  destroyed() { this.save(); },
+  activated() { this.load(); },
+  deactivated() { this.save(); },
   methods: {
     save() {
       this.$repo.dispatch('editProfile', {
         minMemory: this.minMemory,
         maxMemory: this.maxMemory,
-        vmOptions: this.vmOptions,
-        mcOptions: this.mcOptions,
+        vmOptions: this.vmOptions.map(o => o.text),
+        mcOptions: this.mcOptions.map(o => o.text),
         java: this.java,
       });
     },
     load() {
       const profile = this.$repo.getters.selectedProfile;
       this.maxMemory = profile.maxMemory;
       this.minMemory = profile.minMemory;
-      this.vmOptions = profile.vmOptions;
-      this.mcOptions = profile.mcOptions;
+      this.vmOptions = profile.vmOptions.map(a => ({ text: a }));
+      this.mcOptions = profile.mcOptions.map(a => ({ text: a }));
 
       if (profile.java) {
         this.java = this.javas.find(j => j.path === profile.java.path);

diff --git a/src/renderer/windows/main/BaseSettingPage.vue b/src/renderer/windows/main/BaseSettingPage.vue
@@ -2,7 +2,7 @@
   <v-form ref="form" v-model="valid" lazy-validation>
     <v-container grid-list-xs fill-height style="overflow: auto;">
       <v-layout row wrap justify-start align-start>
-        <v-flex tag="h1" style="margin-bottom: 10px;" class="white--text" xs12>
+        <v-flex tag="h1" class="white--text" xs12>
           <span class="headline">{{ $t('profile.setting') }}</span>
         </v-flex>
         <v-flex d-flex xs6>
@@ -127,6 +127,8 @@ export default {
       console.error(e);
     });
   },
+  mounted() { this.load(); },
+  destroyed() { this.save(); },
   activated() { this.load(); },
   deactivated() { this.save(); },
   methods: {

diff --git a/src/renderer/windows/main/GameSettingPage.vue b/src/renderer/windows/main/GameSettingPage.vue
@@ -32,6 +32,8 @@ export default {
       anaglyph3d: { options: [true, false], value: true },
     },
   }),
+  mounted() { this.load(); },
+  destroyed() { this.save(); },
   activated() { this.load(); },
   deactivated() { this.save(); },
   methods: {

diff --git a/src/renderer/windows/main/Main.vue b/src/renderer/windows/main/Main.vue
@@ -47,9 +47,9 @@
       <v-card class="main-body" color="grey darken-4">
         <vue-particles color="#dedede" style="position: absolute; width: 100%; height: 100%;" click-mode="repulse" />
         <transition name="fade-transition" mode="out-in">
-          <keep-alive>
+          <!-- <keep-alive> -->
             <router-view />
-          </keep-alive>
+          <!-- </keep-alive> -->
         </transition>
         <notifier />
         <context-menu />

diff --git a/src/renderer/windows/main/ResourcePackSettingPage.vue b/src/renderer/windows/main/ResourcePackSettingPage.vue
@@ -1,37 +1,50 @@
 <template>
   <v-container grid-list-xs fill-height style="overflow: auto;">
     <v-layout row wrap>
-      <v-flex tag="h1" style="margin-bottom: 10px; padding: 6px; 8px;" class="white--text" xs12>
+      <v-flex tag="h1" class="white--text" xs7>
         <span class="headline">{{ $tc('resourcepack.name', 2) }}</span>
       </v-flex>
+      <v-flex xs5>
+        <v-text-field v-model="filterSelected" color="primary" class="focus-solo" append-icon="filter_list"
+                      :label="$t('filter')" dark hide-details />
+      </v-flex>
       <v-flex d-flex xs6>
         <v-card dark class="card-list" @drop="onDropLeft" @dragover="onDragOver" @mousewheel="onMouseWheel">
-          <v-text-field v-model="filterUnselected" color="primary" class="focus-solo" append-icon="filter_list"
-                        :label="$t('filter')" dark solo hide-details />
+          <v-card-title>
+            <span class="text-sm-center" style="width: 100%; font-size: 16px;"> {{ $t('resourcepack.unselected') }} </span> 
+          </v-card-title>
+          <!-- <v-divider /> -->
+
           <p v-if="resourcePacks[1].length === 0" class="text-xs-center headline"
              style="position: absolute; top: 120px; right: 0px; user-select: none;">
             <v-icon style="font-size: 50px; display: block;">
               save_alt
             </v-icon>
             {{ $t('resourcepack.hint') }}
           </p>
-          <resource-pack-card v-for="(pack, index) in resourcePacks[1].filter(r => filterName(r,filterUnselected))"
-                              :key="pack.hash" :data="pack.metadata" :is-selected="false" :index="index" />
+          <div class="list">
+            <resource-pack-card v-for="(pack, index) in resourcePacks[1].filter(r => filterName(r,filterSelected))"
+                                :key="pack.hash" :data="pack.metadata" :is-selected="false" :index="index" />
+          </div>
         </v-card>
       </v-flex>
       <v-flex d-flex xs6>
         <v-card dark class="card-list right" @drop="onDropRight" @dragover="onDragOver" @mousewheel="onMouseWheel">
-          <v-text-field v-model="filterSelected" color="primary" class="focus-solo" append-icon="filter_list"
-                        :label="$t('filter')" dark solo hide-details />
+          <v-card-title>
+            <span class="text-sm-center" style="width: 100%; font-size: 16px;"> {{ $t('resourcepack.selected') }} </span> 
+          </v-card-title>
+          <!-- <v-divider /> -->
           <p v-if="resourcePacks[0].length === 0" class="text-xs-center headline"
              style="position: absolute; top: 120px; right: 0px; user-select: none;">
             <v-icon style="font-size: 50px; display: block;">
               save_alt
             </v-icon>
             {{ $t('resourcepack.hint') }}
           </p>
-          <resource-pack-card v-for="(pack, index) in resourcePacks[0].filter(r => filterName(r, filterSelected))"
-                              :key="pack.hash" :data="pack.metadata" :is-selected="true" :index="index" />
+          <div class="list">
+            <resource-pack-card v-for="(pack, index) in resourcePacks[0].filter(r => filterName(r, filterSelected))"
+                                :key="pack.hash" :data="pack.metadata" :is-selected="true" :index="index" />
+          </div>
         </v-card>
       </v-flex>
     </v-layout>
@@ -47,7 +60,6 @@ export default {
   mixins: [SelectionList],
   data() {
     return {
-      filterUnselected: '',
       filterSelected: '',
     };
   },

diff --git a/src/renderer/windows/main/VersionSettingPage.vue b/src/renderer/windows/main/VersionSettingPage.vue
@@ -107,6 +107,8 @@ export default {
       this.liteloaderVersion = '';
     },
   },
+  mounted() { this.load(); },
+  destroyed() { this.save(); },
   activated() { this.load(); },
   deactivated() { this.save(); },
   methods: {