Grey out disabled icons when native icons are used

oliverschwendener · Nov 22, 2018 · dcba876 · dcba876
1 parent 0dc740a
commit dcba876
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 8 deletions.
diff --git a/main.html b/main.html
@@ -356,15 +356,10 @@ <h1 class="setting-section-title">User Settings</h1>
                             <input class="setting-text-input" type="text" v-model="config.hotKey" v-on:blur="updateUserConfig">
                         </div>
                     </div>
-                    <div class="setting-group">
-                        <div class="setting-title">Use native icons</div>
-                        <div class="setting">
-                            <input type="checkbox" v-model="config.useNativeIcons" v-on:change="updateUserConfig">
-                        </div>
-                    </div>
                     <div class="setting-group">
                         <div class="setting-title">Icon set</div>
                         <div class="setting">
+                            Use native icons <input type="checkbox" v-model="config.useNativeIcons" v-on:change="updateUserConfig">
                             <table class="setting-table">
                                 <thead>
                                     <tr>
@@ -376,7 +371,7 @@ <h1 class="setting-section-title">User Settings</h1>
                                 <tbody>
                                     <tr>
                                         <td>App icon</td>
-                                        <td class="text-center" v-html="config.iconSet.appIcon"></td>
+                                        <td class="text-center" :class="{ 'disabled' : config.useNativeIcons }" v-html="config.iconSet.appIcon"></td>
                                         <td><input class="setting-text-input" :disabled="config.useNativeIcons" type="text" v-model="config.iconSet.appIcon" v-on:blur="updateUserConfig"></td>
                                     </tr>
                                     <tr>
@@ -401,7 +396,7 @@ <h1 class="setting-section-title">User Settings</h1>
                                     </tr>
                                     <tr>
                                         <td>File icon</td>
-                                        <td class="text-center" v-html="config.iconSet.fileIcon"></td>
+                                        <td class="text-center" :class="{ 'disabled' : config.useNativeIcons }" v-html="config.iconSet.fileIcon"></td>
                                         <td><input class="setting-text-input" :disabled="config.useNativeIcons" type="text" v-model="config.iconSet.fileIcon" v-on:blur="updateUserConfig"></td>
                                     </tr>
                                     <tr>

diff --git a/styles/app.css b/styles/app.css
@@ -284,6 +284,10 @@ td.slim {
     width: 50px;
 }
 
+td.disabled {
+    opacity: 0.5;
+}
+
 td > svg {
     fill: var(--text-color);
     height: 25px;