From 678c7d9502c334e21c130e13b381a608e8d5e8be Mon Sep 17 00:00:00 2001 From: tamaina <tamaina@hotmail.co.jp> Date: Mon, 16 Jan 2023 02:37:45 +0900 Subject: [PATCH] Fix style of messaging form, use css module (#9602) * Fix style of messaging form, use css module * clean up --- .../pages/messaging/messaging-room.form.vue | 246 +++++++++--------- 1 file changed, 123 insertions(+), 123 deletions(-) diff --git a/packages/frontend/src/pages/messaging/messaging-room.form.vue b/packages/frontend/src/pages/messaging/messaging-room.form.vue index 6a49d0e89..d6113668d 100644 --- a/packages/frontend/src/pages/messaging/messaging-room.form.vue +++ b/packages/frontend/src/pages/messaging/messaging-room.form.vue @@ -1,10 +1,12 @@ <template> <div - class="pemppnzi" + :class="$style['root']" @dragover.stop="onDragover" @drop.stop="onDrop" > <textarea + :class="$style['textarea']" + class="_acrylic" ref="textEl" v-model="text" :placeholder="i18n.ts.inputMessageHere" @@ -12,17 +14,17 @@ @compositionupdate="onCompositionUpdate" @paste="onPaste" ></textarea> - <footer> - <div v-if="file" class="file" @click="file = null">{{ file.name }}</div> - <div class="buttons"> - <button class="_button" @click="chooseFile"><i class="ti ti-photo-plus"></i></button> - <button class="_button" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button> - <button class="send _button" :disabled="!canSend || sending" :title="i18n.ts.send" @click="send"> + <footer :class="$style['footer']"> + <div v-if="file" :class="$style['file']" @click="file = null">{{ file.name }}</div> + <div :class="$style['buttons']"> + <button class="_button" :class="$style['button']" @click="chooseFile"><i class="ti ti-photo-plus"></i></button> + <button class="_button" :class="$style['button']" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button> + <button class="_button" :class="[$style['button'], $style['send']]" :disabled="!canSend || sending" :title="i18n.ts.send" @click="send"> <template v-if="!sending"><i class="ti ti-send"></i></template><template v-if="sending"><MkLoading :em="true"/></template> </button> </div> </footer> - <input ref="fileEl" type="file" @change="onChangeFile"/> + <input :class="$style['file-input']" ref="fileEl" type="file" @change="onChangeFile"/> </div> </template> @@ -236,131 +238,129 @@ defineExpose({ }); </script> -<style lang="scss" scoped> -.pemppnzi { +<style lang="scss" module> +.root { position: relative; +} - > textarea { - cursor: auto; +.textarea { + cursor: auto; + display: block; + width: 100%; + min-width: 100%; + max-width: 100%; + min-height: 80px; + margin: 0; + padding: 16px 16px 0 16px; + resize: none; + font-size: 1em; + font-family: inherit; + outline: none; + border: none; + border-radius: 0; + box-shadow: none; + box-sizing: border-box; + color: var(--fg); +} + +.footer { + position: sticky; + bottom: 0; + background: var(--panel); +} + +.file { + padding: 8px; + color: var(--fg); + background: transparent; + cursor: pointer; +} +/* +.files { + display: block; + margin: 0; + padding: 0 8px; + list-style: none; + + &:after { + content: ''; display: block; - width: 100%; - min-width: 100%; - max-width: 100%; - min-height: 80px; - margin: 0; - padding: 16px 16px 0 16px; - resize: none; - font-size: 1em; - font-family: inherit; - outline: none; - border: none; - border-radius: 0; - box-shadow: none; - box-sizing: border-box; - color: var(--fg); - background: rgba(12, 18, 16, 0.85); - backdrop-filter: var(--blur, blur(15px)); + clear: both; } - footer { - position: sticky; - bottom: 0; - background: var(--panel); - - > .file { - padding: 8px; - color: var(--fg); - background: transparent; - cursor: pointer; - } - } - - .files { + > li { display: block; - margin: 0; - padding: 0 8px; - list-style: none; - - &:after { - content: ''; - display: block; - clear: both; - } - - > li { - display: block; - float: left; - margin: 4px; - padding: 0; - width: 64px; - height: 64px; - background-color: #eee; - background-repeat: no-repeat; - background-position: center center; - background-size: cover; - cursor: move; - - &:hover { - > .remove { - display: block; - } - } + float: left; + margin: 4px; + padding: 0; + width: 64px; + height: 64px; + background-color: #eee; + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + cursor: move; + &:hover { > .remove { - display: none; - position: absolute; - right: -6px; - top: -6px; - margin: 0; - padding: 0; - background: transparent; - outline: none; - border: none; - border-radius: 0; - box-shadow: none; - cursor: pointer; + display: block; } } } - - .buttons { - display: flex; - - ._button { - 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; - } - } - - > .send { - margin-left: auto; - color: var(--accent); - - &:hover { - color: var(--accentLighten); - } - - &:active { - color: var(--accentDarken); - transition: color 0s ease; - } - } - } - - input[type=file] { - display: none; - } +} + +.file-remove { + display: none; + position: absolute; + right: -6px; + top: -6px; + margin: 0; + padding: 0; + background: transparent; + outline: none; + border: none; + border-radius: 0; + box-shadow: none; + cursor: pointer; +} +*/ + +.buttons { + display: flex; +} + +.button { + 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; + } +} +.send { + margin-left: auto; + color: var(--accent); + + &:hover { + color: var(--accentLighten); + } + + &:active { + color: var(--accentDarken); + transition: color 0s ease; + } +} + +.file-input { + display: none; } </style>