From 8b3a7ae8c0fec5f79971745f64aeb3c5ac470894 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 19 Oct 2020 22:35:46 +0300
Subject: [PATCH] more FA5 stuff with small related refactoring
---
src/App.scss | 10 +++---
src/components/chat_panel/chat_panel.js | 6 ++++
src/components/chat_panel/chat_panel.vue | 2 +-
src/components/exporter/exporter.js | 7 ++++
src/components/exporter/exporter.vue | 4 +--
src/components/extra_buttons/extra_buttons.js | 20 ++++++++++--
.../extra_buttons/extra_buttons.vue | 32 ++++++++++---------
src/components/media_upload/media_upload.vue | 3 +-
src/components/notification/notification.js | 22 +++++++++++++
src/components/notification/notification.scss | 32 +++++++++++++++++++
src/components/notification/notification.vue | 32 ++++++++++---------
src/components/notifications/notifications.js | 6 ++++
.../notifications/notifications.scss | 31 ------------------
.../notifications/notifications.vue | 2 +-
.../panel_loading/panel_loading.vue | 14 ++++++--
src/components/popover/popover.vue | 6 ++--
.../scope_selector/scope_selector.js | 4 +--
.../scope_selector/scope_selector.vue | 2 +-
src/components/search/search.js | 6 ++++
src/components/search/search.vue | 2 +-
src/components/status/status.js | 10 ++----
.../status_popover/status_popover.js | 6 ++++
.../status_popover/status_popover.vue | 2 +-
src/components/timeline/timeline.js | 6 ++++
src/components/timeline/timeline.vue | 2 +-
src/components/user_card/user_card.js | 16 ++++++++++
src/components/user_card/user_card.vue | 26 ++++++++++-----
.../user_list_popover/user_list_popover.js | 6 ++++
.../user_list_popover/user_list_popover.vue | 2 +-
src/main.js | 3 +-
30 files changed, 221 insertions(+), 101 deletions(-)
diff --git a/src/App.scss b/src/App.scss
index d34698e2..10969abb 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -106,7 +106,8 @@ button {
color: var(--btnPressedText, $fallback--text);
background-color: $fallback--fg;
background-color: var(--btnPressed, $fallback--fg);
- i {
+
+ svg, i {
color: $fallback--text;
color: var(--btnPressedText, $fallback--text);
}
@@ -118,7 +119,8 @@ button {
color: var(--btnDisabledText, $fallback--text);
background-color: $fallback--fg;
background-color: var(--btnDisabled, $fallback--fg);
- i {
+
+ svg, i {
color: $fallback--text;
color: var(--btnDisabledText, $fallback--text);
}
@@ -131,7 +133,8 @@ button {
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: var(--buttonPressedShadow);
- i {
+
+ svg, i {
color: $fallback--text;
color: var(--btnToggledText, $fallback--text);
}
@@ -808,7 +811,6 @@ nav {
}
.button-icon {
- &i,
&.svg-inline--fa.fa-lg {
display: inline-block;
padding: 0 0.3em;
diff --git a/src/components/chat_panel/chat_panel.js b/src/components/chat_panel/chat_panel.js
index f2e3adf0..3dfec6df 100644
--- a/src/components/chat_panel/chat_panel.js
+++ b/src/components/chat_panel/chat_panel.js
@@ -1,4 +1,10 @@
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 = {
props: [ 'floating' ],
diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
index 570435e7..b64535b0 100644
--- a/src/components/chat_panel/chat_panel.vue
+++ b/src/components/chat_panel/chat_panel.vue
@@ -63,7 +63,7 @@
@click.stop.prevent="togglePanel"
>
<div class="title">
- <i class="icon-megaphone" />
+ <FAIcon icon="bullhorn" />
{{ $t('shoutbox.title') }}
</div>
</div>
diff --git a/src/components/exporter/exporter.js b/src/components/exporter/exporter.js
index 8f507416..51912ac3 100644
--- a/src/components/exporter/exporter.js
+++ b/src/components/exporter/exporter.js
@@ -1,3 +1,10 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+ faCircleNotch
+)
+
const Exporter = {
props: {
getContent: {
diff --git a/src/components/exporter/exporter.vue b/src/components/exporter/exporter.vue
index f5126dc1..156db9a3 100644
--- a/src/components/exporter/exporter.vue
+++ b/src/components/exporter/exporter.vue
@@ -1,7 +1,8 @@
<template>
<div class="exporter">
<div v-if="processing">
- <i class="icon-spin4 animate-spin exporter-processing" />
+ <FAIcon icon="circle-notch" size="lg" spin />
+
<span>{{ processingMessage }}</span>
</div>
<button
@@ -19,7 +20,6 @@
<style lang="scss">
.exporter {
&-processing {
- font-size: 1.5em;
margin: 0.25em;
}
}
diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index 6892dabc..f325b2b4 100644
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -1,8 +1,24 @@
import Popover from '../popover/popover.vue'
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 = {
props: [ 'status' ],
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 0af264a5..1889eaed 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -15,14 +15,14 @@
class="dropdown-item dropdown-item-icon"
@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
v-if="canMute && status.thread_muted"
class="dropdown-item dropdown-item-icon"
@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
v-if="!status.pinned && canPin"
@@ -30,7 +30,7 @@
@click.prevent="pinStatus"
@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
v-if="status.pinned && canPin"
@@ -38,7 +38,7 @@
@click.prevent="unpinStatus"
@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
v-if="!status.bookmarked"
@@ -46,7 +46,7 @@
@click.prevent="bookmarkStatus"
@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
v-if="status.bookmarked"
@@ -54,7 +54,7 @@
@click.prevent="unbookmarkStatus"
@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
v-if="canDelete"
@@ -62,23 +62,24 @@
@click.prevent="deleteStatus"
@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
class="dropdown-item dropdown-item-icon"
@click.prevent="copyLink"
@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>
</div>
</div>
- <FAIcon
- slot="trigger"
- class="button-icon"
- icon="ellipsis-h"
- size="lg"
- />
+ <span slot="trigger">
+ <FAIcon
+ class="ExtraButtons button-icon"
+ icon="ellipsis-h"
+ size="md"
+ />
+ </span>
</Popover>
</template>
@@ -87,8 +88,9 @@
<style lang="scss">
@import '../../_variables.scss';
-.icon-ellipsis {
+.ExtraButtons {
cursor: pointer;
+ position: static;
&:hover,
.extra-button-popover.open & {
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index 38e00702..15b2b8e4 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -9,8 +9,9 @@
>
<FAIcon
v-if="uploading"
- class="progress-icon animate-spin"
+ class="progress-icon"
icon="circle-notch"
+ spin
/>
<FAIcon
v-if="!uploading"
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index bb906b50..4aa9affd 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -7,6 +7,28 @@ import Timeago from '../timeago/timeago.vue'
import { isStatusNotification } from '../../services/notification_utils/notification_utils.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 { 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 = {
data () {
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
index d0e63d81..f5905560 100644
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@@ -1,3 +1,5 @@
+@import '../../_variables.scss';
+
// TODO Copypaste from Status, should unify it somehow
.Notification {
&.-muted {
@@ -49,4 +51,34 @@
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);
+ }
}
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 7fac3840..857727a4 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -1,5 +1,5 @@
<template>
- <status
+ <Status
v-if="notification.type === 'mention'"
:compact="true"
:statusoid="notification.status"
@@ -18,12 +18,12 @@
href="#"
class="unmute"
@click.prevent="toggleMute"
- ><i class="button-icon icon-eye-off" /></a>
+ ><FAIcon class="button-icon" icon="eye-slash" /></a>
</div>
<div
v-else
- class="non-mention"
- :class="[userClass, { highlighted: userStyle }]"
+ class="Notification non-mention"
+ :class="[userClass, { highlighted: userStyle }, '-type--' + notification.type]"
:style="[ userStyle ]"
>
<a
@@ -60,26 +60,26 @@
:title="'@'+notification.from_profile.screen_name"
>{{ notification.from_profile.name }}</span>
<span v-if="notification.type === 'like'">
- <i class="fa icon-star lit" />
+ <FAIcon class="type-icon" icon="star" />
<small>{{ $t('notifications.favorited_you') }}</small>
</span>
<span v-if="notification.type === 'repeat'">
- <i
- class="fa icon-retweet lit"
+ <FAIcon
+ class="type-icon" icon="retweet"
:title="$t('tool_tip.repeat')"
/>
<small>{{ $t('notifications.repeated_you') }}</small>
</span>
<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>
</span>
<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>
</span>
<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>
</span>
<span v-if="notification.type === 'pleroma:emoji_reaction'">
@@ -120,7 +120,7 @@
v-if="needMute"
href="#"
@click.prevent="toggleMute"
- ><i class="button-icon icon-eye-off" /></a>
+ ><FAIcon class="button-icon" icon="eye-slash" /></a>
</span>
<div
v-if="notification.type === 'follow' || notification.type === 'follow_request'"
@@ -136,13 +136,15 @@
v-if="notification.type === 'follow_request'"
style="white-space: nowrap;"
>
- <i
- class="icon-ok button-icon follow-request-accept"
+ <FAIcon
+ icon="check"
+ class="button-icon follow-request-accept"
:title="$t('tool_tip.accept_follow_request')"
@click="approveUser()"
/>
- <i
- class="icon-cancel button-icon follow-request-reject"
+ <FAIcon
+ icon="times"
+ class="button-icon follow-request-reject"
:title="$t('tool_tip.reject_follow_request')"
@click="denyUser()"
/>
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index d951e2a8..4b479e13 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -6,6 +6,12 @@ import {
filteredNotificationsFromStore,
unseenNotificationsFromStore
} 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
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index c6b2a5b5..682ae127 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -158,37 +158,6 @@
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 {
margin: 0;
max-height: 300px;
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index d477a41b..57972854 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -61,7 +61,7 @@
v-else
class="new-status-notification text-center panel-footer"
>
- <i class="icon-spin3 animate-spin" />
+ <FAIcon icon="circle-notch" spin size="lg"/>
</div>
</div>
</div>
diff --git a/src/components/panel_loading/panel_loading.vue b/src/components/panel_loading/panel_loading.vue
index 4efebb3c..9bf3ab32 100644
--- a/src/components/panel_loading/panel_loading.vue
+++ b/src/components/panel_loading/panel_loading.vue
@@ -1,12 +1,21 @@
<template>
<div class="panel-loading">
<span class="loading-text">
- <i class="icon-spin4 animate-spin" />
+ <FAIcon icon="circle-notch" spin size="3x"/>
{{ $t('general.loading') }}
</span>
</div>
</template>
+<script>
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+ faCircleNotch
+)
+</script>
+
<style lang="scss">
@import 'src/_variables.scss';
@@ -18,8 +27,7 @@
font-size: 2em;
color: $fallback--text;
color: var(--text, $fallback--text);
- .loading-text i {
- font-size: 3em;
+ .loading-text svg {
line-height: 0;
vertical-align: middle;
color: $fallback--text;
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 5c99c509..9b8680e5 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -27,7 +27,7 @@
<script src="./popover.js" />
-<style lang=scss>
+<style lang="scss">
@import '../../_variables.scss';
.popover {
@@ -96,7 +96,7 @@
&-icon {
padding-left: 0.5rem;
- i {
+ svg {
margin-right: 0.25rem;
color: var(--menuPopoverIcon, $fallback--icon)
}
@@ -111,7 +111,7 @@
--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
- i {
+ svg {
color: var(--selectedMenuPopoverIcon, $fallback--icon);
}
}
diff --git a/src/components/scope_selector/scope_selector.js b/src/components/scope_selector/scope_selector.js
index 34efdc00..ddb20ff2 100644
--- a/src/components/scope_selector/scope_selector.js
+++ b/src/components/scope_selector/scope_selector.js
@@ -2,7 +2,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
import {
faEnvelope,
faLock,
- faLockOpen,
+ faUnlock,
faGlobeEurope
} from '@fortawesome/free-solid-svg-icons'
@@ -10,7 +10,7 @@ library.add(
faEnvelope,
faGlobeEurope,
faLock,
- faLockOpen
+ faUnlock
)
const ScopeSelector = {
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index 5b9abd64..ddd89422 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -28,7 +28,7 @@
:title="$t('post_status.scope.unlisted')"
@click="changeVis('unlisted')"
>
- <FAIcon icon="lock-open" class="button-icon" size="lg" />
+ <FAIcon icon="unlock" class="button-icon" size="lg" />
</span>
<span
v-if="showPublic"
diff --git a/src/components/search/search.js b/src/components/search/search.js
index 8e903052..3eb92fc1 100644
--- a/src/components/search/search.js
+++ b/src/components/search/search.js
@@ -2,6 +2,12 @@ import FollowCard from '../follow_card/follow_card.vue'
import Conversation from '../conversation/conversation.vue'
import Status from '../status/status.vue'
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 = {
components: {
diff --git a/src/components/search/search.vue b/src/components/search/search.vue
index 746bbaa2..a6677e4b 100644
--- a/src/components/search/search.vue
+++ b/src/components/search/search.vue
@@ -24,7 +24,7 @@
v-if="loading"
class="text-center loading-icon"
>
- <i class="icon-spin3 animate-spin" />
+ <FAIcon icon="circle-notch" spin size="lg"/>
</div>
<div v-else-if="loaded">
<div class="search-nav-heading">
diff --git a/src/components/status/status.js b/src/components/status/status.js
index f7a0ff83..5b93054f 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -21,7 +21,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
import {
faEnvelope,
faLock,
- faLockOpen,
+ faUnlock,
faGlobeEurope,
faTimes,
faRetweet,
@@ -35,22 +35,18 @@ import {
faEye,
faThumbtack
} from '@fortawesome/free-solid-svg-icons'
-import {
- faStar as faStarRegular
-} from '@fortawesome/free-regular-svg-icons'
library.add(
faEnvelope,
faGlobeEurope,
faLock,
- faLockOpen,
+ faUnlock,
faTimes,
faRetweet,
faReply,
faExternalLinkSquareAlt,
faPlusSquare,
faStar,
- faStarRegular,
faSmileBeam,
faEllipsisH,
faEyeSlash,
@@ -270,7 +266,7 @@ const Status = {
case 'private':
return 'lock'
case 'unlisted':
- return 'lock-open'
+ return 'unlock'
case 'direct':
return 'envelope'
default:
diff --git a/src/components/status_popover/status_popover.js b/src/components/status_popover/status_popover.js
index 51e7680c..c47f5631 100644
--- a/src/components/status_popover/status_popover.js
+++ b/src/components/status_popover/status_popover.js
@@ -1,4 +1,10 @@
import { find } from 'lodash'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+ faCircleNotch
+)
const StatusPopover = {
name: 'StatusPopover',
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index 162eb210..f6432687 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -27,7 +27,7 @@
v-else
class="status-preview-no-content"
>
- <i class="icon-spin4 animate-spin" />
+ <FAIcon icon="circle-notch" spin size="2x"/>
</div>
</div>
</Popover>
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 17680542..a443340f 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -3,6 +3,12 @@ import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.se
import Conversation from '../conversation/conversation.vue'
import TimelineMenu from '../timeline_menu/timeline_menu.vue'
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) => {
const ids = []
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index c1e2f44b..ab17cbbc 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -92,7 +92,7 @@
v-else
class="new-status-notification text-center panel-footer"
>
- <i class="icon-spin3 animate-spin" />
+ <FAIcon icon="circle-notch" spin size="lg"/>
</div>
</div>
</div>
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 8e6b9d7f..3a8efafc 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -6,6 +6,22 @@ import ModerationTools from '../moderation_tools/moderation_tools.vue'
import AccountActions from '../account_actions/account_actions.vue'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
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 {
props: [
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 041bb80f..cfdeaa17 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -21,7 +21,7 @@
:user="user"
/>
<div class="user-info-avatar-link-overlay">
- <i class="button-icon icon-zoom-in" />
+ <FAIcon class="button-icon" icon="search-plus" size="lg" />
</div>
</a>
<router-link
@@ -55,7 +55,7 @@
:href="user.statusnet_profile_url"
target="_blank"
>
- <i class="icon-link-ext usersettings" />
+ <FAIcon class="usersettings" icon="external-link-alt" />
</a>
<AccountActions
v-if="isOtherUser && loggedIn"
@@ -85,7 +85,9 @@
bot
</span>
</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
v-if="!mergedConfig.hideUserStats && !hideBio"
class="dailyAvg"
@@ -133,7 +135,7 @@
<option value="striped">Striped bg</option>
<option value="side">Side stripe</option>
</select>
- <i class="icon-down-open" />
+ <FAIcon class="icon-down-open" icon="chevron-down" />
</label>
</div>
</div>
@@ -150,7 +152,7 @@
:click="subscribeUser"
:title="$t('user_card.subscribe')"
>
- <i class="icon-bell-alt" />
+ <FAIcon icon="bell" />
</ProgressButton>
<ProgressButton
v-else
@@ -158,7 +160,11 @@
:click="unsubscribeUser"
: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>
</template>
</div>
@@ -388,7 +394,7 @@
opacity: 0;
transition: opacity .2s ease;
- i {
+ svg {
color: #FFF;
}
}
@@ -447,6 +453,10 @@
font-weight: light;
font-size: 15px;
+ .lock-icon {
+ margin-left: 0.5em;
+ }
+
.user-screen-name {
min-width: 1px;
flex: 0 1 auto;
@@ -508,7 +518,7 @@
padding-bottom: 0;
flex: 1 0 auto;
}
- .userHighlightSel.select i {
+ .userHighlightSel.select svg {
line-height: 22px;
}
diff --git a/src/components/user_list_popover/user_list_popover.js b/src/components/user_list_popover/user_list_popover.js
index b60f2c4c..32ca2b8d 100644
--- a/src/components/user_list_popover/user_list_popover.js
+++ b/src/components/user_list_popover/user_list_popover.js
@@ -1,3 +1,9 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+ faCircleNotch
+)
const UserListPopover = {
name: 'UserListPopover',
diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
index 185c73ca..dd6977d2 100644
--- a/src/components/user_list_popover/user_list_popover.vue
+++ b/src/components/user_list_popover/user_list_popover.vue
@@ -31,7 +31,7 @@
</div>
</div>
<div v-else>
- <i class="icon-spin4 animate-spin" />
+ <FAIcon icon="circle-notch" spin size="3x"/>
</div>
</div>
</Popover>
diff --git a/src/main.js b/src/main.js
index 42b6bcb2..90ee2887 100644
--- a/src/main.js
+++ b/src/main.js
@@ -33,7 +33,7 @@ import VueClickOutside from 'v-click-outside'
import PortalVue from 'portal-vue'
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'
@@ -48,6 +48,7 @@ Vue.use(PortalVue)
Vue.use(VBodyScrollLock)
Vue.component('FAIcon', FontAwesomeIcon)
+Vue.component('FALayers', FontAwesomeLayers)
const i18n = new VueI18n({
// By default, use the browser locale, we will update it if neccessary