Make directory path in the header editable (#8018)

This change will allow users to navigate to their desired locations,
including buckets and directories that haven't been "created" yet

Fixes #7883

Add tests

Change tooltip wording

Migrate to Font Awesome 5 to use path icon

Fix sidebar not closing on mobile

browser/app/less/inc/form.less

@@ -8,6 +8,13 @@
     background-color: transparent;
 }
 
+.form-control--path {
+    color: @link-color;
+    padding: 5px 5px 6px 0;
+    font-size: 16px;
+    .placeholder(@text-muted-color)
+}
+
 select.form-control {
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -153,7 +160,7 @@ select.form-control {
     }
     &:after {
         content: "\f05a";
-        font-family: FontAwesome;
+        font-family: 'Font Awesome 5 Free';
         position: absolute;
         top: 17px;
         right: 9px;
@@ -165,6 +172,7 @@ select.form-control {
 .ig-search {
     &:before {
         font-family: @font-family-icon;
+        font-weight: 900;
         content: '\f002';
         font-size: 15px;
         position: absolute;

browser/app/less/inc/header.less

@@ -16,6 +16,10 @@
         font-weight: normal;
         margin: 0;
 
+        @media(min-width: (@screen-md-min)) {
+            width: calc(100% - 60px);
+        }
+
         & > span {
             margin-bottom: 7px;
             display: inline-block;
@@ -27,7 +31,7 @@
                     color: @text-color;
                 }
             }
-            &:last-child {
+            &:last-of-type {
                 &:after {
                     content: '/';
                     margin: 0 4px;
@@ -43,6 +47,19 @@
 }
 
 
+/*--------------------------
+    Edit path
+----------------------------*/
+.fe-edit {
+    font-size: 20px;
+    color: @link-color;
+    margin-left: 4px;
+
+    i {
+        vertical-align: middle;
+    }
+}
+
 /*--------------------------
     Disk used
 ----------------------------*/
@@ -132,7 +149,7 @@
             @media(max-width: (@screen-sm-max)) {
                 background: url(../../img/more-h-light.svg) no-repeat center;
 
-                .fa-reorder {
+                .fa-bars {
                     display: none;
                 }
             }

browser/app/less/inc/list.less

@@ -113,7 +113,7 @@ div.fesl-row {
         Icons
     ----------------------------*/
     &[data-type=folder] {
-        .list-type(#a1d6dd, '\f114');
+        .list-type(#a1d6dd, '\f07b');
 
         .fesl-item-name {
             a {
@@ -128,8 +128,8 @@ div.fesl-row {
     &[data-type=excel] { .list-type(#64c866, '\f1c3'); }
     &[data-type=image] { .list-type(#f06292, '\f1c5'); }
     &[data-type=video] { .list-type(#f8c363, '\f1c8'); }
-    &[data-type=other] { .list-type(#afafaf, '\f016'); }
-    &[data-type=text] { .list-type(#8a8a8a, '\f0f6'); }
+    &[data-type=other] { .list-type(#afafaf, '\f15b'); }
+    &[data-type=text] { .list-type(#8a8a8a, '\f15c'); }
     &[data-type=doc] { .list-type(#2196f5, '\f1c2'); }
     &[data-type=presentation] { .list-type(#896ea6, '\f1c4'); }
 
@@ -249,6 +249,7 @@ div.fesl-row {
 
     &:after {
         font-family: @font-family-icon;
+        font-weight: 900;
         content: '\f00c';
         top: 8px;
         left: 9px;
@@ -449,7 +450,7 @@ div.fesl-row {
     float: left;
     padding: 4px 0;
 
-    .fa {
+    .fas {
         font-size: 22px;
         vertical-align: top;
         margin-right: 10px;

browser/app/less/inc/sidebar.less

@@ -76,7 +76,7 @@
 			word-wrap: break-word;
 
 			&:before {
-				font-family: FontAwesome;
+				font-family: 'Font Awesome 5 Free';
 				content: '\f0a0';
 				font-size: 17px;
 				position: absolute;

browser/app/less/inc/variables.less

@@ -2,7 +2,7 @@
     Base
 ----------------------------*/
 @font-family-sans-serif             : 'Lato', sans-serif;
-@font-family-icon                   : 'fontAwesome';
+@font-family-icon                   : 'Font Awesome 5 Free';
 @body-bg                            : #edecec;
 @text-color                         : #8e8e8e;
 @font-size-base                     : 15px;