From 5f5dcc1d5d6261636fba766e9e7fe22785572801 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Fri, 14 Nov 2014 15:18:20 -0500
Subject: [PATCH] Improve CSS of addressbooks list

---
 .../ContactsUI/UIxContactFoldersView.wox      | 60 +++++++++++--------
 UI/WebServerResources/scss/ContactsUI.scss    | 22 +++++--
 2 files changed, 51 insertions(+), 31 deletions(-)

diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index 86d806984..40b0c3bb9 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -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>
diff --git a/UI/WebServerResources/scss/ContactsUI.scss b/UI/WebServerResources/scss/ContactsUI.scss
index 060c98709..89265d8b5 100644
--- a/UI/WebServerResources/scss/ContactsUI.scss
+++ b/UI/WebServerResources/scss/ContactsUI.scss
@@ -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 {