Browse Source

HUE-3486 [fb] Harmonize modal dialogs

Enrico Berti 9 years ago
parent
commit
1b690fd

+ 1 - 1
apps/filebrowser/src/filebrowser/static/filebrowser/css/listdir_components.css

@@ -307,4 +307,4 @@
   -moz-box-shadow: none;
   box-shadow: none;
   font-weight: bold;
-}
+}

+ 52 - 52
apps/filebrowser/src/filebrowser/templates/listdir_components.mako

@@ -153,9 +153,9 @@ from django.utils.translation import ugettext as _
   </div>
 
   <!-- rename modal -->
-  <div id="renameModal" class="modal hide fade">
-    <form id="renameForm" action="/filebrowser/rename?next=${current_request_path | n,unicode }" method="POST" enctype="multipart/form-data" class="form-inline form-padding-fix">
-      ${ csrf_token(request) | n,unicode }
+  <form id="renameForm" action="/filebrowser/rename?next=${current_request_path | n,unicode }" method="POST" enctype="multipart/form-data" class="form-inline form-padding-fix">
+    ${ csrf_token(request) | n,unicode }
+    <div id="renameModal" class="modal hide fade">
       <div class="modal-header">
         <a href="#" class="close" data-dismiss="modal">&times;</a>
         <h3>${_('Renaming:')} <span id="renameFileName">file name</span></h3>
@@ -174,17 +174,17 @@ from django.utils.translation import ugettext as _
         <a class="btn" data-dismiss="modal">${_('Cancel')}</a>
         <input type="submit" value="${_('Rename')}" class="btn btn-primary" />
       </div>
-    </form>
-  </div>
+    </div>
+  </form>
 
   <!-- chown modal -->
   % if is_fs_superuser:
-  <div id="changeOwnerModal" class="modal hide fade">
+  <form id="chownForm" action="/filebrowser/chown" method="POST" enctype="multipart/form-data" class="form-stacked form-padding-fix">
+    ${ csrf_token(request) | n,unicode }
+    <div id="changeOwnerModal" class="modal hide fade">
     <%
       select_filter = is_fs_superuser and 'SelectWithOther' or ''
     %>
-    <form id="chownForm" action="/filebrowser/chown" method="POST" enctype="multipart/form-data" class="form-stacked form-padding-fix">
-      ${ csrf_token(request) | n,unicode }
       <div class="modal-header">
         <a href="#" class="close" data-dismiss="modal">&times;</a>
         <h3>${_('Change Owner/Group')}</h3>
@@ -209,14 +209,14 @@ from django.utils.translation import ugettext as _
         <a class="btn" onclick="$('#changeOwnerModal').modal('hide');">${_('Cancel')}</a>
         <input class="btn btn-primary" type="submit" value="${_('Submit')}" />
       </div>
-    </form>
-  </div>
+    </div>
+  </form>
   % endif
 
   <!-- chmod modal -->
-  <div id="changePermissionModal" class="modal hide fade">
-    <form action="/filebrowser/chmod" method="POST" enctype="multipart/form-data" class="form-inline form-padding-fix" id="chmodForm">
-      ${ csrf_token(request) | n,unicode }
+  <form action="/filebrowser/chmod" method="POST" enctype="multipart/form-data" class="form-inline form-padding-fix" id="chmodForm">
+    ${ csrf_token(request) | n,unicode }
+    <div id="changePermissionModal" class="modal hide fade">
       <div class="modal-header">
         <a href="#" class="close" data-dismiss="modal">&times;</a>
         <h3>${_('Change Permissions:')} </h3>
@@ -274,19 +274,19 @@ from django.utils.translation import ugettext as _
         <a class="btn" onclick="$('#changePermissionModal').modal('hide');">${_('Cancel')}</a>
         <input class="btn btn-primary" type="submit" value="${_('Submit')}"/>
       </div>
-    </form>
-  </div>
+    </div>
+  </form>
 
   <!-- move modal -->
-  <div id="moveModal" class="modal hide fade">
-    <form id="moveForm" action="/filebrowser/move" method="POST" enctype="multipart/form-data" class="form-inline form-padding-fix">
-      ${ csrf_token(request) | n,unicode }
+  <form id="moveForm" action="/filebrowser/move" method="POST" enctype="multipart/form-data" class="form-inline form-padding-fix">
+    ${ csrf_token(request) | n,unicode }
+    <div id="moveModal" class="modal hide fade">
       <div class="modal-header" style="padding-bottom: 10px">
         <a href="#" class="close" data-dismiss="modal">&times;</a>
         <h3>${_('Move to')}</h3>
       </div>
       <div class="modal-body">
-        <div id="moveHdfsTree" style="padding-left: 15px;"></div>
+        <div id="moveHdfsTree"></div>
       </div>
       <div class="modal-footer">
         <div>
@@ -296,13 +296,13 @@ from django.utils.translation import ugettext as _
         <a class="btn" onclick="$('#moveModal').modal('hide');">${_('Cancel')}</a>
         <input class="btn btn-primary disable-enter" type="submit" value="${_('Move')}"/>
       </div>
-    </form>
-  </div>
+    </div>
+  </form>
 
   <!-- copy modal -->
-  <div id="copyModal" class="modal hide fade">
-    <form id="copyForm" action="/filebrowser/copy" method="POST" enctype="multipart/form-data" class="form-inline form-padding-fix">
-      ${ csrf_token(request) | n,unicode }
+  <form id="copyForm" action="/filebrowser/copy" method="POST" enctype="multipart/form-data" class="form-inline form-padding-fix">
+    ${ csrf_token(request) | n,unicode }
+    <div id="copyModal" class="modal hide fade">
       <div class="modal-header" style="padding-bottom: 10px">
         <a href="#" class="close" data-dismiss="modal">&times;</a>
         <h3>${_('Copy to')}</h3>
@@ -318,8 +318,8 @@ from django.utils.translation import ugettext as _
         <a class="btn" onclick="$('#copyModal').modal('hide');">${_('Cancel')}</a>
         <input class="btn btn-primary disable-enter" type="submit" value="${_('Copy')}"/>
       </div>
-    </form>
-  </div>
+    </div>
+  </form>
 
   <!-- upload file modal -->
   <div id="uploadFileModal" class="modal hide fade" data-backdrop="static">
@@ -354,9 +354,9 @@ from django.utils.translation import ugettext as _
   </div>
 
   <!-- new directory modal -->
-  <div id="createDirectoryModal" class="modal hide fade">
-    <form id="createDirectoryForm" data-bind="submit: createDirectory" method="POST" enctype="multipart/form-data" class="form-inline form-padding-fix">
-      ${ csrf_token(request) | n,unicode }
+  <form id="createDirectoryForm" data-bind="submit: createDirectory" method="POST" enctype="multipart/form-data" class="form-inline form-padding-fix">
+    ${ csrf_token(request) | n,unicode }
+    <div id="createDirectoryModal" class="modal hide fade">
       <div class="modal-header">
         <a href="#" class="close" data-dismiss="modal">&times;</a>
         <h3>${_('Create Directory')}</h3>
@@ -375,33 +375,33 @@ from django.utils.translation import ugettext as _
         <a class="btn" href="#" data-dismiss="modal">${_('Cancel')}</a>
         <input class="btn btn-primary" type="submit" value="${_('Create')}" />
       </div>
-    </form>
-  </div>
+    </div>
+  </form>
 
   <!-- new file modal -->
-  <div id="createFileModal" class="modal hide fade">
-    <form id="createFileForm" data-bind="submit: createFile" method="POST" enctype="multipart/form-data" class="form-inline form-padding-fix">
-      ${ csrf_token(request) | n,unicode }
-      <div class="modal-header">
-        <a href="#" class="close" data-dismiss="modal">&times;</a>
-        <h3>${_('Create File')}</h3>
-      </div>
-      <div class="modal-body">
-        <label>${_('File Name')} <input id="newFileNameInput" name="name" value="" type="text" class="input-xlarge"/></label>
-        <input type="hidden" name="path" type="text" data-bind="value: currentPath"/>
-      </div>
-      <div class="modal-footer">
-         <div id="fileNameRequiredAlert" class="alert-message error hide" style="position: absolute; left: 10px;">
-          <span class="label label-important">${_('File name is required.')}</span>
+  <form id="createFileForm" data-bind="submit: createFile" method="POST" enctype="multipart/form-data" class="form-inline form-padding-fix">
+    ${ csrf_token(request) | n,unicode }
+    <div id="createFileModal" class="modal hide fade">
+        <div class="modal-header">
+          <a href="#" class="close" data-dismiss="modal">&times;</a>
+          <h3>${_('Create File')}</h3>
         </div>
-        <div id="fileNameExistsAlert" class="hide" style="position: absolute; left: 10px;">
-          <span class="label label-important"><span class="newName"></span> ${_('already exists.')}</span>
+        <div class="modal-body">
+          <label>${_('File Name')} <input id="newFileNameInput" name="name" value="" type="text" class="input-xlarge"/></label>
+          <input type="hidden" name="path" type="text" data-bind="value: currentPath"/>
         </div>
-        <a class="btn" href="#" data-dismiss="modal">${_('Cancel')}</a>
-        <input class="btn btn-primary" type="submit" value="${_('Create')}" />
-      </div>
-    </form>
-  </div>
+        <div class="modal-footer">
+           <div id="fileNameRequiredAlert" class="alert-message error hide" style="position: absolute; left: 10px;">
+            <span class="label label-important">${_('File name is required.')}</span>
+          </div>
+          <div id="fileNameExistsAlert" class="hide" style="position: absolute; left: 10px;">
+            <span class="label label-important"><span class="newName"></span> ${_('already exists.')}</span>
+          </div>
+          <a class="btn" href="#" data-dismiss="modal">${_('Cancel')}</a>
+          <input class="btn btn-primary" type="submit" value="${_('Create')}" />
+        </div>
+    </div>
+  </form>
 
   <!-- content summary modal -->
   <div id="contentSummaryModal" class="modal hide fade">

+ 0 - 5
desktop/core/src/desktop/static/desktop/css/hue3.css

@@ -1962,11 +1962,6 @@ input.no-margin, select.no-margin {
   margin-top: -10px;
 }
 
-form.form-inline .modal-header .close {
-  margin-top: 0;
-  margin-right: -10px;
-}
-
 .margin-top-10 {
   margin-top: 10px;
 }

+ 12 - 0
desktop/core/src/desktop/static/desktop/js/hue.utils.js

@@ -202,6 +202,18 @@ Array.prototype.diff = function (a) {
     }
   }
 
+  /**
+   * @constructor
+   */
+  hueUtils.scrollbarWidth = function () {
+    var $parent, $children, width;
+    $parent = $('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo('body');
+    $children = $parent.children();
+    width = $children.innerWidth() - $children.height(99).innerWidth();
+    $parent.remove();
+    return width;
+  }
+
 
 }(hueUtils = window.hueUtils || {}));
 

+ 17 - 4
desktop/core/src/desktop/static/desktop/js/jquery.hdfstree.js

@@ -76,8 +76,9 @@
     _el.empty();
     _el.addClass("jHueHdfsTree");
 
+    var _homeLink;
     if (_this.options.home != "") {
-      var _homeLink = $("<a>").html('<i class="fa fa-home"></i> ' + _this.options.labels.HOME).click(function () {
+        _homeLink = $("<a>").html('<i class="fa fa-home"></i> ' + _this.options.labels.HOME).click(function () {
         var _path = _this.options.home;
         _this.options.onPathChange(_path);
         _this.lastPath = _path;
@@ -97,11 +98,11 @@
       _homeLink.css({
         "cursor": "pointer",
         "position": "fixed",
-        "margin-top": "-10px",
-        "margin-left": "12px",
+        "padding-bottom": '4px',
         "font-size": "16px",
+        "border-bottom": "1px solid #FFF",
         "background-color": "#FFF",
-        "width": "560px"
+        "width": (560 - hueUtils.scrollbarWidth()) + "px"
       })
     }
 
@@ -110,6 +111,18 @@
 
     if (_this.options.home != "") {
       _homeLink.appendTo(_el);
+      _el.parent().on('scroll', function(){
+        if (_el.parent().scrollTop() > 0){
+          _homeLink.css({
+            "border-bottom": "1px solid #EEE"
+          });
+        }
+        else {
+          _homeLink.css({
+            "border-bottom": "1px solid #FFF"
+          });
+        }
+      });
     }
     _tree.appendTo(_el);
 

+ 1 - 10
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -1446,15 +1446,6 @@ ${ hueIcons.symbols() }
 
   ace.config.set("basePath", "/static/desktop/js/ace");
 
-  $.scrollbarWidth = function() {
-    var _parent, _child, _width;
-    _parent = $('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo('body');
-    _child = _parent.children();
-    _width = _child.innerWidth() - _child.height(99).innerWidth();
-    _parent.remove();
-    return _width;
-  };
-
   function createDatatable(el, snippet, vm) {
     $(el).addClass("dt");
     var DATATABLES_MAX_HEIGHT = 330;
@@ -2303,7 +2294,7 @@ ${ hueIcons.symbols() }
       };
       $(window).data('beforeunload', window.onbeforeunload);
 
-      $(".preview-sample").css("right", (10 + $.scrollbarWidth()) + "px");
+      $(".preview-sample").css("right", (10 + hueUtils.scrollbarWidth()) + "px");
 
       $(window).bind("keydown", "ctrl+s alt+s meta+s", function (e) {
         e.preventDefault();