hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

third pass of emoji reorganizing

Browse source
This commit is contained in:
Henry Jameson 2025-12-07 17:42:10 +02:00
commit 0bc5442eb9
4 changed files with 196 additions and 192 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/App.scss
View file

@ -560,7 +560,9 @@ textarea {
&.disabled { &.disabled {
cursor: not-allowed; cursor: not-allowed;
color: var(--textFaint); color: var(--textFaint);
background-color: transparent;
/* stylelint-disable-next-line declaration-no-important */
background-color: transparent !important;
} }
&[type="range"] { &[type="range"] {

17
src/components/settings_modal/admin_tabs/emoji_tab.scss
View file

@ -1,4 +1,8 @@
.EmojiTab { .EmojiTab {
.setting-list {
padding-left: 0.75em;
}
.toolbar { .toolbar {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -20,24 +24,27 @@
.button-default { .button-default {
flex: 0 0 auto; flex: 0 0 auto;
padding: 0.33em; padding: 0.5em;
font-size: 1rem; font-size: 1rem;
} }
} }
.selector-buttons,
.meta-buttons { .meta-buttons {
display: flex; display: flex;
flex-wrap: wrap;
gap: 0.5em; gap: 0.5em;
} }
h5 {
margin-top: 1em;
margin-bottom: 0.25em;
}
h3.toolbar { h3.toolbar {
align-items: end; align-items: end;
} }
h4.toolbar {
align-items: baseline;
}
.emoji-info-input { .emoji-info-input {
width: 100%; width: 100%;
} }

366
src/components/settings_modal/admin_tabs/emoji_tab.vue
View file

@ -112,147 +112,146 @@
</Popover> </Popover>
</span> </span>
</h3> </h3>
<ul class="setting-list"> <div class="setting-list">
<li> <h4 class="toolbar">
<h4 class="toolbar"> {{ $t('admin_dash.emoji.edit_pack') }}
<span class="header-text"> </h4>
{{ $t('admin_dash.emoji.edit_pack') }} <div class="selector-buttons setting-list">
</span> <button
<span class="header-buttons"> :disabled="!pack || pack.remote !== undefined"
<button class="button button-default btn"
:disabled="!pack || pack.remote !== undefined" type="button"
class="button button-default btn" @click="deleteModalVisible = true"
type="button" >
@click="deleteModalVisible = true" {{ $t('admin_dash.emoji.delete_pack') }}
>
{{ $t('admin_dash.emoji.delete_pack') }}
<ConfirmModal <ConfirmModal
v-if="deleteModalVisible" v-if="deleteModalVisible"
:title="$t('admin_dash.emoji.delete_title')" :title="$t('admin_dash.emoji.delete_title')"
:cancel-text="$t('status.delete_confirm_cancel_button')" :cancel-text="$t('status.delete_confirm_cancel_button')"
:confirm-text="$t('status.delete_confirm_accept_button')" :confirm-text="$t('status.delete_confirm_accept_button')"
@cancelled="deleteModalVisible = false" @cancelled="deleteModalVisible = false"
@accepted="deleteEmojiPack" @accepted="deleteEmojiPack"
> >
{{ $t('admin_dash.emoji.delete_confirm', [packName]) }} {{ $t('admin_dash.emoji.delete_confirm', [packName]) }}
</ConfirmModal> </ConfirmModal>
</button> </button>
<button <button
:disabled="!pack || pack.remote === undefined" :disabled="!pack || pack.remote === undefined"
class="button button-default btn" class="button button-default btn"
type="button" type="button"
@click="$refs.downloadPackPopover.showPopover" @click="$refs.downloadPackPopover.showPopover"
> >
{{ $t('admin_dash.emoji.download_pack') }} {{ $t('admin_dash.emoji.download_pack') }}
<Popover <Popover
ref="downloadPackPopover" ref="downloadPackPopover"
trigger="click" trigger="click"
placement="bottom" placement="bottom"
bound-to-selector=".emoji-tab" bound-to-selector=".emoji-tab"
popover-class="emoji-tab-edit-popover popover-default" popover-class="emoji-tab-edit-popover popover-default"
:bound-to="{ x: 'container' }" :bound-to="{ x: 'container' }"
:offset="{ y: 5 }" :offset="{ y: 5 }"
> >
<template #content> <template #content>
<h3>{{ $t('admin_dash.emoji.downloading_pack', [packName]) }}</h3> <h3>{{ $t('admin_dash.emoji.downloading_pack', [packName]) }}</h3>
<div> <div>
<div> <div>
<div class="emoji-tab-popover-input"> <div class="emoji-tab-popover-input">
<label> <label>
{{ $t('admin_dash.emoji.download_as_name') }} {{ $t('admin_dash.emoji.download_as_name') }}
<input <input
v-model="remotePackDownloadAs" v-model="remotePackDownloadAs"
class="emoji-data-input input" class="emoji-data-input input"
:placeholder="$t('admin_dash.emoji.download_as_name_full')" :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"
> >
{{ $t('admin_dash.emoji.download') }} </label>
</button>
<div
v-if="downloadWillReplaceLocal"
class="warning"
>
<em>{{ $t('admin_dash.emoji.replace_warning') }}</em>
</div> </div>
</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 <button
ref="createPackPopover" class="button button-default btn"
popover-class="emoji-tab-edit-popover popover-default" type="button"
trigger="click" @click="downloadRemotePack"
placement="bottom" >
{{ $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 <button
class="button button-default btn emoji-tab-popover-button" class="button button-default btn emoji-tab-popover-button"
type="button" type="button"
@click="createEmojiPack"
> >
{{ $t('admin_dash.emoji.create_pack') }} {{ $t('admin_dash.emoji.create') }}
</button> </button>
</template> </div>
<template #content> </template>
<div class="emoji-tab-popover-input"> </Popover>
<h3>{{ $t('admin_dash.emoji.new_pack_name') }}</h3> </span>
<input </div>
v-model="newPackName" <h5>
:placeholder="$t('admin_dash.emoji.new_pack_name')" {{ $t('admin_dash.emoji.metadata') }}
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 <ModifiedIndicator
class="pack-info-wrapper" :changed="$refs.emojiPopovers && $refs.emojiPopovers.some(p => p.isEdited)"
:class="{ disabled: !pack }" message-key="admin_dash.emoji.emoji_changed"
> />
</h5>
<ul class="setting-list"> <ul class="setting-list">
<li> <li>
<label :class="{ ['-disabled']: !pack || pack.remote !== undefined }"> <label :class="{ ['-disabled']: !pack || pack.remote !== undefined }">
@ -340,77 +339,72 @@
{{ $t('admin_dash.emoji.revert_meta') }} {{ $t('admin_dash.emoji.revert_meta') }}
</button> </button>
</div> </div>
</li> </li>
</ul> </ul>
<h5>
{{ $t('admin_dash.emoji.files') }}
<ul class="setting-list"> <ModifiedIndicator
<h4> :changed="$refs.emojiPopovers && $refs.emojiPopovers.some(p => p.isEdited)"
{{ $t('admin_dash.emoji.files') }} message-key="admin_dash.emoji.emoji_changed"
/>
</h5>
<ModifiedIndicator <div
:changed="$refs.emojiPopovers && $refs.emojiPopovers.some(p => p.isEdited)" class="emoji-list setting-list"
message-key="admin_dash.emoji.emoji_changed" >
/> <EmojiEditingPopover
</h4> v-if="pack && pack.remote === undefined"
placement="bottom"
<div new-upload
class="emoji-list" :title="$t('admin_dash.emoji.adding_new')"
:pack-name="packName"
@update-pack-files="updatePackFiles"
@display-error="displayError"
> >
<EmojiEditingPopover <template #trigger>
v-if="pack && pack.remote === undefined" <FAIcon
placement="bottom" icon="plus"
new-upload size="2x"
:title="$t('admin_dash.emoji.adding_new')" :title="$t('admin_dash.emoji.add_file')"
: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> </template>
</EmojiEditingPopover>
<template v-if="!pack">
<div
class="placeholder"
v-for="_ in new Array(20)"
/>
</template>
<EmojiEditingPopover <EmojiEditingPopover
v-for="(file, shortcode) in (pack?.files || [])" v-for="(file, shortcode) in (pack?.files || [])"
ref="emojiPopovers" ref="emojiPopovers"
:key="shortcode" :key="shortcode"
placement="top" placement="top"
:title="$t(`admin_dash.emoji.${pack?.remote === undefined ? 'editing' : 'copying'}`, [shortcode])" :title="$t(`admin_dash.emoji.${pack?.remote === undefined ? 'editing' : 'copying'}`, [shortcode])"
:shortcode="shortcode" :shortcode="shortcode"
:file="file" :file="file"
:pack-name="packName" :pack-name="packName"
:remote="pack?.remote" :remote="pack?.remote"
:known-local-packs="knownLocalPacks" :known-local-packs="knownLocalPacks"
@update-pack-files="updatePackFiles" @update-pack-files="updatePackFiles"
@display-error="displayError" @display-error="displayError"
> >
<template #trigger> <template #trigger>
<StillImage <StillImage
class="emoji" class="emoji"
:src="emojiAddr(file)" :src="emojiAddr(file)"
:title="`:${shortcode}:`" :title="`:${shortcode}:`"
:alt="`:${shortcode}:`" :alt="`:${shortcode}:`"
/> />
</template> </template>
</EmojiEditingPopover> </EmojiEditingPopover>
</div> </div>
</ul>
</div> </div>
<h3>{{ $t('admin_dash.emoji.advanced') }}</h3> <h3>{{ $t('admin_dash.emoji.advanced') }}</h3>
<button <button
class="button button-default btn" class="button button-default btn"
type="button" type="button"
@click="importFromFS" @click="importFromFS"

1
src/i18n/en.json
View file

@ -1307,6 +1307,7 @@
"remote_pack_instance": "Remote pack instance", "remote_pack_instance": "Remote pack instance",
"emoji_pack": "Emoji pack", "emoji_pack": "Emoji pack",
"edit_pack": "Edit pack", "edit_pack": "Edit pack",
"metadata": "Metadata",
"description": "Description", "description": "Description",
"homepage": "Homepage", "homepage": "Homepage",
"fallback_src": "Fallback source", "fallback_src": "Fallback source",