amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-02-26 03:36:23 +00:00
Code Issues Projects Releases Wiki Activity

Add a view-detail class (for more generic use)

Browse Source 
Fix the regression (scroll) problem on contact editor
This commit is contained in:
Benoit Favreault
2015-03-25 16:46:06 -04:00
committed by Francis Lachapelle
parent 655fe5f731
commit f99dae331d
5 changed files with 53 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,8 @@
<?xml version='1.0' standalone='yes'?>
<container xmlns="http://www.w3.org/1999/xhtml" xmlns:var="http://www.skyrix.com/od/binding" xmlns:const="http://www.skyrix.com/od/constant" xmlns:label="OGo:label">
<div class="md-whiteframe-z1">
<md-content md-scroll-y="true" class="md-padding bg-sogoPaper-50">
<md-content md-scroll-y="true" class="md-padding md-whiteframe-z1 bg-sogoPaper-50">
<div class="editor md-padding">
<hgroup class="header">
<h1 class="sg-md-display-2--light" ng-bind-html="card.$fullname()"><!-- fullname --></h1>
@@ -367,7 +367,7 @@
</form>
</div>
</md-content>
</div>
</container>

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

@@ -288,8 +288,9 @@
</md-item>
</md-list>
</md-content>
<!-- This extra container prevent card from being stretch by layout-fill -->
<div ui-view="card" layout="column" ng-animate="'view'"><!-- card view --></div>
<!-- This extra container is used to animate views transitions
double quotes in ng-animate is not a typo -->
<div class="view-detail" ui-view="card" layout="column" ng-animate="'view'"><!-- card view --></div>
</div>
</section>

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

@@ -40,7 +40,8 @@
</md-item>
</md-list>
</md-content>
<div layout="column" ui-view="message" ng-animate="'view'"><!-- message view --></div>
<!-- This extra container is used to animate views transitions
double quotes in ng-animate is not a typo -->
<div class="view-detail" layout="column" ui-view="message" ng-animate="'view'"><!-- message view --></div>
</container>

28
UI/WebServerResources/scss/views/MailerUI.scss
View File

@@ -1,32 +1,4 @@
[id="messagesList"] {
flex: 0 0 $listView-width;
}
[ui-view="message"] {
flex: 1 2 $detailView-width;
min-width: ($detailView-width - $pitch);
max-width: ($detailView-width + $pitch);
margin: 0 auto;
&.ng-enter {
border: 4px solid red;
transition: all 1s linear;
&.ng-enter-active {
border: 4px solid green;
transition: all 1s linear;
}
}
&.ng-leave {
border: 4px solid blue;
transition: all 1s linear;
&.ng-leave-active {
border: 4px solid blue;
transition: all 1s linear;
filter: opacity(0);
}
}
}
// Message view header
// Could be made into a more generic component
// ----------------------------------------------------------------------------

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

@@ -12,4 +12,48 @@
.view[layout=row] {
max-height: 100%;
}
// We make intensive use of the list/detail view pattern, here are some base
// definitions for this
// ----------------------------------------------------------------------------
// Variables
$listView-width: grid-step(6) !global;
$detailView-width: grid-step(8) !global;
[id="messagesList"] {
flex: 0 0 $listView-width;
}
.view-detail {
flex: 1 2 $detailView-width;
min-width: ($detailView-width - $pitch);
max-width: ($detailView-width + $pitch);
margin: 0 auto;
}
[ui-view="message"] {
&.ng-enter {
border: 4px solid red;
transition: all 1s linear;
&.ng-enter-active {
border: 4px solid green;
transition: all 1s linear;
}
}
&.ng-leave {
border: 4px solid blue;
transition: all 1s linear;
&.ng-leave-active {
border: 4px solid blue;
transition: all 1s linear;
filter: opacity(0);
}
}
}