feat: support of retina avatars (#641)

officelifehq · Mar 21, 2021 · 7a380d3 · 7a380d3
1 parent 8040421
commit 7a380d3
Show file tree

Hide file tree

Showing 74 changed files with 345 additions and 159 deletions.
diff --git a/app/Helpers/ImageHelper.php b/app/Helpers/ImageHelper.php
@@ -12,21 +12,29 @@ class ImageHelper
      *
      * @param Employee $employee
      * @param int $width
-     * @return string|null
+     * @return array|null
      */
-    public static function getAvatar(Employee $employee, int $width = null): ?string
+    public static function getAvatar(Employee $employee, int $width = 64): ?array
     {
         if (! $employee->avatar_file_id) {
-            return 'https://ui-avatars.com/api/?name='.$employee->name;
+            return [
+                'normal' => 'https://ui-avatars.com/api/?name='.$employee->name.'&size='.$width,
+                'retina' => 'https://ui-avatars.com/api/?name='.$employee->name.'&size='.($width * 2),
+            ];
         }
 
         if ($width) {
             $url = $employee->picture->cdn_url.'-/scale_crop/'.$width.'x'.$width.'/smart/';
+            $url2x = $employee->picture->cdn_url.'-/scale_crop/'.($width * 2).'x'.($width * 2).'/smart/';
         } else {
             $url = $employee->picture->cdn_url;
+            $url2x = $employee->picture->cdn_url;
         }
 
-        return $url;
+        return [
+            'normal' => $url,
+            'retina' => $url2x,
+        ];
     }
 
     /**

diff --git a/app/Http/Controllers/Company/Adminland/AdminExpenseController.php b/app/Http/Controllers/Company/Adminland/AdminExpenseController.php
@@ -145,7 +145,7 @@ public function search(Request $request, int $companyId): JsonResponse
             $employees->push([
                 'id' => $employee->id,
                 'name' => $employee->name,
-                'avatar' => ImageHelper::getAvatar($employee),
+                'avatar' => ImageHelper::getAvatar($employee, 23),
             ]);
         }
 
@@ -178,7 +178,7 @@ public function addEmployee(Request $request, int $companyId): JsonResponse
             'data' => [
                 'id' => $employee->id,
                 'name' => $employee->name,
-                'avatar' => ImageHelper::getAvatar($employee),
+                'avatar' => ImageHelper::getAvatar($employee, 23),
                 'url' => route('employees.show', [
                     'company' => $loggedCompany,
                     'employee' => $employee,

diff --git a/app/Http/Controllers/Company/Adminland/AdminHardwareController.php b/app/Http/Controllers/Company/Adminland/AdminHardwareController.php
@@ -118,7 +118,7 @@ public function show(Request $request, int $companyId, int $hardwareId)
             'employee' => $hardware->employee ? [
                 'id' => $hardware->employee->id,
                 'name' => $hardware->employee->name,
-                'avatar' => ImageHelper::getAvatar($hardware->employee),
+                'avatar' => ImageHelper::getAvatar($hardware->employee, 22),
             ] : null,
         ];
 

diff --git a/app/Http/Controllers/Company/Employee/EmployeeLogsController.php b/app/Http/Controllers/Company/Employee/EmployeeLogsController.php
@@ -50,7 +50,7 @@ public function index(Request $request, int $companyId, int $employeeId)
         $logsCollection = EmployeeLogViewHelper::list($logs, $employee->company);
 
         return Inertia::render('Employee/Logs/Index', [
-            'employee' => $employee->toObject(),
+            'employee' => EmployeeLogViewHelper::employee($employee),
             'logs' => $logsCollection,
             'notifications' => NotificationHelper::getNotifications(InstanceHelper::getLoggedEmployee()),
             'paginator' => PaginatorHelper::getData($logs),

diff --git a/app/Http/ViewHelpers/Adminland/AdminExpenseViewHelper.php b/app/Http/ViewHelpers/Adminland/AdminExpenseViewHelper.php
@@ -47,7 +47,7 @@ public static function employees($company): ?Collection
             $employeesCollection->push([
                 'id' => $employee->id,
                 'name' => $employee->name,
-                'avatar' => ImageHelper::getAvatar($employee),
+                'avatar' => ImageHelper::getAvatar($employee, 23),
                 'url' => route('employees.show', [
                     'company' => $company,
                     'employee' => $employee,

diff --git a/app/Http/ViewHelpers/Adminland/AdminHardwareViewHelper.php b/app/Http/ViewHelpers/Adminland/AdminHardwareViewHelper.php
@@ -37,7 +37,7 @@ public static function hardware($hardware): ?array
                 'employee' => ($employee) ? [
                     'id' => $employee->id,
                     'name' => $employee->name,
-                    'avatar' => ImageHelper::getAvatar($employee),
+                    'avatar' => ImageHelper::getAvatar($employee, 18),
                 ] : null,
             ]);
         }
@@ -104,7 +104,7 @@ public static function availableHardware($hardware): ?array
                 'employee' => ($employee) ? [
                     'id' => $employee->id,
                     'name' => $employee->name,
-                    'avatar' => ImageHelper::getAvatar($employee),
+                    'avatar' => ImageHelper::getAvatar($employee, 18),
                 ] : null,
             ]);
         }
@@ -151,7 +151,7 @@ public static function lentHardware($hardware): ?array
                 'employee' => ($employee) ? [
                     'id' => $employee->id,
                     'name' => $employee->name,
-                    'avatar' => ImageHelper::getAvatar($employee),
+                    'avatar' => ImageHelper::getAvatar($employee, 18),
                 ] : null,
             ]);
         }

diff --git a/app/Http/ViewHelpers/Company/Project/ProjectDecisionsViewHelper.php b/app/Http/ViewHelpers/Company/Project/ProjectDecisionsViewHelper.php
@@ -20,6 +20,7 @@ public static function decisions(Project $project): Collection
         $company = $project->company;
         $decisions = $project->decisions()
             ->with('deciders')
+            ->with('deciders.picture')
             ->latest()
             ->get();
 

diff --git a/app/Http/ViewHelpers/Company/Project/ProjectTasksViewHelper.php b/app/Http/ViewHelpers/Company/Project/ProjectTasksViewHelper.php
@@ -215,7 +215,7 @@ public static function getTaskFullDetails(ProjectTask $task, Company $company):
             'assignee' => $assignee ? [
                 'id' => $assignee->id,
                 'name' => $assignee->name,
-                'avatar' => ImageHelper::getAvatar($assignee),
+                'avatar' => ImageHelper::getAvatar($assignee, 35),
                 'url' => route('employees.show', [
                     'company' => $company,
                     'employee' => $assignee,

diff --git a/app/Http/ViewHelpers/Dashboard/Manager/DashboardManagerTimesheetViewHelper.php b/app/Http/ViewHelpers/Dashboard/Manager/DashboardManagerTimesheetViewHelper.php
@@ -59,7 +59,7 @@ public static function timesheetApprovals(Employee $manager, Collection $directR
                 $employeesCollection->push([
                     'id' => $employee->id,
                     'name' => $employee->name,
-                    'avatar' => ImageHelper::getAvatar($employee),
+                    'avatar' => ImageHelper::getAvatar($employee, 35),
                     'position' => (! $employee->position) ? null : $employee->position->title,
                     'url' => route('employees.show', [
                         'company' => $company,

diff --git a/app/Http/ViewHelpers/Employee/EmployeeLogViewHelper.php b/app/Http/ViewHelpers/Employee/EmployeeLogViewHelper.php
@@ -24,7 +24,7 @@ public static function list($logs, Company $company): Collection
                 'author' => [
                     'id' => is_null($author) ? null : $author->id,
                     'name' => is_null($author) ? $log->author_name : $author->name,
-                    'avatar' => is_null($author) ? null : ImageHelper::getAvatar($author),
+                    'avatar' => is_null($author) ? null : ImageHelper::getAvatar($author, 34),
                     'url' => is_null($author) ? null : route('employees.show', [
                         'company' => $company,
                         'employee' => $author,
@@ -36,4 +36,16 @@ public static function list($logs, Company $company): Collection
 
         return $logsCollection;
     }
+
+    /**
+     * Information about the employee.
+     */
+    public static function employee(Employee $employee): array
+    {
+        return [
+            'id' => $employee->id,
+            'name' => $employee->name,
+            'avatar' => ImageHelper::getAvatar($employee, 80),
+        ];
+    }
 }
diff --git a/app/Http/ViewHelpers/Employee/EmployeeOneOnOneViewHelper.php b/app/Http/ViewHelpers/Employee/EmployeeOneOnOneViewHelper.php
@@ -64,7 +64,7 @@ public static function list(Collection $oneOnOnes, Employee $employee): SupportC
                 'manager' => [
                     'id' => $oneOnOne->manager->id,
                     'name' => $oneOnOne->manager->name,
-                    'avatar' => ImageHelper::getAvatar($oneOnOne->manager),
+                    'avatar' => ImageHelper::getAvatar($oneOnOne->manager, 22),
                     'url' => route('employees.show', [
                         'company' => $company,
                         'employee' => $oneOnOne->manager,
@@ -140,7 +140,7 @@ public static function details(OneOnOneEntry $entry): array
             'employee' => [
                 'id' => $entry->employee->id,
                 'name' => $entry->employee->name,
-                'avatar' => ImageHelper::getAvatar($entry->employee),
+                'avatar' => ImageHelper::getAvatar($entry->employee, 22),
                 'url' => route('employees.show', [
                     'company' => $company,
                     'employee' => $entry->employee,
@@ -149,7 +149,7 @@ public static function details(OneOnOneEntry $entry): array
             'manager' => [
                 'id' => $entry->manager->id,
                 'name' => $entry->manager->name,
-                'avatar' => ImageHelper::getAvatar($entry->manager),
+                'avatar' => ImageHelper::getAvatar($entry->manager, 22),
                 'url' => route('employees.show', [
                     'company' => $company,
                     'employee' => $entry->manager,

diff --git a/app/Http/ViewHelpers/Employee/EmployeeSurveysViewHelper.php b/app/Http/ViewHelpers/Employee/EmployeeSurveysViewHelper.php
@@ -134,7 +134,7 @@ public static function informationAboutSurvey(int $surveyId): ?array
             $directReportsCollection->push([
                 'id' => $answer->employee->id,
                 'name' => $answer->employee->name,
-                'avatar' => ImageHelper::getAvatar($answer->employee),
+                'avatar' => ImageHelper::getAvatar($answer->employee, 22),
                 'url' => route('employees.show', [
                     'company' => $answer->employee->company_id,
                     'employee' => $answer->employee->id,
@@ -155,7 +155,7 @@ public static function informationAboutSurvey(int $surveyId): ?array
                 'employee' => $answer->reveal_identity_to_manager ? [
                     'id' => $answer->employee->id,
                     'name' => $answer->employee->name,
-                    'avatar' => ImageHelper::getAvatar($answer->employee),
+                    'avatar' => ImageHelper::getAvatar($answer->employee, 22),
                     'url' => route('employees.show', [
                         'company' => $answer->employee->company_id,
                         'employee' => $answer->employee->id,

diff --git a/resources/js/Pages/Adminland/Employee/Partials/EmployeeList.vue b/resources/js/Pages/Adminland/Employee/Partials/EmployeeList.vue
@@ -14,9 +14,8 @@
         v-for="currentEmployee in employees" :key="currentEmployee.id"
         class="flex items-center lh-copy pa3-l pa1 ph0-l bb b--black-10 employee-item"
       >
-        <img loading="lazy" class="w2 h2 w3-ns h3-ns br-100" :src="currentEmployee.avatar" width="64" height="64"
-             alt="avatar"
-        />
+        <avatar :avatar="currentEmployee.avatar" :size="64" :classes="'w2 h2 w3-ns h3-ns br-100'" />
+
         <div class="pl3 flex-auto">
           <span class="db black-70 f4 mb1" :name="currentEmployee.name" :data-cy="currentEmployee.id" :data-invitation-link="currentEmployee.invitation_link">
             {{ currentEmployee.name }} <span v-if="currentEmployee.lock_status" data-cy="lock-status">🔐</span>
@@ -51,7 +50,13 @@
 </template>
 
 <script>
+import Avatar from '@/Shared/Avatar';
+
 export default {
+  components: {
+    Avatar,
+  },
+
   props: {
     employees: {
       type: Array,

diff --git a/resources/js/Pages/Adminland/Expense/Partials/Employees.vue b/resources/js/Pages/Adminland/Expense/Partials/Employees.vue
@@ -73,7 +73,7 @@
     <div v-show="localEmployees.length > 0" class="ba bb-gray mt2 br2 employees-list">
       <div v-for="employee in localEmployees" :key="employee.id" class="pa2 db bb-gray bb bb-gray-hover" data-cy="employees-list">
         <span class="pl3 db relative team-member">
-          <img loading="lazy" :src="employee.avatar" class="br-100 absolute avatar" alt="avatar" />
+          <avatar :avatar="employee.avatar" :size="23" :classes="'br-100 absolute avatar'" />
 
           <inertia-link :href="employee.url">{{ employee.name }}</inertia-link>
 
@@ -96,11 +96,13 @@
 
 <script>
 import Help from '@/Shared/Help';
+import Avatar from '@/Shared/Avatar';
 import TextInput from '@/Shared/TextInput';
 import BallPulseLoader from 'vue-loaders/dist/loaders/ball-pulse';
 
 export default {
   components: {
+    Avatar,
     Help,
     TextInput,
     'ball-pulse-loader': BallPulseLoader.component

diff --git a/resources/js/Pages/Company/Partials/Birthdays.vue b/resources/js/Pages/Company/Partials/Birthdays.vue
@@ -29,7 +29,7 @@
     <div class="br3 bg-white box z-1 pa3 relative">
       <ul v-if="birthdays.length != 0" class="list pl0 ma0">
         <li v-for="birthday in birthdays" :key="birthday.id" class="mb3 pl3 db relative person">
-          <img loading="lazy" :src="birthday.avatar" class="br-100 absolute avatar" alt="avatar" />
+          <avatar :avatar="birthday.avatar" :size="35" :classes="'br-100 absolute avatar'" />
 
           <!-- normal mode -->
           <inertia-link :href="birthday.url" class="mb2">
@@ -52,7 +52,13 @@
 </template>
 
 <script>
+import Avatar from '@/Shared/Avatar';
+
 export default {
+  components: {
+    Avatar,
+  },
+
   props: {
     birthdays: {
       type: Array,

diff --git a/resources/js/Pages/Company/Partials/Employees.vue b/resources/js/Pages/Company/Partials/Employees.vue
@@ -28,8 +28,8 @@
         <p>{{ $t('company.employees_total', { count: statistics.number_of_employees }) }}</p>
 
         <div class="flex items-center relative tr employees">
-          <img v-for="employee in employees.ten_random_employees" :key="employee.id" :src="employee.avatar" alt="avatar" class="br-100 small-avatar pointer"
-               width="32" height="32" @click="navigateTo(employee)"
+          <avatar v-for="employee in employees.ten_random_employees" :key="employee.id" :avatar="employee.avatar" :size="32" :url="employee.url"
+                  :classes="'br-100 small-avatar pointer'"
           />
           <div v-if="employees.number_of_employees_left > 0" class="pl2 f7 more-members relative gray">
             {{ $t('project.menu_other_member', { count: employees.number_of_employees_left }) }}
@@ -50,7 +50,13 @@
 </template>
 
 <script>
+import Avatar from '@/Shared/Avatar';
+
 export default {
+  components: {
+    Avatar,
+  },
+
   props: {
     statistics: {
       type: Object,
@@ -61,11 +67,5 @@ export default {
       default: null,
     },
   },
-
-  methods: {
-    navigateTo(employee) {
-      this.$inertia.visit(employee.url);
-    },
-  },
 };
 </script>
diff --git a/resources/js/Pages/Company/Partials/GuessEmployeeGame.vue b/resources/js/Pages/Company/Partials/GuessEmployeeGame.vue
@@ -83,15 +83,19 @@
           <span>{{ $t('company.guess_employee_game_play_again') }}</span>
         </p>
       </div>
-      <img loading="lazy" class="absolute bottom-0 right-1 avatar" alt="avatar to find" :src="updatedGame.avatar_to_find" width="64"
-           height="64"
-      />
+      <avatar :avatar="updatedGame.avatar_to_find" :size="64" :classes="'absolute bottom-0 right-1 avatar'" />
     </div>
   </div>
 </template>
 
 <script>
+import Avatar from '@/Shared/Avatar';
+
 export default {
+  components: {
+    Avatar,
+  },
+
   props: {
     game: {
       type: Object,

diff --git a/resources/js/Pages/Company/Partials/NewHires.vue b/resources/js/Pages/Company/Partials/NewHires.vue
@@ -29,7 +29,7 @@
     <div class="br3 bg-white box z-1 pa3 relative">
       <ul v-if="hires.length != 0" class="list pl0 ma0">
         <li v-for="hire in hires" :key="hire.id" class="mb3 pl3 db relative person">
-          <img loading="lazy" :src="hire.avatar" class="br-100 absolute avatar" alt="avatar" />
+          <avatar :avatar="hire.avatar" :size="35" :classes="'br-100 absolute avatar'" />
 
           <!-- normal mode -->
           <inertia-link :href="hire.url" class="mb2">
@@ -55,7 +55,13 @@
 </template>
 
 <script>
+import Avatar from '@/Shared/Avatar';
+
 export default {
+  components: {
+    Avatar,
+  },
+
   props: {
     hires: {
       type: Array,

diff --git a/resources/js/Pages/Company/Partials/Teams.vue b/resources/js/Pages/Company/Partials/Teams.vue
@@ -30,8 +30,8 @@
           <inertia-link :href="team.url" class="ma0">{{ team.name }}</inertia-link>
           <div class="flex items-center">
             <div class="di">
-              <img v-for="employee in team.employees" :key="employee.id" :src="employee.avatar" alt="avatar" class="br-100 small-avatar pointer"
-                   width="32" height="32" @click="navigateTo(employee)"
+              <avatar v-for="employee in team.employees" :key="employee.id" :url="employee.url" :avatar="employee.avatar" :size="32"
+                      :classes="'br-100 small-avatar pointer'"
               />
             </div>
 
@@ -50,7 +50,13 @@
 </template>
 
 <script>
+import Avatar from '@/Shared/Avatar';
+
 export default {
+  components: {
+    Avatar,
+  },
+
   props: {
     statistics: {
       type: Object,
@@ -61,11 +67,5 @@ export default {
       default: null,
     },
   },
-
-  methods: {
-    navigateTo(employee) {
-      this.$inertia.visit(employee.url);
-    },
-  },
 };
 </script>