Skip to content

Commit 96f9b92

Browse files
jvolkerjvolker
committed
improve layout
1 parent 04ee7fa commit 96f9b92

File tree

1 file changed

+106
-92
lines changed

1 file changed

+106
-92
lines changed

‎src/App.vue‎

Lines changed: 106 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -16,35 +16,21 @@
1616
<v-list-item>
1717
<v-list-item-content>
1818
<v-textarea
19-
label="Input"
19+
label="Text input"
2020
v-model="text"
2121
@input="render"
2222
outlined
2323
></v-textarea>
2424

25-
<v-container class="font pa-0 mb-8">
25+
<v-container class="font pa-0 mb-4">
2626
<v-subheader class="mb-2">Font</v-subheader>
2727

28-
<v-row class="mx-0 my-2">
28+
<v-row class="mx-0 mt-2 mb-6">
2929
{{ selectedFontName }}
3030
</v-row>
3131

32-
<v-row class="mx-0 my-4">
33-
<v-btn-toggle
34-
mandatory
35-
small
36-
>
37-
<v-btn small @click="useCustomFont = false">
38-
<v-icon small >mdi-format-list-bulleted</v-icon>
39-
</v-btn>
40-
<v-btn small @click="useCustomFont = true">
41-
<v-icon small >mdi-paperclip</v-icon>
42-
</v-btn>
43-
</v-btn-toggle>
44-
</v-row>
45-
4632
<template v-if="!useCustomFont">
47-
<v-subheader class="mb-2">Default fonts</v-subheader>
33+
<v-subheader class="mb-1">Default fonts</v-subheader>
4834
<v-select
4935
class="mt-1"
5036
:items="fonts"
@@ -53,6 +39,15 @@
5339
v-model="selectedFontName"
5440
@input="selectFont"
5541
></v-select>
42+
<v-btn
43+
class="pl-0"
44+
x-small
45+
plain
46+
href="https://gitlab.com/oskay/svg-fonts"
47+
target="_blank"
48+
>Improve these fonts<v-icon class="ml-0" x-small right> mdi-pencil </v-icon></v-btn
49+
>
50+
5651
</template>
5752
<template v-else>
5853
<v-subheader class="mb-2">Load custom SVG font file</v-subheader>
@@ -66,7 +61,97 @@
6661
@change="loadLocalFont"
6762
></v-file-input>
6863
</template>
64+
65+
<v-row class="mx-0 mt-2 mb-1" justify="center">
66+
<v-btn-toggle
67+
mandatory
68+
small
69+
>
70+
<v-btn small @click="useCustomFont = false">
71+
<v-icon small >mdi-format-list-bulleted</v-icon>
72+
</v-btn>
73+
<v-btn small @click="useCustomFont = true">
74+
<v-icon small >mdi-paperclip</v-icon>
75+
</v-btn>
76+
</v-btn-toggle>
77+
</v-row>
6978
</v-container>
79+
80+
<v-btn v-if="!showFontSmoothing" class="mb-2" small block text @click="showFontSmoothing = true">smoothing (experimental)</v-btn>
81+
<template v-else>
82+
<div class="mt-2 mb-0">
83+
<v-subheader class="mb-2">Smoothing (experimental)</v-subheader>
84+
85+
<v-checkbox
86+
@change="applyFontSettings(true)"
87+
v-model="enableFontSimplification"
88+
label="Simplify"
89+
dense
90+
class="ma-0"
91+
></v-checkbox>
92+
<div v-if="enableFontSimplification">
93+
<v-subheader>Simplify Deviation</v-subheader>
94+
<v-slider
95+
@input="applyFontSettings(true)"
96+
v-model="simplifyFactor"
97+
step="1"
98+
max="30"
99+
min="0"
100+
>
101+
<template v-slot:append>
102+
<v-text-field
103+
v-model="simplifyFactor"
104+
class="mt-0 pt-0"
105+
type="number"
106+
style="width: 45px"
107+
dense
108+
></v-text-field>
109+
</template>
110+
</v-slider>
111+
</div>
112+
</div>
113+
<div class="mt-0">
114+
<v-checkbox
115+
@change="applyFontSettings(true)"
116+
v-model="enableFontSmoothing"
117+
label="Smooth"
118+
dense
119+
class="ma-0"
120+
></v-checkbox>
121+
122+
<v-select
123+
v-if="enableFontSmoothing"
124+
@input="applyFontSettings(true)"
125+
:items="smoothingTypes"
126+
label="Smooth Type"
127+
v-model="smoothingType"
128+
></v-select>
129+
130+
<div v-if="enableFontSmoothing && smoothingType == 'catmull-rom'">
131+
<v-subheader>Smooth amount</v-subheader>
132+
<v-slider
133+
@input="applyFontSettings(true)"
134+
v-model="smoothingFactor"
135+
step="0.01"
136+
max="1"
137+
min="0.01"
138+
>
139+
<template v-slot:append>
140+
<v-text-field
141+
v-model="smoothingFactor"
142+
class="mt-0 pt-0"
143+
type="number"
144+
style="width: 45px"
145+
dense
146+
></v-text-field>
147+
</template>
148+
</v-slider>
149+
</div>
150+
</div>
151+
</template>
152+
153+
<v-divider class="mt-1 mb-6"></v-divider>
154+
70155
<div>
71156
<v-subheader>Scale</v-subheader>
72157
<v-slider
@@ -109,73 +194,8 @@
109194
</template>
110195
</v-slider>
111196
</div>
112-
<div>
113-
<v-checkbox
114-
@change="applyFontSettings(true)"
115-
v-model="enableFontSimplification"
116-
label="Simplify (experimental)"
117-
dense
118-
class="ma-0"
119-
></v-checkbox>
120-
<div v-if="enableFontSimplification">
121-
<v-subheader>Simplify Deviation</v-subheader>
122-
<v-slider
123-
@input="applyFontSettings(true)"
124-
v-model="simplifyFactor"
125-
step="1"
126-
max="30"
127-
min="0"
128-
>
129-
<template v-slot:append>
130-
<v-text-field
131-
v-model="simplifyFactor"
132-
class="mt-0 pt-0"
133-
type="number"
134-
style="width: 45px"
135-
dense
136-
></v-text-field>
137-
</template>
138-
</v-slider>
139-
</div>
140-
</div>
141-
<div>
142-
<v-checkbox
143-
@change="applyFontSettings(true)"
144-
v-model="enableFontSmoothing"
145-
label="Smooth (experimental)"
146-
dense
147-
class="ma-0"
148-
></v-checkbox>
149-
150-
<v-select
151-
v-if="enableFontSmoothing"
152-
@input="applyFontSettings(true)"
153-
:items="smoothingTypes"
154-
label="Smooth Type"
155-
v-model="smoothingType"
156-
></v-select>
157-
158-
<div v-if="enableFontSmoothing && smoothingType == 'catmull-rom'">
159-
<v-subheader>Smooth amount</v-subheader>
160-
<v-slider
161-
@input="applyFontSettings(true)"
162-
v-model="smoothingFactor"
163-
step="0.01"
164-
max="1"
165-
min="0.01"
166-
>
167-
<template v-slot:append>
168-
<v-text-field
169-
v-model="smoothingFactor"
170-
class="mt-0 pt-0"
171-
type="number"
172-
style="width: 45px"
173-
dense
174-
></v-text-field>
175-
</template>
176-
</v-slider>
177-
</div>
178-
</div>
197+
198+
<!-- <v-divider class="mt-0 mb-6"></v-divider> -->
179199

180200
<v-btn color="primary" block elevation="2" @click="exportSVG"
181201
>Download SVG</v-btn
@@ -185,13 +205,6 @@
185205
</v-list>
186206
<template v-slot:append>
187207
<v-divider></v-divider>
188-
<v-btn
189-
large
190-
plain
191-
href="https://gitlab.com/oskay/svg-fonts"
192-
target="_blank"
193-
>Improve these fonts<v-icon right> mdi-pencil </v-icon></v-btn
194-
>
195208
<v-btn
196209
large
197210
plain
@@ -266,6 +279,7 @@ export default {
266279
customFont: null,
267280
strokeWeight: 1,
268281
fontScale: 1,
282+
showFontSmoothing: false,
269283
enableFontSimplification: false,
270284
simplifyFactor: 0,
271285
enableFontSmoothing: false,

0 commit comments

Comments
 (0)