소스 검색

enhance(ui): polish table header details

charlie 1 년 전
부모
커밋
4a74e652be
3개의 변경된 파일11개의 추가작업 그리고 8개의 파일을 삭제
  1. 0 4
      src/main/frontend/components/block.css
  2. 4 0
      src/main/frontend/components/table.css
  3. 7 4
      src/main/frontend/components/views.cljs

+ 0 - 4
src/main/frontend/components/block.css

@@ -988,10 +988,6 @@ html.is-mac {
   text-overflow: ellipsis;
   text-overflow: ellipsis;
 }
 }
 
 
-.ls-table a.tag {
-  @apply text-sm;
-}
-
 .block-content-wrapper svg, .view-actions svg {
 .block-content-wrapper svg, .view-actions svg {
   width: 18px;
   width: 18px;
   height: 18px;
   height: 18px;

+ 4 - 0
src/main/frontend/components/table.css

@@ -7,6 +7,10 @@
     @apply max-h-[200px] !max-w-[80px] overflow-hidden;
     @apply max-h-[200px] !max-w-[80px] overflow-hidden;
   }
   }
 
 
+  a.tag {
+    @apply text-sm whitespace-nowrap;
+  }
+
   .ls-block {
   .ls-block {
     @apply w-full py-0;
     @apply w-full py-0;
   }
   }

+ 7 - 4
src/main/frontend/components/views.cljs

@@ -80,13 +80,16 @@
      {:variant "text"
      {:variant "text"
       :class "h-8 !pl-4 !px-2 !py-0 hover:text-foreground w-full justify-start"
       :class "h-8 !pl-4 !px-2 !py-0 hover:text-foreground w-full justify-start"
       :on-click #(column-toggle-sorting! column)}
       :on-click #(column-toggle-sorting! column)}
-     (:name column)
-     (case asc?
+      (let [title (str (:name column))]
+        [:span {:title title
+                :class "max-w-full overflow-hidden text-ellipsis"}
+         title])
+      (case asc?
        true
        true
        (ui/icon "arrow-up")
        (ui/icon "arrow-up")
        false
        false
        (ui/icon "arrow-down")
        (ui/icon "arrow-down")
-       [:div {:style {:width 18 :height 18}}]))))
+       nil))))
 
 
 (defn- timestamp-cell-cp
 (defn- timestamp-cell-cp
   [_table row column]
   [_table row column]
@@ -326,7 +329,7 @@
      (fn []
      (fn []
        (when-let [el (and (fn? js/window.interact) (rum/deref *el))]
        (when-let [el (and (fn? js/window.interact) (rum/deref *el))]
          (let [*field-rect (atom nil)
          (let [*field-rect (atom nil)
-               min-width 120
+               min-width 40
                max-width 500]
                max-width 500]
            (-> (js/interact el)
            (-> (js/interact el)
                (.draggable
                (.draggable