Travail sur le tableau principal (HTML/CSS).

2015-02-12 10:23:19 -05:00 · 2015-02-12 10:23:19 -05:00 · e52e12da54
commit e52e12da54
parent 8b8f4883e6
14 changed files with 631 additions and 36 deletions
--- a/app/assets/sass/app.scss
+++ b/app/assets/sass/app.scss
@ -45,6 +45,8 @@
@import 'modules-objects/togglable-tabs';
@import 'modules-objects/problems';
@import 'modules-objects/panes';
+@import 'modules-objects/filters';
+@import 'modules-objects/data-table';

 //----------------------------------*\
 // INTERFACE MODULES
--- a/app/assets/sass/global/_default.scss
+++ b/app/assets/sass/global/_default.scss
@ -219,6 +219,9 @@ tbody {

 menu,
 nav {
+    margin:0;
+    padding:0;
+    
    a {text-decoration:none;}

    ol,
--- a/app/assets/sass/global/_helpers.scss
+++ b/app/assets/sass/global/_helpers.scss
@ -115,9 +115,10 @@ body:after {
 .state--hidden {display:none;}
 .state--visible {display:block;}
 /* .state--current {} */
+/* .state--hasChild {} */
 /* .state--open {} */
 /* .state--close {} */
 /* .state--error {} */
-/*     .state--warning {} */
-/*     .state--ok {} */
+/* .state--warning {} */
+/* .state--ok {} */
 /* etc. */
--- a/app/assets/sass/global/_typography.scss
+++ b/app/assets/sass/global/_typography.scss
@ -7,6 +7,7 @@
    // Tracking 300 PSD = Combien en letterspacing CSS ?
 }

+
 %typo-title {font:400 em(24, $_base_font_size)(/ 1) $_font_family_alpha;}

 %typo-subtitle {font:700 em(14, $_base_font_size)(/ 1) $_font_family_alpha;}
--- a/app/assets/sass/modules-interface/_main.scss
+++ b/app/assets/sass/modules-interface/_main.scss
@ -35,7 +35,7 @@
        }

        &:first-child {text-align:left;}
-        
+
        &.state--error {color:$_color_error;}
        &.state--warning {color:$_color_warning;}
        &.state--ok {color:$_color_ok;}
@ -74,7 +74,7 @@
            td,
            th {border-top:0;}
        }
-        
+
        th {@extend %typo-header-table;}
    }
 }
@ -95,4 +95,61 @@
    }
 }

-.main__content {}
+.main__content {
+    padding:$_space $_space_narrow;
+
+    @include large-xlarge-screen {
+        padding:$_space;
+    }
+
+    // Togglable tabs variations
+    .tablist {margin-bottom:$_space;}
+
+    .tabpanel__tab {
+        font-size:1em;
+
+        @include large-xlarge-screen {
+            font-size:em(24, $_base_font_size);
+        }
+    }
+}
+
+.main__content__header {
+
+    .main__content__title,
+    .main__content__alert {        
+
+        @include large-xlarge-screen {
+            float:left;
+            margin-top:0;
+        }
+    }
+}
+
+.main__content__title {
+    margin-right:$_space_narrow;
+
+    @include large-xlarge-screen {
+        display:inline-block;
+    }
+
+    .color-scheme--dark & {
+        color:$_color_omega;
+    }
+
+    .color-scheme--light & {
+        color:$_color_alpha;
+    }
+}
+
+.main__content__alert {
+    @extend %typo-more-info;
+    background:$_color_ok;
+    color:$_color_omega;
+    display:inline-block;
+    padding:8px 11px;
+
+    &.state--error {background:$_color_error;}
+    &.state--warning {background:$_color_warning;}
+    &.state--ok {background:$_color_ok;}
+}
--- a/app/assets/sass/modules-objects/_data-table.scss
+++ b/app/assets/sass/modules-objects/_data-table.scss
@ -0,0 +1,165 @@
+//----------------------------------*\
+// DATA TABLE
+//----------------------------------*/
+
+.data-table {
+    width:100%;
+
+    input[type="checkbox"] {background:red;}
+
+    .color-scheme--dark & {
+        color:$_color_omega;
+    }
+
+    .color-scheme--light & {
+        color:$_color_alpha;
+    }
+
+    a {
+        display:inline-block;
+        text-decoration:none;
+
+        .color-scheme--dark & {
+            color:$_color_omega;
+        }
+
+        .color-scheme--light & {
+            color:$_color_alpha;
+        }
+    }
+
+    td, th {
+        border-style:solid;
+        border-width:0 0 1px;
+        padding-left:$_space_narrow;
+        padding-right:$_space_narrow;
+        vertical-align:top;
+
+        .color-scheme--dark & {
+            border-color:$_color_dark_beta;
+        }
+
+        .color-scheme--light & {
+            border-color:$_color_light_beta;
+        }
+    }
+
+    thead {
+        th {
+            border-style:solid;
+            border-width:0 0 0 1px;
+            padding-top:$_space_narrow;
+            vertical-align:middle;
+
+            .color-scheme--dark & {
+                background:$_color_dark_beta;
+                border-color:$_color_dark_gamma;
+
+                &.state--current {background:$_color_dark_alpha;}
+            }
+
+            .color-scheme--light & {
+                background:$_color_light_beta;
+                border-color:$_color_light_gamma;
+
+                &.state--current {background:$_color_light_alpha;}
+            }
+
+            &.data-table__host,
+            &.data-table__checkbox {border:0;}
+        }
+    }
+
+    .state--hasChild,
+    .state--isChild {
+        
+        td, th {        
+
+            .color-scheme--dark & {
+                background:$_color_dark_beta;
+            }
+
+            .color-scheme--light & {
+                background:$_color_light_beta;
+            }
+        }
+    }
+}
+
+.data-table__data {
+    margin:0;
+
+    .state--error &,
+    .state--warning &,
+    .state--ok & {
+        position:relative;
+
+        &:before {
+            top:0;
+            font-family:"adagios-fontawesome";
+            left:0;
+            position:absolute;
+            z-index:988888;
+        }
+    }
+
+    .state--error & {
+        @extend .ico-error;
+        padding-left:(16 + $_space_narrow);
+
+        &:before {
+            color:$_color_error;
+            font-size:em(13, $_base_font_size);
+        }
+    }
+
+    .state--warning & {
+        @extend .ico-warning;
+        padding-left:(16 + $_space_narrow);
+
+        &:before {
+            color:$_color_warning;
+            font-size:em(16, $_base_font_size);
+        }
+    }
+
+    .state--ok & {
+        @extend .ico-ok;
+        padding-left:(18 + $_space_narrow);
+
+        &:before {
+            color:$_color_ok;
+            font-size:em(20, $_base_font_size);
+        }
+    }
+}
+
+.data-table__checkbox {width:auto;}
+
+.data-table__host {width:percentage(367 / 1200);}
+
+.data-table__service__summary,
+.data-table__duration,
+.data-table__lastcheck {
+    @extend %typo-more-info--little;
+
+    .color-scheme--dark & {
+        color:$_color_dark_delta;
+    }
+
+    .color-scheme--light & {
+        color:$_color_light_delta;
+    }
+}
+
+.data-table__service {
+    width:percentage(501 / 1200);
+    //.data-table__service__name {}
+
+    .data-table__service__summary {
+        font-style:italic;
+        margin-left:0;
+    }
+}
+
+.data-table__duration {width:percentage(166 / 1200);}
--- a/app/assets/sass/modules-objects/_filters.scss
+++ b/app/assets/sass/modules-objects/_filters.scss
@ -0,0 +1,128 @@
+//----------------------------------*\
+// FILTERS
+//----------------------------------*/
+.filters__list {
+    border-style:solid;
+    border-width:1px 0;
+    position:relative;
+
+    .color-scheme--dark & {
+        background:$_color_dark_gamma;
+        border-color:$_color_dark_beta;
+    }
+
+    .color-scheme--light & {
+        background:$_color_light_gamma;
+        border-color:$_color_light_beta;
+    }
+}
+
+.filters__item {
+    display:inline-block;
+    float:left;
+    position:relative;
+
+    &.filters__item--settings {float:right;}
+}
+
+.filters__sublist {
+    padding:$_space_narrow;    
+
+    .filters__item,
+    .filters__subitem {display:block;}
+}
+
+
+.filters__button {
+    @extend %button-reset;
+    @extend %colorLink;
+    border-style:solid;
+    border-width:0 0 0 1px;
+    display:block;
+    min-height:56px;
+    padding:0 $_space_narrow;
+    position:relative;
+    width:auto;    
+
+    .color-scheme--dark & {
+        border-color:$_color_dark_beta;
+    }
+
+    .color-scheme--light & {
+        border-color:$_color_light_beta;
+    }
+
+    .filters__item--more &,
+    .filters__item--settings & {border-right-width:1px;}
+
+    .filters__item--problems & {
+        min-width:180px;
+        text-align:left;
+
+        .ico-down-dir {float:right;}
+    }
+
+    .filters__item--more & {
+        min-width:87px;
+        text-align:left;
+        text-transform:lowercase;        
+        
+        .ico-down-dir {
+            float:right;
+        }
+    }
+
+    &[aria-expanded="true"],
+    &:hover {
+        .color-scheme--dark & {
+            background:$_color_dark_beta;
+            color:$_color_omega;
+        }
+
+        .color-scheme--light & {
+            background:$_color_light_beta;
+            color:$_color_alpha;
+        }
+    }
+}
+
+.filters__panel {
+    left:0;
+    min-width:100%;
+    position:absolute;
+    top:100%;
+    z-index:999999;
+
+    .color-scheme--dark & {
+        background:$_color_dark_beta;
+    }
+
+    .color-scheme--light & {
+        background:$_color_light_beta;
+    }
+
+    .filters__item--more & {
+        display:block;
+
+        @include large-xlarge-screen {
+            display:inline;
+        }
+    }
+
+    .filters__item--settings & {
+        left:auto;
+        right:0;
+    }
+}
+
+.filters__link {
+    &.state--current {
+        .color-scheme--dark & {
+            color:$_color_omega;
+        }
+
+        .color-scheme--light & {
+            color:$_color_alpha;
+        }
+    }
+}
--- a/app/assets/sass/modules-objects/_panes.scss
+++ b/app/assets/sass/modules-objects/_panes.scss
@ -1,3 +1,6 @@
+//----------------------------------*\
+// PANES
+//----------------------------------*/
 .panes {
    background:aquamarine;
    display:table;
--- a/app/assets/sass/modules-objects/_togglable-tabs.scss
+++ b/app/assets/sass/modules-objects/_togglable-tabs.scss
@ -1,9 +1,7 @@
 //----------------------------------*\
 // TOGGLABLE TABS
 //----------------------------------*/
-.tablist__list {
-    display:block;
-}
+.tablist {}

 .tablist__item {
    display:block;
@ -12,22 +10,25 @@
 }

 .tabpanel__tab {
-    border:solid white;
+    border-style:solid;
    border-width:0 0 1px;
-    display:block;
+    display:block;    
    line-height:1;
-    margin:0 4px;
+    margin:0 0 0 ($_space / 3);
    padding:0 $_space .5em 0;
    position:relative;
+    text-decoration:none;
+
+    @include large-xlarge-screen {
+        margin:0 0 0 $_space;
+    }

    &[aria-expanded="true"] {
        border-width:0 0 3px;
        color:$_color_omega;
    }

-    :first-child > & {
-        margin-left:0;
-    }
+    :first-child > & {margin:0;}

    &:after {
        bottom:em($_base_font_size);
--- a/app/components/sidebar/sidebar.html
+++ b/app/components/sidebar/sidebar.html
@ -1,7 +1,7 @@
 <div ng-app="adagios.sidebar" class="sidebar" ng-controller="SideBarCtrl">
  <button class="sidebar__close">
    <span class="visuallyhidden">Close the sidebar</span>
-    <i class="fa fa-times"></i>
+    <i class="ico-cancel"></i>
  </button>
 
  <header class="sidebar__header">
--- a/app/components/tactical/tactical.html
+++ b/app/components/tactical/tactical.html
@ -1,24 +1,252 @@
 <article ng-app="adagios.tactical" ng-controller="TacticalCtrl" id="tactical">
  <header class="main__overview">
    <h2 class="main__overview__title">Tactical Overview</h2>
-
+    
    <div class="panes panes--3">
      <div class="panes__pane">
        <adg-status-overview></adg-status-overview>
      </div>
-
+      
      <div class="panes__pane">
        <adg-current-health></adg-current-health>
      </div>
-
+      
      <div class="panes__pane">
        <adg-top-alert-producers></adg-top-alert-producers>
      </div>
    </div>
  </header>
+  
+  <section class="main__content tabpanel">
+    <nav>
+      <ul class="tablist clearfix">
+        <li role="presentation" class="tablist__item active">
+          <a href="#openProblems"
+             class="tabpanel__tab"
+             aria-controls="openProblems"
+             aria-expanded="true"
+             role="tab"
+             data-toggle="tab"
+             data-problems="27">Open problems
+          </a>
+        </li>
+        <li role="presentation" class="tablist__item">
+          <a href="#allProblems"
+             class="tabpanel__tab"
+             aria-controls="allProblems"
+             aria-expanded="false"
+             role="tab"
+             data-toggle="tab"
+             data-problems="38">All problems
+          </a>
+        </li>
+      </ul>
+    </nav>
+    
+    <menu class="filters">
+      <ul class="filters__list clearfix">
+        <li class="filters__item filters__item--problems">
+          <button class="filters__button"
+                  type="button"
+                  data-toggle="collapse"
+                  data-target="#filtersProblems"
+                  aria-expanded="false"
+                  aria-controls="filtersProblems">
+            <span>All</span>
+            <i class="ico-down-dir"></i>
+          </button>
+          
+          <div class="filters__panel collapse" id="filtersProblems">
+            <ul class="filters__sublist">
+              <li class="filters__subitem">
+                <a class="filters__link state--current" href="#">All</a>
+              </li>
+              <li class="filters__subitem">
+                <a class="filters__link" href="#">All OK</a>
+              </li>
+              <li class="filters__subitem">
+                <a class="filters__link" href="#">All Acknowledged</a>
+              </li>
+              <li class="filters__subitem">
+                <a class="filters__link" href="#">All in Downtime</a>
+              </li>
+            </ul>
+          </div>
+        </li>
+        <li class="filters__item filters__item--recheck">
+          <button class="filters__button" type="button">
+            <span class="visuallyhidden">Recheck</span>
+            <i class="ico-arrows-cw"></i>
+          </button>
+        </li>
+        <li class="filters__item filters__item--acknowledge"
+            data-mover="true">
+          <button class="filters__button" type="button">
+            <span class="visuallyhidden">Acknowledge</span>
+            <i class="ico-thumbs-up"></i>
+          </button>
+        </li>
+        <li class="filters__item filters__item--downtime"
+            data-mover="true">
+          <button class="filters__button" type="button">
+            <span class="visuallyhidden">Downtime</span>
+            <i class="ico-clock"></i>
+          </button>
+        </li>
+        <li class="filters__item filters__item--more clearfix">
+          <button class="filters__button"
+                  type="button"
+                  data-toggle="collapse"
+                  data-target="#filtersMore"
+                  aria-expanded="false"
+                  aria-controls="filtersMore">
+            <span>More</span>
+            <i class="ico-down-dir"></i>
+          </button>
+          
+          <div class="filters__panel collapse" id="filtersMore">
+            <ul class="filters__sublist">
+              <li class="filters__subitem">
+                <a class="filters__link" href="#">More I</a>
+              </li>
+              <li class="filters__subitem">
+                <a class="filters__link" href="#">More II</a>
+              </li>
+              <li class="filters__subitem">
+                <a class="filters__link" href="#">More III</a>
+              </li>
+            </ul>
+          </div>
+        </li>
+        <li class="filters__item filters__item--settings">
+          <button class="filters__button"
+                  type="button"
+                  data-toggle="collapse"
+                  data-target="#filtersSettings"
+                  aria-expanded="false"
+                  aria-controls="filtersSettings">
+            <span class="visuallyhidden">Filters Settings</span>
+            <i class="ico-cog"></i>
+          </button>
+          
+          <div class="filters__panel collapse" id="filtersSettings">
+            <ul class="filters__sublist">
+              <li>...</li>
+              <li>...</li>
+              <li>...</li>
+            </ul>
+          </div>
+        </li>
+      </ul>
+    </menu>
+    
+    <div class="tab-content">
+      <div role="tabpanel" class="problems tab-pane active" id="openProblems">
+        <header class="main__content__header clearfix">
+          <h2 class="main__content__title">Unhandled service problems</h2>
+          <p class="main__content__alert state--error">There are 5 host problems.</p>
+        </header>
+        
+        <adg-table></adg-table>
+        
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th class="data-table__checkbox"><input type="checkbox"></th>
+              <th class="state--current data-table__host">
+                <span class="data-table__cell__string">Host</span>
+                <i class="ico-up-dir"></i>
+              </th>
+              <th class="data-table__service">Service check</th>
+              <th class="data-table__duration">Duration</th>
+              <th class="data-table__lastcheck">Last check</th>
+            </tr>
+          </thead>
+          
+          <tr>
+            <td class="data-table__checkbox"><input type="checkbox"></td>
+            <td class="data-table__host state--ok">              
+              <a class="data-table__data" href="#">localhost</a>
+            </td>
+            <td class="data-table__service state--warning">
+              <dl class="data-table__data">
+                <dt class="data-table__service__name">Root partition</dt>
+                <dd class="data-table__service__summary">DISK WARNING - free space : / 673 MB (12% inode = 59%)</dd>
+              </dl>
+            </td>
+            <td class="data-table__duration">1 month, 2 weeks</td>
+            <td class="data-table__lastcheck">0 minutes ago</td>
+          </tr>
+          
+          <tr class="state--hasChild">
+            <td class="data-table__checkbox"><input type="checkbox"></td>
+            <td class="data-table__host state--ok">              
+              <a class="data-table__data" href="#">srv-apache-01</a>
+            </td>
+            <td class="data-table__service state--warning">
+              <dl class="data-table__data">
+                <dt class="data-table__service__name">Root partition</dt>
+                <dd class="data-table__service__summary">DISK WARNING - free space : / 673 MB (12% inode = 59%)</dd>
+              </dl>
+            </td>
+            <td class="data-table__duration">1 month, 2 weeks</td>
+            <td class="data-table__lastcheck">0 minutes ago</td>
+          </tr>
+          
+          <tbody class="state--isChild">
+            <tr>
+              <td class="data-table__checkbox"><input type="checkbox"></td>
+              <td class="">&nbsp;</td>
+              <td class="data-table__service state--error">
+                <dl class="data-table__data">
+                  <dt class="data-table__service__name">Root partition</dt>
+                  <dd class="data-table__service__summary">DISK ERROR - free space : / 673 MB (12% inode = 59%)</dd>
+                </dl>
+              </td>
+              <td class="data-table__duration">1 month, 2 weeks</td>
+              <td class="data-table__lastcheck">0 minutes ago</td>
+            </tr>
+          </tbody>
+          
+          <tr>
+            <td class="data-table__checkbox"><input type="checkbox"></td>
+            <td class="data-table__host state--ok">              
+              <a class="data-table__data" href="#">localhost</a>
+            </td>
+            <td class="data-table__service state--warning">
+              <dl class="data-table__data">
+                <dt class="data-table__service__name">Root partition</dt>
+                <dd class="data-table__service__summary">DISK WARNING - free space : / 673 MB (12% inode = 59%)</dd>
+              </dl>
+            </td>
+            <td class="data-table__duration">1 month, 2 weeks</td>
+            <td class="data-table__lastcheck">0 minutes ago</td>
+          </tr>

+          <tr>
+            <td class="data-table__checkbox"><input type="checkbox"></td>
+            <td class="data-table__host state--ok">              
+              <a class="data-table__data" href="#">localhost</a>
+            </td>
+            <td class="data-table__service state--warning">
+              <dl class="data-table__data">
+                <dt class="data-table__service__name">Root partition</dt>
+                <dd class="data-table__service__summary">DISK WARNING - free space : / 673 MB (12% inode = 59%)</dd>
+              </dl>
+            </td>
+            <td class="data-table__duration">1 month, 2 weeks</td>
+            <td class="data-table__lastcheck">0 minutes ago</td>
+          </tr>
+        </table>
+      </div>      
+      
+      <div role="tabpanel" class="problems tab-pane" id="allProblems">
+        <header class="main__content__header">
+          <h2 class="main__content__title">All service problems</h2>
+          
+          <p class="main__content__alert">...</p>
+        </header>
+      </div>

-  <section class="main__content">
-    <adg-table></adg-table>
  </section>
 </article>
--- a/app/components/tactical/tactical.js
+++ b/app/components/tactical/tactical.js
@ -4,8 +4,13 @@ angular.module('adagios.tactical', ['adagios.tactical.status_overview',
                                    'adagios.tactical.current_health',
                                    'adagios.tactical.top_alert_producers',
                                    'adagios.table'
-                                    ])
+                                   ])

    .controller('TacticalCtrl', ['$scope', '$http', function ($scope, $http) {
-        return;
+
+        // Togglable tabs
+        // Don't follow hyperlinks
+        $('a[data-toggle="tab"]').on('click', function(evt) {
+            evt.preventDefault();
+        });
    }]);
--- a/app/components/topbar/topbar.html
+++ b/app/components/topbar/topbar.html
@ -25,11 +25,11 @@
      
      <div class="topbar__panel--fromleft collapse" id="notificationsPanel">
        <div class="topbar__panel__content tabpanel">
-          <ul role="tablist">
+          <ul class="tablist clearfix">
            <li role="presentation" class="tablist__item active">
-              <a href="#openProblems"
+              <a href="#topOpenProblems"
                 class="tabpanel__tab"
-                 aria-controls="openProblems"
+                 aria-controls="topOpenProblems"
                 aria-expanded="true"
                 role="tab"
                 data-toggle="tab"
@ -37,9 +37,9 @@
              </a>
            </li>
            <li role="presentation" class="tablist__item">
-              <a href="#allProblems"
+              <a href="#topAllProblems"
                 class="tabpanel__tab"
-                 aria-controls="allProblems"
+                 aria-controls="topAllProblems"
                 aria-expanded="false"
                 role="tab"
                 data-toggle="tab"
@ -49,7 +49,7 @@
          </ul>
          
          <div class="tab-content">
-            <div role="tabpanel" class="problems tab-pane active" id="openProblems">
+            <div role="tabpanel" class="problems tab-pane active" id="topOpenProblems">
              <ol class="problems__list">
                <li class="problems__item">
                  <strong class="problems__host state--ok">localhost</strong>
@ -101,8 +101,8 @@
              <button class="problems__viewall" type="button">View all open problems</button>
            </div>
            
-            <div role="tabpanel" class="tab-pane" id="allProblems">
-              All problems
+            <div role="tabpanel" class="tab-pane" id="topAllProblems">
+              ALL PROBLEMS
            </div>
          </div>
        </div>
--- a/app/index.html
+++ b/app/index.html
@ -73,11 +73,12 @@
        <main ng-view id="page" class="main" role="main"></main>
        <footer class="footer" role="contentinfo">...</footer>
      </div>
-      
-      <script src="bower_components/jquery/dist/jquery.min.js"></script>
-      <script src="bower_components/raphael/raphael-min.js"></script>
-      <script src="bower_components/justgage-toorshia/justgage.js"></script>
-      <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
-      <script src="assets/js/scripts.js"></script>
+    </div>
+
+    <script src="bower_components/jquery/dist/jquery.min.js"></script>
+    <script src="bower_components/raphael/raphael-min.js"></script>
+    <script src="bower_components/justgage-toorshia/justgage.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
+    <script src="assets/js/scripts.js"></script>
  </body>
 </html>