Merge pull request #73 from emrysr/dark-sidebar

Dark sidebar

Views/sidebar.php

@@ -1,6 +1,6 @@
-<table class="table table-condensed" id="feeds"></table>
+<table class="table table-condensed mx-3" id="feeds"></table>
 
-<div id="mygraphs">
+<div id="mygraphs" class="px-3">
     <h4><a href="#" class="collapsed" data-toggle="collapse" data-target="#graph-list">
         <?php echo _('My Graphs') ?> <span class="arrow arrow-down pull-right"></span>
     </a></h4>

graph.css

@@ -22,6 +22,34 @@
 }
 
 
+#sub_nav li{
+    transition: all .2s ease-out;
+    height: 0;
+    border-bottom-width: 0;
+    overflow: hidden;
+}
+/* show all menu items when 'in' class added */
+#sub_nav.in li,
+#sub_nav li.active{
+    height: 3.125rem;
+    border-bottom-width: 1px;
+}
+
+/* sidebar #mygraphs */
+#graph-list{
+    width: 14rem;
+    overflow: hidden;
+    position: relative;
+    /* margin-bottom: 3rem; */
+}
+#graph-list input{
+    width:12rem;
+}
+#graph-list select{
+    width:13rem;
+}
+/* end of sidebar #mygraphs */
+
 .feed-options {
     background-color:#eee;
     overflow-x: scroll;
@@ -179,6 +207,48 @@ input.feed-tag-checkbox-left, input.feed-tag-checkbox-right{
     outline: none;
 }
 
+table#feeds.table thead th{
+    border-top: 4px solid #333;
+    font-weight: normal !important;
+    color: #adadad;
+    cursor: pointer;
+    transition: all .3s ease-in;
+    padding-left: 0;
+}
+table#feeds.table thead th:hover{
+    color: #f8f9fa;
+    text-decoration: underline;
+}
+table#feeds.table input[type="checkbox"] { margin: 0 }
+table#feeds.table tbody tr > *{
+    border-color: #444;
+}
+table#feeds.table tbody tr th{
+    cursor: pointer;
+    transition: all .3s ease-in;
+    font-weight: normal;
+}
+table#feeds.table tbody tr th:hover{
+    text-decoration: underline;
+}
+table#feeds.table tbody tr th.feed-title span{
+    max-width:9em;
+}
+
+table#feeds.table .caret {
+    border-top-color: currentColor !important;
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: .4em;
+}
+
+#graph-wrapper{
+    transition: all .3s ease-out;
+}
+#graph-wrapper.empty{
+    opacity: .3;
+    transform: scale(.99);
+}
 #download-buttons form{
     margin: 0;
     padding: 0;

graph.js

@@ -40,7 +40,7 @@ $('#graph_right').click(function () {floatingtime=0; view.panright(); graph_relo
 $('#graph_left').click(function () {floatingtime=0; view.panleft(); graph_reloaddraw();});
 $('.graph_time').click(function () {
     floatingtime=1; 
-    view.timewindow($(this).attr("time")); 
+    view.timewindow($(this).data("time")); 
     graph_reloaddraw();
 });
 
@@ -257,7 +257,7 @@ function graph_init_editor()
            if (name.length>20) {
                name = name.substr(0,20)+"..";
            }
-           out += "<th class='feed-title' data-feedid='"+feedsbytag[tag][z].id+"'>"+name+"</th>";
+           out += "<th class='feed-title' title='"+name+"' data-feedid='"+feedsbytag[tag][z].id+"'><span class='text-truncate d-inline-block'>"+name+"</span></th>";
            out += "<td><input class='feed-select-left' data-feedid='"+feedsbytag[tag][z].id+"' type='checkbox'></td>";
            out += "<td><input class='feed-select-right' data-feedid='"+feedsbytag[tag][z].id+"' type='checkbox'></td>";
            out += "</tr>";
@@ -609,7 +609,7 @@ function graph_reload()
         var title = _lang['Select a feed'] + '.';
         var message = _lang['Please select a feed from the Feeds List'];
         var icon = '<svg class="icon show_chart"><use xlink:href="#icon-show_chart"></use></svg>';
-        var markup = ['<div class="alert alert-info"><a href="#" class="open-sidebar"><strong>',title,'</strong>',message,'</a></div>'].join(' ');
+        var markup = ['<div class="alert alert-info"><a href="#" class="open-sidebar"><strong>',icon,title,'</strong>',message,'</a></div>'].join(' ');
         $('#error').show()
         .html(markup);
         return false;
@@ -1470,35 +1470,7 @@ function graph_delete(id) {
 
     graph_load_savedgraphs();
 }
-// ----------------------------------------------------------------------------------------
-// Sidebar
-// ----------------------------------------------------------------------------------------
-$("#sidebar-open").click(function(){
-    $("#sidebar-wrapper").css("left","250px");
-    $("#sidebar-close").show();
-});
-
-$("#sidebar-close").click(function(){
-    $("#sidebar-wrapper").css("left","0");
-    $("#sidebar-close").hide();
-});
 
-function sidebar_resize() {
-    var width = $(window).width();
-    var height = $(window).height();
-    $("#sidebar-wrapper").height(height-41);
-
-    if (width<1024) {
-        $("#sidebar-wrapper").css("left","0");
-        $("#wrapper").css("padding-left","0");
-        $("#sidebar-open").show();
-    } else {
-        $("#sidebar-wrapper").css("left","250px");
-        $("#wrapper").css("padding-left","250px");
-        $("#sidebar-open").hide();
-        $("#sidebar-close").hide();
-    }
-}
 
 // ----------------------------------------------------------------------------------------
 function load_feed_selector() {

graph_controller.php

@@ -189,7 +189,7 @@ function graph_controller()
         }
     }
     else {
-        $route->sidebar = view("Modules/graph/Views/sidebar.php");
+        $route->sidebar = view("Modules/graph/Views/sidebar.php",array());
         $result = view("Modules/graph/view.php", array("session" => $session["write"]));
     }
 

graph_menu.php

@@ -1,6 +1,6 @@
 <?php
 
-    $menu['sidebar']['setup'][] = array(
+    $menu['sidebar']['emoncms'][] = array(
         'text' => _("Graphs"),
         'path' => 'graph',
         'active'=>'graph',
@@ -10,4 +10,4 @@
         'data'=> array('sidebar' => '#sidebar_graph')
     );
 
-    $menu['sidebar']['includes']['setup']['graph'] = view('Modules/graph/Views/sidebar.php');
+    $menu['sidebar']['includes']['emoncms']['graph'] = view('Modules/graph/Views/sidebar.php',array());