Popover helper added to network

tradenbot · Sep 4, 2018 · 0d4f885 · 0d4f885
1 parent e6cc6c5
commit 0d4f885
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 94 deletions.
diff --git a/src/assets/images/icons/question.png b/src/assets/images/icons/question.png
diff --git a/src/components/PopOver/PopOver.scss b/src/components/PopOver/PopOver.scss
@@ -11,11 +11,16 @@
 
 .popover-button {
   position: absolute;
-  background-color: white;
+  background-color: transparent;
   border: 0;
   margin: 0;
   padding: 0;
 
+  &:active,
+  &:focus {
+    box-shadow: none;
+  }
+
   .hover-icon {
     display: none;
   }

diff --git a/src/components/PopOver/PopOver.vue b/src/components/PopOver/PopOver.vue
@@ -1,8 +1,7 @@
 <template lang="html">
   <div class="popover-container">
     <b-col>
-      <b-btn
-        :id="popOverId"
+      <b-btn v-if="!popovertype" :id="popOverId"
         class="popover-button">
         <img
           class="nohover-icon"
@@ -11,6 +10,10 @@
           class="hover-icon"
           src="@/assets/images/icons/explanation2.svg">
       </b-btn>
+      <b-btn v-if="popovertype === 'A'" :id="popOverId" class="popover-button">
+        <img class="nohover-icon" src="@/assets/images/icons/question.png">
+        <img class="hover-icon" src="@/assets/images/icons/question.png">
+      </b-btn>
       <b-popover
         :target="popOverId"
         triggers="hover focus"

diff --git a/src/layouts/InterfaceLayout/components/InterfaceNetwork/InterfaceNetwork.scss b/src/layouts/InterfaceLayout/components/InterfaceNetwork/InterfaceNetwork.scss
@@ -3,4 +3,16 @@
 .network {
   background-color: $transaction-block-network;
   cursor: pointer;
+  position: relative;
 }
+
+
+.helper {
+  position: absolute;
+  right: 19px;
+  top: 16px;
+
+  .popover-container button {
+    background: transparent !important;
+  }
+}
diff --git a/src/layouts/InterfaceLayout/components/InterfaceNetwork/InterfaceNetwork.vue b/src/layouts/InterfaceLayout/components/InterfaceNetwork/InterfaceNetwork.vue
@@ -3,6 +3,9 @@
     <interface-network-modal/>
     <div @click="networkModalOpen">
       <div class="info-block network">
+        <div class="helper">
+          <popover :popcontent="$t('popover.whatIsMessageContent')" :popovertype="'A'" />
+        </div>
         <div class="block-image">
           <img
             v-if="$store.state.network.type.name === 'ROP' || $store.state.network.type.name === 'RIN' || $store.state.network.type.name === 'KOV'"

diff --git a/src/layouts/InterfaceLayout/components/InterfaceNetworkModal/InterfaceNetworkModal.scss b/src/layouts/InterfaceLayout/components/InterfaceNetworkModal/InterfaceNetworkModal.scss
@@ -1,5 +1,6 @@
 @import '~@/scss/GlobalVariables';
 
+
 .modal-container {
   .network {
     .content-block {
@@ -31,89 +32,6 @@
           width: 6px;
         }
 
-        &.aka::before {
-          background-color: $aka;
-        }
-
-        &.clo::before {
-          background-color: $clo;
-        }
-
-        &.egem::before {
-          background-color: $egem;
-        }
-
-        &.ella::before {
-          background-color: $ella;
-        }
-
-        &.eosc::before {
-          background-color: $eosc;
-        }
-
-        &.esn::before {
-          background-color: $esn;
-        }
-
-        &.etc::before {
-          background-color: $etc;
-        }
-
-        &.eth::before {
-          background-color: $eth;
-        }
-
-        &.etho::before {
-          background-color: $etho;
-        }
-
-        &.etsc::before {
-          background-color: $etsc;
-        }
-
-        &.exp::before {
-          background-color: $exp;
-        }
-
-        &.go::before {
-          background-color: $go;
-        }
-
-        &.kov::before {
-          background-color: $kov;
-        }
-
-        &.music::before {
-          background-color: $music;
-        }
-
-        &.pirl::before {
-          background-color: $pirl;
-        }
-
-        &.poa::before {
-          background-color: $poa;
-        }
-
-        &.rin::before {
-          background-color: $rin;
-        }
-
-        &.rop::before {
-          background-color: $rop;
-        }
-
-        &.tomo::before {
-          background-color: $tomo;
-        }
-
-        &.ubq::before {
-          background-color: $ubq;
-        }
-
-        &.cust::before {
-          background-color: $cust;
-        }
       }
 
       .flex-container {
@@ -125,6 +43,7 @@
       }
 
       .grid-3 {
+        padding: 0 20px;
         display: grid;
         grid-template-columns: auto auto auto;
 
@@ -197,3 +116,12 @@
     margin-left: 10px;
   }
 }
+
+.network-title {
+  display: flex;
+  align-items: center;
+  img {
+    height: 25px;
+    margin-right: 13px;
+  }
+}
diff --git a/src/layouts/InterfaceLayout/components/InterfaceNetworkModal/InterfaceNetworkModal.vue b/src/layouts/InterfaceLayout/components/InterfaceNetworkModal/InterfaceNetworkModal.vue
@@ -25,7 +25,10 @@
           v-for="(key, index) in Object.keys($store.state.Networks)"
           :key="key + index"
           class="content-block">
-          <h4 :class="key.toLowerCase()">{{ key }}</h4>
+          <div class="network-title">
+            <img src="@/assets/images/networks/eth.svg">
+            <h4 :class="key.toLowerCase()">{{ key }}</h4>
+          </div>
           <div class="grid-3">
             <p
               v-for="net in $store.state.Networks[key]"
@@ -72,7 +75,8 @@
               <option
                 v-for="type in Object.keys(types)"
                 :value="types[type]"
-                :key="types[type].name + types[type].name_long">{{ types[type].name | capitalize }} - {{ types[type].name_long |
+                :key="types[type].name + types[type].name_long">
+                {{ types[type].name | capitalize }} - {{ types[type].name_long |
                 capitalize }}
               </option>
             </select>

diff --git a/src/scss/Globals.scss b/src/scss/Globals.scss
@@ -790,12 +790,6 @@ h6 {
 }
 
 
-.max-height-1 .modal-body {
-  max-height: 405px;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
 
 
 // Custom modal style for each pages -------------------------------