Improve view detail (messages, cards)
Francis Lachapelle
parent
bba0d6f44d
commit
3611c4021d
|
|
@ -46,6 +46,9 @@
|
|||
/* Number of selected contacts in list */
|
||||
"selected" = "selected";
|
||||
|
||||
/* Empty right pane */
|
||||
"No contact selected" = "No contact selected";
|
||||
|
||||
/* Tooltips */
|
||||
|
||||
"Create a new address book card" = "Create a new address book card";
|
||||
|
|
|
|||
|
|
@ -65,6 +65,9 @@
|
|||
"Account: " = "Account: ";
|
||||
"Shared Account: " = "Shared Account: ";
|
||||
|
||||
/* Empty right pane */
|
||||
"No message selected" = "No message selected";
|
||||
|
||||
/* acls */
|
||||
"Access rights to" = "Access rights to";
|
||||
"For user" = "For user";
|
||||
|
|
|
|||
|
|
@ -375,9 +375,13 @@
|
|||
</md-content>
|
||||
</div>
|
||||
|
||||
<div id="detailView" class="view-detail" layout="column"
|
||||
<md-content id="detailView" class="view-detail md-hue-1" layout="column" layout-align="center center"
|
||||
ng-class="{ 'sg-close': !addressbook.selectedFolder.selectedCard }"
|
||||
ui-view="card"><!-- card view --></div>
|
||||
ui-view="card">
|
||||
<md-input-container class="hide-sm md-hue-1" style="flex-grow: 0">
|
||||
<label class="sg-md-title"><var:string label:value="No contact selected"/></label>
|
||||
</md-input-container>
|
||||
</md-content>
|
||||
|
||||
</div>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -58,8 +58,12 @@
|
|||
</md-content>
|
||||
</div>
|
||||
|
||||
<div id="detailView" class="view-detail" layout="column"
|
||||
<md-content id="detailView" class="view-detail md-hue-1" layout="column" layout-align="center center"
|
||||
ng-class="{ 'sg-close': !mailbox.selectedFolder.selectedMessage }"
|
||||
ui-view="message"><!-- message view --></div>
|
||||
ui-view="message">
|
||||
<md-input-container class="hide-sm md-hue-1" style="flex-grow: 0">
|
||||
<label class="sg-md-title"><var:string label:value="No message selected"/></label>
|
||||
</md-input-container>
|
||||
</md-content>
|
||||
|
||||
</container>
|
||||
|
|
|
|||
|
|
@ -88,9 +88,10 @@
|
|||
}
|
||||
}
|
||||
function close() {
|
||||
vm.card = null;
|
||||
delete AddressBook.selectedFolder.selectedCard;
|
||||
$state.go('app.addressbook', { addressbookId: AddressBook.selectedFolder.id });
|
||||
$state.go('app.addressbook', { addressbookId: AddressBook.selectedFolder.id }).then(function() {
|
||||
vm.card = null;
|
||||
delete AddressBook.selectedFolder.selectedCard;
|
||||
});
|
||||
}
|
||||
function reset() {
|
||||
vm.card.$reset();
|
||||
|
|
|
|||
|
|
@ -27,6 +27,11 @@
|
|||
flex: 1 1 auto;
|
||||
align-items: stretch;
|
||||
justify-content: flex-start;
|
||||
overflow: hidden;
|
||||
[class|="sg-md-display"] {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.msg-body {
|
||||
|
|
|
|||
|
|
@ -53,7 +53,6 @@ $detailView-width: grid-step(8) !global;
|
|||
.view-detail {
|
||||
z-index: $z-index-view;
|
||||
overflow-x: hidden;
|
||||
background-color: transparent;
|
||||
@include at(md) {
|
||||
@include flex-col(md, 9);
|
||||
margin: 0;
|
||||
|
|
@ -69,6 +68,7 @@ $detailView-width: grid-step(8) !global;
|
|||
@include from(md) {
|
||||
.viewer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-width: 100%;
|
||||
|
|
@ -94,30 +94,45 @@ $detailView-width: grid-step(8) !global;
|
|||
}
|
||||
}
|
||||
|
||||
// On small screens, the view slides from the right and takes all screen place
|
||||
// On small screens, the view slides from the right and takes all screen place.
|
||||
// Expected Display Steps:
|
||||
// 1. The class sg-close is used when there's no selection
|
||||
// 2. An list item is selected (ui-router state changes):
|
||||
// a. sg-close is removed from view-detail
|
||||
// b. view-detail (transparent) slides over view-list
|
||||
// c. viewer is inserted into the DOM and slides inside view-detail
|
||||
// 3. An list item is closed (ui-router state changes):
|
||||
// a. viewer slides out of view-detail and is removed from the DOM
|
||||
// b. view-detail (transparent) slides outside view-list
|
||||
// c. sg-close is added to view-detail
|
||||
@include to(sm) {
|
||||
display: block;
|
||||
background-color: transparent !important;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
top: $toolbar-tall-height;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transition: all 0.5s $swift-ease-in-out-timing-function;
|
||||
transform: translateX(0);
|
||||
transition: $swift-ease-in-out;
|
||||
&.sg-close {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
&.ng-leave {
|
||||
&.ng-leave-active {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
&.ng-leave.ng-leave-active {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
&.ng-enter {
|
||||
transition: all 0.5s $swift-ease-in-out-timing-function;
|
||||
transform: translateX(100%);
|
||||
&.ng-enter-active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
.viewer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue