Implemento themeSelector

assets/css/startmin.css

@@ -23,6 +23,10 @@ body {
     }
 }
 
+.navbar {
+    min-height: 50px;
+}
+
 .navbar-header {
     float: left;
 }
@@ -109,6 +113,36 @@ body {
     padding-left: 0;
 }
 
+.sidebar .sidebar-nav .theme-selector {
+    position: fixed;
+    bottom: 9px;
+    left: 198px;
+}
+
+.contracted .sidebar .sidebar-nav .theme-selector {
+    left: 3px;
+}
+
+.theme-selector a.btn {
+    border: none;
+}
+
+.theme-selector a.btn.light {
+    background: #ddd;
+}
+
+.theme-selector a.btn.dark {
+    background: #666;
+}
+
+.theme-selector a.btn.light i {
+    color: #222;
+}
+
+.theme-selector a.btn.dark i {
+    color: #fff;
+}
+
 .sidebar .sidebar-search {
     padding: 15px;
 }
@@ -656,9 +690,6 @@ table.dataTable thead .sorting:after {
     background-color: #a94442; /* active bg color */
 }
 
-
-
-
 .navbar-top-links li span.title {
     padding: 3px 20px;
     display: block;
@@ -682,6 +713,15 @@ table.dataTable thead .sorting:after {
     text-align: right;
 }
 
+.btn-toolbar .btn, .btn-toolbar .btn-group, .btn-toolbar .input-group {
+    float: none;
+}
+
+.btn-toolbar .btn {
+    padding: 6px 12px;
+    border-width: 1px;
+}
+
 .alert {
     margin-top: 20px;
 }
@@ -728,6 +768,10 @@ select:focus {
     border-color: #0B62A4;
 }
 
+.navbar-inverse .navbar-toggle {
+    margin: 8px 15px 8px 0;
+}
+
 .navbar-inverse .navbar-toggle .icon-bar {
     background-color: #666;
 }
@@ -801,11 +845,16 @@ select:focus {
 
 }
 
+.modal-dialog {
+    z-index: 1060;
+}
+
 .modal-content {
     background-color: #f8f8f8;
 }
 
 .navbar-brand {
+    height: 50px;
     padding: 20px 15px 0;
 }
 
@@ -857,3 +906,258 @@ tfoot td {
 .ui-jqgrid.ui-jqgrid-bootstrap tr.jqgfirstrow > td, .ui-jqgrid.ui-jqgrid-bootstrap tr.jqgrow > td, .ui-jqgrid.ui-jqgrid-bootstrap tr.jqgroup > td, .ui-jqgrid.ui-jqgrid-bootstrap tr.jqfoot > td {
     padding: .3em;
 }
+
+.form-control {
+    height: 41px;
+}
+
+
+/* Theme Darkly */
+
+body.theme-D {
+    background-color: #333;
+    color: #ccc;
+}
+
+body.theme-D #page-wrapper {
+    background-color: #222;
+}
+
+@media(min-width:768px) {
+    body.theme-D #page-wrapper {
+        border-left: 1px solid #222;
+    }
+}
+
+body.theme-D .navbar-default {
+    background-color: #333;
+}
+
+body.theme-D .navbar-top-links>li>a, body.theme-D .navbar-top-links>li>a>span {
+    color: #d6d6d6;
+}
+
+body.theme-D .navbar-top-links>li>a:hover, .navbar-top-links>li>a:focus, .navbar-top-links>.open>a, .navbar-top-links>.open>a:hover, .navbar-top-links>.open>a:focus,
+body.theme-D .navbar-top-links>li>a:hover>span, .navbar-top-links>li>a:focus>span, .navbar-top-links>.open>a>span, .navbar-top-links>.open>a:hover>span, .navbar-top-links>.open>a:focus>span {
+    color: #fff;
+    background-color: inherit;
+}
+
+body.theme-D .navbar-inverse .navbar-brand {
+    color: #d6d6d6;
+}
+
+body.theme-D .navbar-inverse .navbar-toggle:hover, body.theme-D .navbar-inverse .navbar-toggle:focus {
+    background-color: inherit;
+}
+
+body.theme-D .navbar-inverse .navbar-toggle {
+    border-color: #ccc;
+}
+
+body.theme-D .navbar-inverse .navbar-collapse, body.theme-D .navbar-inverse .navbar-form {
+    border-color: #262626;
+}
+
+body.theme-D .sidebar ul li {
+    border-bottom: 1px solid #444;
+}
+
+body.theme-D .sidebar ul li a i {
+    color: #ddd;
+}
+
+body.theme-D .contracted .sidebar ul li a i {
+    color: inherit;
+}
+
+body.theme-D .sidebar ul li a.active {
+    background-color: #222;
+}
+
+body.theme-D .sidebar .cuenta-mobile {
+    border-bottom: 1px solid #e7e7e7;
+    background: #fff;
+}
+
+body.theme-D .btn-primary.btn-outline {
+    color: #428bca;
+}
+
+body.theme-D .btn-success.btn-outline {
+    color: #5cb85c;
+}
+
+body.theme-D .btn-info.btn-outline {
+    color: #5bc0de;
+}
+
+body.theme-D .btn-warning.btn-outline {
+    color: #f0ad4e;
+}
+
+body.theme-D .btn-danger.btn-outline {
+    color: #d9534f;
+}
+
+body.theme-D .btn-primary.btn-outline:hover,
+body.theme-D .btn-success.btn-outline:hover,
+body.theme-D .btn-info.btn-outline:hover,
+body.theme-D .btn-warning.btn-outline:hover,
+body.theme-D .btn-danger.btn-outline:hover {
+    color: #fff;
+}
+
+body.theme-D .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
+    color: #0B62A4 !important;
+}
+
+body.theme-D .btn-toolbar i, body.theme-D .navbar-top-links ul a i {
+    color: #337ab7;
+}
+
+body.theme-D a {
+    color: #ccc;
+}
+
+body.theme-D a:hover, body.theme-D a:focus {
+    color: #fff;
+}
+
+body.theme-D .btn-primary {
+    background-color: #0B62A4;
+    border-color: #0B62A4;
+}
+
+body.theme-D .btn-secondary {
+    color: #ffffff;
+    background-color: #464545;
+    border-color: #464545;
+}
+
+body.theme-D .btn-primary.active, body.theme-D .btn-primary.focus, body.theme-D .btn-primary:active, body.theme-D .btn-primary:focus, body.theme-D .btn-primary:hover, body.theme-D .open>.dropdown-toggle.btn-primary {
+    background-color: #0B62A4;
+    border-color: #0B62A4;
+}
+
+body.theme-D input[type="text"]:focus,
+body.theme-D input[type="password"]:focus,
+body.theme-D select:focus {
+    border: 1px solid #0B62A4 !important;
+}
+
+body.theme-D .navbar-inverse {
+    box-shadow: 0 6px 12px rgba(0,0,0,.175);
+    background-color: #0B62A4;
+    border-color: #0B62A4;
+}
+
+body.theme-D .navbar-inverse .navbar-toggle .icon-bar {
+    background-color: #d6d6d6;
+}
+
+body.theme-D .navbar-inverse .navbar-toggle:hover .icon-bar, body.theme-D .navbar-inverse .navbar-toggle:focus .icon-bar {
+    background-color: #fff;
+}
+
+body.theme-D .contracted #side-menu > li:hover ul.nav-second-level {
+    background: #eee;
+    border-top: 1px solid #e7e7e7;
+}
+
+body.theme-D .contracted #side-menu > li:hover {
+    background: #eee;
+}
+
+body.theme-D .modal-content {
+    background-color: #303030;
+}
+
+body.theme-D tfoot td {
+    background: #eee;
+}
+
+body.theme-D #periodo {
+    background: #fff;
+    color: #1d3b4a;
+    border: 1px solid #ddd;
+    border-width: 1px 1px 3px !important;
+}
+
+body.theme-D #periodo i {
+    color: #0B62A4;
+}
+
+body.theme-D .daterangepicker {
+    box-shadow: 0 6px 12px rgba(0,0,0,.175);
+}
+
+body.theme-D table.dataTable tr.dtrg-group td {
+    background: #e6e6e6;
+}
+
+body.theme-D table.dataTable tr.dtrg-group.dtrg-start td {
+    background: #eee !important;
+}
+
+body.theme-D .panel-default>.panel-heading {
+    color: #0B62A4;
+}
+
+body.theme-D .tooltip > .tooltip-inner {
+    background-color: #727272;
+    color: #fff;
+}
+
+body.theme-D .tooltip.top .tooltip-arrow {
+    border-top-color: #727272;
+}
+
+body.theme-D a span {
+    color: #b2b2b2;
+}
+
+body.theme-D .ui-jqgrid.ui-jqgrid-bootstrap {
+    border: 1px solid #393939;
+}
+
+body.theme-D .ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-hdiv, body.theme-D .ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-legacy-subgrid > thead {
+    background-color: inherit;
+}
+
+body.theme-D .ui-jqgrid-btable > tbody > tr:nth-child(odd) {
+    background: #333;
+}
+
+body.theme-D label.error {
+    color: yellow;
+}
+
+body.theme-D .form-control {
+    color: #ccc;
+    background-color: #191919;
+}
+
+body.theme-D .theme-selector a.btn.light {
+    background: #999;
+}
+
+body.theme-D .theme-selector a.btn.dark {
+    background: #222;
+}
+
+body.theme-D .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
+    color: inherit;
+    background-color: #303030;
+    border: 1px solid #464545;
+    border-bottom-color: #303030;
+}
+
+body.theme-D .nav-tabs>li>a, .nav-pills>li>a {
+    background: #222;
+    border-bottom: 1px solid #464545;
+}
+
+body.theme-D .panel {
+    box-shadow: 0 0 10px #161616;
+}

protected/controllers/usuario.php

@@ -417,6 +417,13 @@ class usuario extends controller
                     'rules' => array(
                         'required' => true
                     )
+                )),
+
+                new select('theme', array(
+                    webApp::THEME_LIGHT  => 'Claro',
+                    webApp::THEME_DARKLY => 'Oscuro'
+                ), array(
+                    'label' => 'Tema'
                 ))
 
             ))
@@ -442,13 +449,15 @@ class usuario extends controller
                     )
                 );
 
+                $this->webApp()->setTheme($param['theme']);
+
                 $this->notify('Sus datos se actualizaron correctamente', notificacion::SUCCESS);
 
             }
 
         } else {
 
-            $usuario = $this->db()->queryRow('SELECT email, nombre FROM usuarios WHERE id = :id', array(
+            $usuario = $this->db()->queryRow('SELECT email, nombre, theme FROM usuarios WHERE id = :id', array(
                 'id' => $this->webApp()->getUsuarioId()
             ));
 
@@ -461,6 +470,31 @@ class usuario extends controller
         ));
     }
 
+    public function theme()
+    {
+        $this->webApp()->requireLoginRedir();
+
+        if (isset($_GET['id'])) {
+
+            if ($this->webApp()->setTheme($_GET['id'])) {
+
+                $this->db()->update('usuarios',
+                    array(
+                        'theme' => $_GET['id']
+                    ),
+                    array(
+                        'id' => $this->webApp()->getUsuarioId()
+                    )
+                );
+
+            }
+
+            $this->redirect($_SERVER['HTTP_REFERER']);
+
+        }
+
+    }
+
     private function getCuentasRoleSelect(&$col2)
     {
         $cuentas = $this->db()->query('SELECT * FROM cuentas WHERE active = :active ORDER BY cuenta', array(

protected/views/_includes/header.php

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="es">
 <head>
 
     <title><?php echo (empty($this->titulo) ? '' : ($this->titulo . ' | ')) . $this->webApp()->getConfig('TITULO');?></title>
@@ -7,7 +7,7 @@
     <?php $this->renderInclude("head");?>
 
 </head>
-<body>
+<body class="theme-<?php echo $this->webApp()->getTheme();?>">
 
     <div id="wrapper"<?php echo (isset($_COOKIE["sidebar-contracted"]) and $_COOKIE["sidebar-contracted"] == "1") ? ' class="contracted"' : '';?>>
 

protected/views/_includes/menu.php

@@ -64,6 +64,13 @@ $cuenta = $this->webApp()->getCuenta();
 
             </ul>
 
+            <div class="theme-selector">
+                <div class="btn-group">
+                    <a href="usuario/theme?id=<?php echo oxusmedia\webApp\webApp::THEME_LIGHT;?>" id="theme-light" class="btn btn-xs light<?php echo $this->webApp()->getTheme() == oxusmedia\webApp\webApp::THEME_LIGHT ? ' active' : '';?>" title="Cambiar a tema Claro"><i class="fa fa-sun-o"></i></a>
+                    <a href="usuario/theme?id=<?php echo oxusmedia\webApp\webApp::THEME_DARKLY;?>" id="theme-dark" class="btn btn-xs dark<?php echo $this->webApp()->getTheme() == oxusmedia\webApp\webApp::THEME_DARKLY ? ' active' : '';?>" title="Cambiar a tema Oscuro"><i class="fa fa-moon-o"></i></a>
+                </div>
+            </div>
+
         </div>
     </div>