Scroll up button added

MyEtherWallet · Aug 7, 2018 · 6f9eb69 · 6f9eb69 · mew-bot · Aug 7, 2018
1 parent 83dab7e
commit 6f9eb69
Show file tree

Hide file tree

Showing 13 changed files with 129 additions and 8 deletions.
diff --git a/src/assets/images/icons/up.svg b/src/assets/images/icons/up.svg
diff --git a/src/components/InterfaceBottomText/InterfaceBottomText.scss b/src/components/InterfaceBottomText/InterfaceBottomText.scss
@@ -1,3 +1,4 @@
 .bottom-text {
+  padding-top: 20px;
   text-align: center;
 }
diff --git a/src/components/ScrollUpButton/ScrollUpButton.scss b/src/components/ScrollUpButton/ScrollUpButton.scss
@@ -0,0 +1,17 @@
+@import '~@/scss/GlobalVariables';
+
+
+.scroll-up-button {
+  position: fixed;
+  bottom: 5vh;
+  right: 5vw;
+
+  .button-block {
+    img {
+      transform: rotate(180deg);
+      cursor: pointer;
+    }
+  }
+}
+
+
diff --git a/src/components/ScrollUpButton/ScrollUpButton.vue b/src/components/ScrollUpButton/ScrollUpButton.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="scroll-up-button">
+    <div v-on:click="scrollToTop" class="button-block">
+      <img src="~@/assets/images/icons/up.svg">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+
+    }
+  },
+  methods: {
+    scrollToTop: function () {
+      window.scrollTo(0, 0)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  @import "ScrollUpButton.scss";
+</style>
diff --git a/src/components/ScrollUpButton/index.js b/src/components/ScrollUpButton/index.js
@@ -0,0 +1 @@
+export { default } from './ScrollUpButton'
diff --git a/src/containers/HeaderContainer/HeaderContainer.scss b/src/containers/HeaderContainer/HeaderContainer.scss
@@ -4,6 +4,18 @@
   padding-top: 87px;
 }
 
+.scrollup-container {
+  opacity: 0;
+  pointer-events: none;
+  transition: all 0.3s ease;
+
+  &.active {
+    opacity: 1;
+    pointer-events: initial;
+  }
+}
+
+
 .fixed-header {
   background-color: $background-color-white;
   left: 0;

diff --git a/src/containers/HeaderContainer/HeaderContainer.vue b/src/containers/HeaderContainer/HeaderContainer.vue
@@ -1,5 +1,10 @@
 <template>
   <div class="header">
+
+    <div class="scrollup-container" :class="showScrollUpButton ? 'active' : ''">
+      <scrollupbutton></scrollupbutton>
+    </div>
+
     <div class="wrap">
       <div class="fixed-header" ref="fixedHeader">
         <div class="page-container">
@@ -70,11 +75,13 @@ import { mapGetters } from 'vuex'
 import store from 'store'
 import Blockie from '@/components/Blockie'
 import Notification from '@/components/Notification'
+import ScrollUpButton from '@/components/ScrollUpButton'
 
 export default {
   components: {
     'blockie': Blockie,
-    'notification': Notification
+    'notification': Notification,
+    'scrollupbutton': ScrollUpButton
   },
   data () {
     return {
@@ -104,7 +111,8 @@ export default {
       ],
       online: true,
       currentName: 'English',
-      currentFlag: 'gb'
+      currentFlag: 'gb',
+      showScrollUpButton: false
     }
   },
   methods: {
@@ -128,6 +136,8 @@ export default {
     }
   },
   mounted () {
+    var _this = this
+
     const self = this
     if (this.$store.state.online) {
       this.online = true
@@ -151,9 +161,11 @@ export default {
       if (topPos < -150) {
         header.classList.add('tiny-header')
         logoLarge.classList.add('logo-small')
+        _this.showScrollUpButton = true
       } else {
         header.classList.remove('tiny-header')
         logoLarge.classList.remove('logo-small')
+        _this.showScrollUpButton = false
       }
     }
   },

diff --git a/src/layouts/InterfaceLayout/components/BackButton/BackButton.scss b/src/layouts/InterfaceLayout/components/BackButton/BackButton.scss
@@ -7,11 +7,13 @@
     border: 1px solid $black;
     border-radius: 50%;
     display: flex;
-    font-size: 10px;
+    font-size: 13px;
     font-weight: 300;
     justify-content: center;
     margin-right: 10px;
-    padding: 5px;
+    padding: 6px;
+    width: 28px;
+    height: 28px;
 
     i {
       font-size: inherit;

diff --git a/src/layouts/InterfaceLayout/components/DappButtons/DappButtons.scss b/src/layouts/InterfaceLayout/components/DappButtons/DappButtons.scss
@@ -19,4 +19,8 @@
   h4 {
     margin-bottom: 5px;
   }
+
+  p {
+    padding: 0 10px;
+  }
 }
diff --git a/src/layouts/InterfaceLayout/containers/DomainSaleContainer/DomainSaleContainer.scss b/src/layouts/InterfaceLayout/containers/DomainSaleContainer/DomainSaleContainer.scss
@@ -30,6 +30,10 @@
       .title {
         padding: 0 8px;
 
+        p {
+          max-width: 760px;
+        }
+
         h4 {
           margin-bottom: 10px;
         }

diff --git a/...terfaceLayout/containers/InteractWithContractContainer/InteractWithContractContainer.scss b/...terfaceLayout/containers/InteractWithContractContainer/InteractWithContractContainer.scss
@@ -34,6 +34,7 @@
           margin-left: auto;
 
           span {
+            cursor: pointer;
             margin-left: 20px;
           }
         }
@@ -74,5 +75,15 @@
 
   .submit-button-container {
     padding: 40px 60px;
+
+    .submit-button {
+      position: relative;
+      i {
+        position: absolute;
+        right: 20px;
+        top: 16px;
+        font-size: 30px;
+      }
+    }
   }
 }
diff --git a/...nterfaceLayout/containers/InteractWithContractContainer/InteractWithContractContainer.vue b/...nterfaceLayout/containers/InteractWithContractContainer/InteractWithContractContainer.vue
@@ -12,7 +12,7 @@
         </div>
       </div>
       <div class="the-form domain-name">
-        <input type="number" name="" value="" placeholder="Enter Domain Name or Address" />
+        <input type="text" name="" value="" placeholder="Enter Domain Name or Address" />
       </div>
     </div>
 
@@ -21,20 +21,21 @@
         <div class="title">
           <h4>{{ $t('interface.abiJsonInt') }}</h4>
           <div class="copy-buttons">
-            <span>{{ $t('common.clear') }}</span>
-            <span>{{ $t('common.copy') }}</span>
+            <span v-on:click="clearInputValues('abi-json-interface')">{{ $t('common.clear') }}</span>
+            <span v-on:click="copyToClipboard('abi-json-interface')">{{ $t('common.copy') }}</span>
           </div>
         </div>
       </div>
       <div class="the-form domain-name">
-        <textarea class="custom-textarea-1" name=""></textarea>
+        <textarea ref="abi-json-interface" class="custom-textarea-1" name=""></textarea>
       </div>
     </div>
 
     <div class="submit-button-container">
       <!-- <router-link :to="{ name: 'InteractWithContract', params: {} }"> -->
         <div class="submit-button large-round-button-green-filled clickable">
           {{ $t('common.continue') }}
+          <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
         </div>
       <!-- </router-link> -->
       <interface-bottom-text link="/" :linkText="$t('interface.learnMore')" :question="$t('interface.haveIssues')"></interface-bottom-text>
@@ -75,6 +76,15 @@ export default {
         }
       ]
     }
+  },
+  methods: {
+    copyToClipboard (ref) {
+      this.$refs[ref].select()
+      document.execCommand('copy')
+    },
+    clearInputValues (ref) {
+      this.$refs[ref].value = ''
+    }
   }
 }
 </script>

diff --git a/src/layouts/InterfaceLayout/containers/RegisterDomainContainer/RegisterDomainContainer.scss b/src/layouts/InterfaceLayout/containers/RegisterDomainContainer/RegisterDomainContainer.scss
@@ -26,6 +26,10 @@
       .title {
         padding: 0 8px;
 
+        p {
+          max-width: 760px;
+        }
+
         h4 {
           margin-bottom: 10px;
         }