mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-10-05 09:42:30 +02:00
Improve styling for quick add
This commit is contained in:
Hadi Nategh
parent
5110e999b5
commit
53bff47792
@ -5097,14 +5097,40 @@ td.message span.message {
|
||||
-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);
|
||||
}
|
||||
#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 {
|
||||
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 {
|
||||
width: 16px;
|
||||
|
||||
@ -5086,14 +5086,40 @@ td.message span.message {
|
||||
-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);
|
||||
}
|
||||
#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 {
|
||||
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 {
|
||||
width: 16px;
|
||||
|
||||
@ -5097,14 +5097,40 @@ td.message span.message {
|
||||
-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);
|
||||
}
|
||||
#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 {
|
||||
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 {
|
||||
width: 16px;
|
||||
|
||||
@ -53,7 +53,7 @@
|
||||
jQuery('#egw_fw_print').click(function(){window.framework.print();});
|
||||
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;});
|
||||
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
|
||||
var href_regexp = /^javascript:([^\(]+)\((.*)?\);?$/;
|
||||
|
||||
@ -124,56 +124,33 @@ egw_LAB.wait(function() {
|
||||
jQuery('#quick_add').on({
|
||||
mouseover: function(ev){
|
||||
// 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({
|
||||
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"
|
||||
});
|
||||
$chosen_div.show();
|
||||
}
|
||||
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();
|
||||
},
|
||||
mouseout: function(ev){
|
||||
// do NOT react on bubbeling events from contained selectbox
|
||||
if (ev.target && ev.relatedTarget && ev.target.id != 'quick_add_selectbox'
|
||||
&& ev.relatedTarget.id != 'quick_add'
|
||||
&& ev.relatedTarget.id !='quick_add_selectbox'
|
||||
&& ev.relatedTarget.tagName != "OPTION")
|
||||
&& !jQuery(ev.relatedTarget).hasClass('chzn-container'))
|
||||
{
|
||||
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"
|
||||
});
|
||||
jQuery('#quick_add_selectbox').next().hide();
|
||||
}
|
||||
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"
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -160,53 +160,81 @@
|
||||
/*quick*/
|
||||
#topmenu_info_quick_add {
|
||||
|
||||
// ##############################################################################
|
||||
// quick_add
|
||||
// Fist you see an ADD Icon, via Mouseover it expand right, to an select field
|
||||
// ##############################################################################
|
||||
// quick_add
|
||||
// Fist you see an ADD Icon, via Mouseover it expand right, to an select field
|
||||
|
||||
span#quick_add {
|
||||
/*border: 1px solid rgba(0, 0, 0, 0.15);*/
|
||||
/*box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);*/
|
||||
float: right;
|
||||
padding: 0.5em;
|
||||
position: fixed;
|
||||
right: 80px;
|
||||
top: 5px;
|
||||
span#quick_add {
|
||||
/*border: 1px solid rgba(0, 0, 0, 0.15);*/
|
||||
/*box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);*/
|
||||
float: right;
|
||||
padding: 0.5em;
|
||||
position: fixed;
|
||||
right: 80px;
|
||||
top: 5px;
|
||||
|
||||
background-image: url(../images/add.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 20px 20px;
|
||||
background-position: 4px 4px;
|
||||
background-image: url(../images/add.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 20px 20px;
|
||||
background-position: 4px 4px;
|
||||
|
||||
.border_radius_button_normal;
|
||||
.dimension_width_height_s;
|
||||
.border_radius_button_normal;
|
||||
.dimension_width_height_s;
|
||||
|
||||
&:before {
|
||||
content: " ";
|
||||
font-size: 2em;
|
||||
color: @egw_color_2_a;
|
||||
line-height: 0.6em;
|
||||
background-color: white;
|
||||
}
|
||||
&:before {
|
||||
content: " ";
|
||||
font-size: 2em;
|
||||
color: @egw_color_2_a;
|
||||
line-height: 0.6em;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
&:hover {.box_shadow_standard_light_hover;}
|
||||
&:focus {.box_shadow_standard_light_inset;}
|
||||
}
|
||||
&:hover {.box_shadow_standard_light_hover;}
|
||||
&:focus {.box_shadow_standard_light_inset;}
|
||||
}
|
||||
|
||||
// ##############################################################################
|
||||
// quick_add selectbox
|
||||
// ADD different APPs
|
||||
select#quick_add_selectbox {
|
||||
// ##############################################################################
|
||||
// quick_add selectbox
|
||||
// ADD different APPs
|
||||
|
||||
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;
|
||||
.chzn-container {
|
||||
position: fixed;
|
||||
right: 15px !important;
|
||||
top: 40px;
|
||||
width: 160px !important;
|
||||
background: @gray_0;
|
||||
&: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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -5108,14 +5108,40 @@ td.message span.message {
|
||||
-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);
|
||||
}
|
||||
#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 {
|
||||
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 {
|
||||
width: 16px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user