1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Save a room to table head cells

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2023-03-17 13:35:36 +03:00
parent 2545a40064
commit 5d2e4dab3f
3 changed files with 21 additions and 30 deletions

View File

@ -14,6 +14,7 @@
.line { .line {
background: currentColor; background: currentColor;
display: block; display: block;
width: 100%;
height: 100%; height: 100%;
border-radius: inherit; border-radius: inherit;
transition: 250ms width ease-in; transition: 250ms width ease-in;

View File

@ -4,11 +4,13 @@
*/ */
.TableCell { .TableCell {
position: relative;
padding: $padding; padding: $padding;
word-break: break-all; word-break: break-all;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; line-height: 1.1;
line-height: 1; display: flex;
align-items: center;
&.menu { &.menu {
@include table-cell-action; @include table-cell-action;
@ -39,43 +41,29 @@
} }
} }
// fix: don't hide "sortIcon" when used with <TableHead nowrap> and there is not enough space to show all the content
&.sorting.nowrap { &.sorting.nowrap {
display: flex; display: flex;
align-items: center; align-items: center;
}
> * { .sortIcon {
flex-shrink: 0; transition: 150ms opacity;
} opacity: 0;
position: absolute;
right: 0;
background: var(--tableHeaderBackground);
> .content { &.enabled {
flex-shrink: 1; opacity: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
> .sortIcon {
margin: 0;
} }
} }
.Table.sortable > .TableHead & { &:hover .sortIcon {
user-select: none; opacity: 1;
white-space: nowrap; }
&.sorting { &.sorting {
cursor: pointer; cursor: pointer;
}
.sortIcon {
transition: 350ms opacity;
opacity: .3;
&.enabled {
opacity: 1;
}
}
} }
a { a {

View File

@ -9,6 +9,8 @@
color: var(--tableHeaderColor); color: var(--tableHeaderColor);
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
user-select: none;
white-space: nowrap;
&.topLine { &.topLine {
border-top: 1px solid var(--borderFaintColor); border-top: 1px solid var(--borderFaintColor);