From 0085614734a8bbf71fe61cf44ce560b06b2cdd20 Mon Sep 17 00:00:00 2001
From: Gabriel Santos <gabriels@take.net>
Date: Mon, 16 Sep 2019 11:22:40 -0300
Subject: [PATCH] fix(client): fix avatar border and split component

feature/avatar-separation
---
 src/components/avatar/Avatar.component.ts     | 14 +++++++++++++
 .../AvatarArray.scss => avatar/Avatar.scss}   | 21 +++----------------
 src/components/avatar/AvatarView.html         |  6 ++++++
 .../avatarArray/AvatarArray.component.ts      |  3 +--
 .../avatarArray/AvatarArrayView.html          |  5 +----
 src/components/index.ts                       |  2 ++
 6 files changed, 27 insertions(+), 24 deletions(-)
 create mode 100644 src/components/avatar/Avatar.component.ts
 rename src/components/{avatarArray/AvatarArray.scss => avatar/Avatar.scss} (57%)
 create mode 100644 src/components/avatar/AvatarView.html

diff --git a/src/components/avatar/Avatar.component.ts b/src/components/avatar/Avatar.component.ts
new file mode 100644
index 00000000..85e10559
--- /dev/null
+++ b/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;
diff --git a/src/components/avatarArray/AvatarArray.scss b/src/components/avatar/Avatar.scss
similarity index 57%
rename from src/components/avatarArray/AvatarArray.scss
rename to src/components/avatar/Avatar.scss
index 3c5d5827..b01aa498 100644
--- a/src/components/avatarArray/AvatarArray.scss
+++ b/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;
diff --git a/src/components/avatar/AvatarView.html b/src/components/avatar/AvatarView.html
new file mode 100644
index 00000000..4510c494
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/avatarArray/AvatarArray.component.ts b/src/components/avatarArray/AvatarArray.component.ts
index d88bfa24..6b4ab5f7 100644
--- a/src/components/avatarArray/AvatarArray.component.ts
+++ b/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);
diff --git a/src/components/avatarArray/AvatarArrayView.html b/src/components/avatarArray/AvatarArrayView.html
index 2bbaa784..1e45ebf2 100644
--- a/src/components/avatarArray/AvatarArrayView.html
+++ b/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>
diff --git a/src/components/index.ts b/src/components/index.ts
index 52e251e6..29749f95 100644
--- a/src/components/index.ts
+++ b/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,