diff --git a/fontello.json b/fontello.json index 11e03d9..efb7b52 100644 --- a/fontello.json +++ b/fontello.json @@ -6,6 +6,12 @@ "units_per_em": 1000, "ascent": 850, "glyphs": [ + { + "uid": "ca90da02d2c6a3183f2458e4dc416285", + "css": "adjust", + "code": 59408, + "src": "fontawesome" + }, { "uid": "44e04715aecbca7f266a17d5a7863c68", "css": "plus", diff --git a/javascripts/theme.js b/javascripts/theme.js index 4625673..e39836b 100644 --- a/javascripts/theme.js +++ b/javascripts/theme.js @@ -1,19 +1,3 @@ -/** - * Fonction permettant de sauvegarder dans le stockage local le choix du thème - * @param {String} scheme - */ -function saveColorScheme(scheme) { - localStorage.setItem("theme", scheme); -} - -/** - * Fonction permettant de changer le thème du site - * @param {String} scheme - */ -function setColorScheme(scheme) { - document.documentElement.setAttribute("data-theme", scheme); -} - /** * Fonction permettant de récupérer le thème du système * @return {String} @@ -28,10 +12,56 @@ function getPreferredColorScheme() { return "light"; } +/** + * @param {String} scheme + */ +function setPictoOnMenu(scheme) { + document.querySelectorAll(".icon-theme").forEach((item) => { + item.classList.add("hidden"); + }); + document + .querySelector(`.icon-theme.theme-${scheme}`) + .classList.remove("hidden"); +} + +/** + * Fonction permettant de sauvegarder dans le stockage local le choix du thème + * @param {String} scheme + */ +function saveColorScheme(scheme) { + localStorage.setItem("theme", scheme); +} + +/** + * Fonction permettant de changer le thème du site + * @param {String} scheme + */ +function setColorScheme(scheme) { + document.documentElement.setAttribute( + "data-theme", + scheme === "system" ? getPreferredColorScheme() : scheme + ); + + setPictoOnMenu(scheme); +} + +/** + * Fonction déclenchée lorsqu'un utilisateur clique sur un bouton dans le menu déroulant + * @param {Object} e + */ +function changeTheme(e) { + e.preventDefault(); + + const scheme = this.dataset.value; + + saveColorScheme(scheme); + setColorScheme(scheme); +} + // INFO: On place un event sur le bouton -const toggleSwitch = document.querySelector( - '.theme-switch input[type="checkbox"]' -); +const buttonsTheme = document.getElementsByClassName("theme"); +// INFO: On récupère du local storage (ou des préférences navigateur) le thème actuel +const currentTheme = localStorage.getItem("theme") || getPreferredColorScheme(); /** * Event permettant de détecter les changements de thème du système @@ -44,28 +74,14 @@ if (window.matchMedia) { if (selectedColorScheme === "system") { const preferedColorScheme = getPreferredColorScheme(); setColorScheme(preferedColorScheme); - - toggleSwitch.checked = preferedColorScheme === "dark"; } }); } -const currentTheme = localStorage.getItem("theme") || getPreferredColorScheme(); - // INFO: Au chargement de la page on détecte le thème à charger setColorScheme(currentTheme); -toggleSwitch.checked = currentTheme === "dark"; - -toggleSwitch.addEventListener( - "change", - (e) => { - e.preventDefault(); - - const scheme = e.target.checked ? "dark" : "light"; - - saveColorScheme(scheme); - setColorScheme(scheme); - }, - false -); +// INFO: On place un event au click sur chacun des boutons du menu +for (let i = 0; i < buttonsTheme.length; i += 1) { + buttonsTheme[i].addEventListener("click", changeTheme, false); +} diff --git a/public/font/icon.eot b/public/font/icon.eot index 424368f..20368e4 100644 Binary files a/public/font/icon.eot and b/public/font/icon.eot differ diff --git a/public/font/icon.svg b/public/font/icon.svg index 52ad914..04a06e1 100644 --- a/public/font/icon.svg +++ b/public/font/icon.svg @@ -1,7 +1,7 @@ -Copyright (C) 2022 by original authors @ fontello.com +Copyright (C) 2024 by original authors @ fontello.com @@ -28,6 +28,8 @@ + + diff --git a/public/font/icon.ttf b/public/font/icon.ttf index 6688a79..3941480 100644 Binary files a/public/font/icon.ttf and b/public/font/icon.ttf differ diff --git a/public/font/icon.woff b/public/font/icon.woff index 9543cf5..add6217 100644 Binary files a/public/font/icon.woff and b/public/font/icon.woff differ diff --git a/public/font/icon.woff2 b/public/font/icon.woff2 index c2acb70..eb6196f 100644 Binary files a/public/font/icon.woff2 and b/public/font/icon.woff2 differ diff --git a/sass/forms.scss b/sass/forms.scss index 125527a..1e71919 100644 --- a/sass/forms.scss +++ b/sass/forms.scss @@ -70,78 +70,4 @@ background-size: 1.2rem; padding-right: 2.4rem; } -} - -.theme-switch-wrapper { - display: flex; - align-items: center; - - em { - margin-left: 10px; - font-size: 1rem; - } -} - -.theme-switch { - display: inline-block; - height: 34px; - position: relative; - width: 60px; -} - -.theme-switch input { - display:none; -} - -.slider { - background-color: #ccc; - bottom: 0; - cursor: pointer; - left: 0; - position: absolute; - right: 0; - top: 0; - transition: .4s; - @include transition() {} -} - -.slider:before { - background-color: #fff; - bottom: 4px; - content: '\f185'; - height: 26px; - left: 4px; - position: absolute; - transition: .4s; - width: 26px; - padding: 0; - - font-family: "icon"; - font-style: normal; - font-weight: normal; - display: inline-block; - text-decoration: inherit; - text-align: center; - font-variant: normal; - text-transform: none; -} - -input:checked + .slider { - background-color: $primary-color; - @include transition() {} -} - -input:checked + .slider:before { - transform: translateX(26px); - content: '\f186'; - background-color: var(--input-active-color); - @include transition() {} -} - -.slider.round { - border-radius: 34px; -} - -.slider.round:before { - border-radius: 50%; -} +} \ No newline at end of file diff --git a/sass/icons.scss b/sass/icons.scss index 7b2150b..c841cf3 100644 --- a/sass/icons.scss +++ b/sass/icons.scss @@ -1,66 +1,76 @@ @font-face { font-family: 'icon'; - src: url('/font/icon.eot?41426785'); - src: url('/font/icon.eot?41426785#iefix') format('embedded-opentype'), - url('/font/icon.woff2?41426785') format('woff2'), - url('/font/icon.woff?41426785') format('woff'), - url('/font/icon.ttf?41426785') format('truetype'), - url('/font/icon.svg?41426785#icon') format('svg'); + src: url('/font/icon.eot?15219908'); + src: url('/font/icon.eot?15219908#iefix') format('embedded-opentype'), + url('/font/icon.woff2?15219908') format('woff2'), + url('/font/icon.woff?15219908') format('woff'), + url('/font/icon.ttf?15219908') format('truetype'), + url('/font/icon.svg?15219908#icon') format('svg'); font-weight: normal; font-style: normal; -} - -[class^="icon-"]:before, [class*=" icon-"]:before { + } + /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */ + /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */ + /* + @media screen and (-webkit-min-device-pixel-ratio:0) { + @font-face { + font-family: 'icon'; + src: url('../font/icon.svg?15219908#icon') format('svg'); + } + } + */ + [class^="icon-"]:before, [class*=" icon-"]:before { font-family: "icon"; font-style: normal; font-weight: normal; + speak: never; display: inline-block; text-decoration: inherit; width: 1em; margin-right: .2em; text-align: center; + /* opacity: .8; */ + /* For safety - reset parent styles, that can break glyph codes*/ font-variant: normal; text-transform: none; + /* fix buttons height, for twitter bootstrap */ line-height: 1em; + /* Animation center compensation - margins should be symmetric */ + /* remove if not needed */ margin-left: .2em; + /* you can be more comfortable with increased icons size */ + /* font-size: 120%; */ + + /* Font smoothing. That was taken from TWBS */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -} -.icon-plus:before { content: '\e800'; } /* '' */ -.icon-user:before { content: '\e801'; } /* '' */ -.icon-search:before { content: '\e802'; } /* '' */ -.icon-mail:before { content: '\e803'; } /* '' */ -.icon-link:before { content: '\e804'; } /* '' */ -.icon-heart:before { content: '\e805'; } /* '' */ -.icon-eye:before { content: '\e806'; } /* '' */ -.icon-left-open:before { content: '\e807'; } /* '' */ -.icon-right-open:before { content: '\e808'; } /* '' */ -.icon-export:before { content: '\e809'; } /* '' */ -.icon-refresh:before { content: '\e80a'; } /* '' */ -.icon-spin:before { content: '\e839'; } /* '' */ -.icon-link-ext:before { content: '\f08e'; } /* '' */ -.icon-sun:before { content: '\f185'; } /* '' */ -.icon-moon:before { content: '\f186'; } /* '' */ -.icon-share:before { content: '\f1e0'; } /* '' */ -.icon-trash:before { content: '\f1f8'; } /* '' */ -.icon-blind:before { content: '\f29d'; } /* '' */ + /* Uncomment for 3D effect */ + /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ + } -.animate-spin { - animation: spin 2s infinite linear; - display: inline-block; -} -@keyframes spin { - 0% { - transform: rotate(0deg); - } + .icon-plus:before { content: '\e800'; } /* '' */ + .icon-user:before { content: '\e801'; } /* '' */ + .icon-search:before { content: '\e802'; } /* '' */ + .icon-mail:before { content: '\e803'; } /* '' */ + .icon-link:before { content: '\e804'; } /* '' */ + .icon-heart:before { content: '\e805'; } /* '' */ + .icon-eye:before { content: '\e806'; } /* '' */ + .icon-left-open:before { content: '\e807'; } /* '' */ + .icon-right-open:before { content: '\e808'; } /* '' */ + .icon-export:before { content: '\e809'; } /* '' */ + .icon-refresh:before { content: '\e80a'; } /* '' */ + .icon-adjust:before { content: '\e810'; } /* '' */ + .icon-spin:before { content: '\e839'; } /* '' */ + .icon-link-ext:before { content: '\f08e'; } /* '' */ + .icon-sun:before { content: '\f185'; } /* '' */ + .icon-moon:before { content: '\f186'; } /* '' */ + .icon-share:before { content: '\f1e0'; } /* '' */ + .icon-trash:before { content: '\f1f8'; } /* '' */ + .icon-blind:before { content: '\f29d'; } /* '' */ - 100% { - transform: rotate(359deg); - } -} diff --git a/views/index.ejs b/views/index.ejs index f8048b4..cc50e24 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -73,6 +73,37 @@ Nous contacter +
+ + + + + + Thème + + + +
+ + + +
+
<% if ( user ) { %>
@@ -109,14 +140,6 @@
<% } %> -
-
- -
-
<% if ( !user ) { %>
diff --git a/views/pages/composants.ejs b/views/pages/composants.ejs index 00cf41e..f5a9cce 100644 --- a/views/pages/composants.ejs +++ b/views/pages/composants.ejs @@ -487,14 +487,6 @@ </a> </div> </div> - <div class="navbar-item apparence"> - <div class="theme-switch-wrapper"> - <label class="theme-switch" for="checkbox" aria-label="Passer du thème clair au thème sombre et inversement"> - <input type="checkbox" id="checkbox" /> - <div class="slider round"></div> - </label> - </div> - </div> <div class="navbar-item"> <div class="buttons"> <a class="button is-danger" href="/se-deconnecter">