Merge pull request #172 from owennw/dev

owennw · owennw · commit 86eac96becc2 · 2016-01-11T14:45:19.000Z
Dev
diff --git a/.eslintrc b/.eslintrc
@@ -82,7 +82,7 @@
         "no-with": 2,
         "radix": 2,
         "vars-on-top": 0,
-        "wrap-iife": 2,
+        "wrap-iife": 0,
         "yoda": 2,
         "strict": 0,
         "no-catch-shadow": 2,
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "less": "^2.5.3"
   },
   "dependencies": {
-    "d3fc-showcase": "bjedrzejewski/d3fc-showcase#2f44b01"
+    "d3fc-showcase": "bjedrzejewski/d3fc-showcase#4f5daad"
   },
   "description": "Hosts the d3fc-showcase as an OpenFin application."
 }
diff --git a/src/.eslintrc b/src/.eslintrc
@@ -3,6 +3,7 @@
         "angular": true,
         "moment":  true,
         "fin": true,
-        "window": true
+        "window": true,
+        "jQuery": true
     }
 }
diff --git a/src/assets/styles/custom-scroll.less b/src/assets/styles/custom-scroll.less
@@ -0,0 +1,26 @@
+.sideScroll {
+  top: 52px;
+  bottom: 0px;
+  position: fixed;
+  padding-bottom: 30px;
+  padding-bottom: 0px;
+}
+
+.sideScroll .mCSB_scrollTools {
+  left: 2px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.mCSB_dragger_bar {
+  width: 10px !important;
+  background-color: @dark-background !important;
+}
+
+.mCSB_draggerRail {
+  display: none !important;
+}
+
+.mCSB_container {
+  margin-right: 0px !important;
+}
diff --git a/src/assets/styles/favourites.less b/src/assets/styles/favourites.less
@@ -27,17 +27,23 @@
 
   .top {
     height: @top-height;
-    padding-left: 5px;
+    padding-left: 20px;
   }
 
   .bottom {
     height: @chart-height;
   }
 
-  .star {
+  .star, .tearable {
     float: right;
   }
 
+  .tearable {
+    width: 16px;
+    margin-left: 4px;
+    cursor: default;
+  }
+
   .row {
     padding-left: 10px;
   }
diff --git a/src/assets/styles/style.less b/src/assets/styles/style.less
@@ -8,6 +8,7 @@
 @import "favourites.less";
 @import "star.less";
 @import "showcase-changes.less";
+@import "custom-scroll.less";
 
 .row {
   margin: 0px;
diff --git a/src/assets/svg/drag_handle.svg b/src/assets/svg/drag_handle.svg
@@ -0,0 +1,11 @@
+﻿<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+  <path fill="#464E58" d="M16.9,17.5c-0.1,0-0.3,0-0.4-0.1L0.6,1.4c-0.2-0.2-0.2-0.5,0-0.7c0.2-0.2,0.5-0.2,0.7,0
+	l15.9,16c0.2,0.2,0.2,0.5,0,0.7C17.2,17.5,17.1,17.5,16.9,17.5z"/>
+  <path fill="#464E58" d="M16.9,13.6c-0.1,0-0.3,0-0.4-0.1L4.5,1.4c-0.2-0.2-0.2-0.5,0-0.7c0.2-0.2,0.5-0.2,0.7,0
+	l12.1,12.1c0.2,0.2,0.2,0.5,0,0.7C17.2,13.6,17.1,13.6,16.9,13.6z"/>
+  <path fill="#464E58" d="M17,9.5c-0.1,0-0.3,0-0.4-0.1l-8-8c-0.2-0.2-0.2-0.5,0-0.7c0.2-0.2,0.5-0.2,0.7,0l8,8
+	c0.2,0.2,0.2,0.5,0,0.7C17.2,9.5,17.1,9.5,17,9.5z"/>
+  <path fill="#464E58" d="M17,5.5c-0.1,0-0.3,0-0.4-0.1l-4-4c-0.2-0.2-0.2-0.5,0-0.7c0.2-0.2,0.5-0.2,0.7,0l4,4
+	c0.2,0.2,0.2,0.5,0,0.7C17.3,5.5,17.1,5.5,17,5.5z"/>
+</svg>
diff --git a/src/customScroller.js b/src/customScroller.js
@@ -0,0 +1,6 @@
+(function($) {
+    $(window).load(function() {
+        $('#searchScroll').mCustomScrollbar();
+        $('#favScroll').mCustomScrollbar();
+    });
+})(jQuery);
diff --git a/src/index.html b/src/index.html
@@ -7,6 +7,7 @@
     <title>OpenFin D3FC</title>
     <link rel="stylesheet" href="assets/css/style.css">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/d3fc/5.1.0/d3fc.min.css" rel="stylesheet" />
+    <link href="http://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.min.css" rel="stylesheet" />
     <style>
         [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
             display: none !important;
@@ -26,21 +27,25 @@
                         </form>
                     </div>
                 </div>
-                <div class="sidetab" ng-style="{'width': sidebarCtrl.largeBarWidth}" ng-repeat="stock in searchCtrl.stocks"
-                     ng-show="sidebarCtrl.showSearches()" ng-mouseenter="stock.isHovered = true;" ng-mouseleave="stock.isHovered = false;">
-                    <search stock="stock" selection="mainCtrl.selection" select="mainCtrl.select(stock)"></search>
+                <div id="searchScroll" class="sideScroll">
+                    <div class="sidetab" ng-style="{'width': sidebarCtrl.largeBarWidth}" ng-repeat="stock in searchCtrl.stocks"
+                         ng-show="sidebarCtrl.showSearches()" ng-mouseenter="stock.isHovered = true;" ng-mouseleave="stock.isHovered = false;">
+                        <search stock="stock" selection="mainCtrl.selection" select="mainCtrl.select(stock)"></search>
+                    </div>
                 </div>
             </div>
             <div class="favourites" ng-controller="FavouritesCtrl as favouritesCtrl" ng-click="sidebarCtrl.favouritesClick()"
                  ng-style="{'width': sidebarCtrl.favouritesWidth()}">
                 <div class="row sidetab-top">
                     <div class="glyphicon glyphicon-star top-icon"></div>
                 </div>
-                <div class="sidetab" ng-style="{'width': sidebarCtrl.largeBarWidth}" ng-repeat="stock in favouritesCtrl.stocks"
-                     ng-show="sidebarCtrl.showFavourites()">
-                    <favourite selection="mainCtrl.selection" select="mainCtrl.select(stock)"
-                               stock="stock" icon="favouritesCtrl.icon(stock)" render-chart="favouritesCtrl.renderChart(stock)">
-                    </favourite>
+                <div id="favScroll" class="sideScroll">
+                    <div class="sidetab" ng-style="{'width': sidebarCtrl.largeBarWidth}" ng-repeat="stock in favouritesCtrl.stocks"
+                         ng-show="sidebarCtrl.showFavourites()">
+                        <favourite selection="mainCtrl.selection" select="mainCtrl.select(stock)"
+                                   stock="stock" icon="favouritesCtrl.icon(stock)" render-chart="favouritesCtrl.renderChart(stock)">
+                        </favourite>
+                    </div>
                 </div>
             </div>
         </div>
@@ -57,12 +62,15 @@
             </div>
         </div>
     </div>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="http://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.concat.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-resource.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-animate.js"></script>
     <script src="https://cdn.rawgit.com/auth0/angular-storage/master/dist/angular-storage.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/d3fc/5.1.0/d3fc.bundle.min.js"></script>
+    <script src="customScroller.js"></script>
     <script src="app.js"></script>
     <script src="main-controller.js"></script>
     <script src="showcase/showcase-directive.js"></script>
diff --git a/src/sidebars/favourites/favourite-preview.html b/src/sidebars/favourites/favourite-preview.html
@@ -1,5 +1,7 @@
-﻿<div class="favourite sidetab darkens {{selection !== stock.code ? '' : 'dark'}}" ng-click="select(stock)" draggable="false">
+﻿<hr class="splitter" />
+<div class="favourite sidetab darkens {{selection !== stock.code ? '' : 'dark'}}" ng-click="select(stock)" draggable="false">
     <div class="top">
+        <img class="tearable" src="assets/svg/drag_handle.svg" />
         <div class="star" ng-controller="StarCtrl as starCtrl">
             <star ng-init="starCtrl.check = true" star-classes="starCtrl.classes(stock)" star-click="starCtrl.click(stock)"></star>
         </div>
@@ -15,4 +17,3 @@
         </div>
     </div>
 </div>
-<hr class="splitter" />
diff --git a/src/sidebars/search/search-preview.html b/src/sidebars/search/search-preview.html
@@ -1,4 +1,5 @@
-﻿<div class="search-result darkens {{selection !== stock.code ? '' : 'dark'}}" ng-click="select(stock)">
+﻿<hr class="splitter" />
+<div class="search-result darkens {{selection !== stock.code ? '' : 'dark'}}" ng-click="select(stock)">
     <div class="details">
         <div class="name">{{stock.name | truncate}}</div>
         <div class="code">{{stock.code | uppercase}}</div>
@@ -7,4 +8,3 @@
         <star ng-init="starCtrl.check = false" star-classes="starCtrl.classes(stock)" star-click="starCtrl.click(stock)"></star>
     </div>
 </div>
-<hr class="splitter" />

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@`
`22`	`22`	`"less": "^2.5.3"`
`23`	`23`	`},`
`24`	`24`	`"dependencies": {`
`25`		`- "d3fc-showcase": "bjedrzejewski/d3fc-showcase#2f44b01"`
	`25`	`+ "d3fc-showcase": "bjedrzejewski/d3fc-showcase#4f5daad"`
`26`	`26`	`},`
`27`	`27`	`"description": "Hosts the d3fc-showcase as an OpenFin application."`
`28`	`28`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@`
`3`	`3`	`"angular": true,`
`4`	`4`	`"moment": true,`
`5`	`5`	`"fin": true,`
`6`		`- "window": true`
	`6`	`+ "window": true,`
	`7`	`+ "jQuery": true`
`7`	`8`	`}`
`8`	`9`	`}`
Original file line number	Diff line number	Diff line change
`@@ -27,17 +27,23 @@`
`27`	`27`
`28`	`28`	`.top {`
`29`	`29`	`height: @top-height;`
`30`		`- padding-left: 5px;`
	`30`	`+ padding-left: 20px;`
`31`	`31`	`}`
`32`	`32`
`33`	`33`	`.bottom {`
`34`	`34`	`height: @chart-height;`
`35`	`35`	`}`
`36`	`36`
`37`		`- .star {`
	`37`	`+ .star, .tearable {`
`38`	`38`	`float: right;`
`39`	`39`	`}`
`40`	`40`
	`41`	`+ .tearable {`
	`42`	`+ width: 16px;`
	`43`	`+ margin-left: 4px;`
	`44`	`+ cursor: default;`
	`45`	`+ }`
	`46`	`+`
`41`	`47`	`.row {`
`42`	`48`	`padding-left: 10px;`
`43`	`49`	`}`