Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases 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 {
&.svg-inline--fa.fa-lg {
display: inline-block;
padding: 0 0.3em;
.fa-scale-110 {
&.svg-inline--fa {
font-size: 1.1em;
}
}
.fa-old-padding {
&.svg-inline--fa {
padding: 0 0.3em;
}
}
@keyframes shakeError {
0% {
transform: translateX(0);

9
src/App.vue
View file

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -19,7 +19,7 @@
class="unmute"
@click.prevent="toggleMute"
><FAIcon
class="button-icon"
class="fa-scale-110 fa-old-padding"
icon="eye-slash"
/></a>
</div>
@ -137,7 +137,7 @@
href="#"
@click.prevent="toggleMute"
><FAIcon
class="button-icon"
class="fa-scale-110 fa-old-padding"
icon="eye-slash"
/></a>
</span>
@ -157,13 +157,13 @@
>
<FAIcon
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')"
@click="approveUser()"
/>
<FAIcon
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')"
@click="denyUser()"
/>

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

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

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

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

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

@ -2,9 +2,8 @@
<div>
<FAIcon
v-if="loggedIn"
class="ReplyButton button-icon -interactive"
class="ReplyButton fa-scale-110 fa-old-padding -interactive"
icon="reply"
size="lg"
:title="$t('tool_tip.reply')"
:class="{'-active': replying}"
@click.prevent="$emit('toggle')"
@ -12,8 +11,7 @@
<FAIcon
v-else
icon="reply"
size="lg"
class="ReplyButton button-icon"
class="ReplyButton fa-scale-110 fa-old-padding"
:title="$t('tool_tip.reply')"
/>
<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'">
<FAIcon
:class="classes"
class="RetweetButton button-icon -interactive"
class="RetweetButton fa-scale-110 fa-old-padding -interactive"
icon="retweet"
size="lg"
:spin="animated"
:title="$t('tool_tip.repeat')"
@click.prevent="retweet()"
@ -15,9 +14,8 @@
<template v-else>
<FAIcon
:class="classes"
class="RetweetButton button-icon"
class="RetweetButton fa-scale-110 fa-old-padding"
icon="lock"
size="lg"
:title="$t('timeline.no_retweet_hint')"
/>
</template>
@ -25,9 +23,8 @@
<div v-else-if="!loggedIn">
<FAIcon
:class="classes"
class="button-icon"
class="fa-scale-110 fa-old-padding"
icon="retweet"
size="lg"
:title="$t('tool_tip.repeat')"
/>
<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
icon="envelope"
class="button-icon"
size="lg"
class="fa-scale-110 fa-old-padding"
/>
</span>
<span
@ -25,8 +24,7 @@
>
<FAIcon
icon="lock"
class="button-icon"
size="lg"
class="fa-scale-110 fa-old-padding"
/>
</span>
<span
@ -38,8 +36,7 @@
>
<FAIcon
icon="lock-open"
class="button-icon"
size="lg"
class="fa-scale-110 fa-old-padding"
/>
</span>
<span
@ -51,8 +48,7 @@
>
<FAIcon
icon="globe"
class="button-icon"
size="lg"
class="fa-scale-110 fa-old-padding"
/>
</span>
</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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