More stuff. Buttons in user card's corner now have MUCH bigger hitboxes

This commit is contained in:
Henry Jameson 2020-10-20 22:13:19 +03:00
parent 046c60cb61
commit b19c2eb0fb
32 changed files with 188 additions and 82 deletions

View file

@ -85,7 +85,7 @@ button {
font-family: sans-serif; font-family: sans-serif;
font-family: var(--interfaceFont, sans-serif); font-family: var(--interfaceFont, sans-serif);
i[class*=icon-] { i[class*=icon-], .svg-inline--fa {
color: $fallback--text; color: $fallback--text;
color: var(--btnText, $fallback--text); color: var(--btnText, $fallback--text);
} }
@ -389,7 +389,7 @@ i[class*=icon-], .svg-inline--fa {
box-sizing: border-box; box-sizing: border-box;
button { button {
&, i[class*=icon-] { &, i[class*=icon-], svg {
color: $fallback--text; color: $fallback--text;
color: var(--btnTopBarText, $fallback--text); color: var(--btnTopBarText, $fallback--text);
} }
@ -463,7 +463,7 @@ i[class*=icon-], .svg-inline--fa {
flex-basis: 970px; flex-basis: 970px;
height: 50px; height: 50px;
a, a i { a, a i, a svg {
color: $fallback--link; color: $fallback--link;
color: var(--topBarLink, $fallback--link); color: var(--topBarLink, $fallback--link);
} }

View file

@ -1,6 +1,14 @@
import { mapState } from 'vuex' import { mapState } from 'vuex'
import ProgressButton from '../progress_button/progress_button.vue' import ProgressButton from '../progress_button/progress_button.vue'
import Popover from '../popover/popover.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 = { const AccountActions = {
props: [ props: [

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="account-actions"> <div class="AccountActions">
<Popover <Popover
trigger="click" trigger="click"
placement="bottom" placement="bottom"
@ -63,7 +63,7 @@
slot="trigger" slot="trigger"
class="btn btn-default ellipsis-button" class="btn btn-default ellipsis-button"
> >
<i class="icon-ellipsis trigger-button" /> <FAIcon class="icon" icon="ellipsis-v" />
</div> </div>
</Popover> </Popover>
</div> </div>
@ -73,22 +73,22 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.account-actions { .AccountActions {
margin: 0 .8em; button.dropdown-item {
}
.account-actions button.dropdown-item {
margin-left: 0; 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: $fallback--lightText;
color: var(--lightText, $fallback--lightText); color: var(--lightText, $fallback--lightText);
opacity: .8; }
cursor: pointer;
&:hover {
color: $fallback--text;
color: var(--text, $fallback--text);
} }
} }
</style> </style>

View file

@ -9,11 +9,13 @@ import { promiseInterval } from '../../services/promise_interval/promise_interva
import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight } from './chat_layout_utils.js' import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight } from './chat_layout_utils.js'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { import {
faChevronDown faChevronDown,
faChevronLeft
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
library.add( library.add(
faChevronDown faChevronDown,
faChevronLeft
) )
const BOTTOMED_OUT_OFFSET = 10 const BOTTOMED_OUT_OFFSET = 10

View file

@ -58,12 +58,8 @@
.go-back-button { .go-back-button {
cursor: pointer; cursor: pointer;
margin-right: 1.4em; margin-right: 1.7em;
margin-left: 0.3em;
i {
display: flex;
align-items: center;
}
} }
.jump-to-bottom-button { .jump-to-bottom-button {

View file

@ -14,7 +14,7 @@
class="go-back-button" class="go-back-button"
@click="goBack" @click="goBack"
> >
<i class="button-icon icon-left-open" /> <FAIcon size="lg" icon="chevron-left" />
</a> </a>
<div class="title text-center"> <div class="title text-center">
<ChatTitle <ChatTitle

View file

@ -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 generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { import {
faTimes faTimes,
faEllipsisH
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
library.add( library.add(
faTimes faTimes,
faEllipsisH
) )
const ChatMessage = { const ChatMessage = {

View file

@ -24,7 +24,7 @@
} }
} }
.icon-ellipsis { .menu-icon {
cursor: pointer; cursor: pointer;
&:hover, .extra-button-popover.open & { &:hover, .extra-button-popover.open & {

View file

@ -62,9 +62,10 @@
</div> </div>
<button <button
slot="trigger" slot="trigger"
class="menu-icon"
:title="$t('chats.more')" :title="$t('chats.more')"
> >
<i class="icon-ellipsis" /> <FAIcon icon="ellipsis-h" />
</button> </button>
</Popover> </Popover>
</div> </div>

View file

@ -1,6 +1,16 @@
import { mapState, mapGetters } from 'vuex' import { mapState, mapGetters } from 'vuex'
import BasicUserCard from '../basic_user_card/basic_user_card.vue' import BasicUserCard from '../basic_user_card/basic_user_card.vue'
import UserAvatar from '../user_avatar/user_avatar.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 = { const chatNew = {
components: { components: {

View file

@ -8,9 +8,7 @@
} }
} }
.icon-search { .search-icon {
font-size: 1.5em;
float: right;
margin-right: 0.3em; margin-right: 0.3em;
} }
@ -25,5 +23,7 @@
.go-back-button { .go-back-button {
cursor: pointer; cursor: pointer;
margin-right: 1.7em;
margin-left: 0.3em;
} }
} }

View file

@ -11,12 +11,12 @@
class="go-back-button" class="go-back-button"
@click="goBack" @click="goBack"
> >
<i class="button-icon icon-left-open" /> <FAIcon size="lg" icon="chevron-left" />
</a> </a>
</div> </div>
<div class="input-wrap"> <div class="input-wrap">
<div class="input-search"> <div class="input-search">
<i class="button-icon icon-search" /> <FAIcon size="lg" class="search-icon button-icon" icon="search" />
</div> </div>
<input <input
ref="search" ref="search"

View file

@ -3,6 +3,16 @@ import VideoAttachment from '../video_attachment/video_attachment.vue'
import Modal from '../modal/modal.vue' import Modal from '../modal/modal.vue'
import fileTypeService from '../../services/file_type/file_type.service.js' import fileTypeService from '../../services/file_type/file_type.service.js'
import GestureService from '../../services/gesture_service/gesture_service' 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 = { const MediaModal = {
components: { components: {

View file

@ -34,7 +34,7 @@
class="modal-view-button-arrow modal-view-button-arrow--prev" class="modal-view-button-arrow modal-view-button-arrow--prev"
@click.stop.prevent="goPrev" @click.stop.prevent="goPrev"
> >
<i class="icon-left-open arrow-icon" /> <FAIcon class="arrow-icon" icon="chevron-left" />
</button> </button>
<button <button
v-if="canNavigate" v-if="canNavigate"
@ -42,7 +42,7 @@
class="modal-view-button-arrow modal-view-button-arrow--next" class="modal-view-button-arrow modal-view-button-arrow--next"
@click.stop.prevent="goNext" @click.stop.prevent="goNext"
> >
<i class="icon-right-open arrow-icon" /> <FAIcon class="arrow-icon" icon="chevron-right" />
</button> </button>
</Modal> </Modal>
</template> </template>

View file

@ -5,11 +5,15 @@ import GestureService from '../../services/gesture_service/gesture_service'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { import {
faTimes faTimes,
faBell,
faBars
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
library.add( library.add(
faTimes faTimes,
faBell,
faBars
) )
const MobileNav = { const MobileNav = {

View file

@ -15,7 +15,7 @@
class="mobile-nav-button" class="mobile-nav-button"
@click.stop.prevent="toggleMobileSidebar()" @click.stop.prevent="toggleMobileSidebar()"
> >
<i class="button-icon icon-menu" /> <FAIcon size="lg" class="button-icon" icon="bars" />
<div <div
v-if="unreadChatCount" v-if="unreadChatCount"
class="alert-dot" class="alert-dot"
@ -37,7 +37,7 @@
href="#" href="#"
@click.stop.prevent="openMobileNotifications()" @click.stop.prevent="openMobileNotifications()"
> >
<i class="button-icon icon-bell-alt" /> <FAIcon size="lg" class="button-icon" icon="bell" />
<div <div
v-if="unseenNotificationsCount" v-if="unseenNotificationsCount"
class="alert-dot" class="alert-dot"
@ -59,7 +59,7 @@
class="mobile-nav-button" class="mobile-nav-button"
@click.stop.prevent="closeMobileNotifications()" @click.stop.prevent="closeMobileNotifications()"
> >
<FAIcon class="button-icon" icon="times" /> <FAIcon size="lg" class="button-icon" icon="times" />
</a> </a>
</div> </div>
<div <div
@ -91,9 +91,8 @@
} }
.mobile-nav-button { .mobile-nav-button {
display: flex; text-align: center;
justify-content: center; margin: 0 1em;
width: 50px;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
} }

View file

@ -1,4 +1,12 @@
import { debounce } from 'lodash' 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([ const HIDDEN_FOR_PAGES = new Set([
'chats', 'chats',

View file

@ -5,7 +5,7 @@
:class="{ 'hidden': isHidden }" :class="{ 'hidden': isHidden }"
@click="openPostForm" @click="openPostForm"
> >
<i class="icon-edit" /> <FAIcon icon="pen" />
</button> </button>
</div> </div>
</template> </template>
@ -39,7 +39,7 @@
transform: translateY(150%); transform: translateY(150%);
} }
i { svg {
font-size: 1.5em; font-size: 1.5em;
color: $fallback--text; color: $fallback--text;
color: var(--text, $fallback--text); color: var(--text, $fallback--text);

View file

@ -3,10 +3,14 @@ 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 { 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( library.add(
faCircleNotch faCircleNotch,
faSearch
) )
const Search = { const Search = {

View file

@ -17,7 +17,7 @@
class="btn search-button" class="btn search-button"
@click="newQuery(searchTerm)" @click="newQuery(searchTerm)"
> >
<i class="icon-search" /> <FAIcon icon="search" />
</button> </button>
</div> </div>
<div <div

View file

@ -1,10 +1,12 @@
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { import {
faTimes faTimes,
faSearch
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
library.add( library.add(
faTimes faTimes,
faSearch
) )
const SearchBar = { const SearchBar = {

View file

@ -27,7 +27,7 @@
class="btn search-button" class="btn search-button"
@click="find(searchTerm)" @click="find(searchTerm)"
> >
<i class="icon-search" /> <FAIcon icon="search" />
</button> </button>
<FAIcon <FAIcon
class="button-icon" icon="times" class="button-icon" icon="times"

View file

@ -31,7 +31,7 @@
} }
.unavailable, .unavailable,
.unavailable i { .unavailable svg {
color: var(--cRed, $fallback--cRed); color: var(--cRed, $fallback--cRed);
color: $fallback--cRed; color: $fallback--cRed;
} }

View file

@ -4,11 +4,13 @@ import InterfaceLanguageSwitcher from 'src/components/interface_language_switche
import SharedComputedObject from '../helpers/shared_computed_object.js' import SharedComputedObject from '../helpers/shared_computed_object.js'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { import {
faChevronDown faChevronDown,
faGlobe
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
library.add( library.add(
faChevronDown faChevronDown,
faGlobe
) )
const GeneralTab = { const GeneralTab = {

View file

@ -222,7 +222,7 @@
v-if="!loopSilentAvailable" v-if="!loopSilentAvailable"
class="unavailable" class="unavailable"
> >
<i class="icon-globe" />! {{ $t('settings.limited_availability') }} <FAIcon icon="globe" />! {{ $t('settings.limited_availability') }}
</div> </div>
</li> </li>
</ul> </ul>

View file

@ -10,11 +10,13 @@ import Autosuggest from 'src/components/autosuggest/autosuggest.vue'
import Checkbox from 'src/components/checkbox/checkbox.vue' import Checkbox from 'src/components/checkbox/checkbox.vue'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { import {
faTimes faTimes,
faPlus
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
library.add( library.add(
faTimes faTimes,
faPlus
) )
const ProfileTab = { const ProfileTab = {

View file

@ -139,7 +139,7 @@
class="add-field faint" class="add-field faint"
@click="addField" @click="addField"
> >
<i class="icon-plus" /> <FAIcon icon="plus" />
{{ $t("settings.profile_fields.add_field") }} {{ $t("settings.profile_fields.add_field") }}
</a> </a>
</div> </div>

View file

@ -2,6 +2,34 @@ import { mapState, mapGetters } from 'vuex'
import UserCard from '../user_card/user_card.vue' import UserCard from '../user_card/user_card.vue'
import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils' import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
import GestureService from '../../services/gesture_service/gesture_service' 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 = { const SideDrawer = {
props: [ 'logout' ], props: [ 'logout' ],

View file

@ -36,7 +36,7 @@
@click="toggleDrawer" @click="toggleDrawer"
> >
<router-link :to="{ name: 'login' }"> <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> </router-link>
</li> </li>
<li <li
@ -44,7 +44,7 @@
@click="toggleDrawer" @click="toggleDrawer"
> >
<router-link :to="{ name: timelinesRoute }"> <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> </router-link>
</li> </li>
<li <li
@ -55,7 +55,7 @@
:to="{ name: 'chats', params: { username: currentUser.screen_name } }" :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
style="position: relative" 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 <span
v-if="unreadChatCount" v-if="unreadChatCount"
class="badge badge-notification unread-chat-count" class="badge badge-notification unread-chat-count"
@ -68,7 +68,7 @@
<ul v-if="currentUser"> <ul v-if="currentUser">
<li @click="toggleDrawer"> <li @click="toggleDrawer">
<router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"> <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> </router-link>
</li> </li>
<li <li
@ -76,7 +76,7 @@
@click="toggleDrawer" @click="toggleDrawer"
> >
<router-link to="/friend-requests"> <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 <span
v-if="followRequestCount > 0" v-if="followRequestCount > 0"
class="badge follow-request-count" class="badge follow-request-count"
@ -90,7 +90,7 @@
@click="toggleDrawer" @click="toggleDrawer"
> >
<router-link :to="{ name: 'chat' }"> <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> </router-link>
</li> </li>
</ul> </ul>
@ -100,7 +100,7 @@
@click="toggleDrawer" @click="toggleDrawer"
> >
<router-link :to="{ name: 'search' }"> <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> </router-link>
</li> </li>
<li <li
@ -108,7 +108,7 @@
@click="toggleDrawer" @click="toggleDrawer"
> >
<router-link :to="{ name: 'who-to-follow' }"> <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> </router-link>
</li> </li>
<li @click="toggleDrawer"> <li @click="toggleDrawer">
@ -116,12 +116,12 @@
href="#" href="#"
@click="openSettingsModal" @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> </a>
</li> </li>
<li @click="toggleDrawer"> <li @click="toggleDrawer">
<router-link :to="{ name: 'about'}"> <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> </router-link>
</li> </li>
<li <li
@ -132,7 +132,7 @@
href="/pleroma/admin/#/login-pleroma" href="/pleroma/admin/#/login-pleroma"
target="_blank" 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> </a>
</li> </li>
<li <li
@ -143,7 +143,7 @@
href="#" href="#"
@click="doLogout" @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> </a>
</li> </li>
</ul> </ul>

View file

@ -54,8 +54,9 @@
v-if="isOtherUser && !user.is_local" v-if="isOtherUser && !user.is_local"
:href="user.statusnet_profile_url" :href="user.statusnet_profile_url"
target="_blank" target="_blank"
class="external-link-button"
> >
<FAIcon class="usersettings" icon="external-link-alt" /> <FAIcon class="icon" icon="external-link-alt" />
</a> </a>
<AccountActions <AccountActions
v-if="isOtherUser && loggedIn" 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: $fallback--lightText;
color: var(--lightText, $fallback--lightText); color: var(--lightText, $fallback--lightText);
opacity: .8; }
} }
.user-summary { .user-summary {

View file

@ -3,6 +3,16 @@ import isEmpty from 'lodash/isEmpty'
import { getComponentProps } from '../../services/component_utils/component_utils' import { getComponentProps } from '../../services/component_utils/component_utils'
import './with_load_more.scss' 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 = ({ const withLoadMore = ({
fetch, // function to fetch entries and return a promise fetch, // function to fetch entries and return a promise
select, // function to select data from store select, // function to select data from store
@ -82,7 +92,7 @@ const withLoadMore = ({
</WrappedComponent> </WrappedComponent>
<div class="with-load-more-footer"> <div class="with-load-more-footer">
{this.error && <a onClick={this.fetchEntries} class="alert error">{this.$t('general.generic_error')}</a>} {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>} {!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetchEntries}>{this.$t('general.more')}</a>}
</div> </div>
</div> </div>

View file

@ -3,6 +3,16 @@ import isEmpty from 'lodash/isEmpty'
import { getComponentProps } from '../../services/component_utils/component_utils' import { getComponentProps } from '../../services/component_utils/component_utils'
import './with_subscription.scss' 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 = ({ const withSubscription = ({
fetch, // function to fetch entries and return a promise fetch, // function to fetch entries and return a promise
select, // function to select data from store select, // function to select data from store
@ -72,7 +82,7 @@ const withSubscription = ({
<div class="with-subscription-loading"> <div class="with-subscription-loading">
{this.error {this.error
? <a onClick={this.fetchData} class="alert error">{this.$t('general.generic_error')}</a> ? <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> </div>
) )