Make toggle class accessible

This commit is contained in:
Hadi Nategh 2018-06-06 11:05:19 +02:00
parent 9e31fa65dc
commit f7165e2bca
6 changed files with 176 additions and 174 deletions

View File

@ -32,7 +32,7 @@ if ($GLOBALS['egw_info']['user']['apps']['notifications'])
echo ' echo '
<div id="egwpopup" style="display: none; z-index: 999;"> <div id="egwpopup" style="display: none; z-index: 999;">
<div id="egwpopup_header">'.lang('Notifications'). <div id="egwpopup_header">'.lang('Notifications').
'<span class="egwpopup_toggle"></span><span class="egwpopup_seenall" title="'. lang('mark all as read').'"></span>'. '<span class="button_right_toggle"></span><span class="egwpopup_seenall" title="'. lang('mark all as read').'"></span>'.
'<span class="egwpopup_deleteall" title="'.lang('delete all messages').'"></span></div> '<span class="egwpopup_deleteall" title="'.lang('delete all messages').'"></span></div>
<div id="egwpopup_list"></div> <div id="egwpopup_list"></div>
</div> </div>

View File

@ -632,7 +632,7 @@
}; };
window.app.notifications = new self(); window.app.notifications = new self();
// toggle notifications bar // toggle notifications bar
jQuery('.egwpopup_toggle', '#egwpopup').click(function(){window.app.notifications.toggle();}); jQuery('.button_right_toggle', '#egwpopup').click(function(){window.app.notifications.toggle();});
$egwpopup_fw.click(function(){window.app.notifications.toggle();}); $egwpopup_fw.click(function(){window.app.notifications.toggle();});
jQuery(".egwpopup_deleteall", '#egwpopup').click(function(){ jQuery(".egwpopup_deleteall", '#egwpopup').click(function(){
et2_dialog.show_dialog( function(_button){ et2_dialog.show_dialog( function(_button){

View File

@ -3772,49 +3772,6 @@ td.lettersearch {
text-align: center; text-align: center;
padding: 15px; padding: 15px;
} }
#egwpopup div#egwpopup_header .egwpopup_toggle {
height: 32px;
width: 32px;
cursor: pointer;
position: relative;
margin-top: 1px;
margin-left: -20px;
float: left;
}
#egwpopup div#egwpopup_header .egwpopup_toggle:after {
content: "";
position: absolute;
left: 13px;
top: 5px;
width: 10px;
height: 2px;
background-color: silver;
backface-visibility: hidden;
border-radius: 6px;
transform: rotate(145deg) translate(8px, -1px);
-ms-transform: rotate(145deg) translate(8px, -1px);
-moz-transform: rotate(145deg) translate(8px, -1px);
-webkit-transform: rotate(145deg) translate(8px, -1px);
}
#egwpopup div#egwpopup_header .egwpopup_toggle:before {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 10px;
height: 2px;
background-color: silver;
backface-visibility: hidden;
border-radius: 6px;
transform: rotate(45deg) translate(8px, -2px);
-ms-transform: rotate(45deg) translate(8px, -2px);
-moz-transform: rotate(45deg) translate(8px, -2px);
-webkit-transform: rotate(45deg) translate(8px, -2px);
}
#egwpopup div#egwpopup_header .egwpopup_toggle:hover:before,
#egwpopup div#egwpopup_header .egwpopup_toggle:hover:after {
background-color: gray;
}
#egwpopup div#egwpopup_header .egwpopup_seenall { #egwpopup div#egwpopup_header .egwpopup_seenall {
float: right; float: right;
width: 10px; width: 10px;
@ -3948,6 +3905,49 @@ td.message span.message {
height: auto; height: auto;
width: 100%; width: 100%;
} }
.button_right_toggle {
height: 32px;
width: 32px;
cursor: pointer;
position: relative;
margin-top: 1px;
margin-left: -20px;
float: left;
}
.button_right_toggle:after {
content: "";
position: absolute;
left: 13px;
top: 5px;
width: 10px;
height: 2px;
background-color: silver;
backface-visibility: hidden;
border-radius: 6px;
transform: rotate(145deg) translate(8px, -1px);
-ms-transform: rotate(145deg) translate(8px, -1px);
-moz-transform: rotate(145deg) translate(8px, -1px);
-webkit-transform: rotate(145deg) translate(8px, -1px);
}
.button_right_toggle:before {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 10px;
height: 2px;
background-color: silver;
backface-visibility: hidden;
border-radius: 6px;
transform: rotate(45deg) translate(8px, -2px);
-ms-transform: rotate(45deg) translate(8px, -2px);
-moz-transform: rotate(45deg) translate(8px, -2px);
-webkit-transform: rotate(45deg) translate(8px, -2px);
}
.button_right_toggle:hover:before,
.button_right_toggle:hover:after {
background-color: gray;
}
/** /**
* EGroupware: Stylite Pixelegg template * EGroupware: Stylite Pixelegg template
* *

View File

@ -3761,49 +3761,6 @@ td.lettersearch {
text-align: center; text-align: center;
padding: 15px; padding: 15px;
} }
#egwpopup div#egwpopup_header .egwpopup_toggle {
height: 32px;
width: 32px;
cursor: pointer;
position: relative;
margin-top: 1px;
margin-left: -20px;
float: left;
}
#egwpopup div#egwpopup_header .egwpopup_toggle:after {
content: "";
position: absolute;
left: 13px;
top: 5px;
width: 10px;
height: 2px;
background-color: silver;
backface-visibility: hidden;
border-radius: 6px;
transform: rotate(145deg) translate(8px, -1px);
-ms-transform: rotate(145deg) translate(8px, -1px);
-moz-transform: rotate(145deg) translate(8px, -1px);
-webkit-transform: rotate(145deg) translate(8px, -1px);
}
#egwpopup div#egwpopup_header .egwpopup_toggle:before {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 10px;
height: 2px;
background-color: silver;
backface-visibility: hidden;
border-radius: 6px;
transform: rotate(45deg) translate(8px, -2px);
-ms-transform: rotate(45deg) translate(8px, -2px);
-moz-transform: rotate(45deg) translate(8px, -2px);
-webkit-transform: rotate(45deg) translate(8px, -2px);
}
#egwpopup div#egwpopup_header .egwpopup_toggle:hover:before,
#egwpopup div#egwpopup_header .egwpopup_toggle:hover:after {
background-color: gray;
}
#egwpopup div#egwpopup_header .egwpopup_seenall { #egwpopup div#egwpopup_header .egwpopup_seenall {
float: right; float: right;
width: 10px; width: 10px;
@ -3937,6 +3894,49 @@ td.message span.message {
height: auto; height: auto;
width: 100%; width: 100%;
} }
.button_right_toggle {
height: 32px;
width: 32px;
cursor: pointer;
position: relative;
margin-top: 1px;
margin-left: -20px;
float: left;
}
.button_right_toggle:after {
content: "";
position: absolute;
left: 13px;
top: 5px;
width: 10px;
height: 2px;
background-color: silver;
backface-visibility: hidden;
border-radius: 6px;
transform: rotate(145deg) translate(8px, -1px);
-ms-transform: rotate(145deg) translate(8px, -1px);
-moz-transform: rotate(145deg) translate(8px, -1px);
-webkit-transform: rotate(145deg) translate(8px, -1px);
}
.button_right_toggle:before {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 10px;
height: 2px;
background-color: silver;
backface-visibility: hidden;
border-radius: 6px;
transform: rotate(45deg) translate(8px, -2px);
-ms-transform: rotate(45deg) translate(8px, -2px);
-moz-transform: rotate(45deg) translate(8px, -2px);
-webkit-transform: rotate(45deg) translate(8px, -2px);
}
.button_right_toggle:hover:before,
.button_right_toggle:hover:after {
background-color: gray;
}
/** /**
* EGroupware: Stylite Pixelegg template * EGroupware: Stylite Pixelegg template
* *

View File

@ -204,48 +204,6 @@
color: silver; color: silver;
text-align: center; text-align: center;
padding: 15px; padding: 15px;
.egwpopup_toggle {
height: 32px;
width: 32px;
cursor: pointer;
position:relative;
margin-top: 1px;
margin-left: -20px;
float:left;
&:after {
content: "";
position: absolute;
left: 13px;
top: 5px;
width: 10px;
height: 2px;
background-color: silver;
backface-visibility: hidden;
border-radius: 6px;
transform: rotate(145deg) translate(8px, -1px);
-ms-transform: rotate(145deg) translate(8px, -1px);
-moz-transform: rotate(145deg) translate(8px, -1px);
-webkit-transform: rotate(145deg) translate(8px, -1px);
}
&:before {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 10px;
height: 2px;
background-color: silver;
backface-visibility: hidden;
border-radius: 6px;
transform: rotate(45deg) translate(8px, -2px);
-ms-transform: rotate(45deg) translate(8px, -2px);
-moz-transform: rotate(45deg) translate(8px, -2px);
-webkit-transform: rotate(45deg) translate(8px, -2px);
}
&:hover:before, &:hover:after {
background-color: gray;
}
}
.egwpopup_seenall { .egwpopup_seenall {
float: right; float: right;
width: 10px; width: 10px;
@ -386,3 +344,47 @@ td.message {
width: 100%; width: 100%;
} }
} }
.button_right_toggle {
height: 32px;
width: 32px;
cursor: pointer;
position:relative;
margin-top: 1px;
margin-left: -20px;
float:left;
&:after {
content: "";
position: absolute;
left: 13px;
top: 5px;
width: 10px;
height: 2px;
background-color: silver;
backface-visibility: hidden;
border-radius: 6px;
transform: rotate(145deg) translate(8px, -1px);
-ms-transform: rotate(145deg) translate(8px, -1px);
-moz-transform: rotate(145deg) translate(8px, -1px);
-webkit-transform: rotate(145deg) translate(8px, -1px);
}
&:before {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 10px;
height: 2px;
background-color: silver;
backface-visibility: hidden;
border-radius: 6px;
transform: rotate(45deg) translate(8px, -2px);
-ms-transform: rotate(45deg) translate(8px, -2px);
-moz-transform: rotate(45deg) translate(8px, -2px);
-webkit-transform: rotate(45deg) translate(8px, -2px);
}
&:hover:before, &:hover:after {
background-color: gray;
}
}

View File

@ -3783,49 +3783,6 @@ td.lettersearch {
text-align: center; text-align: center;
padding: 15px; padding: 15px;
} }
#egwpopup div#egwpopup_header .egwpopup_toggle {
height: 32px;
width: 32px;
cursor: pointer;
position: relative;
margin-top: 1px;
margin-left: -20px;
float: left;
}
#egwpopup div#egwpopup_header .egwpopup_toggle:after {
content: "";
position: absolute;
left: 13px;
top: 5px;
width: 10px;
height: 2px;
background-color: silver;
backface-visibility: hidden;
border-radius: 6px;
transform: rotate(145deg) translate(8px, -1px);
-ms-transform: rotate(145deg) translate(8px, -1px);
-moz-transform: rotate(145deg) translate(8px, -1px);
-webkit-transform: rotate(145deg) translate(8px, -1px);
}
#egwpopup div#egwpopup_header .egwpopup_toggle:before {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 10px;
height: 2px;
background-color: silver;
backface-visibility: hidden;
border-radius: 6px;
transform: rotate(45deg) translate(8px, -2px);
-ms-transform: rotate(45deg) translate(8px, -2px);
-moz-transform: rotate(45deg) translate(8px, -2px);
-webkit-transform: rotate(45deg) translate(8px, -2px);
}
#egwpopup div#egwpopup_header .egwpopup_toggle:hover:before,
#egwpopup div#egwpopup_header .egwpopup_toggle:hover:after {
background-color: gray;
}
#egwpopup div#egwpopup_header .egwpopup_seenall { #egwpopup div#egwpopup_header .egwpopup_seenall {
float: right; float: right;
width: 10px; width: 10px;
@ -3959,6 +3916,49 @@ td.message span.message {
height: auto; height: auto;
width: 100%; width: 100%;
} }
.button_right_toggle {
height: 32px;
width: 32px;
cursor: pointer;
position: relative;
margin-top: 1px;
margin-left: -20px;
float: left;
}
.button_right_toggle:after {
content: "";
position: absolute;
left: 13px;
top: 5px;
width: 10px;
height: 2px;
background-color: silver;
backface-visibility: hidden;
border-radius: 6px;
transform: rotate(145deg) translate(8px, -1px);
-ms-transform: rotate(145deg) translate(8px, -1px);
-moz-transform: rotate(145deg) translate(8px, -1px);
-webkit-transform: rotate(145deg) translate(8px, -1px);
}
.button_right_toggle:before {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 10px;
height: 2px;
background-color: silver;
backface-visibility: hidden;
border-radius: 6px;
transform: rotate(45deg) translate(8px, -2px);
-ms-transform: rotate(45deg) translate(8px, -2px);
-moz-transform: rotate(45deg) translate(8px, -2px);
-webkit-transform: rotate(45deg) translate(8px, -2px);
}
.button_right_toggle:hover:before,
.button_right_toggle:hover:after {
background-color: gray;
}
/** /**
* EGroupware: Stylite Pixelegg template * EGroupware: Stylite Pixelegg template
* *