more FA5 stuff with small related refactoring

This commit is contained in:
Henry Jameson 2020-10-19 22:35:46 +03:00
parent 3814218277
commit 8b3a7ae8c0
30 changed files with 221 additions and 101 deletions

View file

@ -106,7 +106,8 @@ button {
color: var(--btnPressedText, $fallback--text); color: var(--btnPressedText, $fallback--text);
background-color: $fallback--fg; background-color: $fallback--fg;
background-color: var(--btnPressed, $fallback--fg); background-color: var(--btnPressed, $fallback--fg);
i {
svg, i {
color: $fallback--text; color: $fallback--text;
color: var(--btnPressedText, $fallback--text); color: var(--btnPressedText, $fallback--text);
} }
@ -118,7 +119,8 @@ button {
color: var(--btnDisabledText, $fallback--text); color: var(--btnDisabledText, $fallback--text);
background-color: $fallback--fg; background-color: $fallback--fg;
background-color: var(--btnDisabled, $fallback--fg); background-color: var(--btnDisabled, $fallback--fg);
i {
svg, i {
color: $fallback--text; color: $fallback--text;
color: var(--btnDisabledText, $fallback--text); color: var(--btnDisabledText, $fallback--text);
} }
@ -131,7 +133,8 @@ button {
background-color: var(--btnToggled, $fallback--fg); background-color: var(--btnToggled, $fallback--fg);
box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset; box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
box-shadow: var(--buttonPressedShadow); box-shadow: var(--buttonPressedShadow);
i {
svg, i {
color: $fallback--text; color: $fallback--text;
color: var(--btnToggledText, $fallback--text); color: var(--btnToggledText, $fallback--text);
} }
@ -808,7 +811,6 @@ nav {
} }
.button-icon { .button-icon {
&i,
&.svg-inline--fa.fa-lg { &.svg-inline--fa.fa-lg {
display: inline-block; display: inline-block;
padding: 0 0.3em; padding: 0 0.3em;

View file

@ -1,4 +1,10 @@
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faBullhorn } from '@fortawesome/free-solid-svg-icons'
library.add(
faBullhorn
)
const chatPanel = { const chatPanel = {
props: [ 'floating' ], props: [ 'floating' ],

View file

@ -63,7 +63,7 @@
@click.stop.prevent="togglePanel" @click.stop.prevent="togglePanel"
> >
<div class="title"> <div class="title">
<i class="icon-megaphone" /> <FAIcon icon="bullhorn" />
{{ $t('shoutbox.title') }} {{ $t('shoutbox.title') }}
</div> </div>
</div> </div>

View file

@ -1,3 +1,10 @@
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
library.add(
faCircleNotch
)
const Exporter = { const Exporter = {
props: { props: {
getContent: { getContent: {

View file

@ -1,7 +1,8 @@
<template> <template>
<div class="exporter"> <div class="exporter">
<div v-if="processing"> <div v-if="processing">
<i class="icon-spin4 animate-spin exporter-processing" /> <FAIcon icon="circle-notch" size="lg" spin />
<span>{{ processingMessage }}</span> <span>{{ processingMessage }}</span>
</div> </div>
<button <button
@ -19,7 +20,6 @@
<style lang="scss"> <style lang="scss">
.exporter { .exporter {
&-processing { &-processing {
font-size: 1.5em;
margin: 0.25em; margin: 0.25em;
} }
} }

View file

@ -1,8 +1,24 @@
import Popover from '../popover/popover.vue' import Popover from '../popover/popover.vue'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { faEllipsisH } from '@fortawesome/free-solid-svg-icons' import {
faEllipsisH,
faBookmark,
faEyeSlash,
faThumbtack,
faShareAlt
} from '@fortawesome/free-solid-svg-icons'
import {
faBookmark as faBookmarkReg,
} from '@fortawesome/free-regular-svg-icons'
library.add(faEllipsisH) library.add(
faEllipsisH,
faBookmark,
faBookmarkReg,
faEyeSlash,
faThumbtack,
faShareAlt
)
const ExtraButtons = { const ExtraButtons = {
props: [ 'status' ], props: [ 'status' ],

View file

@ -15,14 +15,14 @@
class="dropdown-item dropdown-item-icon" class="dropdown-item dropdown-item-icon"
@click.prevent="muteConversation" @click.prevent="muteConversation"
> >
<i class="icon-eye-off" /><span>{{ $t("status.mute_conversation") }}</span> <FAIcon size="md" fixed-width icon="eye-slash" /><span>{{ $t("status.mute_conversation") }}</span>
</button> </button>
<button <button
v-if="canMute && status.thread_muted" v-if="canMute && status.thread_muted"
class="dropdown-item dropdown-item-icon" class="dropdown-item dropdown-item-icon"
@click.prevent="unmuteConversation" @click.prevent="unmuteConversation"
> >
<i class="icon-eye-off" /><span>{{ $t("status.unmute_conversation") }}</span> <FAIcon size="md" fixed-width icon="eye-slash" /><span>{{ $t("status.unmute_conversation") }}</span>
</button> </button>
<button <button
v-if="!status.pinned && canPin" v-if="!status.pinned && canPin"
@ -30,7 +30,7 @@
@click.prevent="pinStatus" @click.prevent="pinStatus"
@click="close" @click="close"
> >
<i class="icon-pin" /><span>{{ $t("status.pin") }}</span> <FAIcon size="md" fixed-width icon="thumbtack" /><span>{{ $t("status.pin") }}</span>
</button> </button>
<button <button
v-if="status.pinned && canPin" v-if="status.pinned && canPin"
@ -38,7 +38,7 @@
@click.prevent="unpinStatus" @click.prevent="unpinStatus"
@click="close" @click="close"
> >
<i class="icon-pin" /><span>{{ $t("status.unpin") }}</span> <FAIcon size="md" fixed-width icon="thumbtack" /><span>{{ $t("status.unpin") }}</span>
</button> </button>
<button <button
v-if="!status.bookmarked" v-if="!status.bookmarked"
@ -46,7 +46,7 @@
@click.prevent="bookmarkStatus" @click.prevent="bookmarkStatus"
@click="close" @click="close"
> >
<i class="icon-bookmark-empty" /><span>{{ $t("status.bookmark") }}</span> <FAIcon size="md" fixed-width :icon="['far', 'bookmark']" /><span>{{ $t("status.bookmark") }}</span>
</button> </button>
<button <button
v-if="status.bookmarked" v-if="status.bookmarked"
@ -54,7 +54,7 @@
@click.prevent="unbookmarkStatus" @click.prevent="unbookmarkStatus"
@click="close" @click="close"
> >
<i class="icon-bookmark" /><span>{{ $t("status.unbookmark") }}</span> <FAIcon size="md" fixed-width icon="bookmark" /><span>{{ $t("status.unbookmark") }}</span>
</button> </button>
<button <button
v-if="canDelete" v-if="canDelete"
@ -62,23 +62,24 @@
@click.prevent="deleteStatus" @click.prevent="deleteStatus"
@click="close" @click="close"
> >
<i class="icon-cancel" /><span>{{ $t("status.delete") }}</span> <FAIcon size="md" fixed-width icon="times" /><span>{{ $t("status.delete") }}</span>
</button> </button>
<button <button
class="dropdown-item dropdown-item-icon" class="dropdown-item dropdown-item-icon"
@click.prevent="copyLink" @click.prevent="copyLink"
@click="close" @click="close"
> >
<i class="icon-share" /><span>{{ $t("status.copy_link") }}</span> <FAIcon size="md" fixed-width icon="share-alt" /><span>{{ $t("status.copy_link") }}</span>
</button> </button>
</div> </div>
</div> </div>
<FAIcon <span slot="trigger">
slot="trigger" <FAIcon
class="button-icon" class="ExtraButtons button-icon"
icon="ellipsis-h" icon="ellipsis-h"
size="lg" size="md"
/> />
</span>
</Popover> </Popover>
</template> </template>
@ -87,8 +88,9 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.icon-ellipsis { .ExtraButtons {
cursor: pointer; cursor: pointer;
position: static;
&:hover, &:hover,
.extra-button-popover.open & { .extra-button-popover.open & {

View file

@ -9,8 +9,9 @@
> >
<FAIcon <FAIcon
v-if="uploading" v-if="uploading"
class="progress-icon animate-spin" class="progress-icon"
icon="circle-notch" icon="circle-notch"
spin
/> />
<FAIcon <FAIcon
v-if="!uploading" v-if="!uploading"

View file

@ -7,6 +7,28 @@ import Timeago from '../timeago/timeago.vue'
import { isStatusNotification } from '../../services/notification_utils/notification_utils.js' import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js' import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faCheck,
faTimes,
faStar,
faRetweet,
faUserPlus,
faEyeSlash,
faUser,
faSuitcaseRolling
} from '@fortawesome/free-solid-svg-icons'
library.add(
faCheck,
faTimes,
faStar,
faRetweet,
faUserPlus,
faUser,
faEyeSlash,
faSuitcaseRolling
)
const Notification = { const Notification = {
data () { data () {

View file

@ -1,3 +1,5 @@
@import '../../_variables.scss';
// TODO Copypaste from Status, should unify it somehow // TODO Copypaste from Status, should unify it somehow
.Notification { .Notification {
&.-muted { &.-muted {
@ -49,4 +51,34 @@
display: block; display: block;
} }
} }
.type-icon {
margin: 0 0.1em;
}
&.-type--repeat .type-icon {
color: $fallback--cGreen;
color: var(--cGreen, $fallback--cGreen);
}
&.-type--follow .type-icon {
color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue);
}
&.-type--follow-request .type-icon {
color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue);
}
&.-type--like .type-icon {
color: orange;
color: $fallback--cOrange;
color: var(--cOrange, $fallback--cOrange);
}
&.-type--move .type-icon {
color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue);
}
} }

View file

@ -1,5 +1,5 @@
<template> <template>
<status <Status
v-if="notification.type === 'mention'" v-if="notification.type === 'mention'"
:compact="true" :compact="true"
:statusoid="notification.status" :statusoid="notification.status"
@ -18,12 +18,12 @@
href="#" href="#"
class="unmute" class="unmute"
@click.prevent="toggleMute" @click.prevent="toggleMute"
><i class="button-icon icon-eye-off" /></a> ><FAIcon class="button-icon" icon="eye-slash" /></a>
</div> </div>
<div <div
v-else v-else
class="non-mention" class="Notification non-mention"
:class="[userClass, { highlighted: userStyle }]" :class="[userClass, { highlighted: userStyle }, '-type--' + notification.type]"
:style="[ userStyle ]" :style="[ userStyle ]"
> >
<a <a
@ -60,26 +60,26 @@
:title="'@'+notification.from_profile.screen_name" :title="'@'+notification.from_profile.screen_name"
>{{ notification.from_profile.name }}</span> >{{ notification.from_profile.name }}</span>
<span v-if="notification.type === 'like'"> <span v-if="notification.type === 'like'">
<i class="fa icon-star lit" /> <FAIcon class="type-icon" icon="star" />
<small>{{ $t('notifications.favorited_you') }}</small> <small>{{ $t('notifications.favorited_you') }}</small>
</span> </span>
<span v-if="notification.type === 'repeat'"> <span v-if="notification.type === 'repeat'">
<i <FAIcon
class="fa icon-retweet lit" class="type-icon" icon="retweet"
:title="$t('tool_tip.repeat')" :title="$t('tool_tip.repeat')"
/> />
<small>{{ $t('notifications.repeated_you') }}</small> <small>{{ $t('notifications.repeated_you') }}</small>
</span> </span>
<span v-if="notification.type === 'follow'"> <span v-if="notification.type === 'follow'">
<i class="fa icon-user-plus lit" /> <FAIcon class="type-icon" icon="user-plus" />
<small>{{ $t('notifications.followed_you') }}</small> <small>{{ $t('notifications.followed_you') }}</small>
</span> </span>
<span v-if="notification.type === 'follow_request'"> <span v-if="notification.type === 'follow_request'">
<i class="fa icon-user lit" /> <FAIcon class="type-icon" icon="user" />
<small>{{ $t('notifications.follow_request') }}</small> <small>{{ $t('notifications.follow_request') }}</small>
</span> </span>
<span v-if="notification.type === 'move'"> <span v-if="notification.type === 'move'">
<i class="fa icon-arrow-curved lit" /> <FAIcon class="type-icon" icon="suitcase-rolling" />
<small>{{ $t('notifications.migrated_to') }}</small> <small>{{ $t('notifications.migrated_to') }}</small>
</span> </span>
<span v-if="notification.type === 'pleroma:emoji_reaction'"> <span v-if="notification.type === 'pleroma:emoji_reaction'">
@ -120,7 +120,7 @@
v-if="needMute" v-if="needMute"
href="#" href="#"
@click.prevent="toggleMute" @click.prevent="toggleMute"
><i class="button-icon icon-eye-off" /></a> ><FAIcon class="button-icon" icon="eye-slash" /></a>
</span> </span>
<div <div
v-if="notification.type === 'follow' || notification.type === 'follow_request'" v-if="notification.type === 'follow' || notification.type === 'follow_request'"
@ -136,13 +136,15 @@
v-if="notification.type === 'follow_request'" v-if="notification.type === 'follow_request'"
style="white-space: nowrap;" style="white-space: nowrap;"
> >
<i <FAIcon
class="icon-ok button-icon follow-request-accept" icon="check"
class="button-icon follow-request-accept"
:title="$t('tool_tip.accept_follow_request')" :title="$t('tool_tip.accept_follow_request')"
@click="approveUser()" @click="approveUser()"
/> />
<i <FAIcon
class="icon-cancel button-icon follow-request-reject" icon="times"
class="button-icon follow-request-reject"
:title="$t('tool_tip.reject_follow_request')" :title="$t('tool_tip.reject_follow_request')"
@click="denyUser()" @click="denyUser()"
/> />

View file

@ -6,6 +6,12 @@ import {
filteredNotificationsFromStore, filteredNotificationsFromStore,
unseenNotificationsFromStore unseenNotificationsFromStore
} from '../../services/notification_utils/notification_utils.js' } from '../../services/notification_utils/notification_utils.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
library.add(
faCircleNotch
)
const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30 const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30

View file

@ -158,37 +158,6 @@
margin-right: .2em; margin-right: .2em;
} }
.icon-retweet.lit {
color: $fallback--cGreen;
color: var(--cGreen, $fallback--cGreen);
}
.icon-user.lit {
color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue);
}
.icon-user-plus.lit {
color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue);
}
.icon-reply.lit {
color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue);
}
.icon-star.lit {
color: orange;
color: $fallback--cOrange;
color: var(--cOrange, $fallback--cOrange);
}
.icon-arrow-curved.lit {
color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue);
}
.status-content { .status-content {
margin: 0; margin: 0;
max-height: 300px; max-height: 300px;

View file

@ -61,7 +61,7 @@
v-else v-else
class="new-status-notification text-center panel-footer" class="new-status-notification text-center panel-footer"
> >
<i class="icon-spin3 animate-spin" /> <FAIcon icon="circle-notch" spin size="lg"/>
</div> </div>
</div> </div>
</div> </div>

View file

@ -1,12 +1,21 @@
<template> <template>
<div class="panel-loading"> <div class="panel-loading">
<span class="loading-text"> <span class="loading-text">
<i class="icon-spin4 animate-spin" /> <FAIcon icon="circle-notch" spin size="3x"/>
{{ $t('general.loading') }} {{ $t('general.loading') }}
</span> </span>
</div> </div>
</template> </template>
<script>
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
library.add(
faCircleNotch
)
</script>
<style lang="scss"> <style lang="scss">
@import 'src/_variables.scss'; @import 'src/_variables.scss';
@ -18,8 +27,7 @@
font-size: 2em; font-size: 2em;
color: $fallback--text; color: $fallback--text;
color: var(--text, $fallback--text); color: var(--text, $fallback--text);
.loading-text i { .loading-text svg {
font-size: 3em;
line-height: 0; line-height: 0;
vertical-align: middle; vertical-align: middle;
color: $fallback--text; color: $fallback--text;

View file

@ -27,7 +27,7 @@
<script src="./popover.js" /> <script src="./popover.js" />
<style lang=scss> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.popover { .popover {
@ -96,7 +96,7 @@
&-icon { &-icon {
padding-left: 0.5rem; padding-left: 0.5rem;
i { svg {
margin-right: 0.25rem; margin-right: 0.25rem;
color: var(--menuPopoverIcon, $fallback--icon) color: var(--menuPopoverIcon, $fallback--icon)
} }
@ -111,7 +111,7 @@
--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint); --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText); --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
--icon: var(--selectedMenuPopoverIcon, $fallback--icon); --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
i { svg {
color: var(--selectedMenuPopoverIcon, $fallback--icon); color: var(--selectedMenuPopoverIcon, $fallback--icon);
} }
} }

View file

@ -2,7 +2,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
import { import {
faEnvelope, faEnvelope,
faLock, faLock,
faLockOpen, faUnlock,
faGlobeEurope faGlobeEurope
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
@ -10,7 +10,7 @@ library.add(
faEnvelope, faEnvelope,
faGlobeEurope, faGlobeEurope,
faLock, faLock,
faLockOpen faUnlock
) )
const ScopeSelector = { const ScopeSelector = {

View file

@ -28,7 +28,7 @@
:title="$t('post_status.scope.unlisted')" :title="$t('post_status.scope.unlisted')"
@click="changeVis('unlisted')" @click="changeVis('unlisted')"
> >
<FAIcon icon="lock-open" class="button-icon" size="lg" /> <FAIcon icon="unlock" class="button-icon" size="lg" />
</span> </span>
<span <span
v-if="showPublic" v-if="showPublic"

View file

@ -2,6 +2,12 @@ import FollowCard from '../follow_card/follow_card.vue'
import Conversation from '../conversation/conversation.vue' import Conversation from '../conversation/conversation.vue'
import Status from '../status/status.vue' import Status from '../status/status.vue'
import map from 'lodash/map' import map from 'lodash/map'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
library.add(
faCircleNotch
)
const Search = { const Search = {
components: { components: {

View file

@ -24,7 +24,7 @@
v-if="loading" v-if="loading"
class="text-center loading-icon" class="text-center loading-icon"
> >
<i class="icon-spin3 animate-spin" /> <FAIcon icon="circle-notch" spin size="lg"/>
</div> </div>
<div v-else-if="loaded"> <div v-else-if="loaded">
<div class="search-nav-heading"> <div class="search-nav-heading">

View file

@ -21,7 +21,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
import { import {
faEnvelope, faEnvelope,
faLock, faLock,
faLockOpen, faUnlock,
faGlobeEurope, faGlobeEurope,
faTimes, faTimes,
faRetweet, faRetweet,
@ -35,22 +35,18 @@ import {
faEye, faEye,
faThumbtack faThumbtack
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
import {
faStar as faStarRegular
} from '@fortawesome/free-regular-svg-icons'
library.add( library.add(
faEnvelope, faEnvelope,
faGlobeEurope, faGlobeEurope,
faLock, faLock,
faLockOpen, faUnlock,
faTimes, faTimes,
faRetweet, faRetweet,
faReply, faReply,
faExternalLinkSquareAlt, faExternalLinkSquareAlt,
faPlusSquare, faPlusSquare,
faStar, faStar,
faStarRegular,
faSmileBeam, faSmileBeam,
faEllipsisH, faEllipsisH,
faEyeSlash, faEyeSlash,
@ -270,7 +266,7 @@ const Status = {
case 'private': case 'private':
return 'lock' return 'lock'
case 'unlisted': case 'unlisted':
return 'lock-open' return 'unlock'
case 'direct': case 'direct':
return 'envelope' return 'envelope'
default: default:

View file

@ -1,4 +1,10 @@
import { find } from 'lodash' import { find } from 'lodash'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
library.add(
faCircleNotch
)
const StatusPopover = { const StatusPopover = {
name: 'StatusPopover', name: 'StatusPopover',

View file

@ -27,7 +27,7 @@
v-else v-else
class="status-preview-no-content" class="status-preview-no-content"
> >
<i class="icon-spin4 animate-spin" /> <FAIcon icon="circle-notch" spin size="2x"/>
</div> </div>
</div> </div>
</Popover> </Popover>

View file

@ -3,6 +3,12 @@ import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.se
import Conversation from '../conversation/conversation.vue' import Conversation from '../conversation/conversation.vue'
import TimelineMenu from '../timeline_menu/timeline_menu.vue' import TimelineMenu from '../timeline_menu/timeline_menu.vue'
import { throttle, keyBy } from 'lodash' import { throttle, keyBy } from 'lodash'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
library.add(
faCircleNotch
)
export const getExcludedStatusIdsByPinning = (statuses, pinnedStatusIds) => { export const getExcludedStatusIdsByPinning = (statuses, pinnedStatusIds) => {
const ids = [] const ids = []

View file

@ -92,7 +92,7 @@
v-else v-else
class="new-status-notification text-center panel-footer" class="new-status-notification text-center panel-footer"
> >
<i class="icon-spin3 animate-spin" /> <FAIcon icon="circle-notch" spin size="lg"/>
</div> </div>
</div> </div>
</div> </div>

View file

@ -6,6 +6,22 @@ import ModerationTools from '../moderation_tools/moderation_tools.vue'
import AccountActions from '../account_actions/account_actions.vue' import AccountActions from '../account_actions/account_actions.vue'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faBell,
faRss,
faChevronDown,
faSearchPlus,
faExternalLinkAlt
} from '@fortawesome/free-solid-svg-icons'
library.add(
faRss,
faBell,
faChevronDown,
faSearchPlus,
faExternalLinkAlt
)
export default { export default {
props: [ props: [

View file

@ -21,7 +21,7 @@
:user="user" :user="user"
/> />
<div class="user-info-avatar-link-overlay"> <div class="user-info-avatar-link-overlay">
<i class="button-icon icon-zoom-in" /> <FAIcon class="button-icon" icon="search-plus" size="lg" />
</div> </div>
</a> </a>
<router-link <router-link
@ -55,7 +55,7 @@
:href="user.statusnet_profile_url" :href="user.statusnet_profile_url"
target="_blank" target="_blank"
> >
<i class="icon-link-ext usersettings" /> <FAIcon class="usersettings" icon="external-link-alt" />
</a> </a>
<AccountActions <AccountActions
v-if="isOtherUser && loggedIn" v-if="isOtherUser && loggedIn"
@ -85,7 +85,9 @@
bot bot
</span> </span>
</template> </template>
<span v-if="user.locked"><i class="icon icon-lock" /></span> <span v-if="user.locked">
<FAIcon class="lock-icon" icon="lock" size="sm"/>
</span>
<span <span
v-if="!mergedConfig.hideUserStats && !hideBio" v-if="!mergedConfig.hideUserStats && !hideBio"
class="dailyAvg" class="dailyAvg"
@ -133,7 +135,7 @@
<option value="striped">Striped bg</option> <option value="striped">Striped bg</option>
<option value="side">Side stripe</option> <option value="side">Side stripe</option>
</select> </select>
<i class="icon-down-open" /> <FAIcon class="icon-down-open" icon="chevron-down" />
</label> </label>
</div> </div>
</div> </div>
@ -150,7 +152,7 @@
:click="subscribeUser" :click="subscribeUser"
:title="$t('user_card.subscribe')" :title="$t('user_card.subscribe')"
> >
<i class="icon-bell-alt" /> <FAIcon icon="bell" />
</ProgressButton> </ProgressButton>
<ProgressButton <ProgressButton
v-else v-else
@ -158,7 +160,11 @@
:click="unsubscribeUser" :click="unsubscribeUser"
:title="$t('user_card.unsubscribe')" :title="$t('user_card.unsubscribe')"
> >
<i class="icon-bell-ringing-o" /> <FALayers>
<FAIcon icon="rss" transform="left-5 shrink-6 up-3 rotate-20" flip="horizontal"/>
<FAIcon icon="rss" transform="right-5 shrink-6 up-3 rotate-20"/>
<FAIcon icon="bell" />
</FALayers>
</ProgressButton> </ProgressButton>
</template> </template>
</div> </div>
@ -388,7 +394,7 @@
opacity: 0; opacity: 0;
transition: opacity .2s ease; transition: opacity .2s ease;
i { svg {
color: #FFF; color: #FFF;
} }
} }
@ -447,6 +453,10 @@
font-weight: light; font-weight: light;
font-size: 15px; font-size: 15px;
.lock-icon {
margin-left: 0.5em;
}
.user-screen-name { .user-screen-name {
min-width: 1px; min-width: 1px;
flex: 0 1 auto; flex: 0 1 auto;
@ -508,7 +518,7 @@
padding-bottom: 0; padding-bottom: 0;
flex: 1 0 auto; flex: 1 0 auto;
} }
.userHighlightSel.select i { .userHighlightSel.select svg {
line-height: 22px; line-height: 22px;
} }

View file

@ -1,3 +1,9 @@
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
library.add(
faCircleNotch
)
const UserListPopover = { const UserListPopover = {
name: 'UserListPopover', name: 'UserListPopover',

View file

@ -31,7 +31,7 @@
</div> </div>
</div> </div>
<div v-else> <div v-else>
<i class="icon-spin4 animate-spin" /> <FAIcon icon="circle-notch" spin size="3x"/>
</div> </div>
</div> </div>
</Popover> </Popover>

View file

@ -33,7 +33,7 @@ import VueClickOutside from 'v-click-outside'
import PortalVue from 'portal-vue' import PortalVue from 'portal-vue'
import VBodyScrollLock from './directives/body_scroll_lock' import VBodyScrollLock from './directives/body_scroll_lock'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
import afterStoreSetup from './boot/after_store.js' import afterStoreSetup from './boot/after_store.js'
@ -48,6 +48,7 @@ Vue.use(PortalVue)
Vue.use(VBodyScrollLock) Vue.use(VBodyScrollLock)
Vue.component('FAIcon', FontAwesomeIcon) Vue.component('FAIcon', FontAwesomeIcon)
Vue.component('FALayers', FontAwesomeLayers)
const i18n = new VueI18n({ const i18n = new VueI18n({
// By default, use the browser locale, we will update it if neccessary // By default, use the browser locale, we will update it if neccessary