Update some event emitters
This commit is contained in:
parent
39e7d27587
commit
7b0806a207
|
|
@ -14,14 +14,14 @@
|
|||
>
|
||||
<current-class
|
||||
class="user-header__current-class"
|
||||
@click.stop="openSidebar('profile')"
|
||||
@click="openSidebar('profile')"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<user-widget
|
||||
:avatar-url="me.avatarUrl"
|
||||
data-cy="header-user-widget"
|
||||
@click.stop="openSidebar('profile')"
|
||||
@click="openSidebar('profile')"
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -1,70 +1,82 @@
|
|||
<template>
|
||||
<div :class="{ 'user-widget--is-profile': isProfile }" class="user-widget">
|
||||
<div class="user-widget__avatar" data-cy="user-widget-avatar">
|
||||
<avatar :avatar-url="avatarUrl" :icon-highlighted="isProfile" />
|
||||
<div
|
||||
:class="{'user-widget--is-profile': isProfile}"
|
||||
class="user-widget"
|
||||
@click.stop="$emit('click', $event)"
|
||||
>
|
||||
<div
|
||||
class="user-widget__avatar"
|
||||
data-cy="user-widget-avatar"
|
||||
>
|
||||
<avatar
|
||||
:avatar-url="avatarUrl"
|
||||
:icon-highlighted="isProfile"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Avatar from '@/components/profile/Avatar';
|
||||
import Avatar from '@/components/profile/Avatar';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
avatarUrl: {
|
||||
type: String,
|
||||
export default {
|
||||
props: {
|
||||
avatarUrl: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
Avatar,
|
||||
},
|
||||
computed: {
|
||||
isProfile() {
|
||||
return this.$route.meta.isProfile;
|
||||
emits: ['click'],
|
||||
|
||||
components: {
|
||||
Avatar
|
||||
},
|
||||
},
|
||||
};
|
||||
computed: {
|
||||
isProfile() {
|
||||
return this.$route.meta.isProfile;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~styles/helpers';
|
||||
@import "~styles/helpers";
|
||||
|
||||
.user-widget {
|
||||
color: $color-silver-dark;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
// todo: do we need the margin right always? just do it where needed --> content block actions and objecives override this
|
||||
margin-right: $medium-spacing;
|
||||
|
||||
&__popover {
|
||||
top: 40px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__name {
|
||||
padding: 0px $small-spacing;
|
||||
.user-widget {
|
||||
color: $color-silver-dark;
|
||||
font-family: $sans-serif-font-family;
|
||||
}
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
// todo: do we need the margin right always? just do it where needed --> content block actions and objecives override this
|
||||
margin-right: $medium-spacing;
|
||||
|
||||
&__date {
|
||||
font-family: $sans-serif-font-family;
|
||||
}
|
||||
&__popover {
|
||||
top: 40px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
fill: $color-silver-dark;
|
||||
cursor: pointer;
|
||||
}
|
||||
&__name {
|
||||
padding: 0px $small-spacing;
|
||||
color: $color-silver-dark;
|
||||
font-family: $sans-serif-font-family;
|
||||
}
|
||||
|
||||
&--is-profile {
|
||||
& > span {
|
||||
color: $color-brand;
|
||||
&__date {
|
||||
font-family: $sans-serif-font-family;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
fill: $color-silver-dark;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&--is-profile {
|
||||
& > span {
|
||||
color: $color-brand;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,29 @@
|
|||
<template>
|
||||
<span class="current-class" data-cy="current-class-name">{{ currentClassName }}</span>
|
||||
<span
|
||||
class="current-class"
|
||||
data-cy="current-class-name"
|
||||
@click.stop="$emit('click', $event)"
|
||||
>{{ currentClassName }}</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import me from '@/mixins/me';
|
||||
import me from '@/mixins/me';
|
||||
|
||||
export default {
|
||||
mixins: [me],
|
||||
};
|
||||
export default {
|
||||
emits: ['click'],
|
||||
mixins: [me],
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@/styles/_variables.scss';
|
||||
@import '@/styles/_mixins.scss';
|
||||
@import "@/styles/_variables.scss";
|
||||
@import "@/styles/_mixins.scss";
|
||||
|
||||
.current-class {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: center;
|
||||
line-height: 1;
|
||||
@include regular-text;
|
||||
}
|
||||
.current-class {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: center;
|
||||
line-height: 1;
|
||||
@include regular-text;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,29 @@ declare global {
|
|||
}
|
||||
}
|
||||
|
||||
/*
|
||||
todo:
|
||||
there is a special interaction with nested elements where the parent has a @click event:
|
||||
the parent triggers the event, something happens, but the click event bubbles to the child element.
|
||||
If the event is then used to open some kind of sidebar or modal that has the `click-outside` propert, t
|
||||
he bubbled event will be outside of it, thereby closing it.
|
||||
|
||||
example:
|
||||
<div
|
||||
class="sidebar"
|
||||
v-if="showSidebar"
|
||||
v-click-outside="showSidebar=false"
|
||||
>
|
||||
...
|
||||
</div>
|
||||
|
||||
<a class="sidebar-toggle" @click="showSidebar=true">
|
||||
<span>Hello</span>
|
||||
</a>
|
||||
|
||||
FIX:
|
||||
In this example, setting the event on the a-tag as `@click.stop` will solve the problem
|
||||
*/
|
||||
export default {
|
||||
unmounted(el: HTMLElement) {
|
||||
document.body.removeEventListener('click', el.clickOutsideEvent);
|
||||
|
|
|
|||
Loading…
Reference in New Issue