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

second pass of reorganizing emoji tab

Browse source
This commit is contained in:
Henry Jameson 2025-12-07 17:00:21 +02:00
commit 4329502422
7 changed files with 235 additions and 194 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/App.scss
View file

@ -513,6 +513,12 @@ nav {
} }
} }
label {
&.-disabled {
color: var(--textFaint);
}
}
input, input,
textarea { textarea {
border: none; border: none;
@ -554,6 +560,7 @@ textarea {
&.disabled { &.disabled {
cursor: not-allowed; cursor: not-allowed;
color: var(--textFaint); color: var(--textFaint);
background-color: transparent;
} }
&[type="range"] { &[type="range"] {
@ -579,6 +586,8 @@ textarea {
& + label::before { & + label::before {
opacity: 0.5; opacity: 0.5;
} }
background-color: var(--background);
} }
+ label::before { + label::before {
@ -694,13 +703,16 @@ option {
display: inline-flex; display: inline-flex;
vertical-align: middle; vertical-align: middle;
.Select select {
line-height: 1;
}
> *, > *,
> * .button-default { > * .button-default {
--_roundness-left: 0; --_roundness-left: 0;
--_roundness-right: 0; --_roundness-right: 0;
position: relative; position: relative;
flex: 1 1 auto;
} }
> *:first-child, > *:first-child,

4
src/components/checkbox/checkbox.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<label <label
class="checkbox" class="checkbox"
:class="[{ disabled, indeterminate, 'indeterminate-fix': indeterminateTransitionFix }, radio ? '-radio' : '-checkbox']" :class="[{ ['-disabled']: disabled, indeterminate, 'indeterminate-fix': indeterminateTransitionFix }, radio ? '-radio' : '-checkbox']"
> >
<span <span
v-if="!!$slots.before" v-if="!!$slots.before"
@ -123,7 +123,7 @@ export default {
.disabled { .disabled {
.checkbox-indicator::before { .checkbox-indicator::before {
background-color: var(--background); background-color: transparent;
} }
} }

2
src/components/registration/registration.vue
View file

@ -395,7 +395,7 @@
} }
form textarea { form textarea {
line-height: 16px; line-height: 1;
resize: vertical; resize: vertical;
} }

8
src/components/select/select.vue
View file

@ -26,6 +26,7 @@
/* TODO fix order of styles */ /* TODO fix order of styles */
label.Select { label.Select {
padding: 0; padding: 0;
display: flex;
select { select {
appearance: none; appearance: none;
@ -33,13 +34,12 @@ label.Select {
border: none; border: none;
color: var(--text); color: var(--text);
margin: 0; margin: 0;
padding: 0 2em 0 0.2em; padding: 0 2em 0 0.5em;
font-family: var(--font); font-family: var(--font);
font-size: 1em; font-size: 1em;
width: 100%; width: 100%;
z-index: 1; z-index: 1;
height: 2em; line-height: 2;
line-height: 16px;
&[multiple], &[multiple],
&[size] { &[size] {
@ -79,7 +79,7 @@ label.Select {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
right: 5px; right: 0.5em;
height: 100%; height: 100%;
width: 0.875em; width: 0.875em;
font-family: var(--font); font-family: var(--font);

11
src/components/settings_modal/admin_tabs/emoji_tab.js
View file

@ -65,6 +65,7 @@ const EmojiTab = {
return this.packName !== '' ? this.knownPacks[this.packName] : undefined return this.packName !== '' ? this.knownPacks[this.packName] : undefined
}, },
packMeta () { packMeta () {
if (this.packName === '') return {}
if (this.editedMetadata[this.packName] === undefined) { if (this.editedMetadata[this.packName] === undefined) {
this.editedMetadata[this.packName] = clone(this.pack.pack) this.editedMetadata[this.packName] = clone(this.pack.pack)
} }
@ -115,8 +116,6 @@ const EmojiTab = {
return Promise.reject(resp) return Promise.reject(resp)
} }
}).then(() => { }).then(() => {
this.$refs.createPackPopover.hidePopover()
this.packName = this.newPackName this.packName = this.newPackName
this.newPackName = '' this.newPackName = ''
}) })
@ -222,8 +221,6 @@ const EmojiTab = {
for (const pack in this.knownRemotePacks[inst]) { for (const pack in this.knownRemotePacks[inst]) {
this.sortPackFiles(`${pack}@${inst}`) this.sortPackFiles(`${pack}@${inst}`)
} }
this.$refs.remotePackPopover.hidePopover()
}) })
.catch(data => { .catch(data => {
this.displayError(data) this.displayError(data)
@ -240,8 +237,6 @@ const EmojiTab = {
.then(data => data.json()) .then(data => data.json())
.then(resp => { .then(resp => {
if (resp === 'ok') { if (resp === 'ok') {
this.$refs.downloadPackPopover.hidePopover()
return this.refreshPackList() return this.refreshPackList()
} else { } else {
this.displayError(resp.error) this.displayError(resp.error)
@ -259,8 +254,6 @@ const EmojiTab = {
.then(data => data.json()) .then(data => data.json())
.then(resp => { .then(resp => {
if (resp === 'ok') { if (resp === 'ok') {
this.$refs.additionalRemotePopover.hidePopover()
return this.refreshPackList() return this.refreshPackList()
} else { } else {
this.displayError(resp.error) this.displayError(resp.error)
@ -279,8 +272,6 @@ const EmojiTab = {
.then(data => data.json()) .then(data => data.json())
.then(resp => { .then(resp => {
if (resp === 'ok') { if (resp === 'ok') {
this.$refs.additionalRemotePopover.hidePopover()
return this.refreshPackList() return this.refreshPackList()
} else { } else {
this.displayError(resp.error) this.displayError(resp.error)

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

@ -2,10 +2,20 @@
.toolbar { .toolbar {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: end; gap: 0.5em;
.header-text { .header-buttons {
display: flex;
flex: 1 0 auto; flex: 1 0 auto;
justify-content: end;
&:not(.btn-group) {
gap: 0.5em;
}
.header-text {
flex: 1 0 auto;
}
} }
.button-default { .button-default {
@ -15,6 +25,19 @@
} }
} }
.meta-buttons {
display: flex;
gap: 0.5em;
}
h3.toolbar {
align-items: end;
}
h4.toolbar {
align-items: baseline;
}
.emoji-info-input { .emoji-info-input {
width: 100%; width: 100%;
} }
@ -26,8 +49,8 @@
} }
.emoji { .emoji {
width: 32px; width: 2em;
height: 32px; height: 2em;
} }
.emoji-unsaved { .emoji-unsaved {
@ -38,6 +61,14 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 1em; gap: 1em;
.placeholder {
background: var(--textFaint);
border-radius: 0.5em;
width: 2em;
height: 2em;
opacity: 0.5;
}
} }
} }

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

@ -114,157 +114,13 @@
</h3> </h3>
<ul class="setting-list"> <ul class="setting-list">
<li> <li>
<h4> <h4 class="toolbar">
{{ $t('admin_dash.emoji.edit_pack') }} <span class="header-text">
</h4> {{ $t('admin_dash.emoji.edit_pack') }}
</span>
<Select <span class="header-buttons">
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>
<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')"
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>
</li>
</ul>
<div v-if="pack">
<div class="pack-info-wrapper">
<ul class="setting-list">
<li>
<label>
{{ $t('admin_dash.emoji.description') }}
<ModifiedIndicator
:changed="metaEdited('description')"
message-key="admin_dash.emoji.metadata_changed"
/>
<textarea
v-model="packMeta.description"
:disabled="pack.remote !== undefined"
class="bio resize-height input"
/>
</label>
</li>
<li>
<label>
{{ $t('admin_dash.emoji.homepage') }}
<ModifiedIndicator
:changed="metaEdited('homepage')"
message-key="admin_dash.emoji.metadata_changed"
/>
<input
v-model="packMeta.homepage"
class="emoji-info-input input"
:disabled="pack.remote !== undefined"
>
</label>
</li>
<li>
<label>
{{ $t('admin_dash.emoji.fallback_src') }}
<ModifiedIndicator
:changed="metaEdited('fallback-src')"
message-key="admin_dash.emoji.metadata_changed"
/>
<input
v-model="packMeta['fallback-src']"
class="emoji-info-input input"
:disabled="pack.remote !== undefined"
>
</label>
</li>
<li>
<label>
{{ $t('admin_dash.emoji.fallback_sha256') }}
<input
v-model="packMeta['fallback-src-sha256']"
:disabled="true"
class="emoji-info-input input"
>
</label>
</li>
<li>
<Checkbox
v-model="packMeta['share-files']"
:disabled="pack.remote !== undefined"
>
{{ $t('admin_dash.emoji.share') }}
</Checkbox>
<ModifiedIndicator
:changed="metaEdited('share-files')"
message-key="admin_dash.emoji.metadata_changed"
/>
<button <button
v-if="pack.remote === undefined" :disabled="!pack || pack.remote !== undefined"
class="button button-default btn"
type="button"
@click="savePackMetadata"
>
{{ $t('admin_dash.emoji.save_meta') }}
</button>
<button
v-if="pack.remote === undefined"
class="button button-default btn"
type="button"
@click="savePackMetadata"
>
{{ $t('admin_dash.emoji.revert_meta') }}
</button>
<button
v-if="pack.remote === undefined"
class="button button-default btn" class="button button-default btn"
type="button" type="button"
@click="deleteModalVisible = true" @click="deleteModalVisible = true"
@ -284,7 +140,7 @@
</button> </button>
<button <button
v-if="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"
@ -334,27 +190,175 @@
</template> </template>
</Popover> </Popover>
</button> </button>
</li> </span>
</ul> <span class="header-buttons btn-group">
</div> <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"
>
<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') }}
</button>
</div>
</template>
</Popover>
</span>
</h4>
</li>
</ul>
<div
class="pack-info-wrapper"
:class="{ disabled: !pack }"
>
<ul class="setting-list">
<li>
<label :class="{ ['-disabled']: !pack || pack.remote !== undefined }">
{{ $t('admin_dash.emoji.description') }}
<ModifiedIndicator
:changed="metaEdited('description')"
message-key="admin_dash.emoji.metadata_changed"
/>
<textarea
v-model="packMeta.description"
:disabled="!pack || pack.remote !== undefined"
class="bio resize-height input"
/>
</label>
</li>
<li>
<label :class="{ ['-disabled']: !pack || pack.remote !== undefined }">
{{ $t('admin_dash.emoji.homepage') }}
<ModifiedIndicator
:changed="metaEdited('homepage')"
message-key="admin_dash.emoji.metadata_changed"
/>
<input
v-model="packMeta.homepage"
class="emoji-info-input input"
:disabled="!pack || pack.remote !== undefined"
>
</label>
</li>
<li>
<label :class="{ ['-disabled']: !pack || pack.remote !== undefined }">
{{ $t('admin_dash.emoji.fallback_src') }}
<ModifiedIndicator
:changed="metaEdited('fallback-src')"
message-key="admin_dash.emoji.metadata_changed"
/>
<input
v-model="packMeta['fallback-src']"
class="emoji-info-input input"
:disabled="!pack || pack.remote !== undefined"
>
</label>
</li>
<li>
<label :class="{ ['-disabled']: !pack || pack.remote !== undefined }">
{{ $t('admin_dash.emoji.fallback_sha256') }}
<input
v-model="packMeta['fallback-src-sha256']"
:disabled="!pack || pack.remote !== undefined"
class="emoji-info-input input"
>
</label>
</li>
<li>
<Checkbox
v-model="packMeta['share-files']"
:disabled="!pack || pack.remote !== undefined"
>
{{ $t('admin_dash.emoji.share') }}
</Checkbox>
<ModifiedIndicator
:changed="metaEdited('share-files')"
message-key="admin_dash.emoji.metadata_changed"
/>
<div class="meta-buttons">
<button
v-if="pack && pack.remote === undefined"
class="button button-default btn"
type="button"
@click="savePackMetadata"
>
{{ $t('admin_dash.emoji.save_meta') }}
</button>
<button
v-if="pack && pack.remote === undefined"
class="button button-default btn"
type="button"
@click="savePackMetadata"
>
{{ $t('admin_dash.emoji.revert_meta') }}
</button>
</div>
</li>
</ul>
<ul class="setting-list"> <ul class="setting-list">
<h4> <h4>
{{ $t('admin_dash.emoji.files') }} {{ $t('admin_dash.emoji.files') }}
<ModifiedIndicator <ModifiedIndicator
v-if="pack"
:changed="$refs.emojiPopovers && $refs.emojiPopovers.some(p => p.isEdited)" :changed="$refs.emojiPopovers && $refs.emojiPopovers.some(p => p.isEdited)"
message-key="admin_dash.emoji.emoji_changed" message-key="admin_dash.emoji.emoji_changed"
/> />
</h4> </h4>
<div <div
v-if="pack"
class="emoji-list" class="emoji-list"
> >
<EmojiEditingPopover <EmojiEditingPopover
v-if="pack.remote === undefined" v-if="pack && pack.remote === undefined"
placement="bottom" placement="bottom"
new-upload new-upload
:title="$t('admin_dash.emoji.adding_new')" :title="$t('admin_dash.emoji.adding_new')"
@ -370,17 +374,24 @@
/> />
</template> </template>
</EmojiEditingPopover> </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"
@ -398,19 +409,15 @@
</ul> </ul>
</div> </div>
<h3>{{ $t('admin_dash.emoji.advanced') }}</h3> <h3>{{ $t('admin_dash.emoji.advanced') }}</h3>
<li <button
class="toolbar"
>
<button
class="button button-default btn" class="button button-default btn"
type="button" type="button"
@click="importFromFS" @click="importFromFS"
> >
<FAIcon icon="server" /> <FAIcon icon="server" />
{{ $t('admin_dash.emoji.importFS') }} {{ $t('admin_dash.emoji.importFS') }}
</button> </button>
</li>
</div> </div>
</div> </div>
</template> </template>