third pass of emoji reorganizing
This commit is contained in:
Henry Jameson
parent
4329502422
commit
0bc5442eb9
4 changed files with 196 additions and 192 deletions
|
|
@ -560,7 +560,9 @@ textarea {
|
|||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
color: var(--textFaint);
|
||||
background-color: transparent;
|
||||
|
||||
/* stylelint-disable-next-line declaration-no-important */
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
&[type="range"] {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
.EmojiTab {
|
||||
.setting-list {
|
||||
padding-left: 0.75em;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -20,24 +24,27 @@
|
|||
|
||||
.button-default {
|
||||
flex: 0 0 auto;
|
||||
padding: 0.33em;
|
||||
padding: 0.5em;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.selector-buttons,
|
||||
.meta-buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
h3.toolbar {
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
h4.toolbar {
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.emoji-info-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -112,147 +112,146 @@
|
|||
</Popover>
|
||||
</span>
|
||||
</h3>
|
||||
<ul class="setting-list">
|
||||
<li>
|
||||
<h4 class="toolbar">
|
||||
<span class="header-text">
|
||||
{{ $t('admin_dash.emoji.edit_pack') }}
|
||||
</span>
|
||||
<span class="header-buttons">
|
||||
<button
|
||||
:disabled="!pack || pack.remote !== undefined"
|
||||
class="button button-default btn"
|
||||
type="button"
|
||||
@click="deleteModalVisible = true"
|
||||
>
|
||||
{{ $t('admin_dash.emoji.delete_pack') }}
|
||||
<div class="setting-list">
|
||||
<h4 class="toolbar">
|
||||
{{ $t('admin_dash.emoji.edit_pack') }}
|
||||
</h4>
|
||||
<div class="selector-buttons setting-list">
|
||||
<button
|
||||
:disabled="!pack || pack.remote !== undefined"
|
||||
class="button button-default btn"
|
||||
type="button"
|
||||
@click="deleteModalVisible = true"
|
||||
>
|
||||
{{ $t('admin_dash.emoji.delete_pack') }}
|
||||
|
||||
<ConfirmModal
|
||||
v-if="deleteModalVisible"
|
||||
:title="$t('admin_dash.emoji.delete_title')"
|
||||
:cancel-text="$t('status.delete_confirm_cancel_button')"
|
||||
:confirm-text="$t('status.delete_confirm_accept_button')"
|
||||
@cancelled="deleteModalVisible = false"
|
||||
@accepted="deleteEmojiPack"
|
||||
>
|
||||
{{ $t('admin_dash.emoji.delete_confirm', [packName]) }}
|
||||
</ConfirmModal>
|
||||
</button>
|
||||
<ConfirmModal
|
||||
v-if="deleteModalVisible"
|
||||
:title="$t('admin_dash.emoji.delete_title')"
|
||||
:cancel-text="$t('status.delete_confirm_cancel_button')"
|
||||
:confirm-text="$t('status.delete_confirm_accept_button')"
|
||||
@cancelled="deleteModalVisible = false"
|
||||
@accepted="deleteEmojiPack"
|
||||
>
|
||||
{{ $t('admin_dash.emoji.delete_confirm', [packName]) }}
|
||||
</ConfirmModal>
|
||||
</button>
|
||||
|
||||
<button
|
||||
:disabled="!pack || pack.remote === undefined"
|
||||
class="button button-default btn"
|
||||
type="button"
|
||||
@click="$refs.downloadPackPopover.showPopover"
|
||||
>
|
||||
{{ $t('admin_dash.emoji.download_pack') }}
|
||||
<button
|
||||
:disabled="!pack || pack.remote === undefined"
|
||||
class="button button-default btn"
|
||||
type="button"
|
||||
@click="$refs.downloadPackPopover.showPopover"
|
||||
>
|
||||
{{ $t('admin_dash.emoji.download_pack') }}
|
||||
|
||||
<Popover
|
||||
ref="downloadPackPopover"
|
||||
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.downloading_pack', [packName]) }}</h3>
|
||||
<div>
|
||||
<div>
|
||||
<div class="emoji-tab-popover-input">
|
||||
<label>
|
||||
{{ $t('admin_dash.emoji.download_as_name') }}
|
||||
<input
|
||||
v-model="remotePackDownloadAs"
|
||||
class="emoji-data-input input"
|
||||
:placeholder="$t('admin_dash.emoji.download_as_name_full')"
|
||||
>
|
||||
</label>
|
||||
|
||||
<div
|
||||
v-if="downloadWillReplaceLocal"
|
||||
class="warning"
|
||||
>
|
||||
<em>{{ $t('admin_dash.emoji.replace_warning') }}</em>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="button button-default btn"
|
||||
type="button"
|
||||
@click="downloadRemotePack"
|
||||
<Popover
|
||||
ref="downloadPackPopover"
|
||||
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.downloading_pack', [packName]) }}</h3>
|
||||
<div>
|
||||
<div>
|
||||
<div class="emoji-tab-popover-input">
|
||||
<label>
|
||||
{{ $t('admin_dash.emoji.download_as_name') }}
|
||||
<input
|
||||
v-model="remotePackDownloadAs"
|
||||
class="emoji-data-input input"
|
||||
:placeholder="$t('admin_dash.emoji.download_as_name_full')"
|
||||
>
|
||||
{{ $t('admin_dash.emoji.download') }}
|
||||
</button>
|
||||
</label>
|
||||
|
||||
<div
|
||||
v-if="downloadWillReplaceLocal"
|
||||
class="warning"
|
||||
>
|
||||
<em>{{ $t('admin_dash.emoji.replace_warning') }}</em>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Popover>
|
||||
</button>
|
||||
</span>
|
||||
<span class="header-buttons btn-group">
|
||||
<Select
|
||||
v-model="packName"
|
||||
class="form-control"
|
||||
>
|
||||
<option
|
||||
value=""
|
||||
disabled
|
||||
hidden
|
||||
>
|
||||
{{ $t('admin_dash.emoji.emoji_pack') }}
|
||||
</option>
|
||||
<option
|
||||
v-for="(pack, listPackName) in knownPacks"
|
||||
:key="listPackName"
|
||||
:label="listPackName"
|
||||
>
|
||||
{{ listPackName }}
|
||||
</option>
|
||||
</Select>
|
||||
|
||||
<Popover
|
||||
ref="createPackPopover"
|
||||
popover-class="emoji-tab-edit-popover popover-default"
|
||||
trigger="click"
|
||||
placement="bottom"
|
||||
<button
|
||||
class="button button-default btn"
|
||||
type="button"
|
||||
@click="downloadRemotePack"
|
||||
>
|
||||
{{ $t('admin_dash.emoji.download') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Popover>
|
||||
</button>
|
||||
|
||||
<span class="btn-group">
|
||||
<Select
|
||||
v-model="packName"
|
||||
class="form-control"
|
||||
>
|
||||
<option
|
||||
value=""
|
||||
disabled
|
||||
hidden
|
||||
>
|
||||
<template #trigger>
|
||||
{{ $t('admin_dash.emoji.emoji_pack') }}
|
||||
</option>
|
||||
<option
|
||||
v-for="(pack, listPackName) in knownPacks"
|
||||
:key="listPackName"
|
||||
:label="listPackName"
|
||||
>
|
||||
{{ listPackName }}
|
||||
</option>
|
||||
</Select>
|
||||
|
||||
<Popover
|
||||
ref="createPackPopover"
|
||||
popover-class="emoji-tab-edit-popover popover-default"
|
||||
trigger="click"
|
||||
placement="bottom"
|
||||
>
|
||||
<template #trigger>
|
||||
<button
|
||||
class="button button-default btn emoji-tab-popover-button"
|
||||
type="button"
|
||||
>
|
||||
{{ $t('admin_dash.emoji.create_pack') }}
|
||||
</button>
|
||||
</template>
|
||||
<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')"
|
||||
class="input"
|
||||
>
|
||||
<button
|
||||
class="button button-default btn emoji-tab-popover-button"
|
||||
type="button"
|
||||
@click="createEmojiPack"
|
||||
>
|
||||
{{ $t('admin_dash.emoji.create_pack') }}
|
||||
{{ $t('admin_dash.emoji.create') }}
|
||||
</button>
|
||||
</template>
|
||||
<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')"
|
||||
class="input"
|
||||
>
|
||||
<button
|
||||
class="button button-default btn emoji-tab-popover-button"
|
||||
type="button"
|
||||
@click="createEmojiPack"
|
||||
>
|
||||
{{ $t('admin_dash.emoji.create') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</Popover>
|
||||
</span>
|
||||
</h4>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</Popover>
|
||||
</span>
|
||||
</div>
|
||||
<h5>
|
||||
{{ $t('admin_dash.emoji.metadata') }}
|
||||
|
||||
<div
|
||||
class="pack-info-wrapper"
|
||||
:class="{ disabled: !pack }"
|
||||
>
|
||||
<ModifiedIndicator
|
||||
:changed="$refs.emojiPopovers && $refs.emojiPopovers.some(p => p.isEdited)"
|
||||
message-key="admin_dash.emoji.emoji_changed"
|
||||
/>
|
||||
</h5>
|
||||
<ul class="setting-list">
|
||||
<li>
|
||||
<label :class="{ ['-disabled']: !pack || pack.remote !== undefined }">
|
||||
|
|
@ -340,77 +339,72 @@
|
|||
{{ $t('admin_dash.emoji.revert_meta') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
<h5>
|
||||
{{ $t('admin_dash.emoji.files') }}
|
||||
|
||||
<ul class="setting-list">
|
||||
<h4>
|
||||
{{ $t('admin_dash.emoji.files') }}
|
||||
<ModifiedIndicator
|
||||
:changed="$refs.emojiPopovers && $refs.emojiPopovers.some(p => p.isEdited)"
|
||||
message-key="admin_dash.emoji.emoji_changed"
|
||||
/>
|
||||
</h5>
|
||||
|
||||
<ModifiedIndicator
|
||||
:changed="$refs.emojiPopovers && $refs.emojiPopovers.some(p => p.isEdited)"
|
||||
message-key="admin_dash.emoji.emoji_changed"
|
||||
/>
|
||||
</h4>
|
||||
|
||||
<div
|
||||
class="emoji-list"
|
||||
<div
|
||||
class="emoji-list setting-list"
|
||||
>
|
||||
<EmojiEditingPopover
|
||||
v-if="pack && pack.remote === undefined"
|
||||
placement="bottom"
|
||||
new-upload
|
||||
:title="$t('admin_dash.emoji.adding_new')"
|
||||
:pack-name="packName"
|
||||
@update-pack-files="updatePackFiles"
|
||||
@display-error="displayError"
|
||||
>
|
||||
<EmojiEditingPopover
|
||||
v-if="pack && pack.remote === undefined"
|
||||
placement="bottom"
|
||||
new-upload
|
||||
:title="$t('admin_dash.emoji.adding_new')"
|
||||
:pack-name="packName"
|
||||
@update-pack-files="updatePackFiles"
|
||||
@display-error="displayError"
|
||||
>
|
||||
<template #trigger>
|
||||
<FAIcon
|
||||
icon="plus"
|
||||
size="2x"
|
||||
:title="$t('admin_dash.emoji.add_file')"
|
||||
/>
|
||||
</template>
|
||||
</EmojiEditingPopover>
|
||||
<template v-if="!pack">
|
||||
<div
|
||||
class="placeholder"
|
||||
v-for="_ in new Array(20)"
|
||||
<template #trigger>
|
||||
<FAIcon
|
||||
icon="plus"
|
||||
size="2x"
|
||||
:title="$t('admin_dash.emoji.add_file')"
|
||||
/>
|
||||
</template>
|
||||
</EmojiEditingPopover>
|
||||
<template v-if="!pack">
|
||||
<div
|
||||
class="placeholder"
|
||||
v-for="_ in new Array(20)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
||||
<EmojiEditingPopover
|
||||
v-for="(file, shortcode) in (pack?.files || [])"
|
||||
ref="emojiPopovers"
|
||||
:key="shortcode"
|
||||
placement="top"
|
||||
:title="$t(`admin_dash.emoji.${pack?.remote === undefined ? 'editing' : 'copying'}`, [shortcode])"
|
||||
:shortcode="shortcode"
|
||||
:file="file"
|
||||
:pack-name="packName"
|
||||
:remote="pack?.remote"
|
||||
:known-local-packs="knownLocalPacks"
|
||||
@update-pack-files="updatePackFiles"
|
||||
@display-error="displayError"
|
||||
>
|
||||
<template #trigger>
|
||||
<StillImage
|
||||
class="emoji"
|
||||
:src="emojiAddr(file)"
|
||||
:title="`:${shortcode}:`"
|
||||
:alt="`:${shortcode}:`"
|
||||
/>
|
||||
</template>
|
||||
</EmojiEditingPopover>
|
||||
</div>
|
||||
</ul>
|
||||
<EmojiEditingPopover
|
||||
v-for="(file, shortcode) in (pack?.files || [])"
|
||||
ref="emojiPopovers"
|
||||
:key="shortcode"
|
||||
placement="top"
|
||||
:title="$t(`admin_dash.emoji.${pack?.remote === undefined ? 'editing' : 'copying'}`, [shortcode])"
|
||||
:shortcode="shortcode"
|
||||
:file="file"
|
||||
:pack-name="packName"
|
||||
:remote="pack?.remote"
|
||||
:known-local-packs="knownLocalPacks"
|
||||
@update-pack-files="updatePackFiles"
|
||||
@display-error="displayError"
|
||||
>
|
||||
<template #trigger>
|
||||
<StillImage
|
||||
class="emoji"
|
||||
:src="emojiAddr(file)"
|
||||
:title="`:${shortcode}:`"
|
||||
:alt="`:${shortcode}:`"
|
||||
/>
|
||||
</template>
|
||||
</EmojiEditingPopover>
|
||||
</div>
|
||||
</div>
|
||||
<h3>{{ $t('admin_dash.emoji.advanced') }}</h3>
|
||||
<button
|
||||
|
||||
class="button button-default btn"
|
||||
type="button"
|
||||
@click="importFromFS"
|
||||
|
|
|
|||
|
|
@ -1307,6 +1307,7 @@
|
|||
"remote_pack_instance": "Remote pack instance",
|
||||
"emoji_pack": "Emoji pack",
|
||||
"edit_pack": "Edit pack",
|
||||
"metadata": "Metadata",
|
||||
"description": "Description",
|
||||
"homepage": "Homepage",
|
||||
"fallback_src": "Fallback source",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue