Add row_height, header_height, initial_sort, equals dict and saving f…

…ilter state (#2) Co-authored-by: Artem Emelin <153018291+artememelin@users.noreply.github.com> Co-authored-by: stanislav <sgryumov@bhft.com>
bhftbootcamp · Jun 11, 2024 · 6863f90 · 6863f90
1 parent 58688ea
commit 6863f90
Show file tree

Hide file tree

Showing 23 changed files with 1,524 additions and 1,349 deletions.
diff --git a/Project.toml b/Project.toml
@@ -1,6 +1,6 @@
 name = "AgTable"
 uuid = "de8a86c3-a64b-47c8-8ca2-357579be7910"
-version = "1.0.0"
+version = "2.0.0"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

diff --git a/docs/src/pages/table.md b/docs/src/pages/table.md
@@ -68,15 +68,18 @@ table = ag_table(
         field_name = "destination",
         header_name = "Destination",
         filter = true,
+        filter_exclude = ["Guatemala City", "Boston, MA"],
     ),
     AgStringColumnDef(
         field_name = "status",
         header_name = "Status",
         filter = true,
         rect_background = "#f0efeb",
-        equals = ["In Air"],
-        equals_color = "#8ac926",
-        threshold = AGThreshold("In Air", color_up = "#999999", color_down = "#ff595e"),
+        color_map = Dict(
+            "In Air" => "#8ac926",
+            "Canceled" => "#ff595e",
+            "Scheduled" => "#999999",
+        ),
         text_align = AG_CENTER,
     ),
 )
@@ -111,6 +114,7 @@ table = ag_table(
         filter = true,
         text_align = AG_CENTER,
         rect_background = "#f0efeb",
+        default_sort = AG_ASC,
     ),
     AgNumberColumnDef(
         field_name = "exchange_rate",
@@ -183,6 +187,7 @@ table = ag_table(
     AgStringColumnDef(field_name = "executedQty", visible = false),
     AgStringColumnDef(field_name = "price", visible = false);
     column_filter = true,
+    header_height = 60,
 )
 
 ag_save("time_example.html", table)

diff --git a/frontend/dist/index_boundle.js b/frontend/dist/index_boundle.js
diff --git a/frontend/public/01_string_filters.html b/frontend/public/01_string_filters.html
diff --git a/frontend/public/02_style.html b/frontend/public/02_style.html
diff --git a/frontend/src/app.css b/frontend/src/app.css
@@ -14,7 +14,7 @@ body {
     *,
     :after,
     :before {
-        box-sizing: border-box
+        box-sizing: border-box;
     }
 }
 
@@ -28,9 +28,13 @@ body {
 }
 
 .filter {
+    width: 100%;
+    height: 62px;
+}
+
+.column_filter_wrapper {
     width: 100%;
     height: 100%;
-    border-bottom: 1px solid #e0e0e0;
 }
 
 .column_filter {
@@ -44,7 +48,6 @@ body {
     align-items: stretch;
 
     overflow: hidden;
-    padding: 2px 10px 5px 10px;
 }
 
 .filter_wrapper .column_filter:not(:first-child) {
@@ -54,16 +57,20 @@ body {
 .searcher {
     text-align: start;
     width: 100%;
-    min-height: 18px;
-    margin: 0px;
+    min-height: 20px;
+    margin: 0;
     padding: 0;
-    margin-bottom: 5px;
 
+    font-family: -apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif;
+    font-feature-settings: "tnum", "lnum";
     font-size: 13px;
-    font-weight: 500;
-    color: #808080;
+    font-style: normal;
+    font-variant-caps: normal;
+    font-weight: 400;
+    color: inherit;
 
     border: none;
+    border-radius: 4px;
 
     cursor: pointer;
     white-space: nowrap;
@@ -111,6 +118,10 @@ body {
     overflow: hidden;
     text-overflow: ellipsis;
     margin-left: 10px;
+
+    font-family: -apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif;
+    font-size: 14px;
+    font-weight: 500;
 }
 
 input[type='checkbox']:checked,
@@ -120,6 +131,7 @@ input[type='checkbox']:not(:checked) {
     cursor: pointer;
     opacity: 1;
     width: 1px;
+    height: 13px;
     margin-right: 15px;
 }
 
@@ -202,23 +214,21 @@ input[type='text'] {
     height: 100%;
     position: relative;
     text-align: start;
-
-    padding: 2px 10px 5px 10px;
 }
 
 .date_filter {
     position: relative;
     text-align: start;
-
-    padding: 2px 10px 5px 10px;
 }
 
 .name_filter {
     font-size: 13px;
     font-weight: 500;
     text-align: start;
-
     color: #3e3d3d;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .container {
@@ -237,6 +247,7 @@ input[type='range'] {
 
     position: absolute;
     margin: 0;
+    padding: 0 5px;
     top: 3px;
     bottom: 0;
 
@@ -245,12 +256,12 @@ input[type='range'] {
 }
 
 .slider_track {
-    width: calc(100% - 12px);
+    width: calc(100% - 18px);
     height: 4px;
 
     position: absolute;
     margin: 0;
-    left: 6px;
+    left: 9px;
     top: 5.5px;
     bottom: 0;
 
@@ -260,6 +271,14 @@ input[type='range'] {
     cursor: pointer;
 }
 
+.input_slider1 {
+    left: -4px;
+}
+
+.input_slider2 {
+    right: -5px;
+}
+
 input[type='range']::-webkit-slider-runnable-track {
     -webkit-appearance: none;
     height: 5px;
@@ -330,7 +349,7 @@ input[type='range']::-ms-track {
     margin: 0;
 
     color: #383838;
-    font-weight: 500;
+    font-weight: 400;
     font-size: 13px;
 }
 
@@ -377,3 +396,23 @@ input[type='range']::-ms-track {
     display: inline;
     vertical-align: middle;
 }
+
+
+.filter .slider_track {
+    position: relative;
+}
+
+.filter .slider_click_area {
+    position: absolute;
+    width: 100%;
+    height: 15px;
+    top: 0px;
+    background: transparent;
+    z-index: 1;
+    cursor: pointer;
+}
+
+.filter .input_slider1,
+.filter .input_slider2 {
+    z-index: 3;
+}