Changed What's New from banner into modal dialog.

adamcarheden · adamcarheden · commit 683b9c1f4934 · 2019-01-22T21:19:04.000-07:00
diff --git a/locales/eng/translation.js b/locales/eng/translation.js
@@ -223,7 +223,6 @@ Object.assign(Locales['eng'], {
   'Rectangle example': 'Rectangle example',
   'Redo last change': 'Redo last change',
   'Refresh preview': 'Refresh preview',
-  'released, check out the new features!': 'released, check out the new features!',
   'Reload preview': 'Reload preview',
   'Rename variable...': 'Rename variable...',
   'Render': 'Render',
diff --git a/src/ui/help/help.gss b/src/ui/help/help.gss
@@ -0,0 +1,19 @@
+/**
+ * Copyright 2019 The Coding with Chrome Authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#{$prefix}help-whats_new-show {
+  display: flex;
+}
diff --git a/src/ui/help/help.js b/src/ui/help/help.js
@@ -20,7 +20,11 @@
 goog.provide('cwc.ui.Help');
 
 goog.require('cwc.soy.Help');
+goog.require('cwc.userConfigType');
+goog.require('cwc.utils.Events');
 
+goog.require('goog.dom');
+goog.require('goog.events.EventType');
 
 /**
  * @param {!cwc.utils.Helper} helper
@@ -39,6 +43,9 @@ cwc.ui.Help = function(helper) {
 
   /** @private {boolean} */
   this.chromeApp_ = this.helper.checkChromeFeature('app');
+
+  /** @private {!cwc.utils.Events} */
+  this.events_ = new cwc.utils.Events(this.name, this.prefix, this);
 };
 
 
@@ -87,6 +94,23 @@ cwc.ui.Help.prototype.showChangelog = function() {
   noticeWebview.addEventListener('contentload', function() {
     noticeWebview['insertCSS']({'code': 'html {overflow-y: scroll;}'});
   });
+  this.initWhatsNewControl_();
+};
+
+
+cwc.ui.Help.prototype.initWhatsNewControl_ = function() {
+  let showWhatsNew = goog.dom.getElement(this.prefix + 'whats_new-checkbox');
+  let userConfigInstance = this.helper.getInstance('userConfig');
+  if (userConfigInstance.get(cwc.userConfigType.GENERAL,
+    cwc.userConfigName.SKIP_WHATS_NEW)) {
+    showWhatsNew.parentNode['MaterialCheckbox']['uncheck']();
+  } else {
+    showWhatsNew.parentNode['MaterialCheckbox']['check']();
+  }
+  this.events_.listen(showWhatsNew, goog.events.EventType.CHANGE, () => {
+    userConfigInstance.set(cwc.userConfigType.GENERAL,
+    cwc.userConfigName.SKIP_WHATS_NEW, !showWhatsNew.checked);
+  });
 };
 
 
diff --git a/src/ui/help/help.soy b/src/ui/help/help.soy
@@ -136,4 +136,11 @@
     <iframe id="{$prefix}webview-notice"
       src="../CHANGELOG.html" style="width: 600px; height: 500px;"></iframe>
   {/if}
+
+  <label id="{$prefix}whats_new-show" for="{$prefix}whats_new-checkbox" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
+    <input type="checkbox" id="{$prefix}whats_new-checkbox" class="mdl-checkbox__input"/>
+    <div class="mdl-checkbox__label">
+      {msg desc="Checkbox to enable/disable showing a notification when a new release is installed."}@@SELECT_SCREEN__ENABLE_WHATS_NEW{/msg}
+    </div>
+  </label>
 {/template}
diff --git a/src/ui/select_screen/advanced/advanced.soy b/src/ui/select_screen/advanced/advanced.soy
@@ -25,7 +25,6 @@
  */
 {template .template}
   {@param prefix: string}
-  {@param version: string}
 
   <div class="{$prefix}overview mdl-layout mdl-js-layout">
 
@@ -90,7 +89,6 @@
         {param active: true /}
         {param id: 'overview' /}
         {param content kind="html"}
-          {call cwc.soy.SelectScreen.whatsNew data="all" /}
           {call .overview data="all" /}
         {/param}
       {/call}
diff --git a/src/ui/select_screen/normal/normal.soy b/src/ui/select_screen/normal/normal.soy
@@ -25,7 +25,6 @@
  */
 {template .template}
   {@param prefix: string}
-  {@param version: string}
 
   <div class="{$prefix}overview mdl-layout mdl-js-layout">
 
@@ -66,7 +65,6 @@
         {param active: true /}
         {param id: 'overview' /}
         {param content kind="html"}
-          {call cwc.soy.SelectScreen.whatsNew data="all" /}
           {call .overview data="all" /}
         {/param}
       {/call}
diff --git a/src/ui/select_screen/select_screen.gss b/src/ui/select_screen/select_screen.gss
@@ -295,28 +295,3 @@
   left: 15%;
   background-color: rgb(255,64,129);
 }
-
-#{$prefix}select-screen-whats_new .mdl-button {
-	width: 95%;
-}
-
-#{$prefix}select-screen-whats_new-close {
-	float: right;
-	max-width: fit-content;
-}
-
-#{$prefix}select-screen-whats_new .mdl-grid {
-	max-width: fit-content;
-	padding: 0;
-}
-
-#{$prefix}select-screen-whats_new label {
-	max-width: fit-content;
-	margin: auto;
-}
-
-#{$prefix}select-screen-whats_new .mdl-checkbox__label {
-	font-size: 1rem;
-	color: rgba(0,0,0,.54);
-}
-
diff --git a/src/ui/select_screen/select_screen.js b/src/ui/select_screen/select_screen.js
@@ -277,17 +277,6 @@ cwc.ui.SelectScreen.prototype.addFileHandler_ = function() {
  * @param {!Function} template
  */
 cwc.ui.SelectScreen.prototype.showTemplate_ = function(template) {
-  let skipWhatsNew = false;
-  let lastWhatsNewVersion = null;
-  let userConfigInstance = this.helper.getInstance('userConfig');
-  if (userConfigInstance) {
-    skipWhatsNew = userConfigInstance.get(cwc.userConfigType.GENERAL,
-      cwc.userConfigName.SKIP_WHATS_NEW);
-    lastWhatsNewVersion = userConfigInstance.get(cwc.userConfigType.GENERAL,
-      cwc.userConfigName.LAST_WHATS_NEW_VERSION);
-  }
-  let version = this.helper.getAppVersion();
-
   if (this.nodeContent && template) {
     goog.soy.renderElement(this.nodeContent, template, {
       bluetooth: Feature.hasBluetooth(),
@@ -298,8 +287,7 @@ cwc.ui.SelectScreen.prototype.showTemplate_ = function(template) {
       modules: this.modules,
       online: this.helper.checkFeature('online'),
       prefix: this.prefix,
-      showWhatsNew: (!skipWhatsNew) && (version != lastWhatsNewVersion),
-      version: version,
+      version: this.helper.getAppVersion(),
     });
     this.addFileHandler_();
     cwc.ui.Helper.mdlRefresh();
@@ -308,63 +296,12 @@ cwc.ui.SelectScreen.prototype.showTemplate_ = function(template) {
     // Event Handling
     this.eventTarget_.dispatchEvent(
       cwc.ui.SelectScreen.Events.changeView(this.nodeContent));
-    this.initWhatsNew_(version);
+    this.showWhatsNew_();
   } else {
     console.error('Unable to render template', template);
   }
 };
 
-/**
- * @private
- * @param {!string} version
- */
-cwc.ui.SelectScreen.prototype.initWhatsNew_ = function(version) {
-  let prefix = this.prefix + 'whats_new';
-  let whats_new = goog.dom.getElement(prefix);
-  if (!whats_new) {
-    return;
-  }
-  let userConfigInstance = this.helper.getInstance('userConfig');
-
-  // Flag tha we've show What's New for this version
-  if (userConfigInstance) {
-    userConfigInstance.set(cwc.userConfigType.GENERAL,
-      cwc.userConfigName.LAST_WHATS_NEW_VERSION, version);
-  }
-
-  let whatsNewLink = goog.dom.getElement(prefix + '-link');
-  if (whatsNewLink) {
-    this.events_.listen(whatsNewLink, goog.events.EventType.CLICK, () => {
-      let helpInstance = this.helper.getInstance('help');
-      if (!helpInstance) {
-        console.error('Failed to get helper instance');
-        return;
-      }
-      helpInstance.showChangelog();
-    });
-  }
-
-  let whatsNewClose = goog.dom.getElement(prefix + '-close');
-  if (whatsNewClose) {
-    this.events_.listen(whatsNewClose, goog.events.EventType.CLICK, () => {
-      goog.style.setElementShown(whats_new, false);
-    });
-  }
-
-  let whatsNewShow = goog.dom.getElement(prefix + '-show');
-  if (whatsNewShow && userConfigInstance) {
-    if (userConfigInstance.get(cwc.userConfigType.GENERAL,
-      cwc.userConfigName.SKIP_WHATS_NEW)) {
-      whatsNewShow.parentNode['MaterialCheckbox']['uncheck']();
-    } else {
-      whatsNewShow.parentNode['MaterialCheckbox']['check']();
-    }
-    this.events_.listen(whatsNewShow, goog.events.EventType.CHANGE, () => {
-      userConfigInstance.set(cwc.userConfigType.GENERAL,
-        cwc.userConfigName.SKIP_WHATS_NEW, !whatsNewShow.checked);
-    });
-  }
-};
 
 /**
  * @param {string} title
@@ -431,12 +368,38 @@ cwc.ui.SelectScreen.prototype.handleFileClick_ = function(e) {
 };
 
 /**
- * Displays list of new features
+ * @private
  */
-cwc.ui.SelectScreen.prototype.showWhatsNew = function() {
-  let dialogInstance = this.helper.getInstance('dialog');
-  dialogInstance.showTemplate('What\'s New', cwc.soy.SelectScreen.whatsNew, {
-    prefix: this.prefix,
-  });
+cwc.ui.SelectScreen.prototype.showWhatsNew_ = function() {
+  let version = this.helper.getAppVersion();
+
+  let userConfigInstance = this.helper.getInstance('userConfig');
+  if (!userConfigInstance) {
+    console.error('Failed to get user config instance');
+    return;
+  }
+
+  if (userConfigInstance.get(cwc.userConfigType.GENERAL,
+        cwc.userConfigName.SKIP_WHATS_NEW)) {
+    return;
+  }
+
+  if (userConfigInstance.get(cwc.userConfigType.GENERAL,
+    cwc.userConfigName.LAST_WHATS_NEW_VERSION) == version) {
+    return;
+  }
+
+  let helpInstance = this.helper.getInstance('help');
+  if (!helpInstance) {
+    console.error('Failed to help instance');
+    return;
+  }
+
+  // Flag that we've show What's New for this version
+  if (userConfigInstance) {
+    userConfigInstance.set(cwc.userConfigType.GENERAL,
+      cwc.userConfigName.LAST_WHATS_NEW_VERSION, version);
+  }
+  helpInstance.showChangelog(true);
 };
 });
diff --git a/src/ui/select_screen/select_screen.soy b/src/ui/select_screen/select_screen.soy
@@ -31,38 +31,6 @@
   </div>
 {/template}
 
-/**
- * Notification of new release
- */
-{template .whatsNew}
-  {@param prefix: string}
-  {@param version: string}
-	{@param showWhatsNew: bool}
-
-	{if $showWhatsNew}
-    <div id="{$prefix}whats_new" class='mdl-color--yellow'>
-  
-     <button id="{$prefix}whats_new-close" class="mdl-button mdl-js-button mdl-button--icon" title="close">
-      <i class="material-icons">close</i>
-     </button>
-  
-      <div class="mdl-grid">
-  
-        <a id="{$prefix}whats_new-link" class="mdl-button mdl-js-button">
-          {$version}&nbsp;{msg desc="Link to description of features in a newly installed version."}released, check out the new features!{/msg}
-          <i class="material-icons">chevron_right</i>
-        </a>
-    
-        <label for="{$prefix}whats_new-show" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
-          <input type="checkbox" id="{$prefix}whats_new-show" class="mdl-checkbox__input"/>
-          <div class="mdl-checkbox__label">
-            {msg desc="Checkbox to enable/disable showing a notification when a new release is installed."}@@SELECT_SCREEN__ENABLE_WHATS_NEW{/msg}
-          </div>
-        </label>
-      </div>
-    </div>
-	{/if}
-{/template}
 
 /**
  * Connect devices template.
@@ -123,5 +91,3 @@ for (let i = 0; i < 10; i++) {
 {/literal}
   </textarea>
 {/template}
-
-
diff --git a/src/ui/select_screen/welcome/welcome.soy b/src/ui/select_screen/welcome/welcome.soy
@@ -38,8 +38,7 @@
       {/call}
 
       {call .banner_ data="all" /}
-      {call cwc.soy.SelectScreen.whatsNew data="all" /}
-     
+
       {call cwc.soy.SelectScreenTemplate.header}
         {param title: '@@WELCOME_SCREEN__HEADER' /}
         {param opt_text: '@@WELCOME_SCREEN__CHOOSE' /}
