extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-24 15:49:06 +01:00
Code Issues Packages Projects Releases Wiki Activity

New previous, next & check icons

Browse Source 
Fix calendar sidebox previous & next buttons move when clicked
This commit is contained in:
Nathan Gray 2016-04-01 15:12:27 +00:00
parent 6f1957233a
commit 3428d82b26
11 changed files with 86 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
calendar/js/app.js
View File

@ -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)

6
calendar/templates/mobile/app.css
View File

@ -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;

6
calendar/templates/pixelegg/app.css
View File

@ -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;

4
calendar/templates/pixelegg/app.less
View File

@ -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;

4
pixelegg/css/mobile.css
View File

@ -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;
}

4
pixelegg/css/pixelegg.css
View File

@ -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;
}

10
pixelegg/images/check.svg Normal file
View File

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#616463" stroke-miterlimit="10" d="M6.943,28.453
c0.906,0.765,2.097,1.127,3.286,1.109c0.43,0.014,0.852-0.068,1.265-0.207c0.679-0.18,1.328-0.45,1.866-0.902L29.403,14.9
c1.772-1.498,1.772-3.925,0-5.422c-1.772-1.497-4.646-1.497-6.418,0L10.119,20.349l-2.389-2.424c-1.44-1.457-3.772-1.457-5.212,0
c-1.438,1.46-1.438,3.825,0,5.281C2.518,23.206,5.474,26.947,6.943,28.453z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 918 B

15
pixelegg/images/next.svg Normal file
View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
<g>
<g>
<path fill="#62686A" d="M27.315,13.194l-6.342-8.341c-1.829-1.829-4.792-1.832-6.617-0.008L12.68,6.523l0.011,2.975H7.5
c-2.669,0-4.833,2.167-4.833,4.84v4.322c0,2.673,2.164,4.84,4.833,4.84h5.24l0.011,2.973l1.642,1.644
c1.83,1.827,4.792,1.832,6.616,0.007l6.312-8.312C29.147,17.984,29.144,15.023,27.315,13.194z M24.675,18.482l-4.992,6.992
c-1.094,1.094-2.872,1.094-3.969-0.005l-0.008-4.874H8.467c-1.602,0-2.9-1.3-2.9-2.902v-2.388c0-1.604,1.299-2.903,2.9-2.903
h7.225l-0.008-4.909c1.095-1.095,2.871-1.093,3.969,0.005l5.018,7.017C25.769,15.611,25.771,17.389,24.675,18.482z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

15
pixelegg/images/previous.svg Normal file
View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
<g>
<g>
<path fill="#62686A" d="M4.041,19.775l6.342,8.341c1.828,1.829,4.792,1.832,6.616,0.008l1.676-1.678l-0.011-2.976h5.191
c2.669,0,4.833-2.167,4.833-4.84v-4.322c0-2.673-2.164-4.84-4.833-4.84h-5.24l-0.011-2.973l-1.643-1.645
c-1.83-1.826-4.792-1.832-6.615-0.007l-6.312,8.312C2.209,14.984,2.211,17.946,4.041,19.775z M6.681,14.486l4.991-6.992
C12.767,6.4,14.545,6.4,15.642,7.5l0.008,4.874h7.239c1.602,0,2.899,1.3,2.899,2.901v2.389c0,1.604-1.299,2.903-2.899,2.903
h-7.225l0.008,4.908c-1.095,1.096-2.871,1.094-3.968-0.005l-5.019-7.017C5.586,17.358,5.584,15.58,6.681,14.486z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

4
pixelegg/less/etemplate2.less
View File

@ -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;

4
pixelegg/mobile/fw_mobile.css
View File

@ -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;
}