From d695dcaff91ce616549dc54c02b8bf9167f2be58 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 9 Apr 2021 19:09:22 +0300 Subject: experimental flash support through ruffle --- src/components/attachment/attachment.js | 2 ++ src/components/attachment/attachment.vue | 2 ++ 2 files changed, 4 insertions(+) (limited to 'src/components/attachment') diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index 5f5779a0..8849f501 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -1,4 +1,5 @@ import StillImage from '../still-image/still-image.vue' +import Flash from '../flash/flash.vue' import VideoAttachment from '../video_attachment/video_attachment.vue' import nsfwImage from '../../assets/nsfw.png' import fileTypeService from '../../services/file_type/file_type.service.js' @@ -43,6 +44,7 @@ const Attachment = { } }, components: { + Flash, StillImage, VideoAttachment }, diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 2c1c1682..2102127d 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -117,6 +117,8 @@ + + -- cgit v1.2.3-70-g09d2 From adafae977a5cc2b5ce1e3ab044bc17c4d4f11a4e Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 12 Apr 2021 00:00:23 +0300 Subject: Play-on-click, layout improvements. --- src/components/attachment/attachment.vue | 1 + src/components/flash/flash.js | 36 +++++++++++++++++--- src/components/flash/flash.vue | 57 +++++++++++++++++++++++++++++--- src/i18n/en.json | 3 +- 4 files changed, 87 insertions(+), 10 deletions(-) (limited to 'src/components/attachment') diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 2102127d..9bb0d0be 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -174,6 +174,7 @@ } .non-gallery.attachment { + &.flash, &.video { flex: 1 0 40%; } diff --git a/src/components/flash/flash.js b/src/components/flash/flash.js index e707a4c4..832705a2 100644 --- a/src/components/flash/flash.js +++ b/src/components/flash/flash.js @@ -1,16 +1,44 @@ import RuffleService from '../../services/ruffle_service/ruffle_service.js' +import { library } from '@fortawesome/fontawesome-svg-core' +import { faStop } from '@fortawesome/free-solid-svg-icons' + +library.add( + faStop, +) const Flash = { props: [ 'src' ], - created () { - this.$nextTick(function () { + data () { + return { + player: false, // can be true, "hidden", false. hidden = element exists + loaded: false, + ruffleInstance: null + } + }, + methods: { + openPlayer () { + if (this.player) return // prevent double-loading + this.player = 'hidden' RuffleService.getRuffle().then((ruffle) => { const player = ruffle.newest().createPlayer() + player.config = { + letterbox: 'on' + } const container = this.$refs.cunt container.appendChild(player) - player.load(this.src) + player.style.width = '100%' + player.style.height = '100%' + player.load(this.src).then(() => { + this.player = true + }) + this.ruffleInstance = player }) - }) + }, + closePlayer () { + console.log(this.ruffleInstance) + this.ruffleInstance.remove() + this.player = false + } } } diff --git a/src/components/flash/flash.vue b/src/components/flash/flash.vue index 510fe6d2..adef67ff 100644 --- a/src/components/flash/flash.vue +++ b/src/components/flash/flash.vue @@ -1,8 +1,31 @@ @@ -10,6 +33,30 @@ diff --git a/src/i18n/en.json b/src/i18n/en.json index d6138482..90cbbf0f 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -79,7 +79,8 @@ "role": { "admin": "Admin", "moderator": "Moderator" - } + }, + "flash_content": "Click to show Flash content using Ruffle (Experimental)" }, "image_cropper": { "crop_picture": "Crop picture", -- cgit v1.2.3-70-g09d2 From f0641d05dffe627abd093c296a8cf9e5296b3098 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 12 Apr 2021 00:07:28 +0300 Subject: linting --- src/components/attachment/attachment.vue | 5 ++++- src/components/flash/flash.js | 2 +- src/components/flash/flash.vue | 16 +++++++++++----- 3 files changed, 16 insertions(+), 7 deletions(-) (limited to 'src/components/attachment') diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 9bb0d0be..f80badfd 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -118,7 +118,10 @@ - + diff --git a/src/components/flash/flash.js b/src/components/flash/flash.js index 832705a2..17a52747 100644 --- a/src/components/flash/flash.js +++ b/src/components/flash/flash.js @@ -3,7 +3,7 @@ import { library } from '@fortawesome/fontawesome-svg-core' import { faStop } from '@fortawesome/free-solid-svg-icons' library.add( - faStop, + faStop ) const Flash = { diff --git a/src/components/flash/flash.vue b/src/components/flash/flash.vue index adef67ff..a27d3930 100644 --- a/src/components/flash/flash.vue +++ b/src/components/flash/flash.vue @@ -8,13 +8,19 @@ /> @@ -24,8 +30,8 @@ @click="closePlayer" > - - + + -- cgit v1.2.3-70-g09d2 From e654fead23ebb457f81e8642c65e1f3e98ee0027 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 17 Jun 2021 16:29:46 +0300 Subject: refactored attachments and gallery. All attachments now are in gallery. --- src/components/attachment/attachment.js | 41 ++- src/components/attachment/attachment.vue | 307 ++++++----------------- src/components/chat_message/chat_message.scss | 4 - src/components/flash/flash.js | 5 +- src/components/flash/flash.vue | 7 - src/components/gallery/gallery.js | 65 +++-- src/components/gallery/gallery.vue | 175 +++++++++---- src/components/status_content/status_content.js | 20 +- src/components/status_content/status_content.vue | 31 +-- src/i18n/en.json | 6 +- 10 files changed, 296 insertions(+), 365 deletions(-) (limited to 'src/components/attachment') diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index 8849f501..06928ca6 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -11,7 +11,9 @@ import { faImage, faVideo, faPlayCircle, - faTimes + faTimes, + faStop, + faSearchPlus } from '@fortawesome/free-solid-svg-icons' library.add( @@ -20,7 +22,9 @@ library.add( faImage, faVideo, faPlayCircle, - faTimes + faTimes, + faStop, + faSearchPlus ) const Attachment = { @@ -28,7 +32,6 @@ const Attachment = { 'attachment', 'nsfw', 'size', - 'allowPlay', 'setMedia', 'naturalSizeLoad' ], @@ -40,7 +43,8 @@ const Attachment = { loading: false, img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'), modalOpen: false, - showHidden: false + showHidden: false, + flashLoaded: false } }, components: { @@ -49,9 +53,22 @@ const Attachment = { VideoAttachment }, computed: { + classNames () { + return [ + { + '-loading': this.loading, + '-nsfw-placeholder': this.hidden + }, + '-' + this.type, + `-${this.useContainFit ? 'contain' : 'cover'}-fit` + ] + }, usePlaceholder () { return this.size === 'hide' || this.type === 'unknown' }, + useContainFit () { + return this.$store.getters.mergedConfig.useContainFit + }, placeholderName () { if (this.attachment.description === '' || !this.attachment.description) { return this.type.toUpperCase() @@ -79,10 +96,6 @@ const Attachment = { isSmall () { return this.size === 'small' }, - fullwidth () { - if (this.size === 'hide') return false - return this.type === 'html' || this.type === 'audio' || this.type === 'unknown' - }, useModal () { const modalTypes = this.size === 'hide' ? ['image', 'video', 'audio'] : this.mergedConfig.playVideosInModal @@ -100,12 +113,20 @@ const Attachment = { }, openModal (event) { if (this.useModal) { - event.stopPropagation() - event.preventDefault() this.setMedia() this.$store.dispatch('setCurrent', this.attachment) } }, + openModalForce (event) { + this.setMedia() + this.$store.dispatch('setCurrent', this.attachment) + }, + stopFlash () { + this.$refs.flash.closePlayer() + }, + setFlashLoaded (event) { + this.flashLoaded = event + }, toggleHidden (event) { if ( (this.mergedConfig.useOneClickNsfw && !this.showHidden) && diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index f80badfd..fe9e9398 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -1,7 +1,8 @@ - + diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss index fcfa7c8a..1dbe1cad 100644 --- a/src/components/chat_message/chat_message.scss +++ b/src/components/chat_message/chat_message.scss @@ -62,10 +62,6 @@ &.with-media { width: 100%; - .gallery-row { - overflow: hidden; - } - .status { width: 100%; } diff --git a/src/components/flash/flash.js b/src/components/flash/flash.js index d03384c7..87f940a7 100644 --- a/src/components/flash/flash.js +++ b/src/components/flash/flash.js @@ -39,12 +39,13 @@ const Flash = { this.player = 'error' }) this.ruffleInstance = player + this.$emit('playerOpened') }) }, closePlayer () { - console.log(this.ruffleInstance) - this.ruffleInstance.remove() + this.ruffleInstance && this.ruffleInstance.remove() this.player = false + this.$emit('playerClosed') } } } diff --git a/src/components/flash/flash.vue b/src/components/flash/flash.vue index d20d037b..5a77d235 100644 --- a/src/components/flash/flash.vue +++ b/src/components/flash/flash.vue @@ -36,13 +36,6 @@

- diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js index f856fd0a..134ea77e 100644 --- a/src/components/gallery/gallery.js +++ b/src/components/gallery/gallery.js @@ -1,15 +1,17 @@ import Attachment from '../attachment/attachment.vue' -import { chunk, last, dropRight, sumBy } from 'lodash' +import { sumBy } from 'lodash' const Gallery = { props: [ 'attachments', 'nsfw', - 'setMedia' + 'setMedia', + 'size' ], data () { return { - sizes: {} + sizes: {}, + hidingLong: true } }, components: { Attachment }, @@ -18,26 +20,54 @@ const Gallery = { if (!this.attachments) { return [] } - const rows = chunk(this.attachments, 3) - if (last(rows).length === 1 && rows.length > 1) { - // if 1 attachment on last row -> add it to the previous row instead - const lastAttachment = last(rows)[0] - const allButLastRow = dropRight(rows) - last(allButLastRow).push(lastAttachment) - return allButLastRow + console.log(this.size) + if (this.size === 'hide') { + return this.attachments.map(item => ({ minimal: true, items: [item] })) } + const rows = this.attachments.reduce((acc, attachment, i) => { + if (attachment.mimetype.includes('audio')) { + return [...acc, { audio: true, items: [attachment] }, { items: [] }] + } + const maxPerRow = 3 + const attachmentsRemaining = this.attachments.length - i - 1 + const currentRow = acc[acc.length - 1].items + if ( + currentRow.length <= maxPerRow || + attachmentsRemaining === 1 + ) { + currentRow.push(attachment) + } + if (currentRow.length === maxPerRow && attachmentsRemaining > 1) { + return [...acc, { items: [] }] + } else { + return acc + } + }, [{ items: [] }]).filter(_ => _.items.length > 0) return rows }, - useContainFit () { - return this.$store.getters.mergedConfig.useContainFit + attachmentsDimensionalScore () { + return this.rows.reduce((acc, row) => { + return acc + (row.audio ? 0.25 : (1 / (row.items.length + 0.6))) + }, 0) + }, + tooManyAttachments () { + if (this.size === 'hide') { + return this.attachments.length > 8 + } else { + return this.attachmentsDimensionalScore > 1 + } } }, methods: { onNaturalSizeLoad (id, size) { this.$set(this.sizes, id, size) }, - rowStyle (itemsPerRow) { - return { 'padding-bottom': `${(100 / (itemsPerRow + 0.6))}%` } + rowStyle (row) { + if (row.audio) { + return { 'padding-bottom': '25%' } // fixed reduced height for audio + } else if (!row.minimal) { + return { 'padding-bottom': `${(100 / (row.items.length + 0.6))}%` } + } }, itemStyle (id, row) { const total = sumBy(row, item => this.getAspectRatio(item.id)) @@ -46,6 +76,13 @@ const Gallery = { getAspectRatio (id) { const size = this.sizes[id] return size ? size.width / size.height : 1 + }, + toggleHidingLong (event) { + this.hidingLong = event + }, + openGallery () { + this.setMedia() + this.$store.dispatch('setCurrent', this.attachments[0]) } } } diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue index ca91c9c1..8e08e514 100644 --- a/src/components/gallery/gallery.vue +++ b/src/components/gallery/gallery.vue @@ -1,26 +1,74 @@ diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js index 134ea77e..cca67dbd 100644 --- a/src/components/gallery/gallery.js +++ b/src/components/gallery/gallery.js @@ -4,9 +4,15 @@ import { sumBy } from 'lodash' const Gallery = { props: [ 'attachments', + 'limitRows', + 'descriptions', 'nsfw', 'setMedia', - 'size' + 'size', + 'editable', + 'removeAttachment', + 'editAttachment', + 'maxPerRow' ], data () { return { @@ -20,24 +26,19 @@ const Gallery = { if (!this.attachments) { return [] } - console.log(this.size) if (this.size === 'hide') { return this.attachments.map(item => ({ minimal: true, items: [item] })) } const rows = this.attachments.reduce((acc, attachment, i) => { + if (this.size === 'small' && acc.length === 2) return acc if (attachment.mimetype.includes('audio')) { return [...acc, { audio: true, items: [attachment] }, { items: [] }] } - const maxPerRow = 3 - const attachmentsRemaining = this.attachments.length - i - 1 + const maxPerRow = this.maxPerRow || 3 + const attachmentsRemaining = this.attachments.length - i + 1 const currentRow = acc[acc.length - 1].items - if ( - currentRow.length <= maxPerRow || - attachmentsRemaining === 1 - ) { - currentRow.push(attachment) - } - if (currentRow.length === maxPerRow && attachmentsRemaining > 1) { + currentRow.push(attachment) + if (currentRow.length >= maxPerRow && attachmentsRemaining > maxPerRow) { return [...acc, { items: [] }] } else { return acc @@ -51,7 +52,9 @@ const Gallery = { }, 0) }, tooManyAttachments () { - if (this.size === 'hide') { + if (this.editable || this.size === 'small') { + return false + } else if (this.size === 'hide') { return this.attachments.length > 8 } else { return this.attachmentsDimensionalScore > 1 @@ -59,8 +62,8 @@ const Gallery = { } }, methods: { - onNaturalSizeLoad (id, size) { - this.$set(this.sizes, id, size) + onNaturalSizeLoad ({ id, width, height }) { + this.$set(this.sizes, id, { width, height }) }, rowStyle (row) { if (row.audio) { @@ -81,8 +84,11 @@ const Gallery = { this.hidingLong = event }, openGallery () { - this.setMedia() - this.$store.dispatch('setCurrent', this.attachments[0]) + this.$store.dispatch('setMedia', this.attachments) + this.$store.dispatch('setCurrentMedia', this.attachments[0]) + }, + onMedia () { + this.$store.dispatch('setMedia', this.attachments) } } } diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue index 8e08e514..cedf64d3 100644 --- a/src/components/gallery/gallery.vue +++ b/src/components/gallery/gallery.vue @@ -17,13 +17,18 @@ v-for="attachment in row.items" class="gallery-item" :key="attachment.id" - :set-media="setMedia" :nsfw="nsfw" :attachment="attachment" :allow-play="false" :size="size" - :natural-size-load="onNaturalSizeLoad.bind(null, attachment.id)" + :editable="editable" + :remove="removeAttachment" + :edit="editAttachment" + :description="descriptions && descriptions[attachment.id]" + :hideDescription="tooManyAttachments && hidingLong" :style="itemStyle(attachment.id, row.items)" + @setMedia="onMedia" + @naturalSizeLoad="onNaturalSizeLoad" /> diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index 5342894f..1a12db9c 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -4,6 +4,7 @@ import ScopeSelector from '../scope_selector/scope_selector.vue' import EmojiInput from '../emoji_input/emoji_input.vue' import PollForm from '../poll/poll_form.vue' import Attachment from '../attachment/attachment.vue' +import Gallery from 'src/components/gallery/gallery.vue' import StatusContent from '../status_content/status_content.vue' import fileTypeService from '../../services/file_type/file_type.service.js' import { findOffset } from '../../services/offset_finder/offset_finder.service.js' @@ -85,7 +86,8 @@ const PostStatusForm = { Checkbox, Select, Attachment, - StatusContent + StatusContent, + Gallery }, mounted () { this.updateIdempotencyKey() @@ -388,6 +390,10 @@ const PostStatusForm = { this.newStatus.files.splice(index, 1) this.$emit('resize') }, + editAttachment (fileInfo, newText) { + console.log(fileInfo, newText) + this.newStatus.mediaDescriptions[fileInfo.id] = newText + }, uploadFailed (errString, templateArgs) { templateArgs = templateArgs || {} this.error = this.$t('upload.error.base') + ' ' + this.$t('upload.error.' + errString, templateArgs) diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index fbda41d6..c6f84a4b 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -287,32 +287,21 @@ @click="clearError" /> -
-
- - - -
-
+
video { - line-height: 0; - max-height: 200px; - max-width: 100%; -} -- cgit v1.2.3-70-g09d2 From bfe31e20eaddaa9435c98962c53c35f4184ed5fe Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 18 Jun 2021 14:12:50 +0300 Subject: better compact attachments --- src/components/attachment/attachment.js | 17 +++++++++++++---- src/components/gallery/gallery.vue | 5 ++++- src/components/status_body/status_body.scss | 6 +++--- src/components/status_content/status_content.vue | 5 ----- 4 files changed, 20 insertions(+), 13 deletions(-) (limited to 'src/components/attachment') diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index a80c5c2e..84656ffa 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -68,6 +68,7 @@ const Attachment = { '-nsfw-placeholder': this.hidden }, '-' + this.type, + '-' + this.size, `-${this.useContainFit ? 'contain' : 'cover'}-fit` ] }, @@ -102,10 +103,18 @@ const Attachment = { return (this.type === 'html' && !this.attachment.oembed) || this.type === 'unknown' }, useModal () { - const modalTypes = this.size === 'hide' ? ['image', 'video', 'audio'] - : this.mergedConfig.playVideosInModal - ? ['image', 'video'] - : ['image'] + let modalTypes = [] + switch (this.size) { + case 'hide': + case 'small': + modalTypes = ['image', 'video', 'audio', 'flash'] + break + default: + modalTypes = this.mergedConfig.playVideosInModal + ? ['image', 'video', 'flash'] + : ['image'] + break + } return modalTypes.includes(this.type) }, ...mapGetters(['mergedConfig']) diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue index a1f1c26c..65175366 100644 --- a/src/components/gallery/gallery.vue +++ b/src/components/gallery/gallery.vue @@ -95,7 +95,10 @@ height: 0; width: 100%; flex-grow: 1; - margin-top: 0.5em; + + &:not(:first-child) { + margin-top: 0.5em; + } } &.-long { diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss index 5be21171..f261108e 100644 --- a/src/components/status_body/status_body.scss +++ b/src/components/status_body/status_body.scss @@ -123,6 +123,7 @@ } &.-compact { + align-items: top; flex-direction: row; --emoji-size: 16px; @@ -140,9 +141,7 @@ mask-size: auto 3.5em, auto auto; mask-position: 0 0, 0 0; mask-repeat: repeat-x, repeat; - mask-image: - linear-gradient(to top, white 0.5em, transparent 2.5em), - linear-gradient(to top, white, white); + mask-image: linear-gradient(to bottom, white 2em, transparent 3em); /* Autoprefixed seem to ignore this one, and also syntax is different */ -webkit-mask-composite: xor; @@ -154,6 +153,7 @@ flex: 1 1 0; min-width: 5em; height: 100%; + margin-left: 0.5em; } .summary-wrapper { diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue index 90ce130d..573eadf5 100644 --- a/src/components/status_content/status_content.vue +++ b/src/components/status_content/status_content.vue @@ -51,10 +51,5 @@ $status-margin: 0.75em; .StatusContent { flex: 1; min-width: 0; - &.-compact { - flex { - display: flex; - } - } } -- cgit v1.2.3-70-g09d2 From 8bab8658e8efd5b8b9f8de9311432c814fa2ef9c Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 18 Jun 2021 16:11:16 +0300 Subject: better handling of unknown files, better upload display --- src/components/attachment/attachment.js | 7 ++--- src/components/attachment/attachment.vue | 31 +++++++++++++++++++++- src/components/gallery/gallery.js | 17 +++++++++++- .../post_status_form/post_status_form.vue | 4 +++ 4 files changed, 54 insertions(+), 5 deletions(-) (limited to 'src/components/attachment') diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index 84656ffa..bd424087 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -65,10 +65,11 @@ const Attachment = { return [ { '-loading': this.loading, - '-nsfw-placeholder': this.hidden + '-nsfw-placeholder': this.hidden, + '-editable': this.edit !== undefined }, - '-' + this.type, - '-' + this.size, + '-type-' + this.type, + this.size && '-size-' + this.size, `-${this.useContainFit ? 'contain' : 'cover'}-fit` ] }, diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 9b1e83a7..b8be82da 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -15,8 +15,37 @@ @click.prevent="" > - {{ nsfw ? "NSFW / " : "" }}{{ placeholderName }} + {{ nsfw ? "NSFW / " : "" }}{{ this.edit ? '' : placeholderName }} +
+ +
+
+ +

+ {{ localDescription }} +

+
{ - return acc + (row.audio ? 0.25 : (1 / (row.items.length + 0.6))) + let size = 0 + if (row.minimal) { + size += 1 / 8 + } else if (row.audio) { + size += 1 / 4 + } else { + size += 1 / (row.items.length + 0.6) + } + return acc + size }, 0) }, tooManyAttachments () { diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 88ca4c9c..5078ad5f 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -338,6 +338,10 @@ .post-status-form { position: relative; + .attachments { + margin-bottom: 0.5em; + } + .form-bottom { display: flex; justify-content: space-between; -- cgit v1.2.3-70-g09d2 From 6b8b9c017f5f07ad1b7c6692393554e5bf5d0f45 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 18 Jun 2021 17:39:29 +0300 Subject: whoops --- src/components/attachment/attachment.scss | 271 ++++++++++++++++++++++++++++++ 1 file changed, 271 insertions(+) create mode 100644 src/components/attachment/attachment.scss (limited to 'src/components/attachment') diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss new file mode 100644 index 00000000..f902f37d --- /dev/null +++ b/src/components/attachment/attachment.scss @@ -0,0 +1,271 @@ +@import '../../_variables.scss'; + +.Attachment { + display: inline-flex; + flex-direction: column; + position: relative; + align-self: flex-start; + line-height: 0; + height: 100%; + border-style: solid; + border-width: 1px; + border-radius: $fallback--attachmentRadius; + border-radius: var(--attachmentRadius, $fallback--attachmentRadius); + border-color: $fallback--border; + border-color: var(--border, $fallback--border); + z-index: 1; + + .attachment-wrapper { + flex: 1 1 auto; + height: 100%; + position: relative; + overflow: hidden; + z-index: 2; + } + + .description-container { + flex: 0 1 0; + display: flex; + padding-top: 0.5em; + + p { + flex: 1; + text-align: center; + line-height: 1.5; + padding: 0.5em; + margin: 0; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + + &.-static { + position: absolute; + left: 0; + right: 0; + top: 0; + z-index: 1; + background: var(--popover); + box-shadow: var(--popupShadow); + opacity: 0; + transition: 0.35s all; + transition-timing-function: cubic-bezier(0, 1, 0.5, 1); + } + } + + &:hover { + .description-container.-static { + opacity: 1; + transform: translateY(-3em); + } + } + + .description-field { + flex: 1; + min-width: 0; + } + + & .image-container, + & .audio-container, + & .video-container, + & .flash-container, + & .oembed-container { + display: flex; + justify-content: center; + width: 100%; + height: 100%; + } + + .image-container { + .image { + width: 100%; + height: 100%; + } + } + + & .flash-container, + & .video-container { + & .flash, + & video { + max-width: 100%; + max-height: 100%; + object-fit: contain; + align-self: center; + z-index: 0; + } + } + + .audio-container { + display: flex; + align-items: flex-end; + + audio { + width: 100%; + height: 100%; + } + } + + .play-icon { + position: absolute; + font-size: 64px; + top: calc(50% - 32px); + left: calc(50% - 32px); + color: rgba(255, 255, 255, 0.75); + text-shadow: 0 0 2px rgba(0, 0, 0, 0.4); + + &::before { + margin: 0; + } + } + + .attachment-buttons { + display: flex; + position: absolute; + right: 0; + top: 0; + z-index: 2; + margin-top: 0.5em; + margin-right: 0.5em; + + .attachment-button { + padding: 0; + z-index: 4; + border-radius: $fallback--tooltipRadius; + border-radius: var(--tooltipRadius, $fallback--tooltipRadius); + text-align: center; + width: 2em; + height: 2em; + margin-left: 0.5em; + font-size: 1.25em; + // TODO: theming? hard to theme with unknown background image color + background: rgba(230, 230, 230, 0.7); + + .svg-inline--fa { + color: rgba(0, 0, 0, 0.6); + } + + &:hover .svg-inline--fa { + color: rgba(0, 0, 0, 0.9); + } + } + } + + .oembed-container { + line-height: 1.2em; + flex: 1 0 100%; + width: 100%; + margin-right: 15px; + display: flex; + + img { + width: 100%; + } + + .image { + flex: 1; + img { + border: 0px; + border-radius: 5px; + height: 100%; + object-fit: cover; + } + } + + .text { + flex: 2; + margin: 8px; + word-break: break-all; + h1 { + font-size: 14px; + margin: 0px; + } + } + } + + &.-size-small { + .play-icon { + zoom: 0.5; + opacity: 0.7; + } + + .attachment-buttons { + zoom: 0.7; + opacity: 0.5; + } + } + + &.-editable { + padding: 0.5em; + + & .description-container, + & .attachment-buttons { + margin: 0; + } + } + + &.-placeholder { + display: inline-block; + color: $fallback--link; + color: var(--postLink, $fallback--link); + overflow: hidden; + white-space: nowrap; + height: auto; + line-height: 1.5; + + &:not(.-editable) { + border: none; + } + + &.-editable { + display: flex; + flex-direction: row; + align-items: baseline; + + & .description-container, + & .attachment-buttons { + margin: 0; + padding: 0; + position: relative; + } + + .description-container { + flex: 1; + padding-left: 0.5em; + } + + .attachment-buttons { + order: 99; + align-self: center; + } + } + + a { + display: inline-block; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + } + + svg { + color: inherit; + } + } + + &.-loading { + cursor: progress; + } + + &.-contain-fit { + img, + canvas { + object-fit: contain; + } + } + + &.-cover-fit { + img, + canvas { + object-fit: cover; + } + } +} -- cgit v1.2.3-70-g09d2 From 4016182b89dacbc9095ee7f4d2e021bb9fad65d0 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 22 Jun 2021 20:32:55 +0300 Subject: fix z-indexes --- src/components/attachment/attachment.scss | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) (limited to 'src/components/attachment') diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss index f902f37d..b4a81a08 100644 --- a/src/components/attachment/attachment.scss +++ b/src/components/attachment/attachment.scss @@ -13,14 +13,12 @@ border-radius: var(--attachmentRadius, $fallback--attachmentRadius); border-color: $fallback--border; border-color: var(--border, $fallback--border); - z-index: 1; .attachment-wrapper { flex: 1 1 auto; height: 100%; position: relative; overflow: hidden; - z-index: 2; } .description-container { @@ -44,7 +42,6 @@ left: 0; right: 0; top: 0; - z-index: 1; background: var(--popover); box-shadow: var(--popupShadow); opacity: 0; @@ -91,7 +88,6 @@ max-height: 100%; object-fit: contain; align-self: center; - z-index: 0; } } @@ -123,13 +119,12 @@ position: absolute; right: 0; top: 0; - z-index: 2; margin-top: 0.5em; margin-right: 0.5em; + z-index: 1; .attachment-button { padding: 0; - z-index: 4; border-radius: $fallback--tooltipRadius; border-radius: var(--tooltipRadius, $fallback--tooltipRadius); text-align: center; -- cgit v1.2.3-70-g09d2 From 4ba8d95a10fdf22a7cefc56ea0515b7c30ee53ff Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 22 Jun 2021 20:33:57 +0300 Subject: fix videos and related not having working drag controls --- src/components/attachment/attachment.vue | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'src/components/attachment') diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index b8be82da..e1e700c4 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -127,7 +127,7 @@ /> - - + - - +
- - +
Date: Tue, 22 Jun 2021 20:35:34 +0300 Subject: fix videos not stretching to container --- src/components/attachment/attachment.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/components/attachment') diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss index b4a81a08..0cb23a37 100644 --- a/src/components/attachment/attachment.scss +++ b/src/components/attachment/attachment.scss @@ -84,8 +84,8 @@ & .video-container { & .flash, & video { - max-width: 100%; - max-height: 100%; + width: 100%; + height: 100%; object-fit: contain; align-self: center; } -- cgit v1.2.3-70-g09d2 From a2f21f4e131e03240699017ef92b7dba38c4fb44 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 22 Jun 2021 20:42:52 +0300 Subject: fix description colliding with extra-long text --- src/components/attachment/attachment.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'src/components/attachment') diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss index 0cb23a37..33e058e7 100644 --- a/src/components/attachment/attachment.scss +++ b/src/components/attachment/attachment.scss @@ -25,6 +25,7 @@ flex: 0 1 0; display: flex; padding-top: 0.5em; + z-index: 1; p { flex: 1; -- cgit v1.2.3-70-g09d2 From b67db47c888dd45c49a49b82e7922c2bf40ed61c Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 22 Jun 2021 20:47:35 +0300 Subject: lint --- src/components/attachment/attachment.vue | 16 ++++++++-------- src/components/gallery/gallery.vue | 12 ++++++------ src/components/post_status_form/post_status_form.vue | 4 ++-- src/components/status_body/status_body.vue | 6 +++--- src/components/status_content/status_content.js | 1 - src/components/status_content/status_content.vue | 12 ++++++------ 6 files changed, 25 insertions(+), 26 deletions(-) (limited to 'src/components/attachment') diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index e1e700c4..98d9c3ec 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -15,12 +15,12 @@ @click.prevent="" > - {{ nsfw ? "NSFW / " : "" }}{{ this.edit ? '' : placeholderName }} + {{ nsfw ? "NSFW / " : "" }}{{ edit ? '' : placeholderName }}
+ class="attachment-buttons" + >
+ class="attachment-buttons" + >