Browse Source

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

master
Igor Zhukov 11 years ago
parent
commit
c0a243d89e
  1. 1
      .gitignore
  2. 181
      app/css/app.css
  3. 12
      app/js/controllers.js
  4. 23
      app/js/directives.js
  5. 14
      app/js/services.js
  6. 5
      app/js/util.js
  7. 2
      app/partials/chat_create_modal.html
  8. 2
      app/partials/chat_edit_modal.html
  9. 4
      app/partials/chat_modal.html
  10. 2
      app/partials/contacts_modal.html
  11. 36
      app/partials/im.html
  12. 4
      app/partials/login.html
  13. 2
      app/partials/message.html
  14. 4
      app/partials/user_modal.html
  15. 2
      app/partials/welcome.html
  16. 11
      webogram.sublime-project

1
.gitignore vendored

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

181
app/css/app.css

@ -71,47 +71,71 @@ input[type="number"]::-webkit-inner-spin-button {
} }
.btn-tg { .btn-success {
color: #ffffff; color: #ffffff;
background-color: #6AC065; background-color: #6AC065;
border-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; color: #ffffff;
background-color: #61b75b; background-color: #61b75b;
border-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: #5aaf54;
background-image: none; 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 { .tg_page_head .navbar {
@ -1139,15 +1163,15 @@ div.im_message_video_thumb {
} }
.icon-message-status { .icon-message-status {
background: #43A4DB; background: #43A4DB;
border: 1px solid #FFF; border: 0;
display: block; display: block;
width: 11px; width: 10px;
height: 11px; height: 10px;
border-radius: 7px; border-radius: 7px;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
margin-left: -27px; margin-left: -26px;
margin-top: 14px; margin-top: 13px;
opacity: 0; opacity: 0;
} }
.icon-message-status-unread { .icon-message-status-unread {
@ -2087,8 +2111,13 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status {
/* Messages edit panel */ /* Messages edit panel */
.im_edit_panel_wrap { .im_edit_panel_wrap {
display: none; 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 { .im_edit_panel_wrap_loaded {
display: block; display: block;
@ -2099,28 +2128,37 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status {
/*width: 652px;*/ /*width: 652px;*/
width: 100%; width: 100%;
} }
.im_edit_delete_link, .im_edit_flush_link,
.im_edit_forward_link,
.im_edit_cancel_link { .im_edit_cancel_link {
display: block; display: block;
padding: 8px 17px; padding: 6px 17px;
border-radius: 2px;
overflow: hidden;
margin: 6px 6px;
} }
.im_edit_cancel_link { .im_edit_cancel_link {
float: left; float: left;
} }
.im_edit_delete_link, .im_edit_flush_link {
.im_edit_forward_link {
float: right; float: right;
} }
.im_edit_flush_link:hover,
.im_edit_delete_link:hover,
.im_edit_forward_link:hover,
.im_edit_cancel_link:hover { .im_edit_cancel_link:hover {
background: #f2f6fa; background: #f2f6fa;
text-decoration: none; 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 { .im_edit_panel_title {
@ -2141,11 +2179,6 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status {
.is_1x .icon-delete { .is_1x .icon-delete {
background-image: url(../img/icons/IconsetW_1x.png?2); background-image: url(../img/icons/IconsetW_1x.png?2);
} }
.im_message_date:hover {
cursor: pointer;
text-decoration: underline;
}
.im_message_selected { .im_message_selected {
background: #f2f6fa; background: #f2f6fa;
} }
@ -2162,39 +2195,44 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status {
color: #91a6ba; color: #91a6ba;
} }
.im_history_selectable .im_message_date:hover {
text-decoration: none;
}
.im_message_wrap { .im_message_wrap {
max-width: 526px; max-width: 526px;
padding: 0 15px; padding: 0 15px;
margin: 0 auto; margin: 0 auto;
position: relative; 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 { .icon-select-tick {
display: none; 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; background-size: 42px 560px;
} }
.is_1x .icon-select-tick { .is_1x .icon-select-tick {
background-image: url(../img/icons/IconsetW_1x.png?2); 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_message_selected .icon-select-tick,
.im_history_selectable .im_message_outer_wrap:hover .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; opacity: 0.5;
} }
.im_message_selected .icon-select-tick { .im_message_selected .icon-select-tick {
@ -2262,6 +2300,21 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status {
right: 0; right: 0;
max-width: none; 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) { @media (max-height: 480px) {

12
app/js/controllers.js

@ -347,6 +347,7 @@ angular.module('myApp.controllers', [])
$scope.selectedDelete = selectedDelete; $scope.selectedDelete = selectedDelete;
$scope.selectedForward = selectedForward; $scope.selectedForward = selectedForward;
$scope.selectedCancel = selectedCancel; $scope.selectedCancel = selectedCancel;
$scope.selectedFlush = selectedFlush;
$scope.toggleEdit = toggleEdit; $scope.toggleEdit = toggleEdit;
$scope.toggleMedia = toggleMedia; $scope.toggleMedia = toggleMedia;
$scope.showPeerInfo = showPeerInfo; $scope.showPeerInfo = showPeerInfo;
@ -478,7 +479,7 @@ angular.module('myApp.controllers', [])
} }
function toggleMessage (messageID, target) { 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; return false;
} }
if ($scope.selectedMsgs[messageID]) { if ($scope.selectedMsgs[messageID]) {
@ -505,6 +506,15 @@ angular.module('myApp.controllers', [])
$scope.$broadcast('ui_panel_update'); $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 () { function selectedDelete () {
if ($scope.selectedCount > 0) { if ($scope.selectedCount > 0) {
var selectedMessageIDs = []; var selectedMessageIDs = [];

23
app/js/directives.js

@ -112,7 +112,6 @@ angular.module('myApp.directives', ['myApp.filters'])
link: link link: link
}; };
function link (scope, element, attrs) { function link (scope, element, attrs) {
var searchWrap = $('.contacts_modal_search')[0], var searchWrap = $('.contacts_modal_search')[0],
panelWrap = $('.contacts_modal_panel')[0], panelWrap = $('.contacts_modal_panel')[0],
@ -150,7 +149,7 @@ angular.module('myApp.directives', ['myApp.filters'])
scrollableWrap = $('.im_history_scrollable_wrap', element)[0], scrollableWrap = $('.im_history_scrollable_wrap', element)[0],
scrollable = $('.im_history_scrollable', element)[0], scrollable = $('.im_history_scrollable', element)[0],
panelWrap = $('.im_history_panel_wrap', 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], sendFormWrap = $('.im_send_form_wrap', element)[0],
headWrap = $('.tg_page_head')[0], headWrap = $('.tg_page_head')[0],
footer = $('.im_page_footer')[0], footer = $('.im_page_footer')[0],
@ -246,21 +245,9 @@ angular.module('myApp.directives', ['myApp.filters'])
}); });
scope.$on('ui_panel_update', function () { scope.$on('ui_panel_update', function () {
var h = $(historyWrap).height();
$(panelWrap).addClass('im_panel_to_top');
onContentLoaded(function () { 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) { function updateSizes (heightOnly) {
if ($(sendFormWrap).is(':visible')) {
$(sendFormWrap).css({ $(sendFormWrap).css({
height: $(sendForm).height() 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({ $(historyWrap).css({
height: historyH height: historyH
}); });

14
app/js/services.js

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

5
app/js/util.js

@ -5,6 +5,11 @@
* https://github.com/zhukov/webogram/blob/master/LICENSE * 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) { function checkClick (e, noprevent) {
if (e.which == 1 && (e.ctrlKey || e.metaKey) || e.which == 2) { if (e.which == 1 && (e.ctrlKey || e.metaKey) || e.which == 2) {
return true; return true;

2
app/partials/chat_create_modal.html

@ -18,7 +18,7 @@
<div class="contacts_modal_actions pull-right"> <div class="contacts_modal_actions pull-right">
<button class="btn btn-default" ng-click="$dismiss()"> Cancel </button> <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>
</div> </div>

2
app/partials/chat_edit_modal.html

@ -18,7 +18,7 @@
<div class="contacts_modal_actions pull-right"> <div class="contacts_modal_actions pull-right">
<button class="btn btn-default" ng-click="$dismiss()"> Cancel </button> <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>
</div> </div>

4
app/partials/chat_modal.html

@ -49,10 +49,6 @@
</a> </a>
</div> </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_join" ng-if="chatFull.chat._ != 'chatForbidden'">
<div class="chat_modal_leave" ng-if="!chatFull.chat.left"> <div class="chat_modal_leave" ng-if="!chatFull.chat.left">
<a href="" ng-click="leaveGroup()">Leave group</a> <a href="" ng-click="leaveGroup()">Leave group</a>

2
app/partials/contacts_modal.html

@ -50,7 +50,7 @@
<div ng-if="multiSelect" class="contacts_modal_panel"> <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 » Next »
</button> </button>

36
app/partials/im.html

@ -78,18 +78,6 @@
</div> </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>
<div class="im_history_wrap nano"> <div class="im_history_wrap nano">
@ -114,7 +102,26 @@
</div> </div>
<div class="im_send_panel_wrap"> <div class="im_bottom_panel_wrap">
<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_panel_wrap" ng-hide="selectActions">
<div class="im_send_form_wrap1"> <div class="im_send_form_wrap1">
@ -153,12 +160,13 @@
<i class="icon icon-emoji"></i> <i class="icon icon-emoji"></i>
</div> </div>
<button type="submit" class="btn btn-tg im_submit">Send</button> <button type="submit" class="btn btn-success im_submit">Send</button>
</form> </form>
</div> </div>
</div> </div>
</div>
</div> </div>

4
app/partials/login.html

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

2
app/partials/message.html

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

4
app/partials/user_modal.html

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

2
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>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> <p>Visit <a target="_blank" href="https://telegram.org/">telegram.org</a> to learn more.</p>
</div> </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>
</div> </div>

11
webogram.sublime-project vendored

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