Преглед на файлове

HUE-3431 [home] Improve the sharing modal add user action

- "Close" changes to "Add" when a user is selected but not added
- Write/modify button next to input is now disabled if no user is selected
- A user/group is now selected when the user types the full name
- Fixed wonky offset styling of user/group dropdown
Johan Ahlen преди 9 години
родител
ревизия
8df89f11fe
променени са 2 файла, в които са добавени 16 реда и са изтрити 3 реда
  1. 5 1
      desktop/core/src/desktop/static/desktop/js/fileBrowser/hueDocument.js
  2. 11 2
      desktop/core/src/desktop/templates/file_browser.mako

+ 5 - 1
desktop/core/src/desktop/static/desktop/js/fileBrowser/hueDocument.js

@@ -71,7 +71,11 @@
           process(dropdown);
         },
         matcher: function (item) {
-          if (item.toLowerCase().indexOf(this.query.trim().toLowerCase()) != -1) {
+          if (item.toLowerCase() === this.query.trim().toLowerCase()) {
+            self.selectedUserOrGroup(usermap[item] ? usermap[item] : groupmap[item]);
+            return true;
+          } else if (item.toLowerCase().indexOf(this.query.trim().toLowerCase()) != -1) {
+            self.selectedUserOrGroup(undefined);
             return true;
           }
         },

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

@@ -302,6 +302,10 @@ from desktop.views import _ko
     .fb-search-container input {
       width: 300px;
     }
+
+    .typeahead .active {
+      padding: 0;
+    }
   </style>
 
   <script type="text/html" id="fb-template">
@@ -361,8 +365,8 @@ from desktop.views import _ko
           <div class="input-append">
             <input id="documentShareTypeahead" type="text" style="width: 420px" placeholder="${_('Type a username or a group name')}">
             <div class="btn-group" style="overflow:visible">
-              <a class="btn" data-bind="click: handleTypeAheadSelection"><i class="fa fa-plus-circle"></i> <span data-bind="text: selectedPerm() == 'read' ? '${ _('Read') }' : '${ _('Modify') }'"></span></a>
-              <a class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
+              <a class="btn" data-bind="click: function () { if (selectedUserOrGroup()) { handleTypeAheadSelection() }}, css: { 'disabled': !selectedUserOrGroup() }"><i class="fa fa-plus-circle"></i> <span data-bind="text: selectedPerm() == 'read' ? '${ _('Read') }' : '${ _('Modify') }'"></span></a>
+              <a class="btn dropdown-toggle" data-bind="css: { 'disabled': !selectedUserOrGroup() }" data-toggle="dropdown"><span class="caret"></span></a>
               <ul class="dropdown-menu">
                 <li><a data-bind="click: function () { selectedPerm('read') }" href="javascript:void(0)">${ _('Read') }</a></li>
                 <li><a data-bind="click: function () { selectedPerm('write') }" href="javascript:void(0)">${ _('Modify') }</a></li>
@@ -372,7 +376,12 @@ from desktop.views import _ko
         </div>
       </div>
       <div class="modal-footer">
+        <!-- ko if: selectedUserOrGroup()  -->
+        <a class="btn btn-primary" data-bind="click: handleTypeAheadSelection" href="javascript:void(0)">${ _('Add') }</a>
+        <!-- /ko -->
+        <!-- ko ifnot: selectedUserOrGroup() -->
         <a href="#" data-dismiss="modal" class="btn btn-primary disable-feedback disable-enter">${_('Close')}</a>
+        <!-- /ko -->
       </div>
       <!-- /ko -->
       <!-- /ko -->