Improved change log modal design

Added ‘recent updates’ link to settings

app/css/app.css

@@ -3374,7 +3374,30 @@ ce671b orange
 }
 
 
+.changelog_modal_window .modal-dialog {
+  max-width: 506px;
+}
+.changelog_card_wrap {
+  text-align: center;
+  padding: 12px 0 18px;
+}
+.changelog_header {
+  margin-top: 15px;
+  font-size: 16px;
+}
+.changelog_card {
+  width: 160px;
+  height: 160px;
+  display: block;
+  background: url(../img/changelog/card_wecandoit.png) no-repeat 0 0;
+  background-size: 160px 160px;
+  margin: 0 auto;
+}
 
-.changelog_new_version {
-  font-weight: bold;
+.changelog_version_title {
+  color: #9d9479;
+  background: #efede3;
+}
+.changelog_version_changes_list li {
+  line-height: 20px;
 }

app/js/controllers.js

@@ -1409,7 +1409,7 @@ angular.module('myApp.controllers', [])
 
   })
 
-  .controller('SettingsModalController', function ($rootScope, $scope, $timeout, $modal, AppUsersManager, AppChatsManager, MtpApiManager, AppConfigManager, NotificationsManager, MtpApiFileManager, ApiUpdatesManager, ErrorService) {
+  .controller('SettingsModalController', function ($rootScope, $scope, $timeout, $modal, AppUsersManager, AppChatsManager, MtpApiManager, AppConfigManager, NotificationsManager, MtpApiFileManager, ApiUpdatesManager, ChangelogNotifyService, ErrorService) {
 
     $scope.profile = {};
     $scope.photo = {};
@@ -1550,6 +1550,10 @@ angular.module('myApp.controllers', [])
         }
         $rootScope.$broadcast('settings_changed');
       }
+
+      $scope.openChangelog = function () {
+        ChangelogNotifyService.showChangelog(false);
+      }
     });
   })
 

app/js/services.js

@@ -3431,42 +3431,33 @@ angular.module('myApp.services', [])
   function checkUpdate () {
     AppConfigManager.get('last_version').then(function (lastVersion) {
       if (lastVersion != Config.App.version) {
-        $http.get('CHANGELOG.md').then(function (response) {
-          var changeLogText = response.data;
-          var matchesStart = changeLogText.match(/^([\s\S]+?\n)(?=version)/i),
-              changelog = [];
-
-          changeLogText.replace(/(version ([\d\.]+)[\s\S]+?)(?=\nversion|$)/gi, function (whole, versionP, version) {
-            if (versionCompare(version, lastVersion) > 0) {
-              var contents = versionP.split(/\n\s*-{3,}\s*\n/);
-
-              changelog.push({
-                title: contents[0],
-                changes: contents[1].split(/\n?\s*\*\s*/g)
-              });
+        showChangelog(lastVersion || '0');
+        AppConfigManager.set({last_version: Config.App.version});
+      }
+    })
   }
-          });
 
-          if (changelog.length) {
+  function showChangelog (lastVersion) {
     var $scope = $rootScope.$new();
 
-            $scope.version = Config.App.version;
-            $scope.changelog = changelog;
+    $scope.lastVersion = lastVersion;
+    $scope.canShowVersion = function (curVersion) {
+      if ($scope.lastVersion === false || $scope.lastVersion === undefined) {
+        return true;
+      }
+
+      return versionCompare(curVersion, lastVersion) > 0;
+    };
 
     $modal.open({
       templateUrl: 'partials/changelog_modal.html',
       scope: $scope,
-              windowClass: 'error_modal_window'
+      windowClass: 'changelog_modal_window'
     });
   }
 
-          AppConfigManager.set({last_version: Config.App.version});
-        })
-      }
-    })
-  }
-
   return {
-    checkUpdate: checkUpdate
+    checkUpdate: checkUpdate,
+    showChangelog: showChangelog
   }
 })

app/partials/changelog_modal.html

@@ -1,29 +1,48 @@
-<div class="error_modal_wrap" my-modal-position>
+<div class="changelog_modal_wrap" my-modal-position>
 
   <a class="modal-close-button" ng-click="$close()"><i></i></a>
 
   <div class="modal-body">
 
-    <h4 class="modal_simple_header">
-      Telegram Web was updated
-    </h4>
+    <div class="changelog_card_wrap" ng-switch="lastVersion === false">
+      <div ng-switch-when="true">
+        <div class="changelog_card"></div>
+        <h2 class="changelog_header"><strong>Telegram</strong> recent updates</h2>
+      </div>
+      <div ng-switch-default>
+        <div class="changelog_card"></div>
+        <h2 class="changelog_header"><strong>Telegram</strong> has been updated!</h2>
+      </div>
+    </div>
+
+    <div class="changelog_versions_wrap">
 
-    <div ng-repeat="versionChanges in changelog">
-      <h4 ng-bind="versionChanges.title"></h4>
-      <ul ng-repeat="feature in versionChanges.changes">
-        <li ng-bind="feature" ng-if="feature.length"></li>
+      <div class="modal_section changelog_version_wrap">
+        <h3 class="modal_section_header changelog_version_title">
+          <span class="pull-right">current version</span>
+          Version 0.1.3
+        </h3>
+        <div class="modal_section_body changelog_version_changes">
+          <ul class="list-unstyled changelog_version_changes_list">
+            <li>Added this welcome message</li>
+            <li>Added keyboard shortcuts:</li>
+            <ul>
+              <li><strong>Tab</strong> - set focus to message field</li>
+              <li><strong>Esc</strong> or <strong>Shift+Tab</strong> - focus search field</li>
+              <li><strong>Up/Down</strong> (while in search field) - move around dialogs</li>
+              <li><strong>Enter</strong> (while in search field) - open selected or first dialog</li>
+              <li><strong>Alt+[0-9]</strong> - Switch to Nth dialog</li>
+              <li><strong>Alt+Up/Down</strong> - move to previous/next dialog</li>
+            </ul>
+            <li>Improved messages grouping</li>
+            <li>Fixed video modal position bug</li>
+            <li>Fixed mobile focus issues</li>
           </ul>
         </div>
-
       </div>
 
-  <div class="modal-footer">
-    <div>
-      <div class="pull-left">
-        New version is <span class="changelog_new_version" ng-bind="version"></span>.
-      </div>
-      <button type="button" class="btn btn-primary" ng-click="$dismiss()">Done</button>
     </div>
+
   </div>
 
 </div>

app/partials/settings_modal.html

@@ -102,7 +102,12 @@
     <div class="modal_section">
       <h3 class="modal_section_header">About</h3>
       <div class="modal_section_body">
-        <p><strong>Webogram</strong> v{{version}}, <a href="https://github.com/zhukov/webogram" target="_blank">GitHub</a></p>
+        <p>
+          <strong>Webogram</strong> v{{version}}, <a ng-click="openChangelog()">Recent updates</a></br>
+        </p>
+        <p>
+          Source code available on <a href="https://github.com/zhukov/webogram" target="_blank">GitHub</a>
+        </p>
       </div>
     </div>