From bdea12cbe2f2fe06a13a0d47a06a47bcfd1f9359 Mon Sep 17 00:00:00 2001 From: Nikolaos Douranos Date: Wed, 12 Jun 2024 15:38:44 +0300 Subject: [PATCH] 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'; -});