Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Filters grid

Browse Source
This commit is contained in:
Adina Țeudan 2020-11-25 18:29:30 +02:00
parent 3cd383d167
commit 8bb84da319
6 changed files with 46 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/red-ui/src/app/common/filter/filter.component.scss
View File

@ -3,7 +3,7 @@
.filter-menu-header {
display: flex;
justify-content: space-between;
padding: 7px 15px 15px;
padding: 8px 16px 16px 16px;
width: 350px;
.actions {

10
apps/red-ui/src/assets/icons/general/arrow-right.svg
View File

@ -1,3 +1,7 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 300 450" width="300" height="450"><defs><path d="M0 -0.76L0 449.24L300 224.24L0 -0.76Z" id="bbDgPANXr"></path></defs><g><g><g><use xlink:href="#bbDgPANXr" opacity="1" fill-opacity="1"></use><g><use xlink:href="#bbDgPANXr" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g></g></g></svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>right_expandable</title>
<g id="right_expandable" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon id="Fill-1" fill="currentColor" transform="translate(7.000000, 7.000000) rotate(-90.000000) translate(-7.000000, -7.000000) " points="7 9 10 5 4 5"></polygon>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 633 B

After

Width:  |  Height:  |  Size: 505 B

10
apps/red-ui/src/assets/icons/general/arrow-up.svg
View File

@ -1,3 +1,7 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 426.67" width="640" height="426.67"><defs><path d="M0 427.67L640 427.67L320 1L0 427.67Z" id="bjTkd31yo"></path></defs><g><g><g><use xlink:href="#bjTkd31yo" opacity="1" fill-opacity="1"></use><g><use xlink:href="#bjTkd31yo" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g></g></g></svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="6px" height="6px" viewBox="0 0 6 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>sort-up</title>
<g id="sort-up" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon id="Fill-1" fill="currentColor" transform="translate(3.000000, 3.000000) rotate(-180.000000) translate(-3.000000, -3.000000) " points="3 5 6 1 -1.33216355e-14 1"></polygon>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 638 B

After

Width:  |  Height:  |  Size: 497 B

9
apps/red-ui/src/assets/icons/general/right.svg Normal file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="6px" height="6px" viewBox="0 0 6 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>right</title>
<g id="right" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="down" fill="#283241">
<polygon id="Fill-1" transform="translate(3.000000, 3.000000) rotate(-90.000000) translate(-3.000000, -3.000000) " points="3 5 6 1 -1.33216355e-14 1"></polygon>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 525 B

2
apps/red-ui/src/assets/styles/red-checkbox.scss
View File

@ -24,6 +24,6 @@
display: flex;
align-items: center;
gap: 4px;
gap: 8px;
}
}

26
apps/red-ui/src/assets/styles/red-menu.scss
View File

@ -5,12 +5,21 @@
box-shadow: 0 2px 6px 0 rgba(40, 50, 65, 0.3);
max-width: none !important;
min-width: 180px !important;
margin-top: 4px;
margin-top: 10px;
.mat-menu-content:not(:empty) {
padding-top: 8px;
padding-bottom: 24px;
}
.mat-menu-item {
font-family: 'Inter', sans-serif;
font-size: 13px;
color: $accent;
padding: 0 8px;
margin: 0 8px 2px 8px;
border-radius: 4px;
width: -webkit-fill-available;
display: flex;
align-items: center;
@ -18,18 +27,25 @@
.arrow-wrapper {
width: 16px;
margin-right: 8px;
text-align: center;
mat-icon {
width: 9px;
height: 9px;
width: 16px;
height: 16px;
margin: 0;
}
}
&.padding-left {
padding-left: 64px;
padding-left: 56px;
}
&:last-of-type {
margin-bottom: 0;
}
&:hover {
background-color: rgba($primary, 0.1);
}
}
}