xevion/calligraphy
1
0
Fork 0
mirror of https://github.com/Xevion/calligraphy.git synced 2025-12-14 14:11:20 -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> <template>
<div> <div>
<md-dialog :md-active.sync="visible"> <md-dialog id="font-dialog" :md-active.sync="visible">
<md-content v-if="fonts !== null"> <div v-if="fonts !== null">
<div style="margin: 0 1em"> <md-content>
<md-field> <div>
<label>Font Family</label> <md-field>
<md-input v-model="search"></md-input> <label>Font Family</label>
</md-field> <md-input v-model="search"></md-input>
</div> </md-field>
<md-list class="md-scrollbar"> </div>
<md-list-item v-for="font in results" @click="selectFont(font.index)" :key="font.family"> <md-list class="md-scrollbar">
{{ font.family }} <md-list-item v-for="font in results" @click="selectFont(font.index)" :key="font.family">
</md-list-item> {{ font.family }}
</md-list> </md-list-item>
</md-content> </md-list>
<md-progress-spinner v-else md-mode="indeterminate"></md-progress-spinner> </md-content>
<md-dialog-actions>
<md-button class="md-primary" @click="toggle">Close</md-button> <md-dialog-actions>
<md-button class="md-primary" @click="toggle">Save</md-button> <md-button class="md-primary" @click="toggle">Close</md-button>
</md-dialog-actions> <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> </md-dialog>
</div> </div>
</template> </template>
<style lang="scss"> <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 { .md-menu-content {
z-index: 11 !important; z-index: 11 !important;
} }
@@ -45,7 +72,6 @@ export default {
methods: { methods: {
toggle() { toggle() {
this.visible = !this.visible; this.visible = !this.visible;
// If showing font menu and fonts have not been fetched before // If showing font menu and fonts have not been fetched before
if (this.visible && this.fonts === null) if (this.visible && this.fonts === null)
this.getFonts(); this.getFonts();
@@ -64,7 +90,7 @@ export default {
}, },
computed: { computed: {
results() { 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)) : [];
} }
} }
} }