Cache active themes

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 [];
+    }
   }
 }
 

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;

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