mirror of
https://github.com/Xevion/calligraphy.git
synced 2026-01-31 08:23:49 -06:00
slight main App menu adjustments, setup basic FontSelector searching/list retrieval
This commit is contained in:
Xevion
@@ -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}
|
|
||||||
@@ -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}
|
||||||
+1
-1
@@ -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>
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Generated
+775
-14
File diff suppressed because it is too large
Load Diff
+2
-1
@@ -11,7 +11,6 @@
|
|||||||
"axios": "^0.20.0",
|
"axios": "^0.20.0",
|
||||||
"core-js": "^3.6.5",
|
"core-js": "^3.6.5",
|
||||||
"jspdf": "^2.1.0",
|
"jspdf": "^2.1.0",
|
||||||
"sass-loader": "^10.0.1",
|
|
||||||
"vue": "^2.6.11",
|
"vue": "^2.6.11",
|
||||||
"vue-axios": "^2.1.5",
|
"vue-axios": "^2.1.5",
|
||||||
"vue-highlightjs": "^1.3.3",
|
"vue-highlightjs": "^1.3.3",
|
||||||
@@ -24,6 +23,8 @@
|
|||||||
"babel-eslint": "^10.1.0",
|
"babel-eslint": "^10.1.0",
|
||||||
"eslint": "^6.7.2",
|
"eslint": "^6.7.2",
|
||||||
"eslint-plugin-vue": "^6.2.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-material": "^1.0.0-beta-15",
|
||||||
"vue-template-compiler": "^2.6.11"
|
"vue-template-compiler": "^2.6.11"
|
||||||
},
|
},
|
||||||
|
|||||||
+14
-23
@@ -6,21 +6,21 @@
|
|||||||
<span class="md-title">Calligraphy</span>
|
<span class="md-title">Calligraphy</span>
|
||||||
</md-app-toolbar>
|
</md-app-toolbar>
|
||||||
|
|
||||||
<md-app-drawer md-persistent="mini" md-permanent="clipped">
|
<md-app-drawer :md-active.sync="menuVisible" md-persistent="mini" md-permanent="clipped">
|
||||||
<md-list style="height: 100%">
|
<md-list>
|
||||||
<md-list-item @click="toggleMenu">
|
<md-list-item @click="$refs.fontSelector.toggle()" title="Show PDF Preview">
|
||||||
<md-icon>visibility</md-icon>
|
<md-icon>visibility</md-icon>
|
||||||
</md-list-item>
|
</md-list-item>
|
||||||
|
|
||||||
<md-list-item @click="toggleMenu">
|
<md-list-item @click="showSettings" title="Show PDF Settings">
|
||||||
<md-icon>create</md-icon>
|
<md-icon>create</md-icon>
|
||||||
</md-list-item>
|
</md-list-item>
|
||||||
|
|
||||||
<md-list-item @click="toggleMenu">
|
<md-list-item @click="showStylizer" title="Show PDF Style Settings">
|
||||||
<md-icon>colorize</md-icon>
|
<md-icon>colorize</md-icon>
|
||||||
</md-list-item>
|
</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-icon>help</md-icon>
|
||||||
</md-list-item>
|
</md-list-item>
|
||||||
</md-list>
|
</md-list>
|
||||||
@@ -30,7 +30,7 @@
|
|||||||
<div class="md-layout md-center md-alignment-center-space-between">
|
<div class="md-layout md-center md-alignment-center-space-between">
|
||||||
<div class="md-layout-item md-size-50">
|
<div class="md-layout-item md-size-50">
|
||||||
<md-field>
|
<md-field>
|
||||||
<label for="fonturl">Font URL</label>
|
<label>Font URL</label>
|
||||||
<md-input id="fonturl" v-model="fontURL"></md-input>
|
<md-input id="fonturl" v-model="fontURL"></md-input>
|
||||||
</md-field>
|
</md-field>
|
||||||
</div>
|
</div>
|
||||||
@@ -54,6 +54,7 @@
|
|||||||
</md-card>
|
</md-card>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<FontSelector ref="fontSelector"></FontSelector>
|
||||||
</md-app-content>
|
</md-app-content>
|
||||||
</md-app>
|
</md-app>
|
||||||
</div>
|
</div>
|
||||||
@@ -68,7 +69,7 @@ body, html {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
body, #app, .page-container, .md-app {
|
body, #app, .page-container, .md-app, .md-list {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -79,24 +80,16 @@ body, #app, .page-container, .md-app {
|
|||||||
.md-list-item-content > .md-icon:last-child {
|
.md-list-item-content > .md-icon:last-child {
|
||||||
margin-left: 0 !important;
|
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>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import jsPDF from 'jspdf'
|
import jsPDF from 'jspdf'
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
|
import FontSelector from "./components/FontSelector";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'App',
|
name: 'App',
|
||||||
components: {},
|
components: {FontSelector},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
fontURL: "https://themes.googleusercontent.com/static/fonts/anonymouspro/v3/WDf5lZYgdmmKhO8E1AQud--Cz_5MeePnXDAcLNWyBME.ttf",
|
fontURL: "https://themes.googleusercontent.com/static/fonts/anonymouspro/v3/WDf5lZYgdmmKhO8E1AQud--Cz_5MeePnXDAcLNWyBME.ttf",
|
||||||
@@ -109,11 +102,9 @@ export default {
|
|||||||
toggleMenu() {
|
toggleMenu() {
|
||||||
this.menuVisible = !this.menuVisible
|
this.menuVisible = !this.menuVisible
|
||||||
},
|
},
|
||||||
getFonts() {
|
showSettings() {},
|
||||||
this.directAxios.get({
|
showStylizer() {},
|
||||||
url: `https://www.googleapis.com/webfonts/v1/webfonts?key=${process.env.FONT_API_KEY}`
|
showAbout() {},
|
||||||
})
|
|
||||||
},
|
|
||||||
createPDF() {
|
createPDF() {
|
||||||
var doc = new jsPDF();
|
var doc = new jsPDF();
|
||||||
|
|
||||||
|
|||||||
@@ -1,34 +1,71 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<md-dialog :md-active.sync="showDialog">
|
<md-dialog :md-active.sync="visible">
|
||||||
<md-dialog-title>Preferences</md-dialog-title>
|
<md-content v-if="fonts !== null">
|
||||||
|
<div style="margin: 0 1em">
|
||||||
<md-tabs md-dynamic-height>
|
<md-field>
|
||||||
<md-tab md-label="General">
|
<label>Font Family</label>
|
||||||
</md-tab>
|
<md-input v-model="search"></md-input>
|
||||||
|
</md-field>
|
||||||
<md-tab md-label="Activity">
|
</div>
|
||||||
</md-tab>
|
<md-list class="md-scrollbar">
|
||||||
|
<md-list-item v-for="font in results" @click="selectFont(font.index)" :key="font.family">
|
||||||
<md-tab md-label="Account">
|
{{ font.family }}
|
||||||
</md-tab>
|
</md-list-item>
|
||||||
</md-tabs>
|
</md-list>
|
||||||
|
</md-content>
|
||||||
|
<md-progress-spinner v-else md-mode="indeterminate"></md-progress-spinner>
|
||||||
<md-dialog-actions>
|
<md-dialog-actions>
|
||||||
<md-button class="md-primary" @click="showDialog = false">Close</md-button>
|
<md-button class="md-primary" @click="toggle">Close</md-button>
|
||||||
<md-button class="md-primary" @click="showDialog = false">Save</md-button>
|
<md-button class="md-primary" @click="toggle">Save</md-button>
|
||||||
</md-dialog-actions>
|
</md-dialog-actions>
|
||||||
</md-dialog>
|
</md-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.md-menu-content {
|
||||||
|
z-index: 11 !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
axios.baseURL = '';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "FontSelector",
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user