80 lines
1.8 KiB
HTML
80 lines
1.8 KiB
HTML
{#if media.length}
|
|
<div class="compose-media-sensitive">
|
|
<label>
|
|
<input type="checkbox" bind:checked="rawChecked" {disabled} />
|
|
<span class="{disabled ? 'compose-sensitive-span-disabled' : ''}">
|
|
{intl.markAsSensitive}
|
|
</span>
|
|
</label>
|
|
</div>
|
|
{/if}
|
|
<style>
|
|
.compose-media-sensitive {
|
|
grid-area: sensitive;
|
|
margin-top: 10px;
|
|
}
|
|
label {
|
|
padding: 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
span {
|
|
margin-left: 5px;
|
|
}
|
|
.compose-sensitive-span-disabled {
|
|
color: var(--deemphasized-text-color);
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.compose-media-sensitive {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 320px) {
|
|
span {
|
|
font-size: 0.9em;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
<script>
|
|
import { observe } from 'svelte-extras'
|
|
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
|
|
|
|
export default {
|
|
oncreate () {
|
|
this.setupSyncToStore()
|
|
this.setupSyncFromStore()
|
|
},
|
|
data: () => ({
|
|
rawChecked: false
|
|
}),
|
|
computed: {
|
|
disabled: ({ contentWarning, contentWarningShown }) => contentWarning && contentWarningShown
|
|
},
|
|
methods: {
|
|
observe,
|
|
setupSyncToStore () {
|
|
this.observe('rawChecked', () => {
|
|
scheduleIdleTask(() => {
|
|
const { realm } = this.get()
|
|
const { rawChecked } = this.get()
|
|
const sensitive = this.store.getComposeData(realm, 'sensitive')
|
|
if (sensitive !== rawChecked) {
|
|
this.store.setComposeData(realm, { sensitive: rawChecked })
|
|
this.store.save()
|
|
}
|
|
})
|
|
}, { init: false })
|
|
},
|
|
setupSyncFromStore () {
|
|
this.observe('sensitive', sensitive => {
|
|
this.set({ rawChecked: sensitive })
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|