FEATURE: style menu

This commit adds some markup to sidebars in admin.
This commit is contained in:
Michal Kváček
2016-01-24 16:55:23 +01:00
parent 8a91a95a67
commit 5d7e535239
14 changed files with 228 additions and 99 deletions
@@ -0,0 +1,77 @@
<?php
namespace App\MenuPresenters;
use Pingpong\Menus\MenuItem;
use Pingpong\Menus\Presenters\Presenter;
class FoundationDrilldownMenuPresenter extends Presenter
{
/**
* {@inheritdoc }
*/
public function getOpenTagWrapper()
{
return PHP_EOL . '<ul class="vertical menu" data-drilldown>' . PHP_EOL;
}
/**
* {@inheritdoc }
*/
public function getCloseTagWrapper()
{
return PHP_EOL . '</ul>' . PHP_EOL;
}
/**
* {@inheritdoc }
*/
public function getMenuWithoutDropdownWrapper($item)
{
return '<li' . $this->getActiveState($item) . '><a href="' . $item->getUrl() . '">' . $item->getIcon() . ' ' . $item->title . '</a></li>' . PHP_EOL;
}
/**
* {@inheritdoc }
*/
public function getActiveState(MenuItem $item)
{
$active = ' class="active"';
if (empty($item->getChilds())) {
// for direct menu input return if page is active
return \Request::is($item->getRequest()) ? $active : null;
} else {
// on nested menu inputs loop over children and in case any of them is active, mark active also root level
foreach ($item->getChilds() as $child) {
if ($this->getActiveState($child)) {
return $active;
}
}
}
return null;
}
/**
* {@inheritdoc }
*/
public function getDividerWrapper()
{
return '<li class="divider"></li>' . PHP_EOL;
}
/**
* {@inheritdoc }
*/
public function getMenuWithDropDownWrapper($item)
{
$active = $this->getActiveState($item);
return '<li>
<a ' . $active . ' href="#">' . $item->getIcon() . ' ' . $item->title . '</a>
<ul class="vertical menu">
' . $this->getChildMenuItems($item) . '
</ul>
</li>' . PHP_EOL;;
}
}
@@ -0,0 +1,61 @@
<?php
namespace App\MenuPresenters;
use Pingpong\Menus\Presenters\Presenter;
class FoundationDropdownMenuPresenter extends Presenter
{
/**
* {@inheritdoc }
*/
public function getOpenTagWrapper()
{
return PHP_EOL . '<ul class="vertical dropdown menu" data-dropdown-menu>' . PHP_EOL;
}
/**
* {@inheritdoc }
*/
public function getCloseTagWrapper()
{
return PHP_EOL . '</ul>' . PHP_EOL;
}
/**
* {@inheritdoc }
*/
public function getMenuWithoutDropdownWrapper($item)
{
$link = '<a href="' . $item->getUrl() . '">' . $item->getIcon() . ' ' . $item->title . '</a>';
return '<li' . $this->getActiveState($item) . '>' . $link . '</li>'.PHP_EOL;
}
/**
* {@inheritdoc }
*/
public function getActiveState($item)
{
return \Request::is($item->getRequest()) || $item->hasActiveOnChild ? ' class="active"' : null;
}
/**
* {@inheritdoc }
*/
public function getDividerWrapper()
{
return '<li class="divider"></li>'.PHP_EOL;
}
/**
* {@inheritdoc }
*/
public function getMenuWithDropDownWrapper($item)
{
return '<li>
<a href="#">' . $item->getIcon() . ' ' . $item->title . '</a>
<ul class="vertical menu">
' . $this->getChildMenuItems($item) . '
</ul>
</li>' . PHP_EOL;;
}
}
@@ -0,0 +1,10 @@
<?php
namespace App\MenuPresenters;
class FoundationInitializedDropdownMenuPresenter extends FoundationDropdownMenuPresenter
{
public function getOpenTagWrapper()
{
return PHP_EOL . '<ul class="menu">' . PHP_EOL;
}
}
@@ -1,63 +0,0 @@
<?php
namespace App\MenuPresenters;
use Pingpong\Menus\Presenters\Presenter;
class FoundationMenuPresenter extends Presenter
{
/**
* {@inheritdoc }
*/
public function getOpenTagWrapper()
{
return PHP_EOL . '<ul class="vertical menu-bar icon-left">' . PHP_EOL;
}
/**
* {@inheritdoc }
*/
public function getCloseTagWrapper()
{
return PHP_EOL . '</ul>' . PHP_EOL;
}
/**
* {@inheritdoc }
*/
public function getMenuWithoutDropdownWrapper($item)
{
return '<li'.$this->getActiveState($item).'><a href="'. $item->getUrl() .'">'.$item->getIcon().' '.$item->title.'</a></li>';
}
/**
* {@inheritdoc }
*/
public function getActiveState($item)
{
return \Request::is($item->getRequest()) ? ' class="active"' : null;
}
/**
* {@inheritdoc }
*/
public function getDividerWrapper()
{
return '<li class="divider"></li>';
}
/**
* {@inheritdoc }
*/
public function getMenuWithDropDownWrapper($item)
{
return '<li class="has-dropdown">
<a href="#">
'.$item->getIcon().' '.$item->title.'
</a>
<ul class="dropdown">
'.$this->getChildMenuItems($item).'
</ul>
</li>' . PHP_EOL;
;
}
}
+14 -3
View File
@@ -3,7 +3,6 @@
namespace App\Models;
use Illuminate\Auth\Authenticatable;
use Illuminate\Auth\Passwords\CanResetPassword;
use Illuminate\Contracts\Auth\Authenticatable as AuthenticableInterface;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Foundation\Auth\Access\Authorizable;
@@ -14,7 +13,6 @@ use Illuminate\Foundation\Auth\Access\Authorizable;
class User extends Model implements AuthenticableInterface
{
use Authenticatable, Authorizable;
public $timestamps = false;
protected $fillable = [
'email',
@@ -32,11 +30,24 @@ class User extends Model implements AuthenticableInterface
'password',
'remember_token',
];
const STATE_DELETED = 'deleted';
const STATE_BLOCKED = 'blocked';
const STATE_ACTIVE = 'active';
const ROLE_VISITOR = 'visitor';
const ROLE_EDITOR = 'editor';
const ROLE_ADMIN = 'admin';
/**
* Getter for Gravatar URL
*
* This method returns full path (url) to user's Gravatar. It accepts optional parameter for setting size.
*
* @param int $size size of rendered gravatar
*
* @return string
*/
public function gravatar($size = 50)
{
return "http://www.gravatar.com/avatar/" . md5(strtolower(trim($this->email))) . "?s=" . $size;
}
}
@@ -4,7 +4,7 @@ namespace App\Providers;
use Illuminate\Support\ServiceProvider;
class AdminProvider extends ServiceProvider
class AdminMenusProvider extends ServiceProvider
{
/**
* Bootstrap the application services.
@@ -28,14 +28,18 @@ class AdminProvider extends ServiceProvider
$menu->url(action('Admin\Dashboard@getIndex'), trans('admin/mainMenu.dashboard'), 1, ['icon' => 'fa fa-dashboard']);
$menu->dropdown(trans('admin/mainMenu.userManagement'), function($sub) {
$sub->url(action('Admin\UserManagement@getNewUser'), trans('admin/mainMenu.newUser'), 1, ['icon' => 'fa fa-user-plus']);
$sub->url(action('Admin\UserManagement@getOverview', ['state' => 'all']), trans('admin/mainMenu.usersOverview'), 2, ['icon' => 'fa fa-users']);
$sub->url(action('Admin\UserManagement@getOverview'), trans('admin/mainMenu.usersOverview'), 2, ['icon' => 'fa fa-users']);
}, ['icon' => 'fa fa-users']);
$menu->url('#', trans('admin/mainMenu.customFields'), 30, ['icon' => 'fa fa-code']);
$menu->url('#', trans('admin/mainMenu.settings'), 50, ['icon' => 'fa fa-gear']);
});
// create menu with user profile
\Menu::create('profileMenu', function ($menu) {
// @todo add profile menu
$menu->url('#', trans('admin/userManagement.profile'));
$menu->url('#', trans('admin/common.logout'));
});
}
-1
View File
@@ -13,7 +13,6 @@ class GlobalViewDataProvider extends ServiceProvider
*/
public function boot()
{
view()->share('something', 'some value');
view()->share('vendorName', 'ja s.r.o.');
}
+1 -1
View File
@@ -148,7 +148,7 @@ return [
App\Providers\EventServiceProvider::class,
App\Providers\RouteServiceProvider::class,
App\Providers\GlobalViewDataProvider::class,
App\Providers\AdminProvider::class,
App\Providers\AdminMenusProvider::class,
],
/*
+3 -2
View File
@@ -9,9 +9,10 @@ return [
'nav-tab' => 'Pingpong\Menus\Presenters\Bootstrap\NavTabPresenter',
'sidebar' => 'Pingpong\Menus\Presenters\Bootstrap\SidebarMenuPresenter',
'navmenu' => 'Pingpong\Menus\Presenters\Bootstrap\NavMenuPresenter',
'foundation' => 'App\MenuPresenters\FoundationMenuPresenter',
'foundation-drilldown' => 'App\MenuPresenters\FoundationDrilldownMenuPresenter',
'foundation-dropdown' => 'App\MenuPresenters\FoundationDropdownMenuPresenter',
'foundation-dropdown-initialized' => 'App\MenuPresenters\FoundationInitializedDropdownMenuPresenter',
],
'ordering' => false,
];
+12 -3
View File
@@ -5,15 +5,24 @@
}
header {
background: #ddd;
}
.sidebar {
background: #eee;
}
.login-form {
margin-top: 4em;
}
.active {
font-weight: bolder;
}
/**
Footer
*/
footer {
margin-top: 10em;
}
+5
View File
@@ -0,0 +1,5 @@
<?php
return [
'admin' => 'Administration',
'logout' => 'Log out'
];
+4 -2
View File
@@ -2,7 +2,9 @@
return [
'dashboard' => 'Dashboard',
'userManagement' => 'User Management',
'userManagement' => 'Users',
'newUser' => 'New User',
'usersOverview' => 'Overview'
'usersOverview' => 'Overview',
'customFields' => 'Custom fields',
'settings' => 'Settings'
];
+2 -1
View File
@@ -10,6 +10,7 @@ return [
'role_editor' => 'Editor',
'role_visitor' => 'Visitor',
'register' => 'Create user',
'registrationSuccessfull' => 'New user successfully added.'
'registrationSuccessfull' => 'New user successfully added.',
'profile' => 'Your profile'
];
+22 -10
View File
@@ -5,7 +5,7 @@
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@yield('head_meta')
<title>@yield('pageName') {{$vendorName}}</title>
<title>@yield('pageName', @trans('admin/common.admin')) | {{$vendorName}}</title>
<link rel="stylesheet" href="{{asset('../resources/assets/css/foundation.min.css')}}" />
<link rel="stylesheet" href="{{asset('../resources/assets/css/font-awesome.min.css')}}" />
<link rel="stylesheet" href="{{asset('../resources/assets/css/admin.css')}}" />
@@ -16,30 +16,38 @@
<div id="container">
<header class="row">
<section class="logo columns large-2">
...
<section class="logo columns small-1 medium-3 large-2">
</section>
<section class="heading columns large-8">
<h1>{{$vendorName}}</h1>
<section class="heading columns small-10 medium-8 large-8">
</section>
<section class="profile columns large-2">
{!! Menu::render('profileMenu') !!}
<section class="profile columns small-10 medium-1 large-2">
<ul class="vertical dropdown menu" data-dropdown-menu>
<li>
<a href="#">
<img src="{{Auth::user()->gravatar(25)}}" alt="" />
{{Auth::user()->getAttribute('name')}}
</a>
{!! Menu::render('profileMenu', 'foundation-dropdown-initialized') !!}
</li>
</ul>
</section>
</header>
<div class="row">
<section class="sidebar large-2 columns">
{!! Menu::render('mainMenu', 'foundation') !!}
{!! Menu::render('mainMenu', 'foundation-drilldown') !!}
</section>
<section class="content large-10 columns">
<section class="content small-11 medium-9 large-10 columns">
@yield('content')
</section>
</div>
<footer>
<footer class="row text-center">
&copy; {{$vendorName}} {{date('Y')}}
</footer>
</div>
@@ -49,5 +57,9 @@
@yield('javascripts')
<script type="application/javascript">
$ (document).foundation ();
</script>
</body>
</html>