Show no themes support for respective extensions

app/assets/javascripts/app/directives/views/componentView.js

@@ -1,6 +1,6 @@
 class ComponentView {
 
-  constructor($rootScope, componentManager, desktopManager, $timeout) {
+  constructor($rootScope, componentManager, desktopManager, $timeout, themeManager) {
     this.restrict = "E";
     this.templateUrl = "directives/component-view.html";
     this.scope = {
@@ -8,10 +8,7 @@ class ComponentView {
       manualDealloc: "="
     };
 
-    this.$rootScope = $rootScope;
-    this.componentManager = componentManager;
     this.desktopManager = desktopManager;
-    this.timeout = $timeout;
   }
 
   link($scope, el, attrs, ctrl) {
@@ -30,9 +27,14 @@ class ComponentView {
     });
   }
 
-  controller($scope, $rootScope, $timeout, componentManager, desktopManager) {
+  controller($scope, $rootScope, $timeout, componentManager, desktopManager, themeManager) {
     'ngInject';
 
+    $scope.themeHandlerIdentifier = "component-view-" + Math.random();
+    componentManager.registerHandler({identifier: $scope.themeHandlerIdentifier, areas: ["themes"], activationHandler: (component) => {
+      $scope.reloadThemeStatus();
+    }});
+
     $scope.identifier = "component-view-" + Math.random();
 
     componentManager.registerHandler({
@@ -143,11 +145,36 @@ class ComponentView {
         $rootScope.$broadcast("reload-ext-data");
       }
 
+      $scope.reloadThemeStatus();
+
       $timeout(() => {
         $scope.reloading = false;
       }, 500)
     }
 
+    $scope.reloadThemeStatus = function() {
+      if(!$scope.component.acceptsThemes()) {
+        if(themeManager.hasActiveTheme()) {
+          if(!$scope.dismissedNoThemesMessage) {
+            $scope.showNoThemesMessage = true;
+          }
+        } else {
+          // Can be the case if we've just deactivated a theme
+          $scope.showNoThemesMessage = false;
+        }
+      }
+    }
+
+    $scope.noThemesMessageDismiss = function() {
+      $scope.showNoThemesMessage = false;
+      $scope.dismissedNoThemesMessage = true;
+    }
+
+    $scope.disableActiveTheme = function() {
+      themeManager.deactivateAllThemes();
+      $scope.noThemesMessageDismiss();
+    }
+
     $scope.getUrl = function() {
       var url = componentManager.urlForComponent($scope.component);
       $scope.component.runningLocally = (url == $scope.component.local_url);
@@ -155,6 +182,7 @@ class ComponentView {
     }
 
     $scope.destroy = function() {
+      componentManager.deregisterHandler($scope.themeHandlerIdentifier);
       componentManager.deregisterHandler($scope.identifier);
       if($scope.component && !$scope.manualDealloc) {
         componentManager.deactivateComponent($scope.component, true);

app/assets/javascripts/app/services/themeManager.js

@@ -22,6 +22,19 @@ class ThemeManager {
     }});
   }
 
+  hasActiveTheme() {
+    return this.componentManager.getActiveThemes().length > 0;
+  }
+
+  deactivateAllThemes() {
+    var activeThemes = this.componentManager.getActiveThemes();
+    for(var theme of activeThemes) {
+      if(theme) {
+        this.componentManager.deactivateComponent(theme);
+      }
+    }
+  }
+
   activateTheme(theme) {
     var url = this.componentManager.urlForComponent(theme);
     var link = document.createElement("link");

app/assets/templates/directives/component-view.html.haml

@@ -7,6 +7,17 @@
       .item{"ng-click" => "reloadComponent()"}
         .label Reload
 
+.sn-component{"ng-if" => "showNoThemesMessage"}
+  .app-bar.no-edges.no-top-edge
+    .left
+      .item
+        .label.warning This extension does not support themes.
+    .right
+      .item{"ng-click" => "noThemesMessageDismiss()"}
+        .label Dismiss
+      .item{"ng-click" => "disableActiveTheme()"}
+        .label Disable Active Theme
+
 .sn-component{"ng-if" => "error == 'expired'"}
   .panel.static
     .content

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "standard-notes-web",
-  "version": "2.3.8",
+  "version": "2.3.9",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -7722,21 +7722,10 @@
       }
     },
     "sn-models": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/sn-models/-/sn-models-0.1.1.tgz",
-      "integrity": "sha512-jDT6Abom2gbOPhUAh3odL3N1ntq/XUE2zWgGsafYFzjXFpK+/1cXqi5UctWczJt+q2CJ51Md54F46h3PJaTOJw==",
-      "dev": true,
-      "requires": {
-        "standard-file-js": "0.3.2"
-      },
-      "dependencies": {
-        "standard-file-js": {
-          "version": "0.3.2",
-          "resolved": "https://registry.npmjs.org/standard-file-js/-/standard-file-js-0.3.2.tgz",
-          "integrity": "sha512-3/3aO39o5h9XkM+8FZJDcK6OlYcGE7lOkzMQzTGJDrvExO1IIrKCETtuUKQKhzoN1woJdxbhmSJofeZPSqwqXA==",
-          "dev": true
-        }
-      }
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/sn-models/-/sn-models-0.1.9.tgz",
+      "integrity": "sha512-pkoNIHPjbUaFj8y6KwwkQIMf0Nm5LgvWSFVzYmWUL6FyKpCqf9Onlf2hhHX8HpD8BjJpeHQoBSMBxpbHtwkgYQ==",
+      "dev": true
     },
     "sn-stylekit": {
       "version": "1.0.15",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "standard-notes-web",
-  "version": "2.3.9",
+  "version": "2.3.10",
   "repository": {
     "type": "git",
     "url": "https://github.com/standardnotes/web"
@@ -40,7 +40,7 @@
     "karma-phantomjs-launcher": "^1.0.2",
     "sn-stylekit": "1.0.15",
     "standard-file-js": "0.3.15",
-    "sn-models": "0.1.1",
+    "sn-models": "0.1.9",
     "connect": "^3.6.6",
     "mocha": "^5.2.0",
     "serve-static": "^1.13.2",