ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-27 17:23:21 -05:00
Code Issues Packages Projects Releases Wiki Activity

Agent: Filtering & Sorting (#1441)

Browse Source 
* have a working filter

* fixed error details when filtering

* filtering with styling done

* fix transition styling

* fixed more styling issues

* optimized errors when switching pages

* added sorting functionality

* removed dead code

* fixed styling issues when sorting

* added sorting with styling for every column

* code review comments

* fixed styling issue when a bigger filter was applied, followed by a smaller one and then cleared

* use absolute paths in imports

* fixed issues with styling when sorting is performed on a filtered dataset
This commit is contained in:
Aditya Bist
2018-06-08 17:08:01 -07:00
committed by GitHub
parent 3afd3b0ff3
commit e870a309c0
12 changed files with 888 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/sql/base/browser/ui/table/media/down-inverse.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#2d2d30;}.icon-canvas-transparent{opacity:0;}.icon-vs-bg{fill:#c5c5c5;}</style></defs><title>CollapseChevronDown_md_16x</title><path class="icon-canvas-transparent" d="M16,0V16H0V0Z"/><path class="icon-vs-out" d="M15.444,6.061,8,13.5.556,6.061,3.03,3.586,8,8.556l4.97-4.97Z" style="display: none;"/><path class="icon-vs-bg" d="M14.03,6.061,8,12.091,1.97,6.061,3.03,5,8,9.97,12.97,5Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 507 B

1
src/sql/base/browser/ui/table/media/down.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#f6f6f6;}.icon-canvas-transparent{opacity:0;}.icon-vs-bg{fill:#424242;}</style></defs><title>CollapseChevronDown_md_16x</title><path class="icon-canvas-transparent" d="M16,0V16H0V0Z"/><path class="icon-vs-out" d="M15.444,6.061,8,13.5.556,6.061,3.03,3.586,8,8.556l4.97-4.97Z" style="display: none;"/><path class="icon-vs-bg" d="M14.03,6.061,8,12.091,1.97,6.061,3.03,5,8,9.97,12.97,5Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 507 B

1
src/sql/base/browser/ui/table/media/filter.svg Normal file
View File

@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{font-size:12px;font-family:FullMDL2Assets, Full MDL2 Assets;}</style></defs><title>filter_16x16</title><text class="cls-1" transform="translate(0 12)"> </text><path d="M0,1.53H16V3.24l-6,6v6.27H6V9.22l-6-6ZM15,2.82V2.53H1v.29l6,6v5.69H9V8.8Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 363 B

1
src/sql/base/browser/ui/table/media/filter_inverse.svg Normal file
View File

@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{font-size:12px;font-family:FullMDL2Assets, Full MDL2 Assets;}.cls-1,.cls-2{fill:#fff;}</style></defs><title>filter_inverse_16x16</title><text class="cls-1" transform="translate(0.03 12.1)"> </text><path class="cls-2" d="M.05,1.63H16V3.33l-6,6v6.27H6V9.31l-6-6ZM15,2.91V2.62H1v.29l6,6v5.69H9V8.89Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 418 B

113
src/sql/base/browser/ui/table/media/table.css
View File

@@ -31,4 +31,117 @@
height: 5px;
margin-left: 4px;
margin-top: 6px;
}
.slick-header-menubutton {
background-position: center center;
background-repeat: no-repeat;
bottom: 0;
cursor: pointer;
display: inline-block;
position: absolute;
right: 10px;
top: 0;
width: 18px;
background-image: url('down.svg');
}
.vs-dark .slick-header-menubutton {
background-image: url('down-inverse.svg');
}
.slick-header-menubutton.filtered {
background-image: url('filter.svg');
}
.vs-dark .slick-header-menubutton.filtered {
background-image: url('filter_inverse.svg');
}
.slick-header-menu {
background: none repeat scroll 0 0 white;
border: 1px solid #BFBDBD;
min-width: 175px;
padding: 4px;
z-index: 100000;
cursor: default;
display: inline-block;
margin: 0;
position: absolute;
}
.vs-dark .slick-header-menu {
background: none repeat scroll 0 0 #333333;
}
.slick-header-menu a.monaco-button.monaco-text-button {
width: 60px;
margin: 6px 6px 6px 6px;
padding: 4px;
}
.slick-header-menu .filter
{
border: 1px solid #BFBDBD;
font-size: 8pt;
height: 400px;
margin-top: 6px;
overflow: scroll;
padding: 4px;
white-space: nowrap;
width: 200px;
}
label {
display: block;
margin-bottom: 5px;
}
.slick-header-menuitem
{
border: 1px solid transparent;
padding: 2px 4px;
cursor: pointer;
list-style: none outside none;
margin: 0;
}
.slick-header-menuicon
{
display: inline-block;
height: 16px;
margin-right: 4px;
vertical-align: middle;
width: 16px;
}
.slick-header-menuicon.ascending {
background: url('sort-asc.gif');
background-position: center center;
background-repeat: no-repeat;
}
.slick-header-menuicon.descending {
background: url('sort-desc.gif');
background-position: center center;
background-repeat: no-repeat;
}
.slick-header-menucontent {
display: inline-block;
vertical-align: middle;
}
.slick-header-menuitem:hover {
border-color: #BFBDBD;
}
.header-overlay, .cell-overlay, .selection-cell-overlay {
display: block;
position: absolute;
z-index: 999;
}
.vs-dark .slick-header-menu > input.input {
color: #4a4a4a;
}