xevion/calligraphy
1
0
Fork 0
mirror of https://github.com/Xevion/calligraphy.git synced 2025-12-14 18:11:19 -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

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>