diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index cb31020d..e23fcb1b 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -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' diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 19c713d5..0b7a3f9c 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -12,7 +12,7 @@ :alt="attachment.description" :title="attachment.description" > - + {{ nsfw ? "NSFW / " : "" }}{{ placeholderName }} @@ -36,9 +36,9 @@ :src="nsfwImage" :class="{'small': isSmall}" > -
- @@ -142,6 +142,10 @@ white-space: nowrap; text-overflow: ellipsis; max-width: 100%; + + svg { + color: inherit; + } } .nsfw-placeholder { diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue index fc06f542..51b99563 100644 --- a/src/components/chat_panel/chat_panel.vue +++ b/src/components/chat_panel/chat_panel.vue @@ -11,7 +11,7 @@ >
{{ $t('shoutbox.title') }} - @@ -63,7 +63,7 @@ @click.stop.prevent="togglePanel" >
- + {{ $t('shoutbox.title') }}
@@ -87,7 +87,8 @@ .chat-panel { .chat-heading { cursor: pointer; - .icon-comment-empty { + + .icon { color: $fallback--text; color: var(--text, $fallback--text); } diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue index 2965cd0d..3a7139f4 100644 --- a/src/components/global_notice_list/global_notice_list.vue +++ b/src/components/global_notice_list/global_notice_list.vue @@ -9,7 +9,7 @@
{{ $t(notice.messageKey, notice.messageArgs) }}
- diff --git a/src/components/image_cropper/image_cropper.js b/src/components/image_cropper/image_cropper.js index 9027b6eb..59e4d07e 100644 --- a/src/components/image_cropper/image_cropper.js +++ b/src/components/image_cropper/image_cropper.js @@ -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 = { diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue index 389b06b9..e69cbd0b 100644 --- a/src/components/image_cropper/image_cropper.vue +++ b/src/components/image_cropper/image_cropper.vue @@ -31,9 +31,10 @@ @click="submit(false)" v-text="saveWithoutCroppingText" /> -
-
diff --git a/src/components/status/status.scss b/src/components/status/status.scss index cd5366ed..ea9e538d 100644 --- a/src/components/status/status.scss +++ b/src/components/status/status.scss @@ -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, diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js index df095de3..a6f79d76 100644 --- a/src/components/status_content/status_content.js +++ b/src/components/status_content/status_content.js @@ -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', diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue index f7fb5ee2..321cd477 100644 --- a/src/components/status_content/status_content.vue +++ b/src/components/status_content/status_content.vue @@ -55,29 +55,29 @@ @click.prevent="toggleShowMore" > {{ $t("status.show_content") }} - - - - - - $store.dispatch('fetchFollowers', props.userId), diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue index b26499b4..f1f51840 100644 --- a/src/components/user_profile/user_profile.vue +++ b/src/components/user_profile/user_profile.vue @@ -122,9 +122,10 @@
{{ error }} -
@@ -142,6 +143,7 @@ .user-profile-fields { margin: 0 0.5em; + img { object-fit: contain; vertical-align: middle;