avatar tweaks. sidebar org avatars

src/app/directives/letterAvatarDirective.js

@@ -80,15 +80,15 @@ angular
                     data: attrs.data,
                     textColor: attrs.textcolor || '#ffffff',
                     bgColor: attrs.bgcolor,
-                    height: attrs.height || 45,
+                    height: attrs.avheight || 45,
-                    width: attrs.width || 45,
+                    width: attrs.avwidth || 45,
-                    fontsize: attrs.fontsize || 20,
+                    fontSize: attrs.fontsize || 20,
                     fontWeight: attrs.fontweight || 300,
                     fontFamily: attrs.fontfamily || 'Open Sans, HelveticaNeue-Light, Helvetica Neue Light, ' +
                     'Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif',
                     round: attrs.round || 'true',
                     dynamic: attrs.dynamic || 'true',
-                    class: attrs.class || ''
+                    class: attrs.avclass || ''
                 };
 
                 if (params.dynamic === 'true') {
@@ -112,7 +112,7 @@ angular
                         c = upperData.substr(0, params.charCount);
                     }
 
-                    var cobj = getCharText(c, params.textColor, params.fontFamily, params.fontWeight, params.fontsize);
+                    var cobj = getCharText(c, params.textColor, params.fontFamily, params.fontWeight, params.fontSize);
                     var color = params.bgColor ? params.bgColor : stringToColor(upperData);
                     var svg = getSvg(params.width, params.height, color);
                     svg.append(cobj);

src/app/organization/views/organizationPeople.html

@@ -58,7 +58,7 @@
                                 </div>
                             </td>
                             <td style="width: 45px;">
-                                <letter-avatar data="{{user.name || user.email}}" shape="round"></letter-avatar>
+                                <letter-avatar data="{{user.name || user.email}}"></letter-avatar>
                             </td>
                             <td>
                                 <a href="javascript:void(0)" ng-click="edit(user.id)">{{user.email}}</a>

src/app/organization/views/organizationSubvaultsUsers.html

@@ -20,7 +20,7 @@
                         </button>
                     </td>
                     <td style="width: 45px;">
-                        <letter-avatar data="{{user.name || user.email}}" shape="round"></letter-avatar>
+                        <letter-avatar data="{{user.name || user.email}}"></letter-avatar>
                     </td>
                     <td>
                         <a href="javascript:void(0)" ng-click="edit(user.id)">{{user.email}}</a>

src/app/settings/views/settings.html

@@ -37,7 +37,7 @@
                     </div>
                     <div class="col-sm-3 settings-photo">
                         <letter-avatar data="{{model.profile.name || model.email}}" round="false"
-                                       class="img-responsive img-rounded" width="200" height="200"
+                                       avclass="img-responsive img-rounded" avwidth="200" avheight="200"
                                        fontsize="90"></letter-avatar>
                     </div>
                 </div>

src/app/views/organizationLayout.html

@@ -22,7 +22,7 @@
     <section class="sidebar">
         <div class="user-panel">
             <div class="pull-left image">
-                <letter-avatar data="{{orgProfile.name}}" shape="round"></letter-avatar>
+                <letter-avatar data="{{orgProfile.name}}" avclass="img-responsive img-rounded" round="false"></letter-avatar>
             </div>
             <div class="pull-left info">
                 <p>{{orgProfile.name}}</p>

src/app/views/userLayout.html

@@ -22,7 +22,7 @@
     <section class="sidebar">
         <div class="user-panel">
             <div class="pull-left image">
-                <letter-avatar data="{{name}}"></letter-avatar>
+                <letter-avatar data="{{name}}" avclass="img-responsive"></letter-avatar>
             </div>
             <div class="pull-left info">
                 <p>{{name}}</p>
@@ -86,12 +86,17 @@
             <li class="header">
                 ORGANIZATIONS
             </li>
+        </ul>
+        <div class="subsection">
+            <ul class="list-inline">
                 <li ng-repeat="org in orgs | orderBy: ['name']">
                     <a href="javascript:void(0)" ng-click="viewOrganization(org.id)">
-                    <i class="fa fa-circle-o fa-fw"></i> <span>{{org.name}}</span>
+                        <letter-avatar data="{{org.name}}" avclass="img-responsive img-rounded" round="false"
+                                       avheight="40" avwidth="40"></letter-avatar>
                     </a>
                 </li>
             </ul>
+        </div>
     </section>
 </aside>
 

src/less/vault.less

@@ -32,6 +32,10 @@ h1, h2, h3, h4, h5, h6,
     padding-right: 15px;
 }
 
+.sidebar-menu li a {
+    padding-left: 12px;
+}
+
 .sidebar-form .form-group {
     margin-bottom: 0;
 
@@ -40,6 +44,14 @@ h1, h2, h3, h4, h5, h6,
     }
 }
 
+.sidebar .subsection {
+    padding: 10px;
+}
+
+.sidebar-collapse .sidebar .list-inline li {
+    padding-right: 0;
+}
+
 form div.validation-errors ul {
     margin-bottom: 0;
     padding-left: 20px;