Skip to content

Commit

Permalink
Suporte ao tema AdminLte
Browse files Browse the repository at this point in the history
  • Loading branch information
Erik Figueiredo committed May 25, 2016
1 parent b35dd58 commit e425c16
Show file tree
Hide file tree
Showing 68 changed files with 10,660 additions and 5 deletions.
59 changes: 54 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,9 @@ Em **src/View/AppView.php** adicionar `$this->loadHelper('Form', ['className' =>
$this->loadHelper('Form', ['className' => 'TwitterBootstrap.Form']);
}

### Para ativar o layout
### Layout padrão

#### Para ativar o layout

Informe `$this->viewBuilder()->theme('TwitterBootstrap');` no seu controller (por exemplo, AppController para usar em qualquer página).

Expand All @@ -41,15 +43,60 @@ No AppController apenas informe com `$this->set('project_name', 'Título que voc

Crie um arquivo chamado **nav-bar-right.ctp** dentro de **src/Template/Element** (você pode copiar o modelo dentro de **vendor/cakephp-brasil/twitter-bootstrap/src/Template/Element**)

Ou veja a **Publicando as views necessárias automáticamente**
Ou veja a **Publicando as views necessárias automaticamente**

#### Para alterar o menu superior esquerdo

Crie um arquivo chamado **nav-bar-left.ctp** dentro de **src/Template/Element** (você pode copiar o modelo dentro de **vendor/cakephp-brasil/twitter-bootstrap/src/Template/Element**)

Ou veja a **Publicando as views necessárias automáticamente**
Ou veja a **Publicando as views necessárias automaticamente**

### AdminLTE

#### Como ativar o layout

Informe `$this->viewBuilder()->theme('TwitterBootstrap');` no seu controller (por exemplo, AppController para usar em qualquer página) e em seguida ativar o tema usando `$this->viewBuilder()->layout('adminlte');`.

Em **src/View/AppView.php** adicionar `$this->loadHelper('Form', ['className' => 'TwitterBootstrap.Form']);` dentro de `initialize()`, desta forma:

public function initialize()
{
$this->loadHelper('Form', ['className' => 'TwitterBootstrap.Form']);
}

#### Para alterar o topo (header)

Crie um arquivo chamado **header.ctp** dentro de **src/Template/Element/adminlte** (você pode copiar o modelo dentro de **vendor/cakephp-brasil/twitter-bootstrap/src/Template/Element/adminlte**), pode ser necessário criar o diretório **adminlte**.

Ou veja a **Publicando as views necessárias automaticamente**

#### Para alterar a lateral esquerda

#### Publicando as views necessárias automáticamente
Crie um arquivo chamado **sidebar.ctp** dentro de **src/Template/Element/adminlte** (você pode copiar o modelo dentro de **vendor/cakephp-brasil/twitter-bootstrap/src/Template/Element/adminlte**), pode ser necessário criar o diretório **adminlte**.

Ou veja a **Publicando as views necessárias automaticamente**

#### Para alterar o rodapé

Crie um arquivo chamado **footer.ctp** dentro de **src/Template/Element/adminlte** (você pode copiar o modelo dentro de **vendor/cakephp-brasil/twitter-bootstrap/src/Template/Element/adminlte**), pode ser necessário criar o diretório **adminlte**.

Ou veja a **Publicando as views necessárias automaticamente**

#### Para alterar o bloco de conteúdo

Crie um arquivo chamado **content.ctp** dentro de **src/Template/Element/adminlte** (você pode copiar o modelo dentro de **vendor/cakephp-brasil/twitter-bootstrap/src/Template/Element/adminlte**), pode ser necessário criar o diretório **adminlte**.

Ou veja a **Publicando as views necessárias automaticamente**

#### Para alterar o menu direito (aparece quando clica no link da roda dentada no topo)

Crie um arquivo chamado **control_sidebar.ctp** dentro de **src/Template/Element/adminlte** (você pode copiar o modelo dentro de **vendor/cakephp-brasil/twitter-bootstrap/src/Template/Element/adminlte**), pode ser necessário criar o diretório **adminlte**.

Ou veja a **Publicando as views necessárias automaticamente**

Para desativar crie esta view vazia e remova o link no topo.

### Publicando as views acima necessárias automaticamente

Contribuição do [@josimar-lemos](https://github.com/josimar-lemos)

Expand All @@ -66,6 +113,8 @@ Ou:
$ cd path-to-project
$ bin/cake TwitterBootstrap.publish all

------ Fim da nota

## Para contribuir

Faça um fork deste projeto.
Faça um fork deste projeto, altere e envie um pull request, não esqueça de [sugerir recursos](https://github.com/CakePHPBrasil/TwitterBootstrap/issues).
28 changes: 28 additions & 0 deletions src/Template/Element/adminlte/content.ctp
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<?php if (isset($example_adminlte) and $example_adminlte === true) : ?>
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Page Header
<small>Optional description</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
<li class="active">Here</li>
</ol>
</section>

<!-- Main content -->
<section class="content">

<!-- Your Page Content Here -->

</section>
<!-- /.content -->
<?php else: ?>
<section class="content">
<div class="container-fluid">
<?= $this->Flash->render() ?>
<?= $this->fetch('content') ?>
</div>
</section>
<?php endif; ?>
70 changes: 70 additions & 0 deletions src/Template/Element/adminlte/control_sidebar.ctp
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Create the tabs -->
<ul class="nav nav-tabs nav-justified control-sidebar-tabs">
<li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
<li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<!-- Home tab content -->
<div class="tab-pane active" id="control-sidebar-home-tab">
<h3 class="control-sidebar-heading">Recent Activity</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript::;">
<i class="menu-icon fa fa-birthday-cake bg-red"></i>

<div class="menu-info">
<h4 class="control-sidebar-subheading">Langdon's Birthday</h4>

<p>Will be 23 on April 24th</p>
</div>
</a>
</li>
</ul>
<!-- /.control-sidebar-menu -->

<h3 class="control-sidebar-heading">Tasks Progress</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript::;">
<h4 class="control-sidebar-subheading">
Custom Template Design
<span class="label label-danger pull-right">70%</span>
</h4>

<div class="progress progress-xxs">
<div class="progress-bar progress-bar-danger" style="width: 70%"></div>
</div>
</a>
</li>
</ul>
<!-- /.control-sidebar-menu -->

</div>
<!-- /.tab-pane -->
<!-- Stats tab content -->
<div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
<!-- /.tab-pane -->
<!-- Settings tab content -->
<div class="tab-pane" id="control-sidebar-settings-tab">
<form method="post">
<h3 class="control-sidebar-heading">General Settings</h3>

<div class="form-group">
<label class="control-sidebar-subheading">
Report panel usage
<input type="checkbox" class="pull-right" checked>
</label>

<p>
Some information about this general settings option
</p>
</div>
<!-- /.form-group -->
</form>
</div>
<!-- /.tab-pane -->
</div>
</aside>
6 changes: 6 additions & 0 deletions src/Template/Element/adminlte/footer.ctp
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<!-- To the right -->
<div class="pull-right hidden-xs">
Anything you want
</div>
<!-- Default to the left -->
<strong>Copyright &copy; 2015 <a href="#">Company</a>.</strong> All rights reserved.
179 changes: 179 additions & 0 deletions src/Template/Element/adminlte/header.ctp
Original file line number Diff line number Diff line change
@@ -0,0 +1,179 @@
<!-- Logo -->
<a href="index2.html" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>A</b>LT</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>Admin</b>LTE</span>
</a>

<!-- Header Navbar -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<!-- Navbar Right Menu -->
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<li class="dropdown messages-menu">
<!-- Menu toggle button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope-o"></i>
<span class="label label-success">4</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 4 messages</li>
<li>
<!-- inner menu: contains the messages -->
<ul class="menu">
<li><!-- start message -->
<a href="#">
<div class="pull-left">
<!-- User Image -->
<?php
echo $this->Html->image(
'TwitterBootstrap.user2-160x160.jpg',
['class'=>'img-circle', "alt"=>"User Image"]
);
?>
</div>
<!-- Message title and timestamp -->
<h4>
Support Team
<small><i class="fa fa-clock-o"></i> 5 mins</small>
</h4>
<!-- The message -->
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<!-- end message -->
</ul>
<!-- /.menu -->
</li>
<li class="footer"><a href="#">See All Messages</a></li>
</ul>
</li>
<!-- /.messages-menu -->

<!-- Notifications Menu -->
<li class="dropdown notifications-menu">
<!-- Menu toggle button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell-o"></i>
<span class="label label-warning">10</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 10 notifications</li>
<li>
<!-- Inner Menu: contains the notifications -->
<ul class="menu">
<li><!-- start notification -->
<a href="#">
<i class="fa fa-users text-aqua"></i> 5 new members joined today
</a>
</li>
<!-- end notification -->
</ul>
</li>
<li class="footer"><a href="#">View all</a></li>
</ul>
</li>
<!-- Tasks Menu -->
<li class="dropdown tasks-menu">
<!-- Menu Toggle Button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-flag-o"></i>
<span class="label label-danger">9</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 9 tasks</li>
<li>
<!-- Inner menu: contains the tasks -->
<ul class="menu">
<li><!-- Task item -->
<a href="#">
<!-- Task title and progress text -->
<h3>
Design some buttons
<small class="pull-right">20%</small>
</h3>
<!-- The progress bar -->
<div class="progress xs">
<!-- Change the css width attribute to simulate progress -->
<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">20% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
</ul>
</li>
<li class="footer">
<a href="#">View all tasks</a>
</li>
</ul>
</li>
<!-- User Account Menu -->
<li class="dropdown user user-menu">
<!-- Menu Toggle Button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<!-- The user image in the navbar-->
<?php
echo $this->Html->image(
'TwitterBootstrap.user2-160x160.jpg',
['class'=>'user-image', "alt"=>"User Image"]
);
?>
<!-- hidden-xs hides the username on small devices so only the image appears. -->
<span class="hidden-xs">Alexander Pierce</span>
</a>
<ul class="dropdown-menu">
<!-- The user image in the menu -->
<li class="user-header">
<?php
echo $this->Html->image(
'TwitterBootstrap.user2-160x160.jpg',
['class'=>'img-circle', "alt"=>"User Image"]
);
?>

<p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2012</small>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<div class="row">
<div class="col-xs-4 text-center">
<a href="#">Followers</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Sales</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Friends</a>
</div>
</div>
<!-- /.row -->
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">Profile</a>
</div>
<div class="pull-right">
<a href="#" class="btn btn-default btn-flat">Sign out</a>
</div>
</li>
</ul>
</li>
<!-- Control Sidebar Toggle Button -->
<li>
<a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
</li>
</ul>
</div>
</nav>
Loading

0 comments on commit e425c16

Please sign in to comment.