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

Jump to bottom

Day&night button #1071

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Day&night button #1071

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8888fbe
1st commit - Focusing on Functionality
Jun 8, 2024
b2fddcf
2nd commit - Adding styling to the button
Jun 8, 2024
bdea12c
3rd commit - Adjusted button placement and size
Jun 12, 2024
7031b0d
4th commit - Fixing FlexibleMonthCalendar
Jun 12, 2024
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
171 changes: 171 additions & 0 deletions css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1243,3 +1243,174 @@ html[data-view='flexible-day'] .footer .punch-button {
html[data-view='flexible-day'] .punch-button img {
display: none;
}





.switch {
position: relative;
width: 3.75rem; /* Half of the original width */
height: 2rem; /* Half of the original height */
}

.switch input {
position: absolute;
top: 0;
left: 0;
z-index: 2;
opacity: 0;
}

.switch label {
cursor: pointer;
}

.background {
z-index: 1;
position: absolute;
width: 3.75rem;
height: 2rem;
border-radius: 1.25rem; /* Half of the original border-radius */
border: 0.125rem solid #202020; /* Half of the original border thickness */
background: linear-gradient(to right, #484848 0%, #202020 100%);
transition: all 0.3s;
}

.switch input:checked ~ .fill {
background: #E9F8FD;
}

.stars1,
.stars2 {
position: absolute;
height: 0.2rem; /* Half of the original height */
width: 0.2rem; /* Half of the original width */
background: #FFFFFF;
border-radius: 50%;
transition: 0.3s all ease;
}

.stars1 {
top: 3px;
right: 11.5px;
}

.stars2 {
top: 20px;
right: 24px;
}

.stars1:after,
.stars1:before,
.stars2:after,
.stars2:before {
position: absolute;
content: "";
display: block;
height: 0.125rem; /* Half of the original size */
width: 0.125rem; /* Half of the original size */
background: #FFFFFF;
border-radius: 50%;
transition: 0.2s all ease;
}

.stars1:after {
top: 4px;
right: 10px;
}

.stars1:before {
top: 9px;
right: -6px;
}

.stars2:after {
top: -4px;
right: -8px;
}

.stars2:before {
top: 3px;
right: -13px;
}

.sun-moon {
z-index: 2;
position: absolute;
left: 0;
display: inline-block;
height: 1.5rem; /* Half of the original height */
width: 1.5rem; /* Half of the original width */
margin: 0.25rem; /* Half of the original margin */
background: #FFFDF2;
border-radius: 50%;
transition: all 0.5s ease;
border: 0.125rem solid #DEE2C6; /* Half of the original border thickness */
}

.sun-moon .dots {
position: absolute;
top: 1.5px;
left: 11.5px;
height: 0.5rem; /* Half of the original height */
width: 0.5rem; /* Half of the original width */
background: #EFEEDB;
border: 0.125rem solid #DEE2C6; /* Half of the original border thickness */
border-radius: 50%;
transition: 0.4s all ease;
}

.sun-moon .dots:after,
.sun-moon .dots:before {
position: absolute;
content: "";
display: block;
height: 0.5rem; /* Half of the original size */
width: 0.5rem; /* Half of the original size */
background: #EFEEDB;
border: 0.125rem solid #DEE2C6; /* Half of the original border thickness */
border-radius: 50%;
transition: 0.4s all ease;
}



.sun-moon .dots:before {
top: 2.5px;
left: -4px;
}

/* Transition to Sun */
.switch input:checked ~ .sun-moon {
left: calc(100% - 2rem); /* Adjusted left value */
background: #F5EC59;
border-color: #E7C65C;
transform: rotate(-25deg);
}

.switch input:checked ~ .sun-moon .dots,
.switch input:checked ~ .sun-moon .dots:after,
.switch input:checked ~ .sun-moon .dots:before {
background: #FFFFFF;
border-color: #FFFFFF;
}

.switch input:checked ~ .sun-moon .dots {
height: 0.75rem; /* Adjusted height */
width: 0.75rem; /* Adjusted width */
top: 0px;
left: -10px; /* Adjusted left value */
transform: rotate(25deg);
}

.switch input:checked ~ .background .stars1,
.switch input:checked ~ .background .stars2 {
opacity: 0;
transform: translateY(1rem); /* Adjusted translateY value */
}

.switch input:checked ~ .background {
border: 0.125rem solid #78C1D5; /* Half of the original border thickness */
background: linear-gradient(to right, #78C1D5 0%, #BBE7F5 100%);
}
67 changes: 54 additions & 13 deletions renderer/classes/FlexibleDayCalendar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,29 +17,52 @@ class FlexibleDayCalendar extends BaseCalendar
* @param {Object.<string, any>} preferences
* @param {Object.<string, string>} languageData
*/
constructor(preferences, languageData)
{
constructor(preferences, languageData) {
super(preferences, languageData);
this._currentTheme = localStorage.getItem('theme') || 'light'; // Load theme from localStorage or default to 'light'
}

/**
* Initializes the calendar by generating the html code, binding JS events and then drawing according to DB.
*/
_initCalendar()
{
_initCalendar() {
this._generateTemplate();
this._bindEvents();
this._applyInitialTheme(); // Apply the stored or default theme on initialization
}


_bindEvents() {
$('#next-day').on('click', () => { this._nextDay(); });
$('#prev-day').on('click', () => { this._prevDay(); });
$('#switch-view').on('click', () => { this._switchView(); });
$('#current-day').on('click', () => { this._goToCurrentDate(); });
$('#input-calendar-date').on('change', (event) =>
{
$('#input-calendar-date').on('change', (event) => {
const [year, month, day] = $(event.target).val().split('-');
this._goToDate(new Date(year, month-1, day));
this._goToDate(new Date(year, month - 1, day));
});
this._setupThemeToggle();
}

_setupThemeToggle() {
const themeToggle = document.getElementById('toggle');
themeToggle.addEventListener('change', () => {
if (themeToggle.checked) {
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
} else {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
}
});
}

_applyInitialTheme() {
document.documentElement.setAttribute('data-theme', this._currentTheme);
const themeToggle = document.getElementById('toggle');
themeToggle.checked = this._currentTheme === 'dark';
}

/**
* Generates the calendar HTML view.
*/
Expand All @@ -48,32 +71,48 @@ class FlexibleDayCalendar extends BaseCalendar
const body = this._getBody();
$('#calendar').html(body);
$('html').attr('data-view', 'flexible-day');
$('#calendar').html(this._getBody());
$('html').attr('data-view', 'flexible-day');
}

/**
* Returns the header of the page, with the image, name and a message.
* @return {string}
*/
_getPageHeader()
{
_getPageHeader() {
const switchView = `<input id="switch-view" type="image" src="../assets/switch.svg" alt="${this._getTranslation('$BaseCalendar.switch-view')}" title="${this._getTranslation('$BaseCalendar.switch-view')}" height="24" width="24"></input>`;
const todayBut = `<input id="current-day" type="image" src="../assets/calendar.svg" alt="${this._getTranslation('$FlexibleDayCalendar.current-day')}" title="${this._getTranslation('$FlexibleDayCalendar.current-day')}" height="24" width="24"></input>`;
const leftBut = `<input id="prev-day" type="image" src="../assets/left-arrow.svg" alt="${this._getTranslation('$FlexibleDayCalendar.previous-day')}" height="24" width="24"></input>`;
const rightBut = `<input id="next-day" type="image" src="../assets/right-arrow.svg" alt="${this._getTranslation('$FlexibleDayCalendar.next-day')}" height="24" width="24"></input>`;
const title = 'Time to Leave';
return '<div class="title-header">'+
'<div class="title-header-img"><img src="../assets/ttl.svg" height="64" width="64"></div>' +
const themeToggleButton = `
<div id="theme-toggle-area" class="theme-switch-container">
<div class="switch">
<label for="toggle">
<input id="toggle" class="toggle-switch" type="checkbox">
<div class="sun-moon"><div class="dots"></div></div>
<div class="background"><div class="stars1"></div><div class="stars2"></div></div>
<div class="fill"></div>
</label>
</div>
</div>`;

// Theme toggle button moved to the left of the logo
return '<div class="title-header">' +
`<div class="title-header-img"><img src="../assets/ttl.svg" height="64" width="64"></div>` +
`<div class="title-header-text">${title}</div>` +
'<div class="title-header-msg"></div>' +
'</div>' +
'<table class="table-header"><tr>' +
'<table class="table-header"><tr>' +
`${themeToggleButton}` +
'<th class="th but-switch-view" colspan="2">' + switchView + '</th>' +
'<th class="th but-left">' + leftBut + '</th>' +
'<th class="th th-month-name" colspan="18"><div class="div-th-month-name"><span id="header-date"></span></span><input type="date" id="input-calendar-date" required></div></th>' +
'<th class="th but-right">' + rightBut + '</th>' +
'<th class="th but-today" colspan="2">' + todayBut + '</th>' +
'</tr></table>';
'</tr></table>';
}


/**
* Returns the template code of the body of the page.
Expand Down Expand Up @@ -720,6 +759,8 @@ class FlexibleDayCalendar extends BaseCalendar
}
return targetDate;
}


}

export {
Expand Down
62 changes: 49 additions & 13 deletions renderer/classes/FlexibleMonthCalendar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,21 +22,43 @@ class FlexibleMonthCalendar extends BaseCalendar
* @param {Object.<string, any>} preferences
* @param {Object.<string, string>} languageData
*/
constructor(preferences, languageData)
{
constructor(preferences, languageData) {
super(preferences, languageData);
this._currentTheme = localStorage.getItem('theme') || 'light'; // Load theme from localStorage or default to 'light'
}

/**
* Initializes the calendar by generating the html code, binding JS events and then drawing according to DB.
*/
_initCalendar()
{
_initCalendar() {
this._generateTemplate();
this._bindEvents();
this._applyInitialTheme(); // Apply the stored or default theme on initialization
}


_bindEvents() {
$('#next-month').on('click', () => { this._nextMonth(); });
$('#prev-month').on('click', () => { this._prevMonth(); });
$('#current-month').on('click', () => { this._goToCurrentDate(); });
$('#switch-view').on('click', () => { this._switchView(); });
this._setupThemeToggle();
}

_setupThemeToggle() {
const themeToggle = document.getElementById('toggle');
themeToggle.addEventListener('change', () => {
if (themeToggle.checked) {
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
} else {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
}
});
}

_applyInitialTheme() {
document.documentElement.setAttribute('data-theme', this._currentTheme);
const themeToggle = document.getElementById('toggle');
themeToggle.checked = this._currentTheme === 'dark';
}

/**
Expand Down Expand Up @@ -87,23 +109,37 @@ class FlexibleMonthCalendar extends BaseCalendar
/*
* Returns the header of the page, with the image, name and a message.
*/
_getPageHeader()
{
_getPageHeader() {
const switchView = `<input id="switch-view" type="image" src="../assets/switch.svg" alt="${this._getTranslation('$BaseCalendar.switch-view')}" title="${this._getTranslation('$BaseCalendar.switch-view')}" height="24" width="24"></input>`;
const todayBut = `<input id="current-month" type="image" src="../assets/calendar.svg" alt="${this._getTranslation('$FlexibleMonthCalendar.current-month')}" title="${this._getTranslation('$FlexibleMonthCalendar.current-month')}" height="24" width="24"></input>`;
const leftBut = `<input id="prev-month" type="image" src="../assets/left-arrow.svg" alt="${this._getTranslation('$FlexibleMonthCalendar.previous-month')}" height="24" width="24"></input>`;
const rightBut = `<input id="next-month" type="image" src="../assets/right-arrow.svg" alt="${this._getTranslation('$FlexibleMonthCalendar.next-month')}" height="24" width="24"></input>`;
const title = 'Time to Leave';

const themeToggleButton = `
<div id="theme-toggle-area" class="theme-switch-container">
<div class="switch">
<label for="toggle">
<input id="toggle" class="toggle-switch" type="checkbox">
<div class="sun-moon"><div class="dots"></div></div>
<div class="background"><div class="stars1"></div><div class="stars2"></div></div>
<div class="fill"></div>
</label>
</div>
</div>`;

return '<div class="title-header">'+
'<div class="title-header title-header-img"><img src="../assets/ttl.svg" height="64" width="64"></div>' +
`<div class="title-header title-header-text">${title}</div>` +
'<div class="title-header title-header-msg"></div>' +
'<div class="title-header title-header-img"><img src="../assets/ttl.svg" height="64" width="64"></div>' +
`<div class="title-header title-header-text">${title}</div>` +
'<div class="title-header title-header-msg"></div>' +
'</div>' +

'<table class="table-header"><tr>' +
`${themeToggleButton}` +
'<th class="th but-switch-view">' + switchView + '</th>' +
'<th class="th but-left">' + leftBut + '</th>' +
'<th class="th th-month-name" colspan="18"><div class="div-th-month-name" id="month-year"></div></th>' +
'<th class="th but-right">' + rightBut + '</th>' +
'<th class="th but-right">' + rightBut + '</th>' +
'<th class="th but-today">' + todayBut + '</th>' +
'</tr></table>';
}
Expand Down
Loading
Loading