Skip to content

Commit

Permalink
Merge pull request #1787 from smeup/chip-test
Browse files Browse the repository at this point in the history 
kup-dialog, reset kup-data-table global filter
  • Loading branch information
@Leonardo-Signorelli
Leonardo-Signorelli authored Mar 1, 2024
2 parents 0b7c494 + 202f6aa commit 184c3cb
Show file tree
Hide file tree
Showing 6 changed files with 59 additions and 27 deletions.
2 changes: 1 addition & 1 deletion packages/ketchup/src/components/kup-data-table/kup-data-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -588,7 +588,7 @@ export class KupDataTable {
/**
* When set to true it activates the global filter.
*/
@Prop() globalFilter: boolean = true;
@Prop() globalFilter: boolean = false;
/**
* The value of the global filter.
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/ketchup/src/components/kup-data-table/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ If the `sticky` element would be hidden by the scroll, after having specified a
| `fixedColumns` | `fixed-columns` | Fixes the given number of columns so that they stay visible when horizontally scrolling the data-table. If grouping is active or the value of the prop is <= 0, this prop will have no effect. Can be combined with fixedRows. | `number` | `0` |
| `fixedRows` | `fixed-rows` | Fixes the given number of rows so that they stay visible when vertically scrolling the data-table. If grouping is active or the value of the prop is <= 0, this prop will have no effect. Can be combined with fixedColumns. | `number` | `0` |
| `forceOneLine` | `force-one-line` | Forces cells with long text and a fixed column size to have an ellipsis set on their text. The reflect attribute is mandatory to allow styling. | `boolean` | `false` |
| `globalFilter` | `global-filter` | When set to true it activates the global filter. | `boolean` | `true` |
| `globalFilter` | `global-filter` | When set to true it activates the global filter. | `boolean` | `false` |
| `globalFilterValue` | `global-filter-value` | The value of the global filter. | `string` | `''` |
| `groupLabelDisplay` | `group-label-display` | How the label of a group must be displayed. For available values [see here]{@link GroupLabelDisplayMode} | `GroupLabelDisplayMode.BOTH \| GroupLabelDisplayMode.LABEL \| GroupLabelDisplayMode.VALUE` | `GroupLabelDisplayMode.BOTH` |
| `groups` | -- | The list of groups. | `GroupObject[]` | `[]` |
Expand Down
26 changes: 16 additions & 10 deletions packages/ketchup/src/components/kup-dialog/kup-dialog.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,14 @@
*/

:host {
--kup_dialogheader_text_color: var(
--kup-dialogheader-text-color,
var(--kup-gray-color-70)
);
--kup_dialog_background_color: var(
--kup-header-text-color,
var(--kup-gray-color-0)
);
--kup_dialog_header_height: var(--kup-dialog-header-height, 2em);

box-sizing: border-box;
Expand Down Expand Up @@ -31,33 +39,29 @@
}

.header {
background-color: var(--kup-title-background-color);
color: var(--kup-title-color);
color: var(--kup_dialogheader_text_color);
display: flex;
flex-direction: row;
height: var(--kup_dialog_header_height);
position: relative;
width: 100%;
min-height: 50px;

&__title {
font-weight: bold;
line-height: 2em;
padding-left: 0.5em;
padding-right: 2em;
padding: var(--kup-space-05);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@include kup-heading-compact-01;
}

&__close.f-image {
--kup-icon-color: var(--kup-title-color);

--kup-icon-color: var(--kup_dialogheader_text_color);
cursor: pointer;
margin-right: 0;
transition: opacity 0.25s;
position: absolute;
right: 0;
background: var(--kup-title-background-color);
right: var(--kup-space-05);

&:hover {
opacity: 0.5;
Expand All @@ -67,6 +71,8 @@

.content {
height: calc(100% - var(--kup_dialog_header_height));
padding: var(--kup-space-05);
overflow: auto;
user-select: text;
background-color: var(--kup_dialog_background_color);
}
4 changes: 2 additions & 2 deletions packages/ketchup/src/dialog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@
><div style="height: 400px; width: 400px"
>This is a slot</div
></kup-dialog
></div
>
>
</div>
</body>
<script src="/assets/dialog.js"></script>
</html>
27 changes: 20 additions & 7 deletions packages/ketchup/src/managers/kup-theme/kup-theme-application.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2371,22 +2371,19 @@ Please note that using !important should generally be avoided if possible, as it
/* D i a l o g */
/*-------------------------------------------------*/
[kup-dialog] {
animation: fade-in 0.25s ease-out;
background-color: var(--kup-background-color);
border: 4px solid var(--kup-gray-color-70);
animation: fade-in-down 0.25s ease-out;
background-color: var(--kup-gray-color-0);
margin: 0;
position: absolute;
-ms-touch-action: none;
touch-action: none;
transition: none;
will-change: transform;

&.kup-resizable {
border: 3px outset var(--kup-title-background-color);
}
}

[kup-modal-backdrop] {
animation: fade-in 0.25s ease-out;
animation: fade-in-down 0.25s ease-out;
background: rgba(0, 0, 0, 0.32);
display: none;
height: 100vh;
Expand Down Expand Up @@ -2416,6 +2413,22 @@ Please note that using !important should generally be avoided if possible, as it
opacity: 1;
}
}

@keyframes fade-in-down {
0% {
opacity: 0;
transform: translateY(-10%);
}
1% {
opacity: 0;
transform: translateY(-9%);
}

100% {
opacity: 1;
transform: translateY(0);
}
}
/*-------------------------------------------------*/
/* S c r o l l o n h o v e r */
/*-------------------------------------------------*/
Expand Down
25 changes: 19 additions & 6 deletions packages/ketchup/src/managers/kup-theme/kup-theme-component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,15 @@
/* D i a l o g */
/*-------------------------------------------------*/
[kup-dialog] {
animation: fade-in 0.25s ease-out;
background-color: var(--kup-background-color);
border-top: 4px solid var(--kup-gray-color-70);
animation: fade-in-down cubic-bezier(0.455, 0.03, 0.515, 0.955) s ease-in-out;
background-color: var(--kup-gray-color-0);
margin: 0;
position: absolute;
-ms-touch-action: none;
touch-action: none;
transition: none;
will-change: transform;

&.kup-resizable {
border: 3px outset var(--kup-title-background-color);
}
}

@keyframes fade-in {
Expand All @@ -32,3 +29,19 @@
opacity: 1;
}
}

@keyframes fade-in-down {
0% {
opacity: 0;
transform: translateY(-10%);
}
1% {
opacity: 0;
transform: translateY(-9%);
}

100% {
opacity: 1;
transform: translateY(0);
}
}

0 comments on commit 184c3cb

Please sign in to comment.