More stuff. Buttons in user card's corner now have MUCH bigger hitboxes
This commit is contained in:
parent
046c60cb61
commit
b19c2eb0fb
32 changed files with 188 additions and 82 deletions
|
@ -85,7 +85,7 @@ button {
|
|||
font-family: sans-serif;
|
||||
font-family: var(--interfaceFont, sans-serif);
|
||||
|
||||
i[class*=icon-] {
|
||||
i[class*=icon-], .svg-inline--fa {
|
||||
color: $fallback--text;
|
||||
color: var(--btnText, $fallback--text);
|
||||
}
|
||||
|
@ -389,7 +389,7 @@ i[class*=icon-], .svg-inline--fa {
|
|||
box-sizing: border-box;
|
||||
|
||||
button {
|
||||
&, i[class*=icon-] {
|
||||
&, i[class*=icon-], svg {
|
||||
color: $fallback--text;
|
||||
color: var(--btnTopBarText, $fallback--text);
|
||||
}
|
||||
|
@ -463,7 +463,7 @@ i[class*=icon-], .svg-inline--fa {
|
|||
flex-basis: 970px;
|
||||
height: 50px;
|
||||
|
||||
a, a i {
|
||||
a, a i, a svg {
|
||||
color: $fallback--link;
|
||||
color: var(--topBarLink, $fallback--link);
|
||||
}
|
||||
|
|
|
@ -1,6 +1,14 @@
|
|||
import { mapState } from 'vuex'
|
||||
import ProgressButton from '../progress_button/progress_button.vue'
|
||||
import Popover from '../popover/popover.vue'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faEllipsisV
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faEllipsisV
|
||||
)
|
||||
|
||||
const AccountActions = {
|
||||
props: [
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="account-actions">
|
||||
<div class="AccountActions">
|
||||
<Popover
|
||||
trigger="click"
|
||||
placement="bottom"
|
||||
|
@ -63,7 +63,7 @@
|
|||
slot="trigger"
|
||||
class="btn btn-default ellipsis-button"
|
||||
>
|
||||
<i class="icon-ellipsis trigger-button" />
|
||||
<FAIcon class="icon" icon="ellipsis-v" />
|
||||
</div>
|
||||
</Popover>
|
||||
</div>
|
||||
|
@ -73,22 +73,22 @@
|
|||
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
.account-actions {
|
||||
margin: 0 .8em;
|
||||
}
|
||||
|
||||
.account-actions button.dropdown-item {
|
||||
.AccountActions {
|
||||
button.dropdown-item {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.account-actions .trigger-button {
|
||||
.ellipsis-button {
|
||||
cursor: pointer;
|
||||
width: 2.5em;
|
||||
margin: -0.5em 0;
|
||||
padding: 0.5em 0;
|
||||
text-align: center;
|
||||
|
||||
&:not(:hover) .icon {
|
||||
color: $fallback--lightText;
|
||||
color: var(--lightText, $fallback--lightText);
|
||||
opacity: .8;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -9,11 +9,13 @@ import { promiseInterval } from '../../services/promise_interval/promise_interva
|
|||
import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight } from './chat_layout_utils.js'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faChevronDown
|
||||
faChevronDown,
|
||||
faChevronLeft
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faChevronDown
|
||||
faChevronDown,
|
||||
faChevronLeft
|
||||
)
|
||||
|
||||
const BOTTOMED_OUT_OFFSET = 10
|
||||
|
|
|
@ -58,12 +58,8 @@
|
|||
|
||||
.go-back-button {
|
||||
cursor: pointer;
|
||||
margin-right: 1.4em;
|
||||
|
||||
i {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
margin-right: 1.7em;
|
||||
margin-left: 0.3em;
|
||||
}
|
||||
|
||||
.jump-to-bottom-button {
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
class="go-back-button"
|
||||
@click="goBack"
|
||||
>
|
||||
<i class="button-icon icon-left-open" />
|
||||
<FAIcon size="lg" icon="chevron-left" />
|
||||
</a>
|
||||
<div class="title text-center">
|
||||
<ChatTitle
|
||||
|
|
|
@ -9,11 +9,13 @@ import ChatMessageDate from '../chat_message_date/chat_message_date.vue'
|
|||
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faTimes
|
||||
faTimes,
|
||||
faEllipsisH
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faTimes
|
||||
faTimes,
|
||||
faEllipsisH
|
||||
)
|
||||
|
||||
const ChatMessage = {
|
||||
|
|
|
@ -24,7 +24,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.icon-ellipsis {
|
||||
.menu-icon {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover, .extra-button-popover.open & {
|
||||
|
|
|
@ -62,9 +62,10 @@
|
|||
</div>
|
||||
<button
|
||||
slot="trigger"
|
||||
class="menu-icon"
|
||||
:title="$t('chats.more')"
|
||||
>
|
||||
<i class="icon-ellipsis" />
|
||||
<FAIcon icon="ellipsis-h" />
|
||||
</button>
|
||||
</Popover>
|
||||
</div>
|
||||
|
|
|
@ -1,6 +1,16 @@
|
|||
import { mapState, mapGetters } from 'vuex'
|
||||
import BasicUserCard from '../basic_user_card/basic_user_card.vue'
|
||||
import UserAvatar from '../user_avatar/user_avatar.vue'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faSearch,
|
||||
faChevronLeft
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faSearch,
|
||||
faChevronLeft
|
||||
)
|
||||
|
||||
const chatNew = {
|
||||
components: {
|
||||
|
|
|
@ -8,9 +8,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.icon-search {
|
||||
font-size: 1.5em;
|
||||
float: right;
|
||||
.search-icon {
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
|
||||
|
@ -25,5 +23,7 @@
|
|||
|
||||
.go-back-button {
|
||||
cursor: pointer;
|
||||
margin-right: 1.7em;
|
||||
margin-left: 0.3em;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -11,12 +11,12 @@
|
|||
class="go-back-button"
|
||||
@click="goBack"
|
||||
>
|
||||
<i class="button-icon icon-left-open" />
|
||||
<FAIcon size="lg" icon="chevron-left" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<div class="input-search">
|
||||
<i class="button-icon icon-search" />
|
||||
<FAIcon size="lg" class="search-icon button-icon" icon="search" />
|
||||
</div>
|
||||
<input
|
||||
ref="search"
|
||||
|
|
|
@ -3,6 +3,16 @@ import VideoAttachment from '../video_attachment/video_attachment.vue'
|
|||
import Modal from '../modal/modal.vue'
|
||||
import fileTypeService from '../../services/file_type/file_type.service.js'
|
||||
import GestureService from '../../services/gesture_service/gesture_service'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faChevronLeft,
|
||||
faChevronRight
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faChevronLeft,
|
||||
faChevronRight
|
||||
)
|
||||
|
||||
const MediaModal = {
|
||||
components: {
|
||||
|
|
|
@ -34,7 +34,7 @@
|
|||
class="modal-view-button-arrow modal-view-button-arrow--prev"
|
||||
@click.stop.prevent="goPrev"
|
||||
>
|
||||
<i class="icon-left-open arrow-icon" />
|
||||
<FAIcon class="arrow-icon" icon="chevron-left" />
|
||||
</button>
|
||||
<button
|
||||
v-if="canNavigate"
|
||||
|
@ -42,7 +42,7 @@
|
|||
class="modal-view-button-arrow modal-view-button-arrow--next"
|
||||
@click.stop.prevent="goNext"
|
||||
>
|
||||
<i class="icon-right-open arrow-icon" />
|
||||
<FAIcon class="arrow-icon" icon="chevron-right" />
|
||||
</button>
|
||||
</Modal>
|
||||
</template>
|
||||
|
|
|
@ -5,11 +5,15 @@ import GestureService from '../../services/gesture_service/gesture_service'
|
|||
import { mapGetters } from 'vuex'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faTimes
|
||||
faTimes,
|
||||
faBell,
|
||||
faBars
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faTimes
|
||||
faTimes,
|
||||
faBell,
|
||||
faBars
|
||||
)
|
||||
|
||||
const MobileNav = {
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
class="mobile-nav-button"
|
||||
@click.stop.prevent="toggleMobileSidebar()"
|
||||
>
|
||||
<i class="button-icon icon-menu" />
|
||||
<FAIcon size="lg" class="button-icon" icon="bars" />
|
||||
<div
|
||||
v-if="unreadChatCount"
|
||||
class="alert-dot"
|
||||
|
@ -37,7 +37,7 @@
|
|||
href="#"
|
||||
@click.stop.prevent="openMobileNotifications()"
|
||||
>
|
||||
<i class="button-icon icon-bell-alt" />
|
||||
<FAIcon size="lg" class="button-icon" icon="bell" />
|
||||
<div
|
||||
v-if="unseenNotificationsCount"
|
||||
class="alert-dot"
|
||||
|
@ -59,7 +59,7 @@
|
|||
class="mobile-nav-button"
|
||||
@click.stop.prevent="closeMobileNotifications()"
|
||||
>
|
||||
<FAIcon class="button-icon" icon="times" />
|
||||
<FAIcon size="lg" class="button-icon" icon="times" />
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
|
@ -91,9 +91,8 @@
|
|||
}
|
||||
|
||||
.mobile-nav-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
margin: 0 1em;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
@ -1,4 +1,12 @@
|
|||
import { debounce } from 'lodash'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faPen
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faPen
|
||||
)
|
||||
|
||||
const HIDDEN_FOR_PAGES = new Set([
|
||||
'chats',
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
:class="{ 'hidden': isHidden }"
|
||||
@click="openPostForm"
|
||||
>
|
||||
<i class="icon-edit" />
|
||||
<FAIcon icon="pen" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -39,7 +39,7 @@
|
|||
transform: translateY(150%);
|
||||
}
|
||||
|
||||
i {
|
||||
svg {
|
||||
font-size: 1.5em;
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
|
|
|
@ -3,10 +3,14 @@ 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'
|
||||
import {
|
||||
faCircleNotch,
|
||||
faSearch
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faCircleNotch
|
||||
faCircleNotch,
|
||||
faSearch
|
||||
)
|
||||
|
||||
const Search = {
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
class="btn search-button"
|
||||
@click="newQuery(searchTerm)"
|
||||
>
|
||||
<i class="icon-search" />
|
||||
<FAIcon icon="search" />
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
|
|
|
@ -1,10 +1,12 @@
|
|||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faTimes
|
||||
faTimes,
|
||||
faSearch
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faTimes
|
||||
faTimes,
|
||||
faSearch
|
||||
)
|
||||
|
||||
const SearchBar = {
|
||||
|
|
|
@ -27,7 +27,7 @@
|
|||
class="btn search-button"
|
||||
@click="find(searchTerm)"
|
||||
>
|
||||
<i class="icon-search" />
|
||||
<FAIcon icon="search" />
|
||||
</button>
|
||||
<FAIcon
|
||||
class="button-icon" icon="times"
|
||||
|
|
|
@ -31,7 +31,7 @@
|
|||
}
|
||||
|
||||
.unavailable,
|
||||
.unavailable i {
|
||||
.unavailable svg {
|
||||
color: var(--cRed, $fallback--cRed);
|
||||
color: $fallback--cRed;
|
||||
}
|
||||
|
|
|
@ -4,11 +4,13 @@ import InterfaceLanguageSwitcher from 'src/components/interface_language_switche
|
|||
import SharedComputedObject from '../helpers/shared_computed_object.js'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faChevronDown
|
||||
faChevronDown,
|
||||
faGlobe
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faChevronDown
|
||||
faChevronDown,
|
||||
faGlobe
|
||||
)
|
||||
|
||||
const GeneralTab = {
|
||||
|
|
|
@ -222,7 +222,7 @@
|
|||
v-if="!loopSilentAvailable"
|
||||
class="unavailable"
|
||||
>
|
||||
<i class="icon-globe" />! {{ $t('settings.limited_availability') }}
|
||||
<FAIcon icon="globe" />! {{ $t('settings.limited_availability') }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
@ -10,11 +10,13 @@ import Autosuggest from 'src/components/autosuggest/autosuggest.vue'
|
|||
import Checkbox from 'src/components/checkbox/checkbox.vue'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faTimes
|
||||
faTimes,
|
||||
faPlus
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faTimes
|
||||
faTimes,
|
||||
faPlus
|
||||
)
|
||||
|
||||
const ProfileTab = {
|
||||
|
|
|
@ -139,7 +139,7 @@
|
|||
class="add-field faint"
|
||||
@click="addField"
|
||||
>
|
||||
<i class="icon-plus" />
|
||||
<FAIcon icon="plus" />
|
||||
{{ $t("settings.profile_fields.add_field") }}
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
@ -2,6 +2,34 @@ import { mapState, mapGetters } from 'vuex'
|
|||
import UserCard from '../user_card/user_card.vue'
|
||||
import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
|
||||
import GestureService from '../../services/gesture_service/gesture_service'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faSignInAlt,
|
||||
faSignOutAlt,
|
||||
faHome,
|
||||
faComments,
|
||||
faBell,
|
||||
faUserPlus,
|
||||
faBullhorn,
|
||||
faSearch,
|
||||
faTachometerAlt,
|
||||
faCog,
|
||||
faInfoCircle
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faSignInAlt,
|
||||
faSignOutAlt,
|
||||
faHome,
|
||||
faComments,
|
||||
faBell,
|
||||
faUserPlus,
|
||||
faBullhorn,
|
||||
faSearch,
|
||||
faTachometerAlt,
|
||||
faCog,
|
||||
faInfoCircle
|
||||
)
|
||||
|
||||
const SideDrawer = {
|
||||
props: [ 'logout' ],
|
||||
|
|
|
@ -36,7 +36,7 @@
|
|||
@click="toggleDrawer"
|
||||
>
|
||||
<router-link :to="{ name: 'login' }">
|
||||
<i class="button-icon icon-login" /> {{ $t("login.login") }}
|
||||
<FAIcon size="lg" fixed-width class="button-icon" icon="sign-in-alt" /> {{ $t("login.login") }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li
|
||||
|
@ -44,7 +44,7 @@
|
|||
@click="toggleDrawer"
|
||||
>
|
||||
<router-link :to="{ name: timelinesRoute }">
|
||||
<i class="button-icon icon-home-2" /> {{ $t("nav.timelines") }}
|
||||
<FAIcon size="lg" fixed-width class="button-icon" icon="home" /> {{ $t("nav.timelines") }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li
|
||||
|
@ -55,7 +55,7 @@
|
|||
:to="{ name: 'chats', params: { username: currentUser.screen_name } }"
|
||||
style="position: relative"
|
||||
>
|
||||
<i class="button-icon icon-chat" /> {{ $t("nav.chats") }}
|
||||
<FAIcon size="lg" fixed-width class="button-icon" icon="comments" /> {{ $t("nav.chats") }}
|
||||
<span
|
||||
v-if="unreadChatCount"
|
||||
class="badge badge-notification unread-chat-count"
|
||||
|
@ -68,7 +68,7 @@
|
|||
<ul v-if="currentUser">
|
||||
<li @click="toggleDrawer">
|
||||
<router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
|
||||
<i class="button-icon icon-bell-alt" /> {{ $t("nav.interactions") }}
|
||||
<FAIcon size="lg" fixed-width class="button-icon" icon="bell" /> {{ $t("nav.interactions") }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li
|
||||
|
@ -76,7 +76,7 @@
|
|||
@click="toggleDrawer"
|
||||
>
|
||||
<router-link to="/friend-requests">
|
||||
<i class="button-icon icon-user-plus" /> {{ $t("nav.friend_requests") }}
|
||||
<FAIcon size="lg" fixed-width class="button-icon" icon="user-plus" /> {{ $t("nav.friend_requests") }}
|
||||
<span
|
||||
v-if="followRequestCount > 0"
|
||||
class="badge follow-request-count"
|
||||
|
@ -90,7 +90,7 @@
|
|||
@click="toggleDrawer"
|
||||
>
|
||||
<router-link :to="{ name: 'chat' }">
|
||||
<i class="button-icon icon-megaphone" /> {{ $t("shoutbox.title") }}
|
||||
<FAIcon size="lg" fixed-width class="button-icon" icon="bullhorn" /> {{ $t("shoutbox.title") }}
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
|
@ -100,7 +100,7 @@
|
|||
@click="toggleDrawer"
|
||||
>
|
||||
<router-link :to="{ name: 'search' }">
|
||||
<i class="button-icon icon-search" /> {{ $t("nav.search") }}
|
||||
<FAIcon size="lg" fixed-width class="button-icon" icon="search" /> {{ $t("nav.search") }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li
|
||||
|
@ -108,7 +108,7 @@
|
|||
@click="toggleDrawer"
|
||||
>
|
||||
<router-link :to="{ name: 'who-to-follow' }">
|
||||
<i class="button-icon icon-user-plus" /> {{ $t("nav.who_to_follow") }}
|
||||
<FAIcon size="lg" fixed-width class="button-icon" icon="user-plus" /> {{ $t("nav.who_to_follow") }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li @click="toggleDrawer">
|
||||
|
@ -116,12 +116,12 @@
|
|||
href="#"
|
||||
@click="openSettingsModal"
|
||||
>
|
||||
<i class="button-icon icon-cog" /> {{ $t("settings.settings") }}
|
||||
<FAIcon size="lg" fixed-width class="button-icon" icon="cog" /> {{ $t("settings.settings") }}
|
||||
</a>
|
||||
</li>
|
||||
<li @click="toggleDrawer">
|
||||
<router-link :to="{ name: 'about'}">
|
||||
<i class="button-icon icon-info-circled" /> {{ $t("nav.about") }}
|
||||
<FAIcon size="lg" fixed-width class="button-icon" icon="info-circle" /> {{ $t("nav.about") }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li
|
||||
|
@ -132,7 +132,7 @@
|
|||
href="/pleroma/admin/#/login-pleroma"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="button-icon icon-gauge" /> {{ $t("nav.administration") }}
|
||||
<FAIcon size="lg" fixed-width class="button-icon" icon="tachometer-alt" /> {{ $t("nav.administration") }}
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
|
@ -143,7 +143,7 @@
|
|||
href="#"
|
||||
@click="doLogout"
|
||||
>
|
||||
<i class="button-icon icon-logout" /> {{ $t("login.logout") }}
|
||||
<FAIcon size="lg" fixed-width class="button-icon" icon="sign-out-alt" /> {{ $t("login.logout") }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
@ -54,8 +54,9 @@
|
|||
v-if="isOtherUser && !user.is_local"
|
||||
:href="user.statusnet_profile_url"
|
||||
target="_blank"
|
||||
class="external-link-button"
|
||||
>
|
||||
<FAIcon class="usersettings" icon="external-link-alt" />
|
||||
<FAIcon class="icon" icon="external-link-alt" />
|
||||
</a>
|
||||
<AccountActions
|
||||
v-if="isOtherUser && loggedIn"
|
||||
|
@ -404,10 +405,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
.usersettings {
|
||||
.external-link-button {
|
||||
cursor: pointer;
|
||||
width: 2.5em;
|
||||
text-align: center;
|
||||
margin: -0.5em 0;
|
||||
padding: 0.5em 0;
|
||||
|
||||
&:not(:hover) .icon {
|
||||
color: $fallback--lightText;
|
||||
color: var(--lightText, $fallback--lightText);
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
|
||||
.user-summary {
|
||||
|
|
|
@ -3,6 +3,16 @@ import isEmpty from 'lodash/isEmpty'
|
|||
import { getComponentProps } from '../../services/component_utils/component_utils'
|
||||
import './with_load_more.scss'
|
||||
|
||||
import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faCircleNotch
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faCircleNotch
|
||||
)
|
||||
|
||||
const withLoadMore = ({
|
||||
fetch, // function to fetch entries and return a promise
|
||||
select, // function to select data from store
|
||||
|
@ -82,7 +92,7 @@ const withLoadMore = ({
|
|||
</WrappedComponent>
|
||||
<div class="with-load-more-footer">
|
||||
{this.error && <a onClick={this.fetchEntries} class="alert error">{this.$t('general.generic_error')}</a>}
|
||||
{!this.error && this.loading && <i class="icon-spin3 animate-spin"/>}
|
||||
{!this.error && this.loading && <FAIcon spin icon="circle-notch"/>}
|
||||
{!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetchEntries}>{this.$t('general.more')}</a>}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -3,6 +3,16 @@ import isEmpty from 'lodash/isEmpty'
|
|||
import { getComponentProps } from '../../services/component_utils/component_utils'
|
||||
import './with_subscription.scss'
|
||||
|
||||
import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faCircleNotch
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faCircleNotch
|
||||
)
|
||||
|
||||
const withSubscription = ({
|
||||
fetch, // function to fetch entries and return a promise
|
||||
select, // function to select data from store
|
||||
|
@ -72,7 +82,7 @@ const withSubscription = ({
|
|||
<div class="with-subscription-loading">
|
||||
{this.error
|
||||
? <a onClick={this.fetchData} class="alert error">{this.$t('general.generic_error')}</a>
|
||||
: <i class="icon-spin3 animate-spin"/>
|
||||
: <FAIcon spin icon="circle-notch"/>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
|
|
Loading…
Reference in a new issue