From b637b5aeb8c9ade36293949076be24f2f6e18c8d Mon Sep 17 00:00:00 2001 From: stefanorigano Date: Wed, 2 May 2018 13:45:44 +0200 Subject: [PATCH] [REF] hr_attendance: revamp design Improve mobile layout, uniform templates design, simplify and revamp SCSS Related to task #1822709 Closes #24645 --- .../hr_attendance/static/src/img/barcode.png | Bin 0 -> 1292 bytes .../static/src/js/greeting_message.js | 2 +- .../static/src/js/kiosk_confirm.js | 4 +- .../hr_attendance/static/src/js/kiosk_mode.js | 4 +- .../static/src/scss/hr_attendance.scss | 289 +++++++++--------- .../static/src/xml/attendance.xml | 153 +++++----- 6 files changed, 237 insertions(+), 215 deletions(-) create mode 100644 addons/hr_attendance/static/src/img/barcode.png diff --git a/addons/hr_attendance/static/src/img/barcode.png b/addons/hr_attendance/static/src/img/barcode.png new file mode 100644 index 0000000000000000000000000000000000000000..2e9d2f4bc0487f42fd9848498f821f3422c36266 GIT binary patch literal 1292 zcmeAS@N?(olHy`uVBq!ia0y~yV7vjub{s4~k(RS3dw~>FlDE4H!~gdFGy8!&&H|6f zVg?3oVGw3ym^DWND9B#o>FdgVpOb}`U()UAH3bF+mbsoTjv*Dd-d?x&xKb!{{GtED z2Le|fT(}|9cwtiTEKPHd)EF35K@1qf&bEaz4cUwG`;v;_wh9akM(xNzY#122s& z0$c5aCI+~b^)?;8`}|#9d5Z1%{5|jYK0STcyTo0lTRCv`!5`DCt_vT}z9-lDlxzJr zxA-lWf_lU@T^1GR+W9|h`s0Ly=5qZzk37FW^VY2HkJIX+mfnc|ULF3}>*)2{kHd;y z=Gm?I^pI%NWW809+A;!WD!2&uQVgfn}5g_ca0fZY89D$he zU=t8CHL-#)3pWT4w1z?IESw<)3b8>Pyf?~j&D!-(Vc(TM^QLyK_Y1Aun=zmJR;Ac; zZeVIOPu}!E`n>8npCfy(Tr29{e^z(Y0@JSyV)#~xnUd349D7?~dDmBpV8C&la$o4c}D|8Z4Op~<)9=WP3> z>+?53@=hNAQt{i9yAPk-8{c}rUU#p>#F!XQ{d<0TdP~ILtB9vx?w)+|=<=6G-A^8! z`Q_2$Cyz>mt6#5Ly#4I*C;mwv>8&88J0;<7%eI)J%?x@z6WBT>N>m|EoK<)x^Fp1_o{I59Zs| W?K=ehnXQ0j7lWs(pUXO@geCy7 1000*60*60*12){ - this.$('.o_hr_attendance_warning_message').append(_t("Warning! Last check in was over 12 hours ago.
If this isn't right, please contact Human Resources.")); + this.$('.o_hr_attendance_warning_message').show().append(_t("Warning! Last check in was over 12 hours ago.
If this isn't right, please contact Human Resource staff")); clearTimeout(this.return_to_main_menu); this.activeBarcode = false; } else if(now - last_check_in_date > 1000*60*60*8){ diff --git a/addons/hr_attendance/static/src/js/kiosk_confirm.js b/addons/hr_attendance/static/src/js/kiosk_confirm.js index fc976c20b2a..4db5eb90b0a 100644 --- a/addons/hr_attendance/static/src/js/kiosk_confirm.js +++ b/addons/hr_attendance/static/src/js/kiosk_confirm.js @@ -76,9 +76,9 @@ var KioskConfirm = AbstractAction.extend({ }, start_clock: function () { - this.clock_start = setInterval(function() {this.$(".o_hr_attendance_clock").text(new Date().toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit'}));}, 500); + this.clock_start = setInterval(function() {this.$(".o_hr_attendance_clock").text(new Date().toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit', second:'2-digit'}));}, 500); // First clock refresh before interval to avoid delay - this.$(".o_hr_attendance_clock").text(new Date().toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit'})); + this.$(".o_hr_attendance_clock").show().text(new Date().toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit', second:'2-digit'})); }, destroy: function () { diff --git a/addons/hr_attendance/static/src/js/kiosk_mode.js b/addons/hr_attendance/static/src/js/kiosk_mode.js index 59bd0c3f71e..9b7f5b7f7cd 100644 --- a/addons/hr_attendance/static/src/js/kiosk_mode.js +++ b/addons/hr_attendance/static/src/js/kiosk_mode.js @@ -48,9 +48,9 @@ var KioskMode = AbstractAction.extend({ }, start_clock: function() { - this.clock_start = setInterval(function() {this.$(".o_hr_attendance_clock").text(new Date().toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit'}));}, 500); + this.clock_start = setInterval(function() {this.$(".o_hr_attendance_clock").text(new Date().toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit', second:'2-digit'}));}, 500); // First clock refresh before interval to avoid delay - this.$(".o_hr_attendance_clock").text(new Date().toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit'})); + this.$(".o_hr_attendance_clock").show().text(new Date().toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit', second:'2-digit'})); }, destroy: function () { diff --git a/addons/hr_attendance/static/src/scss/hr_attendance.scss b/addons/hr_attendance/static/src/scss/hr_attendance.scss index d54b105ca1c..ff61632b45a 100644 --- a/addons/hr_attendance/static/src/scss/hr_attendance.scss +++ b/addons/hr_attendance/static/src/scss/hr_attendance.scss @@ -1,12 +1,3 @@ -.o_hr_attendance_sign_in_out_icon { - font-size: 15em; - cursor: pointer; - margin: 20px 0px 20px 0px; - padding: 0px 15px 0px 15px; - border-radius: 10%; - box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6); -} - .o_kanban_view #oe_hr_attendance_status { font-size: 1.2em; @@ -23,68 +14,168 @@ } } -.o_hr_attendance_back_button { - box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6); - font-size: 3em; - border-radius: 50%; - height: 1.7em; - width: 1.7em; - position: absolute; - left: auto; - right: 0px; - top: 0px; - bottom: auto; +.o_hr_attendance_kiosk_backdrop { + @include o-position-absolute(0,0,0,0); + background-color: fade-out(black, 0.7); +} + +.o_hr_attendance_clock { + display: none; + position: relative; + width: 100%; + padding: 0.5em; + background-color: fade-out(black, 0.7); + font: normal 1.2em $font-family-monospace; + color: white; @media (min-width: $screen-sm-min) { - transform: translate(50%, -50%); + @include o-position-absolute(20px, 20px); + width: auto; + padding: 3px 10px 3px 10px; + border-radius: 3px; + font-size: 1.5em; } } -.o_hr_attendance_validation { - color: green; -} - -.o_hr_attendance_btn-round-corners { - border-radius: 10%; -} - -.o_hr_attendance_pin_pad_border { - margin: 10px 0px 10px 0px; -} - -.o_hr_attendance_PINbox { - background: white; - border: 1px solid #d5d5d5; - text-align: center; - margin: 5px 0px 5px 0px; -} - .o_hr_attendance_kiosk_mode_container { @include o-flex-display; @include o-flex-flow(column, nowrap); - @include o-justify-content(center); + @include o-justify-content(flex-start); @include o-align-items(center); + @include o-position-absolute(0, 0, 0, 0); @media (min-width: $screen-sm-min) { - @include o-position-absolute(0, 0, 0, 0); + @include o-justify-content(center); } } -.o_hr_attendance_warning_message { - color: $brand-warning; -} -.o_hr_attendance_random_message { - font-style: italic; -} .o_hr_attendance_kiosk_mode { width: 100%; text-align: center; position: relative; - background-color: #fff; - padding: 2em; + background-color: fade-out(white, 0.1); - h1 { - margin: 0 0 2rem 0; + @media (max-width: $screen-xs-max) { + overflow: hidden; + padding: 0 2em 2em; + @include o-flex(1,0,auto); + } + + @media (min-width: $screen-sm-min) { + padding: 2em 4em; + width: auto; + max-width: 550px; + width: 100%; + border-radius: 0.2em; + font-size: 1.2em; + @include o-animation(fadeInDownSmall, .3s); + } + + .o_hr_attendance_kiosk_welcome_row { + @media (min-width: $screen-sm-min){ + @include o-flex-display(); + @include o-align-items(center); + } + @media (max-width: $screen-sm-max){ + > div { + margin-bottom: 20px; + } + } + + img { + max-width: 80px; + } + } + + .o_hr_attendance_sign_in_out_icon { + cursor: pointer; + margin: 0.1em 0 0.1em; + padding: 0.15em 0.3em; + border-radius: .1em; + box-shadow: inset 0 -3px 0 fade-out(black, 0.7); + + &.btn-default:hover { + color: $o-brand-optional; + } + } + + .o_hr_attendance_back_button { + .visible-xs{ + background: $gray-lighter; + margin: 0 -2em; + .fa { + @include o-position-absolute(0.75em); + margin-left: -1.5em + } + } + + .hidden-xs.btn-default { + @include o-transform(translate(-50%, -50%)); + @include o-position-absolute(0, $left:0); + @include square(2em); + border-radius: 50%; + padding-left: 14px; + line-height: 1.5em; + text-align: left; + color: $text-color; + font-size: 1.6em; + z-index: 1; + box-shadow: inset 0 0 0 1px fade-out(black, 0.8); + } + } + + .btn-default{ + box-shadow: inset 0 0 0 1px fade-out(black, 0.9); + color: $headings-color; + } + + .o_hr_attendance_user_badge { + @include o-skew-gradient(#77717e, #c9a8a9); + + img { + background: white; + border: 1px solid #d7d7d7; + @include square(50px); + } + + @media (max-width: $screen-xs-max) { + margin: 1em -2em 0; + background: transparent; + } + + @media (min-width: $screen-sm-min) { + margin: 0; + height: 90px; + border-radius: .2em .2em 0 0; + border-top: 1px solid fade-out(white, 0.8); + @include o-position-absolute(auto, 0, 100%, 0); + @include o-transform(translateY(3px)); + + img { + @include square(80px); + @include o-transform(translateX(-50%)translateY(35%)); + @include o-position-absolute($bottom: 0); + } + } + + + h1 { + margin-top: .4em; + } + } + + .o_hr_attendance_pin_pad [class*="col-"] { + padding: 4px; + + .o_hr_attendance_PINbox { + font-size: 2em; + border: none; + padding: 0 $padding-large-horizontal; + background: fade-out(white, 0.6); + } + } + + .o_hr_attendance_random_message { + font-style: italic; } .message_demo_barcodes { @@ -92,9 +183,9 @@ margin: 0; } - img { + img.o_hr_attendance_kiosk_company_image { overflow:hidden; // prevent margins colapsing with h1 - margin-top: 3rem; + margin: 1rem 0 4rem; width: 200px; } @@ -107,92 +198,10 @@ font-size: 1.2em; margin-bottom: 2rem; width: 100%; - } + font-weight: 400; - > button:last-child { - margin-bottom: 0; - } - - @media (min-width: $screen-sm-min) { - flex: 0 0 auto; - width: 550px; - border-radius: 10px; - background-color: rgba(255,255,255,0.8); - box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6); - font-size: 1.2em; - padding: 3em; - } -} - -.o_hr_attendance_clock { - font-size: 1.5em; - text-align: center; - position: absolute; - top: 20px; - right: 20px; - - @media (min-width: $screen-sm-min) { - flex: 0 0 auto; - border-radius: 3px; - background-color: rgba(255,255,255,0.5); - padding: 3px 10px 3px 10px; - } -} - -.o_hr_attendance_message_container { - @include o-flex-display; - @include o-flex-flow(column, nowrap); - @include o-justify-content(center); - @include o-align-items(center); - - @media (min-width: $screen-sm-min) { - @include o-position-absolute(0, 0, 0, 0); - } -} - -.o_hr_attendance_message { - width: 100%; - text-align: center; - background-color: #fff; - padding: 2em; - - h1 { - margin: 0 0 2rem 0; - } - - .message_demo_barcodes { - font-size: 0.9em; - margin: 0; - } - - img { - overflow:hidden; // prevent margins colapsing with h1 - margin-top: 3rem; - width: 200px; - } - - p { - text-align: left; - margin: 3rem 0; - } - - > button { - font-size: 1.2em; - margin-bottom: 2rem; - width: 100%; - } - - > button:last-child { - margin-bottom: 0; - } - - @media (min-width: $screen-sm-min) { - flex: 0 0 auto; - width: 550px; - border-radius: 10px; - background-color: rgba(255,255,255,0.8); - box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6); - font-size: 1.2em; - padding: 3em; + &:last-child { + margin-bottom: 0; + } } } diff --git a/addons/hr_attendance/static/src/xml/attendance.xml b/addons/hr_attendance/static/src/xml/attendance.xml index 74c9f91a001..5c334bcfa4c 100644 --- a/addons/hr_attendance/static/src/xml/attendance.xml +++ b/addons/hr_attendance/static/src/xml/attendance.xml @@ -7,32 +7,45 @@
+ +
-

Welcome to

- Company Logo -

Scan your badge

-

or

- +

Welcome to

+ Company Logo +
+
+ +
Scan your badge
+
+
+

or

+
+
+ +
+
-
+ +
+ -

Welcome

- -

Click to check in

-