forked from AkkomaGang/akkoma-fe
remaining changes...
This commit is contained in:
Henry Jameson
parent
3cbaa00449
commit
a50cd7e37d
23 changed files with 162 additions and 97 deletions
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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,9 @@
|
|||
: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 +83,9 @@
|
|||
@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 +142,10 @@
|
|||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
|
||||
svg {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.nsfw-placeholder {
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
>
|
||||
<div class="title">
|
||||
<span>{{ $t('shoutbox.title') }}</span>
|
||||
<i
|
||||
<FAIcon
|
||||
v-if="floating"
|
||||
icon="times"
|
||||
/>
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
@click.stop.prevent="togglePanel"
|
||||
>
|
||||
<div class="title">
|
||||
<FAIcon icon="bullhorn" />
|
||||
<FAIcon class="icon" icon="bullhorn" />
|
||||
{{ $t('shoutbox.title') }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -87,7 +87,8 @@
|
|||
.chat-panel {
|
||||
.chat-heading {
|
||||
cursor: pointer;
|
||||
.icon-comment-empty {
|
||||
|
||||
.icon {
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<div class="notice-message">
|
||||
{{ $t(notice.messageKey, notice.messageArgs) }}
|
||||
</div>
|
||||
<i
|
||||
<FAIcon
|
||||
class="button-icon" icon="times"
|
||||
@click="closeNotice(notice)"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -2,11 +2,13 @@ import Cropper from 'cropperjs'
|
|||
import 'cropperjs/dist/cropper.css'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faTimes
|
||||
faTimes,
|
||||
faCircleNotch
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faTimes
|
||||
faTimes,
|
||||
faCircleNotch
|
||||
)
|
||||
|
||||
const ImageCropper = {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@
|
|||
>
|
||||
<div class="alert error">
|
||||
{{ error }}
|
||||
<i
|
||||
<FAIcon
|
||||
class="button-icon" icon="times"
|
||||
@click="clearError"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@
|
|||
>
|
||||
<div class="alert error">
|
||||
{{ error }}
|
||||
<i
|
||||
<FAIcon
|
||||
class="button-icon" icon="times"
|
||||
@click="clearError"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -56,8 +56,10 @@
|
|||
>
|
||||
<div class="alert error">
|
||||
{{ error }}
|
||||
<i
|
||||
class="button-icon" icon="times"
|
||||
<FAIcon
|
||||
size="lg"
|
||||
class="button-icon"
|
||||
icon="times"
|
||||
@click="clearError"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@
|
|||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.icon-cancel {
|
||||
.dismiss {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
>
|
||||
<FAIcon
|
||||
icon="times"
|
||||
class="delete"
|
||||
@click="deleteOption(index)"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -129,6 +130,14 @@
|
|||
width: 1.5em;
|
||||
margin-left: -1.5em;
|
||||
z-index: 1;
|
||||
|
||||
.delete {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.poll-type-expiry {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,8 @@ import {
|
|||
faPollH,
|
||||
faUpload,
|
||||
faBan,
|
||||
faTimes
|
||||
faTimes,
|
||||
faCircleNotch
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
|
|
@ -28,7 +29,8 @@ library.add(
|
|||
faPollH,
|
||||
faUpload,
|
||||
faBan,
|
||||
faTimes
|
||||
faTimes,
|
||||
faCircleNotch
|
||||
)
|
||||
|
||||
const buildMentionsString = ({ user, attentions = [] }, currentUser) => {
|
||||
|
|
|
|||
|
|
@ -85,9 +85,10 @@
|
|||
{{ $t('post_status.preview') }}
|
||||
<i :class="showPreview ? 'icon-left-open' : 'icon-right-open'" />
|
||||
</a>
|
||||
<i
|
||||
<FAIcon
|
||||
v-show="previewLoading"
|
||||
class="icon-spin3 animate-spin"
|
||||
spin
|
||||
icon="circle-notch"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -284,8 +285,10 @@
|
|||
class="alert error"
|
||||
>
|
||||
Error: {{ error }}
|
||||
<i
|
||||
class="button-icon" icon="times"
|
||||
<FAIcon
|
||||
class="button-icon"
|
||||
size="lg"
|
||||
icon="times"
|
||||
@click="clearError"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -295,7 +298,7 @@
|
|||
:key="file.url"
|
||||
class="media-upload-wrapper"
|
||||
>
|
||||
<i
|
||||
<FAIcon
|
||||
class="button-icon" icon="times"
|
||||
@click="removeMediaFile(file)"
|
||||
/>
|
||||
|
|
@ -379,10 +382,6 @@
|
|||
padding-left: 0.5em;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.icon-spin3 {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-toggle {
|
||||
|
|
@ -477,7 +476,7 @@
|
|||
text-align: right;
|
||||
}
|
||||
|
||||
.icon-chart-bar {
|
||||
.poll-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -490,19 +489,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;
|
||||
|
|
@ -525,7 +511,7 @@
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.media-upload-wrapper .attachments {
|
||||
.attachments .media-upload-wrapper{
|
||||
padding: 0 0.5em;
|
||||
|
||||
.attachment {
|
||||
|
|
@ -534,11 +520,14 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
i {
|
||||
.button-icon {
|
||||
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;
|
||||
|
|
@ -615,11 +604,6 @@
|
|||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.icon-cancel {
|
||||
cursor: pointer;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 0.6; }
|
||||
|
|
|
|||
|
|
@ -11,12 +11,14 @@ import Checkbox from 'src/components/checkbox/checkbox.vue'
|
|||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faTimes,
|
||||
faPlus
|
||||
faPlus,
|
||||
faCircleNotch
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faTimes,
|
||||
faPlus
|
||||
faPlus,
|
||||
faCircleNotch
|
||||
)
|
||||
|
||||
const ProfileTab = {
|
||||
|
|
|
|||
|
|
@ -119,10 +119,8 @@
|
|||
|
||||
&>.icon-container {
|
||||
width: 20px;
|
||||
|
||||
&>.icon-cancel {
|
||||
vertical-align: sub;
|
||||
}
|
||||
align-self: center;
|
||||
margin: 0 .2em .5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -127,7 +127,7 @@
|
|||
<div
|
||||
class="icon-container"
|
||||
>
|
||||
<i
|
||||
<FAIcon
|
||||
v-show="newFields.length > 1"
|
||||
icon="times"
|
||||
@click="deleteField(i)"
|
||||
|
|
@ -166,7 +166,7 @@
|
|||
:src="user.profile_image_url_original"
|
||||
class="current-avatar"
|
||||
>
|
||||
<i
|
||||
<FAIcon
|
||||
v-if="!isDefaultAvatar && pickAvatarBtnVisible"
|
||||
:title="$t('settings.reset_avatar')"
|
||||
class="reset-button" icon="times"
|
||||
|
|
@ -194,7 +194,7 @@
|
|||
<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="times"
|
||||
|
|
@ -214,9 +214,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,7 +232,7 @@
|
|||
class="alert error"
|
||||
>
|
||||
Error: {{ bannerUploadError }}
|
||||
<i
|
||||
<FAIcon
|
||||
class="button-icon" icon="times"
|
||||
@click="clearUploadError('banner')"
|
||||
/>
|
||||
|
|
@ -240,7 +242,7 @@
|
|||
<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="times"
|
||||
|
|
@ -260,9 +262,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 +280,10 @@
|
|||
class="alert error"
|
||||
>
|
||||
Error: {{ backgroundUploadError }}
|
||||
<i
|
||||
class="button-icon" icon="times"
|
||||
<FAIcon
|
||||
size="lg"
|
||||
class="button-icon"
|
||||
icon="times"
|
||||
@click="clearUploadError('background')"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -156,11 +156,6 @@ $status-margin: 0.75em;
|
|||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.icon-reply {
|
||||
// mirror the icon
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
|
||||
& .reply-to-popover,
|
||||
|
|
|
|||
|
|
@ -7,6 +7,24 @@ import fileType from 'src/services/file_type/file_type.service'
|
|||
import { processHtml } from 'src/services/tiny_post_html_processor/tiny_post_html_processor.service.js'
|
||||
import { mentionMatchesUrl, extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
|
||||
import { mapGetters, mapState } from 'vuex'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faCircleNotch,
|
||||
faFile,
|
||||
faMusic,
|
||||
faImage,
|
||||
faLink,
|
||||
faPollH
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faCircleNotch,
|
||||
faFile,
|
||||
faMusic,
|
||||
faImage,
|
||||
faLink,
|
||||
faPollH
|
||||
)
|
||||
|
||||
const StatusContent = {
|
||||
name: 'StatusContent',
|
||||
|
|
|
|||
|
|
@ -55,29 +55,29 @@
|
|||
@click.prevent="toggleShowMore"
|
||||
>
|
||||
{{ $t("status.show_content") }}
|
||||
<span
|
||||
<FAIcon
|
||||
v-if="attachmentTypes.includes('image')"
|
||||
class="icon-picture"
|
||||
icon="image"
|
||||
/>
|
||||
<span
|
||||
<FAIcon
|
||||
v-if="attachmentTypes.includes('video')"
|
||||
class="icon-video"
|
||||
icon="video"
|
||||
/>
|
||||
<span
|
||||
<FAIcon
|
||||
v-if="attachmentTypes.includes('audio')"
|
||||
class="icon-music"
|
||||
icon="music"
|
||||
/>
|
||||
<span
|
||||
<FAIcon
|
||||
v-if="attachmentTypes.includes('unknown')"
|
||||
class="icon-doc"
|
||||
icon="file"
|
||||
/>
|
||||
<span
|
||||
<FAIcon
|
||||
v-if="status.poll && status.poll.options"
|
||||
class="icon-chart-bar"
|
||||
icon="poll-h"
|
||||
/>
|
||||
<span
|
||||
<FAIcon
|
||||
v-if="status.card"
|
||||
class="icon-link"
|
||||
icon="link"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
|
|
@ -182,6 +182,10 @@ $status-margin: 0.75em;
|
|||
text-align: center;
|
||||
display: inline-block;
|
||||
word-break: break-all;
|
||||
|
||||
svg {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
img, video {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,14 @@ import Conversation from '../conversation/conversation.vue'
|
|||
import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
|
||||
import List from '../list/list.vue'
|
||||
import withLoadMore from '../../hocs/with_load_more/with_load_more'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faCircleNotch
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faCircleNotch
|
||||
)
|
||||
|
||||
const FollowerList = withLoadMore({
|
||||
fetch: (props, $store) => $store.dispatch('fetchFollowers', props.userId),
|
||||
|
|
|
|||
|
|
@ -122,9 +122,10 @@
|
|||
</div>
|
||||
<div class="panel-body">
|
||||
<span v-if="error">{{ error }}</span>
|
||||
<i
|
||||
<FAIcon
|
||||
v-else
|
||||
class="icon-spin3 animate-spin"
|
||||
spin
|
||||
icon="circle-notch"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -142,6 +143,7 @@
|
|||
|
||||
.user-profile-fields {
|
||||
margin: 0 0.5em;
|
||||
|
||||
img {
|
||||
object-fit: contain;
|
||||
vertical-align: middle;
|
||||
|
|
|
|||
Loading…
Reference in a new issue