Detail panel (#3232)

* update dirent detail btn

* update icon

* add animation

* update

frontend/src/css/dirent-detail.css

@@ -13,6 +13,7 @@
   line-height: 2.5rem;
   background-color: #f9f9f9;
   border-bottom: 1px solid #e8e8e8;
+  height: 40px;
 }
 
 .detail-header .detail-control {

frontend/src/css/layout.css

@@ -52,6 +52,7 @@
   flex-shrink: 0;
   background: #f4f4f7;
   border-bottom: 1px solid #e8e8e8;
+  z-index: 100;
 }
 
 @media (max-width: 767px) {
@@ -140,8 +141,30 @@
 }
 
 .cur-view-detail {
-  flex: 0 0 20rem;
-  display: flex;
+  display: block;
+  position: absolute;
+  right: 0;
+  background-color: #fff;
+  width: 300px;
+  height: calc(100% - 50px);
+  box-shadow: -1px 0 3px 0 #ccc;
+  top: 49px;
+  animation: move .5s ease-in-out 1;
+}
+
+@keyframes move {
+  from {
+    right: -500px;
+    opacity: 0.5;
+  }
+  to {
+    right: 0px;
+    opacity: 1;
+  }
+}
+
+.cur-view-detail .detail-container {
+  height: 100%;
 }
 
 /* for reach/router */

frontend/src/css/toolbar.css

@@ -61,6 +61,11 @@
   border-radius: 0 !important;
 }
 
+.dirent-detail-btn .sf-view-mode-btn {
+  font-size: 15px;
+  border-radius: 3px !important;
+}
+
 .sf-view-mode-btn.current-mode {
   background-color: #ccc !important;
   color: #fff !important;