feat: Time format switch (#720)

Co-authored-by: Michele F. <michele-franchi@users.noreply.github.com>
aeternity · May 13, 2024 · b986617 · b986617
1 parent 90afed8
commit b986617
Show file tree

Hide file tree

Showing 86 changed files with 381 additions and 207 deletions.
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -4,7 +4,7 @@ import { compileTemplate } from 'vue/compiler-sfc'
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   srcDir: './src',
-  css: ['@/styles/main.css'],
+  css: ['@/assets/styles/main.css'],
   devServer: {
     port: 8080,
   },
@@ -45,7 +45,7 @@ export default defineNuxtConfig({
     plugins: {
       autoprefixer: {},
       '@csstools/postcss-global-data': {
-        files: ['src/styles/settings/_variables.css'],
+        files: ['src/assets/styles/settings/_variables.css'],
       },
       'postcss-custom-media': {},
       'postcss-import': {},

diff --git a/src/assets/icons/clock.svg b/src/assets/icons/clock.svg
diff --git a/src/styles/elements/_a.css → src/assets/styles/elements/_a.css b/src/styles/elements/_a.css → src/assets/styles/elements/_a.css
diff --git a/src/styles/elements/_body.css → src/assets/styles/elements/_body.css b/src/styles/elements/_body.css → src/assets/styles/elements/_body.css
diff --git a/src/styles/elements/_dl.css → src/assets/styles/elements/_dl.css b/src/styles/elements/_dl.css → src/assets/styles/elements/_dl.css
diff --git a/src/styles/elements/_h.css → src/assets/styles/elements/_h.css b/src/styles/elements/_h.css → src/assets/styles/elements/_h.css
diff --git a/src/styles/elements/_hr.css → src/assets/styles/elements/_hr.css b/src/styles/elements/_hr.css → src/assets/styles/elements/_hr.css
diff --git a/src/styles/elements/_html.css → src/assets/styles/elements/_html.css b/src/styles/elements/_html.css → src/assets/styles/elements/_html.css
diff --git a/src/styles/elements/_input.css → src/assets/styles/elements/_input.css b/src/styles/elements/_input.css → src/assets/styles/elements/_input.css
diff --git a/src/styles/elements/_p.css → src/assets/styles/elements/_p.css b/src/styles/elements/_p.css → src/assets/styles/elements/_p.css
diff --git a/src/styles/elements/_q.css → src/assets/styles/elements/_q.css b/src/styles/elements/_q.css → src/assets/styles/elements/_q.css
diff --git a/src/styles/elements/_table.css → src/assets/styles/elements/_table.css b/src/styles/elements/_table.css → src/assets/styles/elements/_table.css
diff --git a/src/styles/generic/_animations.css → src/assets/styles/generic/_animations.css b/src/styles/generic/_animations.css → src/assets/styles/generic/_animations.css
diff --git a/src/styles/generic/_fonts.css → src/assets/styles/generic/_fonts.css b/src/styles/generic/_fonts.css → src/assets/styles/generic/_fonts.css
diff --git a/src/styles/generic/_reset.css → src/assets/styles/generic/_reset.css b/src/styles/generic/_reset.css → src/assets/styles/generic/_reset.css
diff --git a/src/styles/main.css → src/assets/styles/main.css b/src/styles/main.css → src/assets/styles/main.css
diff --git a/src/styles/settings/_variables.css → src/assets/styles/settings/_variables.css b/src/styles/settings/_variables.css → src/assets/styles/settings/_variables.css
diff --git a/src/styles/utilities/_ellipsis.css → src/assets/styles/utilities/_ellipsis.css b/src/styles/utilities/_ellipsis.css → src/assets/styles/utilities/_ellipsis.css
diff --git a/src/styles/utilities/_responsive.css → src/assets/styles/utilities/_responsive.css b/src/styles/utilities/_responsive.css → src/assets/styles/utilities/_responsive.css
diff --git a/src/components/AccountActivitiesTable.vue b/src/components/AccountActivitiesTable.vue
@@ -9,7 +9,7 @@
           </hint-tooltip>
         </th>
         <th>
-          Time
+          <time-toggle-button/>
           <hint-tooltip>
             {{ accountHints.activityTime }}
           </hint-tooltip>
@@ -50,7 +50,7 @@
         <td>
           <block-time-cell
             :height="activity.height"
-            :datetime="activity.time"/>
+            :timestamp="activity.time"/>
         </td>
         <td>
           <account-activity-type-cell

diff --git a/src/components/AccountActivitiesTableCondensed.vue b/src/components/AccountActivitiesTableCondensed.vue
@@ -27,7 +27,7 @@
         <tr class="account-activities-table-condensed__row">
           <th class="account-activities-table-condensed__header">
             <app-tooltip>
-              Time
+              <time-toggle-button/>
               <template #tooltip>
                 {{ accountHints.activityTime }}
               </template>
@@ -36,7 +36,7 @@
           <td class="account-activities-table-condensed__data">
             <block-time-cell
               :height="activity.height"
-              :datetime="activity.time"/>
+              :timestamp="activity.time"/>
           </td>
         </tr>
         <tr class="account-activities-table-condensed__row">

diff --git a/src/components/AccountNamesTable.vue b/src/components/AccountNamesTable.vue
@@ -9,7 +9,7 @@
           </hint-tooltip>
         </th>
         <th>
-          Expires
+          <time-toggle-button>Expires</time-toggle-button>
           <hint-tooltip>
             {{ accountHints.expires }}
           </hint-tooltip>
@@ -34,7 +34,7 @@
         <td>
           <block-time-cell
             :height="name.expirationHeight"
-            :datetime="name.expiration"/>
+            :timestamp="name.expiration"/>
         </td>
         <td>
           <value-hash-ellipsed

diff --git a/src/components/AccountNamesTableCondensed.vue b/src/components/AccountNamesTableCondensed.vue
@@ -25,7 +25,7 @@
         <tr class="account-names-table-condensed__row">
           <th class="account-names-table-condensed__header">
             <app-tooltip>
-              Expires
+              <time-toggle-button>Expires</time-toggle-button>
               <template #tooltip>
                 {{ accountHints.expires }}
               </template>
@@ -34,7 +34,7 @@
           <td class="account-names-table-condensed__data">
             <block-time-cell
               :height="name.expirationHeight"
-              :datetime="name.expiration"/>
+              :timestamp="name.expiration"/>
           </td>
         </tr>
         <tr class="account-names-table-condensed__row">

diff --git a/src/components/AccountTransactionsTable.vue b/src/components/AccountTransactionsTable.vue
@@ -9,7 +9,7 @@
           </hint-tooltip>
         </th>
         <th>
-          Time
+          <time-toggle-button/>
           <hint-tooltip>
             {{ accountHints.time }}
           </hint-tooltip>
@@ -40,7 +40,7 @@
         <td>
           <block-time-cell
             :height="transaction.createdHeight"
-            :datetime="transaction.created"/>
+            :timestamp="transaction.created"/>
         </td>
         <td>
           {{ transaction.type }}

diff --git a/src/components/AccountTransactionsTableCondensed.vue b/src/components/AccountTransactionsTableCondensed.vue
@@ -23,7 +23,7 @@
         <tr class="account-transactions-table-condensed__row">
           <th class="account-transactions-table-condensed__header">
             <app-tooltip>
-              Time
+              <time-toggle-button/>
               <template #tooltip>
                 {{ accountHints.time }}
               </template>
@@ -32,7 +32,7 @@
           <td class="account-transactions-table-condensed__data">
             <block-time-cell
               :height="transaction.createdHeight"
-              :datetime="transaction.created"/>
+              :timestamp="transaction.created"/>
           </td>
         </tr>
         <tr class="account-transactions-table-condensed__row">

diff --git a/src/components/BlockTimeCell.vue b/src/components/BlockTimeCell.vue
@@ -5,7 +5,7 @@
       {{ height }}
     </app-link>
   </div>
-  <datetime-label :datetime="datetime"/>
+  <timestamp-label :timestamp="timestamp"/>
 </template>
 
 <script setup>
@@ -14,7 +14,7 @@ defineProps({
     type: Number,
     required: true,
   },
-  datetime: {
+  timestamp: {
     type: Object,
     required: true,
   },

diff --git a/src/components/ContractCallTransactionsTable.vue b/src/components/ContractCallTransactionsTable.vue
@@ -9,7 +9,7 @@
           </hint-tooltip>
         </th>
         <th>
-          Time
+          <time-toggle-button/>
           <hint-tooltip>
             {{ contractsHints.callTransactionsTime }}
           </hint-tooltip>
@@ -40,7 +40,7 @@
         <td>
           <block-time-cell
             :height="transaction.createdHeight"
-            :datetime="transaction.created"/>
+            :timestamp="transaction.created"/>
         </td>
         <td>
           <value-hash-ellipsed

diff --git a/src/components/ContractCallTransactionsTableCondensed.vue b/src/components/ContractCallTransactionsTableCondensed.vue
@@ -22,7 +22,7 @@
       <tr class="contract-call-transactions-table-condensed__row">
         <th class="contract-call-transactions-table-condensed__header">
           <app-tooltip>
-            Time
+            <time-toggle-button/>
             <template #tooltip>
               {{ contractsHints.callTransactionsTime }}
             </template>
@@ -31,7 +31,7 @@
         <td class="contract-call-transactions-table-condensed__data">
           <block-time-cell
             :height="transaction.createdHeight"
-            :datetime="transaction.created"/>
+            :timestamp="transaction.created"/>
         </td>
       </tr>
       <tr class="contract-call-transactions-table-condensed__row">

diff --git a/src/components/ContractDetailsPanel.vue b/src/components/ContractDetailsPanel.vue
@@ -69,18 +69,28 @@
         </tr>
         <tr class="contract-details-panel__row">
           <th class="contract-details-panel__table-header">
-            Created
+            Created Height
             <hint-tooltip>
-              {{ contractsHints.contractCreated }}
+              {{ contractsHints.contractCreatedHeight }}
             </hint-tooltip>
           </th>
           <td class="contract-details-panel__data">
             <app-link :to="`/keyblocks/${contractDetails.creationHeight}`">
               {{ contractDetails.creationHeight }}
             </app-link>
-            (
-            <datetime-label :datetime="contractDetails.creationDate"/>
-            )
+          </td>
+        </tr>
+        <tr class="contract-details-panel__row">
+          <th class="contract-details-panel__table-header">
+            Created
+            <hint-tooltip>
+              {{ contractsHints.contractCreated }}
+            </hint-tooltip>
+          </th>
+          <td class="contract-details-panel__data">
+            <timestamp-label
+              :timestamp="contractDetails.creationDate"
+              :is-extended="true"/>
           </td>
         </tr>
         <tr
@@ -198,7 +208,6 @@ import AppLink from '@/components/AppLink'
 import CopyChip from '@/components/CopyChip'
 import AppChip from '@/components/AppChip'
 import { formatAePrice, formatAettosToAe, formatEllipseHash } from '@/utils/format'
-import DatetimeLabel from '@/components/DatetimeLabel'
 import { contractsHints } from '@/utils/hints/contractsHints'
 import HintTooltip from '@/components/HintTooltip'
 import TokenSymbolIcon from '@/components/TokenSymbolIcon'

diff --git a/src/components/ContractEventsTable.vue b/src/components/ContractEventsTable.vue
@@ -8,7 +8,7 @@
         </hint-tooltip>
       </th>
       <th>
-        Created
+        <time-toggle-button>Created</time-toggle-button>
         <hint-tooltip>
           {{ contractsHints.eventsCreated }}
         </hint-tooltip>
@@ -38,7 +38,7 @@
         <td :class="[{'contract-events-table__data--expanded': isExpanded.includes(index)}]">
           <block-time-cell
             :height="event.createdHeight"
-            :datetime="event.created"/>
+            :timestamp="event.created"/>
         </td>
         <td :class="[{'contract-events-table__data--expanded': isExpanded.includes(index)}]">
           {{ event.eventName || 'N/A' }}

diff --git a/src/components/ContractEventsTableCondensed.vue b/src/components/ContractEventsTableCondensed.vue
@@ -22,7 +22,7 @@
       <tr class="contract-events-table-condensed__row">
         <th class="contract-events-table-condensed__header">
           <app-tooltip>
-            Created
+            <time-toggle-button>Created</time-toggle-button>
             <template #tooltip>
               {{ contractsHints.eventsCreated }}
             </template>
@@ -31,7 +31,7 @@
         <td class="contract-events-table-condensed__data">
           <block-time-cell
             :height="event.createdHeight"
-            :datetime="event.created"/>
+            :timestamp="event.created"/>
         </td>
       </tr>
       <tr class="contract-events-table-condensed__row">

diff --git a/src/components/ContractVerifiedTable.vue b/src/components/ContractVerifiedTable.vue
@@ -1,57 +1,57 @@
 <template>
-  <table class="contract-verified-table-condensed__table">
-    <tr class="contract-verified-table-condensed__row">
-      <th class="contract-verified-table-condensed__header">
+  <table class="contract-verified-table__table">
+    <tr class="contract-verified-table__row">
+      <th class="contract-verified-table__header">
         License
         <hint-tooltip>
           {{ contractVerifiedHints.license }}
         </hint-tooltip>
       </th>
-      <td class="contract-verified-table-condensed__data">
+      <td class="contract-verified-table__data">
         {{ verificationDetails.license }}
       </td>
     </tr>
-    <tr class="contract-verified-table-condensed__row">
-      <th class="contract-verified-table-condensed__header">
+    <tr class="contract-verified-table__row">
+      <th class="contract-verified-table__header">
         Compiler Version
         <hint-tooltip>
           {{ contractVerifiedHints.compiler }}
         </hint-tooltip>
       </th>
-      <td class="contract-verified-table-condensed__data">
+      <td class="contract-verified-table__data">
         {{ verificationDetails.compiler }}
       </td>
     </tr>
-    <tr class="contract-verified-table-condensed__row">
-      <th class="contract-verified-table-condensed__header">
+    <tr class="contract-verified-table__row">
+      <th class="contract-verified-table__header">
         Entry File
         <hint-tooltip>
           {{ contractVerifiedHints.entryFile }}
         </hint-tooltip>
       </th>
-      <td class="contract-verified-table-condensed__data">
+      <td class="contract-verified-table__data">
         {{ verificationDetails.entryFile }}
       </td>
     </tr>
-    <tr class="contract-verified-table-condensed__row">
-      <th class="contract-verified-table-condensed__header">
-        Verified At
+    <tr class="contract-verified-table__row">
+      <th class="contract-verified-table__header">
+        <time-toggle-button>Verified At</time-toggle-button>
         <hint-tooltip>
           {{ contractVerifiedHints.verifiedAt }}
         </hint-tooltip>
       </th>
-      <td class="contract-verified-table-condensed__data">
-        <datetime-label :datetime="verificationDetails.verifiedAt"/>
+      <td class="contract-verified-table__data">
+        <timestamp-label :timestamp="verificationDetails.verifiedAt"/>
       </td>
     </tr>
-    <tr class="contract-verified-table-condensed__row">
-      <th class="contract-verified-table-condensed__header">
+    <tr class="contract-verified-table__row">
+      <th class="contract-verified-table__header">
         Entrypoint
         <hint-tooltip>
           {{ contractVerifiedHints.initCallParameters }}
         </hint-tooltip>
       </th>
-      <td class="contract-verified-table-condensed__data">
+      <td class="contract-verified-table__data">
         {{ verificationDetails.initCallParameters }}
       </td>
     </tr>
@@ -73,7 +73,7 @@ defineProps({
 </script>
 
 <style scoped>
-.contract-verified-table-condensed {
+.contract-verified-table {
   &__table {
     padding: 0 var(--space-1) var(--space-7);
     margin-bottom: var(--space-5);

diff --git a/src/components/ContractsTable.vue b/src/components/ContractsTable.vue
@@ -9,7 +9,7 @@
           </hint-tooltip>
         </th>
         <th>
-          Created
+          <time-toggle-button>Created</time-toggle-button>
           <hint-tooltip>
             {{ contractsHints.created }}
           </hint-tooltip>
@@ -43,7 +43,7 @@
         <td class="contracts-table__data">
           <block-time-cell
             :height="contract.createdHeight"
-            :datetime="contract.created"/>
+            :timestamp="contract.created"/>
         </td>
         <td class="contracts-table__data">
           <value-hash-ellipsed

diff --git a/src/components/ContractsTableCondensed.vue b/src/components/ContractsTableCondensed.vue
@@ -26,7 +26,7 @@
         <tr class="contracts-table-condensed__row">
           <th class="contracts-table-condensed__header">
             <app-tooltip>
-              Created
+              <time-toggle-button>Created</time-toggle-button>
               <template #tooltip>
                 {{ contractsHints.created }}
               </template>
@@ -35,7 +35,7 @@
           <td class="contracts-table-condensed__data">
             <block-time-cell
               :height="contract.createdHeight"
-              :datetime="contract.created"/>
+              :timestamp="contract.created"/>
           </td>
         </tr>
         <tr class="contracts-table-condensed__row">