sjw
/
pleroma-fe
mirror of https://git.pleroma.social/sjw/pleroma-fe.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge remote-tracking branch 'upstream/develop' into neckbeard

This commit is contained in:
Your New SJW Waifu 2020-11-03 18:10:28 -06:00
parent b7c65c394f b485d21ba9
commit dc02f3a899
147 changed files with 2605 additions and 1711 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
CHANGELOG.md
View File

@ -6,16 +6,27 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
## [Unreleased]
### Added
- New option to optimize timeline rendering to make the site more responsive (enabled by default)
- New instance option `logoLeft` to move logo to the left side in desktop nav bar
- Import/export a muted users
- Proper handling of deletes when using websocket streaming
- Added optimistic chat message sending, so you can start writing next message before the previous one has been sent
## [Unreleased patch]
### Fixed
- Fixed chats list not updating its order when new messages come in
- Fixed chat messages sometimes getting lost when you receive a message at the same time
- Fixed clicking NSFW hider through status popover
- Fixed chat-view back button being hard to click
- Fixed fresh chat notifications being cleared immediately while leaving the chat view and not having time to actually see the messages
- Fixed multiple regressions in CSS styles
- Fixed multiple issues with input fields when using CJK font as default
- Fixed search field in navbar infringing into logo in some cases
### Added
- Import/export a muted users
- Proper handling of deletes when using websocket streaming
### Changed
- Clicking immediately when timeline shifts is now blocked to prevent misclicks
- Icons changed from fontello (FontAwesome 4 + others) to FontAwesome 5 due to problems with fontello.
- Some icons changed for better accessibility (lock, globe)
- Logo is now clickable
- Changed default logo to SVG version
## [2.1.1] - 2020-09-08
### Changed

10
build/webpack.base.conf.js
View File

@ -3,7 +3,6 @@ var config = require('../config')
var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../')
var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin')
var FontelloPlugin = require("fontello-webpack-plugin")
var env = process.env.NODE_ENV
// check env & config/index.js to decide weither to enable CSS Sourcemaps for the
@ -94,15 +93,6 @@ module.exports = {
new ServiceWorkerWebpackPlugin({
entry: path.join(__dirname, '..', 'src/sw.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]'
}
})
]
}

5
package.json
View File

@ -18,6 +18,10 @@
"dependencies": {
"@babel/runtime": "^7.7.6",
"@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",
"chromatism": "^3.0.0",
"cropperjs": "^1.4.3",
@ -68,7 +72,6 @@
"eventsource-polyfill": "^0.9.6",
"express": "^4.13.3",
"file-loader": "^3.0.1",
"fontello-webpack-plugin": "https://github.com/w3geo/fontello-webpack-plugin.git#6149eac8f2672ab6da089e8802fbfcac98487186",
"function-bind": "^1.0.2",
"html-webpack-plugin": "^3.0.0",
"http-proxy-middleware": "^0.17.2",

51
src/App.js
View File

@ -1,7 +1,6 @@
import UserPanel from './components/user_panel/user_panel.vue'
import NavPanel from './components/nav_panel/nav_panel.vue'
import Notifications from './components/notifications/notifications.vue'
import SearchBar from './components/search_bar/search_bar.vue'
import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
import FeaturesPanel from './components/features_panel/features_panel.vue'
import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
@ -11,6 +10,7 @@ import MediaModal from './components/media_modal/media_modal.vue'
import SideDrawer from './components/side_drawer/side_drawer.vue'
import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue'
import MobileNav from './components/mobile_nav/mobile_nav.vue'
import DesktopNav from './components/desktop_nav/desktop_nav.vue'
import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue'
import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
@ -23,7 +23,6 @@ export default {
UserPanel,
NavPanel,
Notifications,
SearchBar,
InstanceSpecificPanel,
FeaturesPanel,
WhoToFollowPanel,
@ -32,6 +31,7 @@ export default {
SideDrawer,
MobilePostStatusButton,
MobileNav,
DesktopNav,
SettingsModal,
UserReportingModal,
Banner,
@ -39,15 +39,7 @@ export default {
GlobalNoticeList
},
data: () => ({
mobileActivePanel: 'timeline',
searchBarHidden: true,
supportsMask: window.CSS && window.CSS.supports && (
window.CSS.supports('mask-size', 'contain') ||
window.CSS.supports('-webkit-mask-size', 'contain') ||
window.CSS.supports('-moz-mask-size', 'contain') ||
window.CSS.supports('-ms-mask-size', 'contain') ||
window.CSS.supports('-o-mask-size', 'contain')
)
mobileActivePanel: 'timeline'
}),
created () {
// Load the locale from the storage
@ -63,28 +55,6 @@ export default {
background () {
return this.currentUser.background_image || this.$store.state.instance.background
},
enableMask () { return this.supportsMask && this.$store.state.instance.logoMask },
logoStyle () {
return {
'visibility': this.enableMask ? 'hidden' : 'visible'
}
},
logoMaskStyle () {
return this.enableMask ? {
'mask-image': `url(${this.$store.state.instance.logo})`
} : {
'background-color': this.enableMask ? '' : 'transparent'
}
},
logoBgStyle () {
return Object.assign({
'margin': `${this.$store.state.instance.logoMargin} 0`,
opacity: this.searchBarHidden ? 1 : 0
}, this.enableMask ? {} : {
'background-color': this.enableMask ? '' : 'transparent'
})
},
logo () { return this.$store.state.instance.logo },
bgStyle () {
return {
'background-image': `url(${this.background})`
@ -95,9 +65,7 @@ export default {
'--body-background-image': `url(${this.background})`
}
},
sitename () { return this.$store.state.instance.name },
chat () { return this.$store.state.chat.channel.state === 'joined' },
hideSitename () { return this.$store.state.instance.hideSitename },
suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
showInstanceSpecificPanel () {
return this.$store.state.instance.showInstanceSpecificPanel &&
@ -114,19 +82,6 @@ export default {
}
},
methods: {
scrollToTop () {
window.scrollTo(0, 0)
},
logout () {
this.$router.replace('/main/public')
this.$store.dispatch('logout')
},
onSearchBarToggled (hidden) {
this.searchBarHidden = hidden
},
openSettingsModal () {
this.$store.dispatch('openSettingsModal')
},
updateMobileState () {
const mobileLayout = windowWidth() <= 800
const layoutHeight = windowHeight()

181
src/App.scss
View File

@ -95,7 +95,7 @@ button {
font-family: sans-serif;
font-family: var(--interfaceFont, sans-serif);
i[class*=icon-] {
i[class*=icon-], .svg-inline--fa {
color: $fallback--text;
color: var(--btnText, $fallback--text);
}
@ -116,7 +116,8 @@ button {
color: var(--btnPressedText, $fallback--text);
background-color: $fallback--fg;
background-color: var(--btnPressed, $fallback--fg);
i {
svg, i {
color: $fallback--text;
color: var(--btnPressedText, $fallback--text);
}
@ -128,7 +129,8 @@ button {
color: var(--btnDisabledText, $fallback--text);
background-color: $fallback--fg;
background-color: var(--btnDisabled, $fallback--fg);
i {
svg, i {
color: $fallback--text;
color: var(--btnDisabledText, $fallback--text);
}
@ -141,7 +143,8 @@ button {
background-color: var(--btnToggled, $fallback--fg);
box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
box-shadow: var(--buttonPressedShadow);
i {
svg, i {
color: $fallback--text;
color: var(--btnToggledText, $fallback--text);
}
@ -195,7 +198,7 @@ input, textarea, .select, .input {
opacity: 0.5;
}
.icon-down-open {
.select-down-icon {
position: absolute;
top: 0;
bottom: 0;
@ -328,7 +331,7 @@ option {
}
}
i[class*=icon-] {
i[class*=icon-], .svg-inline--fa {
color: $fallback--icon;
color: var(--icon, $fallback--icon);
}
@ -366,117 +369,10 @@ i[class*=icon-] {
padding: 0 10px 0 10px;
}
.item {
flex: 1;
line-height: 50px;
height: 50px;
overflow: hidden;
display: flex;
flex-wrap: wrap;
.nav-icon {
margin-left: 0.4em;
}
&.right {
justify-content: flex-end;
}
}
.auto-size {
flex: 1
}
.nav-bar {
padding: 0;
width: 100%;
align-items: center;
position: fixed;
height: 50px;
box-sizing: border-box;
button {
&, i[class*=icon-] {
color: $fallback--text;
color: var(--btnTopBarText, $fallback--text);
}
&:active {
background-color: $fallback--fg;
background-color: var(--btnPressedTopBar, $fallback--fg);
color: $fallback--text;
color: var(--btnPressedTopBarText, $fallback--text);
}
&:disabled {
color: $fallback--text;
color: var(--btnDisabledTopBarText, $fallback--text);
}
&.toggled {
color: $fallback--text;
color: var(--btnToggledTopBarText, $fallback--text);
background-color: $fallback--fg;
background-color: var(--btnToggledTopBar, $fallback--fg)
}
}
.logo {
display: flex;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
align-items: stretch;
justify-content: center;
flex: 0 0 auto;
z-index: -1;
transition: opacity;
transition-timing-function: ease-out;
transition-duration: 100ms;
.mask {
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
background-color: $fallback--fg;
background-color: var(--topBarText, $fallback--fg);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
img {
height: 100%;
object-fit: contain;
display: block;
flex: 0;
}
}
.inner-nav {
position: relative;
margin: auto;
box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
display: flex;
align-items: center;
flex-basis: 970px;
height: 50px;
a, a i {
color: $fallback--link;
color: var(--topBarLink, $fallback--link);
}
}
}
main-router {
flex: 1;
}
@ -717,19 +613,24 @@ nav {
flex-grow: 0;
}
}
.badge {
box-sizing: border-box;
display: inline-block;
border-radius: 99px;
min-width: 22px;
max-width: 22px;
min-height: 22px;
max-height: 22px;
font-size: 15px;
line-height: 22px;
text-align: center;
max-width: 10em;
min-width: 1.7em;
height: 1.3em;
padding: 0.15em 0.15em;
vertical-align: middle;
font-weight: normal;
font-style: normal;
font-size: 0.9em;
line-height: 1;
text-align: center;
white-space: nowrap;
padding: 0;
overflow: hidden;
text-overflow: ellipsis;
&.badge-notification {
background-color: $fallback--cRed;
@ -786,16 +687,6 @@ nav {
}
}
@media all and (min-width: 800px) {
.logo {
opacity: 1 !important;
}
}
.item.right {
text-align: right;
}
.visibility-notice {
padding: .5em;
border: 1px solid $fallback--faint;
@ -817,8 +708,16 @@ nav {
}
}
.button-icon {
font-size: 1.2em;
.fa-scale-110 {
&.svg-inline--fa {
font-size: 1.1em;
}
}
.fa-old-padding {
&.svg-inline--fa {
padding: 0 0.3em;
}
}
@keyframes shakeError {
@ -940,22 +839,6 @@ nav {
background-color: var(--panel, $fallback--fg);
}
.unread-chat-count {
font-size: 0.9em;
font-weight: bolder;
font-style: normal;
position: absolute;
right: 0.6rem;
padding: 0 0.3em;
min-width: 1.3rem;
min-height: 1.3rem;
max-height: 1.3rem;
line-height: 1.3rem;
max-width: 10em;
overflow: hidden;
text-overflow: ellipsis;
}
.chat-layout {
// Needed for smoother chat navigation in the desktop Safari (otherwise the chat layout "jumps" as the chat opens).
overflow: hidden;

69
src/App.vue
View File

@ -9,74 +9,7 @@
:style="bgStyle"
/>
<MobileNav v-if="isMobileLayout" />
<nav
v-else
id="nav"
class="nav-bar container"
@click="scrollToTop()"
>
<div class="inner-nav">
<div
class="logo"
:style="logoBgStyle"
>
<div
class="mask"
:style="logoMaskStyle"
/>
<img
:src="logo"
:style="logoStyle"
>
</div>
<div class="item">
<router-link
v-if="!hideSitename"
class="site-name"
:to="{ name: 'root' }"
active-class="home"
>
{{ sitename }}
</router-link>
</div>
<div class="item right">
<search-bar
v-if="currentUser || !privateMode"
class="nav-icon mobile-hidden"
@toggled="onSearchBarToggled"
@click.stop.native
/>
<a
href="#"
class="mobile-hidden"
@click.stop="openSettingsModal"
>
<i
class="button-icon icon-cog nav-icon"
:title="$t('nav.preferences')"
/>
</a>
<a
v-if="currentUser && currentUser.role === 'admin'"
href="/pleroma/admin/#/login-pleroma"
class="mobile-hidden"
target="_blank"
><i
class="button-icon icon-gauge nav-icon"
:title="$t('nav.administration')"
/></a>
<a
v-if="currentUser"
href="#"
class="mobile-hidden"
@click.prevent="logout"
><i
class="button-icon icon-logout nav-icon"
:title="$t('login.logout')"
/></a>
</div>
</div>
</nav>
<DesktopNav v-else />
<div class="app-bg-wrapper app-container-wrapper" />
<div
id="content"

1
src/boot/after_store.js
View File

@ -130,6 +130,7 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
? 0
: config.logoMargin
})
copyInstanceOption('logoLeft')
store.commit('authFlow/setInitialStrategy', config.loginMethod)
copyInstanceOption('redirectRootNoLogin')

8
src/components/account_actions/account_actions.js
View File

@ -1,6 +1,14 @@
import { mapState } from 'vuex'
import ProgressButton from '../progress_button/progress_button.vue'
import Popover from '../popover/popover.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faEllipsisV
} from '@fortawesome/free-solid-svg-icons'
library.add(
faEllipsisV
)
const AccountActions = {
props: [

35
src/components/account_actions/account_actions.vue
View File

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

22
src/components/attachment/attachment.js
View File

@ -3,6 +3,20 @@ import VideoAttachment from '../video_attachment/video_attachment.vue'
import nsfwImage from '../../assets/nsfw.png'
import fileTypeService from '../../services/file_type/file_type.service.js'
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 = {
props: [
@ -39,10 +53,10 @@ const Attachment = {
return this.attachment.description
},
placeholderIconClass () {
if (this.type === 'image') return 'icon-picture'
if (this.type === 'video') return 'icon-video'
if (this.type === 'audio') return 'icon-music'
return 'icon-doc'
if (this.type === 'image') return 'image'
if (this.type === 'video') return 'video'
if (this.type === 'audio') return 'music'
return 'file'
},
referrerpolicy () {
return this.$store.state.instance.mediaProxyAvailable ? '' : 'no-referrer'

16
src/components/attachment/attachment.vue
View File

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

101
src/components/chat/chat.js
View File

@ -7,10 +7,23 @@ import ChatTitle from '../chat_title/chat_title.vue'
import chatService from '../../services/chat_service/chat_service.js'
import { promiseInterval } from '../../services/promise_interval/promise_interval.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'
import { buildFakeMessage } from '../../services/chat_utils/chat_utils.js'
library.add(
faChevronDown,
faChevronLeft
)
const BOTTOMED_OUT_OFFSET = 10
const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 150
const SAFE_RESIZE_TIME_OFFSET = 100
const MARK_AS_READ_DELAY = 1500
const MAX_RETRIES = 10
const Chat = {
components: {
@ -24,7 +37,8 @@ const Chat = {
hoveredMessageChainId: undefined,
lastScrollPosition: {},
scrollableContainerHeight: '100%',
errorLoadingChat: false
errorLoadingChat: false,
messageRetriers: {}
}
},
created () {
@ -94,7 +108,7 @@ const Chat = {
const bottomedOutBeforeUpdate = this.bottomedOut(BOTTOMED_OUT_OFFSET)
this.$nextTick(() => {
if (bottomedOutBeforeUpdate) {
this.scrollDown({ forceRead: !document.hidden })
this.scrollDown()
}
})
},
@ -200,7 +214,7 @@ const Chat = {
this.$nextTick(() => {
scrollable.scrollTo({ top: scrollable.scrollHeight, left: 0, behavior })
})
if (forceRead || this.newMessageCount > 0) {
if (forceRead) {
this.readChat()
}
},
@ -208,7 +222,10 @@ const Chat = {
if (!(this.currentChatMessageService && this.currentChatMessageService.maxId)) { return }
if (document.hidden) { return }
const lastReadId = this.currentChatMessageService.maxId
this.$store.dispatch('readChat', { id: this.currentChat.id, lastReadId })
this.$store.dispatch('readChat', {
id: this.currentChat.id,
lastReadId
})
},
bottomedOut (offset) {
return isBottomedOut(this.$refs.scrollable, offset)
@ -225,12 +242,18 @@ const Chat = {
} else if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
this.jumpToBottomButtonVisible = false
if (this.newMessageCount > 0) {
this.readChat()
// Use a delay before marking as read to prevent situation where new messages
// arrive just as you're leaving the view and messages that you didn't actually
// get to see get marked as read.
window.setTimeout(() => {
// Don't mark as read if the element doesn't exist, user has left chat view
if (this.$el) this.readChat()
}, MARK_AS_READ_DELAY)
}
} else {
this.jumpToBottomButtonVisible = true
}
}, 100),
}, 200),
handleScrollUp (positionBeforeLoading) {
const positionAfterLoading = getScrollPosition(this.$refs.scrollable)
this.$refs.scrollable.scrollTo({
@ -292,42 +315,74 @@ const Chat = {
})
this.fetchChat({ isFirstFetch: true })
},
sendMessage ({ status, media }) {
handleAttachmentPosting () {
this.$nextTick(() => {
this.handleResize()
// When the posting form size changes because of a media attachment, we need an extra resize
// to account for the potential delay in the DOM update.
setTimeout(() => {
this.updateScrollableContainerHeight()
}, SAFE_RESIZE_TIME_OFFSET)
this.scrollDown({ forceRead: true })
})
},
sendMessage ({ status, media, idempotencyKey }) {
const params = {
id: this.currentChat.id,
content: status
content: status,
idempotencyKey
}
if (media[0]) {
params.mediaId = media[0].id
}
return this.backendInteractor.sendChatMessage(params)
const fakeMessage = buildFakeMessage({
attachments: media,
chatId: this.currentChat.id,
content: status,
userId: this.currentUser.id,
idempotencyKey
})
this.$store.dispatch('addChatMessages', {
chatId: this.currentChat.id,
messages: [fakeMessage]
}).then(() => {
this.handleAttachmentPosting()
})
return this.doSendMessage({ params, fakeMessage, retriesLeft: MAX_RETRIES })
},
doSendMessage ({ params, fakeMessage, retriesLeft = MAX_RETRIES }) {
if (retriesLeft <= 0) return
this.backendInteractor.sendChatMessage(params)
.then(data => {
this.$store.dispatch('addChatMessages', {
chatId: this.currentChat.id,
messages: [data],
updateMaxId: false
}).then(() => {
this.$nextTick(() => {
this.handleResize()
// When the posting form size changes because of a media attachment, we need an extra resize
// to account for the potential delay in the DOM update.
setTimeout(() => {
this.updateScrollableContainerHeight()
}, SAFE_RESIZE_TIME_OFFSET)
this.scrollDown({ forceRead: true })
})
updateMaxId: false,
messages: [{ ...data, fakeId: fakeMessage.id }]
})
return data
})
.catch(error => {
console.error('Error sending message', error)
return {
error: this.$t('chats.error_sending_message')
this.$store.dispatch('handleMessageError', {
chatId: this.currentChat.id,
fakeId: fakeMessage.id,
isRetry: retriesLeft !== MAX_RETRIES
})
if ((error.statusCode >= 500 && error.statusCode < 600) || error.message === 'Failed to fetch') {
this.messageRetriers[fakeMessage.id] = setTimeout(() => {
this.doSendMessage({ params, fakeMessage, retriesLeft: retriesLeft - 1 })
}, 1000 * (2 ** (MAX_RETRIES - retriesLeft)))
}
return {}
})
return Promise.resolve(fakeMessage)
},
goBack () {
this.$router.push({ name: 'chats', params: { username: this.currentUser.screen_name } })

24
src/components/chat/chat.scss
View File

@ -25,7 +25,7 @@
min-height: 100%;
margin: 0 0 0 0;
border-radius: 10px 10px 0 0;
border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0 ;
border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;
&::after {
border-radius: 0;
@ -58,12 +58,10 @@
.go-back-button {
cursor: pointer;
margin-right: 1.4em;
i {
display: flex;
align-items: center;
}
width: 28px;
text-align: center;
padding: 0.6em;
margin: -0.6em 0.6em -0.6em -0.6em;
}
.jump-to-bottom-button {
@ -78,7 +76,7 @@
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);
z-index: 10;
transition: 0.35s all;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
@ -140,11 +138,21 @@
}
.chat-view-heading {
box-sizing: border-box;
position: static;
z-index: 9999;
top: 0;
margin-top: 0;
border-radius: 0;
/* This practically overlays the panel heading color over panel background
* color. This is needed because we allow transparent panel background and
* it doesn't work well in this "disjointed panel header" case
*/
background:
linear-gradient(to top, var(--panel), var(--panel)),
linear-gradient(to top, var(--bg), var(--bg));
height: 50px;
}
.scrollable-message-list {

11
src/components/chat/chat.vue
View File

@ -14,7 +14,10 @@
class="go-back-button"
@click="goBack"
>
<i class="button-icon icon-left-open" />
<FAIcon
size="lg"
icon="chevron-left"
/>
</a>
<div class="title text-center">
<ChatTitle
@ -58,14 +61,15 @@
:class="{ 'visible': jumpToBottomButtonVisible }"
@click="scrollDown({ behavior: 'smooth' })"
>
<i class="icon-down-open">
<span>
<FAIcon icon="chevron-down" />
<div
v-if="newMessageCount"
class="badge badge-notification unread-chat-count unread-message-count"
>
{{ newMessageCount }}
</div>
</i>
</span>
</div>
<PostStatusForm
:disable-subject="true"
@ -76,6 +80,7 @@
:disable-sensitivity-checkbox="true"
:disable-submit="errorLoadingChat || !currentChat"
:disable-preview="true"
:optimistic-posting="true"
:post-handler="sendMessage"
:submit-on-enter="!mobileLayout"
:preserve-focus="!mobileLayout"

12
src/components/chat_list_item/chat_list_item.vue
View File

@ -21,6 +21,12 @@
/>
</span>
<span class="heading-right" />
<div class="time-wrapper">
<Timeago
:time="chat.updated_at"
:auto-update="60"
/>
</div>
</div>
<div class="chat-preview">
<StatusContent
@ -35,12 +41,6 @@
</div>
</div>
</div>
<div class="time-wrapper">
<Timeago
:time="chat.updated_at"
:auto-update="60"
/>
</div>
</div>
</template>

10
src/components/chat_message/chat_message.js
View File

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

15
src/components/chat_message/chat_message.scss
View File

@ -24,7 +24,7 @@
}
}
.icon-ellipsis {
.menu-icon {
cursor: pointer;
&:hover, .extra-button-popover.open & {
@ -101,6 +101,19 @@
}
}
.pending {
.status-content.media-body, .created-at {
color: var(--faint);
}
}
.error {
.status-content.media-body, .created-at {
color: $fallback--cRed;
color: var(--badgeNotification, $fallback--cRed);
}
}
.incoming {
a {
color: var(--chatMessageIncomingLink, $fallback--link);

7
src/components/chat_message/chat_message.vue
View File

@ -32,7 +32,7 @@
>
<div
class="media status"
:class="{ 'without-attachment': !hasAttachment }"
:class="{ 'without-attachment': !hasAttachment, 'pending': chatViewItem.data.pending, 'error': chatViewItem.data.error }"
style="position: relative"
@mouseenter="hovered = true"
@mouseleave="hovered = false"
@ -56,15 +56,16 @@
class="dropdown-item dropdown-item-icon"
@click="deleteMessage"
>
<i class="icon-cancel" /> {{ $t("chats.delete") }}
<FAIcon icon="times" /> {{ $t("chats.delete") }}
</button>
</div>
</div>
<button
slot="trigger"
class="menu-icon"
:title="$t('chats.more')"
>
<i class="icon-ellipsis" />
<FAIcon icon="ellipsis-h" />
</button>
</Popover>
</div>

10
src/components/chat_new/chat_new.js
View File

@ -1,6 +1,16 @@
import { mapState, mapGetters } from 'vuex'
import BasicUserCard from '../basic_user_card/basic_user_card.vue'
import UserAvatar from '../user_avatar/user_avatar.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faSearch,
faChevronLeft
} from '@fortawesome/free-solid-svg-icons'
library.add(
faSearch,
faChevronLeft
)
const chatNew = {
components: {

8
src/components/chat_new/chat_new.scss
View File

@ -8,9 +8,7 @@
}
}
.icon-search {
font-size: 1.5em;
float: right;
.search-icon {
margin-right: 0.3em;
}
@ -25,5 +23,9 @@
.go-back-button {
cursor: pointer;
width: 28px;
text-align: center;
padding: 0.6em;
margin: -0.6em 0.6em -0.6em -0.6em;
}
}

10
src/components/chat_new/chat_new.vue
View File

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

10
src/components/chat_panel/chat_panel.js
View File

@ -1,4 +1,14 @@
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 = {
props: [ 'floating' ],

12
src/components/chat_panel/chat_panel.vue
View File

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

26
src/components/contrast_ratio/contrast_ratio.vue
View File

@ -8,13 +8,13 @@
class="rating"
>
<span v-if="contrast.aaa">
<i class="icon-thumbs-up-alt" />
<FAIcon icon="thumbs-up" />
</span>
<span v-if="!contrast.aaa && contrast.aa">
<i class="icon-adjust" />
<FAIcon icon="adjust" />
</span>
<span v-if="!contrast.aaa && !contrast.aa">
<i class="icon-attention" />
<FAIcon icon="exclamation-triangle" />
</span>
</span>
<span
@ -23,19 +23,32 @@
:title="hint_18pt"
>
<span v-if="contrast.laaa">
<i class="icon-thumbs-up-alt" />
<FAIcon icon="thumbs-up" />
</span>
<span v-if="!contrast.laaa && contrast.laa">
<i class="icon-adjust" />
<FAIcon icon="adjust" />
</span>
<span v-if="!contrast.laaa && !contrast.laa">
<i class="icon-attention" />
<FAIcon icon="exclamation-triangle" />
</span>
</span>
</span>
</template>
<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 {
props: {
large: {
@ -85,6 +98,7 @@ export default {
.rating {
display: inline-block;
text-align: center;
margin-left: 0.5em;
}
}
</style>

89
src/components/desktop_nav/desktop_nav.js Normal file
View File

@ -0,0 +1,89 @@
import SearchBar from 'components/search_bar/search_bar.vue'
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
)
export default {
components: {
SearchBar
},
data: () => ({
searchBarHidden: true,
supportsMask: window.CSS && window.CSS.supports && (
window.CSS.supports('mask-size', 'contain') ||
window.CSS.supports('-webkit-mask-size', 'contain') ||
window.CSS.supports('-moz-mask-size', 'contain') ||
window.CSS.supports('-ms-mask-size', 'contain') ||
window.CSS.supports('-o-mask-size', 'contain')
)
}),
computed: {
enableMask () { return this.supportsMask && this.$store.state.instance.logoMask },
logoStyle () {
return {
'visibility': this.enableMask ? 'hidden' : 'visible'
}
},
logoMaskStyle () {
return this.enableMask ? {
'mask-image': `url(${this.$store.state.instance.logo})`
} : {
'background-color': this.enableMask ? '' : 'transparent'
}
},
logoBgStyle () {
return Object.assign({
'margin': `${this.$store.state.instance.logoMargin} 0`,
opacity: this.searchBarHidden ? 1 : 0
}, this.enableMask ? {} : {
'background-color': this.enableMask ? '' : 'transparent'
})
},
logo () { return this.$store.state.instance.logo },
sitename () { return this.$store.state.instance.name },
hideSitename () { return this.$store.state.instance.hideSitename },
logoLeft () { return this.$store.state.instance.logoLeft },
currentUser () { return this.$store.state.users.currentUser },
privateMode () { return this.$store.state.instance.private }
},
methods: {
scrollToTop () {
window.scrollTo(0, 0)
},
logout () {
this.$router.replace('/main/public')
this.$store.dispatch('logout')
},
onSearchBarToggled (hidden) {
this.searchBarHidden = hidden
},
openSettingsModal () {
this.$store.dispatch('openSettingsModal')
}
}
}

112
src/components/desktop_nav/desktop_nav.scss Normal file
View File

@ -0,0 +1,112 @@
@import '../../_variables.scss';
.DesktopNav {
height: 50px;
width: 100%;
position: fixed;
.inner-nav {
display: grid;
grid-template-rows: 50px;
grid-template-columns: 2fr auto 2fr;
grid-template-areas: "sitename logo actions";
box-sizing: border-box;
padding: 0 1.2em;
margin: auto;
max-width: 980px;
}
&.-logoLeft {
grid-template-columns: auto 2fr 2fr;
grid-template-areas: "logo sitename actions";
}
button {
&, svg {
color: $fallback--text;
color: var(--btnTopBarText, $fallback--text);
}
&:active {
background-color: $fallback--fg;
background-color: var(--btnPressedTopBar, $fallback--fg);
color: $fallback--text;
color: var(--btnPressedTopBarText, $fallback--text);
}
&:disabled {
color: $fallback--text;
color: var(--btnDisabledTopBarText, $fallback--text);
}
&.toggled {
color: $fallback--text;
color: var(--btnToggledTopBarText, $fallback--text);
background-color: $fallback--fg;
background-color: var(--btnToggledTopBar, $fallback--fg)
}
}
.logo {
grid-area: logo;
position: relative;
transition: opacity;
transition-timing-function: ease-out;
transition-duration: 100ms;
@media all and (min-width: 800px) {
opacity: 1 !important;
}
.mask {
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
background-color: $fallback--fg;
background-color: var(--topBarText, $fallback--fg);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
img {
display: inline-block;
height: 50px;
}
}
.nav-icon {
margin-left: 0.2em;
width: 2em;
text-align: center;
}
a, a svg {
color: $fallback--link;
color: var(--topBarLink, $fallback--link);
}
.sitename {
grid-area: sitename;
}
.actions {
grid-area: actions;
}
.item {
flex: 1;
line-height: 50px;
height: 50px;
overflow: hidden;
display: flex;
flex-wrap: wrap;
&.right {
justify-content: flex-end;
text-align: right;
}
}
}

79
src/components/desktop_nav/desktop_nav.vue Normal file
View File

@ -0,0 +1,79 @@
<template>
<nav
id="nav"
class="DesktopNav"
:class="{ '-logoLeft': logoLeft }"
@click="scrollToTop()"
>
<div class="inner-nav">
<div class="item sitename">
<router-link
v-if="!hideSitename"
class="site-name"
:to="{ name: 'root' }"
active-class="home"
>
{{ sitename }}
</router-link>
</div>
<router-link
class="logo"
:to="{ name: 'root' }"
:style="logoBgStyle"
>
<div
class="mask"
:style="logoMaskStyle"
/>
<img
:src="logo"
:style="logoStyle"
>
</router-link>
<div class="item right actions">
<search-bar
v-if="currentUser || !privateMode"
@toggled="onSearchBarToggled"
@click.stop.native
/>
<a
href="#"
class="nav-icon"
@click.stop="openSettingsModal"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="cog"
:title="$t('nav.preferences')"
/>
</a>
<a
v-if="currentUser && currentUser.role === 'admin'"
href="/pleroma/admin/#/login-pleroma"
class="nav-icon"
target="_blank"
><FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="tachometer-alt"
:title="$t('nav.administration')"
/></a>
<a
v-if="currentUser"
href="#"
class="nav-icon"
@click.prevent="logout"
><FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="sign-out-alt"
:title="$t('login.logout')"
/></a>
</div>
</div>
</nav>
</template>
<script src="./desktop_nav.js"></script>
<style src="./desktop_nav.scss" lang="scss"></style>

9
src/components/emoji_input/emoji_input.js
View File

@ -3,6 +3,15 @@ import EmojiPicker from '../emoji_picker/emoji_picker.vue'
import { take } from 'lodash'
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
* without having to give up the comfort of <input/> and <textarea/> elements

2
src/components/emoji_input/emoji_input.vue
View File

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

16
src/components/emoji_picker/emoji_picker.js
View File

@ -1,4 +1,16 @@
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,
// loading 3 rows, could be overkill for narrow picker
@ -177,13 +189,13 @@ const EmojiPicker = {
{
id: 'custom',
text: this.$t('emoji.custom'),
icon: 'icon-smile',
icon: 'smile-beam',
emojis: customEmojis
},
{
id: 'standard',
text: this.$t('emoji.unicode'),
icon: 'icon-picture',
icon: 'box-open',
emojis: filterByKeyword(standardEmojis, this.keyword)
}
]

2
src/components/emoji_picker/emoji_picker.scss
View File

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

10
src/components/emoji_picker/emoji_picker.vue
View File

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

7
src/components/exporter/exporter.js
View File

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

8
src/components/exporter/exporter.vue
View File

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

20
src/components/extra_buttons/extra_buttons.js
View File

@ -1,4 +1,24 @@
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 = {
props: [ 'status' ],

53
src/components/extra_buttons/extra_buttons.vue
View File

@ -15,14 +15,20 @@
class="dropdown-item dropdown-item-icon"
@click.prevent="muteConversation"
>
<i class="icon-eye-off" /><span>{{ $t("status.mute_conversation") }}</span>
<FAIcon
fixed-width
icon="eye-slash"
/><span>{{ $t("status.mute_conversation") }}</span>
</button>
<button
v-if="canMute && status.thread_muted"
class="dropdown-item dropdown-item-icon"
@click.prevent="unmuteConversation"
>
<i class="icon-eye-off" /><span>{{ $t("status.unmute_conversation") }}</span>
<FAIcon
fixed-width
icon="eye-slash"
/><span>{{ $t("status.unmute_conversation") }}</span>
</button>
<button
v-if="!status.pinned && canPin"
@ -30,7 +36,10 @@
@click.prevent="pinStatus"
@click="close"
>
<i class="icon-pin" /><span>{{ $t("status.pin") }}</span>
<FAIcon
fixed-width
icon="thumbtack"
/><span>{{ $t("status.pin") }}</span>
</button>
<button
v-if="status.pinned && canPin"
@ -38,7 +47,10 @@
@click.prevent="unpinStatus"
@click="close"
>
<i class="icon-pin" /><span>{{ $t("status.unpin") }}</span>
<FAIcon
fixed-width
icon="thumbtack"
/><span>{{ $t("status.unpin") }}</span>
</button>
<button
v-if="!status.bookmarked"
@ -46,7 +58,10 @@
@click.prevent="bookmarkStatus"
@click="close"
>
<i class="icon-bookmark-empty" /><span>{{ $t("status.bookmark") }}</span>
<FAIcon
fixed-width
:icon="['far', 'bookmark']"
/><span>{{ $t("status.bookmark") }}</span>
</button>
<button
v-if="status.bookmarked"
@ -54,7 +69,10 @@
@click.prevent="unbookmarkStatus"
@click="close"
>
<i class="icon-bookmark" /><span>{{ $t("status.unbookmark") }}</span>
<FAIcon
fixed-width
icon="bookmark"
/><span>{{ $t("status.unbookmark") }}</span>
</button>
<button
v-if="canDelete"
@ -62,21 +80,29 @@
@click.prevent="deleteStatus"
@click="close"
>
<i class="icon-cancel" /><span>{{ $t("status.delete") }}</span>
<FAIcon
fixed-width
icon="times"
/><span>{{ $t("status.delete") }}</span>
</button>
<button
class="dropdown-item dropdown-item-icon"
@click.prevent="copyLink"
@click="close"
>
<i class="icon-share" /><span>{{ $t("status.copy_link") }}</span>
<FAIcon
fixed-width
icon="share-alt"
/><span>{{ $t("status.copy_link") }}</span>
</button>
</div>
</div>
<i
slot="trigger"
class="icon-ellipsis button-icon"
/>
<span slot="trigger">
<FAIcon
class="ExtraButtons fa-scale-110 fa-old-padding"
icon="ellipsis-h"
/>
</span>
</Popover>
</template>
@ -85,8 +111,9 @@
<style lang="scss">
@import '../../_variables.scss';
.icon-ellipsis {
.ExtraButtons {
cursor: pointer;
position: static;
&:hover,
.extra-button-popover.open & {

14
src/components/favorite_button/favorite_button.js
View File

@ -1,4 +1,14 @@
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 = {
props: ['status', 'loggedIn'],
@ -23,9 +33,7 @@ const FavoriteButton = {
computed: {
classes () {
return {
'icon-star-empty': !this.status.favorited,
'icon-star': this.status.favorited,
'animate-spin': this.animated
'-favorited': this.status.favorited
}
},
...mapGetters(['mergedConfig'])

31
src/components/favorite_button/favorite_button.vue
View File

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

8
src/components/font_control/font_control.js
View File

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

5
src/components/font_control/font_control.vue
View File

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

8
src/components/global_notice_list/global_notice_list.js
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 = {
computed: {

5
src/components/global_notice_list/global_notice_list.vue
View File

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

10
src/components/image_cropper/image_cropper.js
View File

@ -1,5 +1,15 @@
import Cropper from 'cropperjs'
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 = {
props: {

10
src/components/image_cropper/image_cropper.vue
View File

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

11
src/components/importer/importer.js
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 = {
props: {
submitHandler: {

14
src/components/importer/importer.vue
View File

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

13
src/components/interface_language_switcher/interface_language_switcher.vue
View File

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

8
src/components/login_form/login_form.js
View File

@ -1,5 +1,13 @@
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
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 = {
data: () => ({

5
src/components/login_form/login_form.vue
View File

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

10
src/components/media_modal/media_modal.js
View File

@ -3,6 +3,16 @@ import VideoAttachment from '../video_attachment/video_attachment.vue'
import Modal from '../modal/modal.vue'
import fileTypeService from '../../services/file_type/file_type.service.js'
import GestureService from '../../services/gesture_service/gesture_service'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faChevronLeft,
faChevronRight
} from '@fortawesome/free-solid-svg-icons'
library.add(
faChevronLeft,
faChevronRight
)
const MediaModal = {
components: {

10
src/components/media_modal/media_modal.vue
View File

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

8
src/components/media_upload/media_upload.js
View File

@ -2,6 +2,14 @@
import statusPosterService from '../../services/status_poster/status_poster.service.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 = {
data () {
return {

21
src/components/media_upload/media_upload.vue
View File

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

8
src/components/mfa_form/recovery_form.js
View File

@ -1,5 +1,13 @@
import mfaApi from '../../services/new_api/mfa.js'
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 {
data: () => ({

5
src/components/mfa_form/recovery_form.vue
View File

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

9
src/components/mfa_form/totp_form.js
View File

@ -1,5 +1,14 @@
import mfaApi from '../../services/new_api/mfa.js'
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 {
data: () => ({
code: null,

6
src/components/mfa_form/totp_form.vue
View File

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

12
src/components/mobile_nav/mobile_nav.js
View File

@ -3,6 +3,18 @@ import Notifications from '../notifications/notifications.vue'
import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
import GestureService from '../../services/gesture_service/gesture_service'
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 = {
components: {

284
src/components/mobile_nav/mobile_nav.vue
View File

@ -1,49 +1,53 @@
<template>
<div>
<div
class="MobileNav"
>
<nav
id="nav"
class="nav-bar container"
class="mobile-nav"
:class="{ 'mobile-hidden': isChat }"
@click="scrollToTop()"
>
<div
class="mobile-inner-nav"
@click="scrollToTop()"
>
<div class="item">
<a
href="#"
class="mobile-nav-button"
@click.stop.prevent="toggleMobileSidebar()"
>
<i class="button-icon icon-menu" />
<div
v-if="unreadChatCount"
class="alert-dot"
/>
</a>
<router-link
v-if="!hideSitename"
class="site-name"
:to="{ name: 'root' }"
active-class="home"
>
{{ sitename }}
</router-link>
</div>
<div class="item right">
<a
v-if="currentUser"
class="mobile-nav-button"
href="#"
@click.stop.prevent="openMobileNotifications()"
>
<i class="button-icon icon-bell-alt" />
<div
v-if="unseenNotificationsCount"
class="alert-dot"
/>
</a>
</div>
<div class="item">
<a
href="#"
class="mobile-nav-button"
@click.stop.prevent="toggleMobileSidebar()"
>
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="bars"
/>
<div
v-if="unreadChatCount"
class="alert-dot"
/>
</a>
<router-link
v-if="!hideSitename"
class="site-name"
:to="{ name: 'root' }"
active-class="home"
>
{{ sitename }}
</router-link>
</div>
<div class="item right">
<a
v-if="currentUser"
class="mobile-nav-button"
href="#"
@click.stop.prevent="openMobileNotifications()"
>
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="bell"
/>
<div
v-if="unseenNotificationsCount"
class="alert-dot"
/>
</a>
</div>
</nav>
<div
@ -59,7 +63,10 @@
class="mobile-nav-button"
@click.stop.prevent="closeMobileNotifications()"
>
<i class="button-icon icon-cancel" />
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="times"
/>
</a>
</div>
<div
@ -84,101 +91,124 @@
<style lang="scss">
@import '../../_variables.scss';
.mobile-inner-nav {
width: 100%;
display: flex;
align-items: center;
}
.mobile-nav-button {
display: flex;
justify-content: center;
width: 50px;
position: relative;
cursor: pointer;
}
.alert-dot {
border-radius: 100%;
height: 8px;
width: 8px;
position: absolute;
left: calc(50% - 4px);
top: calc(50% - 4px);
margin-left: 6px;
margin-top: -6px;
background-color: $fallback--cRed;
background-color: var(--badgeNotification, $fallback--cRed);
}
.mobile-notifications-drawer {
width: 100%;
height: 100vh;
overflow-x: hidden;
position: fixed;
top: 0;
left: 0;
box-shadow: 1px 1px 4px rgba(0,0,0,.6);
box-shadow: var(--panelShadow);
transition-property: transform;
transition-duration: 0.25s;
transform: translateX(0);
z-index: 1001;
-webkit-overflow-scrolling: touch;
&.closed {
transform: translateX(100%);
.MobileNav {
.mobile-nav {
display: grid;
line-height: 50px;
height: 50px;
grid-template-rows: 50px;
grid-template-columns: 2fr auto;
width: 100%;
position: fixed;
box-sizing: border-box;
}
}
.mobile-notifications-header {
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1;
width: 100%;
height: 50px;
line-height: 50px;
position: absolute;
color: var(--topBarText);
background-color: $fallback--fg;
background-color: var(--topBar, $fallback--fg);
box-shadow: 0px 0px 4px rgba(0,0,0,.6);
box-shadow: var(--topBarShadow);
.title {
font-size: 1.3em;
margin-left: 0.6em;
.mobile-inner-nav {
width: 100%;
display: flex;
align-items: center;
}
}
.mobile-notifications {
margin-top: 50px;
width: 100vw;
height: calc(100vh - 50px);
overflow-x: hidden;
overflow-y: scroll;
.mobile-nav-button {
display: inline-block;
text-align: center;
padding: 0 1em;
position: relative;
cursor: pointer;
}
color: $fallback--text;
color: var(--text, $fallback--text);
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
.site-name {
padding: 0 .3em;
display: inline-block;
}
.notifications {
padding: 0;
border-radius: 0;
box-shadow: none;
.panel {
border-radius: 0;
margin: 0;
box-shadow: none;
.item {
/* moslty just to get rid of extra whitespaces */
display: flex;
}
.alert-dot {
border-radius: 100%;
height: 8px;
width: 8px;
position: absolute;
left: calc(50% - 4px);
top: calc(50% - 4px);
margin-left: 6px;
margin-top: -6px;
background-color: $fallback--cRed;
background-color: var(--badgeNotification, $fallback--cRed);
}
.mobile-notifications-drawer {
width: 100%;
height: 100vh;
overflow-x: hidden;
position: fixed;
top: 0;
left: 0;
box-shadow: 1px 1px 4px rgba(0,0,0,.6);
box-shadow: var(--panelShadow);
transition-property: transform;
transition-duration: 0.25s;
transform: translateX(0);
z-index: 1001;
-webkit-overflow-scrolling: touch;
&.closed {
transform: translateX(100%);
}
.panel:after {
border-radius: 0;
}
.mobile-notifications-header {
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1;
width: 100%;
height: 50px;
line-height: 50px;
position: absolute;
color: var(--topBarText);
background-color: $fallback--fg;
background-color: var(--topBar, $fallback--fg);
box-shadow: 0px 0px 4px rgba(0,0,0,.6);
box-shadow: var(--topBarShadow);
.title {
font-size: 1.3em;
margin-left: 0.6em;
}
.panel .panel-heading {
}
.mobile-notifications {
margin-top: 50px;
width: 100vw;
height: calc(100vh - 50px);
overflow-x: hidden;
overflow-y: scroll;
color: $fallback--text;
color: var(--text, $fallback--text);
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
.notifications {
padding: 0;
border-radius: 0;
box-shadow: none;
.panel {
border-radius: 0;
margin: 0;
box-shadow: none;
}
.panel:after {
border-radius: 0;
}
.panel .panel-heading {
border-radius: 0;
box-shadow: none;
}
}
}
}

8
src/components/mobile_post_status_button/mobile_post_status_button.js
View File

@ -1,4 +1,12 @@
import { debounce } from 'lodash'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faPen
} from '@fortawesome/free-solid-svg-icons'
library.add(
faPen
)
const HIDDEN_FOR_PAGES = new Set([
'chats',

4
src/components/mobile_post_status_button/mobile_post_status_button.vue
View File

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

23
src/components/nav_panel/nav_panel.js
View File

@ -1,6 +1,29 @@
import { timelineNames } from '../timeline_menu/timeline_menu.js'
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 = {
created () {
if (this.currentUser && this.currentUser.locked) {

180
src/components/nav_panel/nav_panel.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="nav-panel">
<div class="NavPanel">
<div class="panel panel-default">
<ul>
<li v-if="currentUser || !privateMode">
@ -7,31 +7,47 @@
:to="{ name: timelinesRoute }"
: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>
</li>
<li v-if="currentUser">
<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>
</li>
<li v-if="currentUser && pleromaChatMessagesAvailable">
<router-link :to="{ name: 'chats', params: { username: currentUser.screen_name } }">
<div
v-if="unreadChatCount"
class="badge badge-notification unread-chat-count"
class="badge badge-notification"
>
{{ unreadChatCount }}
</div>
<i class="button-icon icon-chat" />{{ $t("nav.chats") }}
<FAIcon
fixed-width
class="fa-scale-110"
icon="comments"
/>{{ $t("nav.chats") }}
</router-link>
</li>
<li v-if="currentUser && currentUser.locked">
<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
v-if="followRequestCount > 0"
class="badge follow-request-count"
class="badge badge-notification"
>
{{ followRequestCount }}
</span>
@ -39,7 +55,11 @@
</li>
<li>
<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>
</li>
</ul>
@ -52,84 +72,88 @@
<style lang="scss">
@import '../../_variables.scss';
.nav-panel .panel {
overflow: hidden;
box-shadow: var(--panelShadow);
}
.nav-panel ul {
list-style: none;
margin: 0;
padding: 0;
}
.follow-request-count {
margin: -6px 10px;
background-color: $fallback--bg;
background-color: var(--input, $fallback--faint);
}
.nav-panel li {
border-bottom: 1px solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
padding: 0;
&:first-child a {
border-top-right-radius: $fallback--panelRadius;
border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
border-top-left-radius: $fallback--panelRadius;
border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
.NavPanel {
.panel {
overflow: hidden;
box-shadow: var(--panelShadow);
}
&:last-child a {
border-bottom-right-radius: $fallback--panelRadius;
border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
border-bottom-left-radius: $fallback--panelRadius;
border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
}
}
.nav-panel li:last-child {
border: none;
}
.nav-panel a {
display: block;
padding: 0.8em 0.85em;
&:hover {
background-color: $fallback--lightBg;
background-color: var(--selectedMenu, $fallback--lightBg);
color: $fallback--link;
color: var(--selectedMenuText, $fallback--link);
--faint: var(--selectedMenuFaintText, $fallback--faint);
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
--lightText: var(--selectedMenuLightText, $fallback--lightText);
--icon: var(--selectedMenuIcon, $fallback--icon);
ul {
list-style: none;
margin: 0;
padding: 0;
}
&.router-link-active {
font-weight: bolder;
background-color: $fallback--lightBg;
background-color: var(--selectedMenu, $fallback--lightBg);
color: $fallback--text;
color: var(--selectedMenuText, $fallback--text);
--faint: var(--selectedMenuFaintText, $fallback--faint);
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
--lightText: var(--selectedMenuLightText, $fallback--lightText);
--icon: var(--selectedMenuIcon, $fallback--icon);
li {
position: relative;
border-bottom: 1px solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
padding: 0;
&:hover {
text-decoration: underline;
&:first-child a {
border-top-right-radius: $fallback--panelRadius;
border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
border-top-left-radius: $fallback--panelRadius;
border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
}
&:last-child a {
border-bottom-right-radius: $fallback--panelRadius;
border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
border-bottom-left-radius: $fallback--panelRadius;
border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
}
}
}
.nav-panel .button-icon {
margin-right: 0.5em;
}
li:last-child {
border: none;
}
.nav-panel .button-icon:before {
width: 1.1em;
a {
display: block;
box-sizing: border-box;
align-items: stretch;
height: 3.5em;
line-height: 3.5em;
padding: 0 1em;
&:hover {
background-color: $fallback--lightBg;
background-color: var(--selectedMenu, $fallback--lightBg);
color: $fallback--link;
color: var(--selectedMenuText, $fallback--link);
--faint: var(--selectedMenuFaintText, $fallback--faint);
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
--lightText: var(--selectedMenuLightText, $fallback--lightText);
--icon: var(--selectedMenuIcon, $fallback--icon);
}
&.router-link-active {
font-weight: bolder;
background-color: $fallback--lightBg;
background-color: var(--selectedMenu, $fallback--lightBg);
color: $fallback--text;
color: var(--selectedMenuText, $fallback--text);
--faint: var(--selectedMenuFaintText, $fallback--faint);
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
--lightText: var(--selectedMenuLightText, $fallback--lightText);
--icon: var(--selectedMenuIcon, $fallback--icon);
&:hover {
text-decoration: underline;
}
}
}
.fa-scale-110 {
margin-right: 0.8em;
}
.badge {
position: absolute;
right: 0.6rem;
top: 1.25em;
}
}
</style>

22
src/components/notification/notification.js
View File

@ -7,6 +7,28 @@ import Timeago from '../timeago/timeago.vue'
import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faCheck,
faTimes,
faStar,
faRetweet,
faUserPlus,
faEyeSlash,
faUser,
faSuitcaseRolling
} from '@fortawesome/free-solid-svg-icons'
library.add(
faCheck,
faTimes,
faStar,
faRetweet,
faUserPlus,
faUser,
faEyeSlash,
faSuitcaseRolling
)
const Notification = {
data () {

32
src/components/notification/notification.scss
View File

@ -1,3 +1,5 @@
@import '../../_variables.scss';
// TODO Copypaste from Status, should unify it somehow
.Notification {
&.-muted {
@ -49,4 +51,34 @@
display: block;
}
}
.type-icon {
margin: 0 0.1em;
}
&.-type--repeat .type-icon {
color: $fallback--cGreen;
color: var(--cGreen, $fallback--cGreen);
}
&.-type--follow .type-icon {
color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue);
}
&.-type--follow-request .type-icon {
color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue);
}
&.-type--like .type-icon {
color: orange;
color: $fallback--cOrange;
color: var(--cOrange, $fallback--cOrange);
}
&.-type--move .type-icon {
color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue);
}
}

51
src/components/notification/notification.vue
View File

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

6
src/components/notifications/notifications.js
View File

@ -6,6 +6,12 @@ import {
filteredNotificationsFromStore,
unseenNotificationsFromStore
} from '../../services/notification_utils/notification_utils.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
library.add(
faCircleNotch
)
const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30

31
src/components/notifications/notifications.scss
View File

@ -158,37 +158,6 @@
margin-right: .2em;
}
.icon-retweet.lit {
color: $fallback--cGreen;
color: var(--cGreen, $fallback--cGreen);
}
.icon-user.lit {
color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue);
}
.icon-user-plus.lit {
color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue);
}
.icon-reply.lit {
color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue);
}
.icon-star.lit {
color: orange;
color: $fallback--cOrange;
color: var(--cOrange, $fallback--cOrange);
}
.icon-arrow-curved.lit {
color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue);
}
.status-content {
margin: 0;
max-height: 300px;

6
src/components/notifications/notifications.vue
View File

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

20
src/components/panel_loading/panel_loading.vue
View File

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

8
src/components/password_reset/password_reset.js
View File

@ -1,5 +1,13 @@
import { mapState } from 'vuex'
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 = {
data: () => ({

6
src/components/password_reset/password_reset.vue
View File

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

12
src/components/poll/poll_form.js
View File

@ -1,5 +1,17 @@
import * as DateUtils from 'src/services/date_utils/date_utils.js'
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 {
name: 'PollForm',

34
src/components/poll/poll_form.vue
View File

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

6
src/components/popover/popover.vue
View File

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

28
src/components/post_status_form/post_status_form.js
View File

@ -12,6 +12,27 @@ import suggestor from '../emoji_input/suggestor.js'
import { mapGetters, mapState } from 'vuex'
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) => {
let allAttentions = [...attentions]
@ -54,7 +75,8 @@ const PostStatusForm = {
'autoFocus',
'fileLimit',
'submitOnEnter',
'emojiPickerPlacement'
'emojiPickerPlacement',
'optimisticPosting'
],
components: {
MediaUpload,
@ -251,7 +273,7 @@ const PostStatusForm = {
if (this.preview) this.previewStatus()
},
async postStatus (event, newStatus, opts = {}) {
if (this.posting) { return }
if (this.posting && !this.optimisticPosting) { return }
if (this.disableSubmit) { return }
if (this.emojiInputShown) { return }
if (this.submitOnEnter) {
@ -259,6 +281,8 @@ const PostStatusForm = {
event.preventDefault()
}
if (this.optimisticPosting && (this.emptyStatus || this.isOverLengthLimit)) { return }
if (this.emptyStatus) {
this.error = this.$t('post_status.empty_status_error')
return

113
src/components/post_status_form/post_status_form.vue
View File

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

4
src/components/react_button/react_button.js
View File

@ -1,4 +1,8 @@
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 = {
props: ['status'],

6
src/components/react_button/react_button.vue
View File

@ -12,6 +12,7 @@
<div class="reaction-picker-filter">
<input
v-model="filterWord"
size="1"
:placeholder="$t('emoji.search_emoji')"
>
</div>
@ -36,9 +37,10 @@
<div class="reaction-bottom-fader" />
</div>
</div>
<i
<FAIcon
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')"
/>
</Popover>

4
src/components/reply_button/reply_button.js
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 = {
name: 'ReplyButton',

26
src/components/reply_button/reply_button.vue
View File

@ -1,15 +1,17 @@
<template>
<div>
<i
<FAIcon
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')"
:class="{'-active': replying}"
@click.prevent="$emit('toggle')"
/>
<i
<FAIcon
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')"
/>
<span v-if="status.replies_count > 0">
@ -19,3 +21,19 @@
</template>
<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>

8
src/components/retweet_button/retweet_button.js
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 = {
props: ['status', 'loggedIn', 'visibility'],
@ -22,9 +26,7 @@ const RetweetButton = {
computed: {
classes () {
return {
'retweeted': this.status.repeated,
'retweeted-empty': !this.status.repeated,
'animate-spin': this.animated
'-repeated': this.status.repeated
}
},
mergedConfig () {

37
src/components/retweet_button/retweet_button.vue
View File

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

15
src/components/scope_selector/scope_selector.js
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 = {
props: [
'showAll',

60
src/components/scope_selector/scope_selector.vue
View File

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

10
src/components/search/search.js
View File

@ -2,6 +2,16 @@ import FollowCard from '../follow_card/follow_card.vue'
import Conversation from '../conversation/conversation.vue'
import Status from '../status/status.vue'
import map from 'lodash/map'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faCircleNotch,
faSearch
} from '@fortawesome/free-solid-svg-icons'
library.add(
faCircleNotch,
faSearch
)
const Search = {
components: {

8
src/components/search/search.vue
View File

@ -17,14 +17,18 @@
class="btn search-button"
@click="newQuery(searchTerm)"
>
<i class="icon-search" />
<FAIcon icon="search" />
</button>
</div>
<div
v-if="loading"
class="text-center loading-icon"
>
<i class="icon-spin3 animate-spin" />
<FAIcon
icon="circle-notch"
spin
size="lg"
/>
</div>
<div v-else-if="loaded">
<div class="search-nav-heading">

14
src/components/search_bar/search_bar.js
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 = {
data: () => ({
searchTerm: undefined,
hidden: true,
error: false,
loading: false
error: false
}),
watch: {
'$route': function (route) {

94
src/components/search_bar/search_bar.vue
View File

@ -1,40 +1,47 @@
<template>
<div>
<div class="search-bar-container">
<i
v-if="loading"
class="icon-spin4 finder-icon animate-spin-slow"
/>
<a
v-if="hidden"
href="#"
:title="$t('nav.search')"
><i
class="button-icon icon-search"
@click.prevent.stop="toggleHidden"
/></a>
<template v-else>
<input
id="search-bar-input"
ref="searchInput"
v-model="searchTerm"
class="search-bar-input"
:placeholder="$t('nav.search')"
type="text"
@keyup.enter="find(searchTerm)"
>
<button
class="btn search-button"
@click="find(searchTerm)"
>
<i class="icon-search" />
</button>
<i
class="button-icon icon-cancel"
<div
class="SearchBar"
:class="{ '-expanded': !hidden }"
>
<a
v-if="hidden"
href="#"
class="nav-icon"
:title="$t('nav.search')"
><FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="search"
@click.prevent.stop="toggleHidden"
/></a>
<template v-else>
<input
id="search-bar-input"
ref="searchInput"
v-model="searchTerm"
class="search-bar-input"
:placeholder="$t('nav.search')"
type="text"
@keyup.enter="find(searchTerm)"
>
<button
class="btn search-button"
@click="find(searchTerm)"
>
<FAIcon
fixed-width
icon="search"
/>
</button>
<span>
<FAIcon
fixed-width
icon="times"
class="cancel-icon fa-scale-110 fa-old-padding"
@click.prevent.stop="toggleHidden"
/>
</template>
</div>
</span>
</template>
</div>
</template>
@ -43,30 +50,29 @@
<style lang="scss">
@import '../../_variables.scss';
.search-bar-container {
max-width: 100%;
.SearchBar {
display: inline-flex;
align-items: baseline;
vertical-align: baseline;
justify-content: flex-end;
&.-expanded {
width: 100%;
}
.search-bar-input,
.search-button {
height: 29px;
}
.search-bar-input {
// TODO: do this properly without a rough guesstimate of 2 icons + paddings
max-width: calc(100% - 30px - 30px - 20px);
flex: 1 0 auto;
}
.search-button {
margin-left: .5em;
margin-right: .5em;
}
.icon-cancel {
.cancel-icon {
cursor: pointer;
color: $fallback--text;
color: var(--btnTopBarText, $fallback--text);
}
}

23
src/components/settings_modal/settings_modal_content.js
View File

@ -10,6 +10,29 @@ import GeneralTab from './tabs/general_tab.vue'
import VersionTab from './tabs/version_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 = {
components: {
TabSwitcher,

2
src/components/settings_modal/settings_modal_content.scss
View File

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

8
src/components/settings_modal/settings_modal_content.vue
View File

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

8
src/components/settings_modal/tabs/filtering_tab.js
View File

@ -2,6 +2,14 @@ import { filter, trim } from 'lodash'
import Checkbox from 'src/components/checkbox/checkbox.vue'
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 = {
data () {

5
src/components/settings_modal/tabs/filtering_tab.vue
View File

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

10
src/components/settings_modal/tabs/general_tab.js
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 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 = {
data () {

12
src/components/settings_modal/tabs/general_tab.vue
View File

@ -103,7 +103,10 @@
{{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
</option>
</select>
<i class="icon-down-open" />
<FAIcon
class="select-down-icon"
icon="chevron-down"
/>
</label>
</div>
</li>
@ -127,7 +130,10 @@
{{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
</option>
</select>
<i class="icon-down-open" />
<FAIcon
class="select-down-icon"
icon="chevron-down"
/>
</label>
</div>
</li>
@ -222,7 +228,7 @@
v-if="!loopSilentAvailable"
class="unavailable"
>
<i class="icon-globe" />! {{ $t('settings.limited_availability') }}
<FAIcon icon="globe" />! {{ $t('settings.limited_availability') }}
</div>
</li>
</ul>

12
src/components/settings_modal/tabs/profile_tab.js
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 Autosuggest from 'src/components/autosuggest/autosuggest.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 = {
data () {

6
src/components/settings_modal/tabs/profile_tab.scss
View File

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

44
src/components/settings_modal/tabs/profile_tab.vue
View File

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

43
src/components/settings_modal/tabs/theme_tab/preview.vue
View File

@ -39,21 +39,29 @@
</i18n>
<div class="icons">
<i
<FAIcon
fixed-width
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)"
class="button-icon icon-retweet"
class="fa-scale-110 fa-old-padding"
icon="retweet"
/>
<i
<FAIcon
fixed-width
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)"
class="button-icon icon-cancel"
class="fa-scale-110 fa-old-padding"
icon="times"
/>
</div>
</div>
@ -103,6 +111,25 @@
</div>
</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
)
export default {}
</script>
<style lang="scss">
.preview-container {
position: relative;

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