Improve folder subscription widget

UI/Templates/ContactsUI/UIxContactsUserFolders.wox

@@ -5,41 +5,44 @@
     xmlns:var="http://www.skyrix.com/od/binding"
     xmlns:const="http://www.skyrix.com/od/constant"
     xmlns:uix="OGo:uix"><var:string var:value="doctype" const:escapeHTML="NO" />
-  <ul>
+  <span class="joyride-nub left"><!-- dropdown nub --></span>
-    <li class="title"><var:string label:value="Subscribe"/></li>
+  <div class="joyride-content-wrapper">
-    <li class="search">
+    <ul>
-      <input type="text" label:placeholder="Search"
+      <li class="title"><var:string label:value="Subscribe"/></li>
-             data-ng-model="searchString"
+      <li class="search">
-             data-sg-user-typeahead="sg-user-typeahead" />
+        <input type="text" label:placeholder="Search"
-    </li>
+               data-ng-model="searchString"
-    <li class="item"
+               data-sg-user-typeahead="sg-user-typeahead" />
-        data-ng-repeat="user in users">
+      </li>
-      <a data-ng-click="selectUser($index)"
+      <li class="item"
-         data-ng-mouseenter="selectActive($index)">
+          data-ng-repeat="user in users">
-        <span data-bind-html-unsafe="user.$shortFormat() | typeaheadHighlight:query"><!-- user --></span>
+        <a data-ng-click="selectUser($index)"
-        <i class="icon right"
+           data-ng-mouseenter="selectActive($index)">
-           data-ng-class="{'icon-arrow-right': user.uid != selectedUser.uid, 'icon-arrow-down': user.uid == selectedUser.uid}"><!-- arrow --></i>
+          <span data-bind-html-unsafe="user.$shortFormat() | typeaheadHighlight:query"><!-- user --></span>
-      </a>
+          <i class="icon right"
-      <ul class="subitems"
+             data-ng-class="{'icon-arrow-right': user.uid != selectedUser.uid, 'icon-arrow-down': user.uid == selectedUser.uid}"><!-- arrow --></i>
-          data-ng-if="user.uid == selectedUser.uid">
+        </a>
-        <li class="item"
+        <ul class="subitems"
-            data-ng-show="user.$$folders.length == 0">
+            data-ng-if="user.uid == selectedUser.uid">
-          <a class="disabled">
+          <li class="item"
-            <i class="icon icon-notification"><!-- no subscription --></i>
+              data-ng-show="user.$$folders.length == 0">
-            <var:string label:value="No possible subscription"/>
+            <a class="disabled">
-          </a>
+              <i class="icon icon-notification"><!-- no subscription --></i>
-        </li>
+              <var:string label:value="No possible subscription"/>
-        <li class="item"
+            </a>
-            data-ng-repeat="folder in user.$$folders">
+          </li>
-          <a>
+          <li class="item"
-            <i class="icon"
+              data-ng-repeat="folder in user.$$folders">
-               data-ng-class="{'icon-address-book': folder.type == 'Contact'}"><!-- type --></i>
+            <a>
-            <span data-ng-bind="folder.displayName"><!-- folder --></span>
+              <i class="icon"
-            <button class="button tiny right"
+                 data-ng-class="{'icon-address-book': folder.type == 'Contact'}"><!-- type --></i>
-                    data-ng-click="selectFolder(folder)">Subscribe</button>
+              <span data-ng-bind="folder.displayName"><!-- folder --></span>
-          </a>
+              <button class="button tiny right"
-        </li>
+                      data-ng-click="selectFolder(folder)">Subscribe</button>
-      </ul>
+            </a>
-    </li>
+          </li>
-  </ul>
+        </ul>
+      </li>
+    </ul>
+  </div>
 </container>

UI/WebServerResources/js/Common/ui-desktop.js

@@ -197,6 +197,7 @@
                 dropdownCss.top =  $window.innerHeight - dropdownHeight - 5;
                 if (dropdownHeight > $window.innerHeight) {
                   // Resize height of dropdown to fit window
+                  dropdownCss.top = 5;
                   dropdownCss.height = ($window.innerHeight - 10) + 'px';
                 }
               }
@@ -273,10 +274,7 @@
           };
         }],
         link: function(scope, element, attrs, controller) {
-          // NOTE: We could also make these modifications in the wox template
           element.addClass('joyride-tip-guide');
-          angular.element(element.children()[0]).addClass('joyride-content-wrapper');
-          element.prepend('<span class="joyride-nub left"></span>');
         }
       };
     }])

UI/WebServerResources/js/Common/user-model.js

@@ -187,7 +187,6 @@
       User.$$resource.userResource(this.uid).fetch(null, 'foldersSearch', param).then(function(data) {
         _this.$$folders = data;
         deferred.resolve(data);
-        console.debug(JSON.stringify(data, undefined, 2));
         return data;
       });
     }

UI/WebServerResources/js/Contacts/addressbook-model.js

@@ -59,9 +59,10 @@
     var sibling, i;
 
     addressbook.isOwned = this.activeUser.isSuperUser || addressbook.owner == this.activeUser.login;
+    addressbook.isSubscription = addressbook.owner != this.activeUser.login;
     sibling = _.find(this.$addressbooks, function(o) {
       return (o.isRemote || (o.id != 'personal'
-                             && o.isOwned == addressbook.isOwned
+                             && o.isSubscription === addressbook.isSubscription
                              && o.name.localeCompare(addressbook.name) === 1));
     });
     i = sibling ? _.indexOf(_.pluck(this.$addressbooks, 'id'), sibling.id) : 1;
@@ -81,7 +82,8 @@
       // Instanciate AddressBook objects
       angular.forEach(this.$addressbooks, function(o, i) {
         _this.$addressbooks[i] = new AddressBook(o);
-        // Add 'isOwned' attribute based on active user (TODO: add it server-side?)
+        // Add 'isOwned' and 'isSubscription' attributes based on active user (TODO: add it server-side?)
+        _this.$addressbooks[i].isSubscription = _this.$addressbooks[i].owner != _this.activeUser.login;
         _this.$addressbooks[i].isOwned = _this.activeUser.isSuperUser
           || _this.$addressbooks[i].owner == _this.activeUser.login;
       });
@@ -196,10 +198,10 @@
         d = AddressBook.$q.defer(),
         promise;
 
-    if (this.isOwned)
+    if (this.isSubscription)
-      promise = AddressBook.$$resource.remove(this.id);
-    else
       promise = AddressBook.$$resource.fetch(this.id, 'unsubscribe');
+    else
+      promise = AddressBook.$$resource.remove(this.id);
 
     promise.then(function() {
       var i = _.indexOf(_.pluck(AddressBook.$addressbooks, 'id'), _this.id);

UI/WebServerResources/js/ContactsUI.js

@@ -165,7 +165,18 @@
         }
       };
       $scope.confirmDelete = function() {
-        if ($scope.addressbook.isOwned) {
+        if ($scope.addressbook.isSubscription) {
+          // Unsubscribe without confirmation
+          $rootScope.addressbook.$delete()
+            .then(function() {
+              $rootScope.addressbook = null;
+            }, function(data, status) {
+              Dialog.alert(l('An error occured while deleting the addressbook "%{0}".',
+                             $rootScope.addressbook.name),
+                           l(data.error));
+            });
+        }
+        else {
           Dialog.confirm(l('Warning'), l('Are you sure you want to delete the addressbook <em>%{0}</em>?',
                                          $scope.addressbook.name))
             .then(function(res) {
@@ -181,18 +192,6 @@
               }
             });
         }
-        else {
-          // Unsubscribe without confirmation
-          $rootScope.addressbook.$delete()
-            .then(function() {
-              $rootScope.addressbook = null;
-            }, function(data, status) {
-              Dialog.alert(l('An error occured while deleting the addressbook "%{0}".',
-                             $rootScope.addressbook.name),
-                           l(data.error));
-            });
-
-        }
       };
       $scope.importCards = function() {
 

UI/WebServerResources/scss/ContactsUI.scss

@@ -594,8 +594,6 @@ $column-gutter: 0;
 .sg-dropdown-content {
     background-color: #fff;
     height: 300px;
-    overflow: hidden;
-    overflow-y: auto;
     &.joyride-tip-guide {
         .joyride-nub {
             &.left {
@@ -607,13 +605,15 @@ $column-gutter: 0;
         }
         .joyride-content-wrapper {
             list-style: none;
-            margin: 0;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            overflow: hidden;
+            overflow-y: auto;
             padding: 0;
             ul {
+                margin-left: 0;
                 list-style-type: none;
-                &.subitems {
-                    margin-left: 0;
-                }
             }
             li {
                 &.title {