Skip to content

Commit c16bfe2

Browse files
aprilsandersdevaprilsandersdev
committed
add box shadow to tree hierarchy
1 parent 0602956 commit c16bfe2

File tree

3 files changed

+341
-5
lines changed

3 files changed

+341
-5
lines changed

‎src/components/NavBar.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export default {
4949
methods: {
5050
// routing to homepage and tree view
5151
routeHome() {
52-
this.$router.push({ path: '/home' });
52+
this.$router.push({ path: '/' });
5353
},
5454
routeTree() {
5555
this.$router.push({ path: '/tree' });

‎src/components/TreeGraph.vue‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,17 @@
22
<!--the tree; where the hierarchy of your project's components is displayed-->
33
<div class="container">
44
<vue-tree
5-
style="width: 1000px; height: 600px; border: 1px solid gray"
5+
style="width: 1000px;
6+
height: 600px;
7+
border: 2px inset rgb(148, 142, 142);
8+
border-radius: 10px;
9+
box-shadow: 0 0 10px rgb(94, 92, 92);"
610
:dataset="data"
711
:config="treeConfig"
812
>
913
</vue-tree>
1014
<div @click="backToWorkspace">
11-
<h2>Back to workspace</h2>
15+
<h2>Return to Workspace</h2>
1216
</div>
1317
</div>
1418
</template>
@@ -92,15 +96,24 @@ export default {
9296
};
9397
</script>
9498

95-
<style>
99+
<style lang="scss">
100+
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@450&display=swap');
101+
96102
.container {
103+
104+
margin-top: 40px;
97105
display: flex;
98106
flex-direction: column;
99107
align-items: center;
100108
}
101109
110+
h2 {
111+
padding-top: 25px;
112+
font-family: 'Montserrat';
113+
}
114+
102115
h2:hover {
103-
color: green;
116+
color: rgb(34, 173, 34);
104117
cursor: pointer;
105118
}
106119
</style>

‎src/views/SplashView.vue‎

Lines changed: 323 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -316,3 +316,326 @@ video {
316316
align-items: center;
317317
}
318318
</style>
319+
320+
321+
322+
323+
324+
<!-- <template>
325+
<div class="scroll">
326+
<div id="splash">
327+
<div id="top-elements">
328+
<div @click="toHome">
329+
<h4 id="prevue-link">Try PreVue</h4>
330+
</div>
331+
<v-btn width="200px" color="success" class="mt-4" @click="oauth">
332+
Sign in with GitHub
333+
</v-btn>
334+
</div>
335+
<h1 id="prevue">PreVue</h1>
336+
<h2>All in One Prototyping Tool For Vue Developers</h2>
337+
<h3>From Component Architecture to Code Exporting</h3>
338+
<br />
339+
<div id="video-container">
340+
<video src="../assets/PreVueDemo.mp4" muted autoplay loop></video>
341+
</div>
342+
<br />
343+
<p>
344+
<strong>
345+
PreVue allows users to conceptualize and visualize component
346+
architecture by allowing them to :
347+
</strong>
348+
</p>
349+
<ul id="prevue-features">
350+
<li>Create components and preview their associated code</li>
351+
<li>Set up different routes and views</li>
352+
<li>Establish parent-child component relationships</li>
353+
<li>View application hierarchy in tree format</li>
354+
<li>
355+
Export the component architecture as a Vue application created with
356+
default Vite settings.
357+
</li>
358+
</ul>
359+
<br />
360+
<div class="border">
361+
<p>
362+
<strong>
363+
Use PreVue to create projects in single sessions or sign in with
364+
GitHub to save projects and update them anytime.</strong
365+
>
366+
</p>
367+
</div>
368+
<br />
369+
<h2>How to use:</h2>
370+
<h4>Adding Components</h4>
371+
<ul id="list">
372+
<li>Double click on the application icon</li>
373+
<li>
374+
Create components by entering a name and clicking the HTML elements
375+
you need
376+
</li>
377+
<li>Clicked elements will be shown in the right sidebar</li>
378+
<li>Drag the elements to change their order</li>
379+
<li>
380+
Once you're satisfied, click the button to ‘add a component’ and it
381+
will show up in the working area.
382+
</li>
383+
<li>Resize and move components to fit the design you have in mind.</li>
384+
</ul>
385+
<br />
386+
<h4>Editing Components</h4>
387+
<ul id="list">
388+
<li>Double click elements to bring up the modal view</li>
389+
<li>
390+
Add additional elements to a component with a live preview of the
391+
component code
392+
</li>
393+
<li>Drag elements on the right side bar to nest elements</li>
394+
<li>
395+
Establish parent-child component relationships via the dropdown menu
396+
when creating or editing components
397+
</li>
398+
</ul>
399+
<br />
400+
<h4>Adding Routes</h4>
401+
<ul id="list">
402+
<li>
403+
Create different routes that represent different Views for your app.
404+
</li>
405+
<li>
406+
Any components created on a given route will be automatically saved to
407+
that route
408+
</li>
409+
<li>
410+
See a visual representation of your application’s hierarchy by
411+
clicking the ‘Tree’ icon in the navigation bar
412+
</li>
413+
</ul>
414+
<br />
415+
<h4>Saving/Opening/Exporting Projects</h4>
416+
<ul id="list">
417+
<li>
418+
If you ever need to save your current project, click the ‘Save
419+
Project’ icon to save it to PreVue’s database
420+
</li>
421+
<li>
422+
Click ‘Open Project’ to retrieve past projects
423+
</li>
424+
<li>
425+
Once you're satisfied, click the export project icon to export your
426+
awesome project as new Vue application!
427+
</li>
428+
</ul>
429+
<br />
430+
<div class="border">
431+
<h2>PreVue 2.0 Authors</h2>
432+
</div>
433+
<br />
434+
<div id="authors">
435+
<div class="author">
436+
<h3>Jason Boo</h3>
437+
<img src="" />
438+
<div class="links">
439+
<h4><a href="https://github.com/jasonboo123">Github</a></h4>
440+
<h4>
441+
<a href="https://www.linkedin.com/in/jason-boo/">LinkedIn</a>
442+
</h4>
443+
</div>
444+
</div>
445+
<div class="author">
446+
<h3>Robert Drake</h3>
447+
<img src="../assets/robert-photo.jpeg" />
448+
<div class="links">
449+
<h4><a href="https://github.com/rmdrake8">Github</a></h4>
450+
<h4>
451+
<a href="https://www.linkedin.com/in/rmdrake8/">LinkedIn</a>
452+
</h4>
453+
</div>
454+
</div>
455+
<div class="author">
456+
<h3>Sean Flynn</h3>
457+
<img src="../assets/sean-photo.jpeg" />
458+
<div class="links">
459+
<h4><a href="http://github.com/seanflynn5">Github</a></h4>
460+
<h4>
461+
<a href="https://www.linkedin.com/in/sean-g-flynn/">LinkedIn</a>
462+
</h4>
463+
</div>
464+
</div>
465+
<div class="author">
466+
<h3>Zach Pestaina</h3>
467+
<img src="../assets/zach-photo.jpeg" />
468+
<div class="links">
469+
<h4><a href="https://github.com/zachpestaina">Github</a></h4>
470+
<h4>
471+
<a href="https://www.linkedin.com/in/zachpestaina/">LinkedIn</a>
472+
</h4>
473+
</div>
474+
</div>
475+
</div>
476+
<br />
477+
<h2>
478+
Please vist PreVue's
479+
<a href="https://github.com/open-source-labs/PreVue">GitHub</a> if
480+
you're interested to learn how you can contribute!
481+
</h2>
482+
<br />
483+
<div class="border">
484+
<div id="bottom-elements">
485+
<div @click="toHome">
486+
<h4 id="prevue-link">Try PreVue</h4>
487+
</div>
488+
<v-btn width="200px" color="white" class="mt-4" @click="oauth">
489+
Sign in with GitHub
490+
</v-btn>
491+
</div>
492+
</div>
493+
</div>
494+
</div>
495+
</template>
496+
497+
<script>
498+
export default {
499+
name: 'Splash',
500+
501+
beforeCreate() {
502+
fetch('/users/validateSession', {
503+
credentials: 'include'
504+
// headers: {
505+
// 'Access-Control-Allow-Origin': ['localhost:4173']
506+
// }
507+
}).then(res => {
508+
if (res.status === 200) {
509+
this.toHome();
510+
}
511+
});
512+
},
513+
methods: {
514+
oauth() {
515+
// make request to endpoint, to be redirected in server
516+
fetch('/users/oauth', {
517+
method: 'GET',
518+
redirect: 'follow'
519+
520+
// headers: { 'Access-Control-Allow-Origin': ['localhost:4173'] }
521+
})
522+
.then(res => {
523+
return res.json();
524+
})
525+
.then(data => window.location.replace(data));
526+
},
527+
528+
toHome() {
529+
this.$router.push('/home');
530+
}
531+
}
532+
};
533+
</script>
534+
535+
<style scoped>
536+
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap');
537+
538+
html {
539+
height: 140vh;
540+
overflow-y: auto;
541+
}
542+
543+
video {
544+
width: 70%;
545+
height: 70%;
546+
}
547+
548+
#video-container {
549+
display: flex;
550+
align-items: center;
551+
justify-content: center;
552+
}
553+
.scroll {
554+
height: 120vh;
555+
overflow-y: auto;
556+
}
557+
558+
#splash {
559+
background-image: url('../assets/background.jpg');
560+
background-size: contain;
561+
background-repeat: repeat;
562+
background-attachment: fixed;
563+
font-family: 'Nunito', sans-serif;
564+
overflow: visible;
565+
padding: 3em 10em 10em 10em;
566+
margin-bottom: 10vh;
567+
display: flex;
568+
flex-direction: column;
569+
align-items: center;
570+
justify-content: center;
571+
}
572+
573+
#prevue {
574+
font-size: xx-large;
575+
font-family: 'Nunito', sans-serif;
576+
font-weight: 700;
577+
font-size: 2.5em;
578+
color: #39b982;
579+
text-decoration: none;
580+
}
581+
582+
.border {
583+
text-align: center;
584+
padding: 1em;
585+
color: white;
586+
background-color: #39b982;
587+
width: 100vw;
588+
}
589+
590+
#top-elements {
591+
margin-left: auto;
592+
display: flex;
593+
justify-content: flex-end;
594+
align-items: center;
595+
}
596+
597+
#authors {
598+
display: flex;
599+
}
600+
601+
.author {
602+
display: flex;
603+
flex-direction: column;
604+
margin: 0 10px 0 10px;
605+
align-items: center;
606+
}
607+
608+
.author img {
609+
width: 10em;
610+
border-radius: 20%;
611+
}
612+
613+
.links {
614+
display: flex;
615+
}
616+
617+
.links h4 {
618+
margin: 0 0px 0 5px;
619+
}
620+
621+
#list {
622+
margin: 0 10em 0em 10em;
623+
}
624+
625+
#prevue-link {
626+
margin-top: 12px;
627+
margin-right: 20px;
628+
}
629+
630+
#prevue-link:hover {
631+
color: green;
632+
cursor: pointer;
633+
}
634+
635+
#bottom-elements {
636+
display: flex;
637+
margin-bottom: 1em;
638+
justify-content: center;
639+
align-items: center;
640+
}
641+
</style> -->

0 commit comments

Comments
 (0)