From 3428d82b26bf0d1e9362af1613dfd10b7de62ed9 Mon Sep 17 00:00:00 2001 From: Nathan Gray Date: Fri, 1 Apr 2016 15:12:27 +0000 Subject: [PATCH] New previous, next & check icons Fix calendar sidebox previous & next buttons move when clicked --- calendar/js/app.js | 58 ++++++++++++++-------------- calendar/templates/mobile/app.css | 6 +-- calendar/templates/pixelegg/app.css | 6 +-- calendar/templates/pixelegg/app.less | 4 +- pixelegg/css/mobile.css | 4 +- pixelegg/css/pixelegg.css | 4 +- pixelegg/images/check.svg | 10 +++++ pixelegg/images/next.svg | 15 +++++++ pixelegg/images/previous.svg | 15 +++++++ pixelegg/less/etemplate2.less | 4 +- pixelegg/mobile/fw_mobile.css | 4 +- 11 files changed, 86 insertions(+), 44 deletions(-) create mode 100644 pixelegg/images/check.svg create mode 100644 pixelegg/images/next.svg create mode 100644 pixelegg/images/previous.svg diff --git a/calendar/js/app.js b/calendar/js/app.js index 4d1039394e..298764cb2f 100644 --- a/calendar/js/app.js +++ b/calendar/js/app.js @@ -3023,6 +3023,33 @@ app.classes.calendar = (function(){ "use strict"; return AppJS.extend( var date_widget = this.sidebox_et2.getWidgetById('date'); if(date_widget) { + // Dynamic resize of sidebox calendar to fill sidebox + var preferred_width = $j('#calendar-sidebox_date .ui-datepicker-inline').outerWidth(); + var font_ratio = 12 / parseFloat($j('#calendar-sidebox_date .ui-datepicker-inline').css('font-size')); + var calendar_resize = function() { + try { + var percent = 1+(($j(date_widget.getDOMNode()).width() - preferred_width) / preferred_width); + percent *= font_ratio; + $j('#calendar-sidebox_date .ui-datepicker-inline') + .css('font-size',(percent*100)+'%'); + + // Position go and today + var buttons = $j('#calendar-sidebox_date .ui-datepicker-header a span'); + if(today.length && go_button.length) + { + go_button.position({my: 'left+15px center', at: 'right center-1',of: $j('#calendar-sidebox_date .ui-datepicker-year')}); + today.css({ + 'left': (buttons.first().offset().left + buttons.last().offset().left)/2 - Math.ceil(today.outerWidth(true)/2), + 'top': go_button.css('top') + }); + buttons.position({my: 'center', at: 'center', of: go_button}) + .css('left', ''); + } + } catch (e){ + // Resize didn't work + } + }; + var datepicker = date_widget.input_date.datepicker("option", { showButtonPanel: false, onChangeMonthYear: function(year, month, inst) @@ -3039,6 +3066,7 @@ app.classes.calendar = (function(){ "use strict"; return AppJS.extend( temp_date.setUTCMinutes(temp_date.getUTCMinutes() - temp_date.getTimezoneOffset()); go_button.btn.attr('data-date', temp_date.toJSON()); } + window.setTimeout(calendar_resize,0); }, // Mark holidays beforeShowDay: function (date) @@ -3129,36 +3157,10 @@ app.classes.calendar = (function(){ "use strict"; return AppJS.extend( go_button.attr('data-date', temp_date.toJSON()); } - - // Dynamic resize of sidebox calendar to fill sidebox - var preferred_width = $j('#calendar-sidebox_date .ui-datepicker-inline').outerWidth(); - var font_ratio = 12 / parseFloat($j('#calendar-sidebox_date .ui-datepicker-inline').css('font-size')); - $j(window).on('resize.calendar'+date_widget.dom_id, function() { - try { - var percent = 1+(($j(date_widget.getDOMNode()).width() - preferred_width) / preferred_width); - percent *= font_ratio; - $j('#calendar-sidebox_date .ui-datepicker-inline') - .css('font-size',(percent*100)+'%'); - - // Position go and today - var buttons = $j('#calendar-sidebox_date .ui-datepicker-header a span'); - if(today.length && go_button.length) - { - go_button.position({my: 'left+15px center', at: 'right center-1',of: $j('#calendar-sidebox_date .ui-datepicker-year')}); - today.css({ - 'left': (buttons.first().offset().left + buttons.last().offset().left)/2 - Math.ceil(today.outerWidth(true)/2), - 'top': go_button.css('top') - }); - buttons.position({my: 'center', at: 'center', of: go_button}) - .css('left', ''); - } - } catch (e){ - // Resize didn't work - } - }).trigger('resize'); - } + $j(window).on('resize.calendar'+date_widget.dom_id,calendar_resize).trigger('resize'); + // Avoid wrapping owner icons if user has group + search var button = $j('#calendar-sidebox_owner ~ span.et2_clickable'); if(button.length == 1) diff --git a/calendar/templates/mobile/app.css b/calendar/templates/mobile/app.css index 504dbb6987..fe1a6d7331 100644 --- a/calendar/templates/mobile/app.css +++ b/calendar/templates/mobile/app.css @@ -141,7 +141,7 @@ form[id^="tracker-"] .dialogHeadbar { * @package calendar * @version $Id$ */ -/* $Id: app.css 55588 2016-03-31 22:44:00Z nathangray $ */ +/* $Id: app.css 55589 2016-03-31 22:58:04Z nathangray $ */ /*Media print classes*/ @media print { #calendar-view.et2_container, @@ -2654,7 +2654,7 @@ div#calendar-container div.calendar table tbody tr.rowhilite td { #calendar-sidebox_header_go { width: 20px; height: 20px; - background-image: url('../../../pixelegg/images/check.png'); + background-image: url('../../../pixelegg/images/check.svg'); text-indent: 140%; border: none; border-radius: 0px; @@ -2667,7 +2667,7 @@ div#calendar-container div.calendar table tbody tr.rowhilite td { #calendar-sidebox_header_today { width: 20px; height: 20px; - background-image: url('../../../pixelegg/images/bullet.png'); + background-image: url('../../../pixelegg/images/bullet.svg'); text-indent: 140%; border: none; border-radius: 0px; diff --git a/calendar/templates/pixelegg/app.css b/calendar/templates/pixelegg/app.css index 27581361ef..cb134a70b2 100755 --- a/calendar/templates/pixelegg/app.css +++ b/calendar/templates/pixelegg/app.css @@ -11,7 +11,7 @@ * @package calendar * @version $Id$ */ -/* $Id: app.css 55588 2016-03-31 22:44:00Z nathangray $ */ +/* $Id: app.css 55589 2016-03-31 22:58:04Z nathangray $ */ /*Media print classes*/ @media print { #calendar-view.et2_container, @@ -2524,7 +2524,7 @@ div#calendar-container div.calendar table tbody tr.rowhilite td { #calendar-sidebox_header_go { width: 20px; height: 20px; - background-image: url('../../../pixelegg/images/check.png'); + background-image: url('../../../pixelegg/images/check.svg'); text-indent: 140%; border: none; border-radius: 0px; @@ -2537,7 +2537,7 @@ div#calendar-container div.calendar table tbody tr.rowhilite td { #calendar-sidebox_header_today { width: 20px; height: 20px; - background-image: url('../../../pixelegg/images/bullet.png'); + background-image: url('../../../pixelegg/images/bullet.svg'); text-indent: 140%; border: none; border-radius: 0px; diff --git a/calendar/templates/pixelegg/app.less b/calendar/templates/pixelegg/app.less index f18ed3f2ee..60618cef4e 100755 --- a/calendar/templates/pixelegg/app.less +++ b/calendar/templates/pixelegg/app.less @@ -1280,7 +1280,7 @@ div#calendar-container { width: 20px; height: 20px; - background-image: url('../../../pixelegg/images/check.png'); + background-image: url('../../../pixelegg/images/check.svg'); text-indent: 140%; border: none; border-radius: 0px; @@ -1294,7 +1294,7 @@ div#calendar-container { width: 20px; height: 20px; - background-image: url('../../../pixelegg/images/bullet.png'); + background-image: url('../../../pixelegg/images/bullet.svg'); text-indent: 140%; border: none; border-radius: 0px; diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css index b3ed4bb89b..24a659c8e4 100644 --- a/pixelegg/css/mobile.css +++ b/pixelegg/css/mobile.css @@ -230,12 +230,12 @@ border: none; } .ui-datepicker .ui-datepicker-prev span { - background-image: url(../images/back.png) !important; + background-image: url(../images/previous.svg) !important; background-position: 0px 0px !important; background-size: contain; } .ui-datepicker .ui-datepicker-next span { - background-image: url(../images/forward.png) !important; + background-image: url(../images/next.svg) !important; background-position: 0px 0px !important; background-size: contain; } diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css index 87d268da31..3bd3bfff23 100644 --- a/pixelegg/css/pixelegg.css +++ b/pixelegg/css/pixelegg.css @@ -219,12 +219,12 @@ border: none; } .ui-datepicker .ui-datepicker-prev span { - background-image: url(../images/back.png) !important; + background-image: url(../images/previous.svg) !important; background-position: 0px 0px !important; background-size: contain; } .ui-datepicker .ui-datepicker-next span { - background-image: url(../images/forward.png) !important; + background-image: url(../images/next.svg) !important; background-position: 0px 0px !important; background-size: contain; } diff --git a/pixelegg/images/check.svg b/pixelegg/images/check.svg new file mode 100644 index 0000000000..722e216721 --- /dev/null +++ b/pixelegg/images/check.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/pixelegg/images/next.svg b/pixelegg/images/next.svg new file mode 100644 index 0000000000..414cc37e5b --- /dev/null +++ b/pixelegg/images/next.svg @@ -0,0 +1,15 @@ + + + + + + + + + + diff --git a/pixelegg/images/previous.svg b/pixelegg/images/previous.svg new file mode 100644 index 0000000000..e6d2020fff --- /dev/null +++ b/pixelegg/images/previous.svg @@ -0,0 +1,15 @@ + + + + + + + + + + diff --git a/pixelegg/less/etemplate2.less b/pixelegg/less/etemplate2.less index 83ff5c15c1..d43d17b9bf 100755 --- a/pixelegg/less/etemplate2.less +++ b/pixelegg/less/etemplate2.less @@ -179,12 +179,12 @@ span.et2_date span { } } .ui-datepicker .ui-datepicker-prev span { - background-image: url(../images/back.png) !important; + background-image: url(../images/previous.svg) !important; background-position: 0px 0px !important; background-size: contain; } .ui-datepicker .ui-datepicker-next span { - background-image: url(../images/forward.png) !important; + background-image: url(../images/next.svg) !important; background-position: 0px 0px !important; background-size: contain; diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css index e89c57ece4..2c27240bf5 100644 --- a/pixelegg/mobile/fw_mobile.css +++ b/pixelegg/mobile/fw_mobile.css @@ -241,12 +241,12 @@ border: none; } .ui-datepicker .ui-datepicker-prev span { - background-image: url(../images/back.png) !important; + background-image: url(../images/previous.svg) !important; background-position: 0px 0px !important; background-size: contain; } .ui-datepicker .ui-datepicker-next span { - background-image: url(../images/forward.png) !important; + background-image: url(../images/next.svg) !important; background-position: 0px 0px !important; background-size: contain; }