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

Add better scrollbar/scrolling abilities, fix spinner stroke/diameter props, input result count

Browse Source
This commit is contained in:
Xevion
2020-08-23 11:07:36 -05:00
parent 3dcf57d381
commit db8dd0cb10
3 changed files with 43 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
package-lock.json generated
View File

@@ -8600,6 +8600,11 @@
"sha.js": "^2.4.8"
}
},
"perfect-scrollbar": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.5.0.tgz",
"integrity": "sha512-NrNHJn5mUGupSiheBTy6x+6SXCFbLlm8fVZh9moIzw/LgqElN5q4ncR4pbCBCYuCJ8Kcl9mYM0NgDxvW+b4LxA=="
},
"performance-now": {
"version": "2.1.0",
"resolved": "https://registry.npm.taobao.org/performance-now/download/performance-now-2.1.0.tgz",
@@ -11701,6 +11706,15 @@
"resolved": "https://registry.npmjs.org/vue-axios/-/vue-axios-2.1.5.tgz",
"integrity": "sha512-th5xVbInVoyIoe+qY+9GCflEVezxAvztD4xpFF39SRQYqpoKD2qkmX8yv08jJG9a2SgNOCjirjJGSwg/wTrbmA=="
},
"vue-custom-scrollbar": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/vue-custom-scrollbar/-/vue-custom-scrollbar-1.3.0.tgz",
"integrity": "sha512-sBedMKf9xaXsQCXrrYfgL2RkItlFIjgHJqtj2ErKSMCvtTy4gTWUgkyoA5nxmR6kDjF8IT4KojKGGe7bAP+ydg==",
"requires": {
"perfect-scrollbar": "^1.5.0",
"vue": "^2.6.11"
}
},
"vue-eslint-parser": {
"version": "7.1.0",
"resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.1.0.tgz",

1
package.json
View File

@@ -13,6 +13,7 @@
"jspdf": "^2.1.0",
"vue": "^2.6.11",
"vue-axios": "^2.1.5",
"vue-custom-scrollbar": "^1.3.0",
"vue-highlightjs": "^1.3.3",
"vue-material-design-icons": "^4.9.0"
},

40
src/components/FontSelector.vue
View File

@@ -7,12 +7,15 @@
<md-field>
<label>Font Family</label>
<md-input v-model="search"></md-input>
<span class="md-suffix">{{ results.length }}</span>
</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>
<vue-custom-scrollbar :settings="{suppressScrollX: true, suppressScrollY: false}" class="scroll-area">
<md-list-item v-for="font in results" @click="selectFont(font.index)" :key="font.family">
{{ font.family }}
</md-list-item>
</vue-custom-scrollbar>
</md-list>
</md-content>
@@ -22,7 +25,7 @@
</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>
<md-progress-spinner :md-stroke="5" :md-diameter="45" md-mode="indeterminate"></md-progress-spinner>
</div>
</md-dialog>
</div>
@@ -41,14 +44,23 @@
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
#font-dialog.md-dialog > .md-dialog-container {
min-height: 9em;
}
&.md-dialog > .md-dialog-container {
min-height: 15em;
}
#font-dialog .md-progress-spinner {
align-content: center;
.md-progress-spinner {
align-content: center;
}
.md-list {
max-height: 15em;
//overflow: auto;
}
.scroll-area {
position: relative;
}
}
.md-menu-content {
@@ -58,15 +70,19 @@
<script>
import axios from 'axios';
import vueCustomScrollbar from 'vue-custom-scrollbar'
axios.baseURL = '';
export default {
name: "FontSelector",
components: {
vueCustomScrollbar
},
data: () => ({
fonts: null,
visible: false,
search: null,
search: "",
selectedFont: null
}),
methods: {