natty
/
misskey-awawa
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(client): use css modules

This commit is contained in:
syuilo 2023-01-14 14:57:48 +09:00
parent 2f06f2a6da
commit efbec444e8
1 changed files with 241 additions and 273 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

514
packages/frontend/src/components/MkPostForm.vue
View File

@ -1,66 +1,65 @@
<template> <template>
<div <div
class="gafaadew" :class="[$style.root, { [$style.modal]: modal, _popup: modal }]"
:class="{ modal, _popup: modal }"
@dragover.stop="onDragover" @dragover.stop="onDragover"
@dragenter="onDragenter" @dragenter="onDragenter"
@dragleave="onDragleave" @dragleave="onDragleave"
@drop.stop="onDrop" @drop.stop="onDrop"
> >
<header> <header :class="$style.header">
<button v-if="!fixed" class="cancel _button" @click="cancel"><i class="ti ti-x"></i></button> <button v-if="!fixed" :class="$style.cancel" class="_button" @click="cancel"><i class="ti ti-x"></i></button>
<button v-click-anime v-tooltip="i18n.ts.switchAccount" class="account _button" @click="openAccountMenu"> <button v-click-anime v-tooltip="i18n.ts.switchAccount" :class="$style.account" class="_button" @click="openAccountMenu">
<MkAvatar :user="postAccount ?? $i" class="avatar"/> <MkAvatar :user="postAccount ?? $i" :class="$style.avatar"/>
</button> </button>
<div class="right"> <div :class="$style.headerRight">
<span class="text-count" :class="{ over: textLength > maxTextLength }">{{ maxTextLength - textLength }}</span> <span :class="[$style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</span>
<span v-if="localOnly" class="local-only"><i class="ti ti-world-off"></i></span> <span v-if="localOnly" :class="$style.localOnly"><i class="ti ti-world-off"></i></span>
<button ref="visibilityButton" v-tooltip="i18n.ts.visibility" class="_button visibility" :disabled="channel != null" @click="setVisibility"> <button ref="visibilityButton" v-tooltip="i18n.ts.visibility" class="_button" :class="$style.visibility" :disabled="channel != null" @click="setVisibility">
<span v-if="visibility === 'public'"><i class="ti ti-world"></i></span> <span v-if="visibility === 'public'"><i class="ti ti-world"></i></span>
<span v-if="visibility === 'home'"><i class="ti ti-home"></i></span> <span v-if="visibility === 'home'"><i class="ti ti-home"></i></span>
<span v-if="visibility === 'followers'"><i class="ti ti-lock"></i></span> <span v-if="visibility === 'followers'"><i class="ti ti-lock"></i></span>
<span v-if="visibility === 'specified'"><i class="ti ti-mail"></i></span> <span v-if="visibility === 'specified'"><i class="ti ti-mail"></i></span>
</button> </button>
<button v-tooltip="i18n.ts.previewNoteText" class="_button preview" :class="{ active: showPreview }" @click="showPreview = !showPreview"><i class="ti ti-eye"></i></button> <button v-tooltip="i18n.ts.previewNoteText" class="_button" :class="[$style.previewButton, { [$style.previewButtonActive]: showPreview }]" @click="showPreview = !showPreview"><i class="ti ti-eye"></i></button>
<button v-click-anime class="submit _button" :class="{ posting }" :disabled="!canPost" data-cy-open-post-form-submit @click="post"> <button v-click-anime class="_button" :class="[$style.submit, { [$style.submitPosting]: posting }]" :disabled="!canPost" data-cy-open-post-form-submit @click="post">
<div class="inner"> <div :class="$style.submitInner">
<template v-if="posted"></template> <template v-if="posted"></template>
<template v-else-if="posting"><MkEllipsis/></template> <template v-else-if="posting"><MkEllipsis/></template>
<template v-else>{{ submitText }}</template> <template v-else>{{ submitText }}</template>
<i :class="posted ? 'ti ti-check' : reply ? 'ti ti-arrow-back-up' : renote ? 'ti ti-quote' : 'ti ti-send'"></i> <i style="margin-left: 6px;" :class="posted ? 'ti ti-check' : reply ? 'ti ti-arrow-back-up' : renote ? 'ti ti-quote' : 'ti ti-send'"></i>
</div> </div>
</button> </button>
</div> </div>
</header> </header>
<div class="form" :class="{ fixed }"> <div :class="[$style.form]">
<MkNoteSimple v-if="reply" class="preview" :note="reply"/> <MkNoteSimple v-if="reply" :class="$style.targetNote" :note="reply"/>
<MkNoteSimple v-if="renote" class="preview" :note="renote"/> <MkNoteSimple v-if="renote" :class="$style.targetNote" :note="renote"/>
<div v-if="quoteId" class="with-quote"><i class="ti ti-quote"></i> {{ i18n.ts.quoteAttached }}<button @click="quoteId = null"><i class="ti ti-x"></i></button></div> <div v-if="quoteId" :class="$style.withQuote"><i class="ti ti-quote"></i> {{ i18n.ts.quoteAttached }}<button @click="quoteId = null"><i class="ti ti-x"></i></button></div>
<div v-if="visibility === 'specified'" class="to-specified"> <div v-if="visibility === 'specified'" :class="$style.toSpecified">
<span style="margin-right: 8px;">{{ i18n.ts.recipient }}</span> <span style="margin-right: 8px;">{{ i18n.ts.recipient }}</span>
<div class="visibleUsers"> <div :class="$style.visibleUsers">
<span v-for="u in visibleUsers" :key="u.id"> <span v-for="u in visibleUsers" :key="u.id" :class="$style.visibleUser">
<MkAcct :user="u"/> <MkAcct :user="u"/>
<button class="_button" @click="removeVisibleUser(u)"><i class="ti ti-x"></i></button> <button class="_button" style="padding: 4px 8px;" @click="removeVisibleUser(u)"><i class="ti ti-x"></i></button>
</span> </span>
<button class="_buttonPrimary" @click="addVisibleUser"><i class="ti ti-plus ti-fw"></i></button> <button class="_buttonPrimary" style="padding: 4px; border-radius: 8px;" @click="addVisibleUser"><i class="ti ti-plus ti-fw"></i></button>
</div> </div>
</div> </div>
<MkInfo v-if="hasNotSpecifiedMentions" warn class="hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo> <MkInfo v-if="hasNotSpecifiedMentions" warn :class="$style.hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
<input v-show="useCw" ref="cwInputEl" v-model="cw" class="cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown"> <input v-show="useCw" ref="cwInputEl" v-model="cw" :class="$style.cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
<textarea ref="textareaEl" v-model="text" class="text" :class="{ withCw: useCw }" :disabled="posting || posted" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/> <textarea ref="textareaEl" v-model="text" :class="[$style.text, { [$style.withCw]: useCw }]" :disabled="posting || posted" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" class="hashtags" :placeholder="i18n.ts.hashtags" list="hashtags"> <input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" :class="$style.hashtags" :placeholder="i18n.ts.hashtags" list="hashtags">
<XPostFormAttaches v-model="files" class="attaches" @detach="detachFile" @change-sensitive="updateFileSensitive" @change-name="updateFileName"/> <XPostFormAttaches v-model="files" :class="$style.attaches" @detach="detachFile" @change-sensitive="updateFileSensitive" @change-name="updateFileName"/>
<MkPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/> <MkPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
<XNotePreview v-if="showPreview" class="preview" :text="text"/> <XNotePreview v-if="showPreview" :class="$style.preview" :text="text"/>
<footer> <footer :class="$style.footer">
<button v-tooltip="i18n.ts.attachFile" class="_button" @click="chooseFileFrom"><i class="ti ti-photo-plus"></i></button> <button v-tooltip="i18n.ts.attachFile" class="_button" :class="$style.footerButton" @click="chooseFileFrom"><i class="ti ti-photo-plus"></i></button>
<button v-tooltip="i18n.ts.poll" class="_button" :class="{ active: poll }" @click="togglePoll"><i class="ti ti-chart-arrows"></i></button> <button v-tooltip="i18n.ts.poll" class="_button" :class="[$style.footerButton, { [$style.footerButtonActive]: poll }]" @click="togglePoll"><i class="ti ti-chart-arrows"></i></button>
<button v-tooltip="i18n.ts.useCw" class="_button" :class="{ active: useCw }" @click="useCw = !useCw"><i class="ti ti-eye-off"></i></button> <button v-tooltip="i18n.ts.useCw" class="_button" :class="[$style.footerButton, { [$style.footerButtonActive]: useCw }]" @click="useCw = !useCw"><i class="ti ti-eye-off"></i></button>
<button v-tooltip="i18n.ts.mention" class="_button" @click="insertMention"><i class="ti ti-at"></i></button> <button v-tooltip="i18n.ts.mention" class="_button" :class="$style.footerButton" @click="insertMention"><i class="ti ti-at"></i></button>
<button v-tooltip="i18n.ts.hashtags" class="_button" :class="{ active: withHashtags }" @click="withHashtags = !withHashtags"><i class="ti ti-hash"></i></button> <button v-tooltip="i18n.ts.hashtags" class="_button" :class="[$style.footerButton, { [$style.footerButtonActive]: withHashtags }]" @click="withHashtags = !withHashtags"><i class="ti ti-hash"></i></button>
<button v-tooltip="i18n.ts.emoji" class="_button" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button> <button v-tooltip="i18n.ts.emoji" class="_button" :class="$style.footerButton" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button>
<button v-if="postFormActions.length > 0" v-tooltip="i18n.ts.plugin" class="_button" @click="showActions"><i class="ti ti-plug"></i></button> <button v-if="postFormActions.length > 0" v-tooltip="i18n.ts.plugin" class="_button" :class="$style.footerButton" @click="showActions"><i class="ti ti-plug"></i></button>
</footer> </footer>
<datalist id="hashtags"> <datalist id="hashtags">
<option v-for="hashtag in recentHashtags" :key="hashtag" :value="hashtag"/> <option v-for="hashtag in recentHashtags" :key="hashtag" :value="hashtag"/>
@ -742,306 +741,275 @@ defineExpose({
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.gafaadew { .root {
position: relative; position: relative;
&.modal { &.modal {
width: 100%; width: 100%;
max-width: 520px; max-width: 520px;
} }
}
> header { .header {
z-index: 1000; z-index: 1000;
height: 66px; height: 66px;
}
> .cancel { .cancel {
padding: 0; padding: 0;
font-size: 1em; font-size: 1em;
width: 64px; width: 64px;
line-height: 66px; line-height: 66px;
} }
> .account { .account {
height: 100%; height: 100%;
aspect-ratio: 1/1; aspect-ratio: 1/1;
display: inline-flex; display: inline-flex;
vertical-align: bottom; vertical-align: bottom;
}
> .avatar { .avatar {
width: 28px; width: 28px;
height: 28px; height: 28px;
margin: auto; margin: auto;
} }
}
> .right { .headerRight {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
}
> .text-count { .textCount {
opacity: 0.7; opacity: 0.7;
line-height: 66px; line-height: 66px;
} }
> .visibility { .visibility {
height: 34px; height: 34px;
width: 34px; width: 34px;
margin: 0 0 0 8px; margin: 0 0 0 8px;
& + .localOnly { & + .localOnly {
margin-left: 0 !important; margin-left: 0 !important;
} }
} }
> .local-only { .localOnly {
margin: 0 0 0 12px; margin: 0 0 0 12px;
opacity: 0.7; opacity: 0.7;
} }
> .preview { .previewButton {
display: inline-block; display: inline-block;
padding: 0; padding: 0;
margin: 0 8px 0 0; margin: 0 8px 0 0;
font-size: 16px; font-size: 16px;
width: 34px; width: 34px;
height: 34px; height: 34px;
border-radius: 6px; border-radius: 6px;
&:hover { &:hover {
background: var(--X5); background: var(--X5);
} }
&.active { &.previewButtonActive {
color: var(--accent); color: var(--accent);
} }
} }
> .submit { .submit {
margin: 16px 16px 16px 0; margin: 16px 16px 16px 0;
vertical-align: bottom; vertical-align: bottom;
&:disabled { &:disabled {
opacity: 0.7; opacity: 0.7;
} }
&.posting { &.posting {
cursor: wait; cursor: wait;
} }
&:not(:disabled):hover { &:not(:disabled):hover {
> .inner { > .inner {
background: linear-gradient(90deg, var(--X8), var(--X8)); background: linear-gradient(90deg, var(--X8), var(--X8));
}
}
&:not(:disabled):active {
> .inner {
background: linear-gradient(90deg, var(--X8), var(--X8));
}
}
> .inner {
padding: 0 12px;
line-height: 34px;
font-weight: bold;
border-radius: 4px;
font-size: 0.9em;
min-width: 90px;
box-sizing: border-box;
color: var(--fgOnAccent);
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
> i {
margin-left: 6px;
}
}
}
} }
} }
> .form { &:not(:disabled):active {
> .preview { > .inner {
padding: 16px; background: linear-gradient(90deg, var(--X8), var(--X8));
} }
}
}
> .with-quote { .submitInner {
margin: 0 0 8px 0; padding: 0 12px;
color: var(--accent); line-height: 34px;
font-weight: bold;
border-radius: 4px;
font-size: 0.9em;
min-width: 90px;
box-sizing: border-box;
color: var(--fgOnAccent);
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
}
> button { .form {
padding: 4px 8px; }
color: var(--accentAlpha04);
&:hover { .preview {
color: var(--accentAlpha06); padding: 16px 20px 0 20px;
} }
&:active { .targetNote {
color: var(--accentDarken30); padding: 0 20px 16px 20px;
} }
}
}
> .to-specified { .withQuote {
padding: 6px 24px; margin: 0 0 8px 0;
margin-bottom: 8px; color: var(--accent);
overflow: auto; }
white-space: nowrap;
> .visibleUsers { .toSpecified {
display: inline; padding: 6px 24px;
top: -1px; margin-bottom: 8px;
font-size: 14px; overflow: auto;
white-space: nowrap;
}
> button { .visibleUsers {
padding: 4px; display: inline;
border-radius: 8px; top: -1px;
} font-size: 14px;
}
> span { .visibleUser {
margin-right: 14px; margin-right: 14px;
padding: 8px 0 8px 8px; padding: 8px 0 8px 8px;
border-radius: 8px; border-radius: 8px;
background: var(--X4); background: var(--X4);
}
> button { .hasNotSpecifiedMentions {
padding: 4px 8px; margin: 0 20px 16px 20px;
} }
}
}
}
> .hasNotSpecifiedMentions { .cw,
margin: 0 20px 16px 20px; .hashtags,
} .text {
display: block;
box-sizing: border-box;
padding: 0 24px;
margin: 0;
width: 100%;
font-size: 16px;
border: none;
border-radius: 0;
background: transparent;
color: var(--fg);
font-family: inherit;
> .cw, &:focus {
> .hashtags, outline: none;
> .text { }
display: block;
box-sizing: border-box;
padding: 0 24px;
margin: 0;
width: 100%;
font-size: 16px;
border: none;
border-radius: 0;
background: transparent;
color: var(--fg);
font-family: inherit;
&:focus { &:disabled {
outline: none; opacity: 0.5;
} }
}
&:disabled { .cw {
opacity: 0.5; z-index: 1;
} padding-bottom: 8px;
} border-bottom: solid 0.5px var(--divider);
}
> .cw { .hashtags {
z-index: 1; z-index: 1;
padding-bottom: 8px; padding-top: 8px;
border-bottom: solid 0.5px var(--divider); padding-bottom: 8px;
} border-top: solid 0.5px var(--divider);
}
> .hashtags { .text {
z-index: 1; max-width: 100%;
padding-top: 8px; min-width: 100%;
padding-bottom: 8px; min-height: 90px;
border-top: solid 0.5px var(--divider);
}
> .text { &.withCw {
max-width: 100%; padding-top: 8px;
min-width: 100%; }
min-height: 90px; }
&.withCw { .footer {
padding-top: 8px; padding: 0 16px 16px 16px;
} }
}
> footer { .footerButton {
padding: 0 16px 16px 16px; display: inline-block;
padding: 0;
margin: 0;
font-size: 1em;
width: 46px;
height: 46px;
border-radius: 6px;
> button { &:hover {
display: inline-block; background: var(--X5);
padding: 0; }
margin: 0;
font-size: 1em;
width: 46px;
height: 46px;
border-radius: 6px;
&:hover { &.footerButtonActive {
background: var(--X5); color: var(--accent);
}
&.active {
color: var(--accent);
}
}
}
} }
} }
@container (max-width: 500px) { @container (max-width: 500px) {
.gafaadew { .header {
> header { height: 50px;
height: 50px;
> .cancel { > .cancel {
width: 50px; width: 50px;
line-height: 50px;
}
> .headerRight {
> .textCount {
line-height: 50px; line-height: 50px;
} }
> .right { > .submit {
> .text-count { margin: 8px;
line-height: 50px;
}
> .submit {
margin: 8px;
}
} }
} }
}
> .form { .toSpecified {
> .to-specified { padding: 6px 16px;
padding: 6px 16px; }
}
> .cw, .cw,
> .hashtags, .hashtags,
> .text { .text {
padding: 0 16px; padding: 0 16px;
} }
> .text { .text {
min-height: 80px; min-height: 80px;
} }
> footer { .footer {
padding: 0 8px 8px 8px; padding: 0 8px 8px 8px;
}
}
} }
} }
@container (max-width: 310px) { @container (max-width: 310px) {
.gafaadew { .footerButton {
> .form { font-size: 14px;
> footer { width: 44px;
> button { height: 44px;
font-size: 14px;
width: 44px;
height: 44px;
}
}
}
} }
} }
</style> </style>