Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Theme select dialog #36

Merged
merged 2 commits into from
Oct 25, 2022
Merged

Theme select dialog #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c2fc407
Core theme-switching dialog and funcitonality Done.
Kabiirk Oct 25, 2022
34e5b7a
Final touches
Kabiirk Oct 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 89 additions & 0 deletions public/dashboard/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -353,4 +353,93 @@ padding: 0.1rem 0.65rem 0.2rem;
.badge--smaller {
font-size: 0.7rem;
padding: 0.05rem 0.4rem 0.15rem;
}

/* Dialog Styles */
.modal{
background-color: rgba(0, 0, 0, 0.8);
position: absolute;
top: 0;
left: 0;
height: 100%;
width:100%;
display: flex;
justify-content: center;
align-items: center;
padding: 2rem 4rem;
}

.hidden{
display: none;
}

.modal-rect{
background-color: white;
border-radius: 5%;
padding: 1rem 2rem 3rem 2rem;
}

.theme-row{
display: flex;
align-content: stretch;
gap: 2rem;
padding-bottom: 2rem;
}

.theme-submit{
background-color:#06d6a0 ;
padding: 1rem;
border-radius: 5%;
}

.theme-submit:hover{
background-color:#32383e;
color: white;
padding: 1rem;
cursor: pointer;
border-radius: 5%;
}

.modal-title{
padding-bottom: 2rem;
}

.theme-card{
justify-content: center;
text-align: center;
}

.theme-img{
padding: 2rem 2rem;
border-radius: 5%;
}

.theme-name{
font-size: 0.75rem;
}

.modal-open{
background-color: #06d6a0;
padding: 1rem;
}

.modal-close{
display: flex;
justify-content: end;
padding:0.5rem ;
}
/* .modal-close:hover{
background-color: #1f5b83;
color: #06d6a0;
cursor: pointer;
} */

.close-icon{
height: 1.5rem;
}

.close-icon:hover{
height: 1.5rem;
stroke: #06d6a0;
cursor: pointer;
}
129 changes: 129 additions & 0 deletions views/dashboard/appearance.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,102 @@
<option value="masscircles">MassCircles</option>
<option value="animatedshape">AnimatedShape</option>
</select>
<a class="modal-open btn">Change theme</a>
</div>

<!-- Theme Select Dialog Box -->
<div class="modal hidden">
<div class="modal-rect">
<div class="modal-close">
<a>
<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" viewBox="0 0 24 24" stroke-width="1.5" stroke="#000000" class="close-icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</a>
</div>
<div class="modal-title">
<h2>Choose Theme</h2>
</div>
<div class="theme-parent">
<div class="theme-row">
<div class="theme-card default">
<div class="theme-img" style="background-color: #008080;">IMG</div>
<p class="theme-name">Default</p>
</div>
<div class="theme-card dark">
<div class="theme-img" style="background-color: #000000; color: white;">IMG</div>
<p class="theme-name">Dark</p>
</div>
<div class="theme-card wave">
<div class="theme-img" style="background-color: #0E2A47; color: white;">IMG</div>
<p class="theme-name">Wave</p>
</div>
<div class="theme-card purple">
<div class="theme-img" style="background-color: #2511B6; color: white;">IMG</div>
<p class="theme-name">Purple</p>
</div>
<div class="theme-card hexagonal">
<div class="theme-img" style="background-color: #074D96; color: white;">IMG</div>
<p class="theme-name">Hexagonal</p>
</div>
</div>
<div class="theme-row purp">
<div class="theme-card bluedot">
<div class="theme-img" style="background-color: #9CA3E6;">IMG</div>
<p class="theme-name">BlueDot</p>
</div>
<div class="theme-card purpledot">
<div class="theme-img" style="background-color: #8782E4;">IMG</div>
<p class="theme-name">PurpleDot</p>
</div>
<div class="theme-card shapes">
<div class="theme-img" style="background-color: #3D3BC1; color: white;">IMG</div>
<p class="theme-name">Shapes</p>
</div>
<div class="theme-card snow">
<div class="theme-img" style="background-color: #24588E; color: white;">IMG</div>
<p class="theme-name">Snow</p>
</div>
<div class="theme-card moon">
<div class="theme-img" style="background-color: #32325D; color: white;">IMG</div>
<p class="theme-name">Moon</p>
</div>
</div>
<div class="theme-row">
<div class="theme-card soundwave">
<div class="theme-img" style="background-color: #043D83; color: white;">IMG</div>
<p class="theme-name">Soundwave</p>
</div>
<div class="theme-card abstractpaper">
<div class="theme-img" style="background-color: #2E409E; color: white;">IMG</div>
<p class="theme-name">Abstractpaper</p>
</div>
<div class="theme-card stockmarket">
<div class="theme-img" style="background-color: #0E2A47; color: white;">IMG</div>
<p class="theme-name">StockMarket</p>
</div>
<div class="theme-card worldmapindia">
<div class="theme-img" style="background-color: #0E2A47; color: white;">IMG</div>
<p class="theme-name">WorldMap-India</p>
</div>
<div class="theme-card sprinkle">
<div class="theme-img" style="background-color: #0E2A47; color: white;">IMG</div>
<p class="theme-name">Sprinkle</p>
</div>
</div>
<div class="theme-row">
<div class="theme-card masscircles">
<div class="theme-img" style="background-color: #0E2A47 ; color: #9BA3E6;">IMG</div>
<p class="theme-name">MassCircles</p>
</div>
<div class="theme-card animatedshape">
<div class="theme-img" style="background-color: #0E2A47; color: #9AA2E5;">IMG</div>
<p class="theme-name">AnimatedShape</p>
</div>
</div>
</div>
<a class="theme-submit">Done</a>
</div>
</div>

<div class="form-group">
Expand Down Expand Up @@ -160,6 +256,39 @@
})
});

const toggleModal = () => {
document.querySelector('.modal').classList.toggle('hidden');
}
const setTheme = (themeName) => {
// const themeCard = document.getElementsByClassName('theme-cards')
const selecttheme = document.querySelector('#profileTheme');
selecttheme.value = themeName;
}

// Toggle Dialog Box
document.querySelector('.modal-open').addEventListener('click', toggleModal);
document.querySelector('.theme-submit').addEventListener('click', toggleModal);
document.querySelector('.modal-close').addEventListener('click', toggleModal);

// Theme setting
document.querySelector('.default').addEventListener('click', function(){setTheme('default')})
document.querySelector('.dark').addEventListener('click', function(){setTheme('dark')})
document.querySelector('.wave').addEventListener('click', function(){setTheme('wave')})
document.querySelector('.purple').addEventListener('click', function(){setTheme('purple')})
document.querySelector('.hexagonal').addEventListener('click', function(){setTheme('hexagonal')})
document.querySelector('.bluedot').addEventListener('click', function(){setTheme('bluedot')})
document.querySelector('.purpledot').addEventListener('click', function(){setTheme('purpledot')})
document.querySelector('.shapes').addEventListener('click', function(){setTheme('shapes')})
document.querySelector('.snow').addEventListener('click', function(){setTheme('snow')})
document.querySelector('.moon').addEventListener('click', function(){setTheme('moon')})
document.querySelector('.soundwave').addEventListener('click', function(){setTheme('soundwave')})
document.querySelector('.abstractpaper').addEventListener('click', function(){setTheme('abstractpaper')})
document.querySelector('.stockmarket').addEventListener('click', function(){setTheme('stockmarket')})
document.querySelector('.worldmapindia').addEventListener('click', function(){setTheme('worldmapindia')})
document.querySelector('.sprinkle').addEventListener('click', function(){setTheme('sprinkle')})
document.querySelector('.masscircles').addEventListener('click', function(){setTheme('masscircles')})
document.querySelector('.animatedshape').addEventListener('click', function(){setTheme('animatedshape')})

</script>

<!-- include footer -->
Expand Down