瀏覽代碼

HUE-5036 [editor] Improve tag editor UX

- Added spinner
- Click anywhere to start edit
- Placeholder when empty
Johan Ahlen 9 年之前
父節點
當前提交
c72a8b147d

+ 6 - 0
desktop/core/src/desktop/static/desktop/ext/css/selectize.css

@@ -400,4 +400,10 @@
 .selectize-control .selectize-input.disabled {
   opacity: 0.5;
   background-color: #fafafa;
+}
+
+.selectize-no-tags {
+  color: #999;
+  margin-top: 4px;
+  margin-right: 4px;
 }

+ 7 - 3
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -135,13 +135,17 @@
         var $readOnlyInner = $('<div>').addClass('selectize-input items not-full has-options has-items').appendTo($readOnlyContainer);
         if (options.setTags().length > 0) {
           options.setTags().forEach(function (tag) {
-            $('<div>').addClass('item-read-only').text(tag).appendTo($readOnlyInner);
+            $('<div>').text(tag).appendTo($readOnlyInner);
           });
+        } else {
+          $('<span>').addClass('selectize-no-tags').text(options.placeholder).appendTo($readOnlyInner);
         }
 
-        $('<i>').addClass('fa fa-edit selectize-edit').click(function () {
+        $('<i>').addClass('fa fa-edit selectize-edit').appendTo($readOnlyInner);
+
+        $readOnlyInner.click(function () {
           showEdit();
-        }).appendTo($readOnlyInner);
+        });
 
         $readOnlyContainer.show();
       };

+ 28 - 16
desktop/core/src/desktop/templates/nav_components.mako

@@ -27,17 +27,17 @@ from metadata.conf import has_navigator
   <link href="${ static('desktop/ext/css/selectize.css') }" rel="stylesheet">
 
   <script type="text/html" id="nav-tags-template">
-    <!-- ko hueSpinner: { spin: loading } --><!-- /ko -->
-    <!-- ko ifnot: loading -->
-    <div style="width: 100%">
-      <textarea style="width: 100%" data-bind="tagEditor: {
-        placeholder: '${_ko('No tags found...')}',
-        setTags: currentTags,
-        onSave: onSave,
-        load: loadTags
-      }"></textarea>
-    </div>
-    <!-- /ko -->
+     <!-- ko if: loading -->
+     <div style="width: 100%; height: 20px; left: 6px; top: 8px; position: relative;" data-bind="hueSpinner: { spin: loading }"></div>
+     <!-- /ko -->
+     <div style="width: 100%" data-bind="ifnot: loading">
+       <textarea style="width: 100%" data-bind="tagEditor: {
+          placeholder: '${_ko('No tags found...')}',
+          setTags: currentTags,
+          onSave: onSave,
+          load: loadTags
+        }"></textarea>
+     </div>
   </script>
 
   <script type="text/javascript" charset="utf-8">
@@ -105,12 +105,16 @@ from metadata.conf import has_navigator
         });
 
         var fetchAllTags = function () {
+          var fetchDeferral = $.Deferred();
           apiHelper.listNavTags({
             successCallback: function (data) {
-              self.allTags(Object.keys(data.tags))
+              self.allTags(Object.keys(data.tags));
+              fetchDeferral.resolve();
             },
-            silenceErrors: true
+            silenceErrors: true,
+            errorCallback: fetchDeferral.reject
           });
+          return fetchDeferral.promise();
         };
         fetchAllTags();
 
@@ -119,6 +123,7 @@ from metadata.conf import has_navigator
         };
 
         self.onSave = function (value) {
+          self.loading(true);
           var newTags = value.length > 0 ? value.split(',') : [];
           var tagsToRemove = [];
           var tagsToAdd = [];
@@ -139,14 +144,21 @@ from metadata.conf import has_navigator
             }
           });
 
+          var deferrals = [];
           if (tagsToAdd.length > 0) {
-            apiHelper.addNavTags(self.identity, tagsToAdd);
+            deferrals.push(apiHelper.addNavTags(self.identity, tagsToAdd));
           }
           if (tagsToRemove.length > 0) {
-            apiHelper.deleteNavTags(self.identity, tagsToRemove);
+            deferrals.push(apiHelper.deleteNavTags(self.identity, tagsToRemove));
           }
           self.currentTags(newTags);
-          fetchAllTags();
+          deferrals.push(fetchAllTags());
+
+          var doneLoading = function () {
+            self.loading(false);
+          };
+
+          $.when.apply($, deferrals).then(doneLoading, doneLoading);
         };
       }