浏览代码

HUE-5002 [editor] Improve nav tag edit mode layout

This puts the edit icon next to the last tag, the save and cancel actions are still in upper right for now as it's not trivial to have them next to the last tag with Selectize active. The save and close are now always visible and slightly larger.
Johan Ahlen 9 年之前
父节点
当前提交
8b558b9

+ 18 - 9
desktop/core/src/desktop/static/desktop/ext/css/selectize.css

@@ -159,31 +159,38 @@
   border-color: transparent;
 }
 
+.selectize-edit {
+  font-size: 18px;
+  vertical-align: middle !important;
+  margin-left: 5px;
+  color: #999;
+  transition: color 0.2s linear;
+}
+
+.selectize-edit:hover {
+  color: #338BB8;
+}
+
 .selectize-actions {
   z-index: 10000;
   font-size: 15px;
   position: absolute;
-  top: 1px;
+  top: 3px;
   right: 3px;
-  opacity: 0;
-  transition: opacity 0.2s ease;
 }
 
 .selectize-actions i {
   cursor: pointer;
+  font-size: 18px;
   color: #999;
   transition: color 0.2s linear;
-  margin-left: 2px;
+  margin-left: 4px;
 }
 
 .selectize-actions i:hover {
   color: #338BB8;
 }
 
-.selectize-actions-visible {
-  opacity: 1;
-}
-
 .selectize-control.multi .selectize-input.has-items {
   padding: 6px 8px 3px;
   box-shadow: none;
@@ -309,10 +316,12 @@
 }
 
 .selectize-dropdown [data-selectable] .highlight {
-  background: rgba(125, 168, 208, 0.2);
+  font-weight: bold;
+  color: #303030 !important;
   -webkit-border-radius: 1px;
   -moz-border-radius: 1px;
   border-radius: 1px;
+  padding: 0 !important;
 }
 
 .selectize-dropdown [data-selectable],

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

@@ -80,12 +80,12 @@
       var currentSelectize;
 
       var showEdit = function () {
-        options.options = $.map(options.setTags(), function (value) { return { value: value, text: value } }),
+        options.options = $.map(options.setTags(), function (value) { return { value: value, text: value } });
         currentSelectize = $element.selectize(options)[0].selectize;
         $readOnlyContainer.hide();
-        $element.next().find('.selectize-input').css('padding-right', '25px');
+        $element.next().find('.selectize-input').css('padding-right', '38px');
         $element.next().find('input').focus();
-        var $editActions = $('<div>').addClass('selectize-actions selectize-actions-visible').appendTo($element.next());
+        var $editActions = $('<div>').addClass('selectize-actions').appendTo($element.next());
         $('<i>').addClass('fa fa-check').click(function () {
           options.onSave(currentSelectize.getValue());
           showReadOnly();
@@ -93,14 +93,6 @@
         $('<i>').addClass('fa fa-close').click(function () {
           showReadOnly();
         }).appendTo($editActions);
-
-        $element.next().on('mouseover', function () {
-          $editActions.addClass('selectize-actions-visible');
-        });
-
-        $element.next().on('mouseout', function () {
-          $editActions.removeClass('selectize-actions-visible');
-        });
       };
 
       var showReadOnly = function () {
@@ -114,16 +106,13 @@
           options.setTags().forEach(function (tag) {
             $('<div>').addClass('item-read-only').text(tag).appendTo($readOnlyInner);
           });
-        } else {
-          $('<input type="text">').attr('placeholder', options.placeholder).appendTo($readOnlyInner);
         }
 
-        var $readOnlyActions = $('<div>').addClass('selectize-actions').appendTo($readOnlyContainer);
-        $readOnlyContainer.show();
-
-        $('<i>').addClass('fa fa-edit').click(function () {
+        $('<i>').addClass('fa fa-edit selectize-edit').click(function () {
           showEdit();
-        }).appendTo($readOnlyActions);
+        }).appendTo($readOnlyInner);
+
+        $readOnlyContainer.show();
       };
 
       showReadOnly();

+ 1 - 1
desktop/core/src/desktop/templates/nav_components.mako

@@ -119,7 +119,7 @@ from metadata.conf import has_navigator
         };
 
         self.onSave = function (value) {
-          var newTags = value.split(',');
+          var newTags = value.length > 0 ? value.split(',') : [];
           var tagsToRemove = [];
           var tagsToAdd = [];
           var tagIndex = {};