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

fix FontSelector spinner's centering, size, force display:none for leftover animation, dialog min height

Browse Source
This commit is contained in:
Xevion
2020-08-23 01:59:36 -05:00
parent e2974af95d
commit 3dcf57d381
1 changed files with 47 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/components/FontSelector.vue
View File

@@ -1,29 +1,56 @@
<template>
<div>
<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="toggle">Close</md-button>
<md-button class="md-primary" @click="toggle">Save</md-button>
</md-dialog-actions>
<md-dialog id="font-dialog" :md-active.sync="visible">
<div v-if="fonts !== null">
<md-content>
<div>
<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-dialog-actions>
<md-button class="md-primary" @click="toggle">Close</md-button>
<md-button class="md-primary" @click="toggle">Save</md-button>
</md-dialog-actions>
</div>
<div v-else id="spinner-box" :style="[fonts !== null ? 'display: none' : null]">
<md-progress-spinner md-stroke=5 md-diameter=45 md-mode="indeterminate"></md-progress-spinner>
</div>
</md-dialog>
</div>
</template>
<style lang="scss">
#font-dialog {
.md-content > div {
margin: 0 1em
}
#spinner-box {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
#font-dialog.md-dialog > .md-dialog-container {
min-height: 9em;
}
#font-dialog .md-progress-spinner {
align-content: center;
}
.md-menu-content {
z-index: 11 !important;
}
@@ -45,7 +72,6 @@ export default {
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();
@@ -64,7 +90,7 @@ export default {
},
computed: {
results() {
return this.fonts !== null ? this.fonts.items.filter(font => font.family.includes(this.search)) : [];
return this.fonts !== null ? this.fonts.items.filter(font => font.family.includes(this.search)) : [];
}
}
}