diff options
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 |