remaining changes...

This commit is contained in:
Henry Jameson 2020-10-21 00:01:28 +03:00
parent 3cbaa00449
commit a50cd7e37d
23 changed files with 162 additions and 97 deletions

View file

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

View file

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

View file

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

View file

@ -9,7 +9,7 @@
<div class="notice-message"> <div class="notice-message">
{{ $t(notice.messageKey, notice.messageArgs) }} {{ $t(notice.messageKey, notice.messageArgs) }}
</div> </div>
<i <FAIcon
class="button-icon" icon="times" class="button-icon" icon="times"
@click="closeNotice(notice)" @click="closeNotice(notice)"
/> />

View file

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

View file

@ -31,9 +31,10 @@
@click="submit(false)" @click="submit(false)"
v-text="saveWithoutCroppingText" v-text="saveWithoutCroppingText"
/> />
<i <FAIcon
v-if="submitting" v-if="submitting"
class="icon-spin4 animate-spin" spin
icon="circle-notch"
/> />
</div> </div>
<div <div

View file

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

View file

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

View file

@ -76,7 +76,7 @@
> >
<div class="alert error"> <div class="alert error">
{{ error }} {{ error }}
<i <FAIcon
class="button-icon" icon="times" class="button-icon" icon="times"
@click="clearError" @click="clearError"
/> />

View file

@ -54,7 +54,7 @@
> >
<div class="alert error"> <div class="alert error">
{{ error }} {{ error }}
<i <FAIcon
class="button-icon" icon="times" class="button-icon" icon="times"
@click="clearError" @click="clearError"
/> />

View file

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

View file

@ -122,7 +122,7 @@
padding-right: 2rem; padding-right: 2rem;
} }
.icon-cancel { .dismiss {
cursor: pointer; cursor: pointer;
} }
} }

View file

@ -26,6 +26,7 @@
> >
<FAIcon <FAIcon
icon="times" icon="times"
class="delete"
@click="deleteOption(index)" @click="deleteOption(index)"
/> />
</div> </div>
@ -129,6 +130,14 @@
width: 1.5em; width: 1.5em;
margin-left: -1.5em; margin-left: -1.5em;
z-index: 1; z-index: 1;
.delete {
cursor: pointer;
&:hover {
color: inherit;
}
}
} }
.poll-type-expiry { .poll-type-expiry {

View file

@ -19,7 +19,8 @@ import {
faPollH, faPollH,
faUpload, faUpload,
faBan, faBan,
faTimes faTimes,
faCircleNotch
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
library.add( library.add(
@ -28,7 +29,8 @@ library.add(
faPollH, faPollH,
faUpload, faUpload,
faBan, faBan,
faTimes faTimes,
faCircleNotch
) )
const buildMentionsString = ({ user, attentions = [] }, currentUser) => { const buildMentionsString = ({ user, attentions = [] }, currentUser) => {

View file

@ -85,9 +85,10 @@
{{ $t('post_status.preview') }} {{ $t('post_status.preview') }}
<i :class="showPreview ? 'icon-left-open' : 'icon-right-open'" /> <i :class="showPreview ? 'icon-left-open' : 'icon-right-open'" />
</a> </a>
<i <FAIcon
v-show="previewLoading" v-show="previewLoading"
class="icon-spin3 animate-spin" spin
icon="circle-notch"
/> />
</div> </div>
<div <div
@ -284,8 +285,10 @@
class="alert error" class="alert error"
> >
Error: {{ error }} Error: {{ error }}
<i <FAIcon
class="button-icon" icon="times" class="button-icon"
size="lg"
icon="times"
@click="clearError" @click="clearError"
/> />
</div> </div>
@ -295,7 +298,7 @@
:key="file.url" :key="file.url"
class="media-upload-wrapper" class="media-upload-wrapper"
> >
<i <FAIcon
class="button-icon" icon="times" class="button-icon" icon="times"
@click="removeMediaFile(file)" @click="removeMediaFile(file)"
/> />
@ -379,10 +382,6 @@
padding-left: 0.5em; padding-left: 0.5em;
display: flex; display: flex;
width: 100%; width: 100%;
.icon-spin3 {
margin-left: auto;
}
} }
.preview-toggle { .preview-toggle {
@ -477,7 +476,7 @@
text-align: right; text-align: right;
} }
.icon-chart-bar { .poll-icon {
cursor: pointer; cursor: pointer;
} }
@ -490,19 +489,6 @@
margin-bottom: .5em; margin-bottom: .5em;
width: 18em; width: 18em;
.icon-cancel {
display: inline-block;
position: static;
margin: 0;
padding-bottom: 0;
margin-left: $fallback--attachmentRadius;
margin-left: var(--attachmentRadius, $fallback--attachmentRadius);
background-color: $fallback--fg;
background-color: var(--btn, $fallback--fg);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
img, video { img, video {
object-fit: contain; object-fit: contain;
max-height: 10em; max-height: 10em;
@ -525,7 +511,7 @@
flex-direction: column; flex-direction: column;
} }
.media-upload-wrapper .attachments { .attachments .media-upload-wrapper{
padding: 0 0.5em; padding: 0 0.5em;
.attachment { .attachment {
@ -534,11 +520,14 @@
position: relative; position: relative;
} }
i { .button-icon {
position: absolute; position: absolute;
margin: 10px; margin: 10px;
padding: 5px; margin: .75em;
padding: .5em;
background: rgba(230,230,230,0.6); background: rgba(230,230,230,0.6);
z-index: 2;
color: black;
border-radius: $fallback--attachmentRadius; border-radius: $fallback--attachmentRadius;
border-radius: var(--attachmentRadius, $fallback--attachmentRadius); border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
font-weight: bold; font-weight: bold;
@ -615,11 +604,6 @@
cursor: not-allowed; cursor: not-allowed;
} }
.icon-cancel {
cursor: pointer;
z-index: 4;
}
@keyframes fade-in { @keyframes fade-in {
from { opacity: 0; } from { opacity: 0; }
to { opacity: 0.6; } to { opacity: 0.6; }

View file

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

View file

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

View file

@ -127,7 +127,7 @@
<div <div
class="icon-container" class="icon-container"
> >
<i <FAIcon
v-show="newFields.length > 1" v-show="newFields.length > 1"
icon="times" icon="times"
@click="deleteField(i)" @click="deleteField(i)"
@ -166,7 +166,7 @@
:src="user.profile_image_url_original" :src="user.profile_image_url_original"
class="current-avatar" class="current-avatar"
> >
<i <FAIcon
v-if="!isDefaultAvatar && pickAvatarBtnVisible" v-if="!isDefaultAvatar && pickAvatarBtnVisible"
:title="$t('settings.reset_avatar')" :title="$t('settings.reset_avatar')"
class="reset-button" icon="times" class="reset-button" icon="times"
@ -194,7 +194,7 @@
<h2>{{ $t('settings.profile_banner') }}</h2> <h2>{{ $t('settings.profile_banner') }}</h2>
<div class="banner-background-preview"> <div class="banner-background-preview">
<img :src="user.cover_photo"> <img :src="user.cover_photo">
<i <FAIcon
v-if="!isDefaultBanner" v-if="!isDefaultBanner"
:title="$t('settings.reset_profile_banner')" :title="$t('settings.reset_profile_banner')"
class="reset-button" icon="times" class="reset-button" icon="times"
@ -214,9 +214,11 @@
@change="uploadFile('banner', $event)" @change="uploadFile('banner', $event)"
> >
</div> </div>
<i <FAIcon
v-if="bannerUploading" v-if="bannerUploading"
class=" icon-spin4 animate-spin uploading" class="uploading"
spin
icon="circle-notch"
/> />
<button <button
v-else-if="bannerPreview" v-else-if="bannerPreview"
@ -230,7 +232,7 @@
class="alert error" class="alert error"
> >
Error: {{ bannerUploadError }} Error: {{ bannerUploadError }}
<i <FAIcon
class="button-icon" icon="times" class="button-icon" icon="times"
@click="clearUploadError('banner')" @click="clearUploadError('banner')"
/> />
@ -240,7 +242,7 @@
<h2>{{ $t('settings.profile_background') }}</h2> <h2>{{ $t('settings.profile_background') }}</h2>
<div class="banner-background-preview"> <div class="banner-background-preview">
<img :src="user.background_image"> <img :src="user.background_image">
<i <FAIcon
v-if="!isDefaultBackground" v-if="!isDefaultBackground"
:title="$t('settings.reset_profile_background')" :title="$t('settings.reset_profile_background')"
class="reset-button" icon="times" class="reset-button" icon="times"
@ -260,9 +262,11 @@
@change="uploadFile('background', $event)" @change="uploadFile('background', $event)"
> >
</div> </div>
<i <FAIcon
v-if="backgroundUploading" v-if="backgroundUploading"
class=" icon-spin4 animate-spin uploading" class="uploading"
spin
icon="circle-notch"
/> />
<button <button
v-else-if="backgroundPreview" v-else-if="backgroundPreview"
@ -276,8 +280,10 @@
class="alert error" class="alert error"
> >
Error: {{ backgroundUploadError }} Error: {{ backgroundUploadError }}
<i <FAIcon
class="button-icon" icon="times" size="lg"
class="button-icon"
icon="times"
@click="clearUploadError('background')" @click="clearUploadError('background')"
/> />
</div> </div>

View file

@ -156,11 +156,6 @@ $status-margin: 0.75em;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow-x: hidden; overflow-x: hidden;
} }
.icon-reply {
// mirror the icon
transform: scaleX(-1);
}
} }
& .reply-to-popover, & .reply-to-popover,

View file

@ -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 { 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 { mentionMatchesUrl, extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
import { mapGetters, mapState } from 'vuex' 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 = { const StatusContent = {
name: 'StatusContent', name: 'StatusContent',

View file

@ -55,29 +55,29 @@
@click.prevent="toggleShowMore" @click.prevent="toggleShowMore"
> >
{{ $t("status.show_content") }} {{ $t("status.show_content") }}
<span <FAIcon
v-if="attachmentTypes.includes('image')" v-if="attachmentTypes.includes('image')"
class="icon-picture" icon="image"
/> />
<span <FAIcon
v-if="attachmentTypes.includes('video')" v-if="attachmentTypes.includes('video')"
class="icon-video" icon="video"
/> />
<span <FAIcon
v-if="attachmentTypes.includes('audio')" v-if="attachmentTypes.includes('audio')"
class="icon-music" icon="music"
/> />
<span <FAIcon
v-if="attachmentTypes.includes('unknown')" v-if="attachmentTypes.includes('unknown')"
class="icon-doc" icon="file"
/> />
<span <FAIcon
v-if="status.poll && status.poll.options" v-if="status.poll && status.poll.options"
class="icon-chart-bar" icon="poll-h"
/> />
<span <FAIcon
v-if="status.card" v-if="status.card"
class="icon-link" icon="link"
/> />
</a> </a>
<a <a
@ -182,6 +182,10 @@ $status-margin: 0.75em;
text-align: center; text-align: center;
display: inline-block; display: inline-block;
word-break: break-all; word-break: break-all;
svg {
color: inherit;
}
} }
img, video { img, video {

View file

@ -6,6 +6,14 @@ import Conversation from '../conversation/conversation.vue'
import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js' import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
import List from '../list/list.vue' import List from '../list/list.vue'
import withLoadMore from '../../hocs/with_load_more/with_load_more' 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({ const FollowerList = withLoadMore({
fetch: (props, $store) => $store.dispatch('fetchFollowers', props.userId), fetch: (props, $store) => $store.dispatch('fetchFollowers', props.userId),

View file

@ -122,9 +122,10 @@
</div> </div>
<div class="panel-body"> <div class="panel-body">
<span v-if="error">{{ error }}</span> <span v-if="error">{{ error }}</span>
<i <FAIcon
v-else v-else
class="icon-spin3 animate-spin" spin
icon="circle-notch"
/> />
</div> </div>
</div> </div>
@ -142,6 +143,7 @@
.user-profile-fields { .user-profile-fields {
margin: 0 0.5em; margin: 0 0.5em;
img { img {
object-fit: contain; object-fit: contain;
vertical-align: middle; vertical-align: middle;