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

Added new media attach button, new styles

master
Igor Zhukov 11 years ago
parent
bb2fba07d9
commit
d4d41ea8be
8 changed files with 128 additions and 45 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 106
      app/css/app.css
  2. BIN
      app/img/icons/IconsetW.png
  3. 10
      app/index.html
  4. 2
      app/js/app.js
  5. 4
      app/js/controllers.js
  6. 11
      app/js/directives.js
  7. 31
      app/js/services.js
  8. 9
      app/partials/im.html

106
app/css/app.css
Unescape View File

@ -20,9 +20,12 @@ body {
} }
body.non_osx, body.non_osx,
.non_osx .font-light { .non_osx .font-light {
font: 12px/18px Verdana, Tahoma, sans-serif, Arial, Helvetica; font: 13px/18px Tahoma, sans-serif, Arial, Helvetica;
font-weight: normal; font-weight: normal;
} }
.non_osx h4 {
font-size: 17px;
}
a { a {
color: #3a6d99; color: #3a6d99;
@ -387,8 +390,8 @@ fieldset[disabled] .btn-tg.active {
.im_dialogs_search_field { .im_dialogs_search_field {
font-size: 12px; font-size: 12px;
line-height: normal; line-height: normal;
background: #F2F2F2 url(../img/icons/Search_2x.png) 7px 9px no-repeat; background: #F2F2F2 url(../img/icons/IconsetW.png) -6px -205px no-repeat;
background-size: 15px 14px; background-size: 42px 280px;
border: 1px solid #F2F2F2; border: 1px solid #F2F2F2;
border-radius: 3px; border-radius: 3px;
padding: 6px 6px 6px 30px; padding: 6px 6px 6px 30px;
@ -402,10 +405,18 @@ fieldset[disabled] .btn-tg.active {
.im_dialogs_search_clear { .im_dialogs_search_clear {
position: absolute; position: absolute;
margin-left: 260px; margin-left: 262px;
margin-top: -25px; margin-top: -23px;
color: #999; color: #999;
font-size: 15px; width: 13px;
height: 13px;
vertical-align: text-top;
background: url(../img/icons/IconsetW.png) -15px -192px no-repeat;
background-size: 42px 280px;
opacity: 0.6;
}
.im_dialogs_search_clear:hover {
opacity: 1;
} }
@ -673,6 +684,9 @@ a.im_dialog:hover .im_dialog_message_text {
color: #3a6d99; color: #3a6d99;
font-weight: bold; font-weight: bold;
} }
.non_osx .im_message_author {
font-size: 12px;
}
.im_message_from_photo, .im_message_from_photo,
.im_message_contact_photo { .im_message_contact_photo {
@ -690,6 +704,9 @@ a.im_message_contact_photo {
color: #3C6E97; color: #3C6E97;
font-weight: bold; font-weight: bold;
} }
.non_osx .im_message_contact_name {
font-size: 12px;
}
a.im_message_photo_thumb, a.im_message_photo_thumb,
a.im_message_video_thumb { a.im_message_video_thumb {
display: block; display: block;
@ -763,8 +780,9 @@ div.im_message_video_thumb {
width: 38px; width: 38px;
height: 38px; height: 38px;
vertical-align: text-top; vertical-align: text-top;
background: #F2F2F2 url(../img/icons/DocGrey_2x.png) 8px 10px no-repeat;
background-size: 20px 20px; background: #F2F2F2 url(../img/icons/IconsetW.png) -2px -229px no-repeat;
background-size: 42px 280px;
border-radius: 3px; border-radius: 3px;
margin-right: 10px; margin-right: 10px;
} }
@ -903,7 +921,7 @@ div.im_message_body {
} }
div.im_message_fwd_header { div.im_message_fwd_header {
font-weight: bold; color: #808080;
} }
.im_message_text { .im_message_text {
@ -976,30 +994,31 @@ textarea.im_message_field {
padding: 0 2px; padding: 0 2px;
width: 23px; width: 23px;
height: 23px; height: 24px;
margin-top: 4px; margin-top: 4px;
margin-left: 17px;
} }
.icon-paperclip { .icon-paperclip {
display: inline-block; display: inline-block;
width: 19px; width: 19px;
height: 22px; height: 23px;
vertical-align: text-top; vertical-align: text-top;
background: url(../img/icons/Attach_2x.png) 0 0 no-repeat; background: url(../img/icons/IconsetW.png) -12px -68px no-repeat;
background-size: 19px 22px; background-size: 42px 280px;
opacity: 0.6; opacity: 0.8;
} }
.im_attach:hover .icon-paperclip { .im_attach:hover .icon-paperclip {
opacity: 1; opacity: 1;
} }
.im_attach:active .icon-paperclip { .im_attach:active .icon-paperclip {
background-image: url(../img/icons/Attach_pressed_2x.png); background-position: -12px -100px;
opacity: 1; opacity: 1;
} }
.im_emoji_btn { .im_emoji_btn {
cursor: pointer; cursor: pointer;
padding: 0 2px; padding: 0;
width: 23px; width: 23px;
height: 23px; height: 23px;
@ -1008,23 +1027,24 @@ textarea.im_message_field {
} }
.icon-emoji { .icon-emoji {
display: inline-block; display: inline-block;
width: 22px; width: 23px;
height: 22px; height: 23px;
vertical-align: text-top; vertical-align: text-top;
background: url(../img/icons/Smile_2x.png) 0 0 no-repeat; background: url(../img/icons/IconsetW.png) -10px -4px no-repeat;
background-size: 22px 22px; background-size: 42px 280px;
opacity: 0.6; opacity: 0.8;
} }
.im_emoji_btn:hover .icon-emoji { .im_emoji_btn:hover .icon-emoji {
opacity: 1; opacity: 1;
} }
.im_emoji_btn:active .icon-emoji, .im_emoji_btn:active .icon-emoji,
.im_emoji_btn.on .icon-emoji { .im_emoji_btn.on .icon-emoji {
background-image: url(../img/icons/Smile_pressed_2x.png); background-position: -10px -36px;
opacity: 1; opacity: 1;
} }
.im_attach_input { .im_attach_input,
.im_media_attach_input {
cursor: pointer; cursor: pointer;
font-size: 72px !important; font-size: 72px !important;
/*visibility: hidden;*/ /*visibility: hidden;*/
@ -1037,6 +1057,36 @@ textarea.im_message_field {
right: 0; right: 0;
} }
.im_media_attach {
cursor: pointer;
display: block;
overflow: hidden;
position: relative;
padding: 0;
width: 24px;
height: 22px;
margin-top: 4px;
}
.icon-camera {
display: inline-block;
width: 25px;
height: 21px;
vertical-align: text-top;
background: url(../img/icons/IconsetW.png) -9px -132px no-repeat;
background-size: 42px 280px;
opacity: 0.8;
}
.im_media_attach:hover .icon-camera {
opacity: 1;
}
.im_media_attach:active .icon-camera {
background-position: -9px -162px;
opacity: 1;
}
.im_panel_peer_photo, .im_panel_peer_photo,
.im_panel_own_photo { .im_panel_own_photo {
width: 50px; width: 50px;
@ -1096,6 +1146,9 @@ img.img_fullsize {
.media_modal_author { .media_modal_author {
font-weight: bold; font-weight: bold;
} }
.non_osx .media_modal_author {
font-size: 12px;
}
.user_modal_window .modal-dialog { .user_modal_window .modal-dialog {
padding-top: 150px; padding-top: 150px;
@ -1167,6 +1220,9 @@ img.img_fullsize {
font-weight: bold; font-weight: bold;
margin: 1px 0 2px; margin: 1px 0 2px;
} }
.non_osx .chat_modal_participant_name {
font-size: 12px;
}
.chat_modal_participant_status { .chat_modal_participant_status {
color: #999; color: #999;
} }
@ -1263,8 +1319,8 @@ img.img_fullsize {
} }
.emoji-menu-tail { .emoji-menu-tail {
background: url(../img/icons/Arrow_2x.png) 0 0 no-repeat; background: url(../img/icons/IconsetW.png) -14px -268px no-repeat;
background-size: 14px 7px; background-size: 42px 280px;
width: 14px; width: 14px;
height: 7px; height: 7px;
margin: 0 83px; margin: 0 83px;

BIN
app/img/icons/IconsetW.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

10
app/index.html
Unescape View File

@ -7,7 +7,7 @@
<link rel="stylesheet" href="vendor/angular/angular-csp.css"/> <link rel="stylesheet" href="vendor/angular/angular-csp.css"/>
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="vendor/jquery.nanoscroller/nanoscroller.css"/> <link rel="stylesheet" href="vendor/jquery.nanoscroller/nanoscroller.css"/>
<link rel="stylesheet" href="css/app.css?12"/> <link rel="stylesheet" href="css/app.css?13"/>
<link rel="icon" href="favicon.ico" type="image/x-icon" /> <link rel="icon" href="favicon.ico" type="image/x-icon" />
<meta property="og:title" content="Webogram"> <meta property="og:title" content="Webogram">
@ -51,11 +51,11 @@
<script type="text/javascript" src="js/lib/mtproto.js?17"></script> <script type="text/javascript" src="js/lib/mtproto.js?17"></script>
<script type="text/javascript" src="js/util.js"></script> <script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/app.js?9"></script> <script type="text/javascript" src="js/app.js?10"></script>
<script type="text/javascript" src="js/services.js?12"></script> <script type="text/javascript" src="js/services.js?13"></script>
<script type="text/javascript" src="js/controllers.js?18"></script> <script type="text/javascript" src="js/controllers.js?19"></script>
<script type="text/javascript" src="js/filters.js?3"></script> <script type="text/javascript" src="js/filters.js?3"></script>
<script type="text/javascript" src="js/directives.js?10"></script> <script type="text/javascript" src="js/directives.js?11"></script>
</body> </body>
</html> </html>

2
app/js/app.js
Unescape View File

@ -55,7 +55,7 @@ config(['$locationProvider', '$routeProvider', '$compileProvider', function($loc
// $locationProvider.html5Mode(true); // $locationProvider.html5Mode(true);
$routeProvider.when('/', {templateUrl: 'partials/welcome.html?2', controller: 'AppWelcomeController'}); $routeProvider.when('/', {templateUrl: 'partials/welcome.html?2', controller: 'AppWelcomeController'});
$routeProvider.when('/login', {templateUrl: 'partials/login.html?3', controller: 'AppLoginController'}); $routeProvider.when('/login', {templateUrl: 'partials/login.html?3', controller: 'AppLoginController'});
$routeProvider.when('/im', {templateUrl: 'partials/im.html?6', controller: 'AppIMController', reloadOnSearch: false}); $routeProvider.when('/im', {templateUrl: 'partials/im.html?7', controller: 'AppIMController', reloadOnSearch: false});
$routeProvider.otherwise({redirectTo: '/'}); $routeProvider.otherwise({redirectTo: '/'});
}]); }]);

4
app/js/controllers.js
Unescape View File

@ -530,7 +530,9 @@ angular.module('myApp.controllers', [])
} }
for (var i = 0; i < newVal.length; i++) { for (var i = 0; i < newVal.length; i++) {
AppMessagesManager.sendFile($scope.curDialog.peerID, newVal[i]); AppMessagesManager.sendFile($scope.curDialog.peerID, newVal[i], {
isMedia: $scope.draftMessage.isMedia
});
$scope.$broadcast('ui_message_send'); $scope.$broadcast('ui_message_send');
} }
} }

11
app/js/directives.js
Unescape View File

@ -250,7 +250,7 @@ angular.module('myApp.directives', ['myApp.filters'])
function link (scope, element, attrs) { function link (scope, element, attrs) {
var messageField = $('textarea', element)[0], var messageField = $('textarea', element)[0],
fileSelect = $('input', element)[0], fileSelects = $('input', element),
dropbox = $('.im_send_dropbox_wrap', element)[0], dropbox = $('.im_send_dropbox_wrap', element)[0],
emojiButton = $('.im_emoji_btn', element)[0], emojiButton = $('.im_emoji_btn', element)[0],
editorElement = messageField, editorElement = messageField,
@ -268,12 +268,14 @@ angular.module('myApp.directives', ['myApp.filters'])
// $(emojiMenu.firstChild).addClass('nano').nanoScroller({preventPageScrolling: true, tabIndex: -1}); // $(emojiMenu.firstChild).addClass('nano').nanoScroller({preventPageScrolling: true, tabIndex: -1});
$(fileSelect).on('change', function () { fileSelects.on('change', function () {
var self = this;
scope.$apply(function () { scope.$apply(function () {
scope.draftMessage.files = Array.prototype.slice.call(fileSelect.files); scope.draftMessage.files = Array.prototype.slice.call(self.files);
scope.draftMessage.isMedia = $(self).hasClass('im_media_attach_input');
setTimeout(function () { setTimeout(function () {
try { try {
fileSelect.value = ''; self.value = '';
} catch (e) {}; } catch (e) {};
}, 1000); }, 1000);
}); });
@ -358,6 +360,7 @@ angular.module('myApp.directives', ['myApp.filters'])
if (e.type == 'drop') { if (e.type == 'drop') {
scope.$apply(function () { scope.$apply(function () {
scope.draftMessage.files = Array.prototype.slice.call(e.originalEvent.dataTransfer.files); scope.draftMessage.files = Array.prototype.slice.call(e.originalEvent.dataTransfer.files);
scope.draftMessage.isMedia = false;
}); });
} }
dragTimeout = setTimeout(function () { dragTimeout = setTimeout(function () {

31
app/js/services.js
Unescape View File

@ -717,12 +717,23 @@ angular.module('myApp.services', [])
}; };
function sendFile(peerID, file, options) { function sendFile(peerID, file, options) {
options = options || {};
var messageID = tempID--, var messageID = tempID--,
randomID = [nextRandomInt(0xFFFFFFFF), nextRandomInt(0xFFFFFFFF)], randomID = [nextRandomInt(0xFFFFFFFF), nextRandomInt(0xFFFFFFFF)],
randomIDS = bigint(randomID[0]).shiftLeft(32).add(bigint(randomID[1])).toString(), randomIDS = bigint(randomID[0]).shiftLeft(32).add(bigint(randomID[1])).toString(),
historyStorage = historiesStorage[peerID], historyStorage = historiesStorage[peerID],
inputPeer = AppPeersManager.getInputPeerByID(peerID), inputPeer = AppPeersManager.getInputPeerByID(peerID),
isPhoto = file.type == 'image/jpeg' && file.size <= 5242880; // 5Mb attachType;
if (!options.isMedia) {
attachType = 'doc';
} else if (['image/jpeg', 'image/gif', 'image/png', 'image/bmp'].indexOf(file.type) >= 0) {
attachType = 'photo';
} else if (file.type.substr(0, 6) == 'video/') {
attachType = 'video';
} else {
attachType = 'doc';
}
if (historyStorage === undefined) { if (historyStorage === undefined) {
historyStorage = historiesStorage[peerID] = {count: null, history: [], pending: []}; historyStorage = historiesStorage[peerID] = {count: null, history: [], pending: []};
@ -731,7 +742,7 @@ angular.module('myApp.services', [])
MtpApiManager.getUserID().then(function (fromID) { MtpApiManager.getUserID().then(function (fromID) {
var media = { var media = {
_: 'messageMediaPending', _: 'messageMediaPending',
type: isPhoto ? 'photo' : 'doc', type: attachType,
file_name: file.name, file_name: file.name,
size: file.size, size: file.size,
progress: {percent: 1, total: file.size} progress: {percent: 1, total: file.size}
@ -754,10 +765,18 @@ angular.module('myApp.services', [])
message.send = function () { message.send = function () {
MtpApiFileManager.uploadFile(file).then(function (inputFile) { MtpApiFileManager.uploadFile(file).then(function (inputFile) {
var inputMedia; var inputMedia;
if (isPhoto) { switch (attachType) {
inputMedia = {_: 'inputMediaUploadedPhoto', file: inputFile}; case 'photo':
} else { inputMedia = {_: 'inputMediaUploadedPhoto', file: inputFile};
inputMedia = {_: 'inputMediaUploadedDocument', file: inputFile, file_name: file.name, mime_type: file.type}; break;
case 'video':
inputMedia = {_: 'inputMediaUploadedVideo', file: inputFile, duration: 0, w: 0, h: 0};
break;
case 'doc':
default:
inputMedia = {_: 'inputMediaUploadedDocument', file: inputFile, file_name: file.name, mime_type: file.type};
} }
MtpApiManager.invokeApi('messages.sendMedia', { MtpApiManager.invokeApi('messages.sendMedia', {
peer: inputPeer, peer: inputPeer,

9
app/partials/im.html
Unescape View File

@ -7,9 +7,7 @@
<div class="im_dialogs_col_wrap" ng-controller="AppImDialogsController"> <div class="im_dialogs_col_wrap" ng-controller="AppImDialogsController">
<div class="im_dialogs_search"> <div class="im_dialogs_search">
<input class="form-control im_dialogs_search_field" type="search" placeholder="Search" ng-model="searchQuery"/> <input class="form-control im_dialogs_search_field" type="search" placeholder="Search" ng-model="searchQuery"/>
<a class="im_dialogs_search_clear" ng-click="searchQuery = ''" ng-show="searchQuery.length"> <a class="im_dialogs_search_clear" ng-click="searchQuery = ''" ng-show="searchQuery.length"></a>
<span class=" glyphicon glyphicon-remove"></span>
</a>
</div> </div>
<div my-dialogs-list class="im_dialogs_col"> <div my-dialogs-list class="im_dialogs_col">
<div class="im_dialogs_wrap nano"> <div class="im_dialogs_wrap nano">
@ -117,6 +115,11 @@
<i class="icon icon-paperclip"></i> <i class="icon icon-paperclip"></i>
</div> </div>
<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/*" />
<i class="icon icon-camera"></i>
</div>
<button type="submit" class="btn btn-tg im_submit">Send</button> <button type="submit" class="btn btn-tg im_submit">Send</button>
</form> </form>
</div> </div>

Write Preview
Loading…
Cancel
Save