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

change to drawers, reorganize and attempt mini draw (padding bugs found)

Browse Source
This commit is contained in:
Xevion
2020-08-24 20:59:52 -05:00
parent c34a648f1b
commit 666befaad6
9 changed files with 79 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/App.vue
View File

@@ -1,31 +1,73 @@
<template>
<div id="app">
<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>
<md-input id="fonturl" v-model="fontURL"></md-input>
</md-field>
</div>
<div class="md-layout-item md-size-30 md-layout md-alignment-center-right">
<div class="md-layout-item">
<md-button class="md-raised md-primary" v-on:click="loadFile(fontURL)">
Load Font
<md-icon>cached</md-icon>
</md-button>
<div class="page-container md-layout-row">
<md-app>
<md-app-toolbar class="md-primary">
<span class="md-title">Calligraphy</span>
</md-app-toolbar>
<md-app-drawer :md-active.sync="menuVisible" md-persistent="mini" md-permanent="clipped">
<md-toolbar class="md-transparent" md-elevation="0">
<span>Navigation</span>
</md-toolbar>
<md-list>
<md-list-item>
<!-- <md-button class="md-icon-button" @click="toggleMenu">-->
<md-icon>move_to_inbox</md-icon>
<!-- </md-button>-->
</md-list-item>
<md-list-item>
<md-button class="md-icon-button" @click="toggleMenu">
<md-icon>send</md-icon>
</md-button>
</md-list-item>
<md-list-item>
<md-button class="md-icon-button" @click="toggleMenu">
<md-icon>delete</md-icon>
</md-button>
</md-list-item>
<md-list-item>
<md-button class="md-icon-button" @click="toggleMenu">
<md-icon>error</md-icon>
</md-button>
</md-list-item>
</md-list>
</md-app-drawer>
<md-app-content>
<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>
<md-input id="fonturl" v-model="fontURL"></md-input>
</md-field>
</div>
<div class="md-layout-item md-size-30 md-layout md-alignment-center-right">
<div class="md-layout-item">
<md-button class="md-raised md-primary" v-on:click="loadFile(fontURL)">
Load Font
<md-icon>cached</md-icon>
</md-button>
</div>
<div class="md-layout-item">
<md-button class="md-raised md-primary" v-on:click="createPDF">
Save PDF
<md-icon class="md-size-1x">get_app</md-icon>
</md-button>
</div>
</div>
<div class="md-layout-item md-size-100">
<md-card style="padding: 1.5em 1.5em 1.8em;">
<span id="font-data">{{ fontData }}</span>
</md-card>
</div>
</div>
<div class="md-layout-item">
<md-button class="md-raised md-primary" v-on:click="createPDF">
Save PDF
<md-icon class="md-size-1x">get_app</md-icon>
</md-button>
</div>
</div>
<div class="md-layout-item md-size-100">
<md-card style="padding: 1.5em 1.5em 1.8em;">
<span id="font-data">{{ fontData }}</span>
</md-card>
</div>
</md-app-content>
</md-app>
</div>
</div>
</template>
@@ -38,10 +80,8 @@ body, html {
text-align: center;
}
#app {
width: 50%;
margin: 60px auto;
color: #2c3e50;
body, #app, .page-container, .md-app {
height: 100%;
}
.hljs {
@@ -64,16 +104,19 @@ import axios from 'axios';
export default {
name: 'App',
components: {
},
components: {},
data() {
return {
fontURL: "https://themes.googleusercontent.com/static/fonts/anonymouspro/v3/WDf5lZYgdmmKhO8E1AQud--Cz_5MeePnXDAcLNWyBME.ttf",
fontData: null,
directAxios: axios.create({baseURL: ''}),
menuVisible: false,
}
},
methods: {
toggleMenu() {
this.menuVisible = !this.menuVisible
},
getFonts() {
this.directAxios.get({
url: `https://www.googleapis.com/webfonts/v1/webfonts?key=${process.env.FONT_API_KEY}`