Added visual effects to the sidebar.

Author: MarkusBordihn

src/ui/sidebar/sidebar.gss

@@ -24,6 +24,15 @@
   min-width: 60px;
 }
 
+.{$prefix}sidebar-icon.active {
+  border-right: 2px solid red;
+  background: rgba(64,64,64,0.1);
+}
+
+.{$prefix}sidebar-icon.active > .mdl-button {
+  opacity: 1;
+}
+
 #{$prefix}sidebar-icons {
   width: 60px;
   float: left;
@@ -32,6 +41,7 @@
 }
 
 #{$prefix}sidebar-icons .mdl-button {
+  opacity: 0.8;
   box-shadow: 
     0 3px 5px -1px rgba(0, 0, 0, 0.2),
     0 6px 10px 0 rgba(0, 0, 0, 0.14),

src/ui/sidebar/sidebar.js

@@ -89,9 +89,9 @@ cwc.ui.Sidebar.prototype.decorate = function(node) {
 
   this.events_.listen('speaker_notes-button', goog.events.EventType.CLICK,
     (e) => {
+      this.setActive_(e.target);
       this.showContent('Description',
         this.helper.getInstance('file').getFileDescription());
-      this.log_.info('button', e.target.closest('.mdl-button'));
   });
 };
 
@@ -126,7 +126,7 @@ cwc.ui.Sidebar.prototype.addCustomButton = function(id, icon, tooltip = '',
 
   if (func) {
     this.events_.listen(button, goog.events.EventType.CLICK, function() {
-      this.log_.info('Trigger custom action ...');
+      this.setActive_(button);
       func();
     }.bind(this));
   }
@@ -152,13 +152,12 @@ cwc.ui.Sidebar.prototype.renderContent = function(title, template, values) {
  * @param {!string} content
  */
 cwc.ui.Sidebar.prototype.showContent = function(title, content) {
-  this.showContent_(false);
   if (this.contentName === title) {
+    this.showContent_(false);
     this.contentName = '';
     return;
   }
 
-  this.showContent_(false);
   goog.soy.renderElement(
     this.nodeContent,
     cwc.soy.ui.Sidebar.content, {
@@ -191,6 +190,9 @@ cwc.ui.Sidebar.prototype.clear = function() {
  * @private
  */
 cwc.ui.Sidebar.prototype.showContent_ = function(visible) {
+  if (!visible) {
+    this.clearActive_();
+  }
   goog.style.setElementShown(this.nodeContent, visible);
   this.helper.getInstance('layout').adjustSize();
 };
@@ -205,3 +207,27 @@ cwc.ui.Sidebar.prototype.clearCustomButtons_ = function() {
   }
   this.customButtonIds = [];
 };
+
+
+/**
+ * @param {Element} button
+ * @private
+ */
+cwc.ui.Sidebar.prototype.setActive_ = function(button) {
+  this.clearActive_();
+  goog.dom.classlist.enable(
+    button.closest('.' + this.prefix + 'icon'), 'active', true);
+};
+
+
+/**
+ * @private
+ */
+cwc.ui.Sidebar.prototype.clearActive_ = function() {
+  let elements = cwc.ui.Helper.getElements(this.prefix + 'icon');
+  if (elements) {
+    elements.forEach((elem) => {
+      goog.dom.classlist.enable(elem, 'active', false);
+    });
+  }
+};

src/ui/sidebar/sidebar.soy

@@ -74,7 +74,7 @@
   {@param icon: string}
   {@param? tooltip: string}
 
-  <div id="{$prefix}{$id}">
+  <div id="{$prefix}{$id}" class="{$prefix}icon">
     <button id="{$prefix}{$id}-button" class="mdl-button mdl-js-button mdl-button--icon">
       <i class="material-icons">{$icon}</i>
     </button>

src/utils/storage.js

@@ -118,10 +118,9 @@ cwc.utils.Storage = function(storageType = cwc.utils.StorageType.NONE) {
   this.storage_ = this.getStorageByType(this.storageType_);
 
   /** @private {!boolean} */
-  this.syncChrome_ = this.storageType_ == cwc.utils.StorageType.CHROME_STORAGE ?
-    true : false;
+  this.syncChrome_ = this.storageType_ === cwc.utils.StorageType.CHROME_STORAGE;
 
-  // Preload Chrome Storage, if needed.
+  // Pre-load Chrome Storage, if needed.
   if (this.syncChrome_ && !this.chromeStorageLoaded_) {
     this.loadChromeStorage();
   }
@@ -135,8 +134,7 @@ cwc.utils.Storage = function(storageType = cwc.utils.StorageType.NONE) {
 cwc.utils.Storage.prototype.prepare = function(callback) {
   this.log_.info('Preparing', this.storageType_, 'storage ...');
   if (callback) {
-    if (this.storageType_ === cwc.utils.StorageType.CHROME_STORAGE &&
-        !this.chromeStorageLoaded_) {
+    if (this.syncChrome_ && !this.chromeStorageLoaded_) {
       this.loadChromeStorage(undefined, callback);
     } else {
       callback(this);
@@ -189,13 +187,13 @@ cwc.utils.Storage.prototype.getStorageByType = function(type) {
  * @param {Function=} callbackFunc
  */
 cwc.utils.Storage.prototype.loadChromeStorage = function(type, callbackFunc) {
-  this.log_.info('Loading Chrome storage ...');
   let storageKey = type ? this.getKeyname('', type) : null;
-  let callback = function(data) {
+  this.log_.info('Loading Chrome storage', storageKey || '');
+  chrome.storage.local.get(storageKey, function(data) {
+    this.log_.info('Loaded', data, 'data.');
     this.handleLoadChromeStorage_(data, storageKey, callbackFunc);
     this.chromeStorageLoaded_ = true;
-  };
-  chrome.storage.local.get(storageKey, callback.bind(this));
+  }.bind(this));
 };
 
 
@@ -213,7 +211,7 @@ cwc.utils.Storage.prototype.handleLoadChromeStorage_ = function(data,
       if ((storageKey && key == storageKey) ||
           (!storageKey && key.startsWith(this.prefix_))) {
         if (goog.isObject(data[key])) {
-          this.log_.info('Syncing', data[key].length, key,
+          this.log_.info('Syncing', data[key].length || '', key,
             'items to session storage.');
           for (let item in data[key]) {
             if (Object.prototype.hasOwnProperty.call(data[key], item)) {

static_files/resources/tutorial/simple/blocks/tutorial-1.cwc

@@ -16,7 +16,7 @@
       "version": 1
     }
   },
-  "description": "",
+  "description": "Basic tutorial example with and sidebar.",
   "files": {},
   "flags": {},
   "format": "Coding with Chrome File Format 2",