Merge pull request #1050 from h3poteto/loading

Fix loading color in preferences

src/renderer/components/Preferences/Account.vue

@@ -1,5 +1,5 @@
 <template>
-<div id="account">
+  <div id="account">
     <h2>{{ $t('preferences.account.title') }}</h2>
     <el-form class="connected-account section" size="small">
       <h3>{{ $t('preferences.account.connected') }}</h3>
@@ -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>
@@ -57,7 +54,7 @@
         </el-popover>
       </el-form-item>
     </el-form>
-</div>
+  </div>
 </template>
 
 <script>
@@ -65,7 +62,7 @@ import { mapState } from 'vuex'
 
 export default {
   name: 'account',
-  data () {
+  data() {
     return {
       openRemoveDialog: false,
       deletePopoverVisible: false
@@ -75,13 +72,16 @@ export default {
     ...mapState({
       accounts: state => state.Preferences.Account.accounts,
       accountLoading: state => state.Preferences.Account.accountLoading
+    }),
+    ...mapState({
+      backgroundColor: state => state.App.theme.background_color
     })
   },
-  created () {
+  created() {
     this.loadAccounts()
   },
   methods: {
-    async loadAccounts () {
+    async loadAccounts() {
       this.$store.commit('Preferences/Account/updateAccountLoading', true)
       try {
         await this.$store.dispatch('Preferences/Account/loadAccounts')
@@ -94,8 +94,9 @@ export default {
         this.$store.commit('Preferences/Account/updateAccountLoading', false)
       }
     },
-    removeAccount (index, accounts) {
-      this.$store.dispatch('Preferences/Account/removeAccount', accounts[index])
+    removeAccount(index, accounts) {
+      this.$store
+        .dispatch('Preferences/Account/removeAccount', accounts[index])
         .then(() => {
           this.loadAccounts()
         })
@@ -106,22 +107,19 @@ export default {
           })
         })
     },
-    forward (index, accounts) {
-      this.$store.dispatch('Preferences/Account/forwardAccount', accounts[index])
-        .then(() => {
+    forward(index, accounts) {
+      this.$store.dispatch('Preferences/Account/forwardAccount', accounts[index]).then(() => {
         this.loadAccounts()
       })
     },
-    backward (index, accounts) {
-      this.$store.dispatch('Preferences/Account/backwardAccount', accounts[index])
-        .then(() => {
+    backward(index, accounts) {
+      this.$store.dispatch('Preferences/Account/backwardAccount', accounts[index]).then(() => {
         this.loadAccounts()
       })
     },
-    removeAllAssociations () {
+    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() {