ui update (#879)

* caravel ui update

* make headings bold on /explore

* bump back pagination color

caravel/assets/javascripts/dashboard/Dashboard.jsx

@@ -14,7 +14,7 @@ const ace = require('brace');
 require('bootstrap');
 require('brace/mode/css');
 require('brace/theme/crimson_editor');
-require('./main.css');
+require('../../stylesheets/dashboard.css');
 require('../caravel-select2.js');
 
 // Injects the passed css string into a style sheet with the specified className

caravel/assets/javascripts/dashboard/components/SliceCell.js

@@ -11,19 +11,17 @@ function SliceCell({ expandedSlices, removeSlice, slice }) {
     <div>
       <div className="chart-header">
         <div className="row">
-          <div className="col-md-12 text-center header">
-            {slice.slice_name}
+          <div className="col-md-12 header">
+            <span>{slice.slice_name}</span>
           </div>
           <div className="col-md-12 chart-controls">
-            <div className="pull-left">
+            <div className="pull-right">
               <a title="Move chart" data-toggle="tooltip">
                 <i className="fa fa-arrows drag" />
               </a>
               <a className="refresh" title="Force refresh data" data-toggle="tooltip">
                 <i className="fa fa-repeat" />
               </a>
-            </div>
-            <div className="pull-right">
               {slice.description &&
                 <a title="Toggle chart description">
                   <i

caravel/assets/javascripts/explore/components/QueryAndSaveBtns.jsx

@@ -13,7 +13,7 @@ export default function QueryAndSaveBtns({ canAdd, onQuery }) {
 
   return (
     <div className="btn-group query-and-save">
-      <button type="button" className="btn btn-primary" onClick={onQuery}>
+      <button type="button" className="btn btn-default" onClick={onQuery}>
         <i className="fa fa-bolt"></i>Query
       </button>
       <button

caravel/assets/javascripts/explore/explore.jsx

@@ -3,10 +3,10 @@
 // nb: to add a new vis, you must also add a Python fn in viz.py
 //
 // js
-var $ = window.$ = require('jquery');
-var jQuery = window.jQuery = $;
-var px = require('./../modules/caravel.js');
-var showModal = require('./../modules/utils.js').showModal;
+const $ = window.$ = require('jquery');
+const jQuery = window.jQuery = $;
+const px = require('./../modules/caravel.js');
+const showModal = require('./../modules/utils.js').showModal;
 
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -25,21 +25,21 @@ require('../../vendor/pygments.css');
 require('../../stylesheets/explore.css');
 require('../../node_modules/bootstrap-toggle/css/bootstrap-toggle.min.css');
 
-var slice;
+let slice;
 
-var getPanelClass = function (fieldPrefix) {
+const getPanelClass = function (fieldPrefix) {
   return (fieldPrefix === 'flt' ? 'filter' : 'having') + '_panel';
 };
 
 function prepForm() {
   // Assigning the right id to form elements in filters
-  var fixId = function ($filter, fieldPrefix, i) {
+  const fixId = function ($filter, fieldPrefix, i) {
     $filter.attr('id', function () {
       return fieldPrefix + '_' + i;
     });
 
     ['col', 'op', 'eq'].forEach(function (fieldMiddle) {
-      var fieldName = fieldPrefix + '_' + fieldMiddle;
+      const fieldName = fieldPrefix + '_' + fieldMiddle;
       $filter.find('[id^=' + fieldName + '_]')
           .attr('id', function () {
             return fieldName + '_' + i;
@@ -51,15 +51,16 @@ function prepForm() {
   };
 
   ['flt', 'having'].forEach(function (fieldPrefix) {
-    var i = 1;
+    let i = 1;
     $('#' + getPanelClass(fieldPrefix) + ' #filters > div').each(function () {
       fixId($(this), fieldPrefix, i);
       i++;
     });
   });
 }
 
-function query(force, pushState) {
+function query(forceUpdate, pushState) {
+  let force = forceUpdate;
   if (force === undefined) {
     force = false;
   }
@@ -470,29 +471,19 @@ function saveSlice() {
 }
 
 $(document).ready(function () {
+  const data = $('.slice').data('slice');
+
   initExploreView();
 
   // Dynamically register this visualization
-  var visType = window.viz_type.value;
-  px.registerViz(visType);
+  px.registerViz(data.viz_name);
 
-  var data = $('.slice').data('slice');
   slice = px.Slice(data);
 
-  //
   $('.slice').data('slice', slice);
 
   // call vis render method, which issues ajax
   query(false, false);
 
-  // make checkbox inputs display as toggles
-  $(':checkbox')
-    .addClass('pull-right')
-    .attr('data-onstyle', 'default')
-    .bootstrapToggle({
-      size: 'mini',
-    });
-
-  $('div.toggle').addClass('pull-right');
   slice.bindResizeToWindowResize();
 });

caravel/assets/javascripts/welcome.js

@@ -68,11 +68,13 @@ $(document).ready(function () {
         '#D6E685',
         '#1E6823',
       ],
-      // Based on github's colors
       domain: 'month',
       subDomain: 'day',
       itemName: 'action',
       tooltip: true,
+      cellSize: 10,
+      cellPadding: 2,
+      domainGutter: 22,
     });
   });
   modelViewTable('#dash_table', 'DashboardModelViewAsync', 'changed_on', 'desc');

caravel/assets/package.json

@@ -38,7 +38,6 @@
     "autobind-decorator": "^1.3.3",
     "bootstrap": "^3.3.6",
     "bootstrap-datepicker": "^1.6.0",
-    "bootstrap-toggle": "^2.2.1",
     "brace": "^0.7.0",
     "brfs": "^1.4.3",
     "cal-heatmap": "3.5.4",

caravel/assets/stylesheets/caravel.css

@@ -28,6 +28,12 @@ body {
 input.form-control {
     background-color: white;
 }
+input.form-control[type=text], input.form-control[type=search] {
+  border: 1px solid #ccc!important;
+  box-shadow: none!important;
+  padding: 2px;
+  border-radius: 2px;
+}
 
 .chart-header a.danger {
     color: red;
@@ -50,6 +56,8 @@ input.form-control {
     margin-right: 10px;
     opacity: 0.5;
     cursor: pointer;
+    float: left;
+    margin-top: 13px;
 }
 
 .slice_description{
@@ -83,13 +91,6 @@ input[type="checkbox"] {
   height: 16px;
   float: right;
 }
-form div {
-  padding-top: 1px;
-}
-
-.header span {
-    margin-left: 5px;
-}
 
 .widget-is-cached {
     display: none;
@@ -132,9 +133,6 @@ span.title-block {
     font-size: 11px !important;
 }
 div.navbar {
-  -webkit-box-shadow: 0px 2px 2px #CCC;
-  -moz-box-shadow: 0px 2px 2px #CCC;
-  box-shadow: 0px 2px 2px #ccc;
   z-index: 999;
 }
 .panel.panel-primary {
@@ -171,10 +169,24 @@ li.widget:hover {
 }
 
 div.widget .chart-header {
-  padding: 5px;
-  background-color: #f1f1f1;
+  padding-top: 8px;
+  background-color: #fff;
+  color: #333;
+  border-bottom: 1px solid #aaa;
+  margin: 0 10px;
+}
+
+.chart-header .header-text {
+  font-size: 20px;
+  line-height: 22px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #888;
+  margin-top: 10px;
+  margin-left: 10px;
+  margin-right: 10px;
 }
 
+
 div.widget .chart-header a {
   margin-left: 5px;
 }

caravel/assets/javascripts/dashboard/main.css → caravel/assets/stylesheets/dashboard.css

@@ -24,8 +24,8 @@ div.widget .chart-controls {
 }
 .slice-grid div.widget {
   border-radius: 0;
-  border: 1px solid #ccc;
-  box-shadow: 2px 1px 5px -2px #aaa;
+  border: 0px;
+  box-shadow: none;
   background-color: #fff;
   overflow: visible;
 }
@@ -39,9 +39,7 @@ div.widget .chart-controls {
   margin: 5px;
   position: absolute;
 }
-.dashboard .title {
-  text-align: center;
-}
+
 .dashboard .slice_title {
   text-align: center;
   font-weight: bold;
@@ -69,7 +67,7 @@ div.widget .chart-controls {
 }
 
 .slice-grid div.separator.widget {
-  border: 1px solid transparent;
+ border: 1px solid transparent;
   box-shadow: none;
   z-index: 1;
 }
@@ -98,3 +96,15 @@ div.widget .chart-controls {
   top: 0;
   bottom: 0;
 }
+
+.dashboard .title {
+  margin: 0 20px;
+}
+
+.dashboard .title .favstar {
+  font-size: 24px;
+}
+
+.chart-header .header {
+  font-size: 16px;
+}

caravel/assets/stylesheets/explore.css

@@ -6,13 +6,36 @@
     position: absolute;
     left: 0;
     top: 0;
+    background-color: #fff;
 }
 
-.header hr {
-    margin-top: 10px;
-    margin-bottom: 10px;
+.slice-name__container {
+  background-color: #fff;
+  padding: 16px 20px 20px 20px;
+}
+.slice-name__text {
+  color: #333;
+  font-size: 20px;
+  border-bottom: 1px solid #aaa;
+  padding-bottom: 10px;
+  padding-left: 42px;
+  font-weight: bold;
+}
+
+.edit-slice-description-icon {
+  float: left;
+  margin-top: -33px;
+  margin-left: 20px;
+}
+
+.slice-meta {
+  margin-top: -52px;
 }
 
 .navbar {
-    margin-bottom: 10px;
+  margin-bottom: 22px;
+}
+
+.query-and-save-btns-container {
+  margin-bottom: 22px;
 }