diff options
Diffstat (limited to 'src/client/ui/_common_/sidebar.vue')
| -rw-r--r-- | src/client/ui/_common_/sidebar.vue | 51 |
1 files changed, 24 insertions, 27 deletions
diff --git a/src/client/ui/_common_/sidebar.vue b/src/client/ui/_common_/sidebar.vue index 6243d6fcc2..fefe6afa7b 100644 --- a/src/client/ui/_common_/sidebar.vue +++ b/src/client/ui/_common_/sidebar.vue @@ -15,28 +15,28 @@ <MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/> </button> <MkA class="item index" active-class="active" to="/" exact> - <Fa :icon="faHome" fixed-width/><span class="text">{{ $ts.timeline }}</span> + <i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span> </MkA> <template v-for="item in menu"> <div v-if="item === '-'" class="divider"></div> <component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="item" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to"> - <Fa :icon="menuDef[item].icon" fixed-width/><span class="text">{{ $ts[menuDef[item].title] }}</span> - <i v-if="menuDef[item].indicated"><Fa :icon="faCircle"/></i> + <i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span> + <span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span> </component> </template> <div class="divider"></div> <button class="item _button" :class="{ active: $route.path === '/instance' || $route.path.startsWith('/instance/') }" v-if="$i.isAdmin || $i.isModerator" @click="oepnInstanceMenu"> - <Fa :icon="faServer" fixed-width/><span class="text">{{ $ts.instance }}</span> + <i class="fas fa-server fa-fw"></i><span class="text">{{ $ts.instance }}</span> </button> <button class="item _button" @click="more"> - <Fa :icon="faEllipsisH" fixed-width/><span class="text">{{ $ts.more }}</span> - <i v-if="otherNavItemIndicated"><Fa :icon="faCircle"/></i> + <i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span> + <span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span> </button> <MkA class="item" active-class="active" to="/settings"> - <Fa :icon="faCog" fixed-width/><span class="text">{{ $ts.settings }}</span> + <i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span> </MkA> <button class="item _button post" @click="post"> - <Fa :icon="faPencilAlt" fixed-width/><span class="text">{{ $ts.note }}</span> + <i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span> </button> </div> </nav> @@ -46,8 +46,6 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import { faGripVertical, faChevronLeft, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faListUl, faPlus, faUserClock, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faInfoCircle, faQuestionCircle, faProjectDiagram, faStream, faExclamationCircle } from '@fortawesome/free-solid-svg-icons'; -import { faBell, faEnvelope, faLaugh, faComments } from '@fortawesome/free-regular-svg-icons'; import { host } from '@client/config'; import { search } from '@client/scripts/search'; import * as os from '@client/os'; @@ -72,7 +70,6 @@ export default defineComponent({ menuDef: sidebarDef, iconOnly: false, hidden: this.defaultHidden, - faGripVertical, faChevronLeft, faComments, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faBell, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faEnvelope, faListUl, faPlus, faUserClock, faLaugh, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faProjectDiagram }; }, @@ -159,7 +156,7 @@ export default defineComponent({ to: `/@${ this.$i.username }`, avatar: this.$i, }, null, ...accountItemPromises, { - icon: faPlus, + icon: 'fas fa-plus', text: this.$ts.addAcount, action: () => { os.modalMenu([{ @@ -180,57 +177,57 @@ export default defineComponent({ type: 'link', text: this.$ts.dashboard, to: '/instance', - icon: faTachometerAlt, + icon: 'fas fa-tachometer-alt', }, null, this.$i.isAdmin ? { type: 'link', text: this.$ts.settings, to: '/instance/settings', - icon: faCog, + icon: 'fas fa-cog', } : undefined, { type: 'link', text: this.$ts.customEmojis, to: '/instance/emojis', - icon: faLaugh, + icon: 'fas fa-laugh', }, { type: 'link', text: this.$ts.users, to: '/instance/users', - icon: faUsers, + icon: 'fas fa-users', }, { type: 'link', text: this.$ts.files, to: '/instance/files', - icon: faCloud, + icon: 'fas fa-cloud', }, { type: 'link', text: this.$ts.jobQueue, to: '/instance/queue', - icon: faExchangeAlt, + icon: 'fas fa-exchange-alt', }, { type: 'link', text: this.$ts.federation, to: '/instance/federation', - icon: faGlobe, + icon: 'fas fa-globe', }, { type: 'link', text: this.$ts.relays, to: '/instance/relays', - icon: faProjectDiagram, + icon: 'fas fa-project-diagram', }, { type: 'link', text: this.$ts.announcements, to: '/instance/announcements', - icon: faBroadcastTower, + icon: 'fas fa-broadcast-tower', }, { type: 'link', text: this.$ts.abuseReports, to: '/instance/abuses', - icon: faExclamationCircle, + icon: 'fas fa-exclamation-circle', }, { type: 'link', text: this.$ts.logs, to: '/instance/logs', - icon: faStream, + icon: 'fas fa-stream', }], ev.currentTarget || ev.target); }, @@ -330,7 +327,7 @@ export default defineComponent({ font-size: $ui-font-size * 1.1; line-height: 3.7rem; - > [data-icon], + > i, > .avatar { margin-right: 0; } @@ -397,11 +394,11 @@ export default defineComponent({ box-sizing: border-box; color: var(--navFg); - > [data-icon] { + > i { width: 32px; } - > [data-icon], + > i, > .avatar { margin-right: $avatar-margin; } @@ -412,7 +409,7 @@ export default defineComponent({ vertical-align: middle; } - > i { + > .indicator { position: absolute; top: 0; left: 20px; |