profxadke/misskey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

🎨

Browse source
This commit is contained in:
tamaina 2022-01-28 07:07:22 +09:00
parent f660782a44
commit 60ad28cbc7
2 changed files with 67 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

116
packages/client/src/pages/messaging/messaging-room.form.vue
View file

@ -11,12 +11,16 @@
@compositionupdate="onCompositionUpdate" @compositionupdate="onCompositionUpdate"
@paste="onPaste" @paste="onPaste"
></textarea> ></textarea>
<div v-if="file" class="file" @click="file = null">{{ file.name }}</div> <footer>
<button class="send _button" :disabled="!canSend || sending" :title="i18n.locale.send" @click="send"> <div v-if="file" class="file" @click="file = null">{{ file.name }}</div>
<template v-if="!sending"><i class="fas fa-paper-plane"></i></template><template v-if="sending"><i class="fas fa-spinner fa-pulse fa-fw"></i></template> <div class="buttons">
</button> <button class="_button" @click="chooseFile"><i class="fas fa-photo-video"></i></button>
<button class="_button" @click="chooseFile"><i class="fas fa-photo-video"></i></button> <button class="_button" @click="insertEmoji"><i class="fas fa-laugh-squint"></i></button>
<button class="_button" @click="insertEmoji"><i class="fas fa-laugh-squint"></i></button> <button class="send _button" :disabled="!canSend || sending" :title="i18n.locale.send" @click="send">
<template v-if="!sending"><i class="fas fa-paper-plane"></i></template><template v-if="sending"><i class="fas fa-spinner fa-pulse fa-fw"></i></template>
</button>
</div>
</footer>
<input ref="fileEl" type="file" @change="onChangeFile"/> <input ref="fileEl" type="file" @change="onChangeFile"/>
</div> </div>
</template> </template>
@ -55,21 +59,6 @@ let canSend = $computed(() => (text != null && text != '') || file != null);
watch([$$(text), $$(file)], saveDraft); watch([$$(text), $$(file)], saveDraft);
onMounted(() => {
autosize(textEl);
// TODO: detach when unmount
// TODO
//new Autocomplete(textEl, this, { model: 'text' });
// 書きかけの投稿を復元
const draft = JSON.parse(localStorage.getItem('message_drafts') || '{}')[draftKey];
if (draft) {
text = draft.data.text;
file = draft.data.file;
}
});
async function onPaste(e: ClipboardEvent) { async function onPaste(e: ClipboardEvent) {
if (!e.clipboardData) return; if (!e.clipboardData) return;
@ -207,6 +196,21 @@ async function insertEmoji(ev: MouseEvent) {
os.openEmojiPicker(ev.currentTarget || ev.target, {}, textEl); os.openEmojiPicker(ev.currentTarget || ev.target, {}, textEl);
} }
onMounted(() => {
autosize(textEl);
// TODO: detach when unmount
// TODO
//new Autocomplete(textEl, this, { model: 'text' });
// 書きかけの投稿を復元
const draft = JSON.parse(localStorage.getItem('message_drafts') || '{}')[draftKey];
if (draft) {
text = draft.data.text;
file = draft.data.file;
}
});
defineExpose({ defineExpose({
file, file,
upload, upload,
@ -223,7 +227,7 @@ defineExpose({
width: 100%; width: 100%;
min-width: 100%; min-width: 100%;
max-width: 100%; max-width: 100%;
height: 80px; min-height: 80px;
margin: 0; margin: 0;
padding: 16px 16px 0 16px; padding: 16px 16px 0 16px;
resize: none; resize: none;
@ -238,26 +242,16 @@ defineExpose({
color: var(--fg); color: var(--fg);
} }
> .file { footer {
padding: 8px; position: sticky;
color: var(--fg);
background: transparent;
cursor: pointer;
}
> .send {
position: absolute;
bottom: 0; bottom: 0;
right: 0; background: var(--panel);
margin: 0;
padding: 16px;
font-size: 1em;
transition: color 0.1s ease;
color: var(--accent);
&:active { > .file {
color: var(--accentDarken); padding: 8px;
transition: color 0s ease; color: var(--fg);
background: transparent;
cursor: pointer;
} }
} }
@ -309,21 +303,39 @@ defineExpose({
} }
} }
._button { .buttons {
margin: 0; display: flex;
padding: 16px;
font-size: 1em;
font-weight: normal;
text-decoration: none;
transition: color 0.1s ease;
&:hover { ._button {
color: var(--accent); margin: 0;
padding: 16px;
font-size: 1em;
font-weight: normal;
text-decoration: none;
transition: color 0.1s ease;
&:hover {
color: var(--accent);
}
&:active {
color: var(--accentDarken);
transition: color 0s ease;
}
} }
&:active { > .send {
color: var(--accentDarken); margin-left: auto;
transition: color 0s ease; color: var(--accent);
&:hover {
color: var(--accentLighten);
}
&:active {
color: var(--accentDarken);
transition: color 0s ease;
}
} }
} }

4
packages/client/src/pages/messaging/messaging-room.vue
View file

@ -326,7 +326,7 @@ defineExpose({
width: 100%; width: 100%;
position: sticky; position: sticky;
z-index: 2; z-index: 2;
bottom: 8px; bottom: 0;
padding-top: 8px; padding-top: 8px;
@media (max-width: 500px) { @media (max-width: 500px) {
@ -373,6 +373,8 @@ defineExpose({
} }
> .form { > .form {
max-height: 12em;
overflow-y: scroll;
border-top: solid 0.5px var(--divider); border-top: solid 0.5px var(--divider);
} }
} }