misskey/src/client/widgets/memo.vue
syuilo f6154dc0af
v12 (#5712)
Co-authored-by: MeiMei <30769358+mei23@users.noreply.github.com>
Co-authored-by: Satsuki Yanagi <17376330+u1-liquid@users.noreply.github.com>
2020-01-30 04:37:25 +09:00

120 lines
2.1 KiB
Vue

<template>
<div>
<mk-container :show-header="!props.compact">
<template #header><fa :icon="faStickyNote"/>{{ $t('_widgets.memo') }}</template>
<div class="otgbylcu">
<textarea v-model="text" :placeholder="$t('placeholder')" @input="onChange"></textarea>
<button @click="saveMemo" :disabled="!changed">{{ $t('save') }}</button>
</div>
</mk-container>
</div>
</template>
<script lang="ts">
import { faStickyNote } from '@fortawesome/free-solid-svg-icons';
import MkContainer from '../components/ui/container.vue';
import define from './define';
import i18n from '../i18n';
export default define({
name: 'memo',
props: () => ({
compact: false
})
}).extend({
i18n,
components: {
MkContainer
},
data() {
return {
text: null,
changed: false,
timeoutId: null,
faStickyNote
};
},
created() {
this.text = this.$store.state.settings.memo;
this.$watch('$store.state.settings.memo', text => {
this.text = text;
});
},
methods: {
func() {
this.props.compact = !this.props.compact;
this.save();
},
onChange() {
this.changed = true;
clearTimeout(this.timeoutId);
this.timeoutId = setTimeout(this.saveMemo, 1000);
},
saveMemo() {
this.$store.dispatch('settings/set', {
key: 'memo',
value: this.text
});
this.changed = false;
}
}
});
</script>
<style lang="scss" scoped>
.otgbylcu {
padding-bottom: 28px + 16px;
> textarea {
display: block;
width: 100%;
max-width: 100%;
min-width: 100%;
padding: 16px;
color: var(--inputText);
background: var(--face);
border: none;
border-bottom: solid var(--lineWidth) var(--faceDivider);
border-radius: 0;
}
> button {
display: block;
position: absolute;
bottom: 8px;
right: 8px;
margin: 0;
padding: 0 10px;
height: 28px;
color: #fff;
background: var(--accent) !important;
outline: none;
border: none;
border-radius: 4px;
transition: background 0.1s ease;
cursor: pointer;
&:hover {
background: var(--accentLighten10) !important;
}
&:active {
background: var(--accentDarken) !important;
transition: background 0s ease;
}
&:disabled {
opacity: 0.7;
cursor: default;
}
}
}
</style>