From 6568c0667a089980be1bd02f71de47945f57bb22 Mon Sep 17 00:00:00 2001 From: nathangray Date: Tue, 6 Sep 2016 09:44:52 -0600 Subject: [PATCH] Move week view's user label to span the whole week, just above the all day events --- calendar/js/et2_widget_daycol.js | 4 ++++ calendar/templates/default/app.css | 30 +++++++++++++++++-------- calendar/templates/pixelegg/app.css | 33 ++++++++++++++++------------ calendar/templates/pixelegg/app.less | 6 ----- 4 files changed, 44 insertions(+), 29 deletions(-) diff --git a/calendar/js/et2_widget_daycol.js b/calendar/js/et2_widget_daycol.js index ad75d5aba7..4bcb02ab3e 100644 --- a/calendar/js/et2_widget_daycol.js +++ b/calendar/js/et2_widget_daycol.js @@ -70,6 +70,9 @@ var et2_calendar_daycol = (function(){ "use strict"; return et2_valueWidget.exte .css('left', this.options.left); this.title = jQuery(document.createElement('div')) .appendTo(this.header); + this.user_spacer = jQuery(document.createElement('div')) + .addClass("calendar_calDayColHeader_spacer") + .appendTo(this.header); this.all_day = jQuery(document.createElement('div')) .addClass("calendar_calDayColAllDay") .css('max-height', (egw.preference('limit_all_day_lines', 'calendar') || 3 ) * 1.4 + 'em') @@ -126,6 +129,7 @@ var et2_calendar_daycol = (function(){ "use strict"; return et2_valueWidget.exte this.div = null; this.header = null; this.title = null; + this.user_spacer = null; // date_helper has no parent, so we must explicitly remove it this.date_helper.destroy(); diff --git a/calendar/templates/default/app.css b/calendar/templates/default/app.css index c10dd3fb0b..d73e50134a 100644 --- a/calendar/templates/default/app.css +++ b/calendar/templates/default/app.css @@ -325,16 +325,27 @@ Hide subsequent headers in week view with non-consolidated owners #calendar-view_view.hideDayColHeader tr:not(:first-of-type) .calendar_calGridHeader .calendar_calDayColHeader > div[data-date] { display:none; } +#calendar-view_view.hideDayColHeader tr:first-of-type .calendar_calGridHeader > span.et2_label +{ + position: absolute; + top: 2em; +} +#calendar-view_view.hideDayColHeader tr:first-of-type .calendar_calGridHeader .calendar_calDayColHeader_spacer +{ + height: ~"calc(1.5em + 5px)"; +} #calendar-view_view.hideDayColHeader tr .calendar_calGridHeader > span.et2_label { white-space:nowrap; - text-overflow: ellipsis; - overflow: hidden; -} -#calendar-view_view.hideDayColHeader tr .calendar_calGridHeader > span.et2_label:hover { - overflow: visible; - width: auto; - background-color: inherit; - z-index: 100; + display: block; + position: static; + width: ~"calc(100% - 58px)"; + margin-left: 58px; + color: white; + background-color: #0C5DA5; + text-align: center; + line-height: 1.5em; + font-size: 14px; + z-index: 35; } /* single row in the time-line you dont need to set a bgcolor, but you can @@ -545,6 +556,8 @@ Hide subsequent headers in week view with non-consolidated owners line-height: 27px; width: 58px; text-align: center; + position: absolute; + top: 0px; } .calendar_calGridHeader > span.et2_label { @@ -734,7 +747,6 @@ Hide subsequent headers in week view with non-consolidated owners } .calendar_calDayColHeader .calendar_calEvent .calendar_calEventBody { white-space: nowrap; - background-color: #f0f0f0; } .calendar_calEventTooltip{ padding-left: 6px; diff --git a/calendar/templates/pixelegg/app.css b/calendar/templates/pixelegg/app.css index 9a2aba3a51..7a31ea00a4 100755 --- a/calendar/templates/pixelegg/app.css +++ b/calendar/templates/pixelegg/app.css @@ -327,16 +327,25 @@ Hide subsequent headers in week view with non-consolidated owners #calendar-view_view.hideDayColHeader tr:not(:first-of-type) .calendar_calGridHeader .calendar_calDayColHeader > div[data-date] { display: none; } +#calendar-view_view.hideDayColHeader tr:first-of-type .calendar_calGridHeader > span.et2_label { + position: absolute; + top: 2em; +} +#calendar-view_view.hideDayColHeader tr:first-of-type .calendar_calGridHeader .calendar_calDayColHeader_spacer { + height: calc(1.5em + 5px); +} #calendar-view_view.hideDayColHeader tr .calendar_calGridHeader > span.et2_label { white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; -} -#calendar-view_view.hideDayColHeader tr .calendar_calGridHeader > span.et2_label:hover { - overflow: visible; - width: auto; - background-color: inherit; - z-index: 100; + display: block; + position: static; + width: calc(100% - 58px); + margin-left: 58px; + color: white; + background-color: #0C5DA5; + text-align: center; + line-height: 1.5em; + font-size: 14px; + z-index: 35; } /* single row in the time-line you dont need to set a bgcolor, but you can */ @@ -542,6 +551,8 @@ Hide subsequent headers in week view with non-consolidated owners line-height: 27px; width: 58px; text-align: center; + position: absolute; + top: 0px; } .calendar_calGridHeader > span.et2_label { position: absolute; @@ -720,7 +731,6 @@ Hide subsequent headers in week view with non-consolidated owners } .calendar_calDayColHeader .calendar_calEvent .calendar_calEventBody { white-space: nowrap; - background-color: #f0f0f0; } .calendar_calEventTooltip { padding-left: 6px; @@ -2053,11 +2063,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget .calendar_calViewUserNameFirst:after { content: ", "; } -/* header of the time-grid, eg. for the weeks in the month-view (leftmost of the day-col-headers) - */ -.calendar_calGridHeader { - background-color: #f0f0f0; -} /* contains one event: header-row & -body */ .calendar_calEvent { diff --git a/calendar/templates/pixelegg/app.less b/calendar/templates/pixelegg/app.less index e68d85abf3..b3e55e0423 100755 --- a/calendar/templates/pixelegg/app.less +++ b/calendar/templates/pixelegg/app.less @@ -755,12 +755,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget content: ", "; } -/* header of the time-grid, eg. for the weeks in the month-view (leftmost of the day-col-headers) - */ -.calendar_calGridHeader{ - .background_color_10_gray; -} - /* contains one event: header-row & -body */ .calendar_calEvent {