Browse Source

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 years ago
parent
commit
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 = {};