Merge pull request #427 from afshin/partially-remove-jquery-bootstrap

(Partially) remove jQuery and Bootstrap

Author: jdfreder

jupyter-js-widgets/examples/web2/manager.js

@@ -1,4 +1,3 @@
-require('bootstrap/dist/css/bootstrap.css');
 require('jquery-ui/themes/smoothness/jquery-ui.min.css');
 
 var widgets = require('jupyter-js-widgets');

jupyter-js-widgets/examples/web2/package.json

@@ -11,7 +11,6 @@
   "author": "IPython",
   "license": "BSD-3-Clause",
   "dependencies": {
-    "bootstrap": "^3.3.6",
     "codemirror": "^5.9.0",
     "font-awesome": "^4.5.0",
     "jquery": "^2.1.4",

jupyter-js-widgets/less/widgets.less

@@ -1,10 +1,6 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-// minimal imports from bootstrap - only variables and mixins
-@import "./bootstrap/less/variables.less";
-@import "./bootstrap/less/mixins.less";
-
 // minimal imports from font-awesome
 @import "./font-awesome/less/variables.less";
 
@@ -66,7 +62,7 @@
     &.connection-problems .prompt:after {
         content: @fa-var-chain-broken;
         font-family: 'FontAwesome';
-        color: @brand-danger;
+        color: #d9534f;
         top: 3px;
         padding: 3px;
     }
@@ -214,61 +210,66 @@
     }
 }
 
-.widget-button {
-    /* Button */
+.widget-checkbox {
+    width: @widget-width-short;
+}
+
+.widget-button, .widget-toggle-button {
+    background-image: none;
+    border: 1px solid #dbdbdb;
+    color: white;
+    cursor: pointer;
+    display: inline-block;
+    margin-bottom: 0;
+    text-align: center;
+    vertical-align: middle;
+    white-space: nowrap;
     width : @widget-width-short;
 
     .outside-shadow-2dp();
 
-    &.btn,
-    &.btn:active,
-    &.btn:focus,
-    &.btn.hover {
+    &:hover {
         outline: none !important;
     }
-
-    &.btn:active {
+    &:active {
         .outside-shadow-4dp();
     }
-}
-
-.widget-checkbox {
-    width: @widget-width-short;
-}
-
-.widget-toggle-button {
-    /* Button */
-    width : @widget-width-short;
 
-    .outside-shadow-2dp();
+    &.mod-primary {
+      background-color: #337ab7;
+      border-color: #245580;
+    }
 
-    &.btn,
-    &.btn:active,
-    &.btn:focus,
-    &.btn.hover {
-        outline: none !important;
+    &.mod-success {
+      background-color: #5cb85c;
+      border-color: #3e8f3e;
     }
 
-    // &.btn:active {
-    //     .outside-shadow-4dp();
-    // }
-}
+    &.mod-info {
+      background-color: #5bc0de;
+      border-color: #28a4c9;
+    }
 
-.widget-toggle-buttons {
+    &.mod-warning {
+      background-color: #f0ad4e;
+      border-color: #e38d13;
+    }
 
-    .btn,
-    .btn:active,
-    .btn:focus,
-    .btn.hover {
-        outline: none !important;
+    &.mod-danger {
+      background-color: #d9534f;
+      border-color: #b92c28;
     }
 
-    .btn.active {
-        box-shadow: none !important;
+    &.mod-active {
+      border-color: #000000;
+      color: #000000;
     }
+}
 
-    .btn-group {
-        .outside-shadow-2dp();
+.widget-toggle-buttons {
+    button {
+        margin: 2px;
+        min-width: 100px;
     }
 }
 
@@ -288,23 +289,71 @@
 }
 
 .widget-dropdown {
-    /* Dropdown */
-    width : @widget-width;
+    display: block;
 
-    .widget_item {
+    div.widget-item {
         display: flex;
-        flex-grow: 1;
+        margin: 0;
+        padding: 0;
+        width : @widget-width;
+
+        button {
+            flex: 1;
+            outline: 0;
+        }
+
+        button:last-child {
+            flex: 0;
+            flex-basis: 2em;
+            margin-left: -1px;
+
+            i.widget-caret {
+                font-size: 1em;
+                font-style: normal;
+                font-family: FontAwesome;
+                line-height: 1em;
+                position: relative;
+            }
+
+            i.widget-caret:before {
+                content: "\f0d7";
+            }
+        }
     }
+}
 
-    .widget-combo-btn {
-        flex-grow: 1;
-        min-width: 10px;
+ul.widget-dropdown-droplist {
+    background: #eeeeee;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #dddddd;
+    box-sizing: border-box;
+    list-style-type: none;
+    position: absolute;
+    margin: 0;
+    z-index: 2; /* This might not be necessary once Bootstrap is gone. */
+    width : @widget-width;
+    padding: 0;
+    height: auto;
+    overflow: auto;
+    display: none;
+
+    a {
+        color: inherit;
+        text-decoration: none;
     }
 
-    .dropdown-menu {
-        max-height: 200px;
-        overflow: hidden;
-        overflow-y: auto;
+    li {
+        display: block;
+        padding: 0 5px;
+
+        &:hover {
+            background: #dddddd;
+        }
+    }
+
+    &.mod-active {
+        display: block;
     }
 }
 
@@ -368,11 +417,30 @@
 }
 
 .widget-valid {
-    /* Valid Check */
-    margin-top: 8px;
-    margin-bottom: 16px;
-    margin-left: 5px;
-    margin-right: 5px;
+    font-size: 1em;
+    position: relative;
+    i {margin-right: 1.5em;}
+    i:before {
+        font-family: FontAwesome;
+        font-style: normal;
+        font-size: 1.5em;
+        position: absolute;
+        top: 0;
+    }
+    &.mod-valid {
+        color: green;
+        i:before {
+            /* Check mark character icon */
+            content: "\f00c";
+        }
+    }
+    &.mod-invalid {
+        color: red;
+        i:before {
+            /* "X" character icon */
+            content: "\f00d";
+        }
+    }
 }
 
 .widget-hbox {
@@ -439,6 +507,7 @@
 
 }
 
+
 .widget-box {
     /* Box */
     .border-box-sizing();
@@ -457,4 +526,10 @@
         margin-bottom: 2px;
         margin-left: 22px;
     }
+
+    input {
+        float: left;
+        margin-right: 5px;
+    }
+
 }

jupyter-js-widgets/src/index.js

@@ -5,12 +5,12 @@
 global.jQuery = global.$ = require('./jquery');
 var _ = require('underscore');
 
-var managerBase = require("./manager-base");
-var widget = require("./widget");
+var managerBase = require('./manager-base');
+var widget = require('./widget');
 
 module.exports = {
     shims: {
-        services: require("./services-shim")
+        services: require('./services-shim')
     }
 };
 

jupyter-js-widgets/src/jquery.js

@@ -2,14 +2,16 @@
 // Distributed under the terms of the Modified BSD License.
 
 // TODO: REMOVE ALL JQUERY FROM THE CODEBASE
+// Update March 2016: JQuery removed from most widgets, only
+// still used in slider (jquery-ui) in widget_int.js.
+
 var $;
 if (typeof window !== 'undefined' && window['$']) {
     $ = window['$'];
 } else {
-    $ = require("jquery");
+    $ = require('jquery');
     global.jQuery = $; // Required for bootstrap to load correctly
 
-    require("jquery-ui");
-    require("bootstrap");
+    require('jquery-ui');
 }
 module.exports = $;