mirror of
https://github.com/inverse-inc/sogo.git
synced 2026-08-21 22:53:18 +00:00
Improve sidenav lists
This commit is contained in:
Francis Lachapelle
@@ -150,33 +150,27 @@
|
||||
<md-content md-scroll-y="md-scroll-y" class="md-flex">
|
||||
<md-list>
|
||||
<md-list-item ng-repeat="folder in addressbooks track by folder.id"
|
||||
ng-class="{_selected: addressbook.id==folder.id}"
|
||||
ng-dblclick="edit($index)">
|
||||
<i class="sg-child-level-0" ng-class="{'md-icon-public': folder.isRemote, 'md-icon-contacts': folder.isEditable}"><!-- icon --></i>
|
||||
<md-button class="sg-folder">
|
||||
<form ng-submit="save($index)">
|
||||
<a ui-sref="addressbook({addressbookId: folder.id})"
|
||||
ng-click="select($index)"
|
||||
ng-show="editMode!=folder.id"
|
||||
ng-cloak="ng-cloak">{{folder.name}}
|
||||
</a>
|
||||
<input class="folder-name" type="text"
|
||||
ng-model="folder.name"
|
||||
ng-show="editMode==folder.id"
|
||||
ng-cloak="ng-cloak"
|
||||
ng-blur="save($index)"
|
||||
sg-focus-on="addressBookName_{{$index}}"
|
||||
sg-escape="revertEditing($index)"/>
|
||||
</form>
|
||||
</md-button>
|
||||
<span class="icon" ng-cloak="ng-cloak">
|
||||
<a class="icon" href="#"
|
||||
dropdown-toggle="#addressbookProperties"
|
||||
options="align:right"
|
||||
ng-show="currentFolderIsConfigurable(folder)">
|
||||
<i class="md-icon-more-vert"><!-- options --></i>
|
||||
</a>
|
||||
</span>
|
||||
ui-sref-active="sg-active"
|
||||
ng-dblclick="edit($index)">
|
||||
<i ng-class="{'md-icon-public': folder.isRemote, 'md-icon-contacts': folder.isEditable}"><!-- icon --></i>
|
||||
<button class="md-button md-flex sg-item-name"
|
||||
ng-show="editMode!=folder.id"
|
||||
ng-click="select($index)"
|
||||
ng-cloak="ng-cloak"
|
||||
ui-sref="addressbook({addressbookId: folder.id})">{{folder.name}}</button>
|
||||
<md-input-container
|
||||
class="md-flex md-tile-content"
|
||||
ng-show="editMode==folder.id">
|
||||
<input class="folder-name" type="text"
|
||||
ng-model="folder.name"
|
||||
ng-cloak="ng-cloak"
|
||||
ng-blur="save($index)"
|
||||
sg-focus-on="addressBookName_{{$index}}"
|
||||
sg-enter="save($index)"
|
||||
sg-escape="revertEditing($index)"/>
|
||||
</md-input-container>
|
||||
<i class="md-icon-more-vert"
|
||||
ng-show="currentFolderIsConfigurable(folder)"><!-- options --></i>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</md-content>
|
||||
@@ -231,7 +225,8 @@
|
||||
<div
|
||||
ng-class="{_selected: card.id == currentCard.id}"
|
||||
ng-click="select($index); toggleDetailView()"
|
||||
layout="row">
|
||||
layout="row"
|
||||
flex="true">
|
||||
<div class="sg-avatar">
|
||||
<!--avatar--><!-- currentCard.tag = vcard || vlist -->
|
||||
</div>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
xmlns:label="OGo:label"
|
||||
xmlns:uix="OGo:uix">
|
||||
|
||||
<md-content md-scroll-y="md-scroll-y" class="md-padding bg-sogoPaper-50 md-whiteframe-z1" ng-class="">
|
||||
<md-content md-scroll-y="md-scroll-y" class="md-padding bg-sogoPaper-50 md-whiteframe-z1">
|
||||
<md-button class="iconButton show-sm" ng-click="toggleDetailView()"><i class="md-icon-close"><!--icon--></i></md-button>
|
||||
<header class="msg-header">
|
||||
|
||||
|
||||
@@ -22,19 +22,23 @@
|
||||
|
||||
<md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')" layout="column">
|
||||
<var:component className="UIxSidenavToolbarTemplate" />
|
||||
<md-content md-scroll-y="md-scroll-y" class="md-padding md-flex">
|
||||
<md-content md-scroll-y="md-scroll-y" class="md-flex">
|
||||
<md-list>
|
||||
<md-list-item>
|
||||
<a ui-sref="preferences.general">General</a>
|
||||
<md-list-item ui-sref-active="sg-active">
|
||||
<button class="md-button md-flex sg-item-name"
|
||||
ui-sref="preferences.general"><var:string label:value="General"/></button>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<a ui-sref="preferences.calendars">Calendar</a>
|
||||
<md-list-item ui-sref-active="sg-active">
|
||||
<button class="md-button md-flex sg-item-name"
|
||||
ui-sref="preferences.calendars"><var:string label:value="Calendar"/></button>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<a ui-sref="preferences.addressbooks">Contacts</a>
|
||||
<md-list-item ui-sref-active="sg-active">
|
||||
<button class="md-button md-flex sg-item-name"
|
||||
ui-sref="preferences.addressbooks"><var:string label:value="Contacts"/></button>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<a ui-sref="preferences.mailer">Mail</a>
|
||||
<md-list-item ui-sref-active="sg-active">
|
||||
<button class="md-button md-flex sg-item-name"
|
||||
ui-sref="preferences.mailer"><var:string label:value="Mail"/></button>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</md-content>
|
||||
|
||||
@@ -254,12 +254,12 @@
|
||||
while (list[0].tagName != 'MD-LIST') {
|
||||
list = list.parent();
|
||||
}
|
||||
items = list.find('md-item-content');
|
||||
items = list.find('md-list-item');
|
||||
|
||||
// Highlight element as "loading"
|
||||
items.removeClass('sg-active');
|
||||
items.removeClass('sg-loading');
|
||||
angular.element(iElement.find('md-item-content')[0]).addClass('sg-loading');
|
||||
angular.element(iElement.find('md-list-item')[0]).addClass('sg-loading');
|
||||
|
||||
// Call external function
|
||||
scope.selectFolder(scope.root, scope.folder);
|
||||
@@ -283,11 +283,11 @@
|
||||
while (list[0].tagName != 'MD-LIST') {
|
||||
list = list.parent();
|
||||
}
|
||||
items = list.find('md-item-content');
|
||||
items = list.find('md-list-item');
|
||||
|
||||
// Hightlight element as "selected"
|
||||
angular.element(iElement.find('md-item-content')[0]).addClass('sg-active');
|
||||
angular.element(iElement.find('md-item-content')[0]).removeClass('sg-loading');
|
||||
angular.element(iElement.find('md-list-item')[0]).addClass('sg-active');
|
||||
angular.element(iElement.find('md-list-item')[0]).removeClass('sg-loading');
|
||||
|
||||
// Show options button
|
||||
angular.forEach(items, function(element) {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
/// button.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
/// button.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
@import 'extends';
|
||||
|
||||
// sometimes fabs get squized
|
||||
@@ -10,7 +10,9 @@
|
||||
// ------------------------------------
|
||||
sg-folder-tree .md-button,
|
||||
md-sidenav md-list button.md-button {
|
||||
padding: 0;
|
||||
// dirty fix to squash the theme style
|
||||
background-color: transparent !important;
|
||||
padding: 0 $mg;
|
||||
outline: none;
|
||||
color: inherit;
|
||||
text-transform: initial;
|
||||
@@ -18,15 +20,6 @@ md-sidenav md-list button.md-button {
|
||||
-webkit-font-smoothing: auto;
|
||||
}
|
||||
|
||||
.sg-folder {
|
||||
text-align: left;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sg-active .md-button {
|
||||
color: sg-color($sogoBlue, 800);
|
||||
}
|
||||
|
||||
md-sidenav .md-button [class ^= "md-icon"] {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
@@ -49,11 +49,6 @@ $i: 1;
|
||||
$i: $i + 1;
|
||||
}
|
||||
|
||||
// Folder and mailboxes icons
|
||||
// ---------------------------------------
|
||||
[class*="sg-child-level"] {
|
||||
margin-right: 1em;
|
||||
};
|
||||
// This hack is so BAD I am ashame putting it in the shame file
|
||||
// -----------------------------------------------------------
|
||||
// Folder tree's controler function are very intricate, the way
|
||||
@@ -73,29 +68,23 @@ $i: 1;
|
||||
&.md-whiteframe-z1 {
|
||||
box-shadow: $sidenav-shadow-z1;
|
||||
}
|
||||
button {
|
||||
// dirty fix to squash the theme style
|
||||
background-color: transparent !important;
|
||||
}
|
||||
md-item-content {
|
||||
line-height: $sg-line-height-6; // 40px eg. display-1
|
||||
padding: 0 $mg;
|
||||
md-list-item {
|
||||
transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function,
|
||||
color 0.12s linear;
|
||||
&:hover {
|
||||
background-color: sg-color($sogoPaper, 500);
|
||||
cursor: pointer;
|
||||
background-color: sg-color($sogoBlue, 500);
|
||||
}
|
||||
&.sg-active {
|
||||
color: sg-color($sogoBlue, 800);
|
||||
background-color: sg-color($sogoBlue, 400);
|
||||
}
|
||||
&.sg-loading {
|
||||
color: sg-color($sogoBlue, 500);
|
||||
color: sg-color($sogoBlue, 200);
|
||||
}
|
||||
.sg-item-name, .md-label {
|
||||
font-size: sg-size(button);
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.md-label {
|
||||
|
||||
Reference in New Issue
Block a user