Merge pull request #14 from takenet/feature/avatar-separation

Fix avatar border radius and split component "AvatarArray" to a new "Avatar"

Author: ceifa

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "start": "./node_modules/.bin/webpack-dev-server --port 3000",
     "build": "./node_modules/.bin/webpack",
+    "watch": "./node_modules/.bin/webpack --watch --progress",
     "commit": "./node_modules/.bin/git-cz",
     "semantic-release": "semantic-release --prepare && npm publish && semantic-release post"
   },

src/components/avatar/Avatar.component.ts

@@ -0,0 +1,14 @@
+import './Avatar.scss';
+import template from './AvatarView.html';
+import angular from 'core/angular';
+
+export const AvatarComponent = angular
+    .module('blipComponents.avatar', [])
+    .component('avatar', {
+        controllerAs: '$ctrl',
+        bindings: {
+            user: '<?'
+        },
+        template,
+    })
+    .name;

…/components/avatarArray/AvatarArray.scss src/components/avatar/Avatar.scsssrc/components/avatarArray/AvatarArray.scss renamed to src/components/avatar/Avatar.scss src/components/avatarArray/AvatarArray.scss renamed to src/components/avatar/Avatar.scss

@@ -1,5 +1,5 @@
-.avatar-array {
-    & > tooltip {
+.avatar {
+    tooltip {
         width: 55px;
         height: 55px;
         cursor: default;
@@ -21,25 +21,10 @@
         img {
             width: 55px;
             height: 55px;
+            border-radius: 50%;
         }
     }
-    // & > span {
-    //     cursor: default;
-    //     padding: 2px;
-    //     height: 55px;
-    //     width: 55px;
-    //     // border: 1px solid red;
-    //     background: white;
-    //     border-radius: 50%;
-    //     position: absolute;
-    //     left: 0;
-    //     transition: left 1s linear;
 
-    //     img {
-    //         width: 55px;
-    //         height: 55px;
-    //     }
-    // }
     letter-avatar {
         margin: 0;
         height: 50px;

src/components/avatar/AvatarView.html

@@ -0,0 +1,6 @@
+<span class="avatar">
+    <span tooltips tooltip-template="{{$ctrl.$ctrl.user.tooltipName}}" tooltip-side="bottom" tooltip-class="small">
+        <img ng-if="$ctrl.user.photoUri" ng-src="{{$ctrl.user.photoUri}}" alt="{{$ctrl.user.fullName}}">
+        <letter-avatar ng-if="!$ctrl.user.photoUri" class="account-editing-avatar ml4" text="$ctrl.user.fullName"></letter-avatar>
+    </span>
+</span>

src/components/avatarArray/AvatarArray.component.ts

@@ -1,4 +1,3 @@
-import './AvatarArray.scss';
 import template from './AvatarArrayView.html';
 import angular from 'core/angular';
 
@@ -10,7 +9,7 @@ class AvatarArray {
         this.$scope.$watch('$ctrl.members', (newValue, oldValue) => {
             setTimeout(() => {
                 let array = Array.from(
-                    document.querySelectorAll('.avatar-array > tooltip'),
+                    document.querySelectorAll('.avatar-array tooltip'),
                 ) as Element[];
                 if (this.limit) {
                     array = array.slice(0, this.limit);

src/components/avatarArray/AvatarArrayView.html

@@ -1,6 +1,3 @@
 <div class="avatar-array">
-    <span tooltips tooltip-template="{{member.tooltipName}}" tooltip-side="bottom" tooltip-class="small" ng-repeat="member in $ctrl.members">
-        <img ng-if="member.photoUri" ng-src="{{member.photoUri}}" alt="{{member.fullName}}">
-        <letter-avatar ng-if="!member.photoUri" class="account-editing-avatar ml4" text="member.fullName"></letter-avatar>
-    </span>
+    <avatar user="member" ng-repeat="member in $ctrl.members"></avatar>
 </div>

src/components/index.ts

@@ -1,6 +1,7 @@
 import angular from 'core/angular';
 import { accordion } from './accordion';
 import { AnalysisInfoComponent } from './analysisInfo/analysisInfo.component';
+import { AvatarComponent } from './avatar/avatar.component';
 import { AvatarArrayComponent } from './avatarArray/avatarArray.component';
 import { ActionsBarComponent } from './actionsBar/actionsBar.component';
 import { AddRemoveComponent } from './addRemove/addRemove.component';
@@ -74,6 +75,7 @@ export const ComponentsModule = angular
     .module('ComponentsModule', [
         accordion,
         AnalysisInfoComponent,
+        AvatarComponent,
         AvatarArrayComponent,
         ActionsBarComponent,
         AddRemoveComponent,