From 09df480c3e7f0a98bf72997c2d71cf0fd9bc710b Mon Sep 17 00:00:00 2001
From: "Chrysanthe (chgo)" <chgo@odoo.com>
Date: Tue, 31 Oct 2023 09:40:46 +0100
Subject: [PATCH] [FIX] hr_attendance: review menu layout

This commit fixes the layout of the hr attendance menu.

Prior to this commit, the layout was a bit cluttered and had a lack of
white space, making it difficult for the user to extract the information
he needed.

To fix these issues, we adapt the design of the menu, mainly by
reorganizing the layout and adding more white space.

With this commit, we were also able to clean the files, reducing the
number of lines needed to achieve a good visual result.

task-3577098

closes odoo/odoo#140454

Signed-off-by: Sofie Gvaladze (sgv) <sgv@odoo.com>
---
 .../attendance_menu/attendance_menu.scss      | 31 +------
 .../attendance_menu/attendance_menu.xml       | 85 ++++++++-----------
 2 files changed, 37 insertions(+), 79 deletions(-)

diff --git a/addons/hr_attendance/static/src/components/attendance_menu/attendance_menu.scss b/addons/hr_attendance/static/src/components/attendance_menu/attendance_menu.scss
index fe4b8c5445c..1b2f5fddd7e 100644
--- a/addons/hr_attendance/static/src/components/attendance_menu/attendance_menu.scss
+++ b/addons/hr_attendance/static/src/components/attendance_menu/attendance_menu.scss
@@ -1,32 +1,3 @@
 .att_container {
-  display: flex;
-  justify-content: normal;
-  align-items: flex-end;
-  min-width: 150px;
-  padding-left: 13px;
-}
-
-.o_hour_att {
-  margin-right: 10px;
-}
-
-.hour_label {
-  display: flex;
-  flex-direction: column;
-  .span{
-    line-height: 1;
-  }
-}
-
-.o_att_menu_container{
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  flex-wrap: wrap;
-  align-content: center;
-}
-
-.o_hr_attendance_systray_check_in_btn{
-  width: 150px;
-  height: 40px;
+    font-variant-numeric: tabular-nums;
 }
diff --git a/addons/hr_attendance/static/src/components/attendance_menu/attendance_menu.xml b/addons/hr_attendance/static/src/components/attendance_menu/attendance_menu.xml
index 86d1b54a46a..28f210449a8 100644
--- a/addons/hr_attendance/static/src/components/attendance_menu/attendance_menu.xml
+++ b/addons/hr_attendance/static/src/components/attendance_menu/attendance_menu.xml
@@ -3,58 +3,45 @@
 
 <t t-name="hr_attendance.attendance_menu" owl="1">
     <t t-if="this.state.isDisplayed">
-        <Dropdown position="'bottom-end'" beforeOpen.bind="searchReadEmployee" menuClass="`p-0 ${ ui.isSmall ? 'start-0 w-100 mh-100 bottom-0 d-flex flex-column' : ''}`">
-        <div class="d-flex flex-column flex-grow-1">
+        <Dropdown position="'bottom-end'" beforeOpen.bind="searchReadEmployee" menuClass="`p-2 pb-3`">
             <t t-set-slot="toggler">
-            <i t-attf-class="fa fa-circle text-{{ this.state.checkedIn ? 'success' : 'warning' }}" role="img" aria-label="Attendance"></i>
-        </t>
-        <t  t-set-slot="default">
-            <div class="o_att_menu_container m-1">
-                <button t-on-click="() => this.onClickSignInOut()" t-attf-class="o_hr_attendance_systray_check_in_btn btn btn-{{ this.state.checkedIn ? 'warning' : 'success' }} align-self-center">
-                    <span class="align-middle text-white" t-if="!this.state.checkedIn">Check IN</span>
-                    <i t-attf-class="fa fa-sign-{{ this.state.checkedIn ? 'out' : 'in' }} align-middle"/>
-                    <span class="align-middle" t-if="this.state.checkedIn">Check OUT</span>
-                </button>
-                <t t-if="this.state.checkedIn">
-                <div class="att_container">
-                    <div class="o_hour_att">
-                        <h2 t-esc="this.lastAttendanceWorkedHours"/>
-                    </div>
-                    <div class="hour_label">
-                        <span>Since</span>
-                        <span><t t-esc="this.lastCheckIn"/></span>
-                    </div>
-                </div>
-                    <t t-if="!this.isFirstAttendance">
-                        <div class="att_container">
-                          <div class="o_hour_att">
-                              <h2 t-esc="this.hoursPreviouslyToday"/>
-                          </div>
-                          <div class="hour_label">
-                            <span>Previously</span>
-                            <span>Today</span>
-                          </div>
+                <i class="fa fa-circle" t-attf-class="text-{{ this.state.checkedIn ? 'success' : 'danger' }}" role="img" aria-label="Attendance"/>
+            </t>
+            <t t-set-slot="default">
+                <div class="o_att_menu_container d-flex flex-column gap-4">
+                    <div class="d-flex flex-column gap-3">
+                        <div t-if="this.state.checkedIn" class="d-flex flex-wrap gap-3">
+                            <div t-if="!this.isFirstAttendance" class="att_container flex-grow-1 flex-shrink-0">
+                                <small class="d-block text-muted">Before <t t-esc="this.lastCheckIn"/></small>
+                                <div t-esc="this.hoursPreviouslyToday" class="fs-3 text-info text-end"/>
+                            </div>
+                            <div class="att_container flex-grow-1 flex-shrink-0">
+                                <small class="d-block text-muted">Since <t t-esc="this.lastCheckIn"/></small>
+                                <div t-esc="this.lastAttendanceWorkedHours" t-attf-class="fs-3 text-info {{ !this.isFirstAttendance ? 'text-end' : '' }}"/>
+                            </div>
+                        </div>
+                        <div t-if="!this.isFirstAttendance"
+                            class="att_container d-flex flex-column"
+                            t-att-class="this.state.checkedIn ? 'p-3 bg-100 rounded' : ''">
+                            <div class="d-flex" t-att-class="this.state.checkedIn ? 'align-items-center justify-content-between' : 'flex-column'">
+                                <small class="text-muted">Total today</small>
+                                <h2 t-esc="this.hoursToday" class="mb-0 fs-2"/>
+                            </div>
+                            <button t-on-click="() => this.onClickSignInOut()" class="flex-basis-100 mt-3" t-attf-class="btn btn-{{ this.state.checkedIn ? 'warning' : 'success' }}">
+                                <span t-if="!this.state.checkedIn">Check in</span>
+                                <span t-else="">Check out</span>
+                                <i t-attf-class="fa fa-sign-{{ this.state.checkedIn ? 'out' : 'in' }} ms-1"/>
+                            </button>
                         </div>
-                    </t>
-                </t>
-                <t t-if="!this.isFirstAttendance">
-                    <t t-if="this.state.checkedIn">
-                        <div class="att_container" style="border-top: 2px solid #dee2e6;"/>
-                    </t>
-                    <div class="att_container">
-                      <div class="o_hour_att">
-                          <h2 t-esc="this.hoursToday"/>
-                      </div>
-                      <div class="hour_label">
-                        <span>Hours</span>
-                        <span>Today</span>
-                      </div>
                     </div>
-                </t>
-            </div>
-        </t>
-        </div>
-    </Dropdown>
+                    <button t-if="this.isFirstAttendance" t-on-click="() => this.onClickSignInOut()" t-attf-class="btn btn-{{ this.state.checkedIn ? 'warning' : 'success' }}">
+                        <span t-if="!this.state.checkedIn">Check in</span>
+                        <span t-else="">Check out</span>
+                        <i t-attf-class="fa fa-sign-{{ this.state.checkedIn ? 'out' : 'in' }} ms-1"/>
+                    </button>
+                </div>
+            </t>
+        </Dropdown>
     </t>
 </t>