view page use textarea

src/App.vue

@@ -46,6 +46,20 @@ body {
   display: none;
 }
 
+
+.noteHeader {
+  background-color: white;
+  width:100%;
+  height:40px;
+}
+
+.noteHeaderShade {
+  background: linear-gradient(to top,rgba(255,255,255,0.7),rgba(255,255,255,1));
+  width:100%;
+  height:40px;
+  border-bottom: dashed #ed4014 1px;
+}
+
 #noteText {
   white-space: pre-wrap;
   word-break: break-word;

src/views/EditNote.vue

@@ -23,7 +23,6 @@
 }
 
 
-
 .layout-footer-center {
   background: #dddddd;
   text-align: center;
@@ -75,7 +74,7 @@
             :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
 
           <Affix :offset-top="0">
-            <div style="background: white;width:100%;height:40px;">
+            <div :class="[showHeaderShade ? 'noteHeaderShade' : 'noteHeader']">
 
               <img style="height:40px;float:left;cursor: pointer;" alt="refresh flagnote" src="/static/logo.png"
                 v-on:click="refreshPage()" />
@@ -237,6 +236,7 @@ export default {
       },
       toTopState: false,
       showMenuState: false,
+      showHeaderShade: false,
       errorInfo: '',
     }
   },
@@ -480,8 +480,10 @@ export default {
         var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
         if (scrollTop >= 20) {
           that.toTopState = true;
+          that.showHeaderShade = true;
         } else {
           that.toTopState = false;
+          that.showHeaderShade = false;
         }
       }
     },

src/views/ViewNote.vue

@@ -168,7 +168,7 @@
           <Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
             :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
           <Affix :offset-top="0">
-            <div style="background: white;width:100%;height:40px;">
+            <div :class="[showHeaderShade ? 'noteHeaderShade' : 'noteHeader']">
               <img style="height:40px;float:left;cursor: pointer;" alt="refresh flagnote" src="/static/logo.png"
                 v-on:click="refreshPage()">
               <!--
@@ -255,9 +255,8 @@
               :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
             <Card :padding="0">
               <div id="wrapper" style="border-left: 2px solid white;">
-                <div id="noteText" style="text-align: left;min-height: 650px;" class="monoFt"
+                <Input element-id="noteText" readonly type="textarea" :border="false" v-model="noteForm.text"
-                  v-html="noteForm.escapeText">
+                    :autosize="{ minRows: 30, maxRows: 409600 }" :placeholder="$t('content.noteTip')" />
-                </div>
               </div>
             </Card>
             </Col>
@@ -284,7 +283,7 @@
       </p>
       <p style="text-align: center;margin-top:20px;line-height:100%">
         <span style="margin-right:3px;" id="copyBtn">
-          <Icon type="md-copy" />
+          <Icon type="md-clipboard" />
         </span><span id="qrUrl">{{ noteForm.noteUrl }}</span>
       </p>
 
@@ -343,7 +342,7 @@ import { md5, unwrap } from "@/libs/secret";
 import { getStoreKey, getSecretKey } from "@/api/lock";
 import { deleteNote, getNoteBlob } from "@/api/note";
 import storage from "@/libs/storage";
-import { getEscapeText } from "@/libs/noteStorage";
+//import { getEscapeText } from "@/libs/noteStorage";
 import QRCode from "qrcodejs2";
 import Clipboard from "clipboard";
 import { saveAs } from 'file-saver';
@@ -387,6 +386,7 @@ export default {
       },
       toTopState: false,
       showMenuState: false,
+      showHeaderShade: false,
       errorInfo: '',
     }
   },
@@ -591,7 +591,7 @@ export default {
             var bytes = new Uint8Array(e.target.result);
             let bytesString = bytes.join(",");
             that.noteForm.text = unwrap(bytesString, that.secret.secretKey);
-            that.noteForm.escapeText = getEscapeText(that.noteForm.text);
+            //that.noteForm.escapeText = getEscapeText(that.noteForm.text);
 
             // if local is enough, set local
             if (storage.local.getAvailableSize() > 1 * 1024 * 1024) {
@@ -609,7 +609,7 @@ export default {
         }
 
         this.noteForm.text = unwrap(starray[4], this.secret.secretKey);
-        this.noteForm.escapeText = getEscapeText(this.noteForm.text);
+        //this.noteForm.escapeText = getEscapeText(this.noteForm.text);
 
         // local is usable, and set commited flag
         if ("0" == starray[2]) {
@@ -623,8 +623,10 @@ export default {
         var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
         if (scrollTop >= 20) {
           that.toTopState = true;
+          that.showHeaderShade = true;
         } else {
           that.toTopState = false;
+          that.showHeaderShade = false;
         }
       }
     },
@@ -654,11 +656,7 @@ export default {
           if ((e.ctrlKey || e.metaKey) && e.key == "a") {
             e.preventDefault();
             var element = document.getElementById("noteText");
-            let selection = window.getSelection();
+            element.select();
-            let range = document.createRange();
-            range.selectNodeContents(element);
-            selection.removeAllRanges();
-            selection.addRange(range);
           }
         }
       }