Skip to content

Commit

Permalink
Working on the sidebars
Browse files Browse the repository at this point in the history
  • Loading branch information
@hillelcoren
hillelcoren committed Aug 31, 2016
1 parent 49650a0 commit a2f7d32
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 37 deletions.
2 changes: 1 addition & 1 deletion app/Http/Controllers/UserController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -364,6 +364,6 @@ public function saveSidebarState()
Session::put(SESSION_RIGHT_SIDEBAR, boolval(Input::get('show_right')));
}

return Session::get(SESSION_LEFT_SIDEBAR) ? 'true' : 'false';
return RESULT_SUCCESS;
}
}
3 changes: 3 additions & 0 deletions resources/lang/en/texts.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2087,6 +2087,9 @@
'update_invoiceninja_download_start' => 'Download :version',
'create_new' => 'Create New',

'toggle_navigation' => 'Toggle Navigation',
'toggle_history' => 'Toggle History',

);

return $LANG;
Expand Down
135 changes: 99 additions & 36 deletions resources/views/header.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,34 +31,57 @@
#wrapper {
padding-left: 0;
padding-right: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
#wrapper.toggled-left {
padding-left: 250px;
}
#sidebar-wrapper {
#wrapper.toggled-right {
padding-right: 250px;
}
#left-sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
xbackground: #09334f;
xbackground: #09334f;
background: #222;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
#right-sidebar-wrapper {
z-index: 1000;
position: fixed;
top: 0px;
right: 250px;
width: 0px;
height: 100%;
margin-right: -250px;
overflow-y: auto;
background: #222;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled-left #left-sidebar-wrapper {
width: 250px;
}
#wrapper.toggled-right #right-sidebar-wrapper {
width: 250px;
}
Expand All @@ -68,11 +91,16 @@
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
#wrapper.toggled-left #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
#wrapper.toggled-right #page-content-wrapper {
position: absolute;
padding-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
Expand All @@ -90,30 +118,33 @@
line-height: 40px;
}
.sidebar-nav li > div {
.sidebar-nav li > a {
display: block;
text-decoration: none;
color: #999999;
cursor: pointer;
}
.sidebar-nav li > div:hover,
.sidebar-nav li > div.active {
.sidebar-nav li:hover > a,
.sidebar-nav li > a.active {
text-decoration: none;
color: #fff;
}
.sidebar-nav li:hover,
.sidebar-nav li.active {
background: rgba(255,255,255,0.2);
}
.sidebar-nav li > div:hover {
.sidebar-nav li > a:hover {
text-decoration: none;
}
.sidebar-nav li > div > div.btn {
.sidebar-nav li > a.btn {
display: none;
}
.sidebar-nav li > div.hover > div.btn,
.sidebar-nav li > div:hover > div.btn {
.sidebar-nav li:hover > a {
display: block;
}
Expand All @@ -135,17 +166,30 @@
@media(min-width:768px) {
#wrapper {
padding-left: 250px;
padding-right: 250px;
}
#wrapper.toggled {
#wrapper.toggled-left {
padding-left: 0;
}
#sidebar-wrapper {
#wrapper.toggled-right {
padding-right: 0;
}
#left-sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
#right-sidebar-wrapper {
width: 250px;
}
#wrapper.toggled-left #left-sidebar-wrapper {
width: 0;
}
#wrapper.toggled-right #right-sidebar-wrapper {
width: 0;
}
Expand All @@ -154,7 +198,12 @@
position: relative;
}
#wrapper.toggled #page-content-wrapper {
#wrapper.toggled-left #page-content-wrapper {
position: relative;
margin-right: 0;
}
#wrapper.toggled-right #page-content-wrapper {
position: relative;
margin-right: 0;
}
Expand Down Expand Up @@ -490,11 +539,20 @@ function onSearchFocus() {
// manage sidebar state
$("#left-menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
var toggled = $("#wrapper").hasClass("toggled") ? '1' : '0';
$("#wrapper").toggleClass("toggled-left");
var toggled = $("#wrapper").hasClass("toggled-left") ? '1' : '0';
$.get('{{ url('save_sidebar_state') }}?show_left=' + toggled);
});
$("#right-menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled-right");
var toggled = $("#wrapper").hasClass("toggled-right") ? '1' : '0';
$.get('{{ url('save_sidebar_state') }}?show_right=' + toggled);
});
});
</script>
Expand All @@ -513,7 +571,7 @@ function onSearchFocus() {
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">
<a href="#" id="left-menu-toggle" class="menu-toggle hide-phone">
<a href="#" id="left-menu-toggle" class="menu-toggle hide-phone" title="{{ trans('texts.toggle_navigation') }}">
<i class="fa fa-bars" style="width:30px;padding-right:10px"></i>
</a>
<a href="{{ URL::to(NINJA_WEB_URL) }}" target="_blank">
Expand Down Expand Up @@ -591,7 +649,7 @@ function onSearchFocus() {
</ul>
</div>

<a href="#" id="left-menu-toggle" class="menu-toggle hide-phone">
<a href="#" id="right-menu-toggle" class="menu-toggle hide-phone" title="{{ trans('texts.toggle_history') }}">
<i class="fa fa-bars" style="width:30px;padding-left:14px"></i>
</a>

Expand Down Expand Up @@ -637,10 +695,11 @@ class="form-control" placeholder="{{ trans('texts.search') . ': ' . trans('texts
</div><!-- /.navbar-collapse -->

</nav>
<div id="wrapper" {!! session(SESSION_LEFT_SIDEBAR) ? 'class="toggled"' : '' !!}>

<div id="wrapper" class='{!! session(SESSION_LEFT_SIDEBAR) ? 'toggled-left' : '' !!} {!! session(SESSION_RIGHT_SIDEBAR, true) ? 'toggled-right' : '' !!}'>

<!-- Sidebar -->
<div id="sidebar-wrapper">
<div id="left-sidebar-wrapper">
<ul class="sidebar-nav" style="padding-top:20px">
@foreach([
'dashboard' => 'tachometer',
Expand All @@ -655,26 +714,30 @@ class="form-control" placeholder="{{ trans('texts.search') . ': ' . trans('texts
'vendors' => 'building',
'settings' => 'cog',
] as $option => $icon)
<li style="border-bottom:solid 1px">
<div onclick="location.href='{{ url($option == 'recurring' ? 'recurring_invoice' : $option) }}'"
<li style="border-bottom:solid 1px" class="{{ Request::is("{$option}*") ? 'active' : '' }}">
@if ($option != 'dashboard' && $option != 'settings')
@if (Auth::user()->can('create', substr($option, 0, -1)))
<a type="button" class="btn btn-primary btn-sm pull-right" style="margin-top:10px;margin-right:10px;text-indent:0px"
href="{{ url("/{$option}/create") }}">
<i class="fa fa-plus-circle" style="color:white;width:20px" title="{{ trans('texts.create_new') }}"></i>
</a>
@endif
@endif
<a href="{{ url($option == 'recurring' ? 'recurring_invoice' : $option) }}"
style="font-size:16px; padding-top:6px; padding-bottom:6px"
class="{{ Request::is("{$option}*") ? 'active' : '' }}">
<i class="fa fa-{{ $icon }}" style="width:46px; color:white; padding-right:10px"></i>
{{ ($option == 'recurring_invoices') ? trans('texts.recurring') : trans("texts.{$option}") }}
@if ($option != 'dashboard' && $option != 'settings')
@if (Auth::user()->can('create', substr($option, 0, -1)))
<div type="button" class="btn btn-primary btn-sm pull-right" style="margin-top:5px;margin-right:10px;text-indent:0px"
onclick="event.cancelBubble = true;if(event.stopPropagation) event.stopPropagation();location.href='{{ url("/{$option}/create") }}'">
<i class="fa fa-plus-circle" style="color:white;width:20px" title="{{ trans('texts.create_new') }}"></i>
</div>
@endif
@endif
</div>
</a>
</li>
@endforeach
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- /#left-sidebar-wrapper -->

<div id="right-sidebar-wrapper">
SIDEBAR
</div>

<!-- Page Content -->
<div id="page-content-wrapper">
Expand Down

0 comments on commit a2f7d32

Please sign in to comment.