xevion/calligraphy
1
0
Fork 0
mirror of https://github.com/Xevion/calligraphy.git synced 2025-12-07 18:06:34 -06:00
Code Issues Packages Projects Releases Wiki Activity

slight main App menu adjustments, setup basic FontSelector searching/list retrieval

Browse Source
This commit is contained in:
Xevion
2020-08-23 16:23:28 -05:00
parent 11e764aff0
commit e2974af95d
17 changed files with 880 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/css/app.0c8b8368.css
View File

@@ -1 +0,0 @@
body,html{font-family:Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center}#app,.md-app,.page-container,body{height:100%}.hljs{background-color:transparent!important}.md-list-item-content>.md-icon:last-child{margin-left:0!important}#font-data{padding:0 2em;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}

1
docs/css/app.de8e4f7c.css Normal file
View File

@@ -0,0 +1 @@
.md-menu-content{z-index:11!important}body,html{font-family:Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center}#app,.md-app,.md-list,.page-container,body{height:100%}.hljs{background-color:transparent!important}.md-list-item-content>.md-icon:last-child{margin-left:0!important}

2
docs/index.html
View File

@@ -1 +1 @@
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=stylesheet href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons"><link rel=icon href=/calligraphy/favicon.ico><title>calligraphy</title><link href=/calligraphy/js/chunk-2d216214.e238e43d.js rel=prefetch><link href=/calligraphy/js/chunk-2d216257.256ee085.js rel=prefetch><link href=/calligraphy/js/chunk-718c3938.fc7095e4.js rel=prefetch><link href=/calligraphy/css/app.0c8b8368.css rel=preload as=style><link href=/calligraphy/css/chunk-vendors.f0c5b23d.css rel=preload as=style><link href=/calligraphy/js/app.aae8026d.js rel=preload as=script><link href=/calligraphy/js/chunk-vendors.c6a344ee.js rel=preload as=script><link href=/calligraphy/css/chunk-vendors.f0c5b23d.css rel=stylesheet><link href=/calligraphy/css/app.0c8b8368.css rel=stylesheet></head><body><noscript><strong>We're sorry but calligraphy doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/calligraphy/js/chunk-vendors.c6a344ee.js></script><script src=/calligraphy/js/app.aae8026d.js></script></body></html>
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=stylesheet href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons"><link rel=icon href=/calligraphy/favicon.ico><title>calligraphy</title><link href=/calligraphy/js/chunk-2d216214.e238e43d.js rel=prefetch><link href=/calligraphy/js/chunk-2d216257.256ee085.js rel=prefetch><link href=/calligraphy/js/chunk-722a0ca4.615e65cc.js rel=prefetch><link href=/calligraphy/css/app.de8e4f7c.css rel=preload as=style><link href=/calligraphy/css/chunk-vendors.f0c5b23d.css rel=preload as=style><link href=/calligraphy/js/app.18ce6516.js rel=preload as=script><link href=/calligraphy/js/chunk-vendors.582916f7.js rel=preload as=script><link href=/calligraphy/css/chunk-vendors.f0c5b23d.css rel=stylesheet><link href=/calligraphy/css/app.de8e4f7c.css rel=stylesheet></head><body><noscript><strong>We're sorry but calligraphy doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/calligraphy/js/chunk-vendors.582916f7.js></script><script src=/calligraphy/js/app.18ce6516.js></script></body></html>

2
docs/js/app.18ce6516.js Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/js/app.18ce6516.js.map Normal file
View File

File diff suppressed because one or more lines are too long

2
docs/js/app.aae8026d.js
View File

File diff suppressed because one or more lines are too long

1
docs/js/app.aae8026d.js.map
View File

File diff suppressed because one or more lines are too long

1
docs/js/chunk-718c3938.fc7095e4.js.map
View File

File diff suppressed because one or more lines are too long

4
docs/js/chunk-718c3938.fc7095e4.js → docs/js/chunk-722a0ca4.615e65cc.js
View File

File diff suppressed because one or more lines are too long

1
docs/js/chunk-722a0ca4.615e65cc.js.map Normal file
View File

File diff suppressed because one or more lines are too long

44
docs/js/chunk-vendors.c6a344ee.js → docs/js/chunk-vendors.582916f7.js
View File

File diff suppressed because one or more lines are too long

1
docs/js/chunk-vendors.582916f7.js.map Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/js/chunk-vendors.c6a344ee.js.map
View File

File diff suppressed because one or more lines are too long

789
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@@ -11,7 +11,6 @@
"axios": "^0.20.0",
"core-js": "^3.6.5",
"jspdf": "^2.1.0",
"sass-loader": "^10.0.1",
"vue": "^2.6.11",
"vue-axios": "^2.1.5",
"vue-highlightjs": "^1.3.3",
@@ -24,6 +23,8 @@
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^4.14.1",
"sass-loader": "^10.0.1",
"vue-material": "^1.0.0-beta-15",
"vue-template-compiler": "^2.6.11"
},

37
src/App.vue
View File

@@ -6,21 +6,21 @@
<span class="md-title">Calligraphy</span>
</md-app-toolbar>
<md-app-drawer md-persistent="mini" md-permanent="clipped">
<md-list style="height: 100%">
<md-list-item @click="toggleMenu">
<md-app-drawer :md-active.sync="menuVisible" md-persistent="mini" md-permanent="clipped">
<md-list>
<md-list-item @click="$refs.fontSelector.toggle()" title="Show PDF Preview">
<md-icon>visibility</md-icon>
</md-list-item>
<md-list-item @click="toggleMenu">
<md-list-item @click="showSettings" title="Show PDF Settings">
<md-icon>create</md-icon>
</md-list-item>
<md-list-item @click="toggleMenu">
<md-list-item @click="showStylizer" title="Show PDF Style Settings">
<md-icon>colorize</md-icon>
</md-list-item>
<md-list-item @click="toggleMenu" style="margin-top: auto">
<md-list-item @click="showAbout" title="About this App" style="margin-top: auto">
<md-icon>help</md-icon>
</md-list-item>
</md-list>
@@ -30,7 +30,7 @@
<div class="md-layout md-center md-alignment-center-space-between">
<div class="md-layout-item md-size-50">
<md-field>
<label for="fonturl">Font URL</label>
<label>Font URL</label>
<md-input id="fonturl" v-model="fontURL"></md-input>
</md-field>
</div>
@@ -54,6 +54,7 @@
</md-card>
</div>
</div>
<FontSelector ref="fontSelector"></FontSelector>
</md-app-content>
</md-app>
</div>
@@ -68,7 +69,7 @@ body, html {
text-align: center;
}
body, #app, .page-container, .md-app {
body, #app, .page-container, .md-app, .md-list {
height: 100%;
}
@@ -79,24 +80,16 @@ body, #app, .page-container, .md-app {
.md-list-item-content > .md-icon:last-child {
margin-left: 0 !important;
}
#font-data {
padding: 0 2em;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
</style>
<script>
import jsPDF from 'jspdf'
import axios from 'axios';
import FontSelector from "./components/FontSelector";
export default {
name: 'App',
components: {},
components: {FontSelector},
data() {
return {
fontURL: "https://themes.googleusercontent.com/static/fonts/anonymouspro/v3/WDf5lZYgdmmKhO8E1AQud--Cz_5MeePnXDAcLNWyBME.ttf",
@@ -109,11 +102,9 @@ export default {
toggleMenu() {
this.menuVisible = !this.menuVisible
},
getFonts() {
this.directAxios.get({
url: `https://www.googleapis.com/webfonts/v1/webfonts?key=${process.env.FONT_API_KEY}`
})
},
showSettings() {},
showStylizer() {},
showAbout() {},
createPDF() {
var doc = new jsPDF();

79
src/components/FontSelector.vue
View File

@@ -1,34 +1,71 @@
<template>
<div>
<md-dialog :md-active.sync="showDialog">
<md-dialog-title>Preferences</md-dialog-title>
<md-tabs md-dynamic-height>
<md-tab md-label="General">
</md-tab>
<md-tab md-label="Activity">
</md-tab>
<md-tab md-label="Account">
</md-tab>
</md-tabs>
<md-dialog :md-active.sync="visible">
<md-content v-if="fonts !== null">
<div style="margin: 0 1em">
<md-field>
<label>Font Family</label>
<md-input v-model="search"></md-input>
</md-field>
</div>
<md-list class="md-scrollbar">
<md-list-item v-for="font in results" @click="selectFont(font.index)" :key="font.family">
{{ font.family }}
</md-list-item>
</md-list>
</md-content>
<md-progress-spinner v-else md-mode="indeterminate"></md-progress-spinner>
<md-dialog-actions>
<md-button class="md-primary" @click="showDialog = false">Close</md-button>
<md-button class="md-primary" @click="showDialog = false">Save</md-button>
<md-button class="md-primary" @click="toggle">Close</md-button>
<md-button class="md-primary" @click="toggle">Save</md-button>
</md-dialog-actions>
</md-dialog>
</div>
</template>
<style lang="scss">
.md-menu-content {
z-index: 11 !important;
}
</style>
<script>
import axios from 'axios';
axios.baseURL = '';
export default {
name: "FontSelector",
data: () => ({})
data: () => ({
fonts: null,
visible: false,
search: null,
selectedFont: null
}),
methods: {
toggle() {
this.visible = !this.visible;
// If showing font menu and fonts have not been fetched before
if (this.visible && this.fonts === null)
this.getFonts();
},
getFonts() {
axios.get(
`https://www.googleapis.com/webfonts/v1/webfonts?key=${process.env.VUE_APP_FONT_API_KEY}`
).then((res) => {
this.fonts = res.data;
this.fonts.items.forEach((font, index) => font.index = index)
})
},
selectFont(fontIndex) {
this.selectedFont = this.fonts.items[fontIndex];
}
},
computed: {
results() {
return this.fonts !== null ? this.fonts.items.filter(font => font.family.includes(this.search)) : [];
}
}
}
</script>
<style scoped>
</style>