feat(ui): teleport history list

lemredd · Jan 16, 2023 · bddbfd5 · bddbfd5
1 parent f88fce9
commit bddbfd5
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -8,6 +8,7 @@
   </head>
   <body>
     <div id="app"></div>
+	<div id="history-container-shown-by-default"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/src/components/CalculatorContainer/HistoryContainer.vue b/src/components/CalculatorContainer/HistoryContainer.vue
@@ -63,9 +63,24 @@ function revertToChosenHistory(historyItem: HistoryItem) {
 			</div>
 		</ul>
 
-		<ul class="history-list shown-by-default">
-			<div class="history-item" />
-		</ul>
+		<Teleport to="#history-container-shown-by-default">
+			<ul class="history-list shown-by-default">
+				<span class="header-text">History</span>
+				<!-- <div v-if="hasHistoryItems" class="has-history-items">
+					<HistoryListItem
+						v-for="item in historyList"
+						:key="joinHistoryItemParts(item)"
+						:history-item="item"
+						class="list-item"
+						@click="revertToChosenHistory(item)"
+					/>
+				</div>
+
+				<div v-else class="no-history-items">
+					No history yet.
+				</div> -->
+			</ul>
+		</Teleport>
 	</div>
 </template>