Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | 1x 1x 69x 69x 69x 69x 69x 84x 69x 20x 20x | <template>
<v-btn
id="avatar-dropdown"
v-bind="mergeProps(activatorProps)"
v-if="showAvatarDropdown"
data-testid="btn"
rounded
border="sm"
class="pl-1 pr-3 ml-1"
style="opacity: 1 !important"
variant="plain"
:append-icon="'keyboard_arrow_down'"
@click="options.onProfileDropdown!(innerWidth - 16, 50)"
>
<v-img
:src="userAvatar"
width="32px"
height="32px"
rounded="circle"
style="opacity: 1 !important"
/>
</v-btn>
<DemoAvatarDropdownMenu
v-if="isDemo"
@close="emit('close')"
/>
</template>
<script setup lang="ts">
import { useDemoStore } from '@/stores/demo.store';
import { useViewerStore } from '@/stores/viewer.store';
import { storeToRefs } from 'pinia';
import { computed, mergeProps } from 'vue';
interface Props {
activatorProps?: Record<string, unknown>;
}
type Emits = {
close: [void];
};
const emit = defineEmits<Emits>();
withDefaults(defineProps<Props>(), {
activatorProps: () => ({}),
});
const { isDemo } = storeToRefs(useDemoStore());
const { options } = storeToRefs(useViewerStore());
const innerWidth = computed(() => window.innerWidth);
const showAvatarDropdown = computed(() => {
return !!options.value.onProfileDropdown;
});
const userAvatar = computed(() => {
const name = options.value.user?.name || 'Unknown User';
return options.value.user?.avatarUrl || name[0];
});
</script>
<style lang="scss">
#avatar-dropdown {
.v-icon {
// --v-icon-size-multiplier: 1 !important;
color: #92939e !important;
}
.v-btn__append {
margin-inline-start: 4px !important;
}
}
</style>
|