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

Improve CSS of addressbooks list

pull/91/head
Francis Lachapelle 2014-11-14 15:18:20 -05:00
parent 8c7846a1fa
commit 78a349fecd
2 changed files with 51 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -148,32 +148,34 @@
<div class="newItemsToolbar">
<a class="button tiny radius split" data-ui-sref="addressbook.new({addressbookId: addressbook.id, contactType: 'card'})"><var:string label:value="New Card"/><span data-dropdown-toggle="#newListDrop"></span></a><br/>
</div>
<ul>
<li data-ng-repeat="folder in addressbooks"
data-ng-class="{_selected: addressbook.id==folder.id}"
data-ng-dblclick="edit($index)">
<i class="icon" data-ng-class="{'icon-earth': folder.isRemote, 'icon-address-book': folder.isEditable}"><!-- icon --></i>
<form data-ng-submit="save($index)">
<a data-ui-sref="addressbook({addressbookId: folder.id})"
data-ng-click="select($index)"
data-ng-show="editMode!=folder.id"
data-ng-cloak="ng-cloak">{{folder.name}}</a>
<input class="folder-name" type="text"
data-ng-model="folder.name"
data-ng-show="editMode==folder.id"
data-ng-cloak="ng-cloak"
data-ng-blur="save($index)"
data-sg-focus-on="addressBookName_{{$index}}"
data-sg-escape="revertEditing($index)"/>
</form>
<span class="icon" data-ng-cloak="ng-cloak">
<a class="icon" href="#"
data-dropdown-toggle="#addressbookProperties"
data-options="align:right"
data-ng-show="addressbook.id==folder.id"><i class="icon-cog"><!-- options --></i></a>
</span>
</li>
</ul>
<div class="scrollview">
<ul>
<li data-ng-repeat="folder in addressbooks"
data-ng-class="{_selected: addressbook.id==folder.id}"
data-ng-dblclick="edit($index)">
<i class="icon" data-ng-class="{'icon-earth': folder.isRemote, 'icon-address-book': folder.isEditable}"><!-- icon --></i>
<form data-ng-submit="save($index)">
<a data-ui-sref="addressbook({addressbookId: folder.id})"
data-ng-click="select($index)"
data-ng-show="editMode!=folder.id"
data-ng-cloak="ng-cloak">{{folder.name}}</a>
<input class="folder-name" type="text"
data-ng-model="folder.name"
data-ng-show="editMode==folder.id"
data-ng-cloak="ng-cloak"
data-ng-blur="save($index)"
data-sg-focus-on="addressBookName_{{$index}}"
data-sg-escape="revertEditing($index)"/>
</form>
<span class="icon" data-ng-cloak="ng-cloak">
<a class="icon" href="#"
data-dropdown-toggle="#addressbookProperties"
data-options="align:right"
data-ng-show="addressbook.id==folder.id"><i class="icon-cog"><!-- options --></i></a>
</span>
</li>
</ul>
</div>
<div class="buttonsToolbar">
<button data-ng-click="newAddressbook()" class="button small" label:title="New Addressbook..."><i class="icon-plus"><!-- new --></i></button>
<a href="#" class="button small" label:title="Subscribe to an Addressbook..."
@ -323,6 +325,12 @@
<script type="text/ng-template" id="cardEditor.html">
<div class="editor">
<div class="header">
<h1 data-ng-bind-html="card.$fullname()"><!-- fullname --></h1>
<h6>{{card.$description()}}
<span class="label radius" data-ng-repeat="category in card.categories">{{category.value}}</span>
</h6>
</div>
<form name="cardForm" data-ng-show="card.$isCard()" data-ng-submit="save(cardForm)">
<div class="buttonsToolbar">
<span class="button tiny radius secondary" data-ng-click="cancel()"><i class="icon-arrow-left"><!-- cancel --></i> <var:string label:value="Cancel"/></span>

22
UI/WebServerResources/scss/ContactsUI.scss
View File

@ -62,11 +62,10 @@ $topbar-link-bg-hover: scale-color($module-color, $lightness: -14%);
display: table-cell;
padding: $off-canvas-link-padding;
color: $off-canvas-link-color;
border-bottom: $off-canvas-link-border-bottom;
//vertical-align: middle;
}
.icon {
//vertical-align: middle; // causes glitch when selecting row
border-left: 3px solid transparent;
width: 2em;
}
form {
@ -92,8 +91,10 @@ $topbar-link-bg-hover: scale-color($module-color, $lightness: -14%);
background: scale-color($tabbar-bg, $lightness: -30%);
}
&._selected {
background-color: #242424 !important;
border: 0 !important;
>i {
border-left-color: $primary-color;
}
* {
color: #eee;
}
@ -143,8 +144,6 @@ $column-gutter: 0;
#addressbooksList {
position: absolute;
overflow: auto;
overflow-x: hidden;
top: $topbar-height;
bottom: 0;
background-color: #333;
@ -157,6 +156,19 @@ $column-gutter: 0;
text-align: center;
text-transform: uppercase;
}
.scrollview {
position: absolute;
overflow: auto;
overflow-x: hidden;
top: $topbar-height;
bottom: $topbar-height;
}
.buttonsToolbar {
border-top: $off-canvas-link-border-bottom;
position: absolute;
bottom: 0px;
width: 100%;
}
}
#rightPanel {