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

View file

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

View file

@ -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;
}
.AccountActions {
button.dropdown-item {
margin-left: 0;
}
.account-actions button.dropdown-item {
margin-left: 0;
}
.ellipsis-button {
cursor: pointer;
width: 2.5em;
margin: -0.5em 0;
padding: 0.5em 0;
text-align: center;
.account-actions .trigger-button {
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
opacity: .8;
cursor: pointer;
&:hover {
color: $fallback--text;
color: var(--text, $fallback--text);
&:not(:hover) .icon {
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
}
}
}
</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 { 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

View file

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

View file

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

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -31,7 +31,7 @@
}
.unavailable,
.unavailable i {
.unavailable svg {
color: var(--cRed, $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 { library } from '@fortawesome/fontawesome-svg-core'
import {
faChevronDown
faChevronDown,
faGlobe
} from '@fortawesome/free-solid-svg-icons'
library.add(
faChevronDown
faChevronDown,
faGlobe
)
const GeneralTab = {

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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"
@ -289,7 +290,7 @@
mask: linear-gradient(to top, white, transparent) bottom no-repeat,
linear-gradient(to top, white, white);
// Autoprefixed seem to ignore this one, and also syntax is different
-webkit-mask-composite: xor;
-webkit-mask-composite: xor;
mask-composite: exclude;
background-size: cover;
mask-size: 100% 60%;
@ -404,10 +405,17 @@
}
}
.usersettings {
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
opacity: .8;
.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);
}
}
.user-summary {

View file

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

View file

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