amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-04-18 11:38:53 +00:00
Code Issues Projects Releases Wiki Activity

Review animations of view detail (messages, cards)

Browse Source
This commit is contained in:
Francis Lachapelle
2015-08-26 17:28:03 -04:00
parent 876d9cfa21
commit 69000a0929
7 changed files with 59 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
UI/Templates/ContactsUI/UIxContactFoldersView.wox
View File

@@ -375,9 +375,9 @@
</md-content>
</div>
<div id="detailView" class="view-detail ng-cloak" layout="column">
<md-card class="viewer" ui-view="card"><!-- card view --></md-card>
</div>
<div id="detailView" class="view-detail" layout="column"
ng-class="{ 'sg-close': !addressbook.selectedFolder.selectedCard }"
ui-view="card"><!-- card view --></div>
</div>
</script>

5
UI/Templates/ContactsUI/UIxContactViewTemplate.wox
View File

@@ -5,6 +5,7 @@
xmlns:const="http://www.skyrix.com/od/constant"
xmlns:label="OGo:label"
>
<md-card class="viewer flex-sm">
<md-card-content>
<header class="msg-header">
<div ng-show="editor.card.tag == 'vcard'">
@@ -29,7 +30,7 @@
<div class="sg-icon-bar--vertical">
<md-button class="sg-icon-button show-sm"
label:aria-label="Close"
ng-click="toggleDetailView()">
ng-click="editor.close()">
<md-icon>close</md-icon>
</md-button>
<md-button class="sg-icon-button"
@@ -170,5 +171,5 @@
</div>
</section>
</md-card-content>
</md-card>
</container>

5
UI/Templates/MailerUI/UIxMailFolderTemplate.wox
View File

@@ -58,7 +58,8 @@
</md-content>
</div>
<div id="detailView" class="view-detail ng-cloak" layout="column" ui-view="message"
ng-show="mailbox.selectedFolder.selectedMessage"><!-- message view --></div>
<div id="detailView" class="view-detail" layout="column"
ng-class="{ 'sg-close': !mailbox.selectedFolder.selectedMessage }"
ui-view="message"><!-- message view --></div>
</container>

2
UI/Templates/MailerUI/UIxMailViewTemplate.wox
View File

@@ -85,7 +85,7 @@
<div class="sg-icon-bar--vertical">
<md-button class="sg-icon-button show-sm"
label:aria-label="Close"
ng-click="toggleDetailView()">
ng-click="viewer.close()">
<md-icon>close</md-icon>
</md-button>
<!-- todo: Replace md-tooltip values by localizable string variable -->

6
UI/WebServerResources/js/Contacts/CardController.js
View File

@@ -29,6 +29,7 @@
vm.addMember = addMember;
vm.userFilter = userFilter;
vm.save = save;
vm.close = close;
vm.reset = reset;
vm.cancel = cancel;
vm.confirmDelete = confirmDelete;
@@ -86,6 +87,11 @@
});
}
}
function close() {
vm.card = null;
delete AddressBook.selectedFolder.selectedCard;
$state.go('app.addressbook', { addressbookId: AddressBook.selectedFolder.id });
}
function reset() {
vm.card.$reset();
}

8
UI/WebServerResources/js/Mailer/MessageController.js
View File

@@ -17,6 +17,7 @@
vm.service = Message;
vm.tags = { searchText: '', selected: '' };
vm.doDelete = doDelete;
vm.close = close;
vm.reply = reply;
vm.replyAll = replyAll;
vm.forward = forward;
@@ -69,6 +70,13 @@
});
}
function close() {
$state.go('mail.account.mailbox', { accountId: stateAccount.id, mailboxId: encodeUriFilter(stateMailbox.path) }).then(function() {
vm.message = null;
delete stateMailbox.selectedMessage;
});
}
function reply($event) {
var message = vm.message.$reply();
showMailEditor($event, message);

101
UI/WebServerResources/scss/views/_view.scss
View File

@@ -64,91 +64,60 @@ $detailView-width: grid-step(8) !global;
margin: 0;
}
// No animation on medium to large screens
@include from(md) {
.viewer {
position: absolute;
left: 0;
right: 0;
max-width: 100%;
transform: translate3d(0, 0, 0);
transition: all 0.5s $swift-ease-in-out-timing-function;
&.ng-enter {
transform: translate(-105%, 0);
&.ng-enter-active {
transform: translate(0%, 0%);
transition-delay: 0.5s;
}
}
&.ng-leave {
transition-delay: 0;
transition-duration: 0.1s;
transform: translate(0, 0);
&.ng-leave-active {
transition-delay: 0.1s;
transition-duration: 0.4s;
transform: translate(-105%, 100%);
}
}
// transform: translate3d(0, 0, 0);
// transition: all 0.5s $swift-ease-in-out-timing-function;
// &.ng-enter {
// transform: translate(-105%, 0);
// &.ng-enter-active {
// transform: translate(0, 0);
// transition-delay: 0.5s;
// }
// }
// &.ng-leave {
// transition-delay: 0;
// transition-duration: 0.1s;
// transform: translate(0, 0);
// &.ng-leave-active {
// transition-delay: 0.1s;
// transition-duration: 0.4s;
// transform: translate(-105%, 100%);
// }
// }
}
}
// On small screens, the view slides from the right and takes all screen place
@include to(sm) {
position: absolute;
width: 100%;
min-width: 100%;
// caution: limited support in Android (<=4.4), full-support in v. 37
height: calc(100vh - #{$toolbar-tall-height});
transform: translateX(-100%) scale(1);
transform-origin: 50% 50%;
top: $toolbar-tall-height;
bottom: 0;
left: 0;
right: 0;
transition: all 0.5s $swift-ease-in-out-timing-function;
// .view-detail.sg-close hides the background
&.sg-close {
transition-delay: 0.1s;
transition-duration: 0.4s;
transform: translateX(-100%) scale(0);
// .viewer is the card itself
.viewer {
&.ng-leave,
&.ng-enter,
&.ng-leave.ng-leave-active {
transform: translateY(0) scale(0);
}
// ui-sref might add ng-animate class early
&.ng-enter.ng-enter-active {
transform: translateY(0) scale(0);
}
transform: translateX(100%);
}
&.ng-leave {
&.ng-leave-active {
transform: translateX(100%);
}
}
// .viewer is the card itself
.viewer {
&.ng-leave,
&.ng-leave.ng-leave-active {
transform: translateY(100%) scale(0);
}
&.ng-enter {
transition: all 0.5s $swift-ease-in-out-timing-function;
transform: translateY(100%) scale(0);
}
&.ng-enter.ng-enter-active {
transform: translateY(0) scale(1);
}
}
&.ng-leave,
&.ng-leave.ng-leave-active {
transform: translateX(-100%) scale(0);
}
&.ng-enter {
transition: all 0.5s $swift-ease-in-out-timing-function;
transform: translateX(-100%) scale(0);
}
&.ng-enter.ng-enter-active {
transform: translateX(-100%) scale(1);
transform: translateX(100%);
&.ng-enter-active {
transform: translateX(0);
}
}
}
}