You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
396 lines
10 KiB
396 lines
10 KiB
.gridview_data_pane {
|
|
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;
|
|
|
|
z-index: 2; /* scrollbar should be over the overlay background */
|
|
border-top: 1px solid 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: 2; /* 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 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-color-dark-grey);
|
|
background-color: var(--grist-color-light-grey);
|
|
z-index: 2; /* 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-color-light-grey) !important;
|
|
}
|
|
.gridview_header_backdrop_top {
|
|
display: none;
|
|
}
|
|
.column_name.mod-add-column {
|
|
display: none;
|
|
}
|
|
.gridview_data_header {
|
|
background-color: 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-color-dark-grey);
|
|
border-left: 1px solid 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-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-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 lightgray;
|
|
z-index: 3;
|
|
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 #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: 3;
|
|
}
|
|
|
|
/* 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 #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: 3;
|
|
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: #999999;
|
|
z-index: 3;
|
|
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 #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: 3;
|
|
}
|
|
|
|
.gridview_header_backdrop_left {
|
|
width: calc(4rem + 1px); /* Matches rowid width (+border) */
|
|
height:100%;
|
|
top: 1px; /* go under 1px border on scrollpane */
|
|
z-index: 1;
|
|
border-right: 1px solid lightgray;
|
|
}
|
|
|
|
.gridview_left_border {
|
|
position: absolute;
|
|
width: 0px; /* Matches rowid width (+border) */
|
|
height: 100%;
|
|
z-index: 3;
|
|
border-right: 1px solid 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 lightgray;
|
|
z-index: 1;
|
|
}
|
|
|
|
.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 gray;
|
|
z-index: 20;
|
|
top: 0px;
|
|
}
|
|
|
|
.column_shadow{
|
|
width: 0px;
|
|
height: 100%;
|
|
position: absolute;
|
|
border: 1px solid gray;
|
|
z-index: 15;
|
|
top: 0px;
|
|
background-color: #F0F0F0;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.row_indicator_line{
|
|
width: 100%;
|
|
height: 0px;
|
|
position: absolute;
|
|
border: 2px solid gray;
|
|
z-index: 20;
|
|
left: 0px;
|
|
}
|
|
|
|
.row_shadow{
|
|
width: 100%;
|
|
height: 0px;
|
|
position: absolute;
|
|
border: 1px solid gray;
|
|
z-index: 15;
|
|
left: 0px;
|
|
background-color: #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: 1;
|
|
}
|
|
|
|
/* for data field we need to reuse color from record (add-row and zebra stripes) */
|
|
.gridview_row .record .field.frozen {
|
|
background-color: inherit;
|
|
}
|
|
|
|
/* 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-color-dark-grey);
|
|
}
|
|
|
|
/* selected field has a transparent color - with frozen fields we can't do it */
|
|
.gridview_row .field.frozen.selected {
|
|
background-color: var(--grist-color-selection-opaque);
|
|
}
|
|
|
|
/* 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-color-light-grey) !important;
|
|
}
|
|
}
|
|
|
|
/* Column hover effect */
|
|
|
|
.gridview_row .field.hover-column, /* normal field in a row */
|
|
.gridview_row .field.frozen.hover-column, /* frozen field in a row */
|
|
.column_name.hover-column, /* column name */
|
|
.column_name.hover-column.selected /* selected column name */ {
|
|
/* for frozen fields can't use alpha channel */
|
|
background-color: var(--grist-color-selection-opaque);
|
|
}
|
|
/* For zebra stripes, make the selection little darker */
|
|
.record-zebra.record-even .field.hover-column {
|
|
background-color: var(--grist-color-selection-darker-opaque);
|
|
}
|
|
/* 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;
|
|
}
|