From ae2d71553e92b324f59c15d2b151b2583a6e65ab Mon Sep 17 00:00:00 2001 From: syuilo Date: Mon, 27 Dec 2021 22:59:14 +0900 Subject: [PATCH] enhance(client): :art: --- .../client/src/components/emoji-picker.vue | 8 +-- .../client/src/components/form/switch.vue | 42 ++++++++++----- .../components/reactions-viewer.reaction.vue | 2 +- .../components/{particle.vue => ripple.vue} | 53 +++++++++++-------- packages/client/src/directives/index.ts | 4 +- .../src/directives/{particle.ts => ripple.ts} | 8 +-- 6 files changed, 71 insertions(+), 46 deletions(-) rename packages/client/src/components/{particle.vue => ripple.vue} (65%) rename packages/client/src/directives/{particle.ts => ripple.ts} (59%) diff --git a/packages/client/src/components/emoji-picker.vue b/packages/client/src/components/emoji-picker.vue index ff450246f..a8eed1ca2 100644 --- a/packages/client/src/components/emoji-picker.vue +++ b/packages/client/src/components/emoji-picker.vue @@ -77,7 +77,7 @@ import { defineComponent, markRaw } from 'vue'; import { emojilist } from '@/scripts/emojilist'; import { getStaticImageUrl } from '@/scripts/get-static-image-url'; -import Particle from '@/components/particle.vue'; +import Ripple from '@/components/ripple.vue'; import * as os from '@/os'; import { isTouchUsing } from '@/scripts/touch'; import { isMobile } from '@/scripts/is-mobile'; @@ -296,9 +296,9 @@ export default defineComponent({ if (ev) { const el = ev.currentTarget || ev.target; const rect = el.getBoundingClientRect(); - const x = rect.left + (el.clientWidth / 2); - const y = rect.top + (el.clientHeight / 2); - os.popup(Particle, { x, y }, {}, 'end'); + const x = rect.left + (el.offsetWidth / 2); + const y = rect.top + (el.offsetHeight / 2); + os.popup(Ripple, { x, y }, {}, 'end'); } const key = this.getKey(emoji); diff --git a/packages/client/src/components/form/switch.vue b/packages/client/src/components/form/switch.vue index aa28292b9..aa9b09215 100644 --- a/packages/client/src/components/form/switch.vue +++ b/packages/client/src/components/form/switch.vue @@ -9,7 +9,7 @@ :disabled="disabled" @keydown.enter="toggle" > - + @@ -20,7 +20,9 @@ @@ -51,7 +64,7 @@ export default defineComponent({ .ziffeoms { position: relative; display: flex; - transition: all 0.2s; + transition: all 0.2s ease; > * { user-select: none; @@ -85,6 +98,8 @@ export default defineComponent({ opacity: 0; color: var(--fgOnAccent); font-size: 13px; + transform: scale(0.5); + transition: all 0.2s ease; } } @@ -131,6 +146,7 @@ export default defineComponent({ > .check { opacity: 1; + transform: scale(1); } } } diff --git a/packages/client/src/components/reactions-viewer.reaction.vue b/packages/client/src/components/reactions-viewer.reaction.vue index a1de99f01..bbf518549 100644 --- a/packages/client/src/components/reactions-viewer.reaction.vue +++ b/packages/client/src/components/reactions-viewer.reaction.vue @@ -2,7 +2,7 @@