diff --git a/app/css/app.css b/app/css/app.css
index 3311d532..433deb14 100644
--- a/app/css/app.css
+++ b/app/css/app.css
@@ -290,8 +290,9 @@ input[type="number"] {
}
.modal-backdrop {
- background: #111111;
- opacity: 0.25 !important;
+ background: rgba(26, 26, 26, 0.7);
+ opacity: 1 !important;
+ /*opacity: 0.25 !important;*/
}
.modal.fade .modal-dialog {
@@ -318,69 +319,10 @@ input[type="number"] {
}
.modal-content {
border: 0;
- border-radius: 4px;
+ border-radius: 0;
-webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
}
-.modal_close_wrap {
- cursor: pointer;
- position: fixed;
- top: 0;
- right: 0;
- width: 50%;
- height: 100%;
-}
-.modal_close {
- background: url(../img/icons/PhotoControls.png) 0 -53px no-repeat;
- background-size: 33px 86px;
- width: 33px;
- height: 33px;
- float: right;
- margin: 60px 30px 0 0;
- opacity: 0.6;
- pointer-events: none;
-
- -webkit-transition : .2s;
- -moz-transition : .2s;
- -o-transition : .2s;
- transition : .2s;
-}
-.modal_close_wrap:hover .modal_close {
- opacity: 0.85;
-}
-
-
-.modal_prev_wrap {
- cursor: pointer;
- position: fixed;
- top: 0;
- left: 0;
- width: 50%;
- height: 100%;
-}
-.modal_prev {
- background: url(../img/icons/PhotoControls.png) 0 0 no-repeat;
- background-size: 33px 86px;
- width: 33px;
- height: 33px;
- float: left;
- margin: 60px 0 0 30px;
- opacity: 0.6;
- pointer-events: none;
-
- -webkit-transition : .2s;
- -moz-transition : .2s;
- -o-transition : .2s;
- transition : .2s;
-}
-.modal_prev_wrap:hover .modal_prev {
- opacity: 0.85;
-}
-
-.is_1x .modal_close,
-.is_1x .modal_prev {
- background-image: url(../img/icons/PhotoControls_1x.png);
-}
.text-invisible {
visibility: hidden;
@@ -1894,9 +1836,6 @@ textarea.im_message_field {
}
-.media_modal_wrap .modal-body {
- padding: 19px 18px 17px;
-}
a.img_fullsize,
.img_fullsize_wrap {
display: block;
@@ -2158,7 +2097,11 @@ img.img_fullsize {
}
-
+.photo_modal_window,
+.video_modal_window,
+.document_modal_window {
+ display: block;
+}
.photo_modal_error {
color: #999;
position: absolute;
diff --git a/app/css/desktop.css b/app/css/desktop.css
index 3891c7f3..32db34b1 100644
--- a/app/css/desktop.css
+++ b/app/css/desktop.css
@@ -976,4 +976,193 @@ div.im_panel_own_photo {
.changelog_modal_window .modal-dialog {
max-width: 506px;
-}
\ No newline at end of file
+}
+
+
+.modal_close_wrap {
+ display: none;
+ cursor: pointer;
+ position: fixed;
+ top: 0;
+ right: 0;
+ width: 50%;
+ height: 100%;
+}
+.modal_close_wrap_wnext {
+ width: 104px;
+ height: 150px;
+}
+.modal_close {
+ background: url(../img/icons/PhotoIcons.png) -10px -10px no-repeat;
+ background-size: 40px 200px;
+ width: 20px;
+ height: 21px;
+ float: right;
+ margin: 43px 40px 0 0;
+ opacity: 0.5;
+ pointer-events: none;
+
+ -webkit-transition : .2s;
+ -moz-transition : .2s;
+ -o-transition : .2s;
+ transition : .2s;
+}
+.modal_close_wrap:hover .modal_close {
+ opacity: 1;
+}
+
+.modal_prev_wrap,
+.modal_next_wrap {
+ display: none;
+ cursor: pointer;
+ position: fixed;
+ top: 0;
+ left: 0;
+ bottom: 64px;
+ width: 104px;
+}
+.modal_next_wrap {
+ left: auto;
+ right: 0;
+}
+.modal_prev,
+.modal_next {
+ background: url(../img/icons/PhotoIcons.png) -12px -41px no-repeat;
+ background-size: 40px 200px;
+ width: 16px;
+ height: 24px;
+ opacity: 0.5;
+ position: absolute;
+ top: 50%;
+ pointer-events: none;
+ margin: 0 0 0 38px;
+
+ -webkit-transition : .2s;
+ -moz-transition : .2s;
+ -o-transition : .2s;
+ transition : .2s;
+}
+.modal_next {
+ margin: 0 0 0 50px;
+ background-position: -14px -75px;
+}
+.modal_prev_wrap:hover,
+.modal_next_wrap:hover {
+ background-color: rgba(0,0,0,0.2);
+}
+.modal_prev_wrap:hover .modal_prev,
+.modal_next_wrap:hover .modal_next {
+ opacity: 1;
+}
+
+.is_1x .modal_close,
+.is_1x .modal_prev,
+.is_1x .modal_next {
+ background-image: url(../img/icons/PhotoIcons_1x.png);
+}
+
+@media (min-width: 800px) {
+ .modal_close_wrap,
+ .modal_next_wrap,
+ .modal_prev_wrap {
+ display: block;
+ }
+}
+
+.media_modal_bottom_panel_wrap {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 64px;
+ background: #313131;
+}
+.media_modal_bottom_panel {
+ max-width: 1000px;
+ margin: 0 auto;
+ color: rgba(255, 255, 255, 0.6);
+}
+
+.media_modal_title_wrap {
+ max-width: 300px;
+ margin: 0 auto;
+ text-align: center;
+ font-size: 14px;
+ line-height: 16px;
+ padding: 24px 0;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+.media_modal_info_wrap {
+ line-height: 16px;
+ padding: 24px 20px;
+}
+.media_modal_author {
+ font-size: 14px;
+ margin-right: 4px;
+}
+.media_modal_date,
+a.media_modal_date:hover {
+ font-size: 12px;
+ color: rgba(255, 255, 255, 0.4);
+}
+
+.photo_modal_window,
+.video_modal_window,
+.document_modal_window {
+ padding: 0;
+}
+.media_modal_wrap .modal-body {
+ padding: 16px;
+}
+.video_modal_window .modal-body {
+ padding: 0;
+}
+.media_modal_bottom_actions {
+ width: 204px;
+}
+.media_modal_action_btn {
+ float: left;
+ display: block;
+ width: 68px;
+ height: 64px;
+}
+.media_modal_action_btn:hover {
+ background: rgba(0,0,0,0.2);
+}
+
+.media_modal_action_btn i {
+ background: url(../img/icons/PhotoIcons.png) 0 0 no-repeat;
+ background-size: 40px 200px;
+ display: block;
+ opacity: 0.5;
+}
+.media_modal_action_btn:hover i {
+ opacity: 1;
+}
+.is_1x .media_modal_action_btn i {
+ background-image: url(../img/icons/PhotoIcons_1x.png);
+}
+
+.media_modal_action_btn i.media_modal_action_btn_download {
+ background-position: -12px -163px;
+ width: 16px;
+ height: 20px;
+ margin: 22px 26px;
+}
+.media_modal_action_btn i.media_modal_action_btn_forward {
+ background-position: -9px -109px;
+ width: 23px;
+ height: 15px;
+ margin: 24px 22px;
+}
+.media_modal_action_btn i.media_modal_action_btn_delete {
+ background-position: -13px -135px;
+ width: 14px;
+ height: 18px;
+ margin: 23px 27px;
+}
+
+
+
diff --git a/app/img/icons/PhotoControls.png b/app/img/icons/PhotoControls.png
deleted file mode 100644
index 8abd1c58..00000000
Binary files a/app/img/icons/PhotoControls.png and /dev/null differ
diff --git a/app/img/icons/PhotoControls_1x.png b/app/img/icons/PhotoControls_1x.png
deleted file mode 100644
index 3fdea5f5..00000000
Binary files a/app/img/icons/PhotoControls_1x.png and /dev/null differ
diff --git a/app/img/icons/PhotoIcons.png b/app/img/icons/PhotoIcons.png
new file mode 100644
index 00000000..70e31b97
Binary files /dev/null and b/app/img/icons/PhotoIcons.png differ
diff --git a/app/img/icons/PhotoIcons_1x.png b/app/img/icons/PhotoIcons_1x.png
new file mode 100644
index 00000000..93f4ba86
Binary files /dev/null and b/app/img/icons/PhotoIcons_1x.png differ
diff --git a/app/js/controllers.js b/app/js/controllers.js
index 9f1e42b2..70b77cc8 100644
--- a/app/js/controllers.js
+++ b/app/js/controllers.js
@@ -1510,12 +1510,6 @@ angular.module('myApp.controllers', ['myApp.i18n'])
AppPhotosManager.downloadPhoto($scope.photoID);
};
- if (!$scope.messageID || Config.Mobile) {
- $scope.nav.next = function () {
- $modalInstance.close();
- }
- }
-
if (!$scope.messageID) {
return;
}
@@ -1531,6 +1525,14 @@ angular.module('myApp.controllers', ['myApp.i18n'])
});
};
+ $scope.goToMessage = function () {
+ var messageID = $scope.messageID;
+ var peerID = AppMessagesManager.getMessagePeer(AppMessagesManager.getMessage(messageID));
+ var peerString = AppPeersManager.getPeerString(peerID);
+ $modalInstance.dismiss();
+ $rootScope.$broadcast('history_focus', {peerString: peerString, messageID: messageID});
+ };
+
if (Config.Mobile) {
$scope.canForward = true;
@@ -1550,21 +1552,24 @@ angular.module('myApp.controllers', ['myApp.i18n'])
inputQuery = '',
inputFilter = {_: 'inputMessagesFilterPhotos'},
list = [$scope.messageID],
+ preloaded = {},
maxID = $scope.messageID,
hasMore = true;
+ preloaded[$scope.messageID] = true;
+
updatePrevNext();
AppMessagesManager.getSearch(inputPeer, inputQuery, inputFilter, 0, 1000).then(function (searchCachedResult) {
- // console.log(dT(), 'search cache', searchCachedResult);
if (searchCachedResult.history.indexOf($scope.messageID) >= 0) {
list = searchCachedResult.history;
maxID = list[list.length - 1];
updatePrevNext();
+ preloadPhotos(+1);
}
- // console.log(dT(), list, maxID);
- });
+ loadMore();
+ }, loadMore);
var jump = 0;
@@ -1575,7 +1580,7 @@ angular.module('myApp.controllers', ['myApp.i18n'])
var promise = index >= list.length ? loadMore() : $q.when();
promise.then(function () {
- if (curJump != jump || !hasMore) {
+ if (curJump != jump) {
return;
}
@@ -1593,10 +1598,33 @@ angular.module('myApp.controllers', ['myApp.i18n'])
$scope.photoID = message.media.photo.id;
$scope.photo = AppPhotosManager.wrapForFull($scope.photoID);
+ preloaded[$scope.messageID] = true;
+
updatePrevNext();
+
+ if (sign > 0 && hasMore && list.indexOf(messageID) + 1 >= list.length) {
+ loadMore();
+ } else {
+ preloadPhotos(sign);
+ }
});
};
+ function preloadPhotos (sign) {
+ // var preloadOffsets = sign < 0 ? [-1,-2,1,-3,2] : [1,2,-1,3,-2];
+ var preloadOffsets = sign < 0 ? [-1,-2] : [1,2];
+ var index = list.indexOf($scope.messageID);
+ angular.forEach(preloadOffsets, function (offset) {
+ var messageID = list[index + offset];
+ if (messageID !== undefined && preloaded[messageID] === undefined) {
+ preloaded[messageID] = true;
+ var message = AppMessagesManager.getMessage(messageID);
+ var photoID = message.media.photo.id;
+ AppPhotosManager.preloadPhoto(photoID);
+ }
+ })
+ }
+
var loadingPromise = false;
function loadMore () {
if (loadingPromise) return loadingPromise;
@@ -1610,13 +1638,27 @@ angular.module('myApp.controllers', ['myApp.i18n'])
hasMore = false;
}
- updatePrevNext();
+ updatePrevNext(searchResult.count);
loadingPromise = false;
+
+ if (searchResult.history.length) {
+ return $q.reject();
+ }
+
+ preloadPhotos(+1);
});
};
- function updatePrevNext () {
+ function updatePrevNext (count) {
var index = list.indexOf($scope.messageID);
+ if (hasMore) {
+ if (count) {
+ $scope.count = Math.max(count, list.length);
+ }
+ } else {
+ $scope.count = list.length;
+ }
+ $scope.pos = $scope.count - index;
$scope.nav.hasNext = index > 0;
$scope.nav.hasPrev = hasMore || index < list.length - 1;
$scope.canForward = $scope.canDelete = $scope.messageID > 0;
@@ -1658,8 +1700,6 @@ angular.module('myApp.controllers', ['myApp.i18n'])
}
});
- loadMore();
-
})
.controller('UserpicModalController', function ($q, $scope, $rootScope, $modalInstance, AppPhotosManager, AppUsersManager, AppPeersManager, AppMessagesManager, PeersSelectService, ErrorService) {
diff --git a/app/js/directives.js b/app/js/directives.js
index cbc9b10a..1dd42f92 100644
--- a/app/js/directives.js
+++ b/app/js/directives.js
@@ -1429,7 +1429,7 @@ angular.module('myApp.directives', ['myApp.filters'])
.add($(imgElement)),
resize = function () {
resizeElements.css({width: $scope.fullPhoto.width, height: $scope.fullPhoto.height});
- $scope.$emit('ui_height');
+ $scope.$emit('ui_height', true);
};
var jump = 0;
@@ -1621,7 +1621,7 @@ angular.module('myApp.directives', ['myApp.filters'])
element = element.parentNode;
}
if (element) {
- $(element).width(width + (Config.Mobile ? 0 : 36));
+ $(element).width(width + (Config.Mobile ? 0 : 32));
}
}
@@ -1630,8 +1630,11 @@ angular.module('myApp.directives', ['myApp.filters'])
var fullSizeWrap = $('.document_fullsize_wrap', element);
var fullSizeImage = $('.document_fullsize_img', element);
- var fullWidth = $(window).width() - (Config.Mobile ? 20 : 36);
+ var fullWidth = $(window).width() - (Config.Mobile ? 20 : 32);
var fullHeight = $(window).height() - 150;
+ if (fullWidth > 800) {
+ fullWidth -= 208;
+ }
$scope.imageWidth = fullWidth;
$scope.imageHeight = fullHeight;
@@ -1823,7 +1826,7 @@ angular.module('myApp.directives', ['myApp.filters'])
function link($scope, element, attrs) {
attrs.$observe('myModalWidth', function (newW) {
- $(element[0].parentNode.parentNode).css({width: parseInt(newW) + (Config.Mobile ? 0 : 36)});
+ $(element[0].parentNode.parentNode).css({width: parseInt(newW) + (Config.Mobile ? 0 : 32)});
});
};
@@ -1931,7 +1934,9 @@ angular.module('myApp.directives', ['myApp.filters'])
return;
}
var height = element[0].parentNode.offsetHeight,
- contHeight = element[0].parentNode.parentNode.parentNode.offsetHeight;
+ modal = element[0].parentNode.parentNode.parentNode,
+ bottomPanel = $('.media_modal_bottom_panel_wrap', modal)[0],
+ contHeight = modal.offsetHeight - (bottomPanel && bottomPanel.offsetHeight || 0);
if (height < contHeight) {
$(element[0].parentNode).css('marginTop', (contHeight - height) / 2);
@@ -1950,8 +1955,12 @@ angular.module('myApp.directives', ['myApp.filters'])
$($window).on('resize', updateMargin);
- $scope.$on('ui_height', function () {
- onContentLoaded(updateMargin);
+ $scope.$on('ui_height', function (e, sync) {
+ if (sync) {
+ updateMargin();
+ } else {
+ onContentLoaded(updateMargin);
+ }
});
};
@@ -2013,20 +2022,33 @@ angular.module('myApp.directives', ['myApp.filters'])
};
function link($scope, element, attrs) {
- var userID = $scope.$eval(attrs.myUserLink),
- user = AppUsersManager.getUser(userID);
- element.html(
- (user[attrs.short && $scope.$eval(attrs.short) ? 'rFirstName' : 'rFullName'] || '').valueOf()
- );
+ var userID;
+ var update = function () {
+ var user = AppUsersManager.getUser(userID);
+
+ element.html(
+ (user[attrs.short && $scope.$eval(attrs.short) ? 'rFirstName' : 'rFullName'] || '').valueOf()
+ );
+ if (attrs.color && $scope.$eval(attrs.color)) {
+ element.addClass('user_color_' + user.num);
+ }
+ };
if (element[0].tagName == 'A') {
element.on('click', function () {
AppUsersManager.openUser(userID, attrs.userOverride && $scope.$eval(attrs.userOverride));
});
}
- if (attrs.color && $scope.$eval(attrs.color)) {
- element.addClass('user_color_' + user.num);
+
+ if (attrs.userWatch) {
+ $scope.$watch(attrs.myUserLink, function (newUserID) {
+ userID = newUserID;
+ update();
+ });
+ } else {
+ userID = $scope.$eval(attrs.myUserLink);
+ update();
}
}
})
diff --git a/app/js/filters.js b/app/js/filters.js
index 0211ca2e..26438a4b 100644
--- a/app/js/filters.js
+++ b/app/js/filters.js
@@ -66,15 +66,10 @@ angular.module('myApp.filters', ['myApp.i18n'])
})
.filter('dateOrTime', function($filter) {
- var cachedDates = {},
- dateFilter = $filter('date');
+ var dateFilter = $filter('date');
return function (timestamp, extended) {
- if (cachedDates[timestamp]) {
- return cachedDates[timestamp];
- }
-
var ticks = timestamp * 1000,
diff = Math.abs(tsNow() - ticks),
format = 'shortTime';
@@ -86,7 +81,7 @@ angular.module('myApp.filters', ['myApp.i18n'])
format = extended ? 'EEEE' : 'EEE';
}
- return cachedDates[timestamp] = dateFilter(ticks, format);
+ return dateFilter(ticks, format);
}
})
diff --git a/app/js/lib/mtproto.js b/app/js/lib/mtproto.js
index 4be592a2..f77f222f 100644
--- a/app/js/lib/mtproto.js
+++ b/app/js/lib/mtproto.js
@@ -17,7 +17,7 @@ angular.module('izhukov.mtproto', ['izhukov.utils'])
{id: 3, host: '174.140.142.5', port: 80}
]
: [
- {id: 1, host: '173.240.5.1', port: 80},
+ {id: 1, host: '149.154.175.50', port: 80},
{id: 2, host: '149.154.167.51', port: 80},
{id: 3, host: '174.140.142.6', port: 80},
{id: 4, host: '149.154.167.91', port: 80},
diff --git a/app/js/lib/utils.js b/app/js/lib/utils.js
index f1ceb9bd..f95cad93 100644
--- a/app/js/lib/utils.js
+++ b/app/js/lib/utils.js
@@ -139,6 +139,11 @@ function calcImageInBox(imageW, imageH, boxW, boxH, noZooom) {
}
}
+ if (Config.Navigator.retina) {
+ imageW = Math.floor(imageW / 2);
+ imageH = Math.floor(imageH / 2);
+ }
+
if (noZooom && boxedImageW >= imageW && boxedImageH >= imageH) {
boxedImageW = imageW;
boxedImageH = imageH;
diff --git a/app/js/locales/en-us.json b/app/js/locales/en-us.json
index cd0f016f..54b94fbf 100644
--- a/app/js/locales/en-us.json
+++ b/app/js/locales/en-us.json
@@ -79,6 +79,7 @@
"user_modal_notifications": "Notifications",
"user_modal_contact_info": "Contact info",
+ "media_modal_photo": "Photo {pos} of {count}",
"media_modal_forward": "Forward",
"media_modal_download": "Download",
"media_modal_delete": "Delete",
diff --git a/app/js/services.js b/app/js/services.js
index 4665b8ba..2285b71a 100644
--- a/app/js/services.js
+++ b/app/js/services.js
@@ -610,6 +610,12 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
}
return text;
},
+ getPeerString: function (peerID) {
+ if (peerID > 0) {
+ return AppUsersManager.getUserString(peerID);
+ }
+ return AppChatsManager.getChatString(-peerID);
+ },
getOutputPeer: function (peerID) {
return peerID > 0
? {_: 'peerUser', user_id: peerID}
@@ -1673,13 +1679,11 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
if (message.chatID = message.to_id.chat_id) {
message.peerID = -message.chatID;
message.peerData = AppChatsManager.getChat(message.chatID);
- message.peerString = AppChatsManager.getChatString(message.chatID);
} else {
message.peerID = message.out ? message.to_id.user_id : message.from_id;
message.peerData = AppUsersManager.getUser(message.peerID);
- message.peerString = AppUsersManager.getUserString(message.peerID);
}
-
+ message.peerString = AppPeersManager.getPeerString(message.peerID);
message.peerPhoto = AppPeersManager.getPeerPhoto(message.peerID, 'User', 'Group');
message.unreadCount = unreadCount;
@@ -2194,6 +2198,10 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
};
function choosePhotoSize (photo, width, height) {
+ if (Config.Navigator.retina) {
+ width *= 2;
+ height *= 2;
+ }
var bestPhotoSize = {_: 'photoSizeEmpty'},
bestDiff = 0xFFFFFF;
@@ -2235,10 +2243,13 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
if (!photos[photoID]) {
return;
}
- var photo = photos[photoID],
- fullWidth = $(window).width() - 36,
- fullHeight = $($window).height() - 150,
- fullPhotoSize = choosePhotoSize(photo, fullWidth, fullHeight);
+ var photo = photos[photoID];
+ var fullWidth = $(window).width() - (Config.Mobile ? 20 : 32);
+ var fullHeight = $($window).height() - (Config.Mobile ? 150 : 116);
+ if (fullWidth > 800) {
+ fullWidth -= 208;
+ }
+ var fullPhotoSize = choosePhotoSize(photo, fullWidth, fullHeight);
if (fullPhotoSize && !fullPhotoSize.preloaded) {
fullPhotoSize.preloaded = true;
@@ -2297,23 +2308,22 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
}
function wrapForFull (photoID) {
- var photo = wrapForHistory(photoID),
- fullWidth = $(window).width() - (Config.Mobile ? 20 : 36),
- fullHeight = $($window).height() - 150,
- fullPhotoSize = choosePhotoSize(photo, fullWidth, fullHeight),
- full = {
+ var photo = wrapForHistory(photoID);
+ var fullWidth = $(window).width() - (Config.Mobile ? 20 : 32);
+ var fullHeight = $($window).height() - (Config.Mobile ? 150 : 116);
+ if (fullWidth > 800) {
+ fullWidth -= 208;
+ }
+ var fullPhotoSize = choosePhotoSize(photo, fullWidth, fullHeight);
+ var full = {
placeholder: 'img/placeholders/PhotoThumbModal.gif'
};
- if (fullWidth > 800) {
- fullWidth -= 200;
- }
-
full.width = fullWidth;
full.height = fullHeight;
if (fullPhotoSize && fullPhotoSize._ != 'photoSizeEmpty') {
- var wh = calcImageInBox(fullPhotoSize.w, fullPhotoSize.h, fullWidth, fullHeight, Config.Mobile);
+ var wh = calcImageInBox(fullPhotoSize.w, fullPhotoSize.h, fullWidth, fullHeight, true);
full.width = wh.w;
full.height = wh.h;
@@ -2344,6 +2354,7 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
var modalInstance = $modal.open({
templateUrl: templateUrl('photo_modal'),
+ windowTemplateUrl: !Config.Mobile && templateUrl('media_modal_layout') || undefined,
controller: scope.userID ? 'UserpicModalController' : 'PhotoModalController',
scope: scope,
windowClass: 'photo_modal_window'
@@ -2492,6 +2503,7 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
return $modal.open({
templateUrl: templateUrl('video_modal'),
+ windowTemplateUrl: !Config.Mobile && templateUrl('media_modal_layout') || undefined,
controller: 'VideoModalController',
scope: scope,
windowClass: 'video_modal_window'
@@ -2722,6 +2734,7 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
var modalInstance = $modal.open({
templateUrl: templateUrl('document_modal'),
+ windowTemplateUrl: !Config.Mobile && templateUrl('media_modal_layout') || undefined,
controller: 'DocumentModalController',
scope: scope,
windowClass: 'document_modal_window'
diff --git a/app/partials/desktop/document_modal.html b/app/partials/desktop/document_modal.html
index 0a0e494f..86b2ec0d 100644
--- a/app/partials/desktop/document_modal.html
+++ b/app/partials/desktop/document_modal.html
@@ -1,21 +1,41 @@
-<div class="media_modal_wrap document_modal_wrap" my-modal-position>
+<div class="modal_close_wrap" ng-click="$close()">
+ <div class="modal_close"></div>
+</div>
- <div class="modal-body">
-
- <div my-load-document="document"></div>
-
- <div class="media_meta_wrap clearfix">
- <div class="media_modal_actions pull-right">
- <a href="" class="media_modal_action_link" ng-click="download()" my-i18n="media_modal_download"></a>
- <a ng-if="messageID" href="" class="media_modal_action_link" ng-click="forward()" my-i18n="media_modal_forward"></a>
- <a ng-if="messageID" href="" class="media_modal_action_link" ng-click="delete()" my-i18n="media_modal_delete"></a>
- </div>
-
- <p class="media_modal_info">
- <a class="media_modal_author" my-user-link="document.user_id"></a>, <span ng-bind="document.date | dateOrTime"></span>
- </p>
+<div class="media_modal_bottom_panel_wrap">
+ <div class="media_modal_bottom_panel">
+ <div class="media_modal_bottom_actions pull-right">
+ <a class="media_modal_action_btn" ng-click="download()" title="{{'media_modal_download' | i18n}}">
+ <i class="media_modal_action_btn_download"></i>
+ </a>
+ <a class="media_modal_action_btn" ng-if="messageID" ng-click="forward()" title="{{'media_modal_forward' | i18n}}">
+ <i class="media_modal_action_btn_forward"></i>
+ </a>
+ <a class="media_modal_action_btn" ng-if="messageID" ng-click="delete()" title="{{'media_modal_delete' | i18n}}">
+ <i class="media_modal_action_btn_delete"></i>
+ </a>
</div>
- </div>
+ <div class="media_modal_info_wrap pull-left">
+ <a class="media_modal_author" my-user-link="document.user_id" user-watch="true"></a>
+ <span class="media_modal_date" ng-bind="document.date | dateOrTime :true"></span>
+ </div>
+ <div class="media_modal_title_wrap" ng-bind="document.file_name"></div>
+
+ </div>
</div>
+
+<div class="modal-dialog">
+ <div class="modal-content">
+ <div my-modal-width="{{photo.full.modalWidth}}" class="media_modal_wrap photo_modal_wrap" my-modal-position animation="no">
+
+ <div class="modal-body">
+
+ <div my-load-document="document"></div>
+
+ </div>
+
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/app/partials/desktop/media_modal_layout.html b/app/partials/desktop/media_modal_layout.html
new file mode 100644
index 00000000..c0d21639
--- /dev/null
+++ b/app/partials/desktop/media_modal_layout.html
@@ -0,0 +1 @@
+<div tabindex="-1" role="dialog" class="modal" ng-style="{'z-index': 1050 + index*10}" ng-click="close($event)" modal-transclude></div>
\ No newline at end of file
diff --git a/app/partials/desktop/photo_modal.html b/app/partials/desktop/photo_modal.html
index d51a35f3..60632c0b 100644
--- a/app/partials/desktop/photo_modal.html
+++ b/app/partials/desktop/photo_modal.html
@@ -1,22 +1,51 @@
-<div my-modal-width="{{photo.full.modalWidth}}" class="media_modal_wrap photo_modal_wrap" my-modal-position animation="no" my-modal-nav next="nav.next()" prev="nav.prev()">
+<div class="modal_prev_wrap" ng-show="nav.hasPrev" ng-click="nav.prev($event)">
+ <div class="modal_prev"></div>
+</div>
+<div class="modal_next_wrap" ng-show="nav.hasNext" ng-click="nav.next($event)">
+ <div class="modal_next"></div>
+</div>
+<div class="modal_close_wrap" ng-class="{modal_close_wrap_wnext: nav.hasNext}" ng-click="$close()">
+ <div class="modal_close"></div>
+</div>
- <div class="modal-body">
-
- <div class="photo_modal_image_wrap" my-load-full-photo full-photo="photo.full" thumb-location="photo.thumb.location" ng-click="nav.next()"> </div>
-
- <div class="media_meta_wrap clearfix">
- <div class="media_modal_actions pull-right">
- <a href="" class="media_modal_action_link" ng-click="download()" my-i18n="media_modal_download"></a>
- <a href="" class="media_modal_action_link" ng-if="canForward" ng-click="forward()" my-i18n="media_modal_forward"></a>
- <a href="" class="media_modal_action_link" ng-if="canDelete" ng-click="delete()" my-i18n="media_modal_delete"></a>
- </div>
-
- <p class="media_modal_info">
- <a class="media_modal_author" my-user-link="photo.user_id"></a>, <span ng-bind="photo.date | dateOrTime"></span>
- </p>
+<div class="media_modal_bottom_panel_wrap">
+ <div class="media_modal_bottom_panel">
+ <div class="media_modal_bottom_actions pull-right">
+ <a class="media_modal_action_btn" ng-click="download()" title="{{'media_modal_download' | i18n}}">
+ <i class="media_modal_action_btn_download"></i>
+ </a>
+ <a class="media_modal_action_btn" ng-if="canForward" ng-click="forward()" title="{{'media_modal_forward' | i18n}}">
+ <i class="media_modal_action_btn_forward"></i>
+ </a>
+ <a class="media_modal_action_btn" ng-if="canDelete" ng-click="delete()" title="{{'media_modal_delete' | i18n}}">
+ <i class="media_modal_action_btn_delete"></i>
+ </a>
</div>
+ <div class="media_modal_info_wrap pull-left" ng-switch="messageID > 0">
+ <a class="media_modal_author" my-user-link="photo.user_id" user-watch="true"></a>
+ <a ng-switch-when="true" ng-click="goToMessage()" class="media_modal_date" ng-bind="photo.date | dateOrTime :true"></a>
+ <span ng-switch-default class="media_modal_date" ng-bind="photo.date | dateOrTime :true"></span>
+ </div>
+ <div class="media_modal_title_wrap" ng-if="count > 1 && pos > 0" my-i18n="media_modal_photo">
+ <my-i18n-param name="pos" ng-bind="pos"></my-i18n-param>
+ <my-i18n-param name="count" ng-bind="count"></my-i18n-param>
+ </div>
</div>
-
</div>
+
+<div class="modal-dialog" my-modal-nav next="nav.next()" prev="nav.prev()">
+ <div class="modal-content">
+ <div my-modal-width="{{photo.full.modalWidth}}" class="media_modal_wrap photo_modal_wrap" my-modal-position animation="no">
+
+ <div class="modal-body">
+
+ <div class="photo_modal_image_wrap" my-load-full-photo full-photo="photo.full" thumb-location="photo.thumb.location" ng-click="$close()"></div>
+
+ </div>
+
+ </div>
+ </div>
+</div>
+
diff --git a/app/partials/desktop/video_modal.html b/app/partials/desktop/video_modal.html
index 01e75d60..6c2ccf5b 100644
--- a/app/partials/desktop/video_modal.html
+++ b/app/partials/desktop/video_modal.html
@@ -1,21 +1,42 @@
-<div class="media_modal_wrap video_modal_wrap" my-modal-position>
+<div class="modal_close_wrap" ng-class="{modal_close_wrap_wnext: nav.hasNext}" ng-click="$close()">
+ <div class="modal_close"></div>
+</div>
- <div class="modal-body">
-
- <div class="video_modal_image_wrap" my-load-video video="video"></div>
-
- <div class="media_meta_wrap clearfix">
- <div class="media_modal_actions pull-right">
- <a href="" class="media_modal_action_link" ng-click="download()" my-i18n="media_modal_download"></a>
- <a ng-if="messageID" href="" class="media_modal_action_link" ng-click="forward()" my-i18n="media_modal_forward"></a>
- <a ng-if="messageID" href="" class="media_modal_action_link" ng-click="delete()" my-i18n="media_modal_delete"></a>
- </div>
-
- <p class="media_modal_info">
- <a class="media_modal_author" my-user-link="video.user_id"></a>, <span ng-bind="video.date | dateOrTime"></span>
- </p>
+<div class="media_modal_bottom_panel_wrap">
+ <div class="media_modal_bottom_panel">
+ <div class="media_modal_bottom_actions pull-right">
+ <a class="media_modal_action_btn" ng-click="download()" title="{{'media_modal_download' | i18n}}">
+ <i class="media_modal_action_btn_download"></i>
+ </a>
+ <a class="media_modal_action_btn" ng-if="messageID" ng-click="forward()" title="{{'media_modal_forward' | i18n}}">
+ <i class="media_modal_action_btn_forward"></i>
+ </a>
+ <a class="media_modal_action_btn" ng-if="messageID" ng-click="delete()" title="{{'media_modal_delete' | i18n}}">
+ <i class="media_modal_action_btn_delete"></i>
+ </a>
</div>
- </div>
+ <div class="media_modal_info_wrap pull-left">
+ <a class="media_modal_author" my-user-link="video.user_id" user-watch="true"></a>
+ <span class="media_modal_date" ng-bind="video.date | dateOrTime :true"></span>
+ </div>
+ <div class="media_modal_title_wrap" ng-if="count > 1 && pos > 0" my-i18n="media_modal_photo">
+ <my-i18n-param name="pos" ng-bind="pos"></my-i18n-param>
+ <my-i18n-param name="count" ng-bind="count"></my-i18n-param>
+ </div>
+ </div>
</div>
+
+<div class="modal-dialog">
+ <div class="modal-content">
+ <div my-modal-width="{{video.full.width - 32}}" class="media_modal_wrap video_modal_wrap" my-modal-position animation="no">
+
+ <div class="modal-body">
+ <div class="video_modal_image_wrap" my-load-video video="video"></div>
+
+ </div>
+
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/app/vendor/ui-bootstrap/ui-bootstrap-custom-tpls-0.12.0.js b/app/vendor/ui-bootstrap/ui-bootstrap-custom-tpls-0.12.0.js
index 5782fa30..ff683309 100644
--- a/app/vendor/ui-bootstrap/ui-bootstrap-custom-tpls-0.12.0.js
+++ b/app/vendor/ui-bootstrap/ui-bootstrap-custom-tpls-0.12.0.js
@@ -776,8 +776,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.transition'])
restrict: 'EA',
scope: {
index: '@',
- animate: '=',
- nav: '='
+ animate: '='
},
replace: true,
transclude: true,
@@ -956,8 +955,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.transition'])
'window-class': modal.windowClass,
'size': modal.size,
'index': openedWindows.length() - 1,
- 'animate': 'animate',
- 'nav': 'nav'
+ 'animate': 'animate'
}).html(modal.content);
var modalDomEl = $compile(angularDomEl)(modal.scope);
@@ -1225,10 +1223,7 @@ angular.module("template/modal/backdrop.html", []).run(["$templateCache", functi
angular.module("template/modal/window.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("template/modal/window.html",
"<div tabindex=\"-1\" role=\"dialog\" class=\"modal fade\" ng-class=\"{in: animate}\" ng-style=\"{'z-index': 1050 + index*10, display: 'block'}\" ng-click=\"close($event)\">\n" +
- " <div class=\"modal_prev_wrap hidden-xs hidden-sm\" ng-show=\"nav.hasPrev\" ng-click=\"nav.prev($event)\">\n" +
- " <div class=\"modal_prev\"></div>\n" +
- " </div>\n" +
- " <div class=\"modal_close_wrap hidden-xs hidden-sm\" ng-click=\"close($event)\">\n" +
+ " <div class=\"modal_close_wrap\" ng-click=\"close($event)\">\n" +
" <div class=\"modal_close\"></div>\n" +
" </div>\n" +
" <div class=\"modal-dialog\" ng-class=\"{'modal-sm': size == 'sm', 'modal-lg': size == 'lg'}\"><div class=\"modal-content\" modal-transclude></div></div>\n" +