finish up attachment setting (right now only for admin section only)

This commit is contained in:
Henry Jameson 2023-04-24 21:57:31 +03:00
parent 9aaa8a86f5
commit e0fbeee88e
5 changed files with 75 additions and 31 deletions

View File

@ -23,6 +23,11 @@ const mediaUpload = {
}
},
methods: {
onClick () {
if (this.uploadReady) {
this.$refs.input.click()
}
},
uploadFile (file) {
const self = this
const store = this.$store
@ -69,10 +74,15 @@ const mediaUpload = {
this.multiUpload(target.files)
}
},
props: [
'dropFiles',
'disabled'
],
props: {
dropFiles: Object,
disabled: Boolean,
normalButton: Boolean,
acceptTypes: {
type: String,
default: '*/*'
}
},
watch: {
dropFiles: function (fileInfos) {
if (!this.uploading) {

View File

@ -1,8 +1,10 @@
<template>
<label
<component
class="media-upload"
:class="{ disabled: disabled }"
:is="normalButton ? 'button' : 'label'"
:class="{ disabled: disabled, ['media-upload button-default btn']: normalButton }"
:title="$t('tool_tip.media_upload')"
@click="onClick"
>
<FAIcon
v-if="uploading"
@ -15,6 +17,10 @@
class="new-icon"
icon="upload"
/>
<template v-if="normalButton">
{{ ' ' }}
{{ uploading ? $t('general.loading') : $t('tool_tip.media_upload') }}
</template>
<input
v-if="uploadReady"
class="hidden-input-file"
@ -22,8 +28,10 @@
type="file"
multiple="true"
@change="change"
ref="input"
:accept="acceptTypes"
>
</label>
</component>
</template>
<script src="./media_upload.js"></script>
@ -32,10 +40,12 @@
@import "../../variables";
.media-upload {
cursor: pointer; // We use <label> for interactivity... i wonder if it's fine
.hidden-input-file {
display: none;
}
}
</style>
label.media-upload {
cursor: pointer; // We use <label> for interactivity... i wonder if it's fine
}
</style>

View File

@ -7,10 +7,10 @@ export default {
...Setting,
props: {
...Setting.props,
type: {
type: Array,
acceptTypes: {
type: String,
required: false,
default: []
default: 'image/*'
}
},
components: {
@ -22,6 +22,7 @@ export default {
...Setting.computed,
attachment () {
const path = this.realDraftMode ? this.draft : this.state
// The "server" part is primarily for local dev, but could be useful for alt-domain or multiuser usage.
const url = path.includes('://') ? path : this.$store.state.instance.server + path
return {
mimetype: fileTypeExt(url),

View File

@ -20,24 +20,8 @@
{{ backendDescriptionDescription + ' ' }}
</p>
<div class="attachment-input">
<Attachment
class="attachment"
:compact="compact"
:attachment="attachment"
size="small"
hide-description
@setMedia="onMedia"
@naturalSizeLoad="onNaturalSizeLoad"
/>
<div>{{ $t('settings.url') }}</div>
<div class="controls">
<media-upload
normal-button
ref="mediaUpload"
class="media-upload-icon"
:drop-files="dropFiles"
@uploaded="setMediaFile"
@upload-failed="uploadFailed"
/>
<input
:id="path"
class="string-input"
@ -52,6 +36,27 @@
/>
<ProfileSettingIndicator :is-profile="isProfileSetting" />
</div>
<div>{{ $t('settings.preview') }}</div>
<Attachment
class="attachment"
:compact="compact"
:attachment="attachment"
size="small"
hide-description
@setMedia="onMedia"
@naturalSizeLoad="onNaturalSizeLoad"
/>
<div class="controls">
<MediaUpload
ref="mediaUpload"
class="media-upload-icon"
:drop-files="dropFiles"
@uploaded="setMediaFile"
@upload-failed="uploadFailed"
normal-button
:accept-types="acceptTypes"
/>
</div>
</div>
<DraftButtons />
</span>
@ -63,8 +68,24 @@
.AttachmentSetting {
.attachment {
display: block;
width: 20em;
width: 100%;
height: 15em;
margin-bottom: 0.5em;
}
.attachment-input {
margin-left: 1em;
display: flex;
flex-direction: column;
width: 20em;
}
.controls {
margin-bottom: 0.5em;
input, button {
width: 100%;
}
}
}
</style>

View File

@ -519,6 +519,8 @@
"loop_video_silent_only": "Loop only videos without sound (i.e. Mastodon's \"gifs\")",
"mutes_tab": "Mutes",
"play_videos_in_modal": "Play videos in a popup frame",
"url": "URL",
"preview": "Preview",
"file_export_import": {
"backup_restore": "Settings backup",
"backup_settings": "Backup settings to file",