118 lines
2.8 KiB
Vue
118 lines
2.8 KiB
Vue
<template>
|
|
<div class="highlight-sidebar">
|
|
<div
|
|
class="highlight-sidebar__close-button"
|
|
@click="close"
|
|
>
|
|
<cross class="highlight-sidebar__close-icon" />
|
|
</div>
|
|
<div class="highlight-sidebar__section highlight-sidebar__highlight">
|
|
<h2 class="heading-4">Meine Markierung</h2>
|
|
<mark
|
|
class="paragraph highlight-sidebar__highlighted-text"
|
|
ref="highlightMark"
|
|
>
|
|
hier ist ein bischen mehr text blabla blabla bla blabla blabla bla bla blabla blabla bla blabla blabla bla bla
|
|
noch mehr text noch mehr text
|
|
</mark>
|
|
<pre>{{ overflowing }}</pre>
|
|
<pre>{{ highlightMark?.scrollHeight }}</pre>
|
|
<pre>{{ highlightMark?.clientHeight }}</pre>
|
|
</div>
|
|
<div class="highlight-sidebar__section highlight-sidebar__note">
|
|
<h2 class="heading-4">Meine Notiz</h2>
|
|
<div class="form-with-border highlight-sidebar__note-form">
|
|
<textarea
|
|
class="borderless-textarea"
|
|
placeholder="Hi"
|
|
v-auto-grow
|
|
></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, defineAsyncComponent, ref } from 'vue';
|
|
|
|
const emits = defineEmits(['close']);
|
|
const close = () => emits('close');
|
|
|
|
const highlightMark = ref<HTMLElement | null>(null);
|
|
|
|
const overflowing = computed(() => {
|
|
const element = highlightMark.value;
|
|
if (element) {
|
|
console.log('element is here');
|
|
console.log(element.scrollHeight);
|
|
console.log(element.clientHeight);
|
|
console.log(element.scrollHeight > element.clientHeight);
|
|
return element.scrollHeight > element.clientHeight;
|
|
}
|
|
return false;
|
|
});
|
|
|
|
const Cross = defineAsyncComponent(() => import('@/components/icons/CrossIcon.vue'));
|
|
</script>
|
|
|
|
<style scoped lang="postcss">
|
|
@import 'styles/css/mixins/desktop.css';
|
|
|
|
.highlight-sidebar {
|
|
position: fixed;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 15;
|
|
height: 100vh;
|
|
background-color: var(--color-white);
|
|
padding: var(--medium-spacing);
|
|
|
|
box-shadow: -2px 4px 11px 0px rgba(0, 0, 0, 0.12);
|
|
|
|
display: grid;
|
|
grid-template-columns: 1fr 50px;
|
|
grid-template-rows: 50px max-content;
|
|
|
|
grid-template-areas: '. x' 'h h' 'n n';
|
|
|
|
@mixin desktop {
|
|
width: 300px;
|
|
}
|
|
&__close-button {
|
|
grid-area: x;
|
|
}
|
|
&__highlight {
|
|
grid-area: h;
|
|
}
|
|
&__note {
|
|
grid-area: n;
|
|
}
|
|
|
|
&__section {
|
|
border-top: 1px solid var(--color-silver);
|
|
padding: var(--large-spacing) 0;
|
|
}
|
|
|
|
&__highlighted-text {
|
|
display: inline-block;
|
|
--num-lines: 3;
|
|
max-height: calc(var(--regular-font-size) * var(--paragraph-line-height) * var(--num-lines));
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
position: relative;
|
|
/* white-space: nowrap; */
|
|
&::after {
|
|
content: '...';
|
|
position: absolute;
|
|
right: 5px;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
&__note-form {
|
|
min-height: 100px;
|
|
}
|
|
}
|
|
</style>
|