r4sas
/
webogram-i2p
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

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

master
Igor Zhukov 10 years ago
parent
fde34875c2
commit
c0a243d89e
16 changed files with 231 additions and 148 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      .gitignore
  2. 183
      app/css/app.css
  3. 12
      app/js/controllers.js
  4. 29
      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. 100
      app/partials/im.html
  12. 4
      app/partials/login.html
  13. 4
      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
Unescape View File

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

183
app/css/app.css
Unescape View File

@ -71,47 +71,71 @@ input[type="number"]::-webkit-inner-spin-button { @@ -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-tg:focus,
.btn-tg:active,
.btn-tg.active,
.open .dropdown-toggle.btn-tg {
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
color: #ffffff;
background-color: #61b75b;
border-color: #61b75b;
}
.btn-tg:active,
.btn-tg.active,
.open .dropdown-toggle.btn-tg {
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
background: #5aaf54;
background-image: none;
}
.btn-tg.disabled,
.btn-tg[disabled],
fieldset[disabled] .btn-tg,
.btn-tg.disabled:hover,
.btn-tg[disabled]:hover,
fieldset[disabled] .btn-tg:hover,
.btn-tg.disabled:focus,
.btn-tg[disabled]:focus,
fieldset[disabled] .btn-tg:focus,
.btn-tg.disabled:active,
.btn-tg[disabled]:active,
fieldset[disabled] .btn-tg:active,
.btn-tg.disabled.active,
.btn-tg[disabled].active,
fieldset[disabled] .btn-tg.active {
color: #DDD;
background-color: #999;
border-color: #999;
.btn-danger {
color: #ffffff;
background-color: #c05f5a;
border-color: #c05f5a;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.open .dropdown-toggle.btn-danger {
color: #ffffff;
background-color: #ab5450;
border-color: #ab5450;
}
.btn-danger:active,
.btn-danger.active,
.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 { @@ -1139,15 +1163,15 @@ div.im_message_video_thumb {
}
.icon-message-status {
background: #43A4DB;
border: 1px solid #FFF;
border: 0;
display: block;
width: 11px;
height: 11px;
width: 10px;
height: 10px;
border-radius: 7px;
overflow: hidden;
position: absolute;
margin-left: -27px;
margin-top: 14px;
margin-left: -26px;
margin-top: 13px;
opacity: 0;
}
.icon-message-status-unread {
@ -2087,8 +2111,13 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status { @@ -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: 5px 5px;
padding: 10px 0 34px;
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 { @@ -2099,28 +2128,37 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status {
/*width: 652px;*/
width: 100%;
}
.im_edit_delete_link,
.im_edit_forward_link,
.im_edit_flush_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_forward_link {
.im_edit_flush_link {
float: right;
}
.im_edit_delete_link:hover,
.im_edit_forward_link:hover,
.im_edit_flush_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 { @@ -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 { @@ -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: 17px;
height: 15px;
margin: 10px 0 0 -75px;
background: url(../img/icons/IconsetW.png?1) -13px -343px no-repeat;
width: 25px;
height: 25px;
margin: 14px 0 0 40px;
background: url(../img/icons/IconsetW.png?1) -9px -516px no-repeat;
background-size: 42px 560px;
}
.is_1x .icon-select-tick {
background-image: url(../img/icons/IconsetW_1x.png?2);
}
@media (min-width: 1024px) {
.im_history_selectable .icon-select-tick {
display: inline-block;
}
.im_history_selectable .icon-select-tick,
.im_content_message_select_area:hover .icon-select-tick {
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 { @@ -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) {

12
app/js/controllers.js
Unescape View File

@ -347,6 +347,7 @@ angular.module('myApp.controllers', []) @@ -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', []) @@ -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', []) @@ -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 = [];

29
app/js/directives.js
Unescape View File

@ -112,7 +112,6 @@ angular.module('myApp.directives', ['myApp.filters']) @@ -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']) @@ -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']) @@ -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(true);
var newH = $(historyWrap).height();
if (atBottom) {
scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
updateScroller();
} else {
scrollableWrap.scrollTop -= newH - h;
updateScroller();
}
updateSizes();
scope.$broadcast('ui_message_send');
});
});
@ -283,11 +270,13 @@ angular.module('myApp.directives', ['myApp.filters']) @@ -283,11 +270,13 @@ angular.module('myApp.directives', ['myApp.filters'])
});
function updateSizes (heightOnly) {
$(sendFormWrap).css({
height: $(sendForm).height()
});
if ($(sendFormWrap).is(':visible')) {
$(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
});

14
app/js/services.js
Unescape View File

@ -14,7 +14,8 @@ angular.module('myApp.services', []) @@ -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', []) @@ -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', []) @@ -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', []) @@ -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 () {

5
app/js/util.js
Unescape View File

@ -5,6 +5,11 @@ @@ -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;

2
app/partials/chat_create_modal.html
Unescape View File

@ -18,7 +18,7 @@ @@ -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>

2
app/partials/chat_edit_modal.html
Unescape View File

@ -18,7 +18,7 @@ @@ -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>

4
app/partials/chat_modal.html
Unescape View File

@ -49,10 +49,6 @@ @@ -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>

2
app/partials/contacts_modal.html
Unescape View File

@ -50,7 +50,7 @@ @@ -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>

100
app/partials/im.html
Unescape View File

@ -78,18 +78,6 @@ @@ -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 @@ @@ -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="pull-right im_panel_peer_photo" ng-click="showPeerInfo()">
<img
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_send_panel_wrap" ng-hide="selectActions">
<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_send_form_wrap1">
<div class="im_attach pull-right">
<input type="file" class="im_attach_input" size="28" multiple="true" />
<i class="icon icon-paperclip"></i>
<div class="im_send_form_wrap clearfix" ng-controller="AppImSendController">
<div class="pull-right im_panel_peer_photo" ng-click="showPeerInfo()">
<img
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-tg im_submit">Send</button>
</form>
<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>
</div>
</div>
</div>

4
app/partials/login.html
Unescape View File

@ -11,7 +11,7 @@ @@ -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 @@ @@ -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>

4
app/partials/message.html
Unescape View File

@ -58,7 +58,9 @@ @@ -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>

4
app/partials/user_modal.html
Unescape View File

@ -31,10 +31,6 @@ @@ -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>

2
app/partials/welcome.html
Unescape View File

@ -11,7 +11,7 @@ @@ -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>

11
webogram.sublime-project vendored
Unescape View File

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