From 8888fbeea6c67250c6659db858eb753938d40f19 Mon Sep 17 00:00:00 2001 From: Nikolaos Douranos Date: Sat, 8 Jun 2024 13:29:15 +0300 Subject: [PATCH 1/4] 1st commit - Focusing on Functionality --- src/calendar.html | 8 ++++++++ src/calendar.js | 9 +++++++++ 2 files changed, 17 insertions(+) diff --git a/src/calendar.html b/src/calendar.html index c85cc1b78..ab5fbc556 100644 --- a/src/calendar.html +++ b/src/calendar.html @@ -19,7 +19,15 @@ +
+ + +
+ diff --git a/src/calendar.js b/src/calendar.js index 04a91de24..1ae94135e 100644 --- a/src/calendar.js +++ b/src/calendar.js @@ -76,3 +76,12 @@ $(async() => const preferences = await window.mainApi.getUserPreferencesPromise(); setupCalendar(preferences); }); + +document.addEventListener('DOMContentLoaded', function() { + const themeToggle = document.getElementById('theme-toggle'); + themeToggle.addEventListener('change', function() { + const theme = themeToggle.value; + document.documentElement.setAttribute('data-theme', theme); + // Additional code to persist theme selection can be added here + }); +}); From b2fddcfacd9ecdefdbb15b7cc932ad84be000a62 Mon Sep 17 00:00:00 2001 From: Nikolaos Douranos Date: Sat, 8 Jun 2024 15:05:26 +0300 Subject: [PATCH 2/4] 2nd commit - Adding styling to the button --- css/styles.css | 175 ++++++++++++++++++++++++++++++++++++++++++++++ src/calendar.html | 19 ++--- src/calendar.js | 20 ++++-- 3 files changed, 202 insertions(+), 12 deletions(-) diff --git a/css/styles.css b/css/styles.css index ba97049f7..8d03472e7 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1243,3 +1243,178 @@ html[data-view='flexible-day'] .footer .punch-button { html[data-view='flexible-day'] .punch-button img { display: none; } + + + + + +.switch { + position: relative; + width: 7.5rem; + height: 4rem; +} + +.switch input { + position: absolute; + top: 0; + left: 0; + z-index: 2; + opacity: 0; +} + +.switch label { + cursor: pointer; +} + +.background { + z-index: 1; + position: absolute; + width: 7.5rem; + height: 4rem; + border-radius: 2.5rem; + border: 0.25rem solid #202020; + 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.4rem; + width: 0.4rem; + background: #FFFFFF; + border-radius: 50%; + transition: 0.3s all ease; +} + +.stars1 { + top: 6px; + right: 23px; +} + +.stars2 { + top: 40px; + right: 48px; +} + +.stars1:after, +.stars1:before, +.stars2:after, +.stars2:before { + position: absolute; + content: ""; + display: block; + height: 0.25rem; + width: 0.25rem; + background: #FFFFFF; + border-radius: 50%; + transition: 0.2s all ease; +} + +.stars1:after { + top: 8px; + right: 20px; +} + +.stars1:before { + top: 18px; + right: -12px; +} + +.stars2:after { + top: -8px; + right: -16px; +} + +.stars2:before { + top: 6px; + right: -26px; +} + +.sun-moon { + z-index: 2; + position: absolute; + left: 0; + display: inline-block; + height: 3rem; + width: 3rem; + margin: 0.5rem; + background: #FFFDF2; + border-radius: 50%; + transition: all 0.5s ease; + border: 0.25rem solid #DEE2C6; +} + +.sun-moon .dots { + position: absolute; + top: 3px; + left: 23px; + height: 1rem; + width: 1rem; + background: #EFEEDB; + border: 0.25rem solid #DEE2C6; + border-radius: 50%; + transition: 0.4s all ease; +} + +.sun-moon .dots:after, +.sun-moon .dots:before { + position: absolute; + content: ""; + display: block; + height: 0.25rem; + width: 0.25rem; + background: #EFEEDB; + border: 0.25rem solid #DEE2C6; + border-radius: 50%; + transition: 0.4s all ease; +} + +.sun-moon .dots:after { + top: -4px; + left: -26px; +} + +.sun-moon .dots:before { + top: 18px; + left: -10px; +} + +/* Transition to Sun */ +.switch input:checked ~ .sun-moon { + left: calc(100% - 4rem); + 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: 1.5rem; + width: 1.5rem; + top: 0px; + left: -20px; + transform: rotate(25deg); +} + +.switch input:checked ~ .background .stars1, +.switch input:checked ~ .background .stars2 { + opacity: 0; + transform: translateY(2rem); +} + +.switch input:checked ~ .background { + border: 0.25rem solid #78C1D5; + background: linear-gradient(to right, #78C1D5 0%, #BBE7F5 100%); +} diff --git a/src/calendar.html b/src/calendar.html index ab5fbc556..34af45e12 100644 --- a/src/calendar.html +++ b/src/calendar.html @@ -19,15 +19,18 @@ -
- - -
+
+
+ +
+
+
- diff --git a/src/calendar.js b/src/calendar.js index 1ae94135e..caf5c5577 100644 --- a/src/calendar.js +++ b/src/calendar.js @@ -78,10 +78,22 @@ $(async() => }); document.addEventListener('DOMContentLoaded', function() { - const themeToggle = document.getElementById('theme-toggle'); + const themeToggle = document.getElementById('toggle'); themeToggle.addEventListener('change', function() { - const theme = themeToggle.value; - document.documentElement.setAttribute('data-theme', theme); - // Additional code to persist theme selection can be added here + if (this.checked) { + document.documentElement.setAttribute('data-theme', 'light'); + // Optionally save user preference for theme here, e.g., to local storage + } else { + document.documentElement.setAttribute('data-theme', 'dark'); + // Optionally save user preference for theme here, e.g., to local storage + } }); + + // Optionally load and apply user preference for theme on page load + const currentTheme = localStorage.getItem('theme') || 'light'; // Assuming 'light' as default + document.documentElement.setAttribute('data-theme', currentTheme); + themeToggle.checked = currentTheme === 'dark'; }); + + + From bdea12cbe2f2fe06a13a0d47a06a47bcfd1f9359 Mon Sep 17 00:00:00 2001 From: Nikolaos Douranos Date: Wed, 12 Jun 2024 15:38:44 +0300 Subject: [PATCH 3/4] 3rd commit - Adjusted button placement and size --- css/styles.css | 90 +++++++++++------------ renderer/classes/FlexibleDayCalendar.js | 67 +++++++++++++---- renderer/classes/FlexibleMonthCalendar.js | 71 +++++++++++++----- src/calendar.html | 11 --- src/calendar.js | 16 ---- 5 files changed, 150 insertions(+), 105 deletions(-) diff --git a/css/styles.css b/css/styles.css index 8d03472e7..c997ff0a8 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1250,8 +1250,8 @@ html[data-view='flexible-day'] .punch-button img { .switch { position: relative; - width: 7.5rem; - height: 4rem; + width: 3.75rem; /* Half of the original width */ + height: 2rem; /* Half of the original height */ } .switch input { @@ -1269,15 +1269,14 @@ html[data-view='flexible-day'] .punch-button img { .background { z-index: 1; position: absolute; - width: 7.5rem; - height: 4rem; - border-radius: 2.5rem; - border: 0.25rem solid #202020; + 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; } @@ -1285,21 +1284,21 @@ html[data-view='flexible-day'] .punch-button img { .stars1, .stars2 { position: absolute; - height: 0.4rem; - width: 0.4rem; + 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: 6px; - right: 23px; + top: 3px; + right: 11.5px; } .stars2 { - top: 40px; - right: 48px; + top: 20px; + right: 24px; } .stars1:after, @@ -1309,31 +1308,31 @@ html[data-view='flexible-day'] .punch-button img { position: absolute; content: ""; display: block; - height: 0.25rem; - width: 0.25rem; + 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: 8px; - right: 20px; + top: 4px; + right: 10px; } .stars1:before { - top: 18px; - right: -12px; + top: 9px; + right: -6px; } .stars2:after { - top: -8px; - right: -16px; + top: -4px; + right: -8px; } .stars2:before { - top: 6px; - right: -26px; + top: 3px; + right: -13px; } .sun-moon { @@ -1341,23 +1340,23 @@ html[data-view='flexible-day'] .punch-button img { position: absolute; left: 0; display: inline-block; - height: 3rem; - width: 3rem; - margin: 0.5rem; + 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.25rem solid #DEE2C6; + border: 0.125rem solid #DEE2C6; /* Half of the original border thickness */ } .sun-moon .dots { position: absolute; - top: 3px; - left: 23px; - height: 1rem; - width: 1rem; + 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.25rem solid #DEE2C6; + border: 0.125rem solid #DEE2C6; /* Half of the original border thickness */ border-radius: 50%; transition: 0.4s all ease; } @@ -1367,27 +1366,24 @@ html[data-view='flexible-day'] .punch-button img { position: absolute; content: ""; display: block; - height: 0.25rem; - width: 0.25rem; + height: 0.5rem; /* Half of the original size */ + width: 0.5rem; /* Half of the original size */ background: #EFEEDB; - border: 0.25rem solid #DEE2C6; + border: 0.125rem solid #DEE2C6; /* Half of the original border thickness */ border-radius: 50%; transition: 0.4s all ease; } -.sun-moon .dots:after { - top: -4px; - left: -26px; -} + .sun-moon .dots:before { - top: 18px; - left: -10px; + top: 2.5px; + left: -4px; } /* Transition to Sun */ .switch input:checked ~ .sun-moon { - left: calc(100% - 4rem); + left: calc(100% - 2rem); /* Adjusted left value */ background: #F5EC59; border-color: #E7C65C; transform: rotate(-25deg); @@ -1401,20 +1397,20 @@ html[data-view='flexible-day'] .punch-button img { } .switch input:checked ~ .sun-moon .dots { - height: 1.5rem; - width: 1.5rem; + height: 0.75rem; /* Adjusted height */ + width: 0.75rem; /* Adjusted width */ top: 0px; - left: -20px; + left: -10px; /* Adjusted left value */ transform: rotate(25deg); } .switch input:checked ~ .background .stars1, .switch input:checked ~ .background .stars2 { opacity: 0; - transform: translateY(2rem); + transform: translateY(1rem); /* Adjusted translateY value */ } .switch input:checked ~ .background { - border: 0.25rem solid #78C1D5; + border: 0.125rem solid #78C1D5; /* Half of the original border thickness */ background: linear-gradient(to right, #78C1D5 0%, #BBE7F5 100%); } diff --git a/renderer/classes/FlexibleDayCalendar.js b/renderer/classes/FlexibleDayCalendar.js index 6baa64e2c..ea4550762 100644 --- a/renderer/classes/FlexibleDayCalendar.js +++ b/renderer/classes/FlexibleDayCalendar.js @@ -17,29 +17,52 @@ class FlexibleDayCalendar extends BaseCalendar * @param {Object.} preferences * @param {Object.} 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. */ @@ -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 = ``; const todayBut = ``; const leftBut = ``; const rightBut = ``; const title = 'Time to Leave'; - return '
'+ - '
' + + const themeToggleButton = ` +
+
+ +
+
`; + + // Theme toggle button moved to the left of the logo + return '
' + + `
` + `
${title}
` + '
' + '
' + - '' + + '
' + + `${themeToggleButton}` + '' + '' + '' + '' + '' + - '
' + switchView + '' + leftBut + '
' + rightBut + '' + todayBut + '
'; + ''; } + /** * Returns the template code of the body of the page. @@ -720,6 +759,8 @@ class FlexibleDayCalendar extends BaseCalendar } return targetDate; } + + } export { diff --git a/renderer/classes/FlexibleMonthCalendar.js b/renderer/classes/FlexibleMonthCalendar.js index 4bb413de1..fae338d24 100644 --- a/renderer/classes/FlexibleMonthCalendar.js +++ b/renderer/classes/FlexibleMonthCalendar.js @@ -22,21 +22,43 @@ class FlexibleMonthCalendar extends BaseCalendar * @param {Object.} preferences * @param {Object.} 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'; } /** @@ -87,24 +109,37 @@ class FlexibleMonthCalendar extends BaseCalendar /* * Returns the header of the page, with the image, name and a message. */ - _getPageHeader() - { + _getPageHeader() { const switchView = ``; - const todayBut = ``; - const leftBut = ``; - const rightBut = ``; + const todayBut = ``; + const leftBut = ``; + const rightBut = ``; const title = 'Time to Leave'; + + const themeToggleButton = ` +
+
+ +
+
`; + return '
'+ - '
' + - `
${title}
` + - '
' + + `
` + + `
${title}
` + + '
' + '
' + '' + - '' + + '' + '' + - '' + + '' + '' + - '' + + '' + + `${themeToggleButton}` + '
' + switchView + '' + switchView + '' + leftBut + '
' + rightBut + '' + todayBut + '' + todayBut + '
'; } diff --git a/src/calendar.html b/src/calendar.html index 34af45e12..c85cc1b78 100644 --- a/src/calendar.html +++ b/src/calendar.html @@ -19,17 +19,6 @@ -
-
- -
-
-
diff --git a/src/calendar.js b/src/calendar.js index caf5c5577..14ef0fe02 100644 --- a/src/calendar.js +++ b/src/calendar.js @@ -77,23 +77,7 @@ $(async() => setupCalendar(preferences); }); -document.addEventListener('DOMContentLoaded', function() { - const themeToggle = document.getElementById('toggle'); - themeToggle.addEventListener('change', function() { - if (this.checked) { - document.documentElement.setAttribute('data-theme', 'light'); - // Optionally save user preference for theme here, e.g., to local storage - } else { - document.documentElement.setAttribute('data-theme', 'dark'); - // Optionally save user preference for theme here, e.g., to local storage - } - }); - // Optionally load and apply user preference for theme on page load - const currentTheme = localStorage.getItem('theme') || 'light'; // Assuming 'light' as default - document.documentElement.setAttribute('data-theme', currentTheme); - themeToggle.checked = currentTheme === 'dark'; -}); From 7031b0d3c7bdb00005f79e0a631eac441aac983b Mon Sep 17 00:00:00 2001 From: Nikolaos Douranos Date: Wed, 12 Jun 2024 20:58:17 +0300 Subject: [PATCH 4/4] 4th commit - Fixing FlexibleMonthCalendar --- renderer/classes/FlexibleMonthCalendar.js | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/renderer/classes/FlexibleMonthCalendar.js b/renderer/classes/FlexibleMonthCalendar.js index fae338d24..be3af3a6c 100644 --- a/renderer/classes/FlexibleMonthCalendar.js +++ b/renderer/classes/FlexibleMonthCalendar.js @@ -111,9 +111,9 @@ class FlexibleMonthCalendar extends BaseCalendar */ _getPageHeader() { const switchView = ``; - const todayBut = ``; - const leftBut = ``; - const rightBut = ``; + const todayBut = ``; + const leftBut = ``; + const rightBut = ``; const title = 'Time to Leave'; const themeToggleButton = ` @@ -129,17 +129,18 @@ class FlexibleMonthCalendar extends BaseCalendar
`; return '
'+ - `
` + - `
${title}
` + - '
' + + '
' + + `
${title}
` + + '
' + '
' + + '' + - '' + + `${themeToggleButton}` + + '' + '' + - '' + - '' + - '' + - `${themeToggleButton}` + + '' + + '' + + '' + '
' + switchView + '' + switchView + '' + leftBut + '
' + rightBut + '' + todayBut + '
' + rightBut + '' + todayBut + '
'; }