Merge pull request #1050 from h3poteto/loading

Fix loading color in preferences

src/renderer/components/Preferences/Account.vue

@@ -9,45 +9,42 @@
           tooltip-effect="dark"
           empty-text="No accounts"
           style="width: 100%"
-        v-loading="accountLoading">
-        <el-table-column
-          prop="username"
-          :label="$t('preferences.account.username')">
-        </el-table-column>
-        <el-table-column
-          prop="domain"
-          :label="$t('preferences.account.domain')">
-        </el-table-column>
-        <el-table-column
-          :label="$t('preferences.account.association')">
+          v-loading="accountLoading"
+          :element-loading-background="backgroundColor"
+        >
+          <el-table-column prop="username" :label="$t('preferences.account.username')"> </el-table-column>
+          <el-table-column prop="domain" :label="$t('preferences.account.domain')"> </el-table-column>
+          <el-table-column :label="$t('preferences.account.association')">
             <template slot-scope="scope">
-            <el-button
-              @click.native.prevent="removeAccount(scope.$index, accounts)"
-              type="text"
-              class="action">
+              <el-button @click.native.prevent="removeAccount(scope.$index, accounts)" type="text" class="action">
                 <i class="el-icon-close"></i> {{ $t('preferences.account.remove_association') }}
               </el-button>
             </template>
           </el-table-column>
-        <el-table-column
-          :label="$t('preferences.account.order')"
-          width="60">
+          <el-table-column :label="$t('preferences.account.order')" width="60">
             <template slot-scope="scope">
               <div class="allow-up">
-              <el-button class="arrow-up action" type="text" icon="el-icon-arrow-up" @click.native.prevent="forward(scope.$index, accounts)"></el-button>
+                <el-button
+                  class="arrow-up action"
+                  type="text"
+                  icon="el-icon-arrow-up"
+                  @click.native.prevent="forward(scope.$index, accounts)"
+                ></el-button>
               </div>
               <div class="allow-down">
-              <el-button class="arrow-down action" type="text" icon="el-icon-arrow-down" @click.native.prevent="backward(scope.$index, accounts)"></el-button>
+                <el-button
+                  class="arrow-down action"
+                  type="text"
+                  icon="el-icon-arrow-down"
+                  @click.native.prevent="backward(scope.$index, accounts)"
+                ></el-button>
               </div>
             </template>
           </el-table-column>
         </el-table>
       </el-form-item>
       <el-form-item>
-      <el-popover
-        placement="top"
-        width="160"
-        v-model="deletePopoverVisible">
+        <el-popover placement="top" width="160" v-model="deletePopoverVisible">
           <p>{{ $t('preferences.account.confirm_message') }}</p>
           <div style="text-align: right; margin: 0">
             <el-button size="mini" type="text" @click="deletePopoverVisible = false">{{ $t('preferences.account.cancel') }}</el-button>
@@ -75,6 +72,9 @@ export default {
     ...mapState({
       accounts: state => state.Preferences.Account.accounts,
       accountLoading: state => state.Preferences.Account.accountLoading
+    }),
+    ...mapState({
+      backgroundColor: state => state.App.theme.background_color
     })
   },
   created() {
@@ -95,7 +95,8 @@ export default {
       }
     },
     removeAccount(index, accounts) {
-      this.$store.dispatch('Preferences/Account/removeAccount', accounts[index])
+      this.$store
+        .dispatch('Preferences/Account/removeAccount', accounts[index])
         .then(() => {
           this.loadAccounts()
         })
@@ -107,21 +108,18 @@ export default {
         })
     },
     forward(index, accounts) {
-      this.$store.dispatch('Preferences/Account/forwardAccount', accounts[index])
-        .then(() => {
+      this.$store.dispatch('Preferences/Account/forwardAccount', accounts[index]).then(() => {
         this.loadAccounts()
       })
     },
     backward(index, accounts) {
-      this.$store.dispatch('Preferences/Account/backwardAccount', accounts[index])
-        .then(() => {
+      this.$store.dispatch('Preferences/Account/backwardAccount', accounts[index]).then(() => {
         this.loadAccounts()
       })
     },
     removeAllAssociations() {
       this.deletePopoverVisible = false
-      this.$store.dispatch('Preferences/Account/removeAllAccounts')
-        .then(() => {
+      this.$store.dispatch('Preferences/Account/removeAllAccounts').then(() => {
         this.$router.push('/login')
       })
     }
@@ -164,5 +162,4 @@ export default {
     }
   }
 }
-
 </style>

src/renderer/components/Preferences/General.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="general" v-loading="loading">
+  <div id="general" v-loading="loading" :element-loading-background="backgroundColor">
     <h2>{{ $t('preferences.general.title') }}</h2>
     <el-form class="sounds section" label-position="right" label-width="250px" size="small">
       <h3>{{ $t('preferences.general.sounds.title') }}</h3>
@@ -42,6 +42,9 @@ export default {
     ...mapState('Preferences/General', {
       loading: state => state.loading
     }),
+    ...mapState({
+      backgroundColor: state => state.App.theme.background_color
+    }),
     ...mapGetters('Preferences/General', ['notDarwin']),
     sound_fav_rb: {
       get() {