oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Activity

refactor

Browse source
This commit is contained in:
syuilo 2023-05-27 11:35:26 +09:00
parent 98aef974df
commit a879607479
9 changed files with 206 additions and 283 deletions
Download patch file Download diff file Expand all files Collapse all files

167
packages/frontend/src/components/MkTextarea.vue
View file

@ -1,12 +1,12 @@
<template>
<div class="adhpbeos">
<div class="label" @click="focus"><slot name="label"></slot></div>
<div class="input" :class="{ disabled, focused, tall, pre }">
<div>
<div :class="$style.label" @click="focus"><slot name="label"></slot></div>
<div :class="{ [$style.disabled]: disabled, [$style.focused]: focused, [$style.tall]: tall, [$style.pre]: pre }" style="position: relative;">
<textarea
ref="inputEl"
v-model="v"
v-adaptive-border
:class="{ code, _monospace: code }"
:class="[$style.textarea, { [$style.code]: code, _monospace: code }]"
:disabled="disabled"
:required="required"
:readonly="readonly"
@ -20,9 +20,9 @@
@input="onInput"
></textarea>
</div>
<div class="caption"><slot name="caption"></slot></div>
<div :class="$style.caption"><slot name="caption"></slot></div>
<MkButton v-if="manualSave && changed" primary class="save" @click="updated"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
<MkButton v-if="manualSave && changed" primary :class="$style.save" @click="updated"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
</div>
</template>
@ -111,87 +111,82 @@ onMounted(() => {
});
</script>
<style lang="scss" scoped>
.adhpbeos {
> .label {
font-size: 0.85em;
padding: 0 0 8px 0;
user-select: none;
<style lang="scss" module>
.label {
font-size: 0.85em;
padding: 0 0 8px 0;
user-select: none;
&:empty {
display: none;
}
}
> .caption {
font-size: 0.85em;
padding: 8px 0 0 0;
color: var(--fgTransparentWeak);
&:empty {
display: none;
}
}
> .input {
position: relative;
> textarea {
appearance: none;
-webkit-appearance: none;
display: block;
width: 100%;
min-width: 100%;
max-width: 100%;
min-height: 130px;
margin: 0;
padding: 12px;
font: inherit;
font-weight: normal;
font-size: 1em;
color: var(--fg);
background: var(--panel);
border: solid 1px var(--panel);
border-radius: 6px;
outline: none;
box-shadow: none;
box-sizing: border-box;
transition: border-color 0.1s ease-out;
&:hover {
border-color: var(--inputBorderHover) !important;
}
}
&.focused {
> textarea {
border-color: var(--accent) !important;
}
}
&.disabled {
opacity: 0.7;
&, * {
cursor: not-allowed !important;
}
}
&.tall {
> textarea {
min-height: 200px;
}
}
&.pre {
> textarea {
white-space: pre;
}
}
}
> .save {
margin: 8px 0 0 0;
&:empty {
display: none;
}
}
.caption {
font-size: 0.85em;
padding: 8px 0 0 0;
color: var(--fgTransparentWeak);
&:empty {
display: none;
}
}
.textarea {
appearance: none;
-webkit-appearance: none;
display: block;
width: 100%;
min-width: 100%;
max-width: 100%;
min-height: 130px;
margin: 0;
padding: 12px;
font: inherit;
font-weight: normal;
font-size: 1em;
color: var(--fg);
background: var(--panel);
border: solid 1px var(--panel);
border-radius: 6px;
outline: none;
box-shadow: none;
box-sizing: border-box;
transition: border-color 0.1s ease-out;
&:hover {
border-color: var(--inputBorderHover) !important;
}
}
.focused {
> .textarea {
border-color: var(--accent) !important;
}
}
.disabled {
opacity: 0.7;
cursor: not-allowed !important;
> .textarea {
cursor: not-allowed !important;
}
}
.tall {
> .textarea {
min-height: 200px;
}
}
.pre {
> .textarea {
white-space: pre;
}
}
.save {
margin: 8px 0 0 0;
}
</style>