gristlabs_grist-core/app/client/components/ColumnFilters.css
Jarosław Sadziński e180641c7d (core) Context menu for cards.
Summary:
User was not able to delete cards. This patch introduces a context menu for cards, analogous to the one available for rows on a GridView.

Changes:
- Row numbers on a GridView have the same icon as on columns to make context menu more discoverable.
- Context menu for rows and columns, when activated, didn't switch section in rare conditions (i.e. when the section had 2 or more columns selected, one of which had the same rowId as a column in the section that the user switched from).
- Card list layout and a single card layout has the same context menu as in a GridView, available by pressing the context menu button.

Test Plan: Browser tests

Reviewers: dsagal, paulfitz

Reviewed By: dsagal

Differential Revision: https://phab.getgrist.com/D2870
2021-06-29 15:29:56 +02:00

114 lines
1.8 KiB
CSS

/* Hide column menus by default */
.column_name .g-column-menu-btn {
visibility: hidden;
}
/* Make visible if open or in column header hover */
.g-column-menu-btn.open,
.g-column-menu-btn.active,
.column_name:hover .g-column-menu-btn,
.column_name .g-column-menu-btn.weasel-popup-open {
visibility: visible;
}
.g-column-menu-btn.hide-on-inactive:not(.active) {
visibility: hidden;
}
.g-column-menu {
position: absolute;
min-width: 180px;
z-index: 10;
padding: 4px;
background-color: #fff;
border: 1px solid #9D8BB5;
box-shadow: 0px 0px 12px #666;
text-align: left;
}
.g-column-filter-remove {
float: right;
margin: 6px 0;
}
.g-column-filter-keyword {
width: 100px;
}
.g-column-filter-menu {
margin: 6px;
min-width: 250px;
}
.grist-filter-menu__link {
cursor: pointer;
}
.g-colfilter-values-scrolly {
position: relative;
height: 200px;
overflow: auto;
}
.g-colfilter-menu-item {
padding: 1px 8px;
line-height: 1.6rem;
cursor: default;
}
.g-colfilter-menu-label {
margin-left: 4px;
margin-right: 4px;
}
.g-glyphicon-tristate {
position: absolute;
top: 4px;
left: 3px;
width: 5px;
height: 5px;
background: #606060;
}
.badge-inv {
background-color: #ddd;
color: #666;
}
.arrow_box {
position: absolute;
background: #fff;
border: 1px solid transparent;
border-top-color: #9D8BB5;
top: -1px;
left: 12px;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 8px;
margin-left: -8px;
}
.arrow_box:before {
border-color: rgba(43, 57, 255, 0);
border-bottom-color: #9D8BB5;
border-width: 9px;
margin-left: -9px;
}