sam/pleroma-fe
sam/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

remaining changes...

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

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'

14
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,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 {

7
src/components/chat_panel/chat_panel.vue
View file

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

2
src/components/global_notice_list/global_notice_list.vue
View file

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

6
src/components/image_cropper/image_cropper.js
View file

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

5
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

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>

2
src/components/login_form/login_form.vue
View file

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

2
src/components/mfa_form/recovery_form.vue
View file

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

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

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

2
src/components/password_reset/password_reset.vue
View file

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

9
src/components/poll/poll_form.vue
View file

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

6
src/components/post_status_form/post_status_form.js
View file

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

46
src/components/post_status_form/post_status_form.vue
View file

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

6
src/components/settings_modal/tabs/profile_tab.js
View file

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

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

28
src/components/settings_modal/tabs/profile_tab.vue
View file

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

5
src/components/status/status.scss
View file

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

18
src/components/status_content/status_content.js
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 { 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',

28
src/components/status_content/status_content.vue
View file

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

8
src/components/user_profile/user_profile.js
View file

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

6
src/components/user_profile/user_profile.vue
View file

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