mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-11-23 12:33:09 +02:00
refactor(client): use css modules
This commit is contained in:
syuilo
parent
2f06f2a6da
commit
efbec444e8
1 changed files with 241 additions and 273 deletions
|
|
@ -1,66 +1,65 @@
|
|||
<template>
|
||||
<div
|
||||
class="gafaadew"
|
||||
:class="{ modal, _popup: modal }"
|
||||
:class="[$style.root, { [$style.modal]: modal, _popup: modal }]"
|
||||
@dragover.stop="onDragover"
|
||||
@dragenter="onDragenter"
|
||||
@dragleave="onDragleave"
|
||||
@drop.stop="onDrop"
|
||||
>
|
||||
<header>
|
||||
<button v-if="!fixed" class="cancel _button" @click="cancel"><i class="ti ti-x"></i></button>
|
||||
<button v-click-anime v-tooltip="i18n.ts.switchAccount" class="account _button" @click="openAccountMenu">
|
||||
<MkAvatar :user="postAccount ?? $i" class="avatar"/>
|
||||
<header :class="$style.header">
|
||||
<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="$style.account" class="_button" @click="openAccountMenu">
|
||||
<MkAvatar :user="postAccount ?? $i" :class="$style.avatar"/>
|
||||
</button>
|
||||
<div class="right">
|
||||
<span class="text-count" :class="{ over: textLength > maxTextLength }">{{ maxTextLength - textLength }}</span>
|
||||
<span v-if="localOnly" class="local-only"><i class="ti ti-world-off"></i></span>
|
||||
<button ref="visibilityButton" v-tooltip="i18n.ts.visibility" class="_button visibility" :disabled="channel != null" @click="setVisibility">
|
||||
<div :class="$style.headerRight">
|
||||
<span :class="[$style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</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" :class="$style.visibility" :disabled="channel != null" @click="setVisibility">
|
||||
<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 === 'followers'"><i class="ti ti-lock"></i></span>
|
||||
<span v-if="visibility === 'specified'"><i class="ti ti-mail"></i></span>
|
||||
</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-click-anime class="submit _button" :class="{ posting }" :disabled="!canPost" data-cy-open-post-form-submit @click="post">
|
||||
<div class="inner">
|
||||
<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="_button" :class="[$style.submit, { [$style.submitPosting]: posting }]" :disabled="!canPost" data-cy-open-post-form-submit @click="post">
|
||||
<div :class="$style.submitInner">
|
||||
<template v-if="posted"></template>
|
||||
<template v-else-if="posting"><MkEllipsis/></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>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<div class="form" :class="{ fixed }">
|
||||
<MkNoteSimple v-if="reply" class="preview" :note="reply"/>
|
||||
<MkNoteSimple v-if="renote" class="preview" :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="visibility === 'specified'" class="to-specified">
|
||||
<div :class="[$style.form]">
|
||||
<MkNoteSimple v-if="reply" :class="$style.targetNote" :note="reply"/>
|
||||
<MkNoteSimple v-if="renote" :class="$style.targetNote" :note="renote"/>
|
||||
<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="$style.toSpecified">
|
||||
<span style="margin-right: 8px;">{{ i18n.ts.recipient }}</span>
|
||||
<div class="visibleUsers">
|
||||
<span v-for="u in visibleUsers" :key="u.id">
|
||||
<div :class="$style.visibleUsers">
|
||||
<span v-for="u in visibleUsers" :key="u.id" :class="$style.visibleUser">
|
||||
<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>
|
||||
<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>
|
||||
<MkInfo v-if="hasNotSpecifiedMentions" warn class="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">
|
||||
<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"/>
|
||||
<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" class="hashtags" :placeholder="i18n.ts.hashtags" list="hashtags">
|
||||
<XPostFormAttaches v-model="files" class="attaches" @detach="detachFile" @change-sensitive="updateFileSensitive" @change-name="updateFileName"/>
|
||||
<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="$style.cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
|
||||
<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="$style.hashtags" :placeholder="i18n.ts.hashtags" list="hashtags">
|
||||
<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"/>
|
||||
<XNotePreview v-if="showPreview" class="preview" :text="text"/>
|
||||
<footer>
|
||||
<button v-tooltip="i18n.ts.attachFile" class="_button" @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.useCw" class="_button" :class="{ active: 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.hashtags" class="_button" :class="{ active: 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-if="postFormActions.length > 0" v-tooltip="i18n.ts.plugin" class="_button" @click="showActions"><i class="ti ti-plug"></i></button>
|
||||
<XNotePreview v-if="showPreview" :class="$style.preview" :text="text"/>
|
||||
<footer :class="$style.footer">
|
||||
<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="[$style.footerButton, { [$style.footerButtonActive]: poll }]" @click="togglePoll"><i class="ti ti-chart-arrows"></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" :class="$style.footerButton" @click="insertMention"><i class="ti ti-at"></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" :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" :class="$style.footerButton" @click="showActions"><i class="ti ti-plug"></i></button>
|
||||
</footer>
|
||||
<datalist id="hashtags">
|
||||
<option v-for="hashtag in recentHashtags" :key="hashtag" :value="hashtag"/>
|
||||
|
|
@ -742,50 +741,53 @@ defineExpose({
|
|||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.gafaadew {
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
position: relative;
|
||||
|
||||
&.modal {
|
||||
width: 100%;
|
||||
max-width: 520px;
|
||||
}
|
||||
}
|
||||
|
||||
> header {
|
||||
.header {
|
||||
z-index: 1000;
|
||||
height: 66px;
|
||||
}
|
||||
|
||||
> .cancel {
|
||||
.cancel {
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
width: 64px;
|
||||
line-height: 66px;
|
||||
}
|
||||
}
|
||||
|
||||
> .account {
|
||||
.account {
|
||||
height: 100%;
|
||||
aspect-ratio: 1/1;
|
||||
display: inline-flex;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
.avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .right {
|
||||
.headerRight {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
> .text-count {
|
||||
.textCount {
|
||||
opacity: 0.7;
|
||||
line-height: 66px;
|
||||
}
|
||||
}
|
||||
|
||||
> .visibility {
|
||||
.visibility {
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
margin: 0 0 0 8px;
|
||||
|
|
@ -793,14 +795,14 @@ defineExpose({
|
|||
& + .localOnly {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .local-only {
|
||||
.localOnly {
|
||||
margin: 0 0 0 12px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
> .preview {
|
||||
.previewButton {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
margin: 0 8px 0 0;
|
||||
|
|
@ -813,12 +815,12 @@ defineExpose({
|
|||
background: var(--X5);
|
||||
}
|
||||
|
||||
&.active {
|
||||
&.previewButtonActive {
|
||||
color: var(--accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .submit {
|
||||
.submit {
|
||||
margin: 16px 16px 16px 0;
|
||||
vertical-align: bottom;
|
||||
|
||||
|
|
@ -841,8 +843,9 @@ defineExpose({
|
|||
background: linear-gradient(90deg, var(--X8), var(--X8));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .inner {
|
||||
.submitInner {
|
||||
padding: 0 12px;
|
||||
line-height: 34px;
|
||||
font-weight: bold;
|
||||
|
|
@ -852,74 +855,51 @@ defineExpose({
|
|||
box-sizing: border-box;
|
||||
color: var(--fgOnAccent);
|
||||
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
|
||||
}
|
||||
|
||||
> i {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.form {
|
||||
}
|
||||
|
||||
> .form {
|
||||
> .preview {
|
||||
padding: 16px;
|
||||
}
|
||||
.preview {
|
||||
padding: 16px 20px 0 20px;
|
||||
}
|
||||
|
||||
> .with-quote {
|
||||
.targetNote {
|
||||
padding: 0 20px 16px 20px;
|
||||
}
|
||||
|
||||
.withQuote {
|
||||
margin: 0 0 8px 0;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
> button {
|
||||
padding: 4px 8px;
|
||||
color: var(--accentAlpha04);
|
||||
|
||||
&:hover {
|
||||
color: var(--accentAlpha06);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--accentDarken30);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .to-specified {
|
||||
.toSpecified {
|
||||
padding: 6px 24px;
|
||||
margin-bottom: 8px;
|
||||
overflow: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
> .visibleUsers {
|
||||
.visibleUsers {
|
||||
display: inline;
|
||||
top: -1px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
> button {
|
||||
padding: 4px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
> span {
|
||||
.visibleUser {
|
||||
margin-right: 14px;
|
||||
padding: 8px 0 8px 8px;
|
||||
border-radius: 8px;
|
||||
background: var(--X4);
|
||||
}
|
||||
|
||||
> button {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .hasNotSpecifiedMentions {
|
||||
.hasNotSpecifiedMentions {
|
||||
margin: 0 20px 16px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
> .cw,
|
||||
> .hashtags,
|
||||
> .text {
|
||||
.cw,
|
||||
.hashtags,
|
||||
.text {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
padding: 0 24px;
|
||||
|
|
@ -939,22 +919,22 @@ defineExpose({
|
|||
&:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .cw {
|
||||
.cw {
|
||||
z-index: 1;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: solid 0.5px var(--divider);
|
||||
}
|
||||
}
|
||||
|
||||
> .hashtags {
|
||||
.hashtags {
|
||||
z-index: 1;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
border-top: solid 0.5px var(--divider);
|
||||
}
|
||||
}
|
||||
|
||||
> .text {
|
||||
.text {
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
min-height: 90px;
|
||||
|
|
@ -962,12 +942,13 @@ defineExpose({
|
|||
&.withCw {
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> footer {
|
||||
.footer {
|
||||
padding: 0 16px 16px 16px;
|
||||
}
|
||||
|
||||
> button {
|
||||
.footerButton {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
@ -980,17 +961,13 @@ defineExpose({
|
|||
background: var(--X5);
|
||||
}
|
||||
|
||||
&.active {
|
||||
&.footerButtonActive {
|
||||
color: var(--accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@container (max-width: 500px) {
|
||||
.gafaadew {
|
||||
> header {
|
||||
.header {
|
||||
height: 50px;
|
||||
|
||||
> .cancel {
|
||||
|
|
@ -998,8 +975,8 @@ defineExpose({
|
|||
line-height: 50px;
|
||||
}
|
||||
|
||||
> .right {
|
||||
> .text-count {
|
||||
> .headerRight {
|
||||
> .textCount {
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
|
|
@ -1009,39 +986,30 @@ defineExpose({
|
|||
}
|
||||
}
|
||||
|
||||
> .form {
|
||||
> .to-specified {
|
||||
.toSpecified {
|
||||
padding: 6px 16px;
|
||||
}
|
||||
|
||||
> .cw,
|
||||
> .hashtags,
|
||||
> .text {
|
||||
.cw,
|
||||
.hashtags,
|
||||
.text {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
> .text {
|
||||
.text {
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
> footer {
|
||||
.footer {
|
||||
padding: 0 8px 8px 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@container (max-width: 310px) {
|
||||
.gafaadew {
|
||||
> .form {
|
||||
> footer {
|
||||
> button {
|
||||
.footerButton {
|
||||
font-size: 14px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue