cnx/akkoma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

improved the semantics for our icon scale, fixed preview, fixed navbar desktop

Browse source
This commit is contained in:
Henry Jameson 2020-10-28 21:31:16 +02:00
parent eb04ed865e
commit b6cf2bcefd
26 changed files with 95 additions and 151 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/App.scss
View file

@ -812,14 +812,18 @@ nav {
} }
} }
.button-icon { .fa-scale-110 {
&.svg-inline--fa.fa-lg { &.svg-inline--fa {
display: inline-block;
padding: 0 0.3em;
font-size: 1.1em; font-size: 1.1em;
} }
} }
.fa-old-padding {
&.svg-inline--fa {
padding: 0 0.3em;
}
}
@keyframes shakeError { @keyframes shakeError {
0% { 0% {
transform: translateX(0); transform: translateX(0);

9
src/App.vue
View file

@ -53,8 +53,7 @@
> >
<FAIcon <FAIcon
fixed-width fixed-width
size="lg" class="fa-scale-110 fa-old-padding"
class="button-icon"
icon="cog" icon="cog"
:title="$t('nav.preferences')" :title="$t('nav.preferences')"
/> />
@ -66,8 +65,7 @@
target="_blank" target="_blank"
><FAIcon ><FAIcon
fixed-width fixed-width
size="lg" class="fa-scale-110 fa-old-padding"
class="button-icon"
icon="tachometer-alt" icon="tachometer-alt"
:title="$t('nav.administration')" :title="$t('nav.administration')"
/></a> /></a>
@ -78,8 +76,7 @@
@click.prevent="logout" @click.prevent="logout"
><FAIcon ><FAIcon
fixed-width fixed-width
size="lg" class="fa-scale-110 fa-old-padding"
class="button-icon"
icon="sign-out-alt" icon="sign-out-alt"
:title="$t('login.logout')" :title="$t('login.logout')"
/></a> /></a>

3
src/components/chat_new/chat_new.vue
View file

@ -20,8 +20,7 @@
<div class="input-wrap"> <div class="input-wrap">
<div class="input-search"> <div class="input-search">
<FAIcon <FAIcon
size="lg" class="search-icon fa-scale-110 fa-old-padding"
class="search-icon button-icon"
icon="search" icon="search"
/> />
</div> </div>

2
src/components/extra_buttons/extra_buttons.vue
View file

@ -107,7 +107,7 @@
</div> </div>
<span slot="trigger"> <span slot="trigger">
<FAIcon <FAIcon
class="ExtraButtons button-icon" class="ExtraButtons fa-scale-110 fa-old-padding"
icon="ellipsis-h" icon="ellipsis-h"
size="md" size="md"
/> />

6
src/components/favorite_button/favorite_button.vue
View file

@ -2,11 +2,10 @@
<div v-if="loggedIn"> <div v-if="loggedIn">
<FAIcon <FAIcon
:class="classes" :class="classes"
class="FavoriteButton button-icon -interactive" class="FavoriteButton fa-scale-110 fa-old-padding -interactive"
:title="$t('tool_tip.favorite')" :title="$t('tool_tip.favorite')"
:icon="[status.favorited ? 'fas' : 'far', 'star']" :icon="[status.favorited ? 'fas' : 'far', 'star']"
:spin="animated" :spin="animated"
size="lg"
@click.prevent="favorite()" @click.prevent="favorite()"
/> />
<span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span> <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
@ -14,10 +13,9 @@
<div v-else> <div v-else>
<FAIcon <FAIcon
:class="classes" :class="classes"
class="FavoriteButton button-icon" class="FavoriteButton fa-scale-110 fa-old-padding"
:title="$t('tool_tip.favorite')" :title="$t('tool_tip.favorite')"
:icon="['far', 'star']" :icon="['far', 'star']"
size="lg"
/> />
<span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span> <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
</div> </div>

2
src/components/global_notice_list/global_notice_list.vue
View file

@ -10,7 +10,7 @@
{{ $t(notice.messageKey, notice.messageArgs) }} {{ $t(notice.messageKey, notice.messageArgs) }}
</div> </div>
<FAIcon <FAIcon
class="button-icon" class="fa-scale-110 fa-old-padding"
icon="times" icon="times"
@click="closeNotice(notice)" @click="closeNotice(notice)"
/> />

2
src/components/image_cropper/image_cropper.vue
View file

@ -43,7 +43,7 @@
> >
{{ submitErrorMsg }} {{ submitErrorMsg }}
<FAIcon <FAIcon
class="button-icon" class="fa-scale-110 fa-old-padding"
icon="times" icon="times"
@click="clearError" @click="clearError"
/> />

2
src/components/login_form/login_form.vue
View file

@ -77,7 +77,7 @@
<div class="alert error"> <div class="alert error">
{{ error }} {{ error }}
<FAIcon <FAIcon
class="button-icon" class="fa-scale-110 fa-old-padding"
icon="times" icon="times"
@click="clearError" @click="clearError"
/> />

2
src/components/mfa_form/recovery_form.vue
View file

@ -55,7 +55,7 @@
<div class="alert error"> <div class="alert error">
{{ error }} {{ error }}
<FAIcon <FAIcon
class="button-icon" class="fa-scale-110 fa-old-padding"
icon="times" icon="times"
@click="clearError" @click="clearError"
/> />

2
src/components/mfa_form/totp_form.vue
View file

@ -58,7 +58,7 @@
{{ error }} {{ error }}
<FAIcon <FAIcon
size="lg" size="lg"
class="button-icon" class="fa-scale-110 fa-old-padding"
icon="times" icon="times"
@click="clearError" @click="clearError"
/> />

9
src/components/mobile_nav/mobile_nav.vue
View file

@ -16,8 +16,7 @@
@click.stop.prevent="toggleMobileSidebar()" @click.stop.prevent="toggleMobileSidebar()"
> >
<FAIcon <FAIcon
size="lg" class="fa-scale-110 fa-old-padding"
class="button-icon"
icon="bars" icon="bars"
/> />
<div <div
@ -42,8 +41,7 @@
@click.stop.prevent="openMobileNotifications()" @click.stop.prevent="openMobileNotifications()"
> >
<FAIcon <FAIcon
size="lg" class="fa-scale-110 fa-old-padding"
class="button-icon"
icon="bell" icon="bell"
/> />
<div <div
@ -68,8 +66,7 @@
@click.stop.prevent="closeMobileNotifications()" @click.stop.prevent="closeMobileNotifications()"
> >
<FAIcon <FAIcon
size="lg" class="fa-scale-110 fa-old-padding"
class="button-icon"
icon="times" icon="times"
/> />
</a> </a>

41
src/components/nav_panel/nav_panel.vue
View file

@ -9,22 +9,18 @@
> >
<FAIcon <FAIcon
fixed-width fixed-width
size="lg" class="fa-scale-110"
class="button-icon"
icon="home" icon="home"
/> />{{ $t("nav.timelines") }}
{{ $t("nav.timelines") }}
</router-link> </router-link>
</li> </li>
<li v-if="currentUser"> <li v-if="currentUser">
<router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"> <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
<FAIcon <FAIcon
fixed-width fixed-width
size="lg" class="fa-scale-110"
class="button-icon"
icon="bell" icon="bell"
/> />{{ $t("nav.interactions") }}
{{ $t("nav.interactions") }}
</router-link> </router-link>
</li> </li>
<li v-if="currentUser && pleromaChatMessagesAvailable"> <li v-if="currentUser && pleromaChatMessagesAvailable">
@ -37,22 +33,18 @@
</div> </div>
<FAIcon <FAIcon
fixed-width fixed-width
size="lg" class="fa-scale-110"
class="button-icon"
icon="comments" icon="comments"
/> />{{ $t("nav.chats") }}
{{ $t("nav.chats") }}
</router-link> </router-link>
</li> </li>
<li v-if="currentUser && currentUser.locked"> <li v-if="currentUser && currentUser.locked">
<router-link :to="{ name: 'friend-requests' }"> <router-link :to="{ name: 'friend-requests' }">
<FAIcon <FAIcon
fixed-width fixed-width
size="lg" class="fa-scale-110"
class="button-icon"
icon="user-plus" icon="user-plus"
/> />{{ $t("nav.friend_requests") }}
{{ $t("nav.friend_requests") }}
<span <span
v-if="followRequestCount > 0" v-if="followRequestCount > 0"
class="badge follow-request-count" class="badge follow-request-count"
@ -65,8 +57,7 @@
<router-link :to="{ name: 'about' }"> <router-link :to="{ name: 'about' }">
<FAIcon <FAIcon
fixed-width fixed-width
size="lg" class="fa-scale-110"
class="button-icon"
icon="info-circle" icon="info-circle"
/>{{ $t("nav.about") }} />{{ $t("nav.about") }}
</router-link> </router-link>
@ -94,7 +85,7 @@
} }
.follow-request-count { .follow-request-count {
margin: -6px 10px; vertical-align: bottom;
background-color: $fallback--bg; background-color: $fallback--bg;
background-color: var(--input, $fallback--faint); background-color: var(--input, $fallback--faint);
} }
@ -126,7 +117,8 @@
a { a {
display: block; display: block;
padding: 0.8em 0.85em; align-items: stretch;
padding: 0.9em 1em;
&:hover { &:hover {
background-color: $fallback--lightBg; background-color: $fallback--lightBg;
@ -156,13 +148,8 @@
} }
} }
.button-icon { .fa-scale-110 {
margin-left: -0.1em; margin-right: 0.8em;
margin-right: 0.2em;
}
.button-icon:before {
width: 1.1em;
} }
} }
</style> </style>

8
src/components/notification/notification.vue
View file

@ -19,7 +19,7 @@
class="unmute" class="unmute"
@click.prevent="toggleMute" @click.prevent="toggleMute"
><FAIcon ><FAIcon
class="button-icon" class="fa-scale-110 fa-old-padding"
icon="eye-slash" icon="eye-slash"
/></a> /></a>
</div> </div>
@ -137,7 +137,7 @@
href="#" href="#"
@click.prevent="toggleMute" @click.prevent="toggleMute"
><FAIcon ><FAIcon
class="button-icon" class="fa-scale-110 fa-old-padding"
icon="eye-slash" icon="eye-slash"
/></a> /></a>
</span> </span>
@ -157,13 +157,13 @@
> >
<FAIcon <FAIcon
icon="check" icon="check"
class="button-icon follow-request-accept" class="fa-scale-110 fa-old-padding follow-request-accept"
:title="$t('tool_tip.accept_follow_request')" :title="$t('tool_tip.accept_follow_request')"
@click="approveUser()" @click="approveUser()"
/> />
<FAIcon <FAIcon
icon="times" icon="times"
class="button-icon follow-request-reject" class="fa-scale-110 fa-old-padding follow-request-reject"
:title="$t('tool_tip.reject_follow_request')" :title="$t('tool_tip.reject_follow_request')"
@click="denyUser()" @click="denyUser()"
/> />

2
src/components/password_reset/password_reset.vue
View file

@ -63,7 +63,7 @@
> >
<span>{{ error }}</span> <span>{{ error }}</span>
<a <a
class="button-icon dismiss" class="fa-scale-110 fa-old-padding dismiss"
@click.prevent="dismissError()" @click.prevent="dismissError()"
> >
<FAIcon icon="times" /> <FAIcon icon="times" />

16
src/components/post_status_form/post_status_form.vue
View file

@ -37,7 +37,7 @@
> >
<span>{{ $t('post_status.scope_notice.public') }}</span> <span>{{ $t('post_status.scope_notice.public') }}</span>
<a <a
class="button-icon dismiss" class="fa-scale-110 fa-old-padding dismiss"
@click.prevent="dismissScopeNotice()" @click.prevent="dismissScopeNotice()"
> >
<FAIcon icon="times" /> <FAIcon icon="times" />
@ -49,7 +49,7 @@
> >
<span>{{ $t('post_status.scope_notice.unlisted') }}</span> <span>{{ $t('post_status.scope_notice.unlisted') }}</span>
<a <a
class="button-icon dismiss" class="fa-scale-110 fa-old-padding dismiss"
@click.prevent="dismissScopeNotice()" @click.prevent="dismissScopeNotice()"
> >
<FAIcon icon="times" /> <FAIcon icon="times" />
@ -61,7 +61,7 @@
> >
<span>{{ $t('post_status.scope_notice.private') }}</span> <span>{{ $t('post_status.scope_notice.private') }}</span>
<a <a
class="button-icon dismiss" class="fa-scale-110 fa-old-padding dismiss"
@click.prevent="dismissScopeNotice()" @click.prevent="dismissScopeNotice()"
> >
<FAIcon icon="times" /> <FAIcon icon="times" />
@ -83,7 +83,7 @@
@click.stop.prevent="togglePreview" @click.stop.prevent="togglePreview"
> >
{{ $t('post_status.preview') }} {{ $t('post_status.preview') }}
<i :class="showPreview ? 'icon-left-open' : 'icon-right-open'" /> <FAIcon :icon="showPreview ? 'chevron-left' : 'chevron-right'" />
</a> </a>
<FAIcon <FAIcon
v-show="previewLoading" v-show="previewLoading"
@ -289,8 +289,7 @@
> >
Error: {{ error }} Error: {{ error }}
<FAIcon <FAIcon
class="button-icon" class="fa-scale-110 fa-old-padding"
size="lg"
icon="times" icon="times"
@click="clearError" @click="clearError"
/> />
@ -302,7 +301,7 @@
class="media-upload-wrapper" class="media-upload-wrapper"
> >
<FAIcon <FAIcon
class="button-icon" class="fa-scale-110 fa-old-padding"
icon="times" icon="times"
@click="removeMediaFile(file)" @click="removeMediaFile(file)"
/> />
@ -389,7 +388,6 @@
} }
.preview-toggle { .preview-toggle {
display: flex;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
@ -524,7 +522,7 @@
position: relative; position: relative;
} }
.button-icon { .fa-scale-110 fa-old-padding {
position: absolute; position: absolute;
margin: 10px; margin: 10px;
margin: .75em; margin: .75em;

3
src/components/react_button/react_button.vue
View file

@ -38,9 +38,8 @@
</div> </div>
<FAIcon <FAIcon
slot="trigger" slot="trigger"
class="button-icon add-reaction-button" class="fa-scale-110 fa-old-padding add-reaction-button"
:icon="['far', 'smile-beam']" :icon="['far', 'smile-beam']"
size="lg"
:title="$t('tool_tip.add_reaction')" :title="$t('tool_tip.add_reaction')"
/> />
</Popover> </Popover>

6
src/components/reply_button/reply_button.vue
View file

@ -2,9 +2,8 @@
<div> <div>
<FAIcon <FAIcon
v-if="loggedIn" v-if="loggedIn"
class="ReplyButton button-icon -interactive" class="ReplyButton fa-scale-110 fa-old-padding -interactive"
icon="reply" icon="reply"
size="lg"
:title="$t('tool_tip.reply')" :title="$t('tool_tip.reply')"
:class="{'-active': replying}" :class="{'-active': replying}"
@click.prevent="$emit('toggle')" @click.prevent="$emit('toggle')"
@ -12,8 +11,7 @@
<FAIcon <FAIcon
v-else v-else
icon="reply" icon="reply"
size="lg" class="ReplyButton fa-scale-110 fa-old-padding"
class="ReplyButton button-icon"
:title="$t('tool_tip.reply')" :title="$t('tool_tip.reply')"
/> />
<span v-if="status.replies_count > 0"> <span v-if="status.replies_count > 0">

9
src/components/retweet_button/retweet_button.vue
View file

@ -3,9 +3,8 @@
<template v-if="visibility !== 'private' && visibility !== 'direct'"> <template v-if="visibility !== 'private' && visibility !== 'direct'">
<FAIcon <FAIcon
:class="classes" :class="classes"
class="RetweetButton button-icon -interactive" class="RetweetButton fa-scale-110 fa-old-padding -interactive"
icon="retweet" icon="retweet"
size="lg"
:spin="animated" :spin="animated"
:title="$t('tool_tip.repeat')" :title="$t('tool_tip.repeat')"
@click.prevent="retweet()" @click.prevent="retweet()"
@ -15,9 +14,8 @@
<template v-else> <template v-else>
<FAIcon <FAIcon
:class="classes" :class="classes"
class="RetweetButton button-icon" class="RetweetButton fa-scale-110 fa-old-padding"
icon="lock" icon="lock"
size="lg"
:title="$t('timeline.no_retweet_hint')" :title="$t('timeline.no_retweet_hint')"
/> />
</template> </template>
@ -25,9 +23,8 @@
<div v-else-if="!loggedIn"> <div v-else-if="!loggedIn">
<FAIcon <FAIcon
:class="classes" :class="classes"
class="button-icon" class="fa-scale-110 fa-old-padding"
icon="retweet" icon="retweet"
size="lg"
:title="$t('tool_tip.repeat')" :title="$t('tool_tip.repeat')"
/> />
<span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span> <span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span>

12
src/components/scope_selector/scope_selector.vue
View file

@ -12,8 +12,7 @@
> >
<FAIcon <FAIcon
icon="envelope" icon="envelope"
class="button-icon" class="fa-scale-110 fa-old-padding"
size="lg"
/> />
</span> </span>
<span <span
@ -25,8 +24,7 @@
> >
<FAIcon <FAIcon
icon="lock" icon="lock"
class="button-icon" class="fa-scale-110 fa-old-padding"
size="lg"
/> />
</span> </span>
<span <span
@ -38,8 +36,7 @@
> >
<FAIcon <FAIcon
icon="lock-open" icon="lock-open"
class="button-icon" class="fa-scale-110 fa-old-padding"
size="lg"
/> />
</span> </span>
<span <span
@ -51,8 +48,7 @@
> >
<FAIcon <FAIcon
icon="globe" icon="globe"
class="button-icon" class="fa-scale-110 fa-old-padding"
size="lg"
/> />
</span> </span>
</div> </div>

6
src/components/search_bar/search_bar.vue
View file

@ -8,8 +8,7 @@
:title="$t('nav.search')" :title="$t('nav.search')"
><FAIcon ><FAIcon
fixed-width fixed-width
size="lg" class="fa-scale-110 fa-old-padding"
class="button-icon"
icon="search" icon="search"
@click.prevent.stop="toggleHidden" @click.prevent.stop="toggleHidden"
/></a> /></a>
@ -34,10 +33,9 @@
</button> </button>
<span> <span>
<FAIcon <FAIcon
size="lg"
fixed-width fixed-width
icon="times" icon="times"
class="cancel-icon" class="cancel-icon fa-scale-110 fa-old-padding"
@click.prevent.stop="toggleHidden" @click.prevent.stop="toggleHidden"
/> />
</span> </span>

4
src/components/settings_modal/tabs/profile_tab.vue
View file

@ -235,7 +235,7 @@
> >
Error: {{ bannerUploadError }} Error: {{ bannerUploadError }}
<FAIcon <FAIcon
class="button-icon" class="fa-scale-110 fa-old-padding"
icon="times" icon="times"
@click="clearUploadError('banner')" @click="clearUploadError('banner')"
/> />
@ -286,7 +286,7 @@
Error: {{ backgroundUploadError }} Error: {{ backgroundUploadError }}
<FAIcon <FAIcon
size="lg" size="lg"
class="button-icon" class="fa-scale-110 fa-old-padding"
icon="times" icon="times"
@click="clearUploadError('background')" @click="clearUploadError('background')"
/> />

8
src/components/settings_modal/tabs/theme_tab/preview.vue
View file

@ -42,25 +42,25 @@
<FAIcon <FAIcon
fixed-width fixed-width
style="color: var(--cBlue)" style="color: var(--cBlue)"
class="button-icon" class="fa-scale-110 fa-old-padding"
icon="reply" icon="reply"
/> />
<FAIcon <FAIcon
fixed-width fixed-width
style="color: var(--cGreen)" style="color: var(--cGreen)"
class="button-icon" class="fa-scale-110 fa-old-padding"
icon="retweet" icon="retweet"
/> />
<FAIcon <FAIcon
fixed-width fixed-width
style="color: var(--cOrange)" style="color: var(--cOrange)"
class="button-icon" class="fa-scale-110 fa-old-padding"
icon="star" icon="star"
/> />
<FAIcon <FAIcon
fixed-width fixed-width
style="color: var(--cRed)" style="color: var(--cRed)"
class="button-icon" class="fa-scale-110 fa-old-padding"
icon="times" icon="times"
/> />
</div> </div>

38
src/components/side_drawer/side_drawer.vue
View file

@ -37,9 +37,8 @@
> >
<router-link :to="{ name: 'login' }"> <router-link :to="{ name: 'login' }">
<FAIcon <FAIcon
size="lg"
fixed-width fixed-width
class="button-icon" class="fa-scale-110 fa-old-padding"
icon="sign-in-alt" icon="sign-in-alt"
/> {{ $t("login.login") }} /> {{ $t("login.login") }}
</router-link> </router-link>
@ -50,9 +49,8 @@
> >
<router-link :to="{ name: timelinesRoute }"> <router-link :to="{ name: timelinesRoute }">
<FAIcon <FAIcon
size="lg"
fixed-width fixed-width
class="button-icon" class="fa-scale-110 fa-old-padding"
icon="home" icon="home"
/> {{ $t("nav.timelines") }} /> {{ $t("nav.timelines") }}
</router-link> </router-link>
@ -66,9 +64,8 @@
style="position: relative" style="position: relative"
> >
<FAIcon <FAIcon
size="lg"
fixed-width fixed-width
class="button-icon" class="fa-scale-110 fa-old-padding"
icon="comments" icon="comments"
/> {{ $t("nav.chats") }} /> {{ $t("nav.chats") }}
<span <span
@ -84,9 +81,8 @@
<li @click="toggleDrawer"> <li @click="toggleDrawer">
<router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"> <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
<FAIcon <FAIcon
size="lg"
fixed-width fixed-width
class="button-icon" class="fa-scale-110 fa-old-padding"
icon="bell" icon="bell"
/> {{ $t("nav.interactions") }} /> {{ $t("nav.interactions") }}
</router-link> </router-link>
@ -97,9 +93,8 @@
> >
<router-link to="/friend-requests"> <router-link to="/friend-requests">
<FAIcon <FAIcon
size="lg"
fixed-width fixed-width
class="button-icon" class="fa-scale-110 fa-old-padding"
icon="user-plus" icon="user-plus"
/> {{ $t("nav.friend_requests") }} /> {{ $t("nav.friend_requests") }}
<span <span
@ -116,9 +111,8 @@
> >
<router-link :to="{ name: 'chat' }"> <router-link :to="{ name: 'chat' }">
<FAIcon <FAIcon
size="lg"
fixed-width fixed-width
class="button-icon" class="fa-scale-110 fa-old-padding"
icon="bullhorn" icon="bullhorn"
/> {{ $t("shoutbox.title") }} /> {{ $t("shoutbox.title") }}
</router-link> </router-link>
@ -131,9 +125,8 @@
> >
<router-link :to="{ name: 'search' }"> <router-link :to="{ name: 'search' }">
<FAIcon <FAIcon
size="lg"
fixed-width fixed-width
class="button-icon" class="fa-scale-110 fa-old-padding"
icon="search" icon="search"
/> {{ $t("nav.search") }} /> {{ $t("nav.search") }}
</router-link> </router-link>
@ -144,9 +137,8 @@
> >
<router-link :to="{ name: 'who-to-follow' }"> <router-link :to="{ name: 'who-to-follow' }">
<FAIcon <FAIcon
size="lg"
fixed-width fixed-width
class="button-icon" class="fa-scale-110 fa-old-padding"
icon="user-plus" icon="user-plus"
/> {{ $t("nav.who_to_follow") }} /> {{ $t("nav.who_to_follow") }}
</router-link> </router-link>
@ -157,9 +149,8 @@
@click="openSettingsModal" @click="openSettingsModal"
> >
<FAIcon <FAIcon
size="lg"
fixed-width fixed-width
class="button-icon" class="fa-scale-110 fa-old-padding"
icon="cog" icon="cog"
/> {{ $t("settings.settings") }} /> {{ $t("settings.settings") }}
</a> </a>
@ -167,9 +158,8 @@
<li @click="toggleDrawer"> <li @click="toggleDrawer">
<router-link :to="{ name: 'about'}"> <router-link :to="{ name: 'about'}">
<FAIcon <FAIcon
size="lg"
fixed-width fixed-width
class="button-icon" class="fa-scale-110 fa-old-padding"
icon="info-circle" icon="info-circle"
/> {{ $t("nav.about") }} /> {{ $t("nav.about") }}
</router-link> </router-link>
@ -183,9 +173,8 @@
target="_blank" target="_blank"
> >
<FAIcon <FAIcon
size="lg"
fixed-width fixed-width
class="button-icon" class="fa-scale-110 fa-old-padding"
icon="tachometer-alt" icon="tachometer-alt"
/> {{ $t("nav.administration") }} /> {{ $t("nav.administration") }}
</a> </a>
@ -199,9 +188,8 @@
@click="doLogout" @click="doLogout"
> >
<FAIcon <FAIcon
size="lg"
fixed-width fixed-width
class="button-icon" class="fa-scale-110 fa-old-padding"
icon="sign-out-alt" icon="sign-out-alt"
/> {{ $t("login.logout") }} /> {{ $t("login.logout") }}
</a> </a>
@ -284,7 +272,7 @@
--lightText: var(--popoverLightText, $fallback--lightText); --lightText: var(--popoverLightText, $fallback--lightText);
--icon: var(--popoverIcon, $fallback--icon); --icon: var(--popoverIcon, $fallback--icon);
.button-icon:before { .fa-scale-110 fa-old-padding:before {
width: 1.1em; width: 1.1em;
} }
} }

24
src/components/status/status.vue
View file

@ -11,7 +11,7 @@
> >
{{ error }} {{ error }}
<span <span
class="button-icon" class="fa-scale-110 fa-old-padding"
@click="clearError" @click="clearError"
> >
<FAIcon icon="times" /> <FAIcon icon="times" />
@ -22,7 +22,7 @@
<small class="status-username"> <small class="status-username">
<FAIcon <FAIcon
v-if="muted && retweet" v-if="muted && retweet"
class="button-icon repeat-icon" class="fa-scale-110 fa-old-padding repeat-icon"
icon="retweet" icon="retweet"
/> />
<router-link :to="userProfileLink"> <router-link :to="userProfileLink">
@ -49,13 +49,12 @@
</small> </small>
<a <a
href="#" href="#"
class="unmute button-icon" class="unmute fa-scale-110 fa-old-padding"
@click.prevent="toggleMute" @click.prevent="toggleMute"
> >
<FAIcon <FAIcon
icon="eye-slash" icon="eye-slash"
class="button-icon" class="fa-scale-110 fa-old-padding"
size="lg"
/> />
</a> </a>
</div> </div>
@ -186,9 +185,8 @@
:title="status.visibility | capitalize" :title="status.visibility | capitalize"
> >
<FAIcon <FAIcon
class="button-icon" class="fa-scale-110 fa-old-padding"
:icon="visibilityIcon(status.visibility)" :icon="visibilityIcon(status.visibility)"
size="lg"
/> />
</span> </span>
<a <a
@ -199,9 +197,8 @@
title="Source" title="Source"
> >
<FAIcon <FAIcon
class="button-icon" class="fa-scale-110 fa-old-padding"
icon="external-link-square-alt" icon="external-link-square-alt"
size="lg"
/> />
</a> </a>
<a <a
@ -211,9 +208,8 @@
@click.prevent="toggleExpanded" @click.prevent="toggleExpanded"
> >
<FAIcon <FAIcon
class="button-icon" class="fa-scale-110 fa-old-padding"
icon="plus-square" icon="plus-square"
size="lg"
/> />
</a> </a>
<a <a
@ -223,8 +219,7 @@
> >
<FAIcon <FAIcon
icon="eye-slash" icon="eye-slash"
class="button-icon" class="fa-scale-110 fa-old-padding"
size="lg"
/> />
</a> </a>
</span> </span>
@ -249,9 +244,8 @@
@click.prevent="gotoOriginal(status.in_reply_to_status_id)" @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
> >
<FAIcon <FAIcon
class="button-icon" class="fa-scale-110 fa-old-padding"
icon="reply" icon="reply"
size="lg"
flip="horizontal" flip="horizontal"
/> />
<span <span

15
src/components/timeline_menu/timeline_menu.vue
View file

@ -18,8 +18,7 @@
<router-link :to="{ name: 'friends' }"> <router-link :to="{ name: 'friends' }">
<FAIcon <FAIcon
fixed-width fixed-width
size="lg" class="fa-scale-110 fa-old-padding "
class="button-icon "
icon="home" icon="home"
/>{{ $t("nav.timeline") }} />{{ $t("nav.timeline") }}
</router-link> </router-link>
@ -28,8 +27,7 @@
<router-link :to="{ name: 'bookmarks'}"> <router-link :to="{ name: 'bookmarks'}">
<FAIcon <FAIcon
fixed-width fixed-width
size="lg" class="fa-scale-110 fa-old-padding "
class="button-icon "
icon="bookmark" icon="bookmark"
/>{{ $t("nav.bookmarks") }} />{{ $t("nav.bookmarks") }}
</router-link> </router-link>
@ -38,8 +36,7 @@
<router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }"> <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
<FAIcon <FAIcon
fixed-width fixed-width
size="lg" class="fa-scale-110 fa-old-padding "
class="button-icon "
icon="envelope" icon="envelope"
/>{{ $t("nav.dms") }} />{{ $t("nav.dms") }}
</router-link> </router-link>
@ -48,8 +45,7 @@
<router-link :to="{ name: 'public-timeline' }"> <router-link :to="{ name: 'public-timeline' }">
<FAIcon <FAIcon
fixed-width fixed-width
size="lg" class="fa-scale-110 fa-old-padding "
class="button-icon "
icon="users" icon="users"
/>{{ $t("nav.public_tl") }} />{{ $t("nav.public_tl") }}
</router-link> </router-link>
@ -58,8 +54,7 @@
<router-link :to="{ name: 'public-external-timeline' }"> <router-link :to="{ name: 'public-external-timeline' }">
<FAIcon <FAIcon
fixed-width fixed-width
size="lg" class="fa-scale-110 fa-old-padding "
class="button-icon "
icon="globe" icon="globe"
/>{{ $t("nav.twkn") }} />{{ $t("nav.twkn") }}
</router-link> </router-link>

3
src/components/user_card/user_card.vue
View file

@ -22,9 +22,8 @@
/> />
<div class="user-info-avatar-link-overlay"> <div class="user-info-avatar-link-overlay">
<FAIcon <FAIcon
class="button-icon" class="fa-scale-110 fa-old-padding"
icon="search-plus" icon="search-plus"
size="lg"
/> />
</div> </div>
</a> </a>