feat(TableOfContents): fade in table of contents container

Also remove some dead code.

Signed-off-by: Jonas <jonas@freesources.org>

Author: mejo-

src/components/Editor/TableOfContents/TableOfContents.vue

@@ -4,7 +4,6 @@
 -->
 
 <template>
-	<!-- :class="{ '--initial-render': initialRender }" -->
 	<ul class="toc-list">
 		<li
 			v-for="heading in headings"
@@ -39,16 +38,6 @@ export default {
 			required: true,
 		},
 	},
-	/*
-	data: () => ({
-		initialRender: true,
-	}),
-	mounted() {
-		setTimeout(() => {
-			this.initialRender = false
-		}, 1000)
-	},
-	 */
 	methods: {
 		goto(heading) {
 			const el = this.$root.$el.querySelector(`#${heading.id}`)
@@ -67,35 +56,20 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-/*
-.--initial-render {
-	.editor__toc {
-		&-item {
-			--initial-padding-inline-start: 0;
-			animation: initialPadding 1.5s;
-		}
-	}
-}
- */
-
 .toc-list {
 	width: 100%;
 	list-style: none;
 	font-size: 0.9rem;
 	padding: 0;
 
 	--level-padding: 12px;
-	// animation-name: fadeInLeft;
-	// animation-duration: var(--animation-duration);
 
 	&__item {
-		// transform: translateX(var(--padding-inline-start, 0rem));
 		color: var(--color-text-lighter);
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 		padding-inline-start: var(--padding-inline-start);
-		// animation: initialPadding calc(var(--animation-duration) * 2);
 
 		a {
 			color: var(--color-text-lighter);
@@ -128,42 +102,6 @@ export default {
 				--padding-inline-start: calc(#{$i - 1} * var(--level-padding));
 			}
 		}
-
-		&.previous1 {
-			--initial-padding-inline-start: calc(0 * var(--level-padding));
-		}
-
-		&.previous2 {
-			--initial-padding-inline-start: calc(1 * var(--level-padding));
-		}
-
-		&.previous3 {
-			--initial-padding-inline-start: calc(2 * var(--level-padding));
-		}
-
-		&.previous4 {
-			--initial-padding-inline-start: calc(3 * var(--level-padding));
-		}
-
-		&.previous5 {
-			--initial-padding-inline-start: calc(4 * var(--level-padding));
-		}
-
-		&.previous6 {
-			--initial-padding-inline-start: calc(5 * var(--level-padding));
-		}
-	}
-}
-
-/**
-@keyframes initialPadding {
-	from {
-		transform: translateX(var(--initial-padding-inline-start, initial));
-	}
-
-	to {
-		transform: translateX(var(--padding-inline-start, 0rem));
 	}
 }
- */
 </style>

src/components/Editor/TableOfContents/TocDesktop.vue

@@ -80,6 +80,8 @@ export default defineComponent({
 	display: flex;
 	flex-direction: column;
 	overflow-y: auto;
+	animation-name: fadeInRight;
+	animation-duration: 0.3s;
 
 	padding: 12px;
 	padding-bottom: 24px;
@@ -99,4 +101,9 @@ export default defineComponent({
 		justify-content: end;
 	}
 }
+
+@keyframes fadeIn {
+	from { opacity: 0; }
+	to { opacity: 1; }
+}
 </style>

src/components/Menu/MenuBar.vue

@@ -271,7 +271,7 @@ export default {
 
 	&.text-menubar--ready:not(.text-menubar--hide) {
 		visibility: visible;
-		animation-name: fadeInDown;
+		animation-name: fadeInRight;
 		animation-duration: 0.3s;
 	}
 

src/css/style.scss

@@ -106,6 +106,15 @@ li.ProseMirror-selectednode {
 	}
 }
 
-.fadeInLeft {
-	animation-name: fadeInLeft;
+// from https://github.com/animate-css/animate.css/blob/main/source/fading_entrances/fadeInRight.css
+@keyframes fadeInRight {
+	from {
+		opacity: 0;
+		transform: translate3d(100%, 0, 0);
+	}
+
+	to {
+		opacity: 1;
+		transform: translate3d(0, 0, 0);
+	}
 }