heartles
/
egirlskey
1
0
Fork 0
Code Issues 1 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

242
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,50 +741,53 @@ 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;
@ -793,14 +795,14 @@ defineExpose({
& + .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;
@ -813,12 +815,12 @@ defineExpose({
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;
@ -841,8 +843,9 @@ defineExpose({
background: linear-gradient(90deg, var(--X8), var(--X8)); background: linear-gradient(90deg, var(--X8), var(--X8));
} }
} }
}
> .inner { .submitInner {
padding: 0 12px; padding: 0 12px;
line-height: 34px; line-height: 34px;
font-weight: bold; font-weight: bold;
@ -852,74 +855,51 @@ defineExpose({
box-sizing: border-box; box-sizing: border-box;
color: var(--fgOnAccent); color: var(--fgOnAccent);
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB)); background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
}
> i { .form {
margin-left: 6px; }
}
}
}
}
}
> .form { .preview {
> .preview { padding: 16px 20px 0 20px;
padding: 16px; }
}
> .with-quote { .targetNote {
padding: 0 20px 16px 20px;
}
.withQuote {
margin: 0 0 8px 0; margin: 0 0 8px 0;
color: var(--accent); color: var(--accent);
}
> button { .toSpecified {
padding: 4px 8px;
color: var(--accentAlpha04);
&:hover {
color: var(--accentAlpha06);
}
&:active {
color: var(--accentDarken30);
}
}
}
> .to-specified {
padding: 6px 24px; padding: 6px 24px;
margin-bottom: 8px; margin-bottom: 8px;
overflow: auto; overflow: auto;
white-space: nowrap; white-space: nowrap;
}
> .visibleUsers { .visibleUsers {
display: inline; display: inline;
top: -1px; top: -1px;
font-size: 14px; font-size: 14px;
}
> button { .visibleUser {
padding: 4px;
border-radius: 8px;
}
> span {
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;
}
}
}
}
> .hasNotSpecifiedMentions {
margin: 0 20px 16px 20px; margin: 0 20px 16px 20px;
} }
> .cw, .cw,
> .hashtags, .hashtags,
> .text { .text {
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
padding: 0 24px; padding: 0 24px;
@ -939,22 +919,22 @@ defineExpose({
&:disabled { &:disabled {
opacity: 0.5; opacity: 0.5;
} }
} }
> .cw { .cw {
z-index: 1; z-index: 1;
padding-bottom: 8px; padding-bottom: 8px;
border-bottom: solid 0.5px var(--divider); border-bottom: solid 0.5px var(--divider);
} }
> .hashtags { .hashtags {
z-index: 1; z-index: 1;
padding-top: 8px; padding-top: 8px;
padding-bottom: 8px; padding-bottom: 8px;
border-top: solid 0.5px var(--divider); border-top: solid 0.5px var(--divider);
} }
> .text { .text {
max-width: 100%; max-width: 100%;
min-width: 100%; min-width: 100%;
min-height: 90px; min-height: 90px;
@ -962,12 +942,13 @@ defineExpose({
&.withCw { &.withCw {
padding-top: 8px; padding-top: 8px;
} }
} }
> footer { .footer {
padding: 0 16px 16px 16px; padding: 0 16px 16px 16px;
}
> button { .footerButton {
display: inline-block; display: inline-block;
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -980,17 +961,13 @@ defineExpose({
background: var(--X5); background: var(--X5);
} }
&.active { &.footerButtonActive {
color: var(--accent); color: var(--accent);
} }
}
}
}
} }
@container (max-width: 500px) { @container (max-width: 500px) {
.gafaadew { .header {
> header {
height: 50px; height: 50px;
> .cancel { > .cancel {
@ -998,8 +975,8 @@ defineExpose({
line-height: 50px; line-height: 50px;
} }
> .right { > .headerRight {
> .text-count { > .textCount {
line-height: 50px; line-height: 50px;
} }
@ -1009,39 +986,30 @@ defineExpose({
} }
} }
> .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 {
> footer {
> button {
font-size: 14px; font-size: 14px;
width: 44px; width: 44px;
height: 44px; height: 44px;
} }
}
}
}
} }
</style> </style>