dtookey
/
Engine_Rebuild
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Labels Milestones

New Pull Request

Completed basic design of navbar, sidebar, search tool, accordions, help and feedback #2

Merged
dtookey merged 24 commits from RebeccaBranch into master 5 years ago
Conversation 1 Commits 24 Files Changed 26
26 changed files with 436 additions and 100 deletions
Show Stats Download Patch File Download Diff File

2
src/assets/conf/resources-landing-page.json
Unescape Escape View File

@ -1,8 +1,6 @@
{ {
"grid-container": { "grid-container": {
"Human Resources": { "Human Resources": {
"description": "Policies, recruitment, onboarding, benefits and compensation", "description": "Policies, recruitment, onboarding, benefits and compensation",
"cards": [ "cards": [

1
src/assets/images/chevron-down-dark.svg
Unescape Escape View File

@ -0,0 +1 @@
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-down" fill="#9d9d9d" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 283 B

1
src/assets/images/chevron-down-light.svg
Unescape Escape View File

@ -0,0 +1 @@
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-down" fill="#080404" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 283 B

1
src/assets/images/chevron-down.svg
Unescape Escape View File

@ -1 +0,0 @@
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-down" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 288 B

1
src/assets/images/chevron-up-dark.svg
Unescape Escape View File

@ -0,0 +1 @@
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-up" fill="#787572" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 264 B

1
src/assets/images/chevron-up-light.svg
Unescape Escape View File

@ -0,0 +1 @@
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-up" fill="#3f4959" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 264 B

1
src/assets/images/chevron-up.svg
Unescape Escape View File

@ -1 +0,0 @@
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-up" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 269 B

12
src/assets/pages/help-about.html
Unescape Escape View File

@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<div class="helpcontent text-activetextaccordion">
<h4>About the Resource Center</h4>
<p></p>
<p class="lead">You rely on a vast amount of resources to do your job. How can you keep track of them all?
<p></p>
<p class="lead">Explore the Resource Center.
<p></p>
<p class="lead">From accounting to workflows, this desktop application can help you find the resources you need.</p>
</div>
</html>

12
src/assets/pages/help-categories.html
Unescape Escape View File

@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<div class="helpcontent text-activetextaccordion">
<h4>Categories</h4>
<p></p>
<p class="lead">What are <i>categories</i>?
<p></p>
<p class="lead">JDSfaulkner has so many helpful resources available to employees that it might be overwhelming to see them all at once. That's why this application categorizes them into topics.</p>
<p></p>
<p class="lead">Click a category in the main workspace to expand a section and view all the related resources. With a section expanded, you can navigate more easily using the scrollbar on the right or by clicking a category heading in the left sidebar.</p>
</div>
</html>

12
src/assets/pages/help-resources.html
Unescape Escape View File

@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<div class="helpcontent text-paragraphtextcolor">
<h4>Resources</h4>
<p></p>
<p class="lead">We get it. <i>Resources</i> can mean many things to many people.</p>
<p></p>
<p class="lead">When it comes to the Resource Center, resources are digital files, storage systems, software and websites that help you do your job.</p>
<p></p>
<p class="lead">The company's top managers decided to create the Resource Center to help new and existing employees become oriented and familiar with the many tools that JDSfaulkner offers.</p>
</div>
</html>

12
src/assets/pages/help-searches.html
Unescape Escape View File

@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<div class="helpcontent text-paragraphtextcolor">
<h4>Searches</h4>
<p></p>
<p class="lead">Save time. Simplify your searches.
<p></p>
<p class="lead">Finding resources that meet your criteria is easy when you use the search tool. At the top of your workspace, type a search term in the rounded search bar. Click "enter" on your keyboard, or click the search icon, and matching results populate your workspace.</p>
<p></p>
<p class="lead">Voil&aacute; &mdash; helpful resources at your fingertips.</p>
</div>
</html>

12
src/assets/pages/help-updates.html
Unescape Escape View File

@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<div class="helpcontent text-paragraphtextcolor">
<h4>Updates</h4>
<p></p>
<p class="lead">Occasionally, you might see computer code moving across your screen for a few seconds after opening the Resource Center.</p>
<p></p>
<p class="lead">What is going on? Resource Center is making an <i>update</i>.</p>
<p></p>
<p class="lead">Developers send updates periodically to improve functionality. If you have a reliable internet connection, updates should occur quickly and automatically.</p>
</div>
</html>

105
src/assets/pages/resources-landing-page.html
Unescape Escape View File

@ -16,65 +16,103 @@
<body hidden ONLOAD="$('body').removeAttr('hidden');" class="bg-secondary"> <body hidden ONLOAD="$('body').removeAttr('hidden');" class="bg-secondary">
<div class="fixed-top d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-0 bg-primary border-top shadow-sm"> <div class="fixed-top d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-0 bg-primary border-top shadow-sm">
<a class="navbar-brand text-navbartext my-0 mr-md-auto"> <a class="navbar-brand my-0 mr-md-auto">
<img src="../images/Asset4.png" height="30" class="d-inline-block align-top" <img src="../images/Asset4.png" height="30" class="d-inline-block align-top"
alt="JDSfaulkner logo"> alt="JDSfaulkner logo">
&nbsp;Resource Center &nbsp;Resource Center
</a> </a>
<nav class="my-2 my-md-0 mr-md-3"> <nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-navbartext" href="#">Help</a> <div class="helpdropdown">
<a class="p-2 text-navbartext" href="#">Feedback</a> <a class="p-2 navigationitem" href="#" role="button" id="helpdropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="-75,4">Help</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
<a class="dropdown-item help-menu-item" onclick="help.openHelpOverlay('help-about.html');">About the Resource Center</a>
<a class="dropdown-item help-menu-item" onclick="help.openHelpOverlay('help-searches.html');">Searches</a>
<a class="dropdown-item help-menu-item" onclick="help.openHelpOverlay('help-categories.html');">Categories</a>
<a class="dropdown-item help-menu-item" onclick="help.openHelpOverlay('help-resources.html');">Resources</a>
<a class="dropdown-item help-menu-item" onclick="help.openHelpOverlay('help-updates.html');">Updates</a>
</div>
</div>
</nav> </nav>
<nav class="my-2 my-md-0 mr-md-3">
<div class="feedbackdropdown">
<a class="p-2 navigationitem" href="#" role="button" id="feedbackdropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Feedback</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<p class="feedback-instructions px-4 py-3">Would you like to send feedback or report an issue? Type your message and click "Submit."</p>
<div class="feedbackentry"><hr/>
<form class="px-4 py-3">
<div class="form-group">
<label for="DropdownFeedbackMessage">Message</label>
<input type="email" class="form-control" id="DropdownFeedbackEmail" placeholder="Type message here">
</div>
<button type="submit" class="btn btn-feedbacksubmitbutton text-feedbacksubmitbuttontext">Submit</button>
</form>
</div>
</div>
</div>
</nav>
<a class="btn btn-outline-themebuttonoutline" id="theme-toggle">Theme</a> <a class="btn btn-outline-themebuttonoutline" id="theme-toggle">Theme</a>
</div> </div>
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<nav class="col-md-2 d-none d-md-block bg-sidebarfill sidebar"> <nav class="col-md-2 d-none d-md-block bg-sidebarfill sidebar">
<div class="sidebar-sticky"> <div class="sidebar-sticky">
<ul class="nav flex-column"> <ul class="nav flex-column">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active text-sidebartext" href="#"> <a class="nav-link active" href="#">
<span data-feather="home"></span> <span data-feather="home"></span>
Top <span class="sr-only">(current)</span> Top <span class="sr-only">(current)</span>
</a> </a>
</li> </li>
</ul> </ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-sidebartext"> <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1">
<span>Resource Categories</span> <span>Resource Categories</span>
<a class="d-flex align-items-center" href="#"> <a class="d-flex align-items-center" href="#">
</a> </a>
</h6> </h6>
<ul class="nav flex-column mb-2 ml-4"> <ul class="nav flex-column mb-2 ml-4">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-sidebartext" href="#human-resources-collapser"> <a class="nav-link" href="#human-resources-collapser">
<span data-feather="list-ul"></span> <span data-feather="list-ul"></span>
Human Resources Human Resources
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-sidebartext" href="#marketing-collapser"> <a class="nav-link" href="#marketing-collapser">
<span data-feather="list-ul"></span> <span data-feather="list-ul"></span>
Marketing Marketing
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-sidebartext" href="#productivity-collapser"> <a class="nav-link" href="#productivity-collapser">
<span data-feather="list-ul"></span> <span data-feather="list-ul"></span>
Productivity Productivity
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-sidebartext" href="#training-collapser"> <a class="nav-link" href="#training-collapser">
<span data-feather="list-ul"></span> <span data-feather="list-ul"></span>
Training Training
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-sidebartext" href="#workflow-collapser"> <a class="nav-link" href="#workflow-collapser">
<span data-feather="list-ul"></span> <span data-feather="list-ul"></span>
Workflow Workflow
</a> </a>
@ -83,24 +121,25 @@
</div> </div>
</nav> </nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4"> <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
<div class="justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3"> <div class="justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3">
<div class="album py-5"> <div class="album py-5">
<div class="sb-example-1">
<div class="sb-example-1"> <div class="search">
<div class="search"> <input type="text" class="searchTerm" placeholder="Search">
<input type="text" class="searchTerm" placeholder="Search"> <button type="submit" class="searchbutton">
<button type="submit" class="searchbutton"> <svg width="100%" height="auto" viewBox="-1 -3 22 22" class="bi bi-search" fill="info"
<svg width="100%" height="auto" viewBox="-1 -3 22 22" class="bi bi-search" fill="info" xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"/> <path fill-rule="evenodd"
<path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/> d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"/>
</svg> <path fill-rule="evenodd"
</button> d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
</svg>
</button>
</div>
</div> </div>
</div>
<div class="album py-5 "> <div class="album py-5 ">
@ -112,18 +151,13 @@
</div> </div>
</div> </div>
<footer class="page-footer">
<div class="container">
<footer class="page-footer"> <p class="float-right">
<div class="container"> <a href="#" class="footer-text">Back to top</a>
<p class="float-left"> </p>
<a href="resources-landing-page.html">&nbsp;</a> </div>
</p> </footer>
<p class="float-right">
<a href="#">Back to top</a>
</p>
</div>
</footer>
</main> </main>
</div> </div>
@ -131,8 +165,9 @@
</body> </body>
<script src="scripts/tsUtil.js"></script> <script src="scripts/tsUtil.js"></script>
<script>loadTSTarget("themes.js");</script> <script>loadTSTarget("themes.js");</script>
<script>let help = loadTSTarget("help.js");</script>
<script src="scripts/index_app.js"></script> <script src="scripts/index_app.js"></script>
</html> </html>

48
src/assets/pages/styles/resources-landing-page.scss
Unescape Escape View File

@ -1,10 +1,15 @@
html { html {
font-size: 14px; font-size: 14px;
} }
@media (min-width: 768px) {
@media (min-width: 876px) {
html { html {
font-size: 16px; font-size: 16px;
} }
.main {
padding-right: 40px;
padding-left: 220px; /* 180 + 40 */
}
} }
.input-group { .input-group {
@ -14,15 +19,15 @@ html {
.main { .main {
background-color: secondary; background-color: secondary;
color: navbartext;
} }
body { body {
font-size: 1rem; font-size: 1rem;
padding-top: 80px; padding-top: 125px;
padding-bottom: 20px; padding-bottom: 20px;
} }
.feather { .feather {
width: 16px; width: 16px;
height: 16 px; height: 16 px;
@ -58,7 +63,10 @@ body {
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 100; /* Behind the navbar */ z-index: 100; /* Behind the navbar */
padding: 0; padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 10px;
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
} }
@ -73,25 +81,6 @@ body {
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
} }
.sidebar .nav-link {
font-weight: 500;
color: navbartext;
}
.sidebar .nav-link .feather {
margin-right: 4px;
color: navbartextfeather;
}
.sidebar .nav-link.active {
color: navbartextactive;
}
.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
color: inherit;
}
.sidebar-heading { .sidebar-heading {
font-size: .75rem; font-size: .75rem;
text-transform: uppercase; text-transform: uppercase;
@ -107,12 +96,6 @@ body {
color: navbartext; color: navbartext;
} }
@media (min-width: 768 px) {
.main {
padding-right: 40px;
padding-left: 220px; /* 180 + 40 */
}
}
.searchbutton { .searchbutton {
background-color: transparent; background-color: transparent;
@ -147,13 +130,16 @@ body {
padding-top: 3rem; padding-top: 3rem;
padding-bottom: 3rem; padding-bottom: 3rem;
background: primary; background: primary;
color: footertext;
} }
.footer p { .footer p {
margin-bottom: .25rem; margin-bottom: .25rem;
margin-left: 25rem; margin-left: 25rem;
padding-left: 25rem; padding-left: 25rem;
color: footertext;
} }
.helpcontent {
margin: 3rem;
padding: 3rem;
font-size: 11px;
}

159
src/assets/pages/styles/theme-base.scss
Unescape Escape View File

@ -50,7 +50,7 @@ $enable-rounded: true !default;
} }
html { html {
height: 100% height: 100%;
} }
body { body {
@ -74,6 +74,25 @@ body {
border-color: map-get($theme-colors, activeborderaccordion); border-color: map-get($theme-colors, activeborderaccordion);
} }
#theme-toggle {
btn-outline: map-get($theme-colors, themebuttonoutline);
}
#theme-toggle:hover {
btn: map-get($theme-colors, themebuttonfill) !important;
color: map-get($theme-colors, themebuttontext) !important;
}
#theme-toggle:focus {
btn: map-get($theme-colors, themebuttonfill) !important;
color: map-get($theme-colors, themebuttontext) !important;
}
#theme-toggle:active {
btn: map-get($theme-colors, themebuttonfill) !important;
color: map-get($theme-colors, themebuttontext) !important;
}
.searchTerm::-webkit-input-placeholder { .searchTerm::-webkit-input-placeholder {
color: map-get($theme-colors, searchhint) !important; color: map-get($theme-colors, searchhint) !important;
} }
@ -124,5 +143,143 @@ body {
outline: none; outline: none;
} }
.sb-example-1 .searchbutton:focus {
width: 40px;
height: 50px;
border: 1px solid;
border-color: map-get($theme-colors, boxborder2);
background-color: map-get($theme-colors, searchbuttonfillfocus);
text-align: center;
fill: map-get($theme-colors, searchiconfocus);
border-radius: 0 25px 25px 0;
cursor: pointer;
font-weight: normal;
box-shadow: none;
outline: none;
}
.navigationitem {
outline: none;
color: map-get($theme-colors, navbartext);
}
.navigationitem:hover {
color: map-get($theme-colors, activetextaccordion);
}
.navbar-brand {
outline: none;
color: map-get($theme-colors, navbarbrandtext);
}
.navbar-brand:hover {
outline: none;
color: map-get($theme-colors, navbarbrandtext);
}
.helpdropdown .dropdown-menu {
background-color: map-get($theme-colors, menudropdownfill);
font-size: 15px;
margin-bottom: 9px;
color: map-get($theme-colors, activetextaccordion) !important;
box-shadow: -1 1 3 1 #cccccc;
}
.feedbackdropdown .dropdown-menu {
background-color: map-get($theme-colors, menudropdownfill);
font-size: 15px;
margin-bottom: 9 px;
color: map-get($theme-colors, activetextaccordion);
box-shadow: -1 1 3 1 #cccccc;
}
#DropdownFeedbackEmail {
background-color: map-get($theme-colors, feedbackmessagefill);
border: 1px solid;
border-color: map-get($theme-colors, feedbackmessageborder);
color: map-get($theme-colors, searchfont);
}
.form-control::-webkit-input-placeholder {
color: map-get($theme-colors, feedbackmessagehint) !important;
}
.help-menu-item {
color: map-get($theme-colors, helpmenudropdowntext) !important;
}
.help-menu-item:hover {
color: map-get($theme-colors, helpmenudropdowntexthover) !important;
background-color: map-get($theme-colors, helpmenudropdownbghover) !important;
}
.footer-text {
color: map-get($theme-colors, footerback);
}
.footer-text:hover {
color: map-get($theme-colors, footerbackhover);
}
.footer-text:focus {
color: map-get($theme-colors, footerbackfocus);
}
.sidebar {
color: map-get($theme-colors, sidebartext); /* This is the RESOURCE CATEGORIES color inactive */
}
.sidebar:hover {
color: map-get($theme-colors, sidebartext); /* This is the RESOURCE CATEGORIES color on hover */
}
.sidebar .nav-link.active {
color: map-get($theme-colors, sidebartext); /* This is the color of the Top item in menu when inactive */
}
.sidebar .nav-link.active:hover {
color: map-get($theme-colors, activetextaccordion); /* This is the color of the Top item in menu when hovered */
background-color: map-get($theme-colors, sidebarbg);
}
.sidebar .nav-link {
font-weight: 500;
color: map-get($theme-colors, sidebartext); /* This is the color of the category names when inactive */
}
.sidebar .nav-link:hover {
font-weight: 500;
color: map-get($theme-colors, activetextaccordion); /* This is the color of the category names when hovered */
background-color: map-get($theme-colors, sidebarbg);
}
.overlay-custom {
position: fixed; /* Sit on top of the page content */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.7); /* Black background with opacity */
z-index: 2000; /* Specify a stack order in case you're using a different order for other elements */
cursor: pointer; /* Add a pointer on hover */
}
.overlay-content {
position: fixed; /* Sit on top of the page content */
width: 50%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0%;
right: 0%;
background-color: map-get($theme-colors, sidebarfill); /* Black background with opacity */
cursor: pointer; /* Add a pointer on hover */
}
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}

24
src/assets/pages/styles/theme-dark.scss
Unescape Escape View File

@ -4,6 +4,7 @@ $theme-colors: (
"success": #808080, "success": #808080,
"info": #2d2d31, "info": #2d2d31,
"warning": #000000, "warning": #000000,
"navbarbrandtext": #9d9d9d,
"navbartext": #808080, "navbartext": #808080,
"navbartextfeather": #303033, "navbartextfeather": #303033,
"navbartextactive": #202022, "navbartextactive": #202022,
@ -16,8 +17,11 @@ $theme-colors: (
"searchfont": #9f9c9a, "searchfont": #9f9c9a,
"sidebarfill": #202023, "sidebarfill": #202023,
"searchbuttonfill": #39393f, "searchbuttonfill": #39393f,
"searchbuttonfillfocus": #3e3e45,
"searchicon": #737373, "searchicon": #737373,
"sidebartext": #787572, "searchiconfocus": #878787,
"sidebartext": #7d7d7d,
"sidebarbg": #29292d,
"webcardimagebackground": #707070, "webcardimagebackground": #707070,
"webcardimagebackgroundhover": #98928F, "webcardimagebackgroundhover": #98928F,
"headertextcolor": #9d9d9d, "headertextcolor": #9d9d9d,
@ -25,13 +29,29 @@ $theme-colors: (
"paragraphtextcolor": #9d9d9d, "paragraphtextcolor": #9d9d9d,
"paragraphtextcolorhover":#d9d2d2, "paragraphtextcolorhover":#d9d2d2,
"themebuttonoutline": #808080, "themebuttonoutline": #808080,
"themebuttonfill": #c0c0c0,
"themebuttontext": #cdcdcd,
"inactiveaccordion": #202023, "inactiveaccordion": #202023,
"activeaccordion": #333337, "activeaccordion": #333337,
"inactivetextaccordion": #787572, "inactivetextaccordion": #787572,
"activetextaccordion": #9d9d9d, "activetextaccordion": #9d9d9d,
"inactiveborderaccordion": #180606, "inactiveborderaccordion": #180606,
"activeborderaccordion": rgba(26, 26, 26, 0), "activeborderaccordion": rgba(26, 26, 26, 0),
"footertext": #7b7b7b, "footertext": #787572,
"chevronup": #787572,
"chevrondown": #9d9d9d,
"menudropdownfill": #4e4e56,
"feedbacksubmitbutton": #0c218c,
"feedbacksubmitbuttontext": #d9d2d2,
"feedbackmessagefill": #3c3c42,
"feedbackmessageborder": #5b5b63,
"feedbackmessagehint": #787572,
"footerback": #787572,
"footerbackfocus": #787572,
"footerbackhover": rgba(157, 157, 157, .8),
"helpmenudropdowntext": #9d9d9d,
"helpmenudropdowntexthover": #a8a8a8,
"helpmenudropdownbghover": #5c5c66,
); );
.theme-button{ .theme-button{

50
src/assets/pages/styles/theme-light.scss
Unescape Escape View File

@ -1,12 +1,13 @@
$theme-colors: ( $theme-colors: (
"primary": #ffffff, "primary": #fdfdfd,
"secondary": #e5e5e5, "secondary": #dcdcdc,
"success": #0B031C, "success": #0B031C,
"info": #ffffff, "info": #f9f9f9,
"warning": #700000, "warning": #700000,
"navbartext": #434344, "navbartext": #3f4959,
"navbartextfeather": #323233, "navbarbrandtext": #3f4a5a,
"navbartextactive": #212122, "navbartextfeather": #080404,
"navbartextactive": #080404,
"inactivecard": #ffffff, "inactivecard": #ffffff,
"activecard": #13a04a, "activecard": #13a04a,
"boxborder": #c0c2c6, "boxborder": #c0c2c6,
@ -14,25 +15,44 @@ $theme-colors: (
"activecardfont": #e1e4e8, "activecardfont": #e1e4e8,
"searchhint": #c0c2c6, "searchhint": #c0c2c6,
"searchfont": #2c2c2c, "searchfont": #2c2c2c,
"sidebarfill": #f6f6f6, "sidebarfill": #efefef,
"sidebartext": #545455, "sidebartext": #3f4959,
"sidebarbg": #e5e5e5,
"searchbuttonfill": #f6f6f6, "searchbuttonfill": #f6f6f6,
"searchicon": #545455, "searchbuttonfillfocus": #f1f1f1,
"searchicon": #3f4959,
"searchiconfocus": #38414f,
"webcardimagebackground": #eeeeee, "webcardimagebackground": #eeeeee,
"webcardimagebackgroundhover": #f0f0f0, "webcardimagebackgroundhover": #f0f0f0,
"headertextcolor": #434344, "headertextcolor": #080404,
"headertextcolorhover": #ffffff, "headertextcolorhover": #ffffff,
"paragraphtextcolor": #434344, "paragraphtextcolor": #080404,
"paragraphtextcolorhover": #ffffff, "paragraphtextcolorhover": #ffffff,
"themebuttonoutline": #434344, "themebuttonoutline": #3f4959,
"inactiveaccordion": #f6f6f6, "themebuttonfill": #dcdcdc,
"themebuttontext": #fdfdfd,
"inactiveaccordion": #efefef,
"activeaccordion": #ffffff, "activeaccordion": #ffffff,
"inactivetextaccordion": #434344, "inactivetextaccordion": #3f4959,
"activetextaccordion": #434344, "activetextaccordion": #080404,
"borderaccordion": #c0c2c6, "borderaccordion": #c0c2c6,
"inactiveborderaccordion": #c0c2c6, "inactiveborderaccordion": #c0c2c6,
"activeborderaccordion": rgba(26, 26, 26, 0), "activeborderaccordion": rgba(26, 26, 26, 0),
"footertext": #434344, "footertext": #434344,
"chevronup": #434344,
"chevrondown": #434344,
"menudropdownfill": #ffffff,
"feedbacksubmitbutton": #099f4a,
"feedbacksubmitbuttontext": #ffffff,
"feedbackmessagefill": #efefef,
"feedbackmessageborder": #dbdbdb,
"feedbackmessagehint": #c0c2c6,
"footerback": #3f4959,
"footerbackfocus": #3f4959,
"footerbackhover": #080404,
"helpmenudropdowntext": #3f4a5a,
"helpmenudropdowntexthover": #080404,
"helpmenudropdownbghover": #f2f2f2,
); );
.theme-button{ .theme-button{

2
src/assets/views/card-category.mustache
Unescape Escape View File

@ -1,7 +1,7 @@
<html lang="en"> <html lang="en">
<div> <div>
<div id="{{{category-key}}}-collapser" class="category-header"> <div id="{{{category-key}}}-collapser" class="category-header">
<div class="d-flex"><h5>{{{category-id-clean}}}</h5><img id="{{{category-key}}}-img" src="../images/chevron-up.svg" class="ml-auto p-2" alt="button"/></div> <div class="d-flex"><h5>{{{category-id-clean}}}</h5><img id="{{{category-key}}}-img" class="ml-auto p-2 chevron-img" src="../images/chevron-up-dark.svg" alt="button"/></div>
<p class="align-self-center">{{{category-description}}}</p> <p class="align-self-center">{{{category-description}}}</p>
</div> </div>
<div id="{{{category-key}}}-container" class="{{{category-key}}}-collapse no-overflow row" style="display:none;"></div> <div id="{{{category-key}}}-container" class="{{{category-key}}}-collapse no-overflow row" style="display:none;"></div>

7
src/assets/views/help-overlay.mustache
Unescape Escape View File

@ -0,0 +1,7 @@
<html lang="en">
<div id="help-overlay" onclick="help.closeOverlay()" class="overlay-custom">
<div class="overlay-content">
{{{content}}}
</div>
</div>
</html>

10
src/assets/views/web-card.mustache
Unescape Escape View File

@ -1,11 +1,11 @@
<html lang="en"> <html lang="en">
<div class="col-md-4 web-card" id="{{{id}}}"> <div class="col-md-4 mb-4 web-card" id="{{{id}}}">
<div class="card mb-4 shadow-sm web-card-background"> <div class="card mb-4 h-100 shadow-sm web-card-background">
<div class="card-body text-center"> <div class="card-body d-flex flex-column text-center">
<h6 class="card-text text-header" style="text-align:center">{{title}}</h6> <h6 class="card-text text-header" style="text-align:center">{{title}}</h6>
<p class="card-text text-paragraph text-align-left">{{description}} </p> <p class="card-text text-paragraph text-align-left">{{description}} </p>
<div class="d-inline-block mx-auto justify-content-between align-items-center web-card-image-background"> <div class="d-inline-block mt-auto mx-auto justify-content-between align-items-center web-card-image-background">
<img class="rounded-circle mx-auto d-block img-fluid" <img id="collapse-image" class="rounded-circle mx-auto d-block img-fluid"
src="{{{imgPath}}}" alt="{{{altText}}}" src="{{{imgPath}}}" alt="{{{altText}}}"
style="max-height:50px"> style="max-height:50px">
</div> </div>

2
src/index.js
Unescape Escape View File

@ -17,7 +17,7 @@ function initialize () {
function createWindow () { function createWindow () {
const windowOptions = { const windowOptions = {
width: 1080, width: 1080,
minWidth: 680, minWidth: 769,
height: 840, height: 840,
title: app.name, title: app.name,
webPreferences: { webPreferences: {

3
src/ts_source/fileutils.ts
Unescape Escape View File

@ -60,6 +60,9 @@ export module FileUtils {
export function getPathToView(templateName: string): string { export function getPathToView(templateName: string): string {
return path.join(getPathToAssets(), "views", templateName + ".mustache") return path.join(getPathToAssets(), "views", templateName + ".mustache")
} }
export function getPathToPage(pageName: string): string {
return path.join(getPathToAssets(), "pages", pageName)
}
export function getPathToImage(imageName: string): string { export function getPathToImage(imageName: string): string {
return path.join(getPathToAssets(), "images", imageName) return path.join(getPathToAssets(), "images", imageName)

19
src/ts_source/help.ts
Unescape Escape View File

@ -0,0 +1,19 @@
import {loadTemplate, readHTML} from "./templates";
let $ = require('jquery')
export function openHelpOverlay(resourceName: string){
let body = $("body");
let content = readHTML(resourceName);
let obj = {"content": content};
let loadedTemplate = loadTemplate("help-overlay.mustache", obj, (x)=>{});
let wrapper = $(loadedTemplate);
body.append(wrapper)
}
export function closeOverlay(){
$("#help-overlay").remove();
}

9
src/ts_source/templates.ts
Unescape Escape View File

@ -20,7 +20,7 @@ export function cacheTemplates() {
}); });
} }
export function loadTemplate(filename: string, obj: object, cb: TemplateCallbackType) { export function loadTemplate(filename: string, obj: object, cb: TemplateCallbackType): string {
let contents = templateCache[filename]; let contents = templateCache[filename];
if (!contents) throw new Error("No such template: " + filename); if (!contents) throw new Error("No such template: " + filename);
let rendered = Mustache.render(contents, obj) let rendered = Mustache.render(contents, obj)
@ -42,6 +42,11 @@ function createId(fileName: String) {
return crypto.createHash('md5').update(fileName).digest('hex'); return crypto.createHash('md5').update(fileName).digest('hex');
} }
module.exports = {loadTemplate, loadTemplateSingle} export function readHTML(fileName: string): string{
let baseFilePath = FileUtils.getPathToPage(fileName);
return fs.readFileSync(baseFilePath, "utf8").toString();
}
module.exports = {loadTemplate, loadTemplateSingle, readHTML}
cacheTemplates() cacheTemplates()

16
src/ts_source/themes.ts
Unescape Escape View File

@ -2,6 +2,8 @@ const $ = require('jquery');
import {ConfigPaths, Configurator} from "./fileutils"; import {ConfigPaths, Configurator} from "./fileutils";
export module Themes { export module Themes {
export enum AppTheme { export enum AppTheme {
Light = "theme-light", Light = "theme-light",
Dark = "theme-dark" Dark = "theme-dark"
@ -37,6 +39,20 @@ export module Themes {
} }
} }
head.prepend(buildCSSLink(newResource)); head.prepend(buildCSSLink(newResource));
let images = document.querySelectorAll(".chevron-img");
for (let i = 0, l = images.length; i < l; i++) {
let imageMatchRegex = /\.\.\/images\/chevron-(\w+)-(\w+)\.svg$/ig;
let element = images[i];
let srcImg = element.getAttribute("src");
let groups = imageMatchRegex.exec(srcImg);
let direction = groups[1];
let theme = groups[2];
let newTheme = theme === "dark" ? "light" : "dark";
element.setAttribute("src", `../images/chevron-${direction}-${newTheme}.svg`);
}
} }
function getButtonClassFromAppTheme(t: AppTheme): string { function getButtonClassFromAppTheme(t: AppTheme): string {

12
src/ts_source/viewFactory.ts
Unescape Escape View File

@ -2,6 +2,8 @@ import {Configurator, FileUtils} from './fileutils'
import {loadTemplate, loadTemplateSingle} from "./templates" import {loadTemplate, loadTemplateSingle} from "./templates"
const shell = require('electron').shell; const shell = require('electron').shell;
const fs = require('fs');
export class CardModel { export class CardModel {
@ -70,18 +72,23 @@ export function buildWebCardsFromConfig(configName: string) {
let collapseButton = $(`#${categoryKey}-collapser`); let collapseButton = $(`#${categoryKey}-collapser`);
collapseButton.on("click", () => { collapseButton.on("click", () => {
let imageMatchRegex = /\.\.\/images\/chevron-(\w+)-(\w+)\.svg$/ig;
let collapsable = $(`#${categoryKey}-container`); let collapsable = $(`#${categoryKey}-container`);
let collapseButton = $(`#${categoryKey}-collapser`); let collapseButton = $(`#${categoryKey}-collapser`);
let collapseImg = $(`#${categoryKey}-img`); let collapseImg = $(`#${categoryKey}-img`);
if ("none" === collapsable.css('display')) { if ("none" === collapsable.css('display')) {
collapsable.css("display", ""); collapsable.css("display", "");
collapseButton.addClass("active"); collapseButton.addClass("active");
collapseImg.attr("src", "../images/chevron-down.svg");
} else { } else {
collapsable.css("display", "none"); collapsable.css("display", "none");
collapseButton.removeClass("active"); collapseButton.removeClass("active");
collapseImg.attr("src", "../images/chevron-up.svg");
} }
let srcImg = collapseImg.attr("src");
let groups = imageMatchRegex.exec(srcImg);
let direction = groups[1];
let theme = groups[2];
let newDirection = direction === "up"? "down": "up";
collapseImg.attr("src", `../images/chevron-${newDirection}-${theme}.svg`);
}); });
for (let j = 0, m = contentList.length; j < m; j++) { for (let j = 0, m = contentList.length; j < m; j++) {
@ -142,3 +149,4 @@ function launchDocument(filename: string) {
function launchWebsite(url: string) { function launchWebsite(url: string) {
shell.openItem(url); shell.openItem(url);
} }

Write Preview
Loading…
Cancel
Save