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

shigusegubu-vue3
Henry Jameson 11 months ago
parent 9aaa8a86f5
commit e0fbeee88e
  1. 18
      src/components/media_upload/media_upload.js
  2. 22
      src/components/media_upload/media_upload.vue
  3. 7
      src/components/settings_modal/helpers/attachment_setting.js
  4. 53
      src/components/settings_modal/helpers/attachment_setting.vue
  5. 2
      src/i18n/en.json

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

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

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

@ -20,6 +20,23 @@
{{ backendDescriptionDescription + ' ' }}
</p>
<div class="attachment-input">
<div>{{ $t('settings.url') }}</div>
<div class="controls">
<input
:id="path"
class="string-input"
:disabled="shouldBeDisabled"
:value="realDraftMode ? draft : state"
@change="update"
>
{{ ' ' }}
<ModifiedIndicator
:changed="isChanged"
:onclick="reset"
/>
<ProfileSettingIndicator :is-profile="isProfileSetting" />
</div>
<div>{{ $t('settings.preview') }}</div>
<Attachment
class="attachment"
:compact="compact"
@ -30,27 +47,15 @@
@naturalSizeLoad="onNaturalSizeLoad"
/>
<div class="controls">
<media-upload
normal-button
<MediaUpload
ref="mediaUpload"
class="media-upload-icon"
:drop-files="dropFiles"
@uploaded="setMediaFile"
@upload-failed="uploadFailed"
normal-button
:accept-types="acceptTypes"
/>
<input
:id="path"
class="string-input"
:disabled="shouldBeDisabled"
:value="realDraftMode ? draft : state"
@change="update"
>
{{ ' ' }}
<ModifiedIndicator
:changed="isChanged"
:onclick="reset"
/>
<ProfileSettingIndicator :is-profile="isProfileSetting" />
</div>
</div>
<DraftButtons />
@ -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>

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

Loading…
Cancel
Save