瀏覽代碼

HUE-3402 [fb] Replace edit path icon with on hover styling

Enrico Berti 9 年之前
父節點
當前提交
841061f

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

@@ -286,4 +286,25 @@
 
 .qq-upload-failed-text {
   color: #b94a48;
-}
+}
+
+.editable-breadcrumbs {
+  cursor: text;
+}
+
+.editable-breadcrumbs:hover {
+  background-color: #F0F0F0;
+}
+
+#hueBreadcrumbText {
+  font-size: 1.25em;
+  margin-left: 25px;
+  margin-top: 6px;
+  padding-left: 14px;
+  border-radius: 2px;
+  border: 1px solid #EEE;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  font-weight: bold;
+}

+ 9 - 8
apps/filebrowser/src/filebrowser/templates/fb_components.mako

@@ -20,16 +20,15 @@ from django.utils.translation import ugettext as _
 %>
 
 <%def name="breadcrumbs(path, breadcrumbs, from_listdir=False)">
-    <ul class="nav nav-pills hueBreadcrumbBar">
-        % if from_listdir:
+    % if from_listdir:
+      <ul class="nav nav-pills hueBreadcrumbBar">
         <li><a href="${url('filebrowser.views.view', path=urlencode(path))}?default_to_home" class="homeLink"><i class="fa fa-home"></i> ${_('Home')}</a></li>
         <li>
-            <span style="float:right; margin-top:10px;"><i id="editBreadcrumb" class="fa fa-pencil hand" rel="tooltip" title="${_('Edit path')}"></i></span>
-            <ul class="hueBreadcrumb" data-bind="foreach: breadcrumbs" style="padding-right:40px; padding-top: 12px">
+            <ul id="editBreadcrumb" class="hueBreadcrumb editable-breadcrumbs" data-bind="foreach: breadcrumbs" style="padding-right:40px; padding-top: 12px" title="${_('Edit path')}">
                 <li data-bind="visible: label.slice(-1) == '/'"><a href="#" data-bind="click: show"><span class="divider" data-bind="text: label"></span></a></li>
                 <li data-bind="visible: label.slice(-1) != '/'"><a href="#" data-bind="text: label, click: show"></a><span class="divider">/</span></li>
             </ul>
-            <input id="hueBreadcrumbText" type="text" class="input-xxlarge" style="margin-top:4px;margin-right:4px;display:none" data-bind="value: currentPath" autocomplete="off" />
+            <input id="hueBreadcrumbText" type="text" style="display:none" data-bind="value: currentPath" autocomplete="off" />
         </li>
         <li class="pull-right">
           <a href="${url('filebrowser.views.view', path=urlencode(path))}?default_to_trash" class="trashLink" title="${_('View trash')}">
@@ -43,7 +42,9 @@ from django.utils.translation import ugettext as _
             </a>
           </div>
         </li>
-        % else:
+      </ul>
+    % else:
+      <ul class="nav nav-pills hueBreadcrumbBar">
         <li><a href="${url('filebrowser.views.view', path=urlencode(path))}?default_to_home" class="homeLink"><i class="fa fa-home"></i> ${_('Home')}</a></li>
         <li>
             <ul class="hueBreadcrumb" style="padding-right:40px; padding-top: 12px">
@@ -63,8 +64,8 @@ from django.utils.translation import ugettext as _
                     % endfor
             </ul>
         </li>
-        % endif
-    </ul>
+      </ul>
+    % endif
 </%def>
 
 

+ 6 - 4
apps/filebrowser/src/filebrowser/templates/listdir_components.mako

@@ -1951,10 +1951,12 @@ from django.utils.translation import ugettext as _
         viewModel.filter();
       }, 500);
 
-      $("#editBreadcrumb").click(function () {
-        $(this).hide();
-        $(".hueBreadcrumb").hide();
-        $("#hueBreadcrumbText").show().focus();
+      $("#editBreadcrumb").click(function (e) {
+        if ($(e.target).is('ul')){
+          $(this).hide();
+          $(".hueBreadcrumb").hide();
+          $("#hueBreadcrumbText").show().focus();
+        }
       });
 
       $("#hueBreadcrumbText").jHueHdfsAutocomplete({