Anon/yandere_fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rearrange stuff in accordance with comments on the MR, mostly

Browse Source 
Also, add support for a custom message to the modified indicator
This commit is contained in:
Ekaterina Vaartis 2024-01-17 22:41:18 +03:00
parent 872dffe51b
commit a2133f5283
5 changed files with 263 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/settings_modal/admin_tabs/emoji_tab.js
View File

@ -58,6 +58,11 @@ const EmojiTab = {
}
return result
},
newEmojiUploadPreview () {
if (this.newEmojiUpload.upload.length > 0) {
return URL.createObjectURL(this.newEmojiUpload.upload[0])
}
}
},
@ -135,7 +140,11 @@ const EmojiTab = {
},
metaEdited (prop) {
return this.pack && this.packMeta[prop] !== this.pack.pack[prop]
if (!this.pack) return
const def = this.pack.pack[prop] || ''
const edited = this.packMeta[prop] || ''
return edited !== def
},
savePackMetadata () {
this.$store.state.api.backendInteractor.saveEmojiPackMetadata({ name: this.packName, newData: this.packMeta }).then(
@ -153,6 +162,11 @@ const EmojiTab = {
})
},
revertEmoji (shortcode) {
// Delete current changes and overwrite them with defaults. If the window is closed, they'll get cleared anyway
delete this.editedParts[this.packName][shortcode]
this.editEmoji(shortcode)
},
editEmoji (shortcode) {
if (this.editedParts[this.packName] === undefined) { this.editedParts[this.packName] = {} }
@ -179,14 +193,22 @@ const EmojiTab = {
this.sortPackFiles(this.packName)
})
},
saveEditedEmoji (shortcode) {
closedEditedEmoji (shortcode) {
const edited = this.editedParts[this.packName][shortcode]
if (edited.shortcode === shortcode && edited.file === this.pack.files[shortcode]) {
delete this.editedParts[this.packName][shortcode]
return
return true
}
return false
},
saveEditedEmoji (shortcode) {
if (this.closedEditedEmoji(shortcode)) return
const edited = this.editedParts[this.packName][shortcode]
this.$store.state.api.backendInteractor.updateEmojiFile(
{ packName: this.packName, shortcode, newShortcode: edited.shortcode, newFilename: edited.file, force: false }
).then(resp => {

27
src/components/settings_modal/admin_tabs/emoji_tab.scss
View File

@ -1,7 +1,7 @@
@import "src/variables";
.emoji-tab {
.btn-group .btn {
.btn-group .btn:not(:first-child) {
margin-left: 0.5em;
}
@ -35,21 +35,34 @@
}
}
.emoji-tab-popover-button:not(:first-child) {
margin-left: 0.5em;
}
.emoji-tab-edit-popover {
padding-left: 0.5em;
padding-right: 0.5em;
padding-bottom: 0.5em;
}
.emoji-tab-popover-button {
margin-left: 0.5em;
.emoji {
width: 32px;
height: 32px;
}
}
.emoji-tab-popover-input {
width: 20em;
margin-bottom: 0.5em;
&:not(:first-child) {
margin-left: 0.5em;
label {
display: block;
margin-bottom: 0.5em;
}
input {
width: 20em;
}
.emoji-tab-popover-file {
padding-top: 3px;
}
}

221
src/components/settings_modal/admin_tabs/emoji_tab.vue
View File

@ -7,6 +7,8 @@
<h2>{{ $t('admin_dash.tabs.emoji') }}</h2>
<ul class="setting-list">
<h2>{{ $t('admin_dash.emoji.global_actions') }}</h2>
<li class="btn-group setting-item">
<button
class="button button-default btn"
@ -23,31 +25,6 @@
</li>
<li class="btn-group setting-item">
<button
class="button button-default btn"
type="button"
@click="$refs.createPackPopover.showPopover">
{{ $t('admin_dash.emoji.create_pack') }}
</button>
<Popover
ref="createPackPopover"
trigger="click"
placement="bottom"
bound-to-selector=".emoji-tab"
:bound-to="{ x: 'container' }"
:offset="{ y: 5 }"
>
<template #content>
<input v-model="newPackName" :placeholder="$t('admin_dash.emoji.new_pack_name')">
<button
class="button button-default btn emoji-tab-popover-button"
type="button"
@click="createEmojiPack">
{{ $t('admin_dash.emoji.create') }}
</button>
</template>
</Popover>
<button
class="button button-default btn"
type="button"
@ -56,6 +33,7 @@
<Popover
ref="remotePackPopover"
popover-class="emoji-tab-edit-popover popover-default"
trigger="click"
placement="bottom"
bound-to-selector=".emoji-tab"
@ -63,6 +41,8 @@
:offset="{ y: 5 }"
>
<template #content>
<div class="emoji-tab-popover-input">
<h3>{{ $t('admin_dash.emoji.remote_pack_instance') }}</h3>
<input v-model="remotePackInstance" :placeholder="$t('admin_dash.emoji.remote_pack_instance')">
<button
class="button button-default btn emoji-tab-popover-button"
@ -70,11 +50,14 @@
@click="listRemotePacks">
{{ $t('admin_dash.emoji.do_list') }}
</button>
</div>
</template>
</Popover>
</button>
</li>
<h2>{{ $t('admin_dash.emoji.emoji_packs') }}</h2>
<li>
<Select class="form-control" v-model="packName">
<option value="" disabled hidden>{{ $t('admin_dash.emoji.emoji_pack') }}</option>
@ -82,6 +65,35 @@
{{ listPackName }}
</option>
</Select>
<button
class="button button-default btn emoji-tab-popover-button"
type="button"
@click="$refs.createPackPopover.showPopover">
{{ $t('admin_dash.emoji.create_pack') }}
</button>
<Popover
ref="createPackPopover"
popover-class="emoji-tab-edit-popover popover-default"
trigger="click"
placement="bottom"
bound-to-selector=".emoji-tab"
:bound-to="{ x: 'container' }"
:offset="{ y: 5 }"
>
<template #content>
<div class="emoji-tab-popover-input">
<h3>{{ $t('admin_dash.emoji.new_pack_name') }}</h3>
<input v-model="newPackName" :placeholder="$t('admin_dash.emoji.new_pack_name')">
<button
class="button button-default btn emoji-tab-popover-button"
type="button"
@click="createEmojiPack">
{{ $t('admin_dash.emoji.create') }}
</button>
</div>
</template>
</Popover>
</li>
</ul>
@ -91,7 +103,7 @@
<li>
<div>
{{ $t('admin_dash.emoji.description') }}
<ModifiedIndicator :changed="metaEdited('description')" />
<ModifiedIndicator :changed="metaEdited('description')" message-key="admin_dash.emoji.metadata_changed" />
</div>
<textarea
v-model="packMeta.description"
@ -101,7 +113,7 @@
<li>
<div>
{{ $t('admin_dash.emoji.homepage') }}
<ModifiedIndicator :changed="metaEdited('homepage')" />
<ModifiedIndicator :changed="metaEdited('homepage')" message-key="admin_dash.emoji.metadata_changed" />
</div>
<input
class="emoji-info-input" v-model="packMeta.homepage"
@ -110,7 +122,7 @@
<li>
<div>
{{ $t('admin_dash.emoji.fallback_src') }}
<ModifiedIndicator :changed="metaEdited('fallback-src')" />
<ModifiedIndicator :changed="metaEdited('fallback-src')" message-key="admin_dash.emoji.metadata_changed" />
</div>
<input class="emoji-info-input" v-model="packMeta['fallback-src']" :disabled="pack.remote !== undefined">
</li>
@ -123,7 +135,7 @@
{{ $t('admin_dash.emoji.share') }}
</Checkbox>
<ModifiedIndicator :changed="metaEdited('share-files')" />
<ModifiedIndicator :changed="metaEdited('share-files')" message-key="admin_dash.emoji.metadata_changed" />
</li>
<li class="btn-group">
<button
@ -131,54 +143,14 @@
type="button"
v-if="pack.remote === undefined"
@click="savePackMetadata">
{{ $t('admin_dash.emoji.save') }}
{{ $t('admin_dash.emoji.save_meta') }}
</button>
<button
class="button button-default btn"
type="button"
v-if="pack.remote === undefined"
@click="$refs.addEmojiPopover.showPopover">
{{ $t('admin_dash.emoji.add_file') }}
<Popover
ref="addEmojiPopover"
trigger="click"
placement="bottom"
bound-to-selector=".emoji-tab"
popover-class="emoji-tab-edit-popover popover-default"
:bound-to="{ x: 'container' }"
:offset="{ y: 5 }"
>
<template #content>
<h3>{{ $t('admin_dash.emoji.adding_new') }}</h3>
<div>
<input
type="file"
class="emoji-tab-popover-input emoji-tab-popover-file"
@change="newEmojiUpload.upload = $event.target.files"
>
</div>
<div>
<div>
<input class="emoji-data-input emoji-tab-popover-input"
v-model="newEmojiUpload.shortcode"
:placeholder="$t('admin_dash.emoji.new_shortcode')">
<input class="emoji-data-input emoji-tab-popover-input"
v-model="newEmojiUpload.file"
:placeholder="$t('admin_dash.emoji.new_filename')">
<button
class="button button-default btn emoji-tab-popover-button"
type="button"
:disabled="this.newEmojiUpload.upload.length == 0"
@click="uploadEmoji">
{{ $t('admin_dash.emoji.save') }}
</button>
</div>
</div>
</template>
</Popover>
@click="savePackMetadata">
{{ $t('admin_dash.emoji.revert_meta') }}
</button>
<button
@ -219,12 +191,15 @@
<h3>{{ $t('admin_dash.emoji.downloading_pack', [packName]) }}</h3>
<div>
<div>
<input class="emoji-data-input emoji-tab-popover-input"
<div class="emoji-tab-popover-input">
<label for="remote-download-as-input">{{ $t('admin_dash.emoji.download_as_name') }}</label>
<input id="remote-download-as-input" class="emoji-data-input"
v-model="remotePackDownloadAs"
:placeholder="$t('admin_dash.emoji.download_as_name')">
:placeholder="$t('admin_dash.emoji.download_as_name_full')">
</div>
<button
class="button button-default btn emoji-tab-popover-button"
class="button button-default btn"
type="button"
@click="downloadRemotePack">
{{ $t('admin_dash.emoji.download') }}
@ -238,9 +213,74 @@
</ul>
</div>
<h2>{{ $t('admin_dash.emoji.files') }}</h2>
<ul class="setting-list">
<h3>
{{ $t('admin_dash.emoji.files') }}
<ModifiedIndicator v-if="pack"
:changed="editedParts[packName] && Object.keys(editedParts[packName]).length > 0"
message-key="admin_dash.emoji.emoji_changed"/>
</h3>
<div class="emoji-list" v-if="pack">
<Popover
v-if="pack.remote === undefined"
ref="addEmojiPopover"
trigger="click"
placement="bottom"
bound-to-selector=".emoji-tab"
popover-class="emoji-tab-edit-popover popover-default"
:bound-to="{ x: 'container' }"
:offset="{ y: 5 }"
>
<template #trigger>
<FAIcon icon="plus" size="2x" :title="$t('admin_dash.emoji.add_file')" />
</template>
<template #content>
<h3>
{{ $t('admin_dash.emoji.adding_new') }}
</h3>
<StillImage
class="emoji" v-if="newEmojiUploadPreview"
:src="newEmojiUploadPreview"
/>
<div v-else class="emoji"></div>
<div class="emoji-tab-popover-input">
<input
type="file"
accept="image/*"
class="emoji-tab-popover-file"
@change="newEmojiUpload.upload = $event.target.files"
>
</div>
<div>
<div class="emoji-tab-popover-input">
<div>{{ $t('admin_dash.emoji.shortcode') }}</div>
<input class="emoji-data-input"
v-model="newEmojiUpload.shortcode"
:placeholder="$t('admin_dash.emoji.new_shortcode')">
</div>
<div class="emoji-tab-popover-input">
<div>{{ $t('admin_dash.emoji.filename') }}</div>
<input class="emoji-data-input"
v-model="newEmojiUpload.file"
:placeholder="$t('admin_dash.emoji.new_filename')">
</div>
<button
class="button button-default btn"
type="button"
:disabled="this.newEmojiUpload.upload.length == 0"
@click="uploadEmoji">
{{ $t('admin_dash.emoji.save') }}
</button>
</div>
</template>
</Popover>
<Popover
v-for="(file, shortcode) in pack.files" :key="shortcode"
trigger="click"
@ -252,17 +292,28 @@
:bound-to="{ x: 'container' }"
:offset="{ y: 5 }"
@show="editEmoji(shortcode)"
@close="closedEditedEmoji(shortcode)"
>
<template #content>
<h3>
{{ $t('admin_dash.emoji.editing', [shortcode]) }}
</h3>
<div v-if="editedParts[packName] !== undefined && editedParts[packName][shortcode] !== undefined">
<input class="emoji-data-input"
v-model="editedParts[packName][shortcode].shortcode">
<input class="emoji-data-input"
v-model="editedParts[packName][shortcode].file">
<StillImage class="emoji" :src="emojiAddr(file)" />
<div v-if="editedParts[packName] !== undefined && editedParts[packName][shortcode] !== undefined">
<div class="emoji-tab-popover-input">
<label for="emoji-edit-shortcode">{{ $t('admin_dash.emoji.shortcode') }}</label>
<input id="emoji-edit-shortcode" class="emoji-data-input"
v-model="editedParts[packName][shortcode].shortcode">
</div>
<div class="emoji-tab-popover-input">
<label for="emoji-edit-filename">{{ $t('admin_dash.emoji.filename') }}</label>
<input id="emoji-edit-filename" class="emoji-data-input"
v-model="editedParts[packName][shortcode].file">
</div>
<div>
<button
class="button button-default btn emoji-tab-popover-button"
type="button"
@ -275,6 +326,12 @@
@click="editedParts[packName][shortcode].deleteModalVisible = true">
{{ $t('admin_dash.emoji.delete') }}
</button>
<button
class="button button-default btn emoji-tab-popover-button"
type="button"
@click="revertEmoji(shortcode)">
{{ $t('admin_dash.emoji.revert') }}
</button>
<ConfirmModal
v-if="editedParts[packName][shortcode].deleteModalVisible"
:title="$t('admin_dash.emoji.delete_title')"
@ -285,6 +342,7 @@
{{ $t('admin_dash.emoji.delete_confirm', [shortcode]) }}
</ConfirmModal>
</div>
</div>
</template>
<template #trigger>
<StillImage
@ -296,6 +354,7 @@
</template>
</Popover>
</div>
</ul>
</div>
</div>
</div>

10
src/components/settings_modal/helpers/modified_indicator.vue
View File

@ -15,7 +15,7 @@
</template>
<template #content>
<div class="modified-tooltip">
{{ $t('settings.setting_changed') }}
{{ $t(messageKey) }}
</div>
</template>
</Popover>
@ -33,7 +33,13 @@ library.add(
export default {
components: { Popover },
props: ['changed']
props: {
changed: Boolean,
messageKey: {
type: String,
default: 'settings.setting_changed'
}
}
}
</script>

14
src/i18n/en.json
View File

@ -934,6 +934,7 @@
"success_installing_frontend": "Frontend {version} successfully installed"
},
"emoji": {
"global_actions": "Global actions",
"reload": "Reload emoji",
"importFS": "Import emoji from filesystem",
"error": "Error: {0}",
@ -941,6 +942,7 @@
"delete_pack": "Delete pack",
"new_pack_name": "New pack name",
"create": "Create",
"emoji_packs": "Emoji packs",
"remote_packs": "Remote packs",
"do_list": "List",
"remote_pack_instance": "Remote pack instance",
@ -951,19 +953,27 @@
"fallback_sha256": "Fallback SHA256",
"share": "Share",
"save": "Save",
"save_meta": "Save metadata",
"revert_meta": "Revert metadata",
"delete": "Delete",
"revert": "Revert",
"add_file": "Add file",
"adding_new": "Adding new emoji",
"shortcode": "Shortcode",
"filename": "Filename",
"new_shortcode": "Shortcode, leave blank to infer",
"new_filename": "Filename, leave blank to infer",
"delete_confirm": "Are you sure you want to delete {0}?",
"download_pack": "Download pack",
"downloading_pack": "Downloading {0}",
"download": "Download",
"download_as_name": "New name, leave blank to reuse",
"download_as_name": "New name",
"download_as_name_full": "New name, leave blank to reuse",
"files": "Files",
"editing": "Editing {0}",
"delete_title": "Delete?"
"delete_title": "Delete?",
"metadata_changed": "Metadata different from saved",
"emoji_changed": "Unsaved emoji file changes, check highlighted emoji"
},
"temp_overrides": {
":pleroma": {