showSkeleton

src/App.vue

@@ -122,10 +122,10 @@ body {
   display: none;
 }
 
-button span {
+/* button span {
   margin-left: 0px !important;
   font-size: 16px !important;
   font-family: apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
   margin-bottom: 6px;
-}
+} */
 </style>

src/views/EditNote.vue

@@ -38,6 +38,13 @@
   justify-content: center;
 }
 
+/* button span {
+  margin-left: 0px !important;
+  font-size: 18px !important;
+  font-family: apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
+  margin-bottom: 6px;
+} */
+
 
 
 @media print {
@@ -80,30 +87,19 @@
                 v-on:click="refreshPage()" />
 
               <div style="float:left;width:auto;">
-
                 <Button-group size="large">
-
-
-
                   <Button aria-label="to top" v-show="toTopState" type="text"
                     style="margin-left:5px; border-radius: 0px; font-size: 28px;color:red;line-height: 20px;"
                     @click="toTop()" icon="ios-arrow-up" ghost></Button>
-
                 </Button-group>
-
               </div>
-
-
-
               <div style="float:right;width:auto;">
-
                 <Button-group size="large">
                   <Button aria-label="publish" type="error" :loading="model.submitting"
                     style="margin-left:5px; border-radius: 0px;font-size: 21px;" @click="submitNote()"
                     icon="md-cloud-upload"></Button>
                   <Button aria-label="menu" type="error" style="margin-left:3px; border-radius: 0px;font-size: 24px;"
                     @click="switchMenu()" @blur.native="hideMenu()" icon="md-menu"></Button>
-
                 </Button-group>
               </div>
             </div>
@@ -145,11 +141,13 @@
               <Form :model="noteForm" :label-width="80">
                 <div ref="html2canvas" id="wrapper" style="border-left: 2px solid #ed4014;">
                   <Input element-id="noteText" type="textarea" :border="false" v-model="noteForm.text" autofocus
-                    :autosize="{ minRows: 30, maxRows: 409600 }" :placeholder="$t('content.noteTip')" @input="recordText"
+                    :autosize="{ minRows: 35, maxRows: 100000 }" :placeholder="$t('content.noteTip')" @input="recordText"
                     @on-keydown="recordEventKdown" />
+                  
                 </div>
               </Form>
             </Card>
+            <WordCount :value="noteForm.text" :total="100000" style="border-top:1px solid #ed4014;float:left" />
             </Col>
 
           </Row>

src/views/ViewNote.vue

@@ -151,11 +151,11 @@
 
 
 
-/* #noteMenu button span{
+/* button span {
-  font-size: 20px;
+  margin-left: 0px !important;
-  line-height: 20px;
+  font-size: 16px !important;
-  margin-left: 7px !important;
+  font-family: apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
-  margin-right: 5px !important;
+  margin-bottom: 6px;
 } */
 </style>
 
@@ -171,20 +171,6 @@
             <div :class="[showHeaderShade ? 'noteHeaderShade' : 'noteHeader']">
               <img style="height:40px;float:left;cursor: pointer;" alt="refresh flagnote" src="/static/logo.png"
                 v-on:click="refreshPage()">
-              <!--
-                      <div style="float:left;width:auto;vertical-align: center;">
-                            <div style="font-size: 18px;
-                            color: red;
-                            line-height: 40px;
-                            display: inline-block;
-                            font-weight: bold;
-                            height: 40px;">{{
-                                state.ttlDesc
-                            }}</div>
-                      </div>
-                      -->
-
-
               <div style="float:left;width:auto;">
 
                 <Button-group size="large">
@@ -203,8 +189,16 @@
                 <Button-group size="large">
 
                   <Button aria-label="ttl" type="error"
-                    style="margin-left:5px; border-radius: 0px;font-size: 21px; font-family: Arial, sans-serif"
+                    style="margin-left:5px; border-radius: 0px;font-size: 21px; padding-left: 3px !important;padding-right: 7px !important; font-family: Arial, sans-serif"
-                    @click="showTtlDeleteModel()" icon="md-alarm">{{ state.ttlDesc }}</Button>
+                    @click="showTtlDeleteModel()">
+                    <Badge :offset="[8, 0]" style="padding-top:1px;">
+                      <Icon type="md-trash" color="#FFFFFF" size="24" />
+                      <template #count>
+                        <Icon type="md-time" color="#FFFFFF" size="14" />
+                      </template>
+                    </Badge>
+                    <span style="font-size:18px;margin-left: 7px">{{ state.ttlDesc }}</span>
+                  </Button>
 
                   <Button aria-label="share" type="error"
                     style="margin-left:3px; border-radius: 0px;font-size: 21px; font-family: Arial, sans-serif"
@@ -256,8 +250,32 @@
               :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
             <Card :padding="0">
               <div ref="html2canvas" id="wrapper" style="border-left: 2px solid white;">
+                <Skeleton :loading="showSkeleton">
+                  <template #template>
+                    <div style="  padding: 10px;  width: 100%;  height: 800px;text-align: left;" >
+                      <SkeletonItem />
+                      <SkeletonItem block width="80%" height="16px" />
+                      <SkeletonItem width="80%" height="16px" class="ivu-mr" />
+                      <SkeletonItem width="68%" height="16px" class="ivu-mr" />
+                      <SkeletonItem width="38%" height="16px" />
+                      <SkeletonItem width="88%" height="16px" />
+                      <SkeletonItem block width="80%" height="16px" />
+                      <SkeletonItem width="80%" height="16px" class="ivu-mr" />
+                      <SkeletonItem width="68%" height="16px" class="ivu-mr" />
+                      <SkeletonItem width="38%" height="16px" />
+                      <SkeletonItem width="88%" height="16px" />
+                      <SkeletonItem block width="80%" height="16px" />
+                      <SkeletonItem width="80%" height="16px" class="ivu-mr" />
+                      <SkeletonItem width="68%" height="16px" class="ivu-mr" />
+                      <SkeletonItem width="38%" height="16px" />
+                      <SkeletonItem width="88%" height="16px" />
+                    </div>
+                  </template>
+                  <template #default>
                     <Input element-id="noteText" readonly type="textarea" :border="false" v-model="noteForm.text"
-                  :autosize="{ minRows: 30, maxRows: 409600 }" :placeholder="$t('content.noteTip')" />
+                      :autosize="{ minRows: 35 }" />
+                  </template>
+                </Skeleton>
               </div>
             </Card>
             </Col>
@@ -274,12 +292,7 @@
 
     <Modal v-model="model.showShare" width="360" footer-hide class-name="qrmodal" :styles="{ borderRadius: 0 }"
       @on-cancel="closeShareModel">
-      <p style="text-align: center;
+      <p style="text-align: center; z-index: 1000; position: absolute; top: -2px; left: 0px; width: 100%;">
-                  z-index: 1000;
-                  position: absolute;
-                  top: -2px;
-                  left: 0px;
-                  width: 100%;">
         <Tag style="border-radius: 0px;" v-show="model.copyTip" color="#ed4014" text="">Url Copied.</Tag>
       </p>
       <p style="text-align: center;margin-top:20px;line-height:100%">
@@ -388,6 +401,8 @@ export default {
       showMenuState: false,
       showHeaderShade: false,
       errorInfo: '',
+      targetTime: null,
+      showSkeleton: true,
     }
   },
   created() {
@@ -413,6 +428,7 @@ export default {
       this.state.initTime = new Date().getTime();
       this.state.initTtl = noteMeta.ttl;
       this.state.ttl = noteMeta.ttl;
+      this.targetTime = noteMeta.ttl + new Date().getTime();
       this.state.serverTime = noteMeta.serverTime;
 
       this.secret.cipher = "00000000000000000000000000000000";//noteMeta.cipher; //读者有没有值可配置
@@ -437,12 +453,6 @@ export default {
   },
   mounted() {
 
-    let stateInfo = storage.session.getText(this.secret.storeKey + "_share");
-    if (stateInfo == '1') {
-      storage.session.setText(this.secret.storeKey + "_share", '0');
-      this.showShareModel();
-    }
-
     const myObserver = new ResizeObserver(entries => {
       // iterate over the entries, do something.
       entries.forEach(entry => {
@@ -469,6 +479,13 @@ export default {
     }
     new QRCode(qrimg, opts);
 
+    let stateInfo = storage.session.getText(this.secret.storeKey + "_share");
+    if (stateInfo == '1') {
+      storage.session.setText(this.secret.storeKey + "_share", '0');
+      setTimeout(() => {
+        this.showShareModel();
+      }, 100); 
+    }
   },
   updated() {
   },
@@ -505,9 +522,7 @@ export default {
         } else if (mins < 10) {
           mins = "0" + mins;
         }
-
         let seds = parseInt(ittl % 60);
-
         if (seds < 0) {
           seds = "00";
         } else if (seds < 10) {
@@ -515,7 +530,6 @@ export default {
         }
         that.state.ttlDesc = mins + ":" + seds;
         that.state.ttl = that.state.initTtl - (new Date().getTime() - that.state.initTime);
-
         if (that.state.ttl <= 0) {
           storage.local.delete(that.secret.storeKey);
           location.reload();
@@ -587,7 +601,7 @@ export default {
 
             let base64String = Buffer.from(ab).toString('base64')
             that.noteForm.text = unwrap(base64String, that.secret.secretKey);
-
+            that.showSkeleton = false;
             // if local is enough, set local
             if (storage.local.getAvailableSize() > 1 * 1024 * 1024) {
               storage.local.setText(that.secret.storeKey, that.state.lock + '|' + that.secret.cipher + '|1|' + that.state.serverTime + '|' + base64String);
@@ -603,6 +617,7 @@ export default {
         }
 
         this.noteForm.text = unwrap(starray[4], this.secret.secretKey);
+        this.showSkeleton = false;
         //this.noteForm.escapeText = getEscapeText(this.noteForm.text);
 
         // local is usable, and set commited flag