65bd918ac3
this contains a grid + button + hidden field which lets the user add group filters one by one. the first column is the type selector (type, group, regex) and the second column shows the relevant input field (groupselector, kvcombobox for type, and textfield for regex) i had to hack a little to get access to the widgets of the fieldcontainer, since we cannot simply access the widget of a column from another column (which we need to show the correct one when changing the type), also we cannot traverse the widget hirachy in the usual way, since extjs seems to build it differently for widgetcolumns. to solve this, i added references of the widgets to the record, and a reference of the record to the widgets. since this is now a cyclic reference, i solve that in 'removeFilter' and in 'beforedestroy' of the grid by removing the references again also contains a small css style to remove the padding in the rows Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
288 lines
5.2 KiB
CSS
288 lines
5.2 KiB
CSS
/* overwrite to use full black for enabled buttons */
|
|
.x-btn-inner-default-toolbar-small {
|
|
font: 300 12px/16px helvetica, arial, verdana, sans-serif;
|
|
color: #000;
|
|
padding: 0 5px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* add missing class for context menu header */
|
|
.x-menu-header {
|
|
font: 400 13px/20px 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
|
|
color: #fff;
|
|
padding: 4px;
|
|
background-color: #3892d4;
|
|
}
|
|
|
|
/* make the upper window end visible */
|
|
.x-css-shadow {
|
|
box-shadow: rgb(136,136,136) 0px -1px 15px !important;
|
|
}
|
|
|
|
/* reduce tree space */
|
|
.x-grid-cell-inner-treecolumn { /* vertical padding */
|
|
padding: 4px 0px 3px 0px;
|
|
}
|
|
|
|
/* horizontal distance between parent and child leaf */
|
|
.x-tree-elbow-img {
|
|
width: 14px;
|
|
}
|
|
|
|
/* adjust horizontal position of menu icons */
|
|
.x-menu-item-icon-default {
|
|
top: 5px;
|
|
left: 3px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* this gives a better placement for the font-awesome icons */
|
|
.x-btn-icon-el-default-toolbar-small {
|
|
height: 14px;
|
|
}
|
|
|
|
/* this icon looks weird in sizes not n*14px */
|
|
.x-btn-icon-el-default-toolbar-small.fa-ellipsis-v {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.x-btn-icon-el-default-small {
|
|
height: 14px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.pmx-icon-size {
|
|
height: 14px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
|
|
/* displayfield minheight is wrong */
|
|
.x-form-display-field-default {
|
|
min-height: 20px;
|
|
}
|
|
|
|
.x-button-reset:before {
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* for resetcolumnsbutton */
|
|
.x-button-reset:after{
|
|
content: "\f0e7 ";
|
|
position: relative;
|
|
text-shadow: 0 0 2px #fff;
|
|
left: -3px;
|
|
top: 2px;
|
|
}
|
|
|
|
.proxmox-inline-button .x-btn-inner {
|
|
color: black;
|
|
}
|
|
|
|
/* loading in task list */
|
|
.x-grid-row-loading {
|
|
background: no-repeat center center;
|
|
background-image:url(../extjs/theme-crisp/resources/images/loadmask/loading.gif);
|
|
}
|
|
|
|
/* displayfield minheight is wrong */
|
|
.x-form-display-field-default {
|
|
min-height: 20px;
|
|
}
|
|
|
|
.x-button-reset:before {
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* for resetcolumnsbutton */
|
|
.x-button-reset:after{
|
|
content: "\f0e7 ";
|
|
position: relative;
|
|
text-shadow: 0 0 2px #fff;
|
|
left: -3px;
|
|
top: 2px;
|
|
}
|
|
|
|
.proxmox-inline-button .x-btn-inner {
|
|
color: black;
|
|
}
|
|
|
|
/* for auto layout */
|
|
div.inline-block {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.pointer {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.x-grid-filters-filtered-column{
|
|
font-style: italic;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* mark disabled grid entries */
|
|
table:not(.x-grid-item-selected) tr.x-grid-row.disabled {
|
|
color: #cfcfcf;
|
|
}
|
|
|
|
/* fix action column icons */
|
|
.x-action-col-icon {
|
|
font-size: 13px;
|
|
height: 13px;
|
|
}
|
|
|
|
.x-grid-cell-inner-action-col {
|
|
padding: 6px 10px 5px;
|
|
}
|
|
|
|
.x-action-col-icon:before {
|
|
color: #555;
|
|
}
|
|
|
|
.x-treelist-item-icon {
|
|
color: #000;
|
|
}
|
|
|
|
.x-treelist-pve-nav {
|
|
background-color: #f5f5f5;
|
|
border-right: 1px solid #cfcfcf;
|
|
}
|
|
|
|
.x-treelist-row-over > * > .x-treelist-item-icon,
|
|
.x-treelist-row-over > * > .x-treelist-item-text {
|
|
color: #000;
|
|
}
|
|
|
|
.x-treelist-row {
|
|
padding: 4px 10px 4px 6px;
|
|
}
|
|
|
|
/* chrome 56 fix */
|
|
.x-webkit .x-form-text {
|
|
height: 100% !important;
|
|
}
|
|
|
|
.x-webkit :not(.x-form-textarea-body) > .x-form-trigger-wrap {
|
|
height: initial;
|
|
}
|
|
|
|
tr.x-grid-row-summary td.x-grid-cell {
|
|
border-top: 1px solid black;
|
|
font-weight: bold;
|
|
}
|
|
|
|
p.logs {
|
|
white-space: nowrap;
|
|
font-family: monospace;
|
|
overflow: auto;
|
|
border: 1px solid #cfcfcf;
|
|
margin: 5px;
|
|
padding: 5px;
|
|
}
|
|
|
|
/* tree icons */
|
|
|
|
/* big symbols */
|
|
.x-tree-icon-custom {
|
|
font-size: 1.25em;
|
|
line-height: 1.6em;
|
|
color: #555;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.no-leaf-icons .x-tree-icon-leaf {
|
|
visibility: hidden;
|
|
width: 5px;
|
|
}
|
|
|
|
.pmx-has-badge .x-btn-inner {
|
|
padding: 0 0 0 5px;
|
|
min-width: 24px;
|
|
}
|
|
|
|
.pmx-button-badge {
|
|
display: inline-block;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
border-radius: 4px;
|
|
padding: 2px 3px;
|
|
min-width: 24px;
|
|
line-height: 1em;
|
|
}
|
|
|
|
.pmx-button-badge.active {
|
|
background-color: #464d4d;
|
|
}
|
|
|
|
.pmx-hidden {
|
|
cursor: default;
|
|
}
|
|
|
|
span.snapshot-comment-column {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
width: calc(100% - 18px);
|
|
}
|
|
|
|
.x-action-col-icon.good:before {
|
|
color: #21BF4B;
|
|
}
|
|
|
|
.x-action-col-icon.warning:before {
|
|
color: #fc0;
|
|
}
|
|
|
|
.x-action-col-icon.critical:before {
|
|
color: #FF6C59;
|
|
}
|
|
|
|
.pve-icon-verify-lettering:after {
|
|
color: #464d4d;
|
|
font-weight: bold;
|
|
content: "V.";
|
|
}
|
|
|
|
.x-action-col-icon {
|
|
margin: 0 1px;
|
|
font-size: 14px;
|
|
}
|
|
.x-action-col-icon:before, .x-action-col-icon:after {
|
|
font-size: 14px;
|
|
}
|
|
.x-action-col-icon:hover:before, .x-action-col-icon:hover:after {
|
|
text-shadow: 1px 1px 1px #AAA;
|
|
font-weight: 800;
|
|
}
|
|
|
|
/*' PBS specific icons */
|
|
|
|
.pbs-icon-tape {
|
|
background-repeat: no-repeat;
|
|
background-position: bottom;
|
|
padding: 0;
|
|
background-size: 16px;
|
|
height: 20px;
|
|
background-image:url(../images/icon-tape.svg);
|
|
}
|
|
|
|
.pbs-icon-tape-drive {
|
|
background-repeat: no-repeat;
|
|
background-position: bottom;
|
|
padding: 0;
|
|
background-size: 16px;
|
|
height: 20px;
|
|
background-image:url(../images/icon-tape-drive.svg);
|
|
}
|
|
|
|
.info-pointer div.right-aligned {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.x-fieldcontainer-default-cell > .x-grid-cell-inner {
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
}
|