diff options
| -rw-r--r-- | src/components/settings_modal/settings_modal_content.vue | 9 | ||||
| -rw-r--r-- | src/components/tab_switcher/tab_switcher.js | 7 | ||||
| -rw-r--r-- | src/components/tab_switcher/tab_switcher.scss | 5 | ||||
| -rwxr-xr-x | static/fontello.json | 12 |
4 files changed, 31 insertions, 2 deletions
diff --git a/src/components/settings_modal/settings_modal_content.vue b/src/components/settings_modal/settings_modal_content.vue index 737c3637..847de1da 100644 --- a/src/components/settings_modal/settings_modal_content.vue +++ b/src/components/settings_modal/settings_modal_content.vue @@ -45,40 +45,47 @@ > <div :label="$t('settings.general')" + icon="wrench" > <GeneralTab /> </div> <div v-if="isLoggedIn" :label="$t('settings.profile_tab')" + icon="user" > <ProfileTab /> </div> <div v-if="isLoggedIn" :label="$t('settings.security_tab')" + icon="lock" > <SecurityTab /> </div> <div :label="$t('settings.filtering')" + icon="filter" > <FilteringTab /> </div> <div :label="$t('settings.theme')" + icon="brush" > <ThemeTab /> </div> <div v-if="isLoggedIn" :label="$t('settings.notifications')" + icon="chat" > <NotificationsTab /> </div> <div v-if="isLoggedIn" :label="$t('settings.data_import_export_tab')" + icon="download" > <DataImportExportTab /> </div> @@ -87,11 +94,13 @@ :label="$t('settings.mutes_and_blocks')" :fullHeight="true" class="full-height" + icon="eye-off" > <MutesAndBlocksTab /> </div> <div :label="$t('settings.version.title')" + icon="info-circled" > <VersionTab /> </div> diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js index bd1f51cb..2d04e15d 100644 --- a/src/components/tab_switcher/tab_switcher.js +++ b/src/components/tab_switcher/tab_switcher.js @@ -94,8 +94,11 @@ export default Vue.component('tab-switcher', { <button disabled={slot.data.attrs.disabled} onClick={this.activateTab(index)} - class={classesTab.join(' ')}> - {slot.data.attrs.label}</button> + class={classesTab.join(' ')} + > + {!slot.data.attrs.icon ? '' : (<i class={'tab-icon icon-' + slot.data.attrs.icon}/>)} + {slot.data.attrs.label} + </button> </div> ) }) diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss index f994380f..129a68b7 100644 --- a/src/components/tab_switcher/tab_switcher.scss +++ b/src/components/tab_switcher/tab_switcher.scss @@ -3,6 +3,11 @@ .tab-switcher { display: flex; + .tab-icon { + font-size: 2em; + display: block; + } + &.top-tabs { flex-direction: column; > .tabs { diff --git a/static/fontello.json b/static/fontello.json index 7f0e7cdd..ac3f0a18 100755 --- a/static/fontello.json +++ b/static/fontello.json @@ -363,6 +363,18 @@ "css": "ok", "code": 59431, "src": "fontawesome" + }, + { + "uid": "4109c474ff99cad28fd5a2c38af2ec6f", + "css": "filter", + "code": 61616, + "src": "fontawesome" + }, + { + "uid": "9a76bc135eac17d2c8b8ad4a5774fc87", + "css": "download", + "code": 59429, + "src": "fontawesome" } ] }
\ No newline at end of file |