gristlabs_grist-core/app/client/components/GridView.css
Jarosław Sadziński b13fb1d97e (core) Adding description icon and tooltip in the GridView
Summary: Column description and new renaming popup for the GridView.

Test Plan: Updated

Reviewers: georgegevoian

Reviewed By: georgegevoian

Differential Revision: https://phab.getgrist.com/D3838
2023-04-20 18:21:31 +02:00

423 lines
12 KiB
CSS

.gridview_data_pane {
background-color: var(--grist-theme-table-body-bg, white);
position: relative;
width: 100%;
overflow: hidden;
flex-grow: 1;
/* make sure that this element is at the back of the stack */
z-index: 0;
/* prevent browser selection of cells */
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
--gridview-header-height: 24px;
}
.gridview_data_scroll {
/* Make it position properly */
position: absolute;
height: 100%;
width: 100%;
overflow: auto;
overscroll-behavior: none;
z-index: 20; /* scrollbar should be over the overlay background */
border-top: 1px solid var(--grist-theme-table-header-border, lightgrey);
}
.gridview_data_pane > .gridview_data_scroll {
border-top: none;
}
/* ====== Col header stuff */
.gridview_stick-top{
position: -webkit-sticky;
position: sticky;
top: 0px;
z-index: 20; /* z-index must be here, doesnt work on children*/
}
.gridview_data_header {
position:relative;
}
.gridview_corner_spacer { /* spacer in .gridview_data_header */
width: 4rem; /* matches row_num width */
flex: none;
}
.field.column_name {
border-bottom: 1px solid var(--grist-theme-table-header-border, lightgray);
line-height: var(--gridview-header-height);
height: calc(var(--gridview-header-height) + 1px); /* Also should match height for overlay elements */
}
/* also .field.column_name, style set in viewCommon */
/* ====== Row stuff */
/* (more styles in viewCommon.css for .field, .record, etc) */
.gridview_row {
display:flex;
}
.gridview_data_row_num { /* Row nums, stick to the left side */
position: -webkit-sticky;
position: sticky;
left: 0px;
overflow: hidden;
width: 4rem; /* Also should match width for .gridview_header_corner, and the overlay elements */
flex: none;
border-bottom: 1px solid var(--grist-theme-table-header-border-dark, var(--grist-color-dark-grey));
color: var(--grist-theme-table-header-fg, unset);
background-color: var(--grist-theme-table-header-bg, var(--grist-color-light-grey));
z-index: 20; /* goes over data cells */
padding-top: 2px;
text-align: center;
font-size: 1rem;
cursor: pointer;
}
/* Menu toggle on a row */
.gridview_data_row_num .menu_toggle {
visibility: hidden;
position: absolute;
top: 2px;
right: 0px;
}
/* Show on hover or when menu is opened */
.gridview_data_row_num:hover .menu_toggle,
.gridview_data_row_num .menu_toggle.weasel-popup-open {
visibility: visible;
}
@media print {
/* For printing, !important tag is needed for background colors to be respected; but normally,
* do not want !important, as it interferes with row selection.
*/
.gridview_data_row_num {
background-color: var(--grist-theme-table-header-bg , var(--grist-color-light-grey)) !important;
}
.gridview_header_backdrop_top {
display: none;
}
.column_name.mod-add-column {
display: none;
}
.gridview_data_header {
background-color: var(--grist-theme-table-header-bg, var(--grist-color-light-grey)) !important;
}
.print-widget .gridview_header_backdrop_left, .print-widget .gridview_data_corner_overlay {
display: none;
}
.print-widget .gridview_data_scroll {
display: table;
border-collapse: collapse;
position: relative !important;
height: max-content !important;
}
.print-widget .gridview_stick-top {
/* The next two styles *together* tell Chrome to repeat this header on each page */
display: table-header-group;
break-inside: avoid;
position: static;
border-top: 1px solid var(--grist-theme-table-header-border-dark, var(--grist-color-dark-grey));
border-left: 1px solid var(--grist-theme-table-header-border-dark, var(--grist-color-dark-grey));
}
.print-widget .gridview_data_header {
padding-left: 4rem !important;
}
.print-widget .gridview_data_pane .print-all-rows {
display: table-row-group;
border-left: 1px solid var(--grist-theme-table-body-border, var(--grist-color-dark-grey));
}
.print-widget .gridview_data_pane .print-row {
display: table-row;
}
}
/* ========= Overlay styles ========== */
/* Positioned outside scrollpane, purely visual */
.gridview_data_corner_overlay,
.gridview_header_backdrop_top,
.gridview_header_backdrop_left,
.scroll_shadow_top,
.scroll_shadow_left {
position:absolute;
background-color: var(--grist-theme-table-header-bg, var(--grist-color-light-grey)) !important;
}
.gridview_data_corner_overlay {
width: 4rem;
height: calc(var(--gridview-header-height) + 1px); /* matches gridview_data_header height (+border) */
top: 1px; /* go under 1px border on scrollpane */
border-bottom: 1px solid var(--grist-theme-table-header-border, lightgray);
z-index: 30;
cursor: pointer;
}
/* Left most shadow - displayed next to row numbers or when columns are frozen - after last frozen column */
.scroll_shadow_left {
height: 100%;
width: 0px;
/* Unfortunately we need to calculate this using scroll position.
We could use sticky position here, but we would need to move this component inside the
scroll pane. We don't want to do this, because we want the scroll shadow to be render
on top of the scroll bar. Fortunately it doesn't jitter on firefox - where scroll event is asynchronous.
Variables used here:
- frozen-width : total width of frozen columns plus row numbers width
- scroll-offset: current left offset of the scroll pane
- frozen-offset: when frozen columns are wider then the screen, we want them to move left initially,
this value is the position where this movement should stop.
*/
left: calc(4em + (var(--frozen-width, 0) - min(var(--frozen-scroll-offset, 0), var(--frozen-offset, 0))) * 1px);
box-shadow: -6px 0 6px 6px var(--grist-theme-table-scroll-shadow, #444);
/* shadow should only show to the right of it (10px should be enough) */
-webkit-clip-path: polygon(0 0, 10px 0, 10px 100%, 0 100%);
clip-path: polygon(0 0, 10px 0, 10px 100%, 0 100%);
z-index: 30;
}
/* Right shadow - normally not displayed - activated when grid has frozen columns */
.scroll_shadow_frozen {
height: 100%;
width: 0px;
left: 4em;
box-shadow: -8px 0 14px 4px var(--grist-theme-table-scroll-shadow, #444);
-webkit-clip-path: polygon(0 0, 10px 0, 10px 100%, 0 100%);
clip-path: polygon(0 0, 28px 0, 24px 100%, 0 100%);
z-index: 30;
position: absolute;
}
/* line that indicates where the frozen columns end */
.frozen_line {
position:absolute;
height: 100%;
width: 2px;
/* this value is the same as for the left shadow - but doesn't need to really on the scroll offset
as this component will be hidden when the scroll starts
*/
left: calc(4em + var(--frozen-width, 0) * 1px);
background-color: var(--grist-theme-table-frozen-columns-border, #999999);
z-index: 30;
user-select: none;
pointer-events: none
}
.scroll_shadow_top {
left: 0;
height: 0;
width: 100%; /* needs to be wide enough to flow off the side*/
top: calc(var(--gridview-header-height) + 1px); /* matches gridview_data_header height (+border) */
box-shadow: 0 -6px 6px 6px var(--grist-theme-table-scroll-shadow, #444);
/* should only show below it (10px should be enough) */
-webkit-clip-path: polygon(0 0, 0 10px, 100% 10px, 100% 0);
clip-path: polygon(0 0, 0 10px, 100% 10px, 100% 0);
z-index: 30;
}
.gridview_header_backdrop_left {
width: calc(4rem + 1px); /* Matches rowid width (+border) */
height:100%;
top: 1px; /* go under 1px border on scrollpane */
z-index: 10;
border-right: 1px solid var(--grist-theme-table-header-border, lightgray);
}
.gridview_left_border {
position: absolute;
width: 0px; /* Matches rowid width (+border) */
height: 100%;
z-index: 30;
border-right: 1px solid var(--grist-theme-table-body-border, var(--grist-color-dark-grey)) !important;
user-select: none;
pointer-events: none
}
.gridview_header_backdrop_top {
width: 100%;
height: calc(var(--gridview-header-height) + 1px); /* matches gridview_data_header height (+border) */
top: 1px; /* go under 1px border on scrollpane */
border-bottom: 1px solid var(--grist-theme-table-header-border, lightgray);
z-index: 10;
}
.gridview_data_pane > .scroll_shadow_top {
top: var(--gridview-header-height);
}
.gridview_data_pane > .gridview_data_corner_overlay,
.gridview_data_pane > .gridview_header_backdrop_top {
top: 0px;
}
/* End overlay styles */
/* ================ Row/col drag styles*/
.col_indicator_line{
width: 0px;
height: 100%;
position: absolute;
border: 2px solid var(--grist-theme-table-drag-drop-indicator, gray);
z-index: 200;
top: 0px;
}
.column_shadow{
width: 0px;
height: 100%;
position: absolute;
border: 1px solid var(--grist-theme-table-drag-drop-indicator, gray);
z-index: 150;
top: 0px;
background-color: var(--grist-theme-table-drag-drop-shadow, #F0F0F0);
opacity: 0.5;
}
.row_indicator_line{
width: 100%;
height: 0px;
position: absolute;
border: 2px solid var(--grist-theme-table-drag-drop-indicator, gray);
z-index: 200;
left: 0px;
}
.row_shadow{
width: 100%;
height: 0px;
position: absolute;
border: 1px solid var(--grist-theme-table-drag-drop-indicator, gray);
z-index: 150;
left: 0px;
background-color: var(--grist-theme-table-drag-drop-shadow, #F0F0F0);
opacity: 0.5;
pointer-events: none; /* prevents row drag shadow from stealing row headers clicks */
}
/* ================ Freezing columns */
/* style header and a data field */
.record .field.frozen {
position: sticky;
left: calc(4em + 1px + (var(--frozen-position, 0) - var(--frozen-offset, 0)) * 1px); /* 4em for row number + total width of cells + 1px for border*/
z-index: 10;
}
/* for data field we need to reuse color from record (add-row and zebra stripes) */
.gridview_row .record .field.frozen {
background-color: var(--field-background-color, inherit);
}
.gridview_row .record.record-add .field.frozen {
background-color: inherit !important; /* important to win over zebra stripes */
}
/* HACK: add box shadow to fix outline overflow from active cursor */
.gridview_row .record .field.frozen {
box-shadow: 0px 1px 0px white;
}
.gridview_row .record.record-hlines .field.frozen {
box-shadow: 0px 1px 0px var(--grist-theme-table-body-border, var(--grist-color-dark-grey));
}
/* make room for a frozen line by adding margin to first not frozen field - in header and in data */
.field.frozen + .field:not(.frozen) {
margin-left: 1px;
}
/* printing frozen fields is straightforward - just need to remove transparency */
@media print {
.field.frozen {
background: white !important;
}
.column_names .column_name.frozen {
background: var(--grist-theme-table-header-bg, var(--grist-color-light-grey)) !important;
}
}
/* Column hover effect */
.gridview_row .field.hover-column, /* normal field in a row */
.gridview_row .field.hover-column .field_clip,
.column_name.hover-column, /* column name */
.column_name.hover-column.selected, /* selected column name */
.gridview_row .field.frozen.hover-column /* frozen field in a row */ {
/* for frozen fields can't use alpha channel */
background-color: var(--grist-theme-selection-opaque-bg, var(--grist-color-selection-opaque));
color: var(--grist-theme-selection-opaque-fg, unset);
}
/* For zebra stripes, make the selection little darker */
.record-zebra.record-even .field.hover-column {
background-color: var(--grist-theme-selection-opaque-dark-bg, var(--grist-color-selection-darker-opaque));
color: var(--grist-theme-selection-opaque-fg, unset);
}
/* When column has a hover, remove menu button. */
.column_name.hover-column .menu_toggle {
visibility: hidden;
}
/* Etc */
.g-column-main-menu {
position: absolute;
top: 3px;
right: 2px;
}
.validation_error_number {
position: absolute;
top: -12px;
right: -12px;
width: 24px;
height: 24px;
padding-top: 10px;
padding-right: 10px;
border-radius: 12px;
text-align: center;
font-size: 10px;
font-weight: bold;
background: red;
color: white;
}
.column_name.mod-add-column {
border-right-width: 1px;
min-width: 40px;
padding-right: 12px;
}
.g-column-label {
display: flex;
align-items: center;
justify-content: center;
}
.g-column-label .info_toggle_icon {
width: 13px;
height: 13px;
margin-right: 4px;
}
.g-column-label .kf_editable_label {
padding-left: 1px;
padding-right: 1px;
}
.g-column-label-spacer {
width: calc(13px + 4px + 4px);
height: 17px;
flex-shrink: 100;
}