From 4d54198dbf69eb1b737eb88abe5d554f8a9b01fe Mon Sep 17 00:00:00 2001
From: Alexander Drozdov <snosme@gmail.com>
Date: Sat, 29 Feb 2020 21:13:57 +0200
Subject: [PATCH] exa tooltip titlebar

---
 src/components/AppTitlebar.vue | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/AppTitlebar.vue b/src/components/AppTitlebar.vue
index 75054795..52415b32 100644
--- a/src/components/AppTitlebar.vue
+++ b/src/components/AppTitlebar.vue
@@ -8,7 +8,19 @@
           <button class="titlebar-btn"><i class="fas fa-exchange-alt mt-px"></i> {{ exaltedCost }}</button>
         </template>
         <div class="popper">
-          <div>TODO POG</div>
+          <div class="flex items-center justify-center flex-1">
+            <div class="w-8 h-8 flex items-center justify-center">
+              <img src="https://web.poecdn.com/image/Art/2DItems/Currency/CurrencyAddModToRare.png?scale=1&w=1&h=1" alt="exa" class="max-w-full max-h-full">
+            </div>
+            <i class="fas fa-arrow-right text-gray-600 px-2"></i>
+            <span class="px-1 text-base">{{ exaltedCost | displayRounding(true) }} ×</span>
+            <div class="w-8 h-8 flex items-center justify-center">
+              <img src="https://web.poecdn.com/image/Art/2DItems/Currency/CurrencyRerollRare.png?scale=1&w=1&h=1" alt="chaos" class="max-w-full max-h-full">
+            </div>
+          </div>
+          <div v-for="i in 9" :key="i">
+            <div class="text-left pl-1">{{ i / 10 }} exa ⇒ {{ (exaltedCost * i / 10) | displayRounding(true) }} c</div>
+          </div>
         </div>
       </ui-popper>
     </div>
@@ -23,10 +35,11 @@
 <script>
 import { MainProcess } from './main-process-bindings'
 import { Leagues } from './Leagues'
-import { Prices } from './Prices'
+import { Prices, displayRounding } from './Prices'
 
 export default {
   name: 'AppTitlebar',
+  filters: { displayRounding },
   computed: {
     isLoading: () => Leagues.isLoading || Prices.isLoading,
     exaltedCost () {