Improved buttons, improved history edit mode, localStorage, new common buttons

.gitignore

@@ -7,3 +7,4 @@
 dist
 package_dist
 webogram*.zip
+*.sublime-workspace

app/css/app.css

@@ -71,47 +71,71 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 
-.btn-tg {
+.btn-success {
   color: #ffffff;
   background-color: #6AC065;
   border-color: #6AC065;
 }
 
-.btn-tg:hover,
+.btn-success:hover,
-.btn-tg:focus,
+.btn-success:focus,
-.btn-tg:active,
+.btn-success:active,
-.btn-tg.active,
+.btn-success.active,
-.open .dropdown-toggle.btn-tg {
+.open .dropdown-toggle.btn-success {
   color: #ffffff;
   background-color: #61b75b;
   border-color: #61b75b;
 }
 
-.btn-tg:active,
+.btn-success:active,
-.btn-tg.active,
+.btn-success.active,
-.open .dropdown-toggle.btn-tg {
+.open .dropdown-toggle.btn-success {
   background: #5aaf54;
   background-image: none;
 }
 
-.btn-tg.disabled,
+
-.btn-tg[disabled],
+.btn-danger {
-fieldset[disabled] .btn-tg,
+  color: #ffffff;
-.btn-tg.disabled:hover,
+  background-color: #c05f5a;
-.btn-tg[disabled]:hover,
+  border-color: #c05f5a;
-fieldset[disabled] .btn-tg:hover,
+}
-.btn-tg.disabled:focus,
+.btn-danger:hover,
-.btn-tg[disabled]:focus,
+.btn-danger:focus,
-fieldset[disabled] .btn-tg:focus,
+.btn-danger:active,
-.btn-tg.disabled:active,
+.btn-danger.active,
-.btn-tg[disabled]:active,
+.open .dropdown-toggle.btn-danger {
-fieldset[disabled] .btn-tg:active,
+  color: #ffffff;
-.btn-tg.disabled.active,
+  background-color: #ab5450;
-.btn-tg[disabled].active,
+  border-color: #ab5450;
-fieldset[disabled] .btn-tg.active {
+}
-  color: #DDD;
+.btn-danger:active,
-  background-color: #999;
+.btn-danger.active,
-  border-color: #999;
+.open .dropdown-toggle.btn-danger {
+  background: #a24f4b;
+  background-image: none;
+}
+
+
+.btn-primary {
+  color: #ffffff;
+  background-color: #598db5;
+  border-color: #598db5;
+}
+.btn-primary:hover,
+.btn-primary:focus,
+.btn-primary:active,
+.btn-primary.active,
+.open .dropdown-toggle.btn-primary {
+  color: #ffffff;
+  background-color: #4f84ac;
+  border-color: #4f84ac;
+}
+.btn-primary:active,
+.btn-primary.active,
+.open .dropdown-toggle.btn-primary {
+  background: #4c799c;
+  background-image: none;
 }
 
 .tg_page_head .navbar {
@@ -1139,15 +1163,15 @@ div.im_message_video_thumb {
 }
 .icon-message-status {
   background: #43A4DB;
-  border: 1px solid #FFF;
+  border: 0;
   display: block;
-  width: 11px;
+  width: 10px;
-  height: 11px;
+  height: 10px;
   border-radius: 7px;
   overflow: hidden;
   position: absolute;
-  margin-left: -27px;
+  margin-left: -26px;
-  margin-top: 14px;
+  margin-top: 13px;
   opacity: 0;
 }
 .icon-message-status-unread {
@@ -2087,8 +2111,13 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status {
 /* Messages edit panel */
 .im_edit_panel_wrap {
   display: none;
-  border-top: 1px solid #EEE;
+  padding: 10px 0 34px;
-  padding: 5px 5px;
+  margin: 0 24px 0 12px;
+}
+.im_edit_panel_border {
+  display: block;
+  margin: 0 0 34px 3px;
+  border-bottom: 1px solid #EEE;
 }
 .im_edit_panel_wrap_loaded {
   display: block;
@@ -2099,28 +2128,37 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status {
   /*width: 652px;*/
   width: 100%;
 }
-.im_edit_delete_link,
+.im_edit_flush_link,
-.im_edit_forward_link,
 .im_edit_cancel_link {
   display: block;
-  padding: 8px 17px;
+  padding: 6px 17px;
+  border-radius: 2px;
+  overflow: hidden;
+  margin: 6px 6px;
 }
 .im_edit_cancel_link {
   float: left;
 }
-.im_edit_delete_link,
+.im_edit_flush_link {
-.im_edit_forward_link {
   float: right;
 }
-
+.im_edit_flush_link:hover,
-.im_edit_delete_link:hover,
-.im_edit_forward_link:hover,
 .im_edit_cancel_link:hover {
   background: #f2f6fa;
   text-decoration: none;
 }
-.im_edit_delete_link {
+
-  line-height: 0;
+.im_edit_selected_actions {
+  text-align: center;
+}
+.im_edit_delete_btn,
+.im_edit_forward_btn {
+  border-radius: 2px;
+  padding: 5px 17px;
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 18px;
+  margin: 6px 6px;
 }
 
 .im_edit_panel_title {
@@ -2141,11 +2179,6 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status {
 .is_1x .icon-delete {
   background-image: url(../img/icons/IconsetW_1x.png?2);
 }
-
-.im_message_date:hover {
-  cursor: pointer;
-  text-decoration: underline;
-}
 .im_message_selected {
   background: #f2f6fa;
 }
@@ -2162,39 +2195,44 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status {
   color: #91a6ba;
 }
 
-.im_history_selectable .im_message_date:hover {
-  text-decoration: none;
-}
-
 .im_message_wrap {
   max-width: 526px;
   padding: 0 15px;
   margin: 0 auto;
   position: relative;
 }
+.im_content_message_select_area {
+  display: none;
+  cursor: pointer;
+  position: absolute;
+  width: 112px;
+  height: 50px;
+  margin: -8px 0 0 -112px;
+}
+@media (min-width: 1024px) {
+  .im_content_message_select_area {
+    display: block;
+  }
+}
 
 .icon-select-tick {
   display: none;
-  position: absolute;
+  width: 25px;
-  width: 17px;
+  height: 25px;
-  height: 15px;
+  margin: 14px 0 0 40px;
-  margin: 10px 0 0 -75px;
+  background: url(../img/icons/IconsetW.png?1) -9px -516px no-repeat;
-  background: url(../img/icons/IconsetW.png?1) -13px -343px no-repeat;
   background-size: 42px 560px;
 }
 .is_1x .icon-select-tick {
   background-image: url(../img/icons/IconsetW_1x.png?2);
 }
-
+.im_history_selectable .icon-select-tick,
-@media (min-width: 1024px) {
+.im_content_message_select_area:hover .icon-select-tick {
-  .im_history_selectable .icon-select-tick {
+  display: inline-block;
-    display: inline-block;
-  }
 }
-
 .im_message_selected .icon-select-tick,
 .im_history_selectable .im_message_outer_wrap:hover .icon-select-tick {
-  background-position: -13px -367px;
+  background-position: -9px -481px;
   opacity: 0.5;
 }
 .im_message_selected .icon-select-tick {
@@ -2262,6 +2300,21 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status {
     right: 0;
     max-width: none;
   }
+
+  .im_edit_panel_wrap {
+    margin: 0 5px;
+  }
+  .im_edit_flush_link,
+  .im_edit_cancel_link,
+  .im_edit_delete_btn,
+  .im_edit_forward_btn {
+    padding-left: 5px;
+    padding-right: 5px;
+    margin: 6px 4px;
+  }
+  .im_edit_panel_wrap {
+    padding-bottom: 22px;
+  }
 }
 
 @media (max-height: 480px) {

app/js/controllers.js

@@ -347,6 +347,7 @@ angular.module('myApp.controllers', [])
     $scope.selectedDelete = selectedDelete;
     $scope.selectedForward = selectedForward;
     $scope.selectedCancel = selectedCancel;
+    $scope.selectedFlush = selectedFlush;
     $scope.toggleEdit = toggleEdit;
     $scope.toggleMedia = toggleMedia;
     $scope.showPeerInfo = showPeerInfo;
@@ -478,7 +479,7 @@ angular.module('myApp.controllers', [])
     }
 
     function toggleMessage (messageID, target) {
-      if (!$scope.selectActions && !$(target).hasClass('im_message_date') && !$(target).hasClass('im_message_meta')) {
+      if (!$scope.selectActions && !$(target).hasClass('icon-select-tick') && !$(target).hasClass('im_content_message_select_area')) {
         return false;
       }
       if ($scope.selectedMsgs[messageID]) {
@@ -505,6 +506,15 @@ angular.module('myApp.controllers', [])
       $scope.$broadcast('ui_panel_update');
     }
 
+    function selectedFlush () {
+      if (confirm('Are you sure? This can not be undone!') !== true) {
+        return false;
+      }
+      AppMessagesManager.flushHistory($scope.curDialog.inputPeer).then(function () {
+        selectedCancel();
+      });
+    };
+
     function selectedDelete () {
       if ($scope.selectedCount > 0) {
         var selectedMessageIDs = [];

app/js/directives.js

@@ -112,7 +112,6 @@ angular.module('myApp.directives', ['myApp.filters'])
       link: link
     };
 
-
     function link (scope, element, attrs) {
       var searchWrap = $('.contacts_modal_search')[0],
           panelWrap = $('.contacts_modal_panel')[0],
@@ -150,7 +149,7 @@ angular.module('myApp.directives', ['myApp.filters'])
           scrollableWrap = $('.im_history_scrollable_wrap', element)[0],
           scrollable = $('.im_history_scrollable', element)[0],
           panelWrap = $('.im_history_panel_wrap', element)[0],
-          sendPanelWrap = $('.im_send_panel_wrap', element)[0],
+          bottomPanelWrap = $('.im_bottom_panel_wrap', element)[0],
           sendFormWrap = $('.im_send_form_wrap', element)[0],
           headWrap = $('.tg_page_head')[0],
           footer = $('.im_page_footer')[0],
@@ -246,21 +245,9 @@ angular.module('myApp.directives', ['myApp.filters'])
       });
 
       scope.$on('ui_panel_update', function () {
-        var h = $(historyWrap).height();
-        $(panelWrap).addClass('im_panel_to_top');
         onContentLoaded(function () {
-          $(panelWrap).removeClass('im_panel_to_top');
+          updateSizes();
-          updateSizes(true);
+          scope.$broadcast('ui_message_send');
-
-          var newH = $(historyWrap).height();
-
-          if (atBottom) {
-            scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
-            updateScroller();
-          } else {
-            scrollableWrap.scrollTop -= newH - h;
-            updateScroller();
-          }
         });
       });
 
@@ -283,11 +270,13 @@ angular.module('myApp.directives', ['myApp.filters'])
       });
 
       function updateSizes (heightOnly) {
-        $(sendFormWrap).css({
+        if ($(sendFormWrap).is(':visible')) {
-          height: $(sendForm).height()
+          $(sendFormWrap).css({
-        });
+            height: $(sendForm).height()
+          });
+        }
 
-        var historyH = $($window).height() - panelWrap.offsetHeight - sendPanelWrap.offsetHeight - (headWrap ? headWrap.offsetHeight : 44) - footer.offsetHeight;
+        var historyH = $($window).height() - panelWrap.offsetHeight - bottomPanelWrap.offsetHeight - (headWrap ? headWrap.offsetHeight : 44) - footer.offsetHeight;
         $(historyWrap).css({
           height: historyH
         });

app/js/services.js

@@ -14,7 +14,8 @@ angular.module('myApp.services', [])
 .service('AppConfigManager', function ($q) {
   var testPrefix = window._testMode ? 't_' : '';
   var cache = {};
-  var useLs = !window.chrome || !chrome.storage || !chrome.storage.local;
+  var useCs = !!(window.chrome && chrome.storage && chrome.storage.local);
+  var useLs = !useCs && !!window.localStorage;
 
   function getValue() {
     var keys = Array.prototype.slice.call(arguments),
@@ -35,6 +36,9 @@ angular.module('myApp.services', [])
         value = (value === undefined || value === null) ? false : JSON.parse(value);
         result.push(cache[key] = value);
       }
+      else if (!useCs) {
+        result.push(cache[key] = false);
+      }
       else {
         allFound = false;
       }
@@ -74,6 +78,10 @@ angular.module('myApp.services', [])
       return $q.when();
     }
 
+    if (!useCs) {
+      return $q.when();
+    }
+
     var deferred = $q.defer();
 
     chrome.storage.local.set(keyValues, function () {
@@ -102,6 +110,10 @@ angular.module('myApp.services', [])
       return $q.when();
     }
 
+    if (!useCs) {
+      return $q.when();
+    }
+
     var deferred = $q.defer();
 
     chrome.storage.local.remove(keys, function () {

app/js/util.js

@@ -5,6 +5,11 @@
  * https://github.com/zhukov/webogram/blob/master/LICENSE
  */
 
+var _logTimer = (new Date()).getTime();
+function dT () {
+  return '[' + (((new Date()).getTime() - _logTimer) / 1000).toFixed(3) + ']';
+}
+
 function checkClick (e, noprevent) {
   if (e.which == 1 && (e.ctrlKey || e.metaKey) || e.which == 2) {
     return true;

app/partials/chat_create_modal.html

@@ -18,7 +18,7 @@
         <div class="contacts_modal_actions pull-right">
           <button class="btn btn-default" ng-click="$dismiss()"> Cancel </button>
 
-          <button class="btn btn-tg" type="submit"> Create </button>
+          <button class="btn btn-success" type="submit"> Create </button>
         </div>
 
       </div>

app/partials/chat_edit_modal.html

@@ -18,7 +18,7 @@
         <div class="contacts_modal_actions pull-right">
           <button class="btn btn-default" ng-click="$dismiss()"> Cancel </button>
 
-          <button class="btn btn-tg" type="submit"> Save </button>
+          <button class="btn btn-success" type="submit"> Save </button>
         </div>
 
       </div>

app/partials/chat_modal.html

@@ -49,10 +49,6 @@
           </a>
         </div>
 
-        <div class="chat_modal_clear">
-          <a href="" ng-click="flushHistory()">Clear History</a>
-        </div>
-
         <div class="chat_modal_leave_join" ng-if="chatFull.chat._ != 'chatForbidden'">
           <div class="chat_modal_leave"  ng-if="!chatFull.chat.left">
             <a href="" ng-click="leaveGroup()">Leave group</a>

app/partials/contacts_modal.html

@@ -50,7 +50,7 @@
 
     <div ng-if="multiSelect" class="contacts_modal_panel">
 
-      <button class="btn btn-tg btn-block" ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="submitSelected()" type="submit">
+      <button class="btn btn-success btn-block" ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="submitSelected()" type="submit">
         Next »
       </button>
 

app/partials/im.html

@@ -78,18 +78,6 @@
 
             </div>
 
-            <div class="im_edit_panel_wrap clearfix" ng-show="selectActions" ng-class="{im_edit_panel_wrap_loaded: true}">
-              <a class="im_edit_delete_link" ng-click="selectedDelete()"><i class="icon icon-delete"></i></a>
-              <a class="im_edit_forward_link" ng-click="selectedForward()">Forward</a>
-              <a class="im_edit_cancel_link" ng-click="selectedCancel()">Cancel</a>
-              <h4 class="im_edit_panel_title">
-                <ng-pluralize count="selectedCount"
-                                 when="{'0': 'Select messages', 'one': '1 message', 'other': '{} messages'}">
-                </ng-pluralize>
-              </h4>
-            </div>
-
-
           </div>
 
           <div class="im_history_wrap nano">
@@ -114,52 +102,72 @@
 
           </div>
 
-          <div class="im_send_panel_wrap">
+          <div class="im_bottom_panel_wrap">
 
-            <div class="im_send_form_wrap1">
+            <div class="im_edit_panel_wrap clearfix" ng-show="selectActions" ng-class="{im_edit_panel_wrap_loaded: true}">
+              <div class="im_edit_panel_border"></div>
+              <a class="im_edit_flush_link" ng-click="selectedFlush()">
+                Clear History
+              </a>
+              <a class="im_edit_cancel_link" ng-click="selectedCancel()">
+                Cancel
+              </a>
+              <div class="im_edit_selected_actions">
+                <a class="btn btn-danger im_edit_delete_btn" ng-click="selectedDelete()">
+                  Delete <strong class="im_selected_count" ng-show="selectedCount > 0" ng-bind="selectedCount"></strong>
+                </a><a class="btn btn-primary im_edit_forward_btn" ng-click="selectedForward()">
+                  Forward <strong class="im_selected_count" ng-show="selectedCount > 0" ng-bind="selectedCount"></strong>
+                </a>
+              </div>
+            </div>
 
-              <div class="im_send_form_wrap clearfix" ng-controller="AppImSendController">
+            <div class="im_send_panel_wrap" ng-hide="selectActions">
-                <div class="pull-right im_panel_peer_photo" ng-click="showPeerInfo()">
+
-                  <img
+              <div class="im_send_form_wrap1">
-                    class="im_panel_peer_photo"
+
-                    my-load-thumb
+                <div class="im_send_form_wrap clearfix" ng-controller="AppImSendController">
-                    thumb="historyPeer.photo"
+                  <div class="pull-right im_panel_peer_photo" ng-click="showPeerInfo()">
-                  />
+                    <img
-                  <i class="icon im_panel_peer_online" ng-show="historyPeer.id > 0 &amp;&amp; historyPeer.data.status._ == 'userStatusOnline'"></i>
+                      class="im_panel_peer_photo"
+                      my-load-thumb
+                      thumb="historyPeer.photo"
+                    />
+                    <i class="icon im_panel_peer_online" ng-show="historyPeer.id > 0 &amp;&amp; historyPeer.data.status._ == 'userStatusOnline'"></i>
+                  </div>
+                  <div class="pull-left im_panel_own_photo">
+                    <img
+                      class="im_panel_own_photo"
+                      my-load-thumb
+                      thumb="ownPhoto"
+                    />
+                  </div>
+                  <form my-send-form draft-message="draftMessage" class="im_send_form" ng-submit="sendMessage($event)">
+                    <div class="im_send_dropbox_wrap"> Drop photos here to send </div>
+                    <textarea ng-model="draftMessage.text" placeholder="Write a message..." class="form-control im_message_field"></textarea>
+
+                    <div class="im_media_attach pull-right">
+                      <input type="file" class="im_media_attach_input" size="28" multiple="true" accept="image/x-png, image/png, image/gif, image/jpeg, video/*, audio/mpeg, audio/mp3" />
+                      <i class="icon icon-camera"></i>
+                    </div>
+
+                    <div class="im_attach pull-right">
+                      <input type="file" class="im_attach_input" size="28" multiple="true" />
+                      <i class="icon icon-paperclip"></i>
+                    </div>
+
+
+                    <div class="im_emoji_btn pull-right">
+                      <i class="icon icon-emoji"></i>
+                    </div>
+
+                    <button type="submit" class="btn btn-success im_submit">Send</button>
+                  </form>
                 </div>
-                <div class="pull-left im_panel_own_photo">
-                  <img
-                    class="im_panel_own_photo"
-                    my-load-thumb
-                    thumb="ownPhoto"
-                  />
-                </div>
-                <form my-send-form draft-message="draftMessage" class="im_send_form" ng-submit="sendMessage($event)">
-                  <div class="im_send_dropbox_wrap"> Drop photos here to send </div>
-                  <textarea ng-model="draftMessage.text" placeholder="Write a message..." class="form-control im_message_field"></textarea>
 
-                  <div class="im_media_attach pull-right">
-                    <input type="file" class="im_media_attach_input" size="28" multiple="true" accept="image/x-png, image/png, image/gif, image/jpeg, video/*, audio/mpeg, audio/mp3" />
-                    <i class="icon icon-camera"></i>
-                  </div>
-
-                  <div class="im_attach pull-right">
-                    <input type="file" class="im_attach_input" size="28" multiple="true" />
-                    <i class="icon icon-paperclip"></i>
-                  </div>
-
-
-                  <div class="im_emoji_btn pull-right">
-                    <i class="icon icon-emoji"></i>
-                  </div>
-
-                  <button type="submit" class="btn btn-tg im_submit">Send</button>
-                </form>
               </div>
 
             </div>
 
-
           </div>
 
         </div>

app/partials/login.html

@@ -11,7 +11,7 @@
       <label class="control-label" for="phone_number" ng-if="error.field == 'phone'">Incorrect phone number</label>
       <input type="tel" class="form-control" name="phone_number" ng-model="credentials.phone_number" placeholder="Enter your phone" required>
     </div>
-    <button class="btn btn-tg btn-block" ng-class="{disabled: progress.enabled}" ng-disabled="progress.enabled" type="submit">
+    <button class="btn btn-success btn-block" ng-class="{disabled: progress.enabled}" ng-disabled="progress.enabled" type="submit">
       {{progress.enabled ? 'Generating keys...' : 'Next'}}
     </button>
   </form>
@@ -31,7 +31,7 @@
       <input type="number" maxlength="5" class="form-control" name="phone_code" ng-model="credentials.phone_code" placeholder="Enter your code" required>
     </div>
 
-    <button class="btn btn-tg btn-block" type="submit" ng-class="{disabled: progress.enabled}" ng-disabled="progress.enabled">
+    <button class="btn btn-success btn-block" type="submit" ng-class="{disabled: progress.enabled}" ng-disabled="progress.enabled">
       {{progress.enabled ? 'Checking code...' : 'Sign in'}}
     </button>
   </form>

app/partials/message.html

@@ -58,7 +58,9 @@
     </div>
 
     <div class="im_content_message_wrap" ng-if="historyMessage._ != 'messageService'">
-      <i class="icon icon-select-tick"></i>
+      <div class="im_content_message_select_area">
+        <i class="icon icon-select-tick"></i>
+      </div>
 
       <a ng-click="historyMessage.send()" ng-if="historyMessage.error">
         <i class="icon-message-status icon-message-status-error" tooltip="Try again"></i>

app/partials/user_modal.html

@@ -31,10 +31,6 @@
           {{settings.notifications ? 'ON' : 'OFF'}}
         </a>
       </div>
-
-      <div class="user_modal_clear">
-        <a href="" ng-click="flushHistory()">Clear Chat History</a>
-      </div>
     </div>
 
   </div>

app/partials/welcome.html

@@ -11,7 +11,7 @@
       <p>It is an alpha, which means it is still not 200% secure and functional.</p>
       <p>Visit <a target="_blank" href="https://telegram.org/">telegram.org</a> to learn more.</p>
     </div>
-    <a href="#/login" class="btn btn-tg btn-block">Start Messaging</a>
+    <a href="#/login" class="btn btn-success btn-block">Start Messaging</a>
   </div>
 
 </div>

webogram.sublime-project

@@ -0,0 +1,11 @@
+{
+	"folders":
+	[
+		{
+			"follow_symlinks": true,
+			"path": ".",
+      "folder_exclude_patterns": ["*dist"],
+      "file_exclude_patterns": ["*.zip"]
+		}
+	]
+}