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

Improve styling for quick add

Browse Source
This commit is contained in:
Hadi Nategh 2019-03-25 16:36:21 +01:00
parent 5110e999b5
commit 53bff47792
7 changed files with 213 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
pixelegg/css/mobile.css
View File

@ -5097,14 +5097,40 @@ td.message span.message {
-moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); -moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
} }
#egw_fw_topmenu_info_items #topmenu_info_quick_add .chzn-container {
position: fixed;
right: 15px !important;
top: 40px;
width: 160px !important;
background: #FFFFFF;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add .chzn-container:before {
content: '';
position: absolute;
bottom: 50%;
left: 42%;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 12px solid #aaa;
margin-bottom: 12px;
margin-left: 0px;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add .chzn-container:after {
content: '';
position: absolute;
bottom: 50%;
left: 42%;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 12px solid #ffffff;
margin-bottom: 11px;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add select#quick_add_selectbox { #egw_fw_topmenu_info_items #topmenu_info_quick_add select#quick_add_selectbox {
visibility: hidden; visibility: hidden;
border: medium none;
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
position: relative !important;
right: 1px !important;
top: -3px;
left: 35px;
} }
#egw_fw_topmenu_info_items img#topmenu_info_error { #egw_fw_topmenu_info_items img#topmenu_info_error {
width: 16px; width: 16px;

38
pixelegg/css/monochrome.css
View File

@ -5086,14 +5086,40 @@ td.message span.message {
-moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); -moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
} }
#egw_fw_topmenu_info_items #topmenu_info_quick_add .chzn-container {
position: fixed;
right: 15px !important;
top: 40px;
width: 160px !important;
background: #FFFFFF;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add .chzn-container:before {
content: '';
position: absolute;
bottom: 50%;
left: 42%;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 12px solid #aaa;
margin-bottom: 12px;
margin-left: 0px;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add .chzn-container:after {
content: '';
position: absolute;
bottom: 50%;
left: 42%;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 12px solid #ffffff;
margin-bottom: 11px;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add select#quick_add_selectbox { #egw_fw_topmenu_info_items #topmenu_info_quick_add select#quick_add_selectbox {
visibility: hidden; visibility: hidden;
border: medium none;
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
position: relative !important;
right: 1px !important;
top: -3px;
left: 35px;
} }
#egw_fw_topmenu_info_items img#topmenu_info_error { #egw_fw_topmenu_info_items img#topmenu_info_error {
width: 16px; width: 16px;

38
pixelegg/css/pixelegg.css
View File

@ -5097,14 +5097,40 @@ td.message span.message {
-moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); -moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
} }
#egw_fw_topmenu_info_items #topmenu_info_quick_add .chzn-container {
position: fixed;
right: 15px !important;
top: 40px;
width: 160px !important;
background: #FFFFFF;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add .chzn-container:before {
content: '';
position: absolute;
bottom: 50%;
left: 42%;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 12px solid #aaa;
margin-bottom: 12px;
margin-left: 0px;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add .chzn-container:after {
content: '';
position: absolute;
bottom: 50%;
left: 42%;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 12px solid #ffffff;
margin-bottom: 11px;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add select#quick_add_selectbox { #egw_fw_topmenu_info_items #topmenu_info_quick_add select#quick_add_selectbox {
visibility: hidden; visibility: hidden;
border: medium none;
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
position: relative !important;
right: 1px !important;
top: -3px;
left: 35px;
} }
#egw_fw_topmenu_info_items img#topmenu_info_error { #egw_fw_topmenu_info_items img#topmenu_info_error {
width: 16px; width: 16px;

2
pixelegg/js/fw_pixelegg.js
View File

@ -53,7 +53,7 @@
jQuery('#egw_fw_print').click(function(){window.framework.print();}); jQuery('#egw_fw_print').click(function(){window.framework.print();});
jQuery('#egw_fw_logout').click(function(){ window.framework.redirect(this.getAttribute('data-logout-url')); }); jQuery('#egw_fw_logout').click(function(){ window.framework.redirect(this.getAttribute('data-logout-url')); });
jQuery('form[name^="tz_selection"]').children().on('change', function(){framework.tzSelection(this.value); return false;}); jQuery('form[name^="tz_selection"]').children().on('change', function(){framework.tzSelection(this.value); return false;});
window.egw.link_quick_add('quick_add'); window.egw.link_quick_add('topmenu_info_quick_add');
// allowing javascript urls in topmenu and sidebox only under CSP by binding click handlers to them // allowing javascript urls in topmenu and sidebox only under CSP by binding click handlers to them
var href_regexp = /^javascript:([^\(]+)\((.*)?\);?$/; var href_regexp = /^javascript:([^\(]+)\((.*)?\);?$/;

57
pixelegg/js/slider.js
View File

@ -124,56 +124,33 @@ egw_LAB.wait(function() {
jQuery('#quick_add').on({ jQuery('#quick_add').on({
mouseover: function(ev){ mouseover: function(ev){
// do NOT react on bubbeling events from contained selectbox // do NOT react on bubbeling events from contained selectbox
if (ev.relatedTarget && ev.relatedTarget.id != 'quick_add_selectbox' && ev.target.id !='quick_add_selectbox') var $select = jQuery('#quick_add_selectbox');
var $chosen_div = $select.next();
if ($chosen_div.hasClass('chzn-container'))
{ {
jQuery(this).css({ $chosen_div.show();
transition: "0.2s ease-out 0s",
width: "166px",
'border-top-left-radius': "20px",
'background-color': "#0B5FA4"
});
jQuery('select', this).css({
transition: "0.1s linear 0.2s",
visibility: "visible",
width:"120px"
});
} }
else
{
$select.chosen({
disable_search: true
});
$chosen_div = $select.next();
}
$select.trigger('liszt:open');
$select.on('liszt:hiding_dropdown', function(e){
$chosen_div.hide();
});
ev.stopPropagation(); ev.stopPropagation();
}, },
mouseout: function(ev){ mouseout: function(ev){
// do NOT react on bubbeling events from contained selectbox // do NOT react on bubbeling events from contained selectbox
if (ev.target && ev.relatedTarget && ev.target.id != 'quick_add_selectbox' if (ev.target && ev.relatedTarget && ev.target.id != 'quick_add_selectbox'
&& ev.relatedTarget.id != 'quick_add' && !jQuery(ev.relatedTarget).hasClass('chzn-container'))
&& ev.relatedTarget.id !='quick_add_selectbox'
&& ev.relatedTarget.tagName != "OPTION")
{ {
jQuery(this).css({ jQuery('#quick_add_selectbox').next().hide();
transition: "0.6s ease-out 0s",
width: "16px",
'border-top-left-radius': "0px",
'background-color': "transparent"
});
jQuery('select', this).css({
transition: "0s linear 0s",
visibility: "hidden",
width:"10px"
});
} }
ev.stopPropagation(); ev.stopPropagation();
},
focusout: function (ev)
{
jQuery(this).css({
transition: "0.6s ease-out 0s",
width: "16px",
'border-top-left-radius': "0px",
'background-color': "transparent"
});
jQuery('select', this).css({
transition: "0s linear 0s",
visibility: "hidden",
width:"10px"
});
} }
}); });

106
pixelegg/less/layout_raster_buttons.less
View File

@ -160,53 +160,81 @@
/*quick*/ /*quick*/
#topmenu_info_quick_add { #topmenu_info_quick_add {
// ############################################################################## // ##############################################################################
// quick_add // quick_add
// Fist you see an ADD Icon, via Mouseover it expand right, to an select field // Fist you see an ADD Icon, via Mouseover it expand right, to an select field
span#quick_add { span#quick_add {
/*border: 1px solid rgba(0, 0, 0, 0.15);*/ /*border: 1px solid rgba(0, 0, 0, 0.15);*/
/*box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);*/ /*box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);*/
float: right; float: right;
padding: 0.5em; padding: 0.5em;
position: fixed; position: fixed;
right: 80px; right: 80px;
top: 5px; top: 5px;
background-image: url(../images/add.png); background-image: url(../images/add.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 20px 20px; background-size: 20px 20px;
background-position: 4px 4px; background-position: 4px 4px;
.border_radius_button_normal; .border_radius_button_normal;
.dimension_width_height_s; .dimension_width_height_s;
&:before { &:before {
content: " "; content: " ";
font-size: 2em; font-size: 2em;
color: @egw_color_2_a; color: @egw_color_2_a;
line-height: 0.6em; line-height: 0.6em;
background-color: white; background-color: white;
} }
&:hover {.box_shadow_standard_light_hover;} &:hover {.box_shadow_standard_light_hover;}
&:focus {.box_shadow_standard_light_inset;} &:focus {.box_shadow_standard_light_inset;}
} }
// ############################################################################## // ##############################################################################
// quick_add selectbox // quick_add selectbox
// ADD different APPs // ADD different APPs
select#quick_add_selectbox {
visibility: hidden; .chzn-container {
border: medium none; position: fixed;
box-shadow: 0 0 0 rgba(0, 0, 0, 0); right: 15px !important;
position: relative !important; top: 40px;
right: 1px !important; width: 160px !important;
top: -3px; background: @gray_0;
left: 35px; &:before {
content: '';
position: absolute;
bottom: 50%;
left: 42%;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 12px solid #aaa;
margin-bottom: 12px;
margin-left: 0px;
}
&:after {
content: '';
position: absolute;
bottom: 50%;
left: 42%;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 12px solid #ffffff;
margin-bottom: 11px;
}
}
}
select#quick_add_selectbox {
visibility: hidden;
}
} }

38
pixelegg/mobile/fw_mobile.css
View File

@ -5108,14 +5108,40 @@ td.message span.message {
-moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); -moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
} }
#egw_fw_topmenu_info_items #topmenu_info_quick_add .chzn-container {
position: fixed;
right: 15px !important;
top: 40px;
width: 160px !important;
background: #FFFFFF;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add .chzn-container:before {
content: '';
position: absolute;
bottom: 50%;
left: 42%;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 12px solid #aaa;
margin-bottom: 12px;
margin-left: 0px;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add .chzn-container:after {
content: '';
position: absolute;
bottom: 50%;
left: 42%;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 12px solid #ffffff;
margin-bottom: 11px;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add select#quick_add_selectbox { #egw_fw_topmenu_info_items #topmenu_info_quick_add select#quick_add_selectbox {
visibility: hidden; visibility: hidden;
border: medium none;
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
position: relative !important;
right: 1px !important;
top: -3px;
left: 35px;
} }
#egw_fw_topmenu_info_items img#topmenu_info_error { #egw_fw_topmenu_info_items img#topmenu_info_error {
width: 16px; width: 16px;