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

WIP toggle sidebar menu:

Browse Source 
- Add refresh icon to active header
- Fix wrong indentations
This commit is contained in:
Hadi Nategh 2015-09-10 13:51:31 +00:00
parent 6b791ec80e
commit 6010115714
6 changed files with 57 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1283,7 +1283,7 @@ egw_fw_ui_toggleSidebar.prototype.onToggle = function(_callbackContext)
*/ */
egw_fw_ui_toggleSidebar.prototype.set_toggle = function (_state, _toggleCallback, _context) egw_fw_ui_toggleSidebar.prototype.set_toggle = function (_state, _toggleCallback, _context)
{ {
this.contDiv.toggleClass('egw_fw_sidebar_toggleOn',_state === 'on'?true:false); this.contDiv.toggleClass('egw_fw_sidebar_toggleOn',_state === 'on'?true:false);
_context.splitterUi.set_disable(_state === 'on'?true:false); _context.splitterUi.set_disable(_state === 'on'?true:false);
_toggleCallback.call(_context, _state); _toggleCallback.call(_context, _state);
}; };

24
pixelegg/css/mobile.css
View File

@ -4738,6 +4738,14 @@ td.message span.message {
font-size: 1.4em; font-size: 1.4em;
color: #000000; color: #000000;
padding-top: .8em; padding-top: .8em;
background-image: url(../images/reload.png);
background-repeat: no-repeat;
background-size: 16px;
background-position-x: 74%;
background-position-y: 60%;
}
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header_active h1:active {
background-image: url(../images/ajax-loader.gif) !important;
} }
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header_active:hover { #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header_active:hover {
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
@ -4794,7 +4802,8 @@ td.message span.message {
height: 16px; height: 16px;
} }
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header_active .egw_fw_ui_ajaxloader { #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header_active .egw_fw_ui_ajaxloader {
margin-top: -26px; margin-top: -15%;
margin-right: 25%;
} }
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_content { #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_content {
display: block; display: block;
@ -5012,7 +5021,7 @@ td.message span.message {
top: -9px; top: -9px;
width: 12px; width: 12px;
height: 3px; height: 3px;
background-color: #b3b3b3; background-color: #606060;
backface-visibility: hidden; backface-visibility: hidden;
border-radius: 2px; border-radius: 2px;
} }
@ -5020,7 +5029,7 @@ td.message span.message {
top: 9px; top: 9px;
transition-duration: 0.7s; transition-duration: 0.7s;
transform: rotate(-145deg) translate(8px, 2px); transform: rotate(-145deg) translate(8px, 2px);
background-color: #b4b4b4; background-color: #606060;
} }
#egw_fw_sidebar .egw_fw_sidebar_toggleOn { #egw_fw_sidebar .egw_fw_sidebar_toggleOn {
/* toggler button*/ /* toggler button*/
@ -5031,7 +5040,7 @@ td.message span.message {
float: none; float: none;
} }
#egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler span { #egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler span {
background-color: #b3b3b3; background-color: #b4b4b4;
transition: all 0.3s; 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:before,
@ -5039,15 +5048,16 @@ td.message span.message {
transform: none; transform: none;
width: 100%; width: 100%;
height: 5px; height: 5px;
background-color: #b4b4b4;
} }
#egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler:hover span { #egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler:hover span {
background-color: #b4b4b4; background-color: #606060;
} }
#egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler:hover span:before { #egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler:hover span:before {
background-color: #b4b4b4; background-color: #606060;
} }
#egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler:hover span:after { #egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler:hover span:after {
background-color: #b4b4b4; background-color: #606060;
} }
#egw_fw_sidebar .egw_fw_sidebar_toggleOn .egw_fw_ui_sidemenu_entry_content { #egw_fw_sidebar .egw_fw_sidebar_toggleOn .egw_fw_ui_sidemenu_entry_content {
display: none !important; display: none !important;

24
pixelegg/css/pixelegg.css
View File

@ -4727,6 +4727,14 @@ td.message span.message {
font-size: 1.4em; font-size: 1.4em;
color: #000000; color: #000000;
padding-top: .8em; padding-top: .8em;
background-image: url(../images/reload.png);
background-repeat: no-repeat;
background-size: 16px;
background-position-x: 74%;
background-position-y: 60%;
}
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header_active h1:active {
background-image: url(../images/ajax-loader.gif) !important;
} }
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header_active:hover { #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header_active:hover {
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
@ -4783,7 +4791,8 @@ td.message span.message {
height: 16px; height: 16px;
} }
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header_active .egw_fw_ui_ajaxloader { #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header_active .egw_fw_ui_ajaxloader {
margin-top: -26px; margin-top: -15%;
margin-right: 25%;
} }
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_content { #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_content {
display: block; display: block;
@ -5001,7 +5010,7 @@ td.message span.message {
top: -9px; top: -9px;
width: 12px; width: 12px;
height: 3px; height: 3px;
background-color: #b3b3b3; background-color: #606060;
backface-visibility: hidden; backface-visibility: hidden;
border-radius: 2px; border-radius: 2px;
} }
@ -5009,7 +5018,7 @@ td.message span.message {
top: 9px; top: 9px;
transition-duration: 0.7s; transition-duration: 0.7s;
transform: rotate(-145deg) translate(8px, 2px); transform: rotate(-145deg) translate(8px, 2px);
background-color: #b4b4b4; background-color: #606060;
} }
#egw_fw_sidebar .egw_fw_sidebar_toggleOn { #egw_fw_sidebar .egw_fw_sidebar_toggleOn {
/* toggler button*/ /* toggler button*/
@ -5020,7 +5029,7 @@ td.message span.message {
float: none; float: none;
} }
#egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler span { #egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler span {
background-color: #b3b3b3; background-color: #b4b4b4;
transition: all 0.3s; 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:before,
@ -5028,15 +5037,16 @@ td.message span.message {
transform: none; transform: none;
width: 100%; width: 100%;
height: 5px; height: 5px;
background-color: #b4b4b4;
} }
#egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler:hover span { #egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler:hover span {
background-color: #b4b4b4; background-color: #606060;
} }
#egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler:hover span:before { #egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler:hover span:before {
background-color: #b4b4b4; background-color: #606060;
} }
#egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler:hover span:after { #egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler:hover span:after {
background-color: #b4b4b4; background-color: #606060;
} }
#egw_fw_sidebar .egw_fw_sidebar_toggleOn .egw_fw_ui_sidemenu_entry_content { #egw_fw_sidebar .egw_fw_sidebar_toggleOn .egw_fw_ui_sidemenu_entry_content {
display: none !important; display: none !important;

BIN
pixelegg/images/reload.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

27
pixelegg/less/layout_raster_sidebar.less
View File

@ -120,7 +120,17 @@
img {padding-left: 9px; padding-top: 6px; height: 18px;} img {padding-left: 9px; padding-top: 6px; height: 18px;}
h1 {text-transform: uppercase; font-size: 1.4em; .color_100_gray; padding-top: .8em;} h1 {
text-transform: uppercase;
font-size: 1.4em;
.color_100_gray;
padding-top: .8em;
background-image: url(../images/reload.png);
background-repeat: no-repeat;
background-size: 16px;
background-position-x: 74%;background-position-y: 60%;
&:active {background-image: url(../images/ajax-loader.gif) !important;}
}
&:hover {.box_shadow_standard_light_hover; .border_radius ( 5px, 0px, 0px, 27px );} &:hover {.box_shadow_standard_light_hover; .border_radius ( 5px, 0px, 0px, 27px );}
&:active {.box_shadow_standard_light_active; .border_radius ( 5px, 0px, 0px, 27px );} &:active {.box_shadow_standard_light_active; .border_radius ( 5px, 0px, 0px, 27px );}
@ -141,7 +151,7 @@
.dimension_width_height_s; .dimension_width_height_s;
} }
.egw_fw_ui_ajaxloader {margin-top: -26px;} .egw_fw_ui_ajaxloader {margin-top: -15%;margin-right: 25%;}
} }
@ -353,7 +363,7 @@
top: -9px; top: -9px;
width:12px; width:12px;
height: 3px; height: 3px;
background-color: #b3b3b3; background-color: #606060;
backface-visibility: hidden; backface-visibility: hidden;
border-radius: 2px; border-radius: 2px;
} }
@ -361,7 +371,7 @@
top:9px; top:9px;
transition-duration: 0.7s; transition-duration: 0.7s;
transform: rotate(-145deg) translate(8px, 2px); transform: rotate(-145deg) translate(8px, 2px);
background-color: #b4b4b4; background-color: #606060;
} }
position: relative; position: relative;
display: block; display: block;
@ -378,22 +388,23 @@
margin: 1px auto 4px; margin: 1px auto 4px;
float:none; float:none;
span { span {
background-color: #b3b3b3; background-color: #b4b4b4;
transition: all 0.3s; transition: all 0.3s;
&:before, &:after { &:before, &:after {
transform:none; transform:none;
width:100%; width:100%;
height:5px; height:5px;
background-color: #b4b4b4;
} }
} }
&:hover { &:hover {
span { span {
background-color: #b4b4b4; background-color: #606060;
&:before { &:before {
background-color: #b4b4b4; background-color: #606060;
} }
&:after { &:after {
background-color: #b4b4b4; background-color: #606060;
} }
} }
} }