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

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

@ -136,40 +136,6 @@
<script src="./font_control.js"></script>
<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 {
margin: 0.5em 1em;
min-width: 10em;

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

@ -12,6 +12,7 @@
display: flex;
flex: 1 0 auto;
justify-content: end;
align-items: end;
&:not(.btn-group) {
gap: 0.5em;
@ -27,6 +28,10 @@
padding: 0.5em;
font-size: 1rem;
}
.popover-wrapper {
display: flex;
}
}
.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')"
>
<button
class="button button-default btn emoji-tab-popover-button"
class="button button-default emoji-tab-popover-button"
type="button"
@click="listRemotePacks"
>
@ -112,11 +112,11 @@
</Popover>
</span>
</h3>
<div class="setting-list">
<div class="setting-section">
<h4 class="toolbar">
{{ $t('admin_dash.emoji.edit_pack') }}
</h4>
<div class="selector-buttons setting-list">
<div class="selector-buttons">
<button
:disabled="!pack || pack.remote !== undefined"
class="button button-default btn"
@ -254,73 +254,98 @@
</h5>
<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
class="setting-item"
:class="{ ['-disabled']: !pack || pack.remote !== undefined }"
>
<span class="setting-label">
<ModifiedIndicator
:changed="metaEdited('description')"
message-key="admin_dash.emoji.metadata_changed"
/>
{{ $t('admin_dash.emoji.description') }}
</span>
<div>
<textarea
v-model="packMeta.description"
:disabled="!pack || pack.remote !== undefined"
class="bio resize-height input setting-control"
/>
</div>
</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"
/>
<label
class="setting-item"
:class="{ ['-disabled']: !pack || pack.remote !== undefined }"
>
<span class="setting-label">
<ModifiedIndicator
:changed="metaEdited('homepage')"
message-key="admin_dash.emoji.metadata_changed"
/>
{{ $t('admin_dash.emoji.homepage') }}
</span>
<input
v-model="packMeta.homepage"
class="emoji-info-input input"
class="emoji-info-input input setting-control"
: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"
/>
<label
class="setting-item"
:class="{ ['-disabled']: !pack || pack.remote !== undefined }"
>
<span class="setting-label">
<ModifiedIndicator
:changed="metaEdited('fallback-src')"
message-key="admin_dash.emoji.metadata_changed"
/>
{{ $t('admin_dash.emoji.fallback_src') }}
</span>
<input
v-model="packMeta['fallback-src']"
class="emoji-info-input input"
class="emoji-info-input input setting-control"
:disabled="!pack || pack.remote !== undefined"
>
</label>
</li>
<li>
<label :class="{ ['-disabled']: !pack || pack.remote !== undefined }">
{{ $t('admin_dash.emoji.fallback_sha256') }}
<label
class="setting-item"
:class="{ ['-disabled']: !pack || pack.remote !== undefined }"
>
<span class="setting-label">
{{ $t('admin_dash.emoji.fallback_sha256') }}
</span>
<input
v-model="packMeta['fallback-src-sha256']"
:disabled="!pack || pack.remote !== undefined"
class="emoji-info-input input"
class="emoji-info-input input setting-control"
>
</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="setting-item">
<Checkbox
v-model="packMeta['share-files']"
:disabled="!pack || pack.remote !== undefined"
class="setting-label setting-control"
>
<ModifiedIndicator
:changed="metaEdited('share-files')"
message-key="admin_dash.emoji.metadata_changed"
/>
{{ $t('admin_dash.emoji.share') }}
</Checkbox>
</div>
</li>
<li>
<div class="meta-buttons">
<button
v-if="pack && pack.remote === undefined"

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

@ -43,30 +43,3 @@
</template>
<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 {
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 {