Merge branch 'fontawesome5' into 'develop'

FontAwesome 5

Closes #982

See merge request pleroma/pleroma-fe!1260
This commit is contained in:
HJ 2020-10-28 21:21:35 +00:00
commit a84db4bd8f
123 changed files with 1685 additions and 1181 deletions

View file

@ -3,7 +3,6 @@ var config = require('../config')
var utils = require('./utils') var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../') var projectRoot = path.resolve(__dirname, '../')
var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin') var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin')
var FontelloPlugin = require("fontello-webpack-plugin")
var env = process.env.NODE_ENV var env = process.env.NODE_ENV
// check env & config/index.js to decide weither to enable CSS Sourcemaps for the // check env & config/index.js to decide weither to enable CSS Sourcemaps for the
@ -94,15 +93,6 @@ module.exports = {
new ServiceWorkerWebpackPlugin({ new ServiceWorkerWebpackPlugin({
entry: path.join(__dirname, '..', 'src/sw.js'), entry: path.join(__dirname, '..', 'src/sw.js'),
filename: 'sw-pleroma.js' filename: 'sw-pleroma.js'
}),
new FontelloPlugin({
config: require('../static/fontello.json'),
host: 'https://fontello.com',
name: 'fontello',
output: {
css: 'static/[name].' + now + '.css', // [hash] is not supported. Use the current timestamp instead for versioning.
font: 'static/font/[name].' + now + '.[ext]'
}
}) })
] ]
} }

View file

@ -18,6 +18,10 @@
"dependencies": { "dependencies": {
"@babel/runtime": "^7.7.6", "@babel/runtime": "^7.7.6",
"@chenfengyuan/vue-qrcode": "^1.0.0", "@chenfengyuan/vue-qrcode": "^1.0.0",
"@fortawesome/fontawesome-svg-core": "^1.2.32",
"@fortawesome/free-regular-svg-icons": "^5.15.1",
"@fortawesome/free-solid-svg-icons": "^5.15.1",
"@fortawesome/vue-fontawesome": "^2.0.0",
"body-scroll-lock": "^2.6.4", "body-scroll-lock": "^2.6.4",
"chromatism": "^3.0.0", "chromatism": "^3.0.0",
"cropperjs": "^1.4.3", "cropperjs": "^1.4.3",
@ -68,7 +72,6 @@
"eventsource-polyfill": "^0.9.6", "eventsource-polyfill": "^0.9.6",
"express": "^4.13.3", "express": "^4.13.3",
"file-loader": "^3.0.1", "file-loader": "^3.0.1",
"fontello-webpack-plugin": "https://github.com/w3geo/fontello-webpack-plugin.git#6149eac8f2672ab6da089e8802fbfcac98487186",
"function-bind": "^1.0.2", "function-bind": "^1.0.2",
"html-webpack-plugin": "^3.0.0", "html-webpack-plugin": "^3.0.0",
"http-proxy-middleware": "^0.17.2", "http-proxy-middleware": "^0.17.2",

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);
} }
@ -106,7 +106,8 @@ button {
color: var(--btnPressedText, $fallback--text); color: var(--btnPressedText, $fallback--text);
background-color: $fallback--fg; background-color: $fallback--fg;
background-color: var(--btnPressed, $fallback--fg); background-color: var(--btnPressed, $fallback--fg);
i {
svg, i {
color: $fallback--text; color: $fallback--text;
color: var(--btnPressedText, $fallback--text); color: var(--btnPressedText, $fallback--text);
} }
@ -118,7 +119,8 @@ button {
color: var(--btnDisabledText, $fallback--text); color: var(--btnDisabledText, $fallback--text);
background-color: $fallback--fg; background-color: $fallback--fg;
background-color: var(--btnDisabled, $fallback--fg); background-color: var(--btnDisabled, $fallback--fg);
i {
svg, i {
color: $fallback--text; color: $fallback--text;
color: var(--btnDisabledText, $fallback--text); color: var(--btnDisabledText, $fallback--text);
} }
@ -131,7 +133,8 @@ button {
background-color: var(--btnToggled, $fallback--fg); 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: 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); box-shadow: var(--buttonPressedShadow);
i {
svg, i {
color: $fallback--text; color: $fallback--text;
color: var(--btnToggledText, $fallback--text); color: var(--btnToggledText, $fallback--text);
} }
@ -185,7 +188,7 @@ input, textarea, .select, .input {
opacity: 0.5; opacity: 0.5;
} }
.icon-down-open { .select-down-icon {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -318,7 +321,7 @@ option {
} }
} }
i[class*=icon-] { i[class*=icon-], .svg-inline--fa {
color: $fallback--icon; color: $fallback--icon;
color: var(--icon, $fallback--icon); color: var(--icon, $fallback--icon);
} }
@ -365,7 +368,9 @@ i[class*=icon-] {
flex-wrap: wrap; flex-wrap: wrap;
.nav-icon { .nav-icon {
margin-left: 0.4em; margin-left: 0.2em;
width: 2em;
text-align: center;
} }
&.right { &.right {
@ -386,7 +391,7 @@ i[class*=icon-] {
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);
} }
@ -460,7 +465,7 @@ i[class*=icon-] {
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);
} }
@ -807,8 +812,16 @@ nav {
} }
} }
.button-icon { .fa-scale-110 {
font-size: 1.2em; &.svg-inline--fa {
font-size: 1.1em;
}
}
.fa-old-padding {
&.svg-inline--fa {
padding: 0 0.3em;
}
} }
@keyframes shakeError { @keyframes shakeError {

View file

@ -42,36 +42,42 @@
<div class="item right"> <div class="item right">
<search-bar <search-bar
v-if="currentUser || !privateMode" v-if="currentUser || !privateMode"
class="nav-icon mobile-hidden" class="mobile-hidden"
@toggled="onSearchBarToggled" @toggled="onSearchBarToggled"
@click.stop.native @click.stop.native
/> />
<a <a
href="#" href="#"
class="mobile-hidden" class="mobile-hidden nav-icon"
@click.stop="openSettingsModal" @click.stop="openSettingsModal"
> >
<i <FAIcon
class="button-icon icon-cog nav-icon" fixed-width
class="fa-scale-110 fa-old-padding"
icon="cog"
:title="$t('nav.preferences')" :title="$t('nav.preferences')"
/> />
</a> </a>
<a <a
v-if="currentUser && currentUser.role === 'admin'" v-if="currentUser && currentUser.role === 'admin'"
href="/pleroma/admin/#/login-pleroma" href="/pleroma/admin/#/login-pleroma"
class="mobile-hidden" class="mobile-hidden nav-icon"
target="_blank" target="_blank"
><i ><FAIcon
class="button-icon icon-gauge nav-icon" fixed-width
class="fa-scale-110 fa-old-padding"
icon="tachometer-alt"
:title="$t('nav.administration')" :title="$t('nav.administration')"
/></a> /></a>
<a <a
v-if="currentUser" v-if="currentUser"
href="#" href="#"
class="mobile-hidden" class="mobile-hidden nav-icon"
@click.prevent="logout" @click.prevent="logout"
><i ><FAIcon
class="button-icon icon-logout nav-icon" fixed-width
class="fa-scale-110 fa-old-padding"
icon="sign-out-alt"
:title="$t('login.logout')" :title="$t('login.logout')"
/></a> /></a>
</div> </div>

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,10 @@
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 +76,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

@ -3,6 +3,20 @@ import VideoAttachment from '../video_attachment/video_attachment.vue'
import nsfwImage from '../../assets/nsfw.png' import nsfwImage from '../../assets/nsfw.png'
import fileTypeService from '../../services/file_type/file_type.service.js' import fileTypeService from '../../services/file_type/file_type.service.js'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faFile,
faMusic,
faImage,
faVideo
} from '@fortawesome/free-solid-svg-icons'
library.add(
faFile,
faMusic,
faImage,
faVideo
)
const Attachment = { const Attachment = {
props: [ props: [
@ -39,10 +53,10 @@ const Attachment = {
return this.attachment.description return this.attachment.description
}, },
placeholderIconClass () { placeholderIconClass () {
if (this.type === 'image') return 'icon-picture' if (this.type === 'image') return 'image'
if (this.type === 'video') return 'icon-video' if (this.type === 'video') return 'video'
if (this.type === 'audio') return 'icon-music' if (this.type === 'audio') return 'music'
return 'icon-doc' return 'file'
}, },
referrerpolicy () { referrerpolicy () {
return this.$store.state.instance.mediaProxyAvailable ? '' : 'no-referrer' return this.$store.state.instance.mediaProxyAvailable ? '' : 'no-referrer'

View file

@ -12,7 +12,7 @@
:alt="attachment.description" :alt="attachment.description"
:title="attachment.description" :title="attachment.description"
> >
<span :class="placeholderIconClass" /> <FAIcon :icon="placeholderIconClass" />
<b>{{ nsfw ? "NSFW / " : "" }}</b>{{ placeholderName }} <b>{{ nsfw ? "NSFW / " : "" }}</b>{{ placeholderName }}
</a> </a>
</div> </div>
@ -36,9 +36,10 @@
:src="nsfwImage" :src="nsfwImage"
:class="{'small': isSmall}" :class="{'small': isSmall}"
> >
<i <FAIcon
v-if="type === 'video'" v-if="type === 'video'"
class="play-icon icon-play-circled" class="play-icon"
icon="play-circle"
/> />
</a> </a>
<div <div
@ -83,9 +84,10 @@
@play="$emit('play')" @play="$emit('play')"
@pause="$emit('pause')" @pause="$emit('pause')"
/> />
<i <FAIcon
v-if="!allowPlay" v-if="!allowPlay"
class="play-icon icon-play-circled" class="play-icon"
icon="play-circle"
/> />
</a> </a>
@ -142,6 +144,10 @@
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 100%; max-width: 100%;
svg {
color: inherit;
}
} }
.nsfw-placeholder { .nsfw-placeholder {

View file

@ -7,6 +7,16 @@ import ChatTitle from '../chat_title/chat_title.vue'
import chatService from '../../services/chat_service/chat_service.js' import chatService from '../../services/chat_service/chat_service.js'
import { promiseInterval } from '../../services/promise_interval/promise_interval.js' import { promiseInterval } from '../../services/promise_interval/promise_interval.js'
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 {
faChevronDown,
faChevronLeft
} from '@fortawesome/free-solid-svg-icons'
library.add(
faChevronDown,
faChevronLeft
)
const BOTTOMED_OUT_OFFSET = 10 const BOTTOMED_OUT_OFFSET = 10
const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 150 const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 150

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,10 @@
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
@ -58,14 +61,15 @@
:class="{ 'visible': jumpToBottomButtonVisible }" :class="{ 'visible': jumpToBottomButtonVisible }"
@click="scrollDown({ behavior: 'smooth' })" @click="scrollDown({ behavior: 'smooth' })"
> >
<i class="icon-down-open"> <span>
<FAIcon icon="chevron-down" />
<div <div
v-if="newMessageCount" v-if="newMessageCount"
class="badge badge-notification unread-chat-count unread-message-count" class="badge badge-notification unread-chat-count unread-message-count"
> >
{{ newMessageCount }} {{ newMessageCount }}
</div> </div>
</i> </span>
</div> </div>
<PostStatusForm <PostStatusForm
:disable-subject="true" :disable-subject="true"

View file

@ -7,6 +7,16 @@ import LinkPreview from '../link-preview/link-preview.vue'
import StatusContent from '../status_content/status_content.vue' import StatusContent from '../status_content/status_content.vue'
import ChatMessageDate from '../chat_message_date/chat_message_date.vue' 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 {
faTimes,
faEllipsisH
} from '@fortawesome/free-solid-svg-icons'
library.add(
faTimes,
faEllipsisH
)
const ChatMessage = { const ChatMessage = {
name: 'ChatMessage', name: '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

@ -56,15 +56,16 @@
class="dropdown-item dropdown-item-icon" class="dropdown-item dropdown-item-icon"
@click="deleteMessage" @click="deleteMessage"
> >
<i class="icon-cancel" /> {{ $t("chats.delete") }} <FAIcon icon="times" /> {{ $t("chats.delete") }}
</button> </button>
</div> </div>
</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,18 @@
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
class="search-icon fa-scale-110 fa-old-padding"
icon="search"
/>
</div> </div>
<input <input
ref="search" ref="search"

View file

@ -1,4 +1,14 @@
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 {
faBullhorn,
faTimes
} from '@fortawesome/free-solid-svg-icons'
library.add(
faBullhorn,
faTimes
)
const chatPanel = { const chatPanel = {
props: [ 'floating' ], props: [ 'floating' ],

View file

@ -11,9 +11,9 @@
> >
<div class="title"> <div class="title">
<span>{{ $t('shoutbox.title') }}</span> <span>{{ $t('shoutbox.title') }}</span>
<i <FAIcon
v-if="floating" v-if="floating"
class="icon-cancel" icon="times"
/> />
</div> </div>
</div> </div>
@ -63,7 +63,10 @@
@click.stop.prevent="togglePanel" @click.stop.prevent="togglePanel"
> >
<div class="title"> <div class="title">
<i class="icon-megaphone" /> <FAIcon
class="icon"
icon="bullhorn"
/>
{{ $t('shoutbox.title') }} {{ $t('shoutbox.title') }}
</div> </div>
</div> </div>
@ -87,7 +90,8 @@
.chat-panel { .chat-panel {
.chat-heading { .chat-heading {
cursor: pointer; cursor: pointer;
.icon-comment-empty {
.icon {
color: $fallback--text; color: $fallback--text;
color: var(--text, $fallback--text); color: var(--text, $fallback--text);
} }

View file

@ -8,13 +8,13 @@
class="rating" class="rating"
> >
<span v-if="contrast.aaa"> <span v-if="contrast.aaa">
<i class="icon-thumbs-up-alt" /> <FAIcon icon="thumbs-up" />
</span> </span>
<span v-if="!contrast.aaa && contrast.aa"> <span v-if="!contrast.aaa && contrast.aa">
<i class="icon-adjust" /> <FAIcon icon="adjust" />
</span> </span>
<span v-if="!contrast.aaa && !contrast.aa"> <span v-if="!contrast.aaa && !contrast.aa">
<i class="icon-attention" /> <FAIcon icon="exclamation-triangle" />
</span> </span>
</span> </span>
<span <span
@ -23,19 +23,32 @@
:title="hint_18pt" :title="hint_18pt"
> >
<span v-if="contrast.laaa"> <span v-if="contrast.laaa">
<i class="icon-thumbs-up-alt" /> <FAIcon icon="thumbs-up" />
</span> </span>
<span v-if="!contrast.laaa && contrast.laa"> <span v-if="!contrast.laaa && contrast.laa">
<i class="icon-adjust" /> <FAIcon icon="adjust" />
</span> </span>
<span v-if="!contrast.laaa && !contrast.laa"> <span v-if="!contrast.laaa && !contrast.laa">
<i class="icon-attention" /> <FAIcon icon="exclamation-triangle" />
</span> </span>
</span> </span>
</span> </span>
</template> </template>
<script> <script>
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faAdjust,
faExclamationTriangle,
faThumbsUp
} from '@fortawesome/free-solid-svg-icons'
library.add(
faAdjust,
faExclamationTriangle,
faThumbsUp
)
export default { export default {
props: { props: {
large: { large: {
@ -85,6 +98,7 @@ export default {
.rating { .rating {
display: inline-block; display: inline-block;
text-align: center; text-align: center;
margin-left: 0.5em;
} }
} }
</style> </style>

View file

@ -3,6 +3,15 @@ import EmojiPicker from '../emoji_picker/emoji_picker.vue'
import { take } from 'lodash' import { take } from 'lodash'
import { findOffset } from '../../services/offset_finder/offset_finder.service.js' import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faSmileBeam
} from '@fortawesome/free-regular-svg-icons'
library.add(
faSmileBeam
)
/** /**
* EmojiInput - augmented inputs for emoji and autocomplete support in inputs * EmojiInput - augmented inputs for emoji and autocomplete support in inputs
* without having to give up the comfort of <input/> and <textarea/> elements * without having to give up the comfort of <input/> and <textarea/> elements

View file

@ -11,7 +11,7 @@
class="emoji-picker-icon" class="emoji-picker-icon"
@click.prevent="togglePicker" @click.prevent="togglePicker"
> >
<i class="icon-smile" /> <FAIcon :icon="['far', 'smile-beam']" />
</div> </div>
<EmojiPicker <EmojiPicker
v-if="enableEmojiPicker" v-if="enableEmojiPicker"

View file

@ -1,4 +1,16 @@
import Checkbox from '../checkbox/checkbox.vue' import Checkbox from '../checkbox/checkbox.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faBoxOpen,
faStickyNote,
faSmileBeam
} from '@fortawesome/free-solid-svg-icons'
library.add(
faBoxOpen,
faStickyNote,
faSmileBeam
)
// At widest, approximately 20 emoji are visible in a row, // At widest, approximately 20 emoji are visible in a row,
// loading 3 rows, could be overkill for narrow picker // loading 3 rows, could be overkill for narrow picker
@ -177,13 +189,13 @@ const EmojiPicker = {
{ {
id: 'custom', id: 'custom',
text: this.$t('emoji.custom'), text: this.$t('emoji.custom'),
icon: 'icon-smile', icon: 'smile-beam',
emojis: customEmojis emojis: customEmojis
}, },
{ {
id: 'standard', id: 'standard',
text: this.$t('emoji.unicode'), text: this.$t('emoji.unicode'),
icon: 'icon-picture', icon: 'box-open',
emojis: filterByKeyword(standardEmojis, this.keyword) emojis: filterByKeyword(standardEmojis, this.keyword)
} }
] ]

View file

@ -82,7 +82,7 @@
&.active { &.active {
border-bottom: 4px solid; border-bottom: 4px solid;
i { svg {
color: $fallback--lightText; color: $fallback--lightText;
color: var(--lightText, $fallback--lightText); color: var(--lightText, $fallback--lightText);
} }

View file

@ -13,7 +13,10 @@
:title="group.text" :title="group.text"
@click.prevent="highlight(group.id)" @click.prevent="highlight(group.id)"
> >
<i :class="group.icon" /> <FAIcon
:icon="group.icon"
fixed-width
/>
</span> </span>
</span> </span>
<span <span
@ -26,7 +29,10 @@
:title="$t('emoji.stickers')" :title="$t('emoji.stickers')"
@click.prevent="toggleStickers" @click.prevent="toggleStickers"
> >
<i class="icon-star" /> <FAIcon
icon="sticky-note"
fixed-width
/>
</span> </span>
</span> </span>
</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 = { const Exporter = {
props: { props: {
getContent: { getContent: {

View file

@ -1,7 +1,12 @@
<template> <template>
<div class="exporter"> <div class="exporter">
<div v-if="processing"> <div v-if="processing">
<i class="icon-spin4 animate-spin exporter-processing" /> <FAIcon
icon="circle-notch"
size="lg"
spin
/>
<span>{{ processingMessage }}</span> <span>{{ processingMessage }}</span>
</div> </div>
<button <button
@ -19,7 +24,6 @@
<style lang="scss"> <style lang="scss">
.exporter { .exporter {
&-processing { &-processing {
font-size: 1.5em;
margin: 0.25em; margin: 0.25em;
} }
} }

View file

@ -1,4 +1,24 @@
import Popover from '../popover/popover.vue' import Popover from '../popover/popover.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
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,
faBookmark,
faBookmarkReg,
faEyeSlash,
faThumbtack,
faShareAlt
)
const ExtraButtons = { const ExtraButtons = {
props: [ 'status' ], props: [ 'status' ],

View file

@ -15,14 +15,22 @@
class="dropdown-item dropdown-item-icon" class="dropdown-item dropdown-item-icon"
@click.prevent="muteConversation" @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>
<button <button
v-if="canMute && status.thread_muted" v-if="canMute && status.thread_muted"
class="dropdown-item dropdown-item-icon" class="dropdown-item dropdown-item-icon"
@click.prevent="unmuteConversation" @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>
<button <button
v-if="!status.pinned && canPin" v-if="!status.pinned && canPin"
@ -30,7 +38,11 @@
@click.prevent="pinStatus" @click.prevent="pinStatus"
@click="close" @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>
<button <button
v-if="status.pinned && canPin" v-if="status.pinned && canPin"
@ -38,7 +50,11 @@
@click.prevent="unpinStatus" @click.prevent="unpinStatus"
@click="close" @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>
<button <button
v-if="!status.bookmarked" v-if="!status.bookmarked"
@ -46,7 +62,11 @@
@click.prevent="bookmarkStatus" @click.prevent="bookmarkStatus"
@click="close" @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>
<button <button
v-if="status.bookmarked" v-if="status.bookmarked"
@ -54,7 +74,11 @@
@click.prevent="unbookmarkStatus" @click.prevent="unbookmarkStatus"
@click="close" @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>
<button <button
v-if="canDelete" v-if="canDelete"
@ -62,21 +86,32 @@
@click.prevent="deleteStatus" @click.prevent="deleteStatus"
@click="close" @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>
<button <button
class="dropdown-item dropdown-item-icon" class="dropdown-item dropdown-item-icon"
@click.prevent="copyLink" @click.prevent="copyLink"
@click="close" @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> </button>
</div> </div>
</div> </div>
<i <span slot="trigger">
slot="trigger" <FAIcon
class="icon-ellipsis button-icon" class="ExtraButtons fa-scale-110 fa-old-padding"
icon="ellipsis-h"
size="md"
/> />
</span>
</Popover> </Popover>
</template> </template>
@ -85,8 +120,9 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.icon-ellipsis { .ExtraButtons {
cursor: pointer; cursor: pointer;
position: static;
&:hover, &:hover,
.extra-button-popover.open & { .extra-button-popover.open & {

View file

@ -1,4 +1,14 @@
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faStar } from '@fortawesome/free-solid-svg-icons'
import {
faStar as faStarRegular
} from '@fortawesome/free-regular-svg-icons'
library.add(
faStar,
faStarRegular
)
const FavoriteButton = { const FavoriteButton = {
props: ['status', 'loggedIn'], props: ['status', 'loggedIn'],
@ -23,9 +33,7 @@ const FavoriteButton = {
computed: { computed: {
classes () { classes () {
return { return {
'icon-star-empty': !this.status.favorited, '-favorited': this.status.favorited
'icon-star': this.status.favorited,
'animate-spin': this.animated
} }
}, },
...mapGetters(['mergedConfig']) ...mapGetters(['mergedConfig'])

View file

@ -1,18 +1,21 @@
<template> <template>
<div v-if="loggedIn"> <div v-if="loggedIn">
<i <FAIcon
:class="classes" :class="classes"
class="button-icon favorite-button fav-active" class="FavoriteButton fa-scale-110 fa-old-padding -interactive"
:title="$t('tool_tip.favorite')" :title="$t('tool_tip.favorite')"
:icon="[status.favorited ? 'fas' : 'far', 'star']"
:spin="animated"
@click.prevent="favorite()" @click.prevent="favorite()"
/> />
<span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span> <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
</div> </div>
<div v-else> <div v-else>
<i <FAIcon
:class="classes" :class="classes"
class="button-icon favorite-button" class="FavoriteButton fa-scale-110 fa-old-padding"
:title="$t('tool_tip.favorite')" :title="$t('tool_tip.favorite')"
:icon="['far', 'star']"
/> />
<span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span> <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
</div> </div>
@ -23,7 +26,8 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.fav-active { .FavoriteButton {
&.-interactive {
cursor: pointer; cursor: pointer;
animation-duration: 0.6s; animation-duration: 0.6s;
@ -33,8 +37,9 @@
} }
} }
.favorite-button.icon-star { &.-favorited {
color: $fallback--cOrange; color: $fallback--cOrange;
color: var(--cOrange, $fallback--cOrange); color: var(--cOrange, $fallback--cOrange);
} }
}
</style> </style>

View file

@ -1,4 +1,12 @@
import { set } from 'vue' import { set } from 'vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faChevronDown
} from '@fortawesome/free-solid-svg-icons'
library.add(
faChevronDown
)
export default { export default {
props: [ props: [

View file

@ -41,7 +41,10 @@
{{ option === 'custom' ? $t('settings.style.fonts.custom') : option }} {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
</option> </option>
</select> </select>
<i class="icon-down-open" /> <FAIcon
class="select-down-icon"
icon="chevron-down"
/>
</label> </label>
<input <input
v-if="isCustom" v-if="isCustom"

View file

@ -1,3 +1,11 @@
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faTimes
} from '@fortawesome/free-solid-svg-icons'
library.add(
faTimes
)
const GlobalNoticeList = { const GlobalNoticeList = {
computed: { computed: {

View file

@ -9,8 +9,9 @@
<div class="notice-message"> <div class="notice-message">
{{ $t(notice.messageKey, notice.messageArgs) }} {{ $t(notice.messageKey, notice.messageArgs) }}
</div> </div>
<i <FAIcon
class="button-icon icon-cancel" class="fa-scale-110 fa-old-padding"
icon="times"
@click="closeNotice(notice)" @click="closeNotice(notice)"
/> />
</div> </div>

View file

@ -1,5 +1,15 @@
import Cropper from 'cropperjs' import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css' import 'cropperjs/dist/cropper.css'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faTimes,
faCircleNotch
} from '@fortawesome/free-solid-svg-icons'
library.add(
faTimes,
faCircleNotch
)
const ImageCropper = { const ImageCropper = {
props: { props: {

View file

@ -31,9 +31,10 @@
@click="submit(false)" @click="submit(false)"
v-text="saveWithoutCroppingText" v-text="saveWithoutCroppingText"
/> />
<i <FAIcon
v-if="submitting" v-if="submitting"
class="icon-spin4 animate-spin" spin
icon="circle-notch"
/> />
</div> </div>
<div <div
@ -41,8 +42,9 @@
class="alert error" class="alert error"
> >
{{ submitErrorMsg }} {{ submitErrorMsg }}
<i <FAIcon
class="button-icon icon-cancel" class="fa-scale-110 fa-old-padding"
icon="times"
@click="clearError" @click="clearError"
/> />
</div> </div>

View file

@ -1,3 +1,14 @@
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faCircleNotch,
faTimes
} from '@fortawesome/free-solid-svg-icons'
library.add(
faCircleNotch,
faTimes
)
const Importer = { const Importer = {
props: { props: {
submitHandler: { submitHandler: {

View file

@ -7,9 +7,11 @@
@change="change" @change="change"
> >
</form> </form>
<i <FAIcon
v-if="submitting" v-if="submitting"
class="icon-spin4 animate-spin importer-uploading" class="importer-uploading"
spin
icon="circle-notch"
/> />
<button <button
v-else v-else
@ -19,15 +21,15 @@
{{ submitButtonLabel }} {{ submitButtonLabel }}
</button> </button>
<div v-if="success"> <div v-if="success">
<i <FAIcon
class="icon-cross" icon="times"
@click="dismiss" @click="dismiss"
/> />
<p>{{ successMessage }}</p> <p>{{ successMessage }}</p>
</div> </div>
<div v-else-if="error"> <div v-else-if="error">
<i <FAIcon
class="icon-cross" icon="times"
@click="dismiss" @click="dismiss"
/> />
<p>{{ errorMessage }}</p> <p>{{ errorMessage }}</p>

View file

@ -19,7 +19,10 @@
{{ languageNames[i] }} {{ languageNames[i] }}
</option> </option>
</select> </select>
<i class="icon-down-open" /> <FAIcon
class="select-down-icon"
icon="chevron-down"
/>
</label> </label>
</div> </div>
</template> </template>
@ -28,6 +31,14 @@
import languagesObject from '../../i18n/messages' import languagesObject from '../../i18n/messages'
import ISO6391 from 'iso-639-1' import ISO6391 from 'iso-639-1'
import _ from 'lodash' import _ from 'lodash'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faChevronDown
} from '@fortawesome/free-solid-svg-icons'
library.add(
faChevronDown
)
export default { export default {
computed: { computed: {

View file

@ -1,5 +1,13 @@
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex' import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
import oauthApi from '../../services/new_api/oauth.js' import oauthApi from '../../services/new_api/oauth.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faTimes
} from '@fortawesome/free-solid-svg-icons'
library.add(
faTimes
)
const LoginForm = { const LoginForm = {
data: () => ({ data: () => ({

View file

@ -76,8 +76,9 @@
> >
<div class="alert error"> <div class="alert error">
{{ error }} {{ error }}
<i <FAIcon
class="button-icon icon-cancel" class="fa-scale-110 fa-old-padding"
icon="times"
@click="clearError" @click="clearError"
/> />
</div> </div>

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,10 @@
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 +45,10 @@
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

@ -2,6 +2,14 @@
import statusPosterService from '../../services/status_poster/status_poster.service.js' import statusPosterService from '../../services/status_poster/status_poster.service.js'
import fileSizeFormatService from '../../services/file_size_format/file_size_format.js' import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faUpload, faCircleNotch } from '@fortawesome/free-solid-svg-icons'
library.add(
faUpload,
faCircleNotch
)
const mediaUpload = { const mediaUpload = {
data () { data () {
return { return {

View file

@ -7,13 +7,16 @@
class="label" class="label"
:title="$t('tool_tip.media_upload')" :title="$t('tool_tip.media_upload')"
> >
<i <FAIcon
v-if="uploading" v-if="uploading"
class="progress-icon icon-spin4 animate-spin" class="progress-icon"
icon="circle-notch"
spin
/> />
<i <FAIcon
v-if="!uploading" v-if="!uploading"
class="new-icon icon-upload" class="new-icon"
icon="upload"
/> />
<input <input
v-if="uploadReady" v-if="uploadReady"
@ -40,15 +43,5 @@
.new-icon { .new-icon {
cursor: pointer; cursor: pointer;
} }
.progress-icon {
display: inline-block;
line-height: 0;
&::before {
/* Overriding fontello to achieve the perfect speeeen */
margin: 0;
line-height: 0;
}
}
} }
</style> </style>

View file

@ -1,5 +1,13 @@
import mfaApi from '../../services/new_api/mfa.js' import mfaApi from '../../services/new_api/mfa.js'
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex' import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faTimes
} from '@fortawesome/free-solid-svg-icons'
library.add(
faTimes
)
export default { export default {
data: () => ({ data: () => ({

View file

@ -54,8 +54,9 @@
> >
<div class="alert error"> <div class="alert error">
{{ error }} {{ error }}
<i <FAIcon
class="button-icon icon-cancel" class="fa-scale-110 fa-old-padding"
icon="times"
@click="clearError" @click="clearError"
/> />
</div> </div>

View file

@ -1,5 +1,14 @@
import mfaApi from '../../services/new_api/mfa.js' import mfaApi from '../../services/new_api/mfa.js'
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex' import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faTimes
} from '@fortawesome/free-solid-svg-icons'
library.add(
faTimes
)
export default { export default {
data: () => ({ data: () => ({
code: null, code: null,

View file

@ -56,8 +56,10 @@
> >
<div class="alert error"> <div class="alert error">
{{ error }} {{ error }}
<i <FAIcon
class="button-icon icon-cancel" size="lg"
class="fa-scale-110 fa-old-padding"
icon="times"
@click="clearError" @click="clearError"
/> />
</div> </div>

View file

@ -3,6 +3,18 @@ import Notifications from '../notifications/notifications.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 { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faTimes,
faBell,
faBars
} from '@fortawesome/free-solid-svg-icons'
library.add(
faTimes,
faBell,
faBars
)
const MobileNav = { const MobileNav = {
components: { components: {

View file

@ -15,7 +15,10 @@
class="mobile-nav-button" class="mobile-nav-button"
@click.stop.prevent="toggleMobileSidebar()" @click.stop.prevent="toggleMobileSidebar()"
> >
<i class="button-icon icon-menu" /> <FAIcon
class="fa-scale-110 fa-old-padding"
icon="bars"
/>
<div <div
v-if="unreadChatCount" v-if="unreadChatCount"
class="alert-dot" class="alert-dot"
@ -37,7 +40,10 @@
href="#" href="#"
@click.stop.prevent="openMobileNotifications()" @click.stop.prevent="openMobileNotifications()"
> >
<i class="button-icon icon-bell-alt" /> <FAIcon
class="fa-scale-110 fa-old-padding"
icon="bell"
/>
<div <div
v-if="unseenNotificationsCount" v-if="unseenNotificationsCount"
class="alert-dot" class="alert-dot"
@ -59,7 +65,10 @@
class="mobile-nav-button" class="mobile-nav-button"
@click.stop.prevent="closeMobileNotifications()" @click.stop.prevent="closeMobileNotifications()"
> >
<i class="button-icon icon-cancel" /> <FAIcon
class="fa-scale-110 fa-old-padding"
icon="times"
/>
</a> </a>
</div> </div>
<div <div
@ -91,9 +100,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

@ -1,6 +1,29 @@
import { timelineNames } from '../timeline_menu/timeline_menu.js' import { timelineNames } from '../timeline_menu/timeline_menu.js'
import { mapState, mapGetters } from 'vuex' import { mapState, mapGetters } from 'vuex'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faUsers,
faGlobe,
faBookmark,
faEnvelope,
faHome,
faComments,
faBell,
faInfoCircle
} from '@fortawesome/free-solid-svg-icons'
library.add(
faUsers,
faGlobe,
faBookmark,
faEnvelope,
faHome,
faComments,
faBell,
faInfoCircle
)
const NavPanel = { const NavPanel = {
created () { created () {
if (this.currentUser && this.currentUser.locked) { if (this.currentUser && this.currentUser.locked) {

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="nav-panel"> <div class="NavPanel">
<div class="panel panel-default"> <div class="panel panel-default">
<ul> <ul>
<li v-if="currentUser || !privateMode"> <li v-if="currentUser || !privateMode">
@ -7,12 +7,20 @@
:to="{ name: timelinesRoute }" :to="{ name: timelinesRoute }"
:class="onTimelineRoute && 'router-link-active'" :class="onTimelineRoute && 'router-link-active'"
> >
<i class="button-icon icon-home-2" />{{ $t("nav.timelines") }} <FAIcon
fixed-width
class="fa-scale-110"
icon="home"
/>{{ $t("nav.timelines") }}
</router-link> </router-link>
</li> </li>
<li v-if="currentUser"> <li v-if="currentUser">
<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
fixed-width
class="fa-scale-110"
icon="bell"
/>{{ $t("nav.interactions") }}
</router-link> </router-link>
</li> </li>
<li v-if="currentUser && pleromaChatMessagesAvailable"> <li v-if="currentUser && pleromaChatMessagesAvailable">
@ -23,12 +31,20 @@
> >
{{ unreadChatCount }} {{ unreadChatCount }}
</div> </div>
<i class="button-icon icon-chat" />{{ $t("nav.chats") }} <FAIcon
fixed-width
class="fa-scale-110"
icon="comments"
/>{{ $t("nav.chats") }}
</router-link> </router-link>
</li> </li>
<li v-if="currentUser && currentUser.locked"> <li v-if="currentUser && currentUser.locked">
<router-link :to="{ name: 'friend-requests' }"> <router-link :to="{ name: 'friend-requests' }">
<i class="button-icon icon-user-plus" />{{ $t("nav.friend_requests") }} <FAIcon
fixed-width
class="fa-scale-110"
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"
@ -39,7 +55,11 @@
</li> </li>
<li> <li>
<router-link :to="{ name: 'about' }"> <router-link :to="{ name: 'about' }">
<i class="button-icon icon-info-circled" />{{ $t("nav.about") }} <FAIcon
fixed-width
class="fa-scale-110"
icon="info-circle"
/>{{ $t("nav.about") }}
</router-link> </router-link>
</li> </li>
</ul> </ul>
@ -52,23 +72,25 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.nav-panel .panel { .NavPanel {
.panel {
overflow: hidden; overflow: hidden;
box-shadow: var(--panelShadow); box-shadow: var(--panelShadow);
} }
.nav-panel ul {
ul {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.follow-request-count { .follow-request-count {
margin: -6px 10px; vertical-align: baseline;
background-color: $fallback--bg; background-color: $fallback--bg;
background-color: var(--input, $fallback--faint); background-color: var(--input, $fallback--faint);
} }
.nav-panel li { li {
border-bottom: 1px solid; border-bottom: 1px solid;
border-color: $fallback--border; border-color: $fallback--border;
border-color: var(--border, $fallback--border); border-color: var(--border, $fallback--border);
@ -89,13 +111,17 @@
} }
} }
.nav-panel li:last-child { li:last-child {
border: none; border: none;
} }
.nav-panel a { a {
display: block; display: block;
padding: 0.8em 0.85em; box-sizing: border-box;
align-items: stretch;
height: 3.5em;
line-height: 3.5em;
padding: 0 1em;
&:hover { &:hover {
background-color: $fallback--lightBg; background-color: $fallback--lightBg;
@ -125,11 +151,8 @@
} }
} }
.nav-panel .button-icon { .fa-scale-110 {
margin-right: 0.5em; margin-right: 0.8em;
} }
.nav-panel .button-icon:before {
width: 1.1em;
} }
</style> </style>

View file

@ -7,6 +7,28 @@ import Timeago from '../timeago/timeago.vue'
import { isStatusNotification } from '../../services/notification_utils/notification_utils.js' import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.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 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 = { const Notification = {
data () { data () {

View file

@ -1,3 +1,5 @@
@import '../../_variables.scss';
// TODO Copypaste from Status, should unify it somehow // TODO Copypaste from Status, should unify it somehow
.Notification { .Notification {
&.-muted { &.-muted {
@ -49,4 +51,34 @@
display: block; 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> <template>
<status <Status
v-if="notification.type === 'mention'" v-if="notification.type === 'mention'"
:compact="true" :compact="true"
:statusoid="notification.status" :statusoid="notification.status"
@ -18,12 +18,15 @@
href="#" href="#"
class="unmute" class="unmute"
@click.prevent="toggleMute" @click.prevent="toggleMute"
><i class="button-icon icon-eye-off" /></a> ><FAIcon
class="fa-scale-110 fa-old-padding"
icon="eye-slash"
/></a>
</div> </div>
<div <div
v-else v-else
class="non-mention" class="Notification non-mention"
:class="[userClass, { highlighted: userStyle }]" :class="[userClass, { highlighted: userStyle }, '-type--' + notification.type]"
:style="[ userStyle ]" :style="[ userStyle ]"
> >
<a <a
@ -60,26 +63,39 @@
:title="'@'+notification.from_profile.screen_name" :title="'@'+notification.from_profile.screen_name"
>{{ notification.from_profile.name }}</span> >{{ notification.from_profile.name }}</span>
<span v-if="notification.type === 'like'"> <span v-if="notification.type === 'like'">
<i class="fa icon-star lit" /> <FAIcon
class="type-icon"
icon="star"
/>
<small>{{ $t('notifications.favorited_you') }}</small> <small>{{ $t('notifications.favorited_you') }}</small>
</span> </span>
<span v-if="notification.type === 'repeat'"> <span v-if="notification.type === 'repeat'">
<i <FAIcon
class="fa icon-retweet lit" class="type-icon"
icon="retweet"
:title="$t('tool_tip.repeat')" :title="$t('tool_tip.repeat')"
/> />
<small>{{ $t('notifications.repeated_you') }}</small> <small>{{ $t('notifications.repeated_you') }}</small>
</span> </span>
<span v-if="notification.type === 'follow'"> <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> <small>{{ $t('notifications.followed_you') }}</small>
</span> </span>
<span v-if="notification.type === 'follow_request'"> <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> <small>{{ $t('notifications.follow_request') }}</small>
</span> </span>
<span v-if="notification.type === 'move'"> <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> <small>{{ $t('notifications.migrated_to') }}</small>
</span> </span>
<span v-if="notification.type === 'pleroma:emoji_reaction'"> <span v-if="notification.type === 'pleroma:emoji_reaction'">
@ -120,7 +136,10 @@
v-if="needMute" v-if="needMute"
href="#" href="#"
@click.prevent="toggleMute" @click.prevent="toggleMute"
><i class="button-icon icon-eye-off" /></a> ><FAIcon
class="fa-scale-110 fa-old-padding"
icon="eye-slash"
/></a>
</span> </span>
<div <div
v-if="notification.type === 'follow' || notification.type === 'follow_request'" v-if="notification.type === 'follow' || notification.type === 'follow_request'"
@ -136,13 +155,15 @@
v-if="notification.type === 'follow_request'" v-if="notification.type === 'follow_request'"
style="white-space: nowrap;" style="white-space: nowrap;"
> >
<i <FAIcon
class="icon-ok button-icon follow-request-accept" icon="check"
class="fa-scale-110 fa-old-padding follow-request-accept"
:title="$t('tool_tip.accept_follow_request')" :title="$t('tool_tip.accept_follow_request')"
@click="approveUser()" @click="approveUser()"
/> />
<i <FAIcon
class="icon-cancel button-icon follow-request-reject" icon="times"
class="fa-scale-110 fa-old-padding follow-request-reject"
:title="$t('tool_tip.reject_follow_request')" :title="$t('tool_tip.reject_follow_request')"
@click="denyUser()" @click="denyUser()"
/> />

View file

@ -6,6 +6,12 @@ import {
filteredNotificationsFromStore, filteredNotificationsFromStore,
unseenNotificationsFromStore unseenNotificationsFromStore
} from '../../services/notification_utils/notification_utils.js' } 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 const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30

View file

@ -158,37 +158,6 @@
margin-right: .2em; 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 { .status-content {
margin: 0; margin: 0;
max-height: 300px; max-height: 300px;

View file

@ -61,7 +61,11 @@
v-else v-else
class="new-status-notification text-center panel-footer" class="new-status-notification text-center panel-footer"
> >
<i class="icon-spin3 animate-spin" /> <FAIcon
icon="circle-notch"
spin
size="lg"
/>
</div> </div>
</div> </div>
</div> </div>

View file

@ -1,12 +1,25 @@
<template> <template>
<div class="panel-loading"> <div class="panel-loading">
<span class="loading-text"> <span class="loading-text">
<i class="icon-spin4 animate-spin" /> <FAIcon
icon="circle-notch"
spin
size="3x"
/>
{{ $t('general.loading') }} {{ $t('general.loading') }}
</span> </span>
</div> </div>
</template> </template>
<script>
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
library.add(
faCircleNotch
)
</script>
<style lang="scss"> <style lang="scss">
@import 'src/_variables.scss'; @import 'src/_variables.scss';
@ -18,8 +31,7 @@
font-size: 2em; font-size: 2em;
color: $fallback--text; color: $fallback--text;
color: var(--text, $fallback--text); color: var(--text, $fallback--text);
.loading-text i { .loading-text svg {
font-size: 3em;
line-height: 0; line-height: 0;
vertical-align: middle; vertical-align: middle;
color: $fallback--text; color: $fallback--text;

View file

@ -1,5 +1,13 @@
import { mapState } from 'vuex' import { mapState } from 'vuex'
import passwordResetApi from '../../services/new_api/password_reset.js' import passwordResetApi from '../../services/new_api/password_reset.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faTimes
} from '@fortawesome/free-solid-svg-icons'
library.add(
faTimes
)
const passwordReset = { const passwordReset = {
data: () => ({ data: () => ({

View file

@ -63,10 +63,10 @@
> >
<span>{{ error }}</span> <span>{{ error }}</span>
<a <a
class="button-icon dismiss" class="fa-scale-110 fa-old-padding dismiss"
@click.prevent="dismissError()" @click.prevent="dismissError()"
> >
<i class="icon-cancel" /> <FAIcon icon="times" />
</a> </a>
</p> </p>
</div> </div>
@ -122,7 +122,7 @@
padding-right: 2rem; padding-right: 2rem;
} }
.icon-cancel { .dismiss {
cursor: pointer; cursor: pointer;
} }
} }

View file

@ -1,5 +1,17 @@
import * as DateUtils from 'src/services/date_utils/date_utils.js' import * as DateUtils from 'src/services/date_utils/date_utils.js'
import { uniq } from 'lodash' import { uniq } from 'lodash'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faTimes,
faChevronDown,
faPlus
} from '@fortawesome/free-solid-svg-icons'
library.add(
faTimes,
faChevronDown,
faPlus
)
export default { export default {
name: 'PollForm', name: 'PollForm',

View file

@ -25,8 +25,9 @@
v-if="options.length > 2" v-if="options.length > 2"
class="icon-container" class="icon-container"
> >
<i <FAIcon
class="icon-cancel" icon="times"
class="delete"
@click="deleteOption(index)" @click="deleteOption(index)"
/> />
</div> </div>
@ -36,7 +37,11 @@
class="add-option faint" class="add-option faint"
@click="addOption" @click="addOption"
> >
<i class="icon-plus" /> <FAIcon
icon="plus"
size="sm"
/>
{{ $t("polls.add_option") }} {{ $t("polls.add_option") }}
</a> </a>
<div class="poll-type-expiry"> <div class="poll-type-expiry">
@ -56,7 +61,10 @@
<option value="single">{{ $t('polls.single_choice') }}</option> <option value="single">{{ $t('polls.single_choice') }}</option>
<option value="multiple">{{ $t('polls.multiple_choices') }}</option> <option value="multiple">{{ $t('polls.multiple_choices') }}</option>
</select> </select>
<i class="icon-down-open" /> <FAIcon
class="select-down-icon"
icon="chevron-down"
/>
</label> </label>
</div> </div>
<div <div
@ -84,7 +92,10 @@
{{ $t(`time.${unit}_short`, ['']) }} {{ $t(`time.${unit}_short`, ['']) }}
</option> </option>
</select> </select>
<i class="icon-down-open" /> <FAIcon
class="select-down-icon"
icon="chevron-down"
/>
</label> </label>
</div> </div>
</div> </div>
@ -104,6 +115,7 @@
.add-option { .add-option {
align-self: flex-start; align-self: flex-start;
padding-top: 0.25em; padding-top: 0.25em;
padding-left: 0.1em;
cursor: pointer; cursor: pointer;
} }
@ -125,9 +137,17 @@
.icon-container { .icon-container {
// Hack: Move the icon over the input box // Hack: Move the icon over the input box
width: 2em; width: 1.5em;
margin-left: -2em; margin-left: -1.5em;
z-index: 1; z-index: 1;
.delete {
cursor: pointer;
&:hover {
color: inherit;
}
}
} }
.poll-type-expiry { .poll-type-expiry {

View file

@ -27,7 +27,7 @@
<script src="./popover.js" /> <script src="./popover.js" />
<style lang=scss> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.popover { .popover {
@ -96,7 +96,7 @@
&-icon { &-icon {
padding-left: 0.5rem; padding-left: 0.5rem;
i { svg {
margin-right: 0.25rem; margin-right: 0.25rem;
color: var(--menuPopoverIcon, $fallback--icon) color: var(--menuPopoverIcon, $fallback--icon)
} }
@ -111,7 +111,7 @@
--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint); --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText); --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
--icon: var(--selectedMenuPopoverIcon, $fallback--icon); --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
i { svg {
color: var(--selectedMenuPopoverIcon, $fallback--icon); color: var(--selectedMenuPopoverIcon, $fallback--icon);
} }
} }

View file

@ -12,6 +12,27 @@ import suggestor from '../emoji_input/suggestor.js'
import { mapGetters, mapState } from 'vuex' import { mapGetters, mapState } from 'vuex'
import Checkbox from '../checkbox/checkbox.vue' import Checkbox from '../checkbox/checkbox.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faChevronDown,
faSmileBeam,
faPollH,
faUpload,
faBan,
faTimes,
faCircleNotch
} from '@fortawesome/free-solid-svg-icons'
library.add(
faChevronDown,
faSmileBeam,
faPollH,
faUpload,
faBan,
faTimes,
faCircleNotch
)
const buildMentionsString = ({ user, attentions = [] }, currentUser) => { const buildMentionsString = ({ user, attentions = [] }, currentUser) => {
let allAttentions = [...attentions] let allAttentions = [...attentions]

View file

@ -12,10 +12,11 @@
v-show="showDropIcon !== 'hide'" v-show="showDropIcon !== 'hide'"
:style="{ animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s' }" :style="{ animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s' }"
class="drop-indicator" class="drop-indicator"
:class="[uploadFileLimitReached ? 'icon-block' : 'icon-upload']"
@dragleave="fileDragStop" @dragleave="fileDragStop"
@drop.stop="fileDrop" @drop.stop="fileDrop"
/> >
<FAIcon :icon="uploadFileLimitReached ? 'ban' : 'upload'" />
</div>
<div class="form-group"> <div class="form-group">
<i18n <i18n
v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private' && !disableLockWarning" v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private' && !disableLockWarning"
@ -36,10 +37,10 @@
> >
<span>{{ $t('post_status.scope_notice.public') }}</span> <span>{{ $t('post_status.scope_notice.public') }}</span>
<a <a
class="button-icon dismiss" class="fa-scale-110 fa-old-padding dismiss"
@click.prevent="dismissScopeNotice()" @click.prevent="dismissScopeNotice()"
> >
<i class="icon-cancel" /> <FAIcon icon="times" />
</a> </a>
</p> </p>
<p <p
@ -48,10 +49,10 @@
> >
<span>{{ $t('post_status.scope_notice.unlisted') }}</span> <span>{{ $t('post_status.scope_notice.unlisted') }}</span>
<a <a
class="button-icon dismiss" class="fa-scale-110 fa-old-padding dismiss"
@click.prevent="dismissScopeNotice()" @click.prevent="dismissScopeNotice()"
> >
<i class="icon-cancel" /> <FAIcon icon="times" />
</a> </a>
</p> </p>
<p <p
@ -60,10 +61,10 @@
> >
<span>{{ $t('post_status.scope_notice.private') }}</span> <span>{{ $t('post_status.scope_notice.private') }}</span>
<a <a
class="button-icon dismiss" class="fa-scale-110 fa-old-padding dismiss"
@click.prevent="dismissScopeNotice()" @click.prevent="dismissScopeNotice()"
> >
<i class="icon-cancel" /> <FAIcon icon="times" />
</a> </a>
</p> </p>
<p <p
@ -82,11 +83,12 @@
@click.stop.prevent="togglePreview" @click.stop.prevent="togglePreview"
> >
{{ $t('post_status.preview') }} {{ $t('post_status.preview') }}
<i :class="showPreview ? 'icon-left-open' : 'icon-right-open'" /> <FAIcon :icon="showPreview ? 'chevron-left' : 'chevron-right'" />
</a> </a>
<i <FAIcon
v-show="previewLoading" v-show="previewLoading"
class="icon-spin3 animate-spin" spin
icon="circle-notch"
/> />
</div> </div>
<div <div
@ -199,7 +201,10 @@
{{ $t(`post_status.content_type["${postFormat}"]`) }} {{ $t(`post_status.content_type["${postFormat}"]`) }}
</option> </option>
</select> </select>
<i class="icon-down-open" /> <FAIcon
class="select-down-icon"
icon="chevron-down"
/>
</label> </label>
</div> </div>
<div <div
@ -236,22 +241,22 @@
<div <div
class="emoji-icon" class="emoji-icon"
> >
<i <div
:title="$t('emoji.add_emoji')" :title="$t('emoji.add_emoji')"
class="icon-smile btn btn-default" class="btn btn-default"
@click="showEmojiPicker" @click="showEmojiPicker"
/> >
<FAIcon icon="smile-beam" />
</div>
</div> </div>
<div <div
v-if="pollsAvailable" v-if="pollsAvailable"
class="poll-icon" class="poll-icon"
:class="{ selected: pollFormVisible }" :class="{ selected: pollFormVisible }"
>
<i
:title="$t('polls.add_poll')" :title="$t('polls.add_poll')"
class="icon-chart-bar btn btn-default"
@click="togglePollForm" @click="togglePollForm"
/> >
<FAIcon icon="poll-h" />
</div> </div>
</div> </div>
<button <button
@ -284,8 +289,9 @@
class="alert error" class="alert error"
> >
Error: {{ error }} Error: {{ error }}
<i <FAIcon
class="button-icon icon-cancel" class="fa-scale-110 fa-old-padding"
icon="times"
@click="clearError" @click="clearError"
/> />
</div> </div>
@ -295,8 +301,9 @@
:key="file.url" :key="file.url"
class="media-upload-wrapper" class="media-upload-wrapper"
> >
<i <FAIcon
class="fa button-icon icon-cancel" class="fa-scale-110 fa-old-padding"
icon="times"
@click="removeMediaFile(file)" @click="removeMediaFile(file)"
/> />
<attachment <attachment
@ -379,21 +386,16 @@
padding-left: 0.5em; padding-left: 0.5em;
display: flex; display: flex;
width: 100%; width: 100%;
.icon-spin3 {
margin-left: auto;
}
} }
.preview-toggle { .preview-toggle {
display: flex;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
i { svg, i {
margin-left: 0.2em; margin-left: 0.2em;
font-size: 0.8em; font-size: 0.8em;
transform: rotate(90deg); transform: rotate(90deg);
@ -435,18 +437,20 @@
.media-upload-icon, .poll-icon, .emoji-icon { .media-upload-icon, .poll-icon, .emoji-icon {
font-size: 26px; font-size: 26px;
line-height: 1.1;
flex: 1; flex: 1;
padding: 0 0.1em;
&.selected, &:hover { &.selected, &:hover {
// needs to be specific to override icon default color // needs to be specific to override icon default color
i, label { svg, i, label {
color: $fallback--lightText; color: $fallback--lightText;
color: var(--lightText, $fallback--lightText); color: var(--lightText, $fallback--lightText);
} }
} }
&.disabled { &.disabled {
i { svg, i {
cursor: not-allowed; cursor: not-allowed;
color: $fallback--icon; color: $fallback--icon;
color: var(--btnDisabledText, $fallback--icon); color: var(--btnDisabledText, $fallback--icon);
@ -475,7 +479,7 @@
text-align: right; text-align: right;
} }
.icon-chart-bar { .poll-icon {
cursor: pointer; cursor: pointer;
} }
@ -488,19 +492,6 @@
margin-bottom: .5em; margin-bottom: .5em;
width: 18em; width: 18em;
.icon-cancel {
display: inline-block;
position: static;
margin: 0;
padding-bottom: 0;
margin-left: $fallback--attachmentRadius;
margin-left: var(--attachmentRadius, $fallback--attachmentRadius);
background-color: $fallback--fg;
background-color: var(--btn, $fallback--fg);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
img, video { img, video {
object-fit: contain; object-fit: contain;
max-height: 10em; max-height: 10em;
@ -523,7 +514,7 @@
flex-direction: column; flex-direction: column;
} }
.media-upload-wrapper .attachments { .attachments .media-upload-wrapper {
padding: 0 0.5em; padding: 0 0.5em;
.attachment { .attachment {
@ -532,14 +523,18 @@
position: relative; position: relative;
} }
i { .fa-scale-110 fa-old-padding {
position: absolute; position: absolute;
margin: 10px; margin: 10px;
padding: 5px; margin: .75em;
padding: .5em;
background: rgba(230,230,230,0.6); background: rgba(230,230,230,0.6);
z-index: 2;
color: black;
border-radius: $fallback--attachmentRadius; border-radius: $fallback--attachmentRadius;
border-radius: var(--attachmentRadius, $fallback--attachmentRadius); border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
font-weight: bold; font-weight: bold;
cursor: pointer;
} }
} }
@ -613,11 +608,6 @@
cursor: not-allowed; cursor: not-allowed;
} }
.icon-cancel {
cursor: pointer;
z-index: 4;
}
@keyframes fade-in { @keyframes fade-in {
from { opacity: 0; } from { opacity: 0; }
to { opacity: 0.6; } to { opacity: 0.6; }

View file

@ -1,4 +1,8 @@
import Popover from '../popover/popover.vue' import Popover from '../popover/popover.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faSmileBeam } from '@fortawesome/free-regular-svg-icons'
library.add(faSmileBeam)
const ReactButton = { const ReactButton = {
props: ['status'], props: ['status'],

View file

@ -36,9 +36,10 @@
<div class="reaction-bottom-fader" /> <div class="reaction-bottom-fader" />
</div> </div>
</div> </div>
<i <FAIcon
slot="trigger" slot="trigger"
class="icon-smile button-icon add-reaction-button" class="fa-scale-110 fa-old-padding add-reaction-button"
:icon="['far', 'smile-beam']"
:title="$t('tool_tip.add_reaction')" :title="$t('tool_tip.add_reaction')"
/> />
</Popover> </Popover>

View file

@ -1,3 +1,7 @@
import { library } from '@fortawesome/fontawesome-svg-core'
import { faReply } from '@fortawesome/free-solid-svg-icons'
library.add(faReply)
const ReplyButton = { const ReplyButton = {
name: 'ReplyButton', name: 'ReplyButton',

View file

@ -1,15 +1,17 @@
<template> <template>
<div> <div>
<i <FAIcon
v-if="loggedIn" v-if="loggedIn"
class="button-icon button-reply icon-reply" class="ReplyButton fa-scale-110 fa-old-padding -interactive"
icon="reply"
:title="$t('tool_tip.reply')" :title="$t('tool_tip.reply')"
:class="{'-active': replying}" :class="{'-active': replying}"
@click.prevent="$emit('toggle')" @click.prevent="$emit('toggle')"
/> />
<i <FAIcon
v-else v-else
class="button-icon button-reply -disabled icon-reply" icon="reply"
class="ReplyButton fa-scale-110 fa-old-padding"
:title="$t('tool_tip.reply')" :title="$t('tool_tip.reply')"
/> />
<span v-if="status.replies_count > 0"> <span v-if="status.replies_count > 0">
@ -19,3 +21,19 @@
</template> </template>
<script src="./reply_button.js"></script> <script src="./reply_button.js"></script>
<style lang="scss">
@import '../../_variables.scss';
.ReplyButton {
&.-interactive {
cursor: pointer;
&:hover,
&.-active {
color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue);
}
}
}
</style>

View file

@ -1,3 +1,7 @@
import { library } from '@fortawesome/fontawesome-svg-core'
import { faRetweet } from '@fortawesome/free-solid-svg-icons'
library.add(faRetweet)
const RetweetButton = { const RetweetButton = {
props: ['status', 'loggedIn', 'visibility'], props: ['status', 'loggedIn', 'visibility'],
@ -22,9 +26,7 @@ const RetweetButton = {
computed: { computed: {
classes () { classes () {
return { return {
'retweeted': this.status.repeated, '-repeated': this.status.repeated
'retweeted-empty': !this.status.repeated,
'animate-spin': this.animated
} }
}, },
mergedConfig () { mergedConfig () {

View file

@ -1,26 +1,30 @@
<template> <template>
<div v-if="loggedIn"> <div v-if="loggedIn">
<template v-if="visibility !== 'private' && visibility !== 'direct'"> <template v-if="visibility !== 'private' && visibility !== 'direct'">
<i <FAIcon
:class="classes" :class="classes"
class="button-icon retweet-button icon-retweet rt-active" class="RetweetButton fa-scale-110 fa-old-padding -interactive"
icon="retweet"
:spin="animated"
:title="$t('tool_tip.repeat')" :title="$t('tool_tip.repeat')"
@click.prevent="retweet()" @click.prevent="retweet()"
/> />
<span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span> <span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span>
</template> </template>
<template v-else> <template v-else>
<i <FAIcon
:class="classes" :class="classes"
class="button-icon icon-lock" class="RetweetButton fa-scale-110 fa-old-padding"
icon="lock"
:title="$t('timeline.no_retweet_hint')" :title="$t('timeline.no_retweet_hint')"
/> />
</template> </template>
</div> </div>
<div v-else-if="!loggedIn"> <div v-else-if="!loggedIn">
<i <FAIcon
:class="classes" :class="classes"
class="button-icon icon-retweet" class="fa-scale-110 fa-old-padding"
icon="retweet"
:title="$t('tool_tip.repeat')" :title="$t('tool_tip.repeat')"
/> />
<span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span> <span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span>
@ -31,16 +35,21 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.rt-active {
.RetweetButton {
&.-interactive {
cursor: pointer; cursor: pointer;
animation-duration: 0.6s; animation-duration: 0.6s;
&:hover { &:hover {
color: $fallback--cGreen; color: $fallback--cGreen;
color: var(--cGreen, $fallback--cGreen); color: var(--cGreen, $fallback--cGreen);
} }
} }
.icon-retweet.retweeted {
&.-repeated {
color: $fallback--cGreen; color: $fallback--cGreen;
color: var(--cGreen, $fallback--cGreen); color: var(--cGreen, $fallback--cGreen);
} }
}
</style> </style>

View file

@ -1,3 +1,18 @@
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faEnvelope,
faLock,
faLockOpen,
faGlobe
} from '@fortawesome/free-solid-svg-icons'
library.add(
faEnvelope,
faGlobe,
faLock,
faLockOpen
)
const ScopeSelector = { const ScopeSelector = {
props: [ props: [
'showAll', 'showAll',

View file

@ -1,36 +1,56 @@
<template> <template>
<div <div
v-if="!showNothing" v-if="!showNothing"
class="scope-selector" class="ScopeSelector"
> >
<i <span
v-if="showDirect" v-if="showDirect"
class="icon-mail-alt" class="scope"
:class="css.direct" :class="css.direct"
:title="$t('post_status.scope.direct')" :title="$t('post_status.scope.direct')"
@click="changeVis('direct')" @click="changeVis('direct')"
>
<FAIcon
icon="envelope"
class="fa-scale-110 fa-old-padding"
/> />
<i </span>
<span
v-if="showPrivate" v-if="showPrivate"
class="icon-lock" class="scope"
:class="css.private" :class="css.private"
:title="$t('post_status.scope.private')" :title="$t('post_status.scope.private')"
@click="changeVis('private')" @click="changeVis('private')"
>
<FAIcon
icon="lock"
class="fa-scale-110 fa-old-padding"
/> />
<i </span>
<span
v-if="showUnlisted" v-if="showUnlisted"
class="icon-lock-open-alt" class="scope"
:class="css.unlisted" :class="css.unlisted"
:title="$t('post_status.scope.unlisted')" :title="$t('post_status.scope.unlisted')"
@click="changeVis('unlisted')" @click="changeVis('unlisted')"
>
<FAIcon
icon="lock-open"
class="fa-scale-110 fa-old-padding"
/> />
<i </span>
<span
v-if="showPublic" v-if="showPublic"
class="icon-globe" class="scope"
:class="css.public" :class="css.public"
:title="$t('post_status.scope.public')" :title="$t('post_status.scope.public')"
@click="changeVis('public')" @click="changeVis('public')"
>
<FAIcon
icon="globe"
class="fa-scale-110 fa-old-padding"
/> />
</span>
</div> </div>
</template> </template>
@ -39,12 +59,16 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.scope-selector { .ScopeSelector {
i {
font-size: 1.2em;
cursor: pointer;
&.selected { .scope {
display: inline-block;
cursor: pointer;
min-width: 1.3em;
min-height: 1.3em;
text-align: center;
&.selected svg {
color: $fallback--lightText; color: $fallback--lightText;
color: var(--lightText, $fallback--lightText); color: var(--lightText, $fallback--lightText);
} }

View file

@ -2,6 +2,16 @@ import FollowCard from '../follow_card/follow_card.vue'
import Conversation from '../conversation/conversation.vue' 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 {
faCircleNotch,
faSearch
} from '@fortawesome/free-solid-svg-icons'
library.add(
faCircleNotch,
faSearch
)
const Search = { const Search = {
components: { components: {

View file

@ -17,14 +17,18 @@
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
v-if="loading" v-if="loading"
class="text-center loading-icon" class="text-center loading-icon"
> >
<i class="icon-spin3 animate-spin" /> <FAIcon
icon="circle-notch"
spin
size="lg"
/>
</div> </div>
<div v-else-if="loaded"> <div v-else-if="loaded">
<div class="search-nav-heading"> <div class="search-nav-heading">

View file

@ -1,9 +1,19 @@
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faTimes,
faSearch
} from '@fortawesome/free-solid-svg-icons'
library.add(
faTimes,
faSearch
)
const SearchBar = { const SearchBar = {
data: () => ({ data: () => ({
searchTerm: undefined, searchTerm: undefined,
hidden: true, hidden: true,
error: false, error: false
loading: false
}), }),
watch: { watch: {
'$route': function (route) { '$route': function (route) {

View file

@ -1,16 +1,15 @@
<template> <template>
<div> <div>
<div class="search-bar-container"> <div class="search-bar-container">
<i
v-if="loading"
class="icon-spin4 finder-icon animate-spin-slow"
/>
<a <a
v-if="hidden" v-if="hidden"
href="#" href="#"
class="nav-icon"
:title="$t('nav.search')" :title="$t('nav.search')"
><i ><FAIcon
class="button-icon icon-search" fixed-width
class="fa-scale-110 fa-old-padding"
icon="search"
@click.prevent.stop="toggleHidden" @click.prevent.stop="toggleHidden"
/></a> /></a>
<template v-else> <template v-else>
@ -27,12 +26,19 @@
class="btn search-button" class="btn search-button"
@click="find(searchTerm)" @click="find(searchTerm)"
> >
<i class="icon-search" /> <FAIcon
fixed-width
icon="search"
/>
</button> </button>
<i <span>
class="button-icon icon-cancel" <FAIcon
fixed-width
icon="times"
class="cancel-icon fa-scale-110 fa-old-padding"
@click.prevent.stop="toggleHidden" @click.prevent.stop="toggleHidden"
/> />
</span>
</template> </template>
</div> </div>
</div> </div>
@ -60,13 +66,10 @@
max-width: calc(100% - 30px - 30px - 20px); max-width: calc(100% - 30px - 30px - 20px);
} }
.search-button { .cancel-icon {
margin-left: .5em;
margin-right: .5em;
}
.icon-cancel {
cursor: pointer; cursor: pointer;
color: $fallback--text;
color: var(--btnTopBarText, $fallback--text);
} }
} }

View file

@ -10,6 +10,29 @@ import GeneralTab from './tabs/general_tab.vue'
import VersionTab from './tabs/version_tab.vue' import VersionTab from './tabs/version_tab.vue'
import ThemeTab from './tabs/theme_tab/theme_tab.vue' import ThemeTab from './tabs/theme_tab/theme_tab.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faWrench,
faUser,
faFilter,
faPaintBrush,
faBell,
faDownload,
faEyeSlash,
faInfo
} from '@fortawesome/free-solid-svg-icons'
library.add(
faWrench,
faUser,
faFilter,
faPaintBrush,
faBell,
faDownload,
faEyeSlash,
faInfo
)
const SettingsModalContent = { const SettingsModalContent = {
components: { components: {
TabSwitcher, TabSwitcher,

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

@ -37,7 +37,7 @@
</div> </div>
<div <div
:label="$t('settings.theme')" :label="$t('settings.theme')"
icon="brush" icon="paint-brush"
data-tab-name="theme" data-tab-name="theme"
> >
<ThemeTab /> <ThemeTab />
@ -45,7 +45,7 @@
<div <div
v-if="isLoggedIn" v-if="isLoggedIn"
:label="$t('settings.notifications')" :label="$t('settings.notifications')"
icon="bell-ringing-o" icon="bell"
data-tab-name="notifications" data-tab-name="notifications"
> >
<NotificationsTab /> <NotificationsTab />
@ -62,14 +62,14 @@
v-if="isLoggedIn" v-if="isLoggedIn"
:label="$t('settings.mutes_and_blocks')" :label="$t('settings.mutes_and_blocks')"
:fullHeight="true" :fullHeight="true"
icon="eye-off" icon="eye-slash"
data-tab-name="mutesAndBlocks" data-tab-name="mutesAndBlocks"
> >
<MutesAndBlocksTab /> <MutesAndBlocksTab />
</div> </div>
<div <div
:label="$t('settings.version.title')" :label="$t('settings.version.title')"
icon="info-circled" icon="info"
data-tab-name="version" data-tab-name="version"
> >
<VersionTab /> <VersionTab />

View file

@ -2,6 +2,14 @@ import { filter, trim } from 'lodash'
import Checkbox from 'src/components/checkbox/checkbox.vue' import Checkbox from 'src/components/checkbox/checkbox.vue'
import SharedComputedObject from '../helpers/shared_computed_object.js' import SharedComputedObject from '../helpers/shared_computed_object.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faChevronDown
} from '@fortawesome/free-solid-svg-icons'
library.add(
faChevronDown
)
const FilteringTab = { const FilteringTab = {
data () { data () {

View file

@ -53,7 +53,10 @@
<option value="following">{{ $t('settings.reply_visibility_following') }}</option> <option value="following">{{ $t('settings.reply_visibility_following') }}</option>
<option value="self">{{ $t('settings.reply_visibility_self') }}</option> <option value="self">{{ $t('settings.reply_visibility_self') }}</option>
</select> </select>
<i class="icon-down-open" /> <FAIcon
class="select-down-icon"
icon="chevron-down"
/>
</label> </label>
</div> </div>
<div> <div>

View file

@ -2,6 +2,16 @@ import Checkbox from 'src/components/checkbox/checkbox.vue'
import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue' import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
import SharedComputedObject from '../helpers/shared_computed_object.js' import SharedComputedObject from '../helpers/shared_computed_object.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faChevronDown,
faGlobe
} from '@fortawesome/free-solid-svg-icons'
library.add(
faChevronDown,
faGlobe
)
const GeneralTab = { const GeneralTab = {
data () { data () {

View file

@ -103,7 +103,10 @@
{{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }} {{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
</option> </option>
</select> </select>
<i class="icon-down-open" /> <FAIcon
class="select-down-icon"
icon="chevron-down"
/>
</label> </label>
</div> </div>
</li> </li>
@ -127,7 +130,10 @@
{{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }} {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
</option> </option>
</select> </select>
<i class="icon-down-open" /> <FAIcon
class="select-down-icon"
icon="chevron-down"
/>
</label> </label>
</div> </div>
</li> </li>
@ -222,7 +228,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

@ -8,6 +8,18 @@ import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
import suggestor from 'src/components/emoji_input/suggestor.js' import suggestor from 'src/components/emoji_input/suggestor.js'
import Autosuggest from 'src/components/autosuggest/autosuggest.vue' 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 {
faTimes,
faPlus,
faCircleNotch
} from '@fortawesome/free-solid-svg-icons'
library.add(
faTimes,
faPlus,
faCircleNotch
)
const ProfileTab = { const ProfileTab = {
data () { data () {

View file

@ -119,10 +119,8 @@
&>.icon-container { &>.icon-container {
width: 20px; width: 20px;
align-self: center;
&>.icon-cancel { margin: 0 .2em .5em;
vertical-align: sub;
}
} }
} }
} }

View file

@ -127,9 +127,9 @@
<div <div
class="icon-container" class="icon-container"
> >
<i <FAIcon
v-show="newFields.length > 1" v-show="newFields.length > 1"
class="icon-cancel" icon="times"
@click="deleteField(i)" @click="deleteField(i)"
/> />
</div> </div>
@ -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>
@ -166,10 +166,11 @@
:src="user.profile_image_url_original" :src="user.profile_image_url_original"
class="current-avatar" class="current-avatar"
> >
<i <FAIcon
v-if="!isDefaultAvatar && pickAvatarBtnVisible" v-if="!isDefaultAvatar && pickAvatarBtnVisible"
:title="$t('settings.reset_avatar')" :title="$t('settings.reset_avatar')"
class="reset-button icon-cancel" class="reset-button"
icon="times"
type="button" type="button"
@click="resetAvatar" @click="resetAvatar"
/> />
@ -194,10 +195,11 @@
<h2>{{ $t('settings.profile_banner') }}</h2> <h2>{{ $t('settings.profile_banner') }}</h2>
<div class="banner-background-preview"> <div class="banner-background-preview">
<img :src="user.cover_photo"> <img :src="user.cover_photo">
<i <FAIcon
v-if="!isDefaultBanner" v-if="!isDefaultBanner"
:title="$t('settings.reset_profile_banner')" :title="$t('settings.reset_profile_banner')"
class="reset-button icon-cancel" class="reset-button"
icon="times"
type="button" type="button"
@click="resetBanner" @click="resetBanner"
/> />
@ -214,9 +216,11 @@
@change="uploadFile('banner', $event)" @change="uploadFile('banner', $event)"
> >
</div> </div>
<i <FAIcon
v-if="bannerUploading" v-if="bannerUploading"
class=" icon-spin4 animate-spin uploading" class="uploading"
spin
icon="circle-notch"
/> />
<button <button
v-else-if="bannerPreview" v-else-if="bannerPreview"
@ -230,8 +234,9 @@
class="alert error" class="alert error"
> >
Error: {{ bannerUploadError }} Error: {{ bannerUploadError }}
<i <FAIcon
class="button-icon icon-cancel" class="fa-scale-110 fa-old-padding"
icon="times"
@click="clearUploadError('banner')" @click="clearUploadError('banner')"
/> />
</div> </div>
@ -240,10 +245,11 @@
<h2>{{ $t('settings.profile_background') }}</h2> <h2>{{ $t('settings.profile_background') }}</h2>
<div class="banner-background-preview"> <div class="banner-background-preview">
<img :src="user.background_image"> <img :src="user.background_image">
<i <FAIcon
v-if="!isDefaultBackground" v-if="!isDefaultBackground"
:title="$t('settings.reset_profile_background')" :title="$t('settings.reset_profile_background')"
class="reset-button icon-cancel" class="reset-button"
icon="times"
type="button" type="button"
@click="resetBackground" @click="resetBackground"
/> />
@ -260,9 +266,11 @@
@change="uploadFile('background', $event)" @change="uploadFile('background', $event)"
> >
</div> </div>
<i <FAIcon
v-if="backgroundUploading" v-if="backgroundUploading"
class=" icon-spin4 animate-spin uploading" class="uploading"
spin
icon="circle-notch"
/> />
<button <button
v-else-if="backgroundPreview" v-else-if="backgroundPreview"
@ -276,8 +284,10 @@
class="alert error" class="alert error"
> >
Error: {{ backgroundUploadError }} Error: {{ backgroundUploadError }}
<i <FAIcon
class="button-icon icon-cancel" size="lg"
class="fa-scale-110 fa-old-padding"
icon="times"
@click="clearUploadError('background')" @click="clearUploadError('background')"
/> />
</div> </div>

View file

@ -39,21 +39,29 @@
</i18n> </i18n>
<div class="icons"> <div class="icons">
<i <FAIcon
fixed-width
style="color: var(--cBlue)" style="color: var(--cBlue)"
class="button-icon icon-reply" class="fa-scale-110 fa-old-padding"
icon="reply"
/> />
<i <FAIcon
fixed-width
style="color: var(--cGreen)" style="color: var(--cGreen)"
class="button-icon icon-retweet" class="fa-scale-110 fa-old-padding"
icon="retweet"
/> />
<i <FAIcon
fixed-width
style="color: var(--cOrange)" style="color: var(--cOrange)"
class="button-icon icon-star" class="fa-scale-110 fa-old-padding"
icon="star"
/> />
<i <FAIcon
fixed-width
style="color: var(--cRed)" style="color: var(--cRed)"
class="button-icon icon-cancel" class="fa-scale-110 fa-old-padding"
icon="times"
/> />
</div> </div>
</div> </div>
@ -103,6 +111,23 @@
</div> </div>
</template> </template>
<script>
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faTimes,
faStar,
faRetweet,
faReply
} from '@fortawesome/free-solid-svg-icons'
library.add(
faTimes,
faStar,
faRetweet,
faReply
)
</script>
<style lang="scss"> <style lang="scss">
.preview-container { .preview-container {
position: relative; position: relative;

View file

@ -35,6 +35,14 @@ import ExportImport from 'src/components/export_import/export_import.vue'
import Checkbox from 'src/components/checkbox/checkbox.vue' import Checkbox from 'src/components/checkbox/checkbox.vue'
import Preview from './preview.vue' import Preview from './preview.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faChevronDown
} from '@fortawesome/free-solid-svg-icons'
library.add(
faChevronDown
)
// List of color values used in v1 // List of color values used in v1
const v1OnlyNames = [ const v1OnlyNames = [

View file

@ -80,7 +80,10 @@
{{ style[0] || style.name }} {{ style[0] || style.name }}
</option> </option>
</select> </select>
<i class="icon-down-open" /> <FAIcon
class="select-down-icon"
icon="chevron-down"
/>
</label> </label>
</div> </div>
</template> </template>
@ -907,7 +910,10 @@
{{ $t('settings.style.shadows.components.' + shadow) }} {{ $t('settings.style.shadows.components.' + shadow) }}
</option> </option>
</select> </select>
<i class="icon-down-open" /> <FAIcon
class="select-down-icon"
icon="chevron-down"
/>
</label> </label>
</div> </div>
<div class="override"> <div class="override">

View file

@ -2,6 +2,20 @@ import ColorInput from '../color_input/color_input.vue'
import OpacityInput from '../opacity_input/opacity_input.vue' import OpacityInput from '../opacity_input/opacity_input.vue'
import { getCssShadow } from '../../services/style_setter/style_setter.js' import { getCssShadow } from '../../services/style_setter/style_setter.js'
import { hex2rgb } from '../../services/color_convert/color_convert.js' import { hex2rgb } from '../../services/color_convert/color_convert.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faTimes,
faChevronDown,
faChevronUp,
faPlus
} from '@fortawesome/free-solid-svg-icons'
library.add(
faChevronDown,
faChevronUp,
faTimes,
faPlus
)
const toModel = (object = {}) => ({ const toModel = (object = {}) => ({
x: 0, x: 0,

View file

@ -78,35 +78,50 @@
{{ $t('settings.style.shadows.shadow_id', { value: index }) }} {{ $t('settings.style.shadows.shadow_id', { value: index }) }}
</option> </option>
</select> </select>
<i class="icon-down-open" /> <FAIcon
icon="chevron-down"
class="select-down-icon"
/>
</label> </label>
<button <button
class="btn btn-default" class="btn btn-default"
:disabled="!ready || !present" :disabled="!ready || !present"
@click="del" @click="del"
> >
<i class="icon-cancel" /> <FAIcon
fixed-width
icon="times"
/>
</button> </button>
<button <button
class="btn btn-default" class="btn btn-default"
:disabled="!moveUpValid" :disabled="!moveUpValid"
@click="moveUp" @click="moveUp"
> >
<i class="icon-up-open" /> <FAIcon
fixed-width
icon="chevron-up"
/>
</button> </button>
<button <button
class="btn btn-default" class="btn btn-default"
:disabled="!moveDnValid" :disabled="!moveDnValid"
@click="moveDn" @click="moveDn"
> >
<i class="icon-down-open" /> <FAIcon
fixed-width
icon="chevron-down"
/>
</button> </button>
<button <button
class="btn btn-default" class="btn btn-default"
:disabled="usingFallback" :disabled="usingFallback"
@click="add" @click="add"
> >
<i class="icon-plus" /> <FAIcon
fixed-width
icon="plus"
/>
</button> </button>
</div> </div>
<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,11 @@
@click="toggleDrawer" @click="toggleDrawer"
> >
<router-link :to="{ name: 'login' }"> <router-link :to="{ name: 'login' }">
<i class="button-icon icon-login" /> {{ $t("login.login") }} <FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="sign-in-alt"
/> {{ $t("login.login") }}
</router-link> </router-link>
</li> </li>
<li <li
@ -44,7 +48,11 @@
@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
fixed-width
class="fa-scale-110 fa-old-padding"
icon="home"
/> {{ $t("nav.timelines") }}
</router-link> </router-link>
</li> </li>
<li <li
@ -55,7 +63,11 @@
: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
fixed-width
class="fa-scale-110 fa-old-padding"
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 +80,11 @@
<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
fixed-width
class="fa-scale-110 fa-old-padding"
icon="bell"
/> {{ $t("nav.interactions") }}
</router-link> </router-link>
</li> </li>
<li <li
@ -76,7 +92,11 @@
@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
fixed-width
class="fa-scale-110 fa-old-padding"
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 +110,11 @@
@click="toggleDrawer" @click="toggleDrawer"
> >
<router-link :to="{ name: 'chat' }"> <router-link :to="{ name: 'chat' }">
<i class="button-icon icon-megaphone" /> {{ $t("shoutbox.title") }} <FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="bullhorn"
/> {{ $t("shoutbox.title") }}
</router-link> </router-link>
</li> </li>
</ul> </ul>
@ -100,7 +124,11 @@
@click="toggleDrawer" @click="toggleDrawer"
> >
<router-link :to="{ name: 'search' }"> <router-link :to="{ name: 'search' }">
<i class="button-icon icon-search" /> {{ $t("nav.search") }} <FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="search"
/> {{ $t("nav.search") }}
</router-link> </router-link>
</li> </li>
<li <li
@ -108,7 +136,11 @@
@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
fixed-width
class="fa-scale-110 fa-old-padding"
icon="user-plus"
/> {{ $t("nav.who_to_follow") }}
</router-link> </router-link>
</li> </li>
<li @click="toggleDrawer"> <li @click="toggleDrawer">
@ -116,12 +148,20 @@
href="#" href="#"
@click="openSettingsModal" @click="openSettingsModal"
> >
<i class="button-icon icon-cog" /> {{ $t("settings.settings") }} <FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
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
fixed-width
class="fa-scale-110 fa-old-padding"
icon="info-circle"
/> {{ $t("nav.about") }}
</router-link> </router-link>
</li> </li>
<li <li
@ -132,7 +172,11 @@
href="/pleroma/admin/#/login-pleroma" href="/pleroma/admin/#/login-pleroma"
target="_blank" target="_blank"
> >
<i class="button-icon icon-gauge" /> {{ $t("nav.administration") }} <FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="tachometer-alt"
/> {{ $t("nav.administration") }}
</a> </a>
</li> </li>
<li <li
@ -143,7 +187,11 @@
href="#" href="#"
@click="doLogout" @click="doLogout"
> >
<i class="button-icon icon-logout" /> {{ $t("login.logout") }} <FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="sign-out-alt"
/> {{ $t("login.logout") }}
</a> </a>
</li> </li>
</ul> </ul>
@ -224,9 +272,12 @@
--lightText: var(--popoverLightText, $fallback--lightText); --lightText: var(--popoverLightText, $fallback--lightText);
--icon: var(--popoverIcon, $fallback--icon); --icon: var(--popoverIcon, $fallback--icon);
.button-icon:before { .follow-request-count {
width: 1.1em; vertical-align: baseline;
background-color: $fallback--bg;
background-color: var(--input, $fallback--faint);
} }
} }
.side-drawer-logo-wrapper { .side-drawer-logo-wrapper {
@ -272,7 +323,6 @@
border-bottom: 1px solid; border-bottom: 1px solid;
border-color: $fallback--border; border-color: $fallback--border;
border-color: var(--border, $fallback--border); border-color: var(--border, $fallback--border);
margin: 0.2em 0;
} }
.side-drawer ul:last-child { .side-drawer ul:last-child {
@ -283,8 +333,11 @@
padding: 0; padding: 0;
a { a {
box-sizing: border-box;
display: block; display: block;
padding: 0.5em 0.85em; height: 3em;
line-height: 3em;
padding: 0 0.7em;
&:hover { &:hover {
background-color: $fallback--lightBg; background-color: $fallback--lightBg;

View file

@ -17,6 +17,43 @@ import { highlightClass, highlightStyle } from '../../services/user_highlighter/
import { muteWordHits } from '../../services/status_parser/status_parser.js' import { muteWordHits } from '../../services/status_parser/status_parser.js'
import { unescape, uniqBy } from 'lodash' import { unescape, uniqBy } from 'lodash'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faEnvelope,
faLock,
faLockOpen,
faGlobe,
faTimes,
faRetweet,
faReply,
faExternalLinkSquareAlt,
faPlusSquare,
faSmileBeam,
faEllipsisH,
faStar,
faEyeSlash,
faEye,
faThumbtack
} from '@fortawesome/free-solid-svg-icons'
library.add(
faEnvelope,
faGlobe,
faLock,
faLockOpen,
faTimes,
faRetweet,
faReply,
faExternalLinkSquareAlt,
faPlusSquare,
faStar,
faSmileBeam,
faEllipsisH,
faEyeSlash,
faEye,
faThumbtack
)
const Status = { const Status = {
name: 'Status', name: 'Status',
components: { components: {
@ -227,13 +264,13 @@ const Status = {
visibilityIcon (visibility) { visibilityIcon (visibility) {
switch (visibility) { switch (visibility) {
case 'private': case 'private':
return 'icon-lock' return 'lock'
case 'unlisted': case 'unlisted':
return 'icon-lock-open-alt' return 'lock-open'
case 'direct': case 'direct':
return 'icon-mail-alt' return 'envelope'
default: default:
return 'icon-globe' return 'globe'
} }
}, },
showError (error) { showError (error) {

Some files were not shown because too many files have changed in this diff Show more