100 lines
2.2 KiB
Vue
100 lines
2.2 KiB
Vue
<template>
|
|
<div class="highlight-popover">
|
|
<section class="highlight-popover__section">
|
|
<div
|
|
class="highlight-popover__color highlight-popover__color--yellow"
|
|
@click="$emit('choose-color', 'alpha')"
|
|
></div>
|
|
<div
|
|
class="highlight-popover__color highlight-popover__color--pink"
|
|
@click="$emit('choose-color', 'beta')"
|
|
></div>
|
|
<div
|
|
class="highlight-popover__color highlight-popover__color--blue"
|
|
@click="$emit('choose-color', 'gamma')"
|
|
></div>
|
|
</section>
|
|
<section class="highlight-popover__section">
|
|
<note-icon
|
|
class="highlight-popover__icon"
|
|
@click="$emit('confirm')"
|
|
/>
|
|
</section>
|
|
<section class="highlight-popover__section">
|
|
<trash-icon
|
|
class="highlight-popover__icon"
|
|
@click="$emit('close')"
|
|
/>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import NoteIcon from '@/components/icons/NoteIcon.vue';
|
|
import TrashIcon from '@/components/icons/TrashIcon.vue';
|
|
export interface Props {
|
|
top: string;
|
|
}
|
|
|
|
defineEmits(['close', 'confirm', 'choose-color']);
|
|
defineProps<Props>();
|
|
</script>
|
|
|
|
<style lang="postcss">
|
|
.highlight-popover {
|
|
position: absolute;
|
|
z-index: 99;
|
|
top: calc(v-bind(top) - 80px);
|
|
|
|
background-color: white;
|
|
padding: var(--medium-spacing);
|
|
border-radius: var(--default-border-radius);
|
|
box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
|
|
|
|
display: flex;
|
|
|
|
&__color {
|
|
width: 38px;
|
|
height: 38px;
|
|
background-color: red;
|
|
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25) inset;
|
|
background-color: white;
|
|
border-radius: 50%;
|
|
|
|
&--yellow {
|
|
background-color: var(--mark-alpha);
|
|
}
|
|
&--pink {
|
|
background-color: var(--mark-beta);
|
|
}
|
|
&--blue {
|
|
background-color: var(--mark-gamma);
|
|
}
|
|
}
|
|
|
|
&__section {
|
|
padding-right: var(--medium-spacing);
|
|
padding-left: var(--medium-spacing);
|
|
border-right: 1px solid var(--color-silver);
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: var(--small-spacing, 10px);
|
|
align-items: center;
|
|
|
|
&:first-child {
|
|
padding-left: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
border-right: 0;
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
|
|
&__icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
}
|
|
</style>
|