// ┌───────────────────────────────────────────────────────────────────────────┐
// │ │
// │ ██████╗ ██████╗ ██████╗ Copyright (C) 2022, The Prospective Company │
// │ ██╔══██╗██╔══██╗██╔═══██╗ │
// │ ██████╔╝██████╔╝██║ ██║ This file is part of the Procss library, │
// │ ██╔═══╝ ██╔══██╗██║ ██║ distributed under the terms of the │
// │ ██║ ██║ ██║╚██████╔╝ Apache License 2.0. The full license can │
// │ ╚═╝ ╚═╝ ╚═╝ ╚═════╝ be found in the LICENSE file. │
// │ │
// └───────────────────────────────────────────────────────────────────────────┘
@import "./aggregate-selector.less";
:host {
.column-selector-column-title {
display: flex;
width: 100%;
flex-direction: row !important;
align-items: center;
}
#expression-columns .column-selector-column-title {
width: calc(100% - 24px);
}
.column_name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
flex: 1 1 250px;
padding-left: 23px;
display: flex;
align-items: center;
&:only-child {
padding-right: 12px;
}
}
.column-selector--spacer {
width: 94px;
flex: 0 1 94px;
}
.show-aggregate .column-selector--spacer {
width: 0px;
}
.show-aggregate {
.column_name:only-child {
padding-right: 12px;
}
}
#sub-columns .column_name:only-child {
padding-right: 12px;
}
.column_name:before {
// font-family: var(--interface-monospace--font-family,
// monospace);
// width: var(--column_type--width, auto);
// min-width: 18px;
font-size: 12px;
font-weight: 200;
height: 13px;
// padding: 0 5px 0 0;
position: absolute;
}
.integer:before,
.float:before {
content: url("./number_type.svg");
left: 5px;
}
.string:before {
content: url("./string_type.svg");
left: 5px;
}
.boolean:before {
content: var(
--boolean--column-type--content,
var(--column-type--content, "t/f")
);
color: var(
--boolean--column-type--color,
var(--column-type--color, #999999)
);
}
.date:before,
.datetime:before {
content: url("./date_type.svg");
// top: -2px;
left: 5px;
}
#side_panel {
// &> :not(:last-child) {
// margin-bottom: 6px;
// }
.psp-icon {
&:hover {
cursor: pointer;
}
}
.psp-icon__add {
display: flex;
width: 20px;
min-width: 20px;
margin-top: -2px;
height: 0px;
font-family: var(
--column-add--font-family,
var(--button--font-family, inherit)
);
&:before {
font-feature-settings: "liga";
content: var(--column-add--content, "+");
}
}
.psp-title__columnName {
display: flex;
margin-left: 4px;
font-size: 12px;
font-weight: 300;
white-space: nowrap;
}
#add-expression {
border: var(--column-add--border, none);
min-height: 26px;
flex-direction: row;
.expr-icon:before {
content: "+";
font-size: 16px;
margin-left: 4px;
}
& > span {
opacity: 0;
transition: opacity 0.25s 0.5s;
align-self: center;
}
&:hover > span {
opacity: 1;
transition: opacity 0.15s;
}
&.expr_editor_open {
background: rgba(0, 0, 0, 0.05);
}
}
.side_panel-action:hover {
cursor: pointer;
}
.dragdrop-highlight {
.column_selector_draggable.dragover,
.column-selector-column:not(:last-child):not(:nth-last-child(2)):not(:nth-last-child(3))
.column_selector_draggable {
border-bottom-color: var(--active--color) !important;
}
.column-selector-column:not(:first-child):not([data-label]):not(:nth-last-child(2))
.column_selector_draggable.dragover {
border-top-color: rgb(0 0 0 / 5%) !important;
}
}
.column-selector-column {
display: flex;
flex-direction: row-reverse;
align-items: stretch;
font-size: 12px;
background-color: #fdfffd;
border: 1px solid #ababab;
border-radius: 2px;
margin-bottom: 4px;
&:last-child,
&:nth-last-child(2) {
.column_selector_draggable {
border-color: transparent;
}
}
// Expression column toolbar buttons
span.expression-edit-button,
span.expression-delete-button {
padding-top: 1px;
font-family: var(--button--font-family, inherit);
cursor: pointer;
opacity: 1;
color: #999;
&:hover {
opacity: 1;
color: var(--active--color, #000);
}
}
span.expression-delete-button {
// padding-right: 1.5px;
padding-left: 5px;
margin-right: 8px;
&:before {
content: var(--column-close--content, "close");
}
}
span.expression-edit-button {
// padding-left: 1.5px;
padding-right: 8px;
&:before {
content: url(expression.svg); //var(--column-menu--content, "menu");
}
}
.column_selector_draggable {
display: flex;
align-items: start;
cursor: move;
// border-style: solid;
border-width: 1px;
// border-color: var(--inactive--color, #c5c9d0);
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
font-size: 12px;
flex-grow: 1;
color: inherit;
box-sizing: border-box;
// flex-direction: column;
flex-direction: row-reverse;
align-items: center;
justify-content: space-evenly;
position: relative;
min-height: 24px;
// Height needs to be a multiple of non-`.show-aggregate` height
// so adding/removing does not drift the column position
// y-offset.
&.show-aggregate {
min-height: 47px;
}
&.show-aggregate {
.column_name {
padding-left: 5px;
}
}
}
}
.is_column_active {
font-family: var(
--column-selector--font-family,
var(--button--font-family, inherit)
) !important;
width: var(--column-selector--width, 24px);
min-width: var(--column-selector--width, 24px);
height: var(--is_visible--height, auto);
cursor: pointer;
font-size: var(--column-selector--font-size, 14px);
}
#active-columns.collapse {
.column-selector-column:nth-last-child(3) {
.column_selector_draggable {
border-color: transparent;
}
}
}
#active-columns:not(.collapse).dragdrop-highlight {
.column-selector-column:not(:last-child):not(:nth-last-child(2))
.column_selector_draggable {
border-bottom-color: var(--active--color) !important;
}
}
#active-columns,
#sub-columns {
flex: 0 1 auto;
overflow-x: hidden !important;
overflow-y: scroll;
&:-webkit-scrollbar-thumb {
// background-color: rgba(0, 0, 0, 0.1);
// border-radius: 4px;
border: 0 solid #6e6e6e;
border-right-width: 1px;
}
&:-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.1);
}
&:-webkit-scrollbar,
&:-webkit-scrollbar-corner {
background-color: transparent;
width: 6px;
}
}
#sub-columns {
margin-top: 32px;
}
#sub-columns:before {
font-size: 9px;
// left: -1px;
padding: var(--column_type--padding, 0px 0px 0px 0px);
color: #042121;
position: absolute;
margin-top: -15px;
content: "All Columns";
}
#active-columns.collapse {
max-height: min(calc(100% - 95px), 60%);
}
#sub-columns {
flex: 0 10000000 auto;
}
#active-columns {
display: flex;
.is_column_active {
color: var(--active--color, #999);
&:before {
content: var(--active-column-selector--content, "\2611");
content: url("./active.svg");
}
&:hover:before {
content: var(--active-column-selector--content, "\2611");
content: url("./active-mouseover.svg");
}
&.required {
color: var(--inactive--color, #ccc);
opacity: 0;
cursor: initial;
}
&.inactive:before {
content: "";
}
}
.column-selector-column {
position: relative;
.column_selector_draggable {
width: calc(100% - 24px);
}
&:before {
font-size: 9px;
// margin-left: 22px;
left: -1px;
padding: var(--column_type--padding, 0px 0px 0px 0px);
color: #042121; //var(--inactive--color, #666);
position: absolute;
margin-top: -15px;
content: attr(data-label);
}
&[data-label] {
margin-top: 22px;
}
}
}
// "Empty" slotted columns in the active column list.
.dragover,
.empty-named {
pointer-events: none;
background-color: #ababab33;
& > * {
opacity: 0;
}
}
.empty-named {
border: 1px dashed var(--inactive--color, #ddd) !important;
}
.dragover {
border: 1px dashed var(--active--color, #666) !important;
}
.dragover {
border-style: solid !important;
}
.dragover {
box-shadow: inset 0 0 15px rgb(0 0 0 / 5%);
}
.dragdrop-highlight .empty-named {
border-color: var(--active--color) !important;
border-bottom-color: var(--active--color) !important;
}
// Inactive Columns are the columns in the column selector not currently
// selected for the `columns` field of the `ViewConfig`.
#inactive-columns,
#expression-columns {
& > div:not(:empty) {
margin-bottom: 6px;
}
&:empty {
display: none;
margin: 0px;
}
.is_column_active {
color: var(--inactive--color, #999);
&:before {
content: var(--inactive-column-selector--content, "\2610");
content: url("./inactive.svg");
}
&:hover:before {
content: var(--inactive-column-selector--content, "\2610");
content: url("./inactive-mouseover.svg");
}
}
.column-selector-column {
opacity: 0.3;
transition: opacity 0.3s;
&:hover {
opacity: 1;
transition: none;
}
background-color: #cdcdcd;
border: 1px solid #cdcdcd;
.column_selector_draggable {
border-bottom-color: transparent;
align-items: center;
width: calc(100% - 24px);
}
}
}
}
}
.sub-cell-scroll-enabled regular-table table {
tbody td,
thead th:not(.rt-group-corner) {
transform: translate(var(--regular-table--transform-x, 0px));
}
tbody {
transform: translate(0, var(--regular-table--transform-y, 0px));
}
tbody tr:first-child {
td,
th {
clip-path: polygon(
0 var(--regular-table--clip-y, 0),
0 200%,
200% 200%,
200% var(--regular-table--clip-y, 0)
);
}
}
thead th.rt-group-corner {
background: var(--plugin--background, white);
z-index: 1;
}
tbody tr td:first-of-type {
clip-path: polygon(
var(--regular-table--clip-x, 0) 0,
var(--regular-table--clip-x, 0) 200%,
200% 200%,
200% 0
);
}
tbody tr:first-child td:first-of-type {
clip-path: polygon(
var(--regular-table--clip-x, 0) var(--regular-table--clip-y, 0),
var(--regular-table--clip-x, 0) 200%,
200% 200%,
200% var(--regular-table--clip-y, 0)
);
}
}
