lema/flagnote-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

showSkeleton

Browse Source
This commit is contained in:
Jesse-Ma
2023-04-07 09:26:38 +08:00
parent 612c9b2164
commit 4e32a23eea
3 changed files with 69 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

@@ -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>

22
src/views/EditNote.vue
View File

@@ -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>

99
src/views/ViewNote.vue
View File

@@ -151,11 +151,11 @@
/* #noteMenu button span{
font-size: 20px;
line-height: 20px;
margin-left: 7px !important;
margin-right: 5px !important;
/* 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>
@@ -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"
@click="showTtlDeleteModel()" icon="md-alarm">{{ state.ttlDesc }}</Button>
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()">
<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"
@@ -225,9 +219,9 @@
<!--
<Button type="error" icon="md-refresh" style="border-radius: 0px;font-size: 24px;"
@click="refreshPage()"></Button>
-->
<Button type="error" icon="md-refresh" style="border-radius: 0px;font-size: 24px;"
@click="refreshPage()"></Button>
-->
<Button aria-label="crop" v-show="model.showDownloadText" type="error" icon="md-crop"
style="border-radius: 0px;font-size: 24px;" @click="saveImage(); switchMenu();"></Button>
@@ -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;">
<Input element-id="noteText" readonly type="textarea" :border="false" v-model="noteForm.text"
:autosize="{ minRows: 30, maxRows: 409600 }" :placeholder="$t('content.noteTip')" />
<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: 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;
z-index: 1000;
position: absolute;
top: -2px;
left: 0px;
width: 100%;">
<p style="text-align: center; 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