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

fix emoji form & eliminate copypasta

Browse source
This commit is contained in:
Henry Jameson 2025-12-11 13:35:41 +02:00
commit c085acd2dd
6 changed files with 97 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/App.scss
View file

@ -381,6 +381,7 @@ nav {
font-size: 1em; font-size: 1em;
font-family: sans-serif; font-family: sans-serif;
font-family: var(--font); font-family: var(--font);
height: 2em;
&.-transparent { &.-transparent {
backdrop-filter: blur(0.125em) contrast(60%); backdrop-filter: blur(0.125em) contrast(60%);
@ -705,9 +706,10 @@ option {
display: inline-flex; display: inline-flex;
vertical-align: middle; vertical-align: middle;
min-height: 2em; min-height: 2em;
align-items: baseline;
.Select select { .input {
line-height: 1; height: 2em;
} }
> *, > *,

34
src/components/font_control/font_control.vue
View file

@ -136,40 +136,6 @@
<script src="./font_control.js"></script> <script src="./font_control.js"></script>
<style lang="scss"> <style lang="scss">
// Copy-paste of BooleanSetting
.font-control {
display: grid;
grid-template-columns: subgrid;
.checkbox {
display: grid;
grid-template-columns: subgrid;
}
.label {
grid-area: label;
text-align: right;
}
.-mobile & {
.font-input {
display: block;
}
.font-selector {
margin-top: 0.5em;
}
.label {
text-align: left;
}
}
.checkbox-indicator {
grid-area: control;
}
}
.invalid-tooltip { .invalid-tooltip {
margin: 0.5em 1em; margin: 0.5em 1em;
min-width: 10em; min-width: 10em;

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

@ -12,6 +12,7 @@
display: flex; display: flex;
flex: 1 0 auto; flex: 1 0 auto;
justify-content: end; justify-content: end;
align-items: end;
&:not(.btn-group) { &:not(.btn-group) {
gap: 0.5em; gap: 0.5em;
@ -27,6 +28,10 @@
padding: 0.5em; padding: 0.5em;
font-size: 1rem; font-size: 1rem;
} }
.popover-wrapper {
display: flex;
}
} }
.selector-buttons, .selector-buttons,

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

@ -43,7 +43,7 @@
:placeholder="$t('admin_dash.emoji.remote_pack_instance')" :placeholder="$t('admin_dash.emoji.remote_pack_instance')"
> >
<button <button
class="button button-default btn emoji-tab-popover-button" class="button button-default emoji-tab-popover-button"
type="button" type="button"
@click="listRemotePacks" @click="listRemotePacks"
> >
@ -112,11 +112,11 @@
</Popover> </Popover>
</span> </span>
</h3> </h3>
<div class="setting-list"> <div class="setting-section">
<h4 class="toolbar"> <h4 class="toolbar">
{{ $t('admin_dash.emoji.edit_pack') }} {{ $t('admin_dash.emoji.edit_pack') }}
</h4> </h4>
<div class="selector-buttons setting-list"> <div class="selector-buttons">
<button <button
:disabled="!pack || pack.remote !== undefined" :disabled="!pack || pack.remote !== undefined"
class="button button-default btn" class="button button-default btn"
@ -254,73 +254,98 @@
</h5> </h5>
<ul class="setting-list"> <ul class="setting-list">
<li> <li>
<label :class="{ ['-disabled']: !pack || pack.remote !== undefined }"> <label
{{ $t('admin_dash.emoji.description') }} class="setting-item"
<ModifiedIndicator :class="{ ['-disabled']: !pack || pack.remote !== undefined }"
:changed="metaEdited('description')" >
message-key="admin_dash.emoji.metadata_changed" <span class="setting-label">
/> <ModifiedIndicator
:changed="metaEdited('description')"
<textarea message-key="admin_dash.emoji.metadata_changed"
v-model="packMeta.description" />
:disabled="!pack || pack.remote !== undefined" {{ $t('admin_dash.emoji.description') }}
class="bio resize-height input" </span>
/> <div>
<textarea
v-model="packMeta.description"
:disabled="!pack || pack.remote !== undefined"
class="bio resize-height input setting-control"
/>
</div>
</label> </label>
</li> </li>
<li> <li>
<label :class="{ ['-disabled']: !pack || pack.remote !== undefined }"> <label
{{ $t('admin_dash.emoji.homepage') }} class="setting-item"
<ModifiedIndicator :class="{ ['-disabled']: !pack || pack.remote !== undefined }"
:changed="metaEdited('homepage')" >
message-key="admin_dash.emoji.metadata_changed" <span class="setting-label">
/> <ModifiedIndicator
:changed="metaEdited('homepage')"
message-key="admin_dash.emoji.metadata_changed"
/>
{{ $t('admin_dash.emoji.homepage') }}
</span>
<input <input
v-model="packMeta.homepage" v-model="packMeta.homepage"
class="emoji-info-input input" class="emoji-info-input input setting-control"
:disabled="!pack || pack.remote !== undefined" :disabled="!pack || pack.remote !== undefined"
> >
</label> </label>
</li> </li>
<li> <li>
<label :class="{ ['-disabled']: !pack || pack.remote !== undefined }"> <label
{{ $t('admin_dash.emoji.fallback_src') }} class="setting-item"
<ModifiedIndicator :class="{ ['-disabled']: !pack || pack.remote !== undefined }"
:changed="metaEdited('fallback-src')" >
message-key="admin_dash.emoji.metadata_changed" <span class="setting-label">
/> <ModifiedIndicator
:changed="metaEdited('fallback-src')"
message-key="admin_dash.emoji.metadata_changed"
/>
{{ $t('admin_dash.emoji.fallback_src') }}
</span>
<input <input
v-model="packMeta['fallback-src']" v-model="packMeta['fallback-src']"
class="emoji-info-input input" class="emoji-info-input input setting-control"
:disabled="!pack || pack.remote !== undefined" :disabled="!pack || pack.remote !== undefined"
> >
</label> </label>
</li> </li>
<li> <li>
<label :class="{ ['-disabled']: !pack || pack.remote !== undefined }"> <label
{{ $t('admin_dash.emoji.fallback_sha256') }} class="setting-item"
:class="{ ['-disabled']: !pack || pack.remote !== undefined }"
>
<span class="setting-label">
{{ $t('admin_dash.emoji.fallback_sha256') }}
</span>
<input <input
v-model="packMeta['fallback-src-sha256']" v-model="packMeta['fallback-src-sha256']"
:disabled="!pack || pack.remote !== undefined" :disabled="!pack || pack.remote !== undefined"
class="emoji-info-input input" class="emoji-info-input input setting-control"
> >
</label> </label>
</li> </li>
<li> <li>
<Checkbox <div class="setting-item">
v-model="packMeta['share-files']" <Checkbox
:disabled="!pack || pack.remote !== undefined" v-model="packMeta['share-files']"
> :disabled="!pack || pack.remote !== undefined"
{{ $t('admin_dash.emoji.share') }} class="setting-label setting-control"
</Checkbox> >
<ModifiedIndicator
<ModifiedIndicator :changed="metaEdited('share-files')"
:changed="metaEdited('share-files')" message-key="admin_dash.emoji.metadata_changed"
message-key="admin_dash.emoji.metadata_changed" />
/> {{ $t('admin_dash.emoji.share') }}
</Checkbox>
</div>
</li>
<li>
<div class="meta-buttons"> <div class="meta-buttons">
<button <button
v-if="pack && pack.remote === undefined" v-if="pack && pack.remote === undefined"

27
src/components/settings_modal/helpers/boolean_setting.vue
View file

@ -43,30 +43,3 @@
</template> </template>
<script src="./boolean_setting.js"></script> <script src="./boolean_setting.js"></script>
<style lang="scss">
.BooleanSetting {
display: grid;
grid-template-columns: subgrid;
.checkbox {
display: grid;
grid-template-columns: subgrid;
}
.label {
grid-area: label;
text-align: right;
}
.-mobile & {
.label {
text-align: left;
}
}
.checkbox-indicator {
grid-area: control;
}
}
</style>

20
src/components/settings_modal/settings_modal.scss
View file

@ -79,6 +79,26 @@
.setting-control { .setting-control {
grid-area: control; grid-area: control;
&.checkbox {
display: grid;
grid-template-columns: subgrid;
.label {
grid-area: label;
text-align: right;
}
.checkbox-indicator {
grid-area: control;
}
.-mobile & {
.label {
text-align: left;
}
}
}
} }
.setting-control.setting-label { .setting-control.setting-label {