Bookmark: JSHint, css to less including corporate design

vispa/extensions/file/static/css/base/base.css

-.file-content{-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;user-select:none}.fileselector>.file-content{position:relative;height:100%;width:100%;overflow:hidden}.fileselector>.file-view-content-container{max-height:250px}.actionmenu{position:absolute;display:none}.file-menu{height:0;overflow:auto;visibility:hidden}.table-info-dialog>tbody>tr>td{border:none;border:0;border-top:0}.table-info-dialog-width{width:114px}.table-info-dialog{overflow:hidden;table-layout:fixed;word-wrap:break-word}.file-info-dialog-header{margin-bottom:20px}.filterField{bottom:5px;right:5px;position:absolute;visibility:hidden;width:300px;z-index:99}.file-dragover{background-color:#5cb85c !important;opacity:.5}.file-dragstart{opacity:.4}[draggable=true]{cursor:move;-khtml-user-drag:element}.file-path-bar{line-height:15px !important;width:100% !important;position:absolute !important;left:0 !important;bottom:0 !important;height:32px !important;background-color:#f5f5f5;overflow-x:auto;overflow-y:hidden;border-top:1px solid #ddd}.file-path-bar>.bookmark-opener{left:0;bottom:0;width:30px;height:30px;position:absolute;padding:8px 0;cursor:pointer;border-right:1px solid #ddd}.file-path-bar>.breadcrumb{border-radius:0;background-color:#f5f5f5;left:30px;top:0;position:absolute}.file-path-bar>.breadcrumb>li,.file-path-bar>.breadcrumb li:before{color:#333}
\ No newline at end of file
+.file-content{-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;user-select:none}.fileselector>.file-content{position:relative;height:100%;width:100%;overflow:hidden}.fileselector>.file-view-content-container{max-height:250px}.actionmenu{position:absolute;display:none}.file-menu{height:0;overflow:auto;visibility:hidden}.table-info-dialog>tbody>tr>td{border:none;border:0;border-top:0}.table-info-dialog-width{width:114px}.table-info-dialog{overflow:hidden;table-layout:fixed;word-wrap:break-word}.file-info-dialog-header{margin-bottom:20px}.filterField{bottom:5px;right:5px;position:absolute;visibility:hidden;width:300px;z-index:99}.file-dragover{background-color:#5cb85c !important;opacity:.5}.file-dragstart{opacity:.4}[draggable=true]{cursor:move;-khtml-user-drag:element}.file-path-bar{line-height:15px !important;width:100% !important;position:absolute !important;left:0 !important;bottom:0 !important;height:32px !important;background-color:#f5f5f5;overflow-x:auto;overflow-y:hidden;border-top:1px solid #ddd}.file-path-bar>.bookmark-opener{left:0;bottom:0;width:32px;height:32px;position:absolute;padding:8px 0;cursor:pointer;border-right:1px solid #ddd}.file-path-bar>.bookmark-opener:hover{background-color:#dcdcdc}.file-path-bar>.breadcrumb{border-radius:0;background-color:#f5f5f5;left:32px;top:0;position:absolute}.file-path-bar>.breadcrumb>li,.file-path-bar>.breadcrumb li:before{color:#333}/*# sourceMappingURL=base.css.map */
\ No newline at end of file

vispa/extensions/file/static/css/base/base.less

 @brand-success: #5cb85c;
 @gray-dark: lighten(#000, 20%);
+@gray-lighter: lighten(#000, 93.5%);
 @table-bg-hover: #f5f5f5;
 @table-border-color: #ddd;
 @breadcrumb-bg: #f5f5f5;
+@breadcrumb-padding-vertical: 8px;
 
 /* main template */
 .file-content {
@@ -92,18 +94,21 @@
     //block has to be removed, when bookmarks leave this place
     left: 0px;
     bottom: 0px;
-    width: 30px;
-    height: 30px;
+    width: 32px;
+    height: 32px;
     position: absolute;
-    padding: 8px 0px;
+    padding: @breadcrumb-padding-vertical 0px;
     cursor: pointer;
     border-right: 1px solid @table-border-color;
+    &:hover {
+      background-color: darken(@breadcrumb-bg, 10%);
+    }
   }
   > .breadcrumb {
     border-radius: 0px;
     background-color: @breadcrumb-bg;
     // border-top: 1px solid @table-border-color; entry has to be set when bookmarks leave this place 
-    left: 30px; // entry has to be removed, when bookamrks leave this place
+    left: 32px; // entry has to be removed, when bookamrks leave this place
     top: 0px; // entry has to be removed, when bookamrks leave this place
     position: absolute; // entry has to be removed, when bookamrks leave this place
     > li, li:before {

vispa/extensions/file/static/css/base/bookmark.css

-.bookmark-container {
-    position: absolute;
-    left: 0px;
-    bottom: 30px;
-    overflow: hidden;
-    border-top: 1px solid #b8b8b8;
-    border-right: 1px solid #b8b8b8;
-    background-color: rgba(255,255,255,1);
-    z-index: 2000;
-    visibility: hidden;
-}
-
-.bookmarks {
-    overflow: auto;
-    white-space: nowrap;
-}
-
-.bookmark {
-    padding: 3px 8px;
-    margin: 0%;
-    cursor: pointer;
-}
-
-.bookmark:hover {
-    background-color: #f5f5f5;
-}
-
-.bookmark-button {
-    margin: 3px 8px;
-}
-
-.bookmark:hover > a {
-    color: #444444;
-}
-
-.bookmark-glyphicon-symbol {
-    color: #444444;
-}
-
-.bookmark-glyphicon-symbol:hover {
-    color: #000000 !important;
-}
-
-.bookmark-glyphicon-edit {
-    color: #ffffff;
-}
-
-.bookmark-glyphicon-edit:hover {
-    color: #000000 !important;
-}
-
-.bookmark-glyphicon-remove {
-    color: #ffffff;
-}
-
-.bookmark-glyphicon-remove:hover {
-    color: #000000 !important;
-}
\ No newline at end of file
+.bookmark-container{position:absolute;left:0;bottom:32px;overflow:hidden;padding:0;border-top:1px solid #ddd;border-right:1px solid #ddd;background-color:#f5f5f5;z-index:1000;visibility:hidden}.bookmark-container .bookmark-button{background-color:#f5f5f5;margin:6px 12px}.bookmark-container .bookmark-button:hover{background-color:#dcdcdc}.bookmark-container>.bookmarks{overflow:auto;white-space:nowrap}.bookmark-container>.bookmarks>.bookmark{padding:6px 12px;margin:0;cursor:pointer}.bookmark-container>.bookmarks>.bookmark:hover{background-color:#dcdcdc}.bookmark-container>.bookmarks>.bookmark:hover>a{color:#333}.bookmark-container>.bookmarks>.bookmark>.bookmark-glyphicon-symbol{color:#333}.bookmark-container>.bookmarks>.bookmark>.bookmark-glyphicon-symbol:hover{color:#000 !important}.bookmark-container>.bookmarks>.bookmark>.bookmark-glyphicon-edit{color:#f5f5f5}.bookmark-container>.bookmarks>.bookmark>.bookmark-glyphicon-edit:hover{color:#000 !important}.bookmark-container>.bookmarks>.bookmark>.bookmark-glyphicon-remove{color:#f5f5f5}.bookmark-container>.bookmarks>.bookmark>.bookmark-glyphicon-remove:hover{color:#000 !important}/*# sourceMappingURL=bookmark.css.map */
\ No newline at end of file

vispa/extensions/file/static/css/base/bookmark.less

+@table-border-color: #ddd;
+@breadcrumb-bg: #f5f5f5;
+@zindex-dropdown: 1000;
+@padding-base-vertical: 6px;
+@padding-base-horizontal: 12px;
+@gray-base: #000;
+@gray-dark: lighten(@gray-base, 20%);
+@gray-light: lighten(@gray-base, 46.7%);
+@gray-lighter: lighten(@gray-base, 93.5%);
+
+.bookmark-container {
+    position: absolute;
+    left: 0px;
+    bottom: 32px;
+    overflow: hidden;
+    padding: 0px;
+    border-top: 1px solid @table-border-color;
+    border-right: 1px solid @table-border-color;
+    background-color: @breadcrumb-bg;
+    z-index: @zindex-dropdown;
+    visibility: hidden;
+    & .bookmark-button {
+        background-color: @breadcrumb-bg;
+        margin: @padding-base-vertical @padding-base-horizontal;
+        &:hover {
+            background-color: darken(@breadcrumb-bg, 10%);
+        }
+    }
+    > .bookmarks {
+        overflow: auto;
+        white-space: nowrap;
+        > .bookmark {
+            padding: @padding-base-vertical @padding-base-horizontal;
+            margin: 0px;
+            cursor: pointer;
+          &:hover{
+              background-color: darken(@breadcrumb-bg, 10%);
+                > a {
+                    color: @gray-dark;
+                }
+            }
+            > .bookmark-glyphicon-symbol {
+                color: @gray-dark;
+                &:hover {
+                    color: @gray-base !important;
+                }        
+            }
+            > .bookmark-glyphicon-edit {
+                color: @breadcrumb-bg;
+                &:hover {
+                    color: @gray-base !important;
+                }        
+            }
+            > .bookmark-glyphicon-remove {
+                color: @breadcrumb-bg;
+                &:hover {
+                    color: @gray-base !important;
+                }        
+            }
+        }
+    }
+}
\ No newline at end of file

vispa/extensions/file/static/js/base/bookmark.js

@@ -40,7 +40,7 @@ var BookmarkContainer = Class.extend({
     this._setup_done = true;
 
     var self = this;
-    vispa.socket.on('workspace.ini_modified', function(data) {
+    vispa.socket.on("workspace.ini_modified", function(data) {
       if (data.workspaceId == self.instance.getWorkspaceId() &&
         self._workspaceini_mtime != data.mtime) {
         self._workspaceini_mtime = data.mtime;
@@ -53,7 +53,7 @@ var BookmarkContainer = Class.extend({
   setContainer: function(node) {
     var self = this;
     // get template and append to node
-    this.instance.getTemplate("html/bookmark.html", function(err, tmpl, dfd) {
+    this.instance.getTemplate("html/bookmark.html", function(err, tmpl) {
       self.container = $(tmpl).appendTo(node);
     });
   },
@@ -63,7 +63,7 @@ var BookmarkContainer = Class.extend({
     // get names from workspaceini
     this.instance.POST("/ajax/fs/get_workspaceini", {
       request: JSON.stringify({
-        Bookmarks: ['names', 'paths', 'symbols']
+        Bookmarks: ["names", "paths", "symbols"]
       })
     }).done(function(data) {
       if (!data.success) {
@@ -85,9 +85,9 @@ var BookmarkContainer = Class.extend({
           self.paths = data.content.Bookmarks.paths.split(":");
           self.symbols = data.content.Bookmarks.symbols.split(":");
         }
-        if (self.names.join() == "" ||
-          self.paths.join() == "" ||
-          self.symbols.join() == "") {
+        if (self.names.join() === "" ||
+          self.paths.join() === "" ||
+          self.symbols.join() === "") {
           self.names = [];
           self.paths = [];
           self.symbols = [];
@@ -198,7 +198,7 @@ var BookmarkContainer = Class.extend({
           symbols: this.symbols.join(":")
         }
       })
-    })
+    });
   },
 
   addBookmark: function() {
@@ -206,8 +206,11 @@ var BookmarkContainer = Class.extend({
     // add data
     this.symbols[this.symbols.length] = "bookmark";
     this.paths[this.paths.length] = this.FileBase.workflow.path;
-    this.names[this.names.length] = this.FileBase.helper.filenameFromPath(this.paths[this.paths.length - 1]);
-    if (this.names[this.names.length - 1] == "") this.names[this.names.length - 1] = "New bookmark";
+    this.names[this.names.length] = this.FileBase.helper
+      .filenameFromPath(this.paths[this.paths.length - 1]);
+    if (this.names[this.names.length - 1] === "") {
+      this.names[this.names.length - 1] = "New bookmark";
+    }
     // set new data to ini and update view
     this.saveBookmarks().done(function(res) {
       if (res.success) {
@@ -315,7 +318,7 @@ var BookmarkContainer = Class.extend({
     self.container.css({
       "visibility": "visible"
     });
-    if (self.names.length == 0) {
+    if (self.names.length === 0) {
       $(".bookmarks", self.container).css({
         "visibility": "hidden"
       });
@@ -336,4 +339,4 @@ var BookmarkContainer = Class.extend({
     }
   }
 
-});
\ No newline at end of file
+});