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);
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;

View file

@ -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' ],

View file

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

View file

@ -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;
}
}

View file

@ -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' ],

View file

@ -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 & {

View file

@ -9,8 +9,9 @@
>
<FAIcon
v-if="uploading"
class="progress-icon animate-spin"
class="progress-icon"
icon="circle-notch"
spin
/>
<FAIcon
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 { 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 () {

View file

@ -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);
}
}

View file

@ -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()"
/>

View file

@ -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

View file

@ -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;

View file

@ -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>

View file

@ -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;

View file

@ -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);
}
}

View file

@ -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 = {

View file

@ -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"

View file

@ -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: {

View file

@ -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">

View file

@ -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:

View file

@ -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',

View file

@ -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>

View file

@ -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 = []

View file

@ -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>

View file

@ -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: [

View file

@ -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;
}

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 = {
name: 'UserListPopover',

View file

@ -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>

View file

@ -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