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

auto height and markdown

Browse Source
This commit is contained in:
Le Ma
2024-07-13 22:01:42 +12:00
parent 25f6111a95
commit 4694653def
8 changed files with 183 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -22,6 +22,7 @@
"crypto-js": "^4.1.1",
"escape-html": "^1.0.3",
"file-saver": "^2.0.5",
"github-markdown-css": "^5.6.1",
"html2canvas": "^1.4.1",
"pako": "^2.1.0",
"qrcodejs2-fixes": "^0.0.2",
@@ -29,6 +30,7 @@
"vue": "^3.2.13",
"vue-axios": "^3.5.2",
"vue-i18n": "^9.2.2",
"vue-markdown-render": "^2.2.1",
"vue-router": "^4.1.6",
"vuex": "^4.0.0"
},

5
public/index.html
View File

@@ -22,10 +22,7 @@
<%= htmlWebpackPlugin.options.title %>
</title>
<style>
body {
background-color: #dddddd;
height: 100%;
}
</style>
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>

78
src/App.vue
View File

@@ -1,5 +1,5 @@
<template>
<router-view></router-view>
<router-view></router-view>
</template>
<script>
@@ -11,27 +11,61 @@ export default {
</script>
<style>
.ivu-btn:focus {
box-shadow: none !important;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
font-size: medium;
}
body {
-webkit-text-size-adjust: 100% !important;
font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial,
"PingFang SC", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei",
sans-serif;
background-color: #dddddd;
height: 100%;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: medium;
}
.ivu-layout-content {
padding: 0px;
}
.header {
background: #dddddd;
}
.ivu-layout-header {
line-height: normal;
height: auto;
padding: 0px;
}
.layout-footer-center {
background: #dddddd;
text-align: center;
}
.ivu-card-bordered {
border: 0px solid #dcdee2;
border-color: #e8eaec;
}
.layout {
height: 100%;
background: #dddddd;
}
.content {
background: #dddddd;
}
.ivu-btn:focus {
box-shadow: none !important;
}
.monoFt {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
@@ -47,14 +81,14 @@ body {
.noteHeader {
background-color: white;
width:100%;
height:40px;
width: 100%;
height: 40px;
}
.noteHeaderShade {
background-color: white;
width:100%;
height:40px;
width: 100%;
height: 40px;
border-bottom: dashed #ed4014 1px;
}
@@ -78,22 +112,22 @@ body {
}
#noteText::selection {
::selection {
background: #dddddd;
color: #ed4014;
}
#noteText::-moz-selection {
::-moz-selection {
background: #dddddd;
color: #ed4014;
}
#noteText br::selection {
br::selection {
background: #dddddd;
color: #ed4014;
}
#noteText br::-moz-selection {
br::-moz-selection {
background: #dddddd;
color: #ed4014;
}

76
src/views/EditNote.vue
View File

@@ -1,37 +1,6 @@
<style scoped>
.layout {
height: 100%;
background: #dddddd;
}
.header {
background: #dddddd;
}
.ivu-layout-header {
line-height: normal;
height: auto;
padding: 0px;
}
.content {
background: #dddddd;
}
.ivu-layout-content {
padding: 0px;
}
.layout-footer-center {
background: #dddddd;
text-align: center;
}
.ivu-card-bordered {
border: 0px solid #dcdee2;
border-color: #e8eaec;
}
.fnmodal {
align-items: center;
@@ -107,17 +76,18 @@
style="z-index: 100; position: absolute;top:43px;right:0px;left:auto;">
<Button-group vertical size="large">
<Button aria-label="create note" type="error" style="border-radius: 0px;font-size: 24px;"
@click="createNote(); switchMenu(); " icon="md-add"></Button>
@click="createNote(); switchMenu();" icon="md-add"></Button>
<Button aria-label="crop" v-show="model.showDownloadText" type="error"
style="border-radius: 0px;font-size: 24px;" @click="saveImage(); switchMenu();" icon="md-crop"></Button>
style="border-radius: 0px;font-size: 24px;" @click="saveImage(); switchMenu();"
icon="md-crop"></Button>
<Button aria-label="download text" v-show="model.showDownloadText" type="error"
style="border-radius: 0px;font-size: 24px;" @click="downLoadText(); switchMenu();"
icon="md-download"></Button>
<Button type="error" icon="md-trash" style="border-radius: 0px;font-size: 24px;"
@click="showDeleteModel(); switchMenu(); "></Button>
@click="showDeleteModel(); switchMenu();"></Button>
</Button-group>
@@ -141,7 +111,7 @@
</Content>
<Content class="content">
<div style="min-height: 650px;">
<div style="min-height: 250px;">
<Row>
<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 }">
@@ -149,8 +119,8 @@
<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: 35, maxRows: 100000 }" :placeholder="$t('content.noteTip')" @input="recordText"
@on-keydown="recordEventKdown" />
:autosize="{maxRows: 100000 }" :placeholder="$t('content.noteTip')"
@input="recordText" @on-keydown="recordEventKdown" />
</div>
</Form>
@@ -166,18 +136,21 @@
<Footer class="layout-footer-center">2024 &copy; flagnote.com</Footer>
</Layout>
<Modal scrollable v-model="model.showDelete" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
<Modal scrollable v-model="model.showDelete" width="360" footer-hide class-name="fnmodal"
:styles="{ borderRadius: 0 }">
<p style="text-align: center;font-size:medium ;margin-bottom: 20px;">
{{ $t("message.askTodelete") }}
</p>
<p style="text-align: center;">
<Button type="error" :loading="model.deleting" style="border-radius: 0px;font-size: 19px;" @click="dropNote()">{{
$t("button.yes")
}}</Button>
<Button type="error" :loading="model.deleting" style="border-radius: 0px;font-size: 19px;"
@click="dropNote()">{{
$t("button.yes")
}}</Button>
</p>
</Modal>
<Modal scrollable v-model="model.showError" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
<Modal scrollable v-model="model.showError" width="360" footer-hide class-name="fnmodal"
:styles="{ borderRadius: 0 }">
<p style="text-align: center;font-size:medium ;margin-bottom: 20px;">
{{ errorInfo }}
</p>
@@ -301,9 +274,22 @@ export default {
this.bindCtrlAllEvent();
this.bindToTopEvent();
this.$nextTick(() => {
let clientHeight = document.documentElement.clientHeight;
let elementNoteText = document.getElementById("noteText");
elementNoteText.style.minHeight = (clientHeight - 140) + "px";
})
},
mounted() {
window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
window.onresize = () => {
return (() => {
let clientHeight = document.documentElement.clientHeight;
let elementNoteText = document.getElementById("noteText");
elementNoteText.style.minHeight = (clientHeight - 140) + "px";
})()
}
},
updated() {
},
@@ -435,9 +421,11 @@ export default {
//save
this.submitNote();
}
},
},
save() {
return saveNote(this.noteForm,this.state,this.secret);
return saveNote(this.noteForm, this.state, this.secret);
},
validateForm() {
let text = this.noteForm.text;

52
src/views/ErrorNote.vue
View File

@@ -1,41 +1,10 @@
<style scoped>
.layout {
height: 100%;
background: #dddddd;
}
.header {
background: #dddddd;
}
.ivu-layout-header {
line-height: normal;
height: auto;
padding: 0;
}
.content {
background: #dddddd;
}
.ivu-layout-content {
padding: 0;
}
.layout-footer-center {
background: #dddddd;
text-align: center;
}
.ivu-card-bordered {
border: 0px solid #dcdee2;
border-color: #e8eaec;
}
</style>
<style>
</style>
<style></style>
<template>
<div class="layout" onkeydown="keydown">
<Layout>
@@ -44,16 +13,16 @@
<Row>
<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 }">
<div style="background: white;width:100%;height:40px;">
<img style="height:40px;float:left;" src="/static/logo.png">
<div style="background: white;width:100%;height:40px;">
<img style="height:40px;float:left;" src="/static/logo.png">
<div style="float:right;width:auto;">
<Button-group size="large">
<Button type="error" style="margin-left:0px; border-radius: 0px;font-size: 24px;"
@click="createNote()" icon="md-add"></Button>
</Button-group>
</div>
<div style="float:right;width:auto;">
<Button-group size="large">
<Button type="error" style="margin-left:0px; border-radius: 0px;font-size: 24px;"
@click="createNote()" icon="md-add"></Button>
</Button-group>
</div>
</div>
</Col>
</Row>
</div>
@@ -146,4 +115,3 @@ export default {
}
}
</script>

3
src/views/ErrorRoute.vue
View File

@@ -16,3 +16,6 @@ export default {
}
}
</script>
<style scoped>
</style>

64
src/views/ViewMdNote.vue
View File

@@ -1,8 +1,24 @@
<template>
<div class="layout">
<div v-html="noteForm.renderedMarkdown"></div>
<div class="layout" onkeydown="keydown">
<Layout>
<Content class="content">
<div style="min-height: 250px;height: 100%;">
<Row>
<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 }">
<Card :padding="0">
<div id="wrapper" style="border-left: 0px solid #FF3366;" class="markdown-body">
<vue-markdown id="noteMdText" :source="this.noteForm.text" />
</div>
</Card>
</Col>
</Row>
</div>
</Content>
<Footer class="layout-footer-center">
2024 &copy; flagnote.com
</Footer>
</Layout>
</div>
</template>
@@ -11,12 +27,13 @@ import { md5, unwrap } from "@/libs/secret";
import { getStoreKey } from "@/api/lock";
import { getNoteBlob } from "@/api/note";
import storage from "@/libs/storage";
import markdownit from 'markdown-it'
const md = markdownit()
import VueMarkdown from 'vue-markdown-render'
import 'github-markdown-css'
export default {
name: 'ViewMdNote',
components: {},
components: { VueMarkdown },
data() {
return {
noteForm: {
@@ -69,9 +86,20 @@ export default {
return false;
}
this.noteForm.renderedMarkdown = md.render(this.noteForm.text);
}, mounted() {
this.$nextTick(() => {
let clientHeight = document.documentElement.clientHeight;
let elementNoteText = document.getElementById("noteMdText");
elementNoteText.style.minHeight = (clientHeight - 140) + "px";
})
}, mounted() {
window.onresize = () => {
return (() => {
let clientHeight = document.documentElement.clientHeight;
let elementNoteText = document.getElementById("noteMdText");
elementNoteText.style.minHeight = (clientHeight - 140) + "px";
})()
}
},
methods: {
loadText() {
@@ -125,10 +153,18 @@ export default {
</script>
<style scoped>
body,div {
margin:auto;
padding:auto;
.markdown-body {
box-sizing: border-box;
min-width: 200px;
margin: 0 auto;
padding: 15px;
padding-top: 0px;
background: white;
}
</style>
@media (max-width: 767px) {
.markdown-body {
padding: 15px;
}
}
</style>

76
src/views/ViewNote.vue
View File

@@ -1,40 +1,5 @@
<style scoped>
.layout {
height: 100%;
background: #dddddd;
}
.header {
background: #dddddd;
}
.ivu-layout-header {
line-height: normal;
height: auto;
padding: 0px;
}
.content {
background: #dddddd;
}
.ivu-layout-content {
padding: 0px;
}
.layout-footer-center {
background: #dddddd;
text-align: center;
}
.ivu-card-bordered {
border: 0px solid #dcdee2;
border-color: #e8eaec;
}
@@ -226,7 +191,7 @@
style="border-radius: 0px;font-size: 24px;" @click="saveImage(); switchMenu();"></Button>
<Button aria-label="download text" v-show="model.showDownloadText" type="error"
style="border-radius: 0px;font-size: 24px;" @click="downLoadText(); " icon="md-download"></Button>
style="border-radius: 0px;font-size: 24px;" @click="downLoadText();" icon="md-download"></Button>
<Button type="error" icon="md-trash" style="border-radius: 0px;font-size: 24px;"
@click="showDeleteModel(); switchMenu();"></Button>
@@ -256,14 +221,14 @@
</Content>
<Content class="content">
<div style="min-height: 650px;">
<div style="min-height: 250px;">
<Row>
<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 }">
<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: 35 }" />
<Input element-id="noteText" readonly type="textarea" :border="false" v-model="noteForm.text"
:autosize="{}" />
</div>
</Card>
</Col>
@@ -278,8 +243,8 @@
</Layout>
<Modal scrollable v-model="model.showShare" width="360" footer-hide class-name="qrmodal" :styles="{ borderRadius: 0 }"
@on-cancel="closeShareModel">
<Modal scrollable 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%;">
<Tag style="border-radius: 0px;" v-show="model.copyTip" color="#ed4014" text="">Url Copied.</Tag>
</p>
@@ -294,11 +259,12 @@
</div>
<p style="text-align: center;margin-top:10px;">
<Button type="error" style="border-radius: 0px;font-size:19px;" @click="closeShareModel()">{{ $t("button.close")
}}</Button>
}}</Button>
</p>
</Modal>
<Modal scrollable v-model="model.showTtlDelete" width="360" footer-hide class-name="qrmodal" :styles="{ borderRadius: 0 }">
<Modal scrollable v-model="model.showTtlDelete" width="360" footer-hide class-name="qrmodal"
:styles="{ borderRadius: 0 }">
<p style="text-align: center;font-size:medium ;margin-top:20px;">
{{ $t("content.deleteTip") }}{{ state.ttlDesc }}
</p>
@@ -310,7 +276,8 @@
</p>
</Modal>
<Modal scrollable v-model="model.showDelete" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
<Modal scrollable v-model="model.showDelete" width="360" footer-hide class-name="fnmodal"
:styles="{ borderRadius: 0 }">
<p style="text-align: center;font-size:medium;margin-bottom: 20px;">
{{ $t("message.askTodelete") }}
</p>
@@ -321,7 +288,8 @@
</p>
</Modal>
<Modal scrollable v-model="model.showError" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
<Modal scrollable v-model="model.showError" width="360" footer-hide class-name="fnmodal"
:styles="{ borderRadius: 0 }">
<p style="text-align: center;font-size:medium ;margin-bottom: 20px;">
{{ errorInfo }}
</p>
@@ -438,6 +406,12 @@ export default {
return false;
}
this.$nextTick(() => {
let clientHeight = document.documentElement.clientHeight;
let elementNoteText = document.getElementById("noteText");
elementNoteText.style.minHeight = (clientHeight - 140) + "px";
})
},
mounted() {
let qrimg = document.getElementById("qrImg");
@@ -459,6 +433,14 @@ export default {
this.showShareModel();
}, 100);
}
window.onresize = () => {
return (() => {
let clientHeight = document.documentElement.clientHeight;
let elementNoteText = document.getElementById("noteText");
elementNoteText.style.minHeight = (clientHeight - 140) + "px";
})()
}
},
updated() {
},
@@ -467,7 +449,8 @@ export default {
destroyed() {
},
computed: {},
watch: {},
watch: {
},
methods: {
switchMenu() {
this.showMenuState = !this.showMenuState;
@@ -702,4 +685,3 @@ export default {
}
}
</script>