Merge pull request #16 from ranchimall/ui-work

UI work
2022-04-25 20:50:39 +05:30 · 2022-04-25 20:50:39 +05:30 · 73630f84a0
commit 73630f84a0
parent 6d39f6a642 acaa77b6e5
6 changed files with 80 additions and 36 deletions
--- a/css/main.css
+++ b/css/main.css
@ -593,8 +593,9 @@ ul {
 }

 #main_card {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: auto 1fr;
  height: 100%;
  width: 100%;
  transition: background-color 0.3s;
@ -828,8 +829,8 @@ ul {
 }

 #contact {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
  padding: 0;
  height: 100%;
 }
@ -839,15 +840,31 @@ ul {
 #contact > :first-child {
  padding-top: 0;
 }
+#contact > :last-child {
+  padding: 0.5rem 1.5rem;
+  background-color: rgba(var(--text-color), 0.03);
+}
+#contact > :last-child button {
+  padding: 0.8rem 2rem;
+  border-radius: 1rem;
+  color: var(--accent-color);
+  background-color: rgba(var(--foreground-color), 1);
+}

 #contact__transactions {
+  position: relative;
  display: grid;
  gap: 0.5rem;
  overflow-y: auto;
  flex: 1;
-  padding: 0 max(1rem, 8vw);
+  padding: 0 max(1rem, 8vw) 1rem max(1rem, 8vw);
  align-content: flex-start;
 }
+#contact__transactions sm-spinner {
+  position: absolute;
+  justify-self: center;
+  align-self: center;
+}

 .transaction-message {
  background-color: rgba(var(--text-color), 0.06);
@ -1189,6 +1206,7 @@ ul {
  #main_card {
    height: calc(100vh - 3rem);
    width: calc(100vw - 3rem);
+    grid-template-areas: "header" ".";
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
@ -1196,7 +1214,6 @@ ul {
    box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05), 0 1rem 3rem rgba(0, 0, 0, 0.2);
  }
  #main_card:not(.nav-hidden) {
-    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "nav header" "nav .";
--- a/css/main.min.css
+++ b/css/main.min.css
--- a/css/main.scss
+++ b/css/main.scss
@ -552,8 +552,9 @@ ul {
  padding: 1.5rem;
 }
 #main_card {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: auto 1fr;
  height: 100%;
  width: 100%;
  transition: background-color 0.3s;
@ -778,8 +779,8 @@ ul {
  padding: 1rem;
 }
 #contact {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
  padding: 0;
  height: 100%;
  & > * {
@ -788,14 +789,30 @@ ul {
  & > :first-child {
    padding-top: 0;
  }
+  & > :last-child {
+    padding: 0.5rem 1.5rem;
+    background-color: rgba(var(--text-color), 0.03);
+    button {
+      padding: 0.8rem 2rem;
+      border-radius: 1rem;
+      color: var(--accent-color);
+      background-color: rgba(var(--foreground-color), 1);
+    }
+  }
 }
 #contact__transactions {
+  position: relative;
  display: grid;
  gap: 0.5rem;
  overflow-y: auto;
  flex: 1;
-  padding: 0 max(1rem, 8vw);
+  padding: 0 max(1rem, 8vw) 1rem max(1rem, 8vw);
  align-content: flex-start;
+  sm-spinner {
+    position: absolute;
+    justify-self: center;
+    align-self: center;
+  }
 }
 .transaction-message {
  background-color: rgba(var(--text-color), 0.06);
@ -1121,8 +1138,8 @@ ul {
  #main_card {
    height: calc(100vh - 3rem);
    width: calc(100vw - 3rem);
+    grid-template-areas: "header" ".";
    &:not(.nav-hidden) {
-      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-rows: auto 1fr;
      grid-template-areas: "nav header" "nav .";
--- a/index.html
+++ b/index.html
@ -23,7 +23,7 @@
                FLO: ['https://flosight.duckdns.org/', 'https://livenet.flocha.in/'],
                FLO_TEST: ['https://testnet-flosight.duckdns.org/', 'https://testnet.flocha.in/']
            },
-            adminID: "FKAEdnPfjXLHSYwrXQu377ugN4tXU7VGdf",
+            adminID: "FH64hLqB71e6i11rnZZW7hvzoH8daCwy1J",
            sendAmt: 0.001,
            fee: 0.0005,

@ -37,7 +37,7 @@

            //for cloud apps
            subAdmins: [],
-            application: "TEST_MODE",
+            application: "blockchainUPI",
            appObjects: {},
            generalData: {},
            lastVC: {}
@ -437,9 +437,9 @@
                <h4 id="contact__title"></h4>
            </div>
            <ul id="contact__transactions"></ul>
-            <div class="flex">
-                <button class="button flex-1">Pay</button>
-                <button class="button flex-1">Request</button>
+            <div class="flex gap-0-5">
+                <button class="button justify-right" onclick="showTokenTransfer('request')">Request</button>
+                <button class="button" onclick="showTokenTransfer('send')">Pay</button>
            </div>
        </section>
        <section id="requests" class="inner-page hide">
@ -805,7 +805,7 @@
                </div>
            </section>
        </section>
-        <nav id="main_navbar" class="hide">
+        <nav id="main_navbar" class="hide nav-hidden">
            <ul>
                <li>
                    <a href="#/home" class="nav-item interact">
@ -946,10 +946,10 @@
        <section class="grid gap-2">
            <h4 id="token_transfer__title"></h4>
            <sm-form>
-                <sm-input id="tt_flo_id" placeholder="FLO ID" error-text="Invalid FLO ID" data-flo-id animate required
-                    autofocus>
+                <sm-input id="token_transfer__receiver" placeholder="FLO ID" error-text="Invalid FLO ID" data-flo-id
+                    animate required autofocus>
                </sm-input>
-                <sm-input id="tt_amount" type="number" placeholder="0" required min="1">
+                <sm-input id="token_transfer__amount" type="number" placeholder="0" required min="1">
                    <svg slot="icon" class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
                        height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
                        <g>
--- a/scripts/fn_ui.js
+++ b/scripts/fn_ui.js
@ -541,18 +541,6 @@ function buttonLoader(id, show) {
    }
 }

-let currentUserAction;
-function showTokenTransfer(type) {
-    getRef('tt_button').textContent = type;
-    currentUserAction = type;
-    if (type === 'send') {
-        getRef('token_transfer__title').textContent = 'Send money to FLO ID';
-    } else {
-        getRef('token_transfer__title').textContent = 'Request money from FLO ID';
-    }
-    showPopup('token_transfer_popup');
-}
-
 function getArrayOfSavedIds() {
    const arr = [];
    for (const key in floGlobals.savedIds) {
@ -666,9 +654,30 @@ function insertElementAlphabetically(name, elementToInsert) {
    }
 }

+let currentUserAction;
+function showTokenTransfer(type) {
+    getRef('tt_button').textContent = type;
+    currentUserAction = type;
+    if (type === 'send') {
+        getRef('token_transfer__title').textContent = 'Send money to FLO ID';
+    } else {
+        getRef('token_transfer__title').textContent = 'Request money from FLO ID';
+    }
+    if (pagesData.lastPage === 'contact') {
+        getRef('token_transfer__receiver').value = pagesData.params.floId;
+        getRef('token_transfer__receiver').readOnly = true;
+    } else {
+        getRef('token_transfer__receiver').readOnly = false;
+    }
+    showPopup('token_transfer_popup');
+    if (pagesData.lastPage === 'contact') {
+        getRef('token_transfer__amount').focusIn();
+    }
+}
+
 function executeUserAction() {
-    const floID = getRef('tt_flo_id').value.trim(),
-        amount = parseFloat(getRef('tt_amount').value),
+    const floID = getRef('token_transfer__receiver').value.trim(),
+        amount = parseFloat(getRef('token_transfer__amount').value),
        remark = getRef('tt_remark').value.trim();
    if (currentUserAction === 'send') {
        userUI.sendMoneyToUser(floID, amount, remark);
--- a/scripts/std_ui.js
+++ b/scripts/std_ui.js
@ -325,6 +325,7 @@ async function showPage(targetPage, options = {}) {
            break;
        case 'contact':
            getRef('contact__title').textContent = getFloIdTitle(params.floId)
+            getRef('contact__transactions').innerHTML = '<sm-spinner></sm-spinner>'
            Promise.all([
                tokenAPI.fetch_api(`api/v1.0/getTokenTransactions?token=rupee&senderFloAddress=${myFloID}&destFloAddress=${params.floId}`),
                tokenAPI.fetch_api(`api/v1.0/getTokenTransactions?token=rupee&senderFloAddress=${params.floId}&destFloAddress=${myFloID}`)])