Merge pull request #15 from Bloemendaal/dark

Dark
Bloemendaal · Feb 25, 2019 · 870a87f · 870a87f
2 parents c3fafff + 0358ec3
commit 870a87f
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 21 deletions.
diff --git a/extension/content.css b/extension/content.css
@@ -316,3 +316,45 @@ ul.mdc-list:not(.mdc-list--non-interactive) .mdc-list-item {
       right: 1.5rem
    }
 }
+
+/* Material dark theme */
+
+.darktheme .mdc-linear-progress__buffer {
+    background: rgba(0,0,0,.12);
+}
+.darktheme #drawer, .darktheme .mdc-fab, .darktheme .mdc-menu-surface, .darktheme #handin-upload, .darktheme #handin-review {
+    background: #333;
+}
+.darktheme #container, .darktheme #content, .darktheme .mdc-drawer-app-content, .darktheme html {
+    background: #444 !important;
+}
+.darktheme #handin-upload, .darktheme #handin-review {
+    border-color: rgba(0,0,0,.12);
+}
+.darktheme .mdc-drawer .mdc-list-item, .darktheme .mdc-drawer .mdc-drawer__title, .darktheme .mdc-list, .darktheme .mdc-list-item__secondary-text, .darktheme .mdc-list-group__subheader, .darktheme .mdc-list-item--selected, .darktheme .mdc-list-item--activated, .darktheme html {
+    color: rgba(255, 255, 255, 0.87);
+}
+.darktheme .mdc-list-item__graphic, .darktheme .mdc-list-item__meta, .darktheme .mdc-theme--text-icon-on-background {
+    color: rgba(255, 255, 255, 0.38) !important;
+}
+.darktheme .mdc-drawer .mdc-list-item__graphic, .darktheme .mdc-drawer .mdc-drawer__subtitle {
+    color: rgba(255, 255, 255, 0.6);
+}
+.darktheme .mdc-drawer .mdc-list-item--activated, .darktheme .mdc-drawer .mdc-list-item--activated .mdc-list-item__graphic {
+    color: rgba(255, 255, 255, 1);
+    background: #383838;
+}
+.darktheme {
+    --mdc-theme-primary: #333;
+}
+.darktheme #container-iframe iframe[src='/Pages/Forum/ForumPage.aspx'] {
+    filter: invert(75%);
+}
+
+.darktheme-show,
+.darktheme .darktheme-hide {
+   display: none;
+}
+.darktheme .darktheme-show {
+   display: initial;
+}
diff --git a/extension/content.js b/extension/content.js
@@ -2,7 +2,7 @@
 (function() {
    'use strict';
 
-   var version = 1.56;
+   var version = 1.57;
    var tab     = false;
    var hidenav = false;
    var lang    = 0;
@@ -221,31 +221,47 @@
                   de: 'Sprache'
                }) + '</h2>');
 
-               var clang = $('html').attr('lang');
                Object.keys(languages).forEach(function(k){
-                  append.append('<li class="mdc-list-item settings-language' + (k == clang ? ' mdc-list-item--activated' : '') + '" data-lang="' + k + '" data-mdc-auto-init="MDCRipple"><div class="uk-margin-right"><div class="uk-inline uk-cover-container uk-border-circle mdc-list-item__image">' + languages[k].svg + '</div></div><span class="mdc-list-item__text"><span class="mdc-list-item__primary-text">' + printLanguages(languages[k].title) + '</span><span class="mdc-list-item__secondary-text">' + languages[k].title[k] + '</span></span></li>');
+                  append.append('<li class="mdc-list-item settings-language' + (k == lang ? ' mdc-list-item--activated' : '') + '" data-lang="' + k + '" data-mdc-auto-init="MDCRipple"><div class="uk-margin-right"><div class="uk-inline uk-cover-container uk-border-circle mdc-list-item__image">' + languages[k].svg + '</div></div><span class="mdc-list-item__text"><span class="mdc-list-item__primary-text">' + printLanguages(languages[k].title) + '</span><span class="mdc-list-item__secondary-text">' + languages[k].title[k] + '</span></span></li>');
                });
 
+               append.append('<h2 class="mdc-list-group__subheader uk-margin-large-top" style="font-size:1.5rem">' + printLanguages({
+                  en: 'Night mode',
+                  nl: 'Nachtmodus',
+                  de: 'Nacht-Modus'
+               }) + '</h2>');
+
+               append.append('<li class="mdc-list-item settings-darktheme" data-mdc-auto-init="MDCRipple"><span class="uk-margin-right uk-cover-container mdc-list-item__image mdc-list-item__graphic material-icons"><span class="darktheme-show">brightness_2</span><span class="darktheme-hide">wb_sunny</span></span><span class="darktheme-show">' + printLanguages({
+                   en: 'Switch to a light theme',
+                   nl: 'Gebruik een licht thema',
+                   de: 'Wechseln Sie zu einem hellen Thema'
+               }) + '</span><span class="darktheme-hide">' + printLanguages({
+                  en: 'Switch to a dark theme',
+                  nl: 'Gebruik een donker thema',
+                  de: 'Wechseln Sie zu einem dunklen Thema'
+               }) + '</span></li>');
+
                mdc.autoInit(document.getElementById('container-list'), () => {});
             },
             container: function(t, e){
                var $this = $(t);
                if ($this.hasClass('settings-language')) {
-                  var lang = $this.data('lang');
+                  var slang = $this.data('lang');
                   $.ajax({
-                     url: 'https://elo.windesheim.nl/Services/UserSchoolConfig.asmx',
+                     url: '/Services/UserSchoolConfig.asmx',
                      type: 'POST',
-                     data: '<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"><soap:Body><ChangeUserLanguageID xmlns="http://www.threeships.com/N@TSchool/UserSchoolConfig"><lcid>' + languages[lang].key + '</lcid></ChangeUserLanguageID></soap:Body></soap:Envelope>',
+                     data: '<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"><soap:Body><ChangeUserLanguageID xmlns="http://www.threeships.com/N@TSchool/UserSchoolConfig"><lcid>' + languages[slang].key + '</lcid></ChangeUserLanguageID></soap:Body></soap:Envelope>',
                      dataType: 'xml',
                      contentType: 'text/xml',
                      complete: function(){
+                        lang = slang;
                         $('#container-list > ul > .settings-language').removeClass('mdc-list-item--activated');
                         $this.addClass('mdc-list-item--activated');
-                        $('html').attr('lang', lang);
+                        $('html').attr('lang', slang);
                      },
                      error: function(){
                         var msg;
-                        switch (lang) {
+                        switch (slang) {
                            case 'nl':
                               msg = "Opslaan van de taalinstellingen is mislukt";
                               break;
@@ -260,6 +276,10 @@
                         });
                      }
                   });
+               } else if ($this.hasClass('settings-darktheme')) {
+                   var dT = !+localStorage.getItem("darkTheme");
+                   localStorage.setItem("darkTheme", (+dT).toString());
+                   $('html').toggleClass('darktheme', dT);
                }
             }
          }
@@ -1080,7 +1100,11 @@
                lang = Object.keys(languages).find(function(k){
                   return languages[k].key == data.NOMENCLATURE;
                });
-               $('html').attr('lang', lang || '');
+               $('html').attr('lang', lang || '').toggleClass('darktheme', !!+localStorage.getItem("darkTheme"));
+
+               if (pages[tab].name == 'settings') {
+                  pages[tab].functions.onload();
+               }
             } else {
                window.location.replace('/Security/SAML2/Login.aspx?redirectUrl=' + encodeURIComponent(location.href));
             }

diff --git a/extension/manifest.json b/extension/manifest.json
@@ -3,7 +3,7 @@
    "name": "__MSG_appName__",
    "description": "__MSG_appDesc__",
    "author": "Casper Bloemendaal",
-   "version": "1.5.6",
+   "version": "1.5.7",
    "icons": {
       "16":  "icon/icon16.png",
       "48":  "icon/icon48.png",