Added new media attach button, new styles
This commit is contained in:
Igor Zhukov
parent
bb2fba07d9
commit
d4d41ea8be
106
app/css/app.css
106
app/css/app.css
@ -20,9 +20,12 @@ body {
|
||||
}
|
||||
body.non_osx,
|
||||
.non_osx .font-light {
|
||||
font: 12px/18px Verdana, Tahoma, sans-serif, Arial, Helvetica;
|
||||
font: 13px/18px Tahoma, sans-serif, Arial, Helvetica;
|
||||
font-weight: normal;
|
||||
}
|
||||
.non_osx h4 {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #3a6d99;
|
||||
@ -387,8 +390,8 @@ fieldset[disabled] .btn-tg.active {
|
||||
.im_dialogs_search_field {
|
||||
font-size: 12px;
|
||||
line-height: normal;
|
||||
background: #F2F2F2 url(../img/icons/Search_2x.png) 7px 9px no-repeat;
|
||||
background-size: 15px 14px;
|
||||
background: #F2F2F2 url(../img/icons/IconsetW.png) -6px -205px no-repeat;
|
||||
background-size: 42px 280px;
|
||||
border: 1px solid #F2F2F2;
|
||||
border-radius: 3px;
|
||||
padding: 6px 6px 6px 30px;
|
||||
@ -402,10 +405,18 @@ fieldset[disabled] .btn-tg.active {
|
||||
|
||||
.im_dialogs_search_clear {
|
||||
position: absolute;
|
||||
margin-left: 260px;
|
||||
margin-top: -25px;
|
||||
margin-left: 262px;
|
||||
margin-top: -23px;
|
||||
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;
|
||||
font-weight: bold;
|
||||
}
|
||||
.non_osx .im_message_author {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.im_message_from_photo,
|
||||
.im_message_contact_photo {
|
||||
@ -690,6 +704,9 @@ a.im_message_contact_photo {
|
||||
color: #3C6E97;
|
||||
font-weight: bold;
|
||||
}
|
||||
.non_osx .im_message_contact_name {
|
||||
font-size: 12px;
|
||||
}
|
||||
a.im_message_photo_thumb,
|
||||
a.im_message_video_thumb {
|
||||
display: block;
|
||||
@ -763,8 +780,9 @@ div.im_message_video_thumb {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
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;
|
||||
margin-right: 10px;
|
||||
}
|
||||
@ -903,7 +921,7 @@ div.im_message_body {
|
||||
}
|
||||
|
||||
div.im_message_fwd_header {
|
||||
font-weight: bold;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.im_message_text {
|
||||
@ -976,30 +994,31 @@ textarea.im_message_field {
|
||||
padding: 0 2px;
|
||||
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
height: 24px;
|
||||
margin-top: 4px;
|
||||
margin-left: 17px;
|
||||
}
|
||||
|
||||
.icon-paperclip {
|
||||
display: inline-block;
|
||||
width: 19px;
|
||||
height: 22px;
|
||||
height: 23px;
|
||||
vertical-align: text-top;
|
||||
background: url(../img/icons/Attach_2x.png) 0 0 no-repeat;
|
||||
background-size: 19px 22px;
|
||||
opacity: 0.6;
|
||||
background: url(../img/icons/IconsetW.png) -12px -68px no-repeat;
|
||||
background-size: 42px 280px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.im_attach:hover .icon-paperclip {
|
||||
opacity: 1;
|
||||
}
|
||||
.im_attach:active .icon-paperclip {
|
||||
background-image: url(../img/icons/Attach_pressed_2x.png);
|
||||
background-position: -12px -100px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.im_emoji_btn {
|
||||
cursor: pointer;
|
||||
padding: 0 2px;
|
||||
padding: 0;
|
||||
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
@ -1008,23 +1027,24 @@ textarea.im_message_field {
|
||||
}
|
||||
.icon-emoji {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
vertical-align: text-top;
|
||||
background: url(../img/icons/Smile_2x.png) 0 0 no-repeat;
|
||||
background-size: 22px 22px;
|
||||
opacity: 0.6;
|
||||
background: url(../img/icons/IconsetW.png) -10px -4px no-repeat;
|
||||
background-size: 42px 280px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.im_emoji_btn:hover .icon-emoji {
|
||||
opacity: 1;
|
||||
}
|
||||
.im_emoji_btn:active .icon-emoji,
|
||||
.im_emoji_btn.on .icon-emoji {
|
||||
background-image: url(../img/icons/Smile_pressed_2x.png);
|
||||
background-position: -10px -36px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.im_attach_input {
|
||||
.im_attach_input,
|
||||
.im_media_attach_input {
|
||||
cursor: pointer;
|
||||
font-size: 72px !important;
|
||||
/*visibility: hidden;*/
|
||||
@ -1037,6 +1057,36 @@ textarea.im_message_field {
|
||||
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_own_photo {
|
||||
width: 50px;
|
||||
@ -1096,6 +1146,9 @@ img.img_fullsize {
|
||||
.media_modal_author {
|
||||
font-weight: bold;
|
||||
}
|
||||
.non_osx .media_modal_author {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.user_modal_window .modal-dialog {
|
||||
padding-top: 150px;
|
||||
@ -1167,6 +1220,9 @@ img.img_fullsize {
|
||||
font-weight: bold;
|
||||
margin: 1px 0 2px;
|
||||
}
|
||||
.non_osx .chat_modal_participant_name {
|
||||
font-size: 12px;
|
||||
}
|
||||
.chat_modal_participant_status {
|
||||
color: #999;
|
||||
}
|
||||
@ -1263,8 +1319,8 @@ img.img_fullsize {
|
||||
}
|
||||
|
||||
.emoji-menu-tail {
|
||||
background: url(../img/icons/Arrow_2x.png) 0 0 no-repeat;
|
||||
background-size: 14px 7px;
|
||||
background: url(../img/icons/IconsetW.png) -14px -268px no-repeat;
|
||||
background-size: 42px 280px;
|
||||
width: 14px;
|
||||
height: 7px;
|
||||
margin: 0 83px;
|
||||
|
||||
BIN
app/img/icons/IconsetW.png
Normal file
BIN
app/img/icons/IconsetW.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
@ -7,7 +7,7 @@
|
||||
<link rel="stylesheet" href="vendor/angular/angular-csp.css"/>
|
||||
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.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" />
|
||||
|
||||
<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/util.js"></script>
|
||||
<script type="text/javascript" src="js/app.js?9"></script>
|
||||
<script type="text/javascript" src="js/services.js?12"></script>
|
||||
<script type="text/javascript" src="js/controllers.js?18"></script>
|
||||
<script type="text/javascript" src="js/app.js?10"></script>
|
||||
<script type="text/javascript" src="js/services.js?13"></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/directives.js?10"></script>
|
||||
<script type="text/javascript" src="js/directives.js?11"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -55,7 +55,7 @@ config(['$locationProvider', '$routeProvider', '$compileProvider', function($loc
|
||||
// $locationProvider.html5Mode(true);
|
||||
$routeProvider.when('/', {templateUrl: 'partials/welcome.html?2', controller: 'AppWelcomeController'});
|
||||
$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: '/'});
|
||||
|
||||
}]);
|
||||
|
||||
@ -530,7 +530,9 @@ angular.module('myApp.controllers', [])
|
||||
}
|
||||
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
||||
@ -250,7 +250,7 @@ angular.module('myApp.directives', ['myApp.filters'])
|
||||
|
||||
function link (scope, element, attrs) {
|
||||
var messageField = $('textarea', element)[0],
|
||||
fileSelect = $('input', element)[0],
|
||||
fileSelects = $('input', element),
|
||||
dropbox = $('.im_send_dropbox_wrap', element)[0],
|
||||
emojiButton = $('.im_emoji_btn', element)[0],
|
||||
editorElement = messageField,
|
||||
@ -268,12 +268,14 @@ angular.module('myApp.directives', ['myApp.filters'])
|
||||
// $(emojiMenu.firstChild).addClass('nano').nanoScroller({preventPageScrolling: true, tabIndex: -1});
|
||||
|
||||
|
||||
$(fileSelect).on('change', function () {
|
||||
fileSelects.on('change', function () {
|
||||
var self = this;
|
||||
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 () {
|
||||
try {
|
||||
fileSelect.value = '';
|
||||
self.value = '';
|
||||
} catch (e) {};
|
||||
}, 1000);
|
||||
});
|
||||
@ -358,6 +360,7 @@ angular.module('myApp.directives', ['myApp.filters'])
|
||||
if (e.type == 'drop') {
|
||||
scope.$apply(function () {
|
||||
scope.draftMessage.files = Array.prototype.slice.call(e.originalEvent.dataTransfer.files);
|
||||
scope.draftMessage.isMedia = false;
|
||||
});
|
||||
}
|
||||
dragTimeout = setTimeout(function () {
|
||||
|
||||
@ -717,12 +717,23 @@ angular.module('myApp.services', [])
|
||||
};
|
||||
|
||||
function sendFile(peerID, file, options) {
|
||||
options = options || {};
|
||||
var messageID = tempID--,
|
||||
randomID = [nextRandomInt(0xFFFFFFFF), nextRandomInt(0xFFFFFFFF)],
|
||||
randomIDS = bigint(randomID[0]).shiftLeft(32).add(bigint(randomID[1])).toString(),
|
||||
historyStorage = historiesStorage[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) {
|
||||
historyStorage = historiesStorage[peerID] = {count: null, history: [], pending: []};
|
||||
@ -731,7 +742,7 @@ angular.module('myApp.services', [])
|
||||
MtpApiManager.getUserID().then(function (fromID) {
|
||||
var media = {
|
||||
_: 'messageMediaPending',
|
||||
type: isPhoto ? 'photo' : 'doc',
|
||||
type: attachType,
|
||||
file_name: file.name,
|
||||
size: file.size,
|
||||
progress: {percent: 1, total: file.size}
|
||||
@ -754,10 +765,18 @@ angular.module('myApp.services', [])
|
||||
message.send = function () {
|
||||
MtpApiFileManager.uploadFile(file).then(function (inputFile) {
|
||||
var inputMedia;
|
||||
if (isPhoto) {
|
||||
inputMedia = {_: 'inputMediaUploadedPhoto', file: inputFile};
|
||||
} else {
|
||||
inputMedia = {_: 'inputMediaUploadedDocument', file: inputFile, file_name: file.name, mime_type: file.type};
|
||||
switch (attachType) {
|
||||
case 'photo':
|
||||
inputMedia = {_: 'inputMediaUploadedPhoto', file: inputFile};
|
||||
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', {
|
||||
peer: inputPeer,
|
||||
|
||||
@ -7,9 +7,7 @@
|
||||
<div class="im_dialogs_col_wrap" ng-controller="AppImDialogsController">
|
||||
<div class="im_dialogs_search">
|
||||
<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">
|
||||
<span class=" glyphicon glyphicon-remove"></span>
|
||||
</a>
|
||||
<a class="im_dialogs_search_clear" ng-click="searchQuery = ''" ng-show="searchQuery.length"></a>
|
||||
</div>
|
||||
<div my-dialogs-list class="im_dialogs_col">
|
||||
<div class="im_dialogs_wrap nano">
|
||||
@ -117,6 +115,11 @@
|
||||
<i class="icon icon-paperclip"></i>
|
||||
</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>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user