diff --git a/app/assets/javascripts/app/services/themeManager.js b/app/assets/javascripts/app/services/themeManager.js index d5bec58e3..76a473ebe 100644 --- a/app/assets/javascripts/app/services/themeManager.js +++ b/app/assets/javascripts/app/services/themeManager.js @@ -1,9 +1,27 @@ class ThemeManager { - constructor(componentManager, desktopManager) { + constructor(componentManager, desktopManager, storageManager) { this.componentManager = componentManager; + this.storageManager = storageManager; + this.desktopManager = desktopManager; + this.activeThemes = []; - desktopManager.registerUpdateObserver((component) => { + ThemeManager.CachedThemesKey = "cachedThemes"; + + this.registerObservers(); + this.activateCachedThemes(); + } + + activateCachedThemes() { + let cachedThemes = this.getCachedThemes(); + let writeToCache = false; + for(var theme of cachedThemes) { + this.activateTheme(theme, writeToCache); + } + } + + registerObservers() { + this.desktopManager.registerUpdateObserver((component) => { // Reload theme if active if(component.active && component.isTheme()) { this.deactivateTheme(component); @@ -13,7 +31,7 @@ class ThemeManager { } }) - componentManager.registerHandler({identifier: "themeManager", areas: ["themes"], activationHandler: (component) => { + this.componentManager.registerHandler({identifier: "themeManager", areas: ["themes"], activationHandler: (component) => { if(component.active) { this.activateTheme(component); } else { @@ -33,9 +51,19 @@ class ThemeManager { this.componentManager.deactivateComponent(theme); } } + + this.decacheThemes(); } - activateTheme(theme) { + activateTheme(theme, writeToCache = true) { + if(_.find(this.activeThemes, {uuid: theme.uuid})) { + return; + } + + console.log("Activating theme", theme.uuid); + + this.activeThemes.push(theme); + var url = this.componentManager.urlForComponent(theme); var link = document.createElement("link"); link.href = url; @@ -44,6 +72,10 @@ class ThemeManager { link.media = "screen,print"; link.id = theme.uuid; document.getElementsByTagName("head")[0].appendChild(link); + + if(writeToCache) { + this.cacheThemes(); + } } deactivateTheme(theme) { @@ -52,6 +84,37 @@ class ThemeManager { element.disabled = true; element.parentNode.removeChild(element); } + + _.remove(this.activeThemes, {uuid: theme.uuid}); + + this.cacheThemes(); + } + + async cacheThemes() { + let mapped = await Promise.all(this.activeThemes.map(async (theme) => { + let transformer = new SFItemParams(theme); + let params = await transformer.paramsForLocalStorage(); + return params; + })); + let data = JSON.stringify(mapped); + console.log("Caching themes", data); + return this.storageManager.setItem(ThemeManager.CachedThemesKey, data, StorageManager.Fixed); + } + + async decacheThemes() { + return this.storageManager.removeItem(ThemeManager.CachedThemesKey, StorageManager.Fixed); + } + + getCachedThemes() { + let cachedThemes = this.storageManager.getItemSync(ThemeManager.CachedThemesKey, StorageManager.Fixed); + if(cachedThemes) { + let parsed = JSON.parse(cachedThemes); + return parsed.map((theme) => { + return new SNTheme(theme); + }); + } else { + return []; + } } } diff --git a/app/assets/stylesheets/app/_lock-screen.scss b/app/assets/stylesheets/app/_lock-screen.scss index f5faed28e..89ce4dfb4 100644 --- a/app/assets/stylesheets/app/_lock-screen.scss +++ b/app/assets/stylesheets/app/_lock-screen.scss @@ -12,24 +12,17 @@ bottom: 0; z-index: $z-index-lock-screen; - background-color: var(--sn-stylekit-contrast-background-color); + background-color: var(--sn-stylekit-background-color); color: var(--sn-stylekit-foreground-color); display: flex; flex-direction: column; align-items: center; justify-content: center; - .background { - position: absolute; - z-index: -1; - width: 100%; - height: 100%; - } - .sk-panel { width: 315px; flex-grow: 0; - border-radius: 0; + // border-radius: 0; .sk-panel-header { justify-content: center; diff --git a/app/assets/templates/lock-screen.html.haml b/app/assets/templates/lock-screen.html.haml index 222e6b704..72ebdd7d7 100644 --- a/app/assets/templates/lock-screen.html.haml +++ b/app/assets/templates/lock-screen.html.haml @@ -19,6 +19,7 @@ %div{"ng-if" => "formData.showRecovery"} .sk-p - If you forgot your local passcode, your only option is to clear all your local data from this device + If you forgot your local passcode, your only option is to clear your local data from this device and sign back in to your account. - %a.sk-a.danger{"ng-click" => "beginDeleteData()"} Delete Local Data + .sk-panel-row + %a.sk-a.danger.center-text{"ng-click" => "beginDeleteData()"} Delete Local Data