Ver Fonte

[home2] Make entries selectable on click and open them on double click

Johan Ahlen há 10 anos atrás
pai
commit
ef0d00c

+ 19 - 0
desktop/core/src/desktop/static/desktop/js/fileBrowser/hueFileEntry.js

@@ -29,6 +29,7 @@
    * @param {Object} options
    * @param {AssistHelper} options.assistHelper
    * @param {Object} options.definition
+   * @param {Function} options.currentDirectory - The observable keeping track of the current open directory
    * @param {HueFolder} options.parent
    * @param {string} options.app - Currently only 'documents' is supported
    *
@@ -36,6 +37,7 @@
    */
   function HueFileEntry (options) {
     var self = this;
+    self.currentDirectory = options.currentDirectory;
     self.parent = options.parent;
     self.definition = options.definition;
     self.assistHelper = options.assistHelper;
@@ -45,6 +47,8 @@
     self.path = self.definition.name;
     self.app = options.app;
 
+    self.selected = ko.observable(false);
+
     self.loaded = ko.observable(false);
     self.loading = ko.observable(false);
     self.hasErrors = ko.observable(false);
@@ -63,6 +67,20 @@
     }
   }
 
+  HueFileEntry.prototype.toggleSelected = function () {
+    var self = this;
+    self.selected(! self.selected());
+  };
+
+  HueFileEntry.prototype.open = function () {
+    var self = this;
+    if (self.definition.type === 'directory') {
+      self.currentDirectory(self);
+    } else {
+      window.location.href = self.definition.absoluteUrl;
+    }
+  };
+
   HueFileEntry.prototype.load = function () {
     var self = this;
     if (self.loading()) {
@@ -80,6 +98,7 @@
           });
           self.entries($.map(cleanEntries, function (definition) {
             return new HueFileEntry({
+              currentDirectory: self.currentDirectory,
               assistHelper: self.assistHelper,
               definition: definition,
               app: self.app,

+ 3 - 3
desktop/core/src/desktop/static/desktop/js/home2.vm.js

@@ -34,9 +34,9 @@
     self.isLeftPanelVisible = ko.observable();
     self.assistHelper.withTotalStorage('assist', 'assist_panel_visible', self.isLeftPanelVisible, true);
 
-    self.documents = ko.observableArray([]);
-
-    self.currentDirectory = ko.observable(new HueFileEntry({
+    self.currentDirectory = ko.observable();
+    self.currentDirectory(new HueFileEntry({
+      currentDirectory: self.currentDirectory,
       assistHelper: self.assistHelper,
       app: 'documents',
       definition: {

+ 11 - 8
desktop/core/src/desktop/templates/file_browser.mako

@@ -83,6 +83,11 @@ from desktop.views import _ko
       margin: 0;
       color: #444;
       font-size: 13px;
+      cursor: pointer;
+    }
+
+    .fb-selected {
+      background-color: #DBE8F1;
     }
 
     .fb-list i {
@@ -101,12 +106,15 @@ from desktop.views import _ko
       float: left;
       display: inline-block;
       height: 30px;
-      line-height: 30px;
       vertical-align: middle;
       padding-left: 8px;
       text-overflow: ellipsis;
     }
 
+    .fb-primary-col .fa {
+      vertical-align: middle;
+    }
+
     .fb-attr-group {
       float: right;
       display: inline-block;
@@ -273,15 +281,10 @@ from desktop.views import _ko
       </div>
       <div class="fb-list" data-bind="with: currentDirectory">
         <ul data-bind="foreach: { data: entries, itemHeight: 39, scrollableElement: '.fb-list' }">
-          <li>
+          <li data-bind="multiClick: { click: toggleSelected, dblClick: open }, css: { 'fb-selected': selected }">
             <div class="fb-primary-col">
               <i class="fa fa-fw" data-bind="css: { 'fa-folder-o' : definition.type === 'directory', 'fa-file-o': definition.type !== 'directory' }"></i>
-              <!-- ko if: definition.type === 'directory' -->
-              <a href="javascript: void(0);" data-bind="text: name, click: function () { $data.load(); $parents[1].currentDirectory($data); }"></a>
-              <!-- /ko -->
-              <!-- ko ifnot: definition.type === 'directory' -->
-              <a data-bind="text: definition.name, attr: { href: definition.absoluteUrl }"></a>
-              <!-- /ko -->
+              <a href="javascript: void(0);" data-bind="text: name, click: open"></a>
             </div>
             <div class="fb-attr-group">
               <!-- ko with: definition -->