Skip to content

Commit 0037f2e

Browse files
GomDaveGomDave
authored
Merge pull request #39 from oslabs-beta/jaime/fontOptions_and_build
GROUP/fontOptions_and_build
2 parents 33202b9 + 4134565 commit 0037f2e

File tree

6 files changed

+220
-41
lines changed

6 files changed

+220
-41
lines changed

‎src/components/nav-buttons/ExportMenu.vue

Lines changed: 145 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -235,6 +235,113 @@ const writeTemplateTag = (componentName: string) => {
235235
h4: ["<h4", "</h4>"],
236236
h5: ["<h5", "</h5>"],
237237
h6: ["<h6", "</h6>"],
238+
239+
// [OverVue v.10.0] Vuetensils elements
240+
VAlert: [
241+
`<VAlert class="info" dismissible`,
242+
`\n\t\t <a href="https://vuetensils.com/components/Alert.html">How to use Alert</a> \n\t\t This is an alert \n\t </VAlert>`,
243+
],
244+
VDate: ["<VDate", ""],
245+
VDialog: [
246+
`<VDialog class="test" :classes="{ bg: 'bg-black-alpha' }"`,
247+
`\n\t\t <template #toggle="{ bind, on }">
248+
<button v-bind="bind" v-on="on">
249+
Show the dialog
250+
</button>
251+
</template>
252+
<div class="color-black bg-white">
253+
This is the dialog content.
254+
</div> \n\t </VDialog>`,
255+
],
256+
VDrawer: [
257+
`<VDrawer transition="slide-right" bg-transition="fade">
258+
<template #toggle="{ bind, on }">
259+
<button v-bind="bind" v-on="on">
260+
Toggle Drawer
261+
</button>
262+
</template`,
263+
`\n\t\t My drawer content\n\t\t</VDrawer>`,
264+
],
265+
VDropdown: [
266+
`<VDropdown text="This is the dropdown."
267+
<div>
268+
<p>Dropdown content</p>
269+
</div`,
270+
`\n </VDropdown>`,
271+
],
272+
VFile: ["<VFile", ""],
273+
VNotifications: ["<VNotifications", ""],
274+
VResize: [
275+
`<VResize>
276+
<template #default="{ width } ">
277+
<div
278+
class="resize-example"
279+
:class="{
280+
lg: width > 500,
281+
md: width > 300 && width < 500,
282+
sm: width < 300,
283+
}"
284+
>
285+
<img src="https://fillmurray.lucidinternets.com/200/200" alt="description" />
286+
<p>This content is {{ width }}px wide.</p>
287+
</div>
288+
</template`,
289+
`\n </VResize>`,
290+
],
291+
VSkip: [
292+
`<div>
293+
<button>click here to focus</button>
294+
295+
<p>Tab to get to the skip component then press enter to skip to main content</p>
296+
297+
<VSkip to="#main">
298+
Skip To Main Content
299+
</VSkip>
300+
301+
<!-- perhaps a nav here -->
302+
<nav>
303+
<ul class="fake-nav">
304+
<li><a href="#">Example 1</a></li>
305+
<li><a href="#">Example 2</a></li>
306+
<li><a href="#">Example 3</a></li>
307+
<li><a href="#">Example 4</a></li>
308+
<li><a href="#">Example 5</a></li>
309+
<li><a href="#">Example 6</a></li>
310+
</ul>
311+
</nav>
312+
313+
<main id="main">
314+
<p>This is the main content section</p>
315+
<p>It could even be a router-link.</p>
316+
<p>We're adding some extra paragraphs here.</p>
317+
<p>Because otherwise the header blocks this content :)</p>
318+
</main`,
319+
`\n </div>`,
320+
],
321+
VTabs: [
322+
`<VTabs class="styled">
323+
<template #tab-1>Tab 1</template>
324+
<template #panel-1>
325+
Here's the content for tabpanel 1.
326+
</template>
327+
328+
<template #tab-2>Tab 2</template>
329+
<template #panel-2>
330+
Here's the content for tabpanel 2.
331+
</template>
332+
333+
<template #tab-3>Tab 3</template>
334+
<template #panel-3>
335+
Here's the content for tabpanel 3.
336+
</template`,
337+
`\n </VTabs>`,
338+
],
339+
VToggle: [
340+
`<VToggle label="Toggle label"`,
341+
`\n\t\tcontent here \n </VToggle>`,
342+
],
343+
344+
// deprecated by OV10.0: Elements+ elements
238345
"e-button": [`<el-button type="info"`, `</el-button>`],
239346
"e-input": ["<el-input", "</el-input>"],
240347
"e-link": [
@@ -300,6 +407,14 @@ const writeTemplateTag = (componentName: string) => {
300407
],
301408
};
302409
410+
// Helper function that recursively iterates through the given html element's children and their children's children.
411+
// also adds proper indentation to code snippet
412+
// add childComponents of the activeCompnent to the htmlElementMap
413+
const childComponents = componentMap.value[activeComponent.value].children;
414+
// childComponents.forEach((child) => {
415+
// htmlElementMap[child] = [`<${child}`, ""]; //single
416+
// });
417+
303418
const writeNested = (childrenArray: HtmlElement[], indent: string) => {
304419
if (!childrenArray.length) {
305420
return "";
@@ -312,7 +427,8 @@ const writeTemplateTag = (componentName: string) => {
312427
if (!child.text) {
313428
nestedString += `<${child}/>\n`;
314429
} else {
315-
nestedString += htmlElementMap[child.text][0];
430+
if (htmlElementMap[child.text])
431+
nestedString += htmlElementMap[child.text][0];
316432
if (child.class !== "") {
317433
nestedString += " " + "class = " + `"${child.class}"`;
318434
}
@@ -322,20 +438,25 @@ const writeTemplateTag = (componentName: string) => {
322438
if (
323439
child.text === "img" ||
324440
child.text === "input" ||
325-
child.text === "link"
441+
child.text === "link" ||
442+
child.text === "VDate" ||
443+
child.text === "VFile" ||
444+
child.text === "VNotifications"
326445
) {
327-
nestedString += "/>";
446+
nestedString += " `/>";
328447
} else {
329448
nestedString += ">";
330449
}
331450
332451
if (child.children.length) {
333452
nestedString += "\n";
334453
nestedString += writeNested(child.children, indented);
335-
nestedString += indented + htmlElementMap[child.text][1];
454+
if (htmlElementMap[child.text])
455+
nestedString += indented + htmlElementMap[child.text][1];
336456
nestedString += "\n";
337457
} else {
338-
nestedString += htmlElementMap[child.text][1] + "\n";
458+
if (htmlElementMap[child.text])
459+
nestedString += htmlElementMap[child.text][1] + "\n";
339460
}
340461
}
341462
});
@@ -351,14 +472,28 @@ const writeTemplateTag = (componentName: string) => {
351472
outputStr += ` <${el}/>\n`;
352473
} else {
353474
outputStr += ` `;
354-
outputStr += htmlElementMap[el.text][0];
475+
if (htmlElementMap[el.text]) outputStr += htmlElementMap[el.text][0];
355476
//if conditional to check class
356477
if (el.class !== "") {
357478
outputStr += " " + "class = " + `"${el.class}"`;
358479
}
359480
if (el.binding !== "") {
360481
outputStr += " " + "v-model = " + `"${el.binding}"`;
361482
}
483+
484+
// add an extra slash at the end for child Components and single tags
485+
if (
486+
childComponents.includes(el.text) ||
487+
el.text === "img" ||
488+
el.text === "input" ||
489+
el.text === "link" ||
490+
el.text === "VDate" ||
491+
el.text === "VFile" ||
492+
el.text === "VNotifications"
493+
) {
494+
outputStr += " /";
495+
}
496+
362497
outputStr += ">";
363498
if (el.note !== "") {
364499
outputStr += `${el.note}`;
@@ -367,10 +502,11 @@ const writeTemplateTag = (componentName: string) => {
367502
outputStr += "\n";
368503
outputStr += writeNested(el.children, ` `);
369504
outputStr += ` `;
370-
outputStr += htmlElementMap[el.text][1];
505+
if (htmlElementMap[el.text]) outputStr += htmlElementMap[el.text][1];
371506
outputStr += ` \n`;
372507
} else {
373-
outputStr += htmlElementMap[el.text][1] + "\n";
508+
if (htmlElementMap[el.text])
509+
outputStr += htmlElementMap[el.text][1] + "\n";
374510
}
375511
}
376512
}
@@ -638,7 +774,7 @@ const writeStyle = (componentName: string) => {
638774
routes.value[componentName].forEach((element) => {
639775
let styleSelector =
640776
element.htmlAttributes.class === ""
641-
? element.htmlList[0].text
777+
? element.htmlList[0]?.text
642778
: "." + element.htmlAttributes.class;
643779
styleString += `${styleSelector} {\n\tbackground-color: ${element.color};
644780
\tgrid-area: ${element.htmlAttributes.gridArea[0]} / ${element.htmlAttributes.gridArea[1]} / ${element.htmlAttributes.gridArea[2]} / ${element.htmlAttributes.gridArea[3]};

‎src/components/right-sidebar/CodeSnippet.vue

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -195,10 +195,11 @@ const writeTemplateTag = (componentName: string, activeComponent: string) => {
195195
`\n\t\t My drawer content\n\t\t</VDrawer>`,
196196
],
197197
VDropdown: [
198-
`<VDropdown text="This is the dropdown."`,
199-
` \n <div>
200-
<p>Dropdown content</p>
201-
<div/> \n\t </VDropdown>`,
198+
`<VDropdown text="This is the dropdown."
199+
<div>
200+
<p>Dropdown content</p>
201+
</div`,
202+
`\n </VDropdown>`,
202203
],
203204
VFile: ["<VFile", ""],
204205
VNotifications: ["<VNotifications", ""],
@@ -372,12 +373,12 @@ const writeTemplateTag = (componentName: string, activeComponent: string) => {
372373
child.text === "img" ||
373374
child.text === "input" ||
374375
child.text === "link" ||
375-
child.text === "date" ||
376-
child.text === "file" ||
377-
child.text === "notifications" ||
376+
child.text === "VDate" ||
377+
child.text === "VFile" ||
378+
child.text === "VNotifications" ||
378379
childComponents.includes(child.text)
379380
) {
380-
nestedString += "/>";
381+
nestedString += " />";
381382
} else {
382383
nestedString += ">";
383384
}
@@ -423,11 +424,11 @@ const writeTemplateTag = (componentName: string, activeComponent: string) => {
423424
el.text === "img" ||
424425
el.text === "input" ||
425426
el.text === "link" ||
426-
el.text === "date" ||
427-
el.text === "file" ||
428-
el.text === "notifications"
427+
el.text === "VDate" ||
428+
el.text === "VFile" ||
429+
el.text === "VNotifications"
429430
) {
430-
outputStr += "/";
431+
outputStr += " /";
431432
}
432433
433434
outputStr += ">";

‎src/components/right-sidebar/Tree.vue

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -282,10 +282,15 @@ watch(componentMap, () => (treeData.value = buildTree(componentMap.value)), {
282282
justify-content: center;
283283
// padding: 10em;
284284
border-radius: 5px;
285-
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
286-
rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
287-
rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
288285
border: 1px solid white;
286+
box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075),
287+
/* shadow ring 👇 */ 0 0 0 1px hsla(0, 0%, 0%, 0.05),
288+
/* multiple soft shadows 👇 */ 0 0.3px 0.4px hsla(0, 0%, 0%, 0.02),
289+
0 0.9px 1.5px hsla(0, 0%, 0%, 0.045), 0 3.5px 6px hsla(0, 0%, 0%, 0.09);
290+
// box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
291+
// rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
292+
// rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
293+
289294
position: relative;
290295
}
291296

‎src/css/app.scss

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
body {
2-
font-family: "Mukta", sans-serif;
2+
// font-family: "Archivo", sans-serif;
3+
// font-weight: 500;
4+
// font-family: "Inter", sans-serif;
5+
// font-weight: 500;
6+
7+
font-family: "Mukta", sans-serif; // <-- old font (OverVue 9 and prior)
38
color: $menutext;
49
height: 100vh;
510
width: 100vw;

‎src/css/quasar.variables.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ Tip: Use the "Theme Builder" on Quasar's documentation website.
1616
*/
1717

1818
$primary: #737578;
19-
$secondary: #61d18c;
19+
// $secondary: #61d18c; // old color
20+
$secondary: #34ab83;
2021
$accent: #a1ddc2;
2122
$subaccent: #0d0d0d;
2223
$subaccentbtn: #2c384d;

‎src/index.template.html

Lines changed: 46 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,56 @@
33
<head>
44
<title><%= productName %></title>
55

6-
<meta charset="utf-8">
7-
<meta name="description" content="<%= productDescription %>">
8-
<meta name="format-detection" content="telephone=no">
9-
<meta name="msapplication-tap-highlight" content="no">
10-
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
6+
<meta charset="utf-8" />
7+
<meta name="description" content="<%= productDescription %>" />
8+
<meta name="format-detection" content="telephone=no" />
9+
<meta name="msapplication-tap-highlight" content="no" />
10+
<meta
11+
name="viewport"
12+
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>"
13+
/>
1114

12-
<script src="https://kit.fontawesome.com/050e20b677.js" crossorigin="anonymous" data-auto-add-css="false"></script>
13-
15+
<script
16+
src="https://kit.fontawesome.com/050e20b677.js"
17+
crossorigin="anonymous"
18+
data-auto-add-css="false"
19+
></script>
1420

15-
<link rel="icon" type="image/png" href="statics/app-logo-128x128.png">
16-
<link rel="icon" type="image/png" sizes="16x16" href="statics/icons/favicon-16x16.png">
17-
<link rel="icon" type="image/png" sizes="32x32" href="statics/icons/favicon-32x32.png">
18-
<link rel="icon" type="image/png" sizes="96x96" href="statics/icons/favicon-96x96.png">
19-
<link rel="icon" type="image/ico" href="statics/icons/favicon.ico">
21+
<link rel="icon" type="image/png" href="statics/app-logo-128x128.png" />
22+
<link
23+
rel="icon"
24+
type="image/png"
25+
sizes="16x16"
26+
href="statics/icons/favicon-16x16.png"
27+
/>
28+
<link
29+
rel="icon"
30+
type="image/png"
31+
sizes="32x32"
32+
href="statics/icons/favicon-32x32.png"
33+
/>
34+
<link
35+
rel="icon"
36+
type="image/png"
37+
sizes="96x96"
38+
href="statics/icons/favicon-96x96.png"
39+
/>
40+
<link rel="icon" type="image/ico" href="statics/icons/favicon.ico" />
2041

21-
<link rel="preconnect" href="https://fonts.googleapis.com">
22-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
23-
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Mukta:wght@200;300;400;500;600;700;800&family=Nunito+Sans:wght@200;300;400;600;700;800;900&display=swap" rel="stylesheet">
42+
<link rel="preconnect" href="https://fonts.googleapis.com" />
43+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
44+
<link
45+
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Mukta:wght@200;300;400;500;600;700;800&family=Nunito+Sans:wght@200;300;400;600;700;800;900&display=swap"
46+
rel="stylesheet"
47+
/>
2448

49+
<!-- [OverVue v.10.0] fonts -->
50+
<link rel="preconnect" href="https://fonts.googleapis.com" />
51+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
52+
<link
53+
href="https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700&family=Archivo:wght@400;500;600;700;800&family=DM+Sans:opsz,[email protected],300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,800;9..40,900&family=Fira+Code&family=Inter:wght@300;400;500;600;700;800;900&family=Signika:wght@400;500;600;700&family=Spectral:wght@300;400;500;600;700;800&display=swap"
54+
rel="stylesheet"
55+
/>
2556
</head>
2657
<body>
2758
<!-- DO NOT touch the following DIV -->

0 commit comments

Comments
 (0)