holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP toggle sidebar menu

Browse Source
This commit is contained in:
Hadi Nategh 2015-09-08 16:31:49 +00:00
parent e033903126
commit 4fea2b801b
5 changed files with 402 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
phpgwapi/js/framework/fw_ui.js
View File

File diff suppressed because one or more lines are too long

129
pixelegg/css/mobile.css
View File

@ -2295,14 +2295,11 @@ body {
border-top-left-radius: 10px;
color: red;
text-align: center;
padding-top: 1em;
padding: 1em;
white-space: pre-wrap;
}
#loginMainDiv div#centerBox #loginCdMessage span {
padding: 0.5em;
font-size: 1.2em;
color: #189800;
text-shadow: -1px -1px 0px #101010, 1px 1px 0px #505050;
width: 100%;
#loginMainDiv div#centerBox #loginCdMessage.error {
font-weight: bold;
}
#loginMainDiv div#centerBox form {
margin: 1em;
@ -3798,9 +3795,9 @@ div.admin-config form > table td b {
font-weight: bold;
background-image: url(../images/dialog_error.png);
}
.info_message .discard {
float:right;
margin-top: 4px;
.info_message .discard {
float: right;
margin-top: 4px;
}
/**
* Message in popup
@ -4277,7 +4274,7 @@ td.message span.message {
text-decoration: none;
height: 32px;
/*font-size: 1.1em;*/
font-size: 12.100000000000001px;
font-size: 12.1px;
line-height: 1.5em;
}
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul li a:hover {
@ -4301,7 +4298,7 @@ td.message span.message {
}
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_home:before {
padding-right: 20px;
font-size: 12.100000000000001px;
font-size: 12.1px;
content: " ";
background-image: url(../images/topmenu_items/home.png);
background-repeat: no-repeat;
@ -4697,7 +4694,7 @@ td.message span.message {
padding-left: 3em;
color: #999999;
/*font-size: 12px;*/
font-size: 12.100000000000001px;
font-size: 12.1px;
line-height: 17px;
}
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header object {
@ -4884,7 +4881,7 @@ td.message span.message {
margin: 5px 0px 3px 5px;
padding: 0px 0px 0px 15px;
line-height: 1em;
font-size: 12.100000000000001px;
font-size: 12.1px;
background-image: url(../images/arrow_left.png);
background-repeat: no-repeat;
background-position: left center;
@ -4981,6 +4978,108 @@ td.message span.message {
#egw_fw_sidebar #egw_fw_splitter:hover {
background-color: #ffc200;
}
#egw_fw_sidebar #egw_fw_toggler {
display: block;
width: 28px;
height: 30px;
position: relative;
z-index: 1;
top: 4px;
margin-top: 0;
margin-bottom: -30px;
float: right;
margin-right: 5px;
}
#egw_fw_sidebar #egw_fw_toggler:hover span {
background-color: #b4b4b4;
}
#egw_fw_sidebar #egw_fw_toggler:hover span:before {
transition-duration: 0.7s;
transform: rotate(156deg) translate(7px, 1px);
background-color: #b4b4b4;
}
#egw_fw_sidebar #egw_fw_toggler:hover span:after {
transition-duration: 0.7s;
transform: rotate(-150deg) translate(10px, -1px);
background-color: #b4b4b4;
}
#egw_fw_sidebar #egw_fw_toggler span {
background-color: transparent;
position: relative;
display: block;
width: 100%;
height: 5px;
backface-visibility: hidden;
border-radius: 2px;
top: 11px;
}
#egw_fw_sidebar #egw_fw_toggler span:before {
transition-duration: 1s;
transform: rotate(45deg) translate(5px, 5px);
}
#egw_fw_sidebar #egw_fw_toggler span:before,
#egw_fw_sidebar #egw_fw_toggler span:after {
content: "";
position: absolute;
left: 0;
top: -9px;
width: 100%;
height: 5px;
background-color: #b3b3b3;
backface-visibility: hidden;
border-radius: 2px;
}
#egw_fw_sidebar #egw_fw_toggler span:after {
top: 9px;
transition-duration: 0.7s;
transform: rotate(-45deg) translate(7px, -8px);
}
#egw_fw_sidebar .egw_fw_sidebar_toggleOn {
/* toggler button*/
/*sidebar adjustments*/
}
#egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler {
margin: 1px auto 4px;
float: none;
}
#egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler span {
background-color: #b3b3b3;
transition: all 0.3s;
}
#egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler span:before,
#egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler span:after {
transform: none;
}
#egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler:hover span {
background-color: #b4b4b4;
}
#egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler:hover span:before {
background-color: #b4b4b4;
}
#egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler:hover span:after {
background-color: #b4b4b4;
}
#egw_fw_sidebar .egw_fw_sidebar_toggleOn .egw_fw_ui_sidemenu_entry_content {
display: none !important;
}
#egw_fw_sidebar .egw_fw_sidebar_toggleOn .egw_fw_ui_sidemenu_entry_header_active {
border-radius: 0 !important;
width: auto !important;
}
#egw_fw_sidebar .egw_fw_sidebar_toggleOn .egw_fw_ui_sidemenu_entry_header {
width: 50px;
height: 35px;
}
#egw_fw_sidebar .egw_fw_sidebar_toggleOn .egw_fw_ui_sidemenu_entry_header h1 {
visibility: hidden;
}
#egw_fw_sidebar .egw_fw_sidebar_toggleOn .egw_fw_ui_sidemenu_entry_header img {
margin: 4px auto 0px !important;
padding: 0 !important;
float: none !important;
display: block !important;
height: 24px !important;
}
/** DON"T MOVE THIS **/
.egw_fw_ui_splitter_vertical {
background-image: url(../images/splitter_vert.png);
@ -6829,7 +6928,7 @@ a.textSidebox {
margin: 5px 0px 3px 5px;
padding: 0px 0px 0px 15px;
line-height: 1em;
font-size: 12.100000000000001px;
font-size: 12.1px;
background-image: url(../images/arrow_left.png);
background-repeat: no-repeat;
background-position: left center;

116
pixelegg/css/pixelegg.css
View File

@ -3784,9 +3784,9 @@ div.admin-config form > table td b {
font-weight: bold;
background-image: url(../images/dialog_error.png);
}
.info_message .discard {
float:right;
margin-top: 4px;
.info_message .discard {
float: right;
margin-top: 4px;
}
/**
* Message in popup
@ -4263,7 +4263,7 @@ td.message span.message {
text-decoration: none;
height: 32px;
/*font-size: 1.1em;*/
font-size: 12.100000000000001px;
font-size: 12.1px;
line-height: 1.5em;
}
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul li a:hover {
@ -4287,7 +4287,7 @@ td.message span.message {
}
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_home:before {
padding-right: 20px;
font-size: 12.100000000000001px;
font-size: 12.1px;
content: " ";
background-image: url(../images/topmenu_items/home.png);
background-repeat: no-repeat;
@ -4683,7 +4683,7 @@ td.message span.message {
padding-left: 3em;
color: #999999;
/*font-size: 12px;*/
font-size: 12.100000000000001px;
font-size: 12.1px;
line-height: 17px;
}
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header object {
@ -4870,7 +4870,7 @@ td.message span.message {
margin: 5px 0px 3px 5px;
padding: 0px 0px 0px 15px;
line-height: 1em;
font-size: 12.100000000000001px;
font-size: 12.1px;
background-image: url(../images/arrow_left.png);
background-repeat: no-repeat;
background-position: left center;
@ -4967,6 +4967,108 @@ td.message span.message {
#egw_fw_sidebar #egw_fw_splitter:hover {
background-color: #ffc200;
}
#egw_fw_sidebar #egw_fw_toggler {
display: block;
width: 28px;
height: 30px;
position: relative;
z-index: 1;
top: 4px;
margin-top: 0;
margin-bottom: -30px;
float: right;
margin-right: 5px;
}
#egw_fw_sidebar #egw_fw_toggler:hover span {
background-color: #b4b4b4;
}
#egw_fw_sidebar #egw_fw_toggler:hover span:before {
transition-duration: 0.7s;
transform: rotate(156deg) translate(7px, 1px);
background-color: #b4b4b4;
}
#egw_fw_sidebar #egw_fw_toggler:hover span:after {
transition-duration: 0.7s;
transform: rotate(-150deg) translate(10px, -1px);
background-color: #b4b4b4;
}
#egw_fw_sidebar #egw_fw_toggler span {
background-color: transparent;
position: relative;
display: block;
width: 100%;
height: 5px;
backface-visibility: hidden;
border-radius: 2px;
top: 11px;
}
#egw_fw_sidebar #egw_fw_toggler span:before {
transition-duration: 1s;
transform: rotate(45deg) translate(5px, 5px);
}
#egw_fw_sidebar #egw_fw_toggler span:before,
#egw_fw_sidebar #egw_fw_toggler span:after {
content: "";
position: absolute;
left: 0;
top: -9px;
width: 100%;
height: 5px;
background-color: #b3b3b3;
backface-visibility: hidden;
border-radius: 2px;
}
#egw_fw_sidebar #egw_fw_toggler span:after {
top: 9px;
transition-duration: 0.7s;
transform: rotate(-45deg) translate(7px, -8px);
}
#egw_fw_sidebar .egw_fw_sidebar_toggleOn {
/* toggler button*/
/*sidebar adjustments*/
}
#egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler {
margin: 1px auto 4px;
float: none;
}
#egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler span {
background-color: #b3b3b3;
transition: all 0.3s;
}
#egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler span:before,
#egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler span:after {
transform: none;
}
#egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler:hover span {
background-color: #b4b4b4;
}
#egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler:hover span:before {
background-color: #b4b4b4;
}
#egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler:hover span:after {
background-color: #b4b4b4;
}
#egw_fw_sidebar .egw_fw_sidebar_toggleOn .egw_fw_ui_sidemenu_entry_content {
display: none !important;
}
#egw_fw_sidebar .egw_fw_sidebar_toggleOn .egw_fw_ui_sidemenu_entry_header_active {
border-radius: 0 !important;
width: auto !important;
}
#egw_fw_sidebar .egw_fw_sidebar_toggleOn .egw_fw_ui_sidemenu_entry_header {
width: 50px;
height: 35px;
}
#egw_fw_sidebar .egw_fw_sidebar_toggleOn .egw_fw_ui_sidemenu_entry_header h1 {
visibility: hidden;
}
#egw_fw_sidebar .egw_fw_sidebar_toggleOn .egw_fw_ui_sidemenu_entry_header img {
margin: 4px auto 0px !important;
padding: 0 !important;
float: none !important;
display: block !important;
height: 24px !important;
}
/** DON"T MOVE THIS **/
.egw_fw_ui_splitter_vertical {
background-image: url(../images/splitter_vert.png);

2
pixelegg/js/fw_pixelegg.js
View File

@ -46,7 +46,7 @@
$j(document).ready(function() {
window.framework = new fw_pixelegg("egw_fw_sidemenu", "egw_fw_tabs",
window.egw_webserverUrl, egw_setSideboxSize,"egw_fw_splitter", 255, 215); // should be identical to jdots_framework::(DEFAULT|MIN)_SIDEBAR_WIDTH
window.egw_webserverUrl, egw_setSideboxSize,"egw_fw_splitter", 255, 70); // should be identical to jdots_framework::(DEFAULT|MIN)_SIDEBAR_WIDTH
window.callManual = window.framework.callManual;
jQuery('#egw_fw_print').click(function(){window.framework.print();});
jQuery('#egw_fw_logout').click(function(){ window.framework.redirect(this.getAttribute('data-logout-url')); });

109
pixelegg/less/layout_raster_sidebar.less
View File

@ -325,6 +325,115 @@
&:hover {background-color: @egw_color_1;}
}
// Toggle menu
#egw_fw_toggler {
display: block;
width: 28px;
height: 30px;
position: relative;
z-index: 1;
top: 4px;
margin-top: 0;
margin-bottom: -30px;
float: right;
margin-right:5px;
&:hover {
span {
background-color: #b4b4b4;
&:before {
transition-duration: 0.7s;
transform: rotate(156deg) translate(7px, 1px);
background-color: #b4b4b4;
}
&:after {
transition-duration: 0.7s;
transform: rotate(-150deg) translate(10px, -1px);
background-color: #b4b4b4;
}
}
}
span {
background-color: transparent;
&:before{
transition-duration: 1s;
transform: rotate(45deg) translate(5px, 5px);
}
&:before, &:after {
content: "";
position: absolute;
left: 0;
top: -9px;
width: 100%;
height: 5px;
background-color: #b3b3b3;
backface-visibility: hidden;
border-radius: 2px;
}
&:after {
top:9px;
transition-duration: 0.7s;
transform: rotate(-45deg) translate(7px, -8px);
}
position: relative;
display: block;
width: 100%;
height: 5px;
backface-visibility: hidden;
border-radius: 2px;
top:11px;
}
}
.egw_fw_sidebar_toggleOn {
/* toggler button*/
#egw_fw_toggler {
margin: 1px auto 4px;
float:none;
span {
background-color: #b3b3b3;
transition: all 0.3s;
&:before, &:after {
transform:none;
}
}
&:hover {
span {
background-color: #b4b4b4;
&:before {
background-color: #b4b4b4;
}
&:after {
background-color: #b4b4b4;
}
}
}
}
/*sidebar adjustments*/
.egw_fw_ui_sidemenu_entry_content {
display: none !important;
}
.egw_fw_ui_sidemenu_entry_header_active {
border-radius: 0 !important;
width: auto !important;
}
.egw_fw_ui_sidemenu_entry_header {
width: 50px;
height: 35px;
h1 {
visibility: hidden;
}
img {
margin: 4px auto 0px !important;
padding: 0 !important;
float: none !important;
display: block !important;
height: 24px !important;
}
}
}
// Ende Sidebar
// Menu Seite links