LupusNobilis
/
sogo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve sgFolderTree directive (mailboxes tree)

pull/91/head
Francis Lachapelle 2015-01-29 11:09:31 -05:00
parent 7f74d5a3d9
commit 225d039f89
5 changed files with 347 additions and 414 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
UI/WebServerResources/css/styles.css
View File

@ -4760,6 +4760,51 @@ md-tab > .md-ripple-container .md-ripple {
Other features at : http://zavoloklom.github.io/material-design-iconic-font/examples.html
*/
md-sidenav md-list md-item-content:hover {
background-color: #ede5ca;
cursor: pointer; }
md-sidenav md-list md-item-content.sg-active {
color: #00b0c0; }
md-sidenav md-list md-item-content.sg-loading {
color: #a1ccc8; }
md-sidenav md-list md-item-content .sg-item-name {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap; }
md-item-content .childLevel1 {
padding-left: 15px; }
md-item-content .childLevel2 {
padding-left: 30px; }
md-item-content .childLevel3 {
padding-left: 45px; }
md-item-content .childLevel4 {
padding-left: 60px; }
md-item-content .childLevel5 {
padding-left: 75px; }
md-item-content .childLevel6 {
padding-left: 90px; }
md-item-content .childLevel7 {
padding-left: 105px; }
md-item-content .childLevel8 {
padding-left: 120px; }
md-item-content .childLevel9 {
padding-left: 135px; }
md-item-content .childLevel10 {
padding-left: 150px; }
md-item-content .childLevel11 {
padding-left: 165px; }
.view[layout=row] {
max-height: 100%; }

4
UI/WebServerResources/css/styles.css.map
View File

File diff suppressed because one or more lines are too long

56
UI/WebServerResources/js/Common/ui-desktop.js
View File

@ -214,23 +214,22 @@
},
template:
'<md-item>' +
' <span class="folder-container">' +
' <span class="folder-content">' +
' <i class="icon icon-ion-folder"></i>' +
' <form data-ng-submit="save()">' +
' <a>{{folder.name}}</a>' +
' <input type="text" class="folder-name ng-hide"' +
' data-ng-model="folder.name"' +
' data-ng-blur="save()"' +
' data-sg-escape="revert()"/>' +
' </form>' +
' <span class="icon ng-hide" data-ng-cloak="ng-cloak">' +
' <a class="icon" href="#"' +
' data-dropdown-toggle="#folderProperties"' +
' data-options="align:right"><i class="icon-cog"></i></a>' +
' </span>' +
' <md-item-content>' +
' <i class="md-icon-folder-open"></i>' +
' <a class="md-flex md-tile-content sg-item-name">{{folder.name}}</a>' +
' <md-input-container class="md-flex md-tile-content ng-hide">'+
' <input type="text"' +
' ng-model="folder.name"' +
' ng-blur="save()"' +
' sg-enter="save()"' +
' sg-escape="revert()"/>' +
' </md-input-container>' +
' <span class="icon ng-hide" ng-cloak="ng-cloak">' +
' <a class="icon" href="#"' +
' dropdown-toggle="#folderProperties"' +
' options="align:right"><i class="md-icon-more-vert"></i></a>' +
' </span>' +
' </span>' +
' </md-item-content>' +
'</md-item>' +
'<sg-folder-tree ng-repeat="child in folder.children track by child.path"' +
' data-sg-root="root"' +
@ -238,7 +237,7 @@
' data-sg-select-folder="selectFolder"></sg-folder-tree>',
compile: function(element) {
return RecursionHelper.compile(element, function(scope, iElement, iAttrs, controller, transcludeFn) {
var level, link, input, edit;
var level, link, inputContainer, input, edit;
// Set CSS class for folder hierarchical level
level = scope.folder.path.split('/').length - 1;
@ -246,11 +245,12 @@
// Select dynamic elements
link = angular.element(iElement.find('a')[0]);
inputContainer = angular.element(iElement.find('md-input-container'));
input = iElement.find('input')[0];
var edit = function() {
link.addClass('ng-hide');
angular.element(input).removeClass('ng-hide');
inputContainer.removeClass('ng-hide');
input.focus();
input.select();
};
@ -265,12 +265,12 @@
while (list[0].tagName != 'MD-LIST') {
list = list.parent();
}
items = list.find('md-item');
items = list.find('md-item-content');
// Highlight element as "loading"
items.removeClass('_selected');
items.removeClass('_loading');
angular.element(iElement.find('md-item')[0]).addClass('_loading');
items.removeClass('sg-active');
items.removeClass('sg-loading');
angular.element(iElement.find('md-item-content')[0]).addClass('sg-loading');
// Call external function
scope.selectFolder(scope.root, scope.folder);
@ -294,19 +294,19 @@
while (list[0].tagName != 'MD-LIST') {
list = list.parent();
}
items = list.find('md-item');
items = list.find('md-item-content');
// Hightlight element as "selected"
angular.element(iElement.find('md-item')[0]).removeClass('_loading');
angular.element(iElement.find('md-item')[0]).addClass('_selected');
angular.element(iElement.find('md-item-content')[0]).removeClass('sg-loading');
angular.element(iElement.find('md-item-content')[0]).addClass('sg-active');
// Show options button
angular.forEach(items, function(element) {
var li = angular.element(element);
var spans = li.find('span');
angular.element(spans[2]).addClass('ng-hide');
angular.element(spans[0]).addClass('ng-hide');
});
angular.element(iElement.find('span')[2]).removeClass('ng-hide');
angular.element(iElement.find('span')[0]).removeClass('ng-hide');
}
else {
scope.mode.selected = false;
@ -326,7 +326,7 @@
scope.save = function() {
if (link.hasClass('ng-hide')) {
angular.element(input).addClass('ng-hide');
inputContainer.addClass('ng-hide');
link.removeClass('ng-hide');
scope.$emit('sgSaveFolder', scope.folder.id);
}

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

@ -1,399 +1,285 @@
@import "../core/functions";
$module-color: #D04747; // red
$module-secondary-color: #501B1B; // darker red
$topbar-bg-color: $module-color;
$topbar-link-bg-active-hover: scale-color($module-secondary-color, $lightness: -14%);
$topbar-link-bg-active: $module-secondary-color;
$topbar-link-bg-hover: scale-color($module-color, $lightness: -14%);
@import "foundation";
@mixin off-canvas-list {
list-style-type: none;
padding:0;
margin:0;
/* display: table; */
width: 100%;
li {
/*
+-----------------------------------------------+
+ li |
|+------+-----------------------------+--------+|
|| i | form | span ||
|+------+-----------------------------+--------+|
+-----------------------------------------------+
*/
/* display: table-row; */
transition: background 300ms ease;
label {
display: block;
padding: $off-canvas-label-padding;
color: $off-canvas-label-color;
text-transform: $off-canvas-label-text-transform;
font-size: $off-canvas-label-font-size;
font-weight: $off-canvas-label-font-weight;
background: $off-canvas-label-bg;
border-top: $off-canvas-label-border-top;
border-bottom: $off-canvas-label-border-bottom;
margin: $off-canvas-label-margin;
}
.folder-container {
display: table;
width: 100%;
.folder-content {
display: table-row;
>* {
display: table-cell;
padding: $off-canvas-link-padding;
color: $off-canvas-link-color;
/* border-bottom: $off-canvas-link-border-bottom; */
//vertical-align: middle;
}
}
md-sidenav {
md-list {
md-item-content {
&:hover {
background: scale-color($tabbar-bg, $lightness: -30%);
background-color: #ede5ca; // paper 200
cursor: pointer;
}
}
>span {
//vertical-align: middle; // causes glitch when selecting row
border-left: 3px solid transparent;
//width: 2em;
}
.icon {
color: $off-canvas-label-color;
width: 1px;
}
form {
margin: 0;
padding-left: 0;
padding-right: 0;
* {
color: $off-canvas-link-color;
display: block;
width: 100%;
padding: 0;
//padding-left: $off-canvas-link-padding;
&.sg-active {
color: #00b0c0; // vintage-blue A700
}
input {
border: 0;
color: #333 !important;
font-size: 1rem;
height: $off-canvas-link-padding/2+1rem;
margin: 0;
&.sg-loading {
color: #a1ccc8; // vintage-blue 500
}
}
&._selected {
//background-color: #242424 !important;
//border: 0 !important;
>span {
border-left-color: $primary-color;
.sg-item-name {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
//* {
// color: #eee;
//}
}
&._loading {
>span {
border-left-color: $off-canvas-label-color;
}
}
}
}
.folders-list {
@include off-canvas-wrap();
ul {
@include off-canvas-list();
>li >ul {
margin-left: 10px;
}
}
}
.f-dropdown {
width: auto;
max-width: 300px;
white-space: nowrap;
&.icons-dropdown {
height: inherit;
//background-color: $primary-color;
.button {
margin: 0;
padding: $f-dropdown-list-padding;
border-color: $primary-color;
//color: scale-color($secondary-color, $lightness: 52%);
color: #fff;
}
background-color: $primary-color;
border-color: $primary-color;
&:before {
border-color: transparent transparent $primary-color transparent;
}
}
}
$i: 1;
@while $i < 12 {
.folders-list ul li .folder-container .folder-content > .childLevel#{$i} { padding-left: 15px * $i; }
md-item-content .childLevel#{$i} { padding-left: 15px * $i; }
$i: $i + 1;
}
$total-columns: 13;
$column-gutter: 0;
//$total-columns: 13;
//$column-gutter: 0;
#pageContent {
@include grid-row($behavior: nest);
#mailboxesList {
position: absolute;
top: $topbar-height;
bottom: 0;
background-color: #333;
@include grid-column($columns:13); //, $collapse:true);
@media #{$medium-up} {
@include grid-column($columns:3);
}
.newItemsToolbar {
margin-top: rem-calc(6);
text-align: center;
text-transform: uppercase;
}
.scrollView {
position: absolute;
overflow: auto;
overflow-x: hidden;
top: $topbar-height;
bottom: 0;
right: 0;
left: 0;
label {
padding-right: 0;
button {
float: right;
background-color: transparent;
padding: 0;
margin: 0;
width: 32px;
}
}
}
.buttonsToolbar {
border-top: $off-canvas-link-border-bottom;
position: absolute;
bottom: 0px;
width: 100%;
}
}
#messagesList, #messageEditor {
position: absolute;
overflow: auto;
overflow-x: hidden;
top: $topbar-height;
bottom: 0;
left: 23.07692%;
}
#messagesList {
background-color: $f-dropdown-list-hover-bg;
@include grid-column($columns:13);
@media #{$medium-up} {
@include grid-column($columns:4);
}
ul {
margin: 0;
padding: 5px 0;
li {
list-style-type: none;
//border-bottom: $topbar-divider-border-bottom;
width: 100%;
height: 56px;
float: left;
clear: left;
//border: 2px solid #fff;
//-webkit-border-radius: 4px;
//-moz-border-radius: 4px;
//border-radius: 4px;
//transition: all 300ms ease;
background-color: $f-dropdown-list-hover-bg;
transition: background 300ms ease;
a {
display: block;
color: #666;
//border-bottom: 1px dotted #ddd;
//width: 100%;
//font-size: $table-row-font-size;
//line-height: $table-line-height;
line-height: rem-calc(24);
padding: $table-head-padding;
//padding: rem-calc(8 10 18);
//margin: 0 rem-calc(12);
.name {
margin: 0;
//font-size: $table-head-font-size;
//color: $table-head-font-color;
font-weight: $table-head-font-weight;
}
div {
overflow: hidden;
white-space: nowrap;
}
span {
font-weight: normal;
font-size: smaller;
}
&._selected {
background-color: #fff;
}
}
&.unread {
a {
.name,
.subject {
color: $table-head-font-color;
/* font-weight: $table-head-font-weight; */
}
}
}
&:hover,
&:active {
background-color: #fff;
}
}
}
}
#messageView {
position: absolute;
top: $topbar-height;
bottom: 0;
left: 53.8461507692%;
overflow: auto;
overflow-x: hidden;
border-left: $topbar-divider-border-bottom;
padding: $table-head-padding;
padding-top: 0;
@include grid-column($columns:13);
@media #{$medium-up} {
@include grid-column($columns:6);
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding-top: rem-calc(12);
}
h1 {
margin-bottom: 0;
}
h2 {
font-weight: lighter;
}
.header {
background-color: $secondary-color;
padding-left: rem-calc(12);
padding-right: rem-calc(12);
padding-bottom: 0.2em;
h1, h2, h4, h6 {
color: #fff;
}
.label {
background-color: transparent;
border: 1px solid $primary-color;
border: 1px solid scale-color($primary-color, $lightness: 52%);
color: $primary-color;
color: scale-color($primary-color, $lightness: 52%);
}
.flags {
float: right;
}
}
/*
+-----------------------------------------------+
+ .attr (13) |
|+-------------+-------------------------------+|
|| .key (4) | .value (9) ||
|+-------------+-------------------------------+|
+-----------------------------------------------+
*/
.attr {
@include grid-row($behavior:collapse);
.key {
@include grid-column($columns:4);
label {
color: #999;
margin-right: rem-calc(12);
}
}
.value {
@include grid-column($columns:9);
&.single {
@include grid-column($offset: 4, $columns:9);
}
div {
a {
color: #666;
margin-left: 0.2em;
&:hover {
color: #000;
}
}
}
}
}
.buttonsToolbar {
margin-bottom: rem-calc(12);
background-color: #eee;
border-top: 2px solid #ddd;
.button {
margin: 0.4em;
&.alert {
//display: $button-display;
color: #fff;
}
}
}
.mailer_mailcontent {
background-color: #fff;
padding: .5em;
overflow: auto;
.mailer_mailcontent TABLE {
table-layout: auto;
}
}
}
#messageEditor {
right: 0;
textarea {
height: 20em;
}
}
}
h1 {
font-weight: lighter;
}
.buttonsToolbar {
text-align: right;
.button {
margin-bottom: 0;
font-size: 1.0em;
}
.folders-list & {
background-color: $tabbar-bg;
background-color: $off-canvas-bg;
text-align: center;
.button {
background-color: $tabbar-bg;
font-size: 1.5em;
transition: color 300ms ease;
color: scale-color($tabbar-bg, $lightness: 52%);
&:focus, &:hover {
color: $primary-color;
color: #fff;
//background-color: scale-color($tabbar-bg, $lightness: 13%);
}
}
}
}
//#pageContent {
// //@include grid-row($behavior: nest);
//
// #mailboxesList {
// position: absolute;
// top: $topbar-height;
// bottom: 0;
// background-color: #333;
// @include grid-column($columns:13); //, $collapse:true);
// @media #{$medium-up} {
// @include grid-column($columns:3);
// }
// .newItemsToolbar {
// margin-top: rem-calc(6);
// text-align: center;
// text-transform: uppercase;
// }
// .scrollView {
// position: absolute;
// overflow: auto;
// overflow-x: hidden;
// top: $topbar-height;
// bottom: 0;
// right: 0;
// left: 0;
// label {
// padding-right: 0;
// button {
// float: right;
// background-color: transparent;
// padding: 0;
// margin: 0;
// width: 32px;
// }
// }
// }
// .buttonsToolbar {
// border-top: $off-canvas-link-border-bottom;
// position: absolute;
// bottom: 0px;
// width: 100%;
// }
// }
//
// #messagesList, #messageEditor {
// position: absolute;
// overflow: auto;
// overflow-x: hidden;
// top: $topbar-height;
// bottom: 0;
// left: 23.07692%;
// }
// #messagesList {
// background-color: $f-dropdown-list-hover-bg;
// @include grid-column($columns:13);
// @media #{$medium-up} {
// @include grid-column($columns:4);
// }
// ul {
// margin: 0;
// padding: 5px 0;
// li {
// list-style-type: none;
// //border-bottom: $topbar-divider-border-bottom;
// width: 100%;
// height: 56px;
// float: left;
// clear: left;
// //border: 2px solid #fff;
// //-webkit-border-radius: 4px;
// //-moz-border-radius: 4px;
// //border-radius: 4px;
// //transition: all 300ms ease;
// background-color: $f-dropdown-list-hover-bg;
// transition: background 300ms ease;
// a {
// display: block;
// color: #666;
// //border-bottom: 1px dotted #ddd;
// //width: 100%;
// //font-size: $table-row-font-size;
// //line-height: $table-line-height;
// line-height: rem-calc(24);
// padding: $table-head-padding;
// //padding: rem-calc(8 10 18);
// //margin: 0 rem-calc(12);
// .name {
// margin: 0;
// //font-size: $table-head-font-size;
// //color: $table-head-font-color;
// font-weight: $table-head-font-weight;
// }
// div {
// overflow: hidden;
// white-space: nowrap;
// }
// span {
// font-weight: normal;
// font-size: smaller;
// }
// &._selected {
// background-color: #fff;
// }
// }
// &.unread {
// a {
// .name,
// .subject {
// color: $table-head-font-color;
// /* font-weight: $table-head-font-weight; */
// }
// }
// }
// &:hover,
// &:active {
// background-color: #fff;
// }
// }
// }
// }
// #messageView {
// position: absolute;
// top: $topbar-height;
// bottom: 0;
// left: 53.8461507692%;
// overflow: auto;
// overflow-x: hidden;
// border-left: $topbar-divider-border-bottom;
// padding: $table-head-padding;
// padding-top: 0;
// @include grid-column($columns:13);
// @media #{$medium-up} {
// @include grid-column($columns:6);
// }
// h1, h2, h3, h4, h5, h6 {
// margin: 0;
// padding-top: rem-calc(12);
// }
// h1 {
// margin-bottom: 0;
// }
// h2 {
// font-weight: lighter;
// }
// .header {
// background-color: $secondary-color;
// padding-left: rem-calc(12);
// padding-right: rem-calc(12);
// padding-bottom: 0.2em;
// h1, h2, h4, h6 {
// color: #fff;
// }
// .label {
// background-color: transparent;
// border: 1px solid $primary-color;
// border: 1px solid scale-color($primary-color, $lightness: 52%);
// color: $primary-color;
// color: scale-color($primary-color, $lightness: 52%);
// }
// .flags {
// float: right;
// }
// }
// /*
// +-----------------------------------------------+
// + .attr (13) |
// |+-------------+-------------------------------+|
// || .key (4) | .value (9) ||
// |+-------------+-------------------------------+|
// +-----------------------------------------------+
// */
// .attr {
// @include grid-row($behavior:collapse);
// .key {
// @include grid-column($columns:4);
// label {
// color: #999;
// margin-right: rem-calc(12);
// }
// }
// .value {
// @include grid-column($columns:9);
// &.single {
// @include grid-column($offset: 4, $columns:9);
// }
// div {
// a {
// color: #666;
// margin-left: 0.2em;
// &:hover {
// color: #000;
// }
// }
// }
// }
// }
// .buttonsToolbar {
// margin-bottom: rem-calc(12);
// background-color: #eee;
// border-top: 2px solid #ddd;
// .button {
// margin: 0.4em;
// &.alert {
// //display: $button-display;
// color: #fff;
// }
// }
// }
//
// .mailer_mailcontent {
// background-color: #fff;
// padding: .5em;
// overflow: auto;
// .mailer_mailcontent TABLE {
// table-layout: auto;
// }
// }
//
// }
// #messageEditor {
// right: 0;
// textarea {
// height: 20em;
// }
// }
//}
//
//h1 {
// font-weight: lighter;
//}
//
//.buttonsToolbar {
// text-align: right;
// .button {
// margin-bottom: 0;
// font-size: 1.0em;
// }
// .folders-list & {
// background-color: $tabbar-bg;
// background-color: $off-canvas-bg;
// text-align: center;
// .button {
// background-color: $tabbar-bg;
// font-size: 1.5em;
// transition: color 300ms ease;
// color: scale-color($tabbar-bg, $lightness: 52%);
// &:focus, &:hover {
// color: $primary-color;
// color: #fff;
// //background-color: scale-color($tabbar-bg, $lightness: 13%);
// }
// }
// }
//}

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

@ -6,6 +6,8 @@
///
///
@import 'MailerUI.scss';
.view[layout=row] {
max-height: 100%;
}