Shared dir view redesign (#7468)

* [shared dir view] redesigned it

- changed to a full-screen 'side panel & main panel' layout
- added a 'folder tree' panel, a current path bar with an operation dropdown
  menu, a toolbar for selected items, a 'view mode' menu, and a 'sort'
  menu

* [shared dir view] added a resizing bar (enable users to resize the width of side panel and main panel)

* [shared dir view] path bar: added a 'plus' icon to the dropdown menu toggle when 'upload' is offered in the menu

* [shared dir view] folder tree: cleaned up the code

* [shared dir view] improved 'visit a folder'

* [shared dir view] improvements & cleanup

frontend/src/css/shared-dir-view.css

@@ -6,60 +6,131 @@ body {
   height: 100%;
 }
 
-.top-header {
-  background-color: #f8fafd;
+#shared-dir-view .side-panel {
+  border-right: 1px solid #eee;
+}
+
+#shared-dir-view .meta-info {
   border-bottom: 1px solid #eee;
-  padding: 8px 16px 4px;
-  height: 53px;
+}
+
+/* tree view */
+.tree-node-hight-light {
+  border-radius: 4px;
+  background-color: #f5f5f5 !important;
+}
+
+.tree-node-hight-light::before {
+  content: '';
+  position: absolute;
+  display: block;
+  width: 4px;
+  height: 24px;
+  left: -8px;
+  top: 2px;
+  background-color: #ff9800;
+  border-radius: 2px;
+  z-index: 0;
+}
+
+.tree-node-inner {
+  position: relative;
+  height: 28px;
+  padding: 2px;
+  cursor: pointer;
+  line-height: 1.625;
+}
+
+.tree-node-inner-hover {
+  background-color: #f0f0f0;
+  border-radius: 0.25rem;
+}
+
+.tree-node-inner .tree-node-text {
+  padding-left: 2.8rem;
+  width: calc(100% - 1.5rem);
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 24px;
+}
+
+.tree-node-inner .left-icon {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  top: 1px;
+  left: 0;
+  padding-left: 1.5rem;
+}
+
+.folder-toggle-icon {
+  position: absolute;
+  left: 0;
+  color: #666666;
+  line-height: 1.625;
+  width: 1.5rem;
+  display: flex;
+  align-content: center;
+  justify-content: center;
+}
+
+.tree-node-icon {
+  display: inline-block;
+  width: 1rem;
+  text-align: center;
+  color: #666666;
+}
+
+/* toolbar  */
+#shared-dir-view .path-container .path-item {
+  display: inline-block;
+  min-width: 0;
+  padding: 0 6px;
+  font-size: 1rem;
+  color: inherit;
+  border-radius: 3px;
+  text-decoration: none;
+}
+
+#shared-dir-view .path-container .path-item:hover {
+  background: #efefef;
+}
+
+#shared-dir-view .path-container .path-split {
+  padding: 0 2px;
   flex-shrink: 0;
 }
 
-.shared-dir-view-main {
-  width: calc(100% - 40px);
-  max-width: 950px;
-  padding: 15px 0 40px;
-  margin: 0 auto;
+#shared-dir-view .path-item-dropdown-toggle .sf3-font {
+  color: #666;
 }
 
-.op-bar {
-  padding: 9px 10px;
-  background: #f2f2f2;
-  border-radius: 2px;
+#shared-dir-view .path-item-dropdown-toggle .main-icon {
+  margin-right: 2px;
 }
 
-.sf-view-mode-btn {
-  padding: 0;
-  height: 30px;
-  min-width: 2rem;
-  color: #aaa;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  line-height: 29px;
-  font-size: 18px;
-  border-radius: 2px;
+@keyframes displaySelectedToolbar {
+  from {
+    top: 24px;
+  }
+  to {
+    top: 0;
+  }
 }
 
-.sf-view-mode-btn.current-mode {
-  background-color: #ccc;
-  color: #fff;
-  box-shadow: none;
-}
-
-.shared-dir-op-btn {
-  height: 30px;
-  line-height: 30px;
-  padding: 0 10px;
-}
-
-.shared-dir-upload-btn {
-  border: 1px solid #ccc;
+.cur-view-path .selected-items-toolbar {
+  height: 24px;
+  position: relative;
+  animation: displaySelectedToolbar .3s ease-in-out 1;
 }
 
 .grid-item .action-icon {
   position: absolute;
   top: 10px;
   right: 24px;
-  padding: 3px 5px;
+  padding: 5px;
   background: #fff;
   border: 1px solid #eee;
   border-radius: 3px;