diff --git a/src/client/app/common/views/components/particle.vue b/src/client/app/common/views/components/particle.vue new file mode 100644 index 0000000000..33c118f000 --- /dev/null +++ b/src/client/app/common/views/components/particle.vue @@ -0,0 +1,53 @@ + + + + + diff --git a/src/client/app/common/views/components/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue index 62f4930edb..15ff002917 100644 --- a/src/client/app/common/views/components/reaction-picker.vue +++ b/src/client/app/common/views/components/reaction-picker.vue @@ -4,16 +4,16 @@

{{ title }}

- - - - - - - - - - + + + + + + + + + +
diff --git a/src/client/app/common/views/components/reactions-viewer.vue b/src/client/app/common/views/components/reactions-viewer.vue index 7f17d16a71..31d13cf9c4 100644 --- a/src/client/app/common/views/components/reactions-viewer.vue +++ b/src/client/app/common/views/components/reactions-viewer.vue @@ -1,16 +1,16 @@ diff --git a/src/client/app/common/views/directives/index.ts b/src/client/app/common/views/directives/index.ts index 268f07a950..1bb4fd6d4d 100644 --- a/src/client/app/common/views/directives/index.ts +++ b/src/client/app/common/views/directives/index.ts @@ -1,5 +1,7 @@ import Vue from 'vue'; import autocomplete from './autocomplete'; +import particle from './particle'; Vue.directive('autocomplete', autocomplete); +Vue.directive('particle', particle); diff --git a/src/client/app/common/views/directives/particle.ts b/src/client/app/common/views/directives/particle.ts new file mode 100644 index 0000000000..b3688a3cf1 --- /dev/null +++ b/src/client/app/common/views/directives/particle.ts @@ -0,0 +1,26 @@ +import Particle from '../components/particle.vue'; + +export default { + bind(el, binding, vn) { + el.addEventListener('click', () => { + const rect = el.getBoundingClientRect(); + + const x = rect.left + (el.clientWidth / 2); + const y = rect.top + (el.clientHeight / 2); + + const particle = new Particle({ + parent: vn.context, + propsData: { + x, + y + } + }).$mount(); + + document.body.appendChild(particle.$el); + }); + }, + + unbind(el, binding, vn) { + + } +};