Implementação do tooltip nas SRs do Manage time
This commit is contained in:
Paulo Porto
@@ -1619,6 +1619,8 @@ body.arch-panel-extension-modal-open {
|
||||
}
|
||||
|
||||
.arch-panel-extension-time-management-card {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
--arch-time-management-scrollbar-gutter: 16px;
|
||||
gap: 4px;
|
||||
@@ -1630,6 +1632,10 @@ body.arch-panel-extension-modal-open {
|
||||
border-color: rgba(217, 79, 43, 0.42);
|
||||
}
|
||||
|
||||
.arch-panel-extension-time-management-card:has(.arch-panel-extension-combobox:focus-within) {
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.arch-panel-extension-time-management-toolbar {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
@@ -1875,6 +1881,10 @@ body.arch-panel-extension-modal-open {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.arch-panel-extension-time-management-rows:has(.arch-panel-extension-combobox-option.has-tooltip:hover) {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.arch-panel-extension-time-management-empty {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
@@ -1901,6 +1911,7 @@ body.arch-panel-extension-modal-open {
|
||||
}
|
||||
|
||||
.arch-panel-extension-time-management-entry-row {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
minmax(420px, 3.8fr)
|
||||
@@ -1912,6 +1923,10 @@ body.arch-panel-extension-modal-open {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.arch-panel-extension-time-management-entry-row:has(.arch-panel-extension-combobox:focus-within) {
|
||||
z-index: 60;
|
||||
}
|
||||
|
||||
.arch-panel-extension-time-management-entry-row.is-compact {
|
||||
align-items: center;
|
||||
}
|
||||
@@ -1950,9 +1965,14 @@ body.arch-panel-extension-modal-open {
|
||||
|
||||
.arch-panel-extension-combobox {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.arch-panel-extension-combobox:focus-within {
|
||||
z-index: 70;
|
||||
}
|
||||
|
||||
.arch-panel-extension-combobox input {
|
||||
min-height: 40px;
|
||||
padding-left: 12px;
|
||||
@@ -1991,6 +2011,13 @@ body.arch-panel-extension-modal-open {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.arch-panel-extension-combobox-value-text {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.arch-panel-extension-combobox:focus-within .arch-panel-extension-combobox-value {
|
||||
display: none;
|
||||
}
|
||||
@@ -2042,9 +2069,10 @@ body.arch-panel-extension-modal-open {
|
||||
.arch-panel-extension-combobox-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
bottom: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10000;
|
||||
z-index: 2147483000;
|
||||
display: none;
|
||||
max-height: 260px;
|
||||
overflow: auto;
|
||||
@@ -2055,6 +2083,15 @@ body.arch-panel-extension-modal-open {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.arch-panel-extension-combobox-menu.has-service-request-tooltips {
|
||||
right: auto;
|
||||
width: min(1120px, calc(100vw - 72px));
|
||||
max-height: min(58vh, 430px);
|
||||
overscroll-behavior: contain;
|
||||
padding-bottom: 12px;
|
||||
scroll-padding-block: 10px 18px;
|
||||
}
|
||||
|
||||
.arch-panel-extension-combobox:focus-within .arch-panel-extension-combobox-menu {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
@@ -2126,12 +2163,202 @@ body.arch-panel-extension-modal-open {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.arch-panel-extension-combobox-option.has-tooltip {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.arch-panel-extension-combobox-option.has-tooltip.is-selected::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.arch-panel-extension-combobox-empty {
|
||||
color: var(--wb-text-muted);
|
||||
font-size: 12px;
|
||||
padding: 8px 9px;
|
||||
}
|
||||
|
||||
.arch-panel-extension-service-request-tooltip {
|
||||
--arch-tooltip-panel: var(--wb-panel, #ffffff);
|
||||
--arch-tooltip-border: var(--wb-border-strong, #c8c8c8);
|
||||
--arch-tooltip-text: var(--wb-text, #1f1f1f);
|
||||
--arch-tooltip-muted: var(--wb-text-muted, #6f7782);
|
||||
--arch-tooltip-link: var(--wb-link, #006b9a);
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 10px;
|
||||
z-index: 2147483647;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
width: 420px;
|
||||
max-width: min(420px, calc(100vw - 96px));
|
||||
max-height: min(360px, calc(100vh - 20px));
|
||||
overflow: auto;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
pointer-events: auto;
|
||||
border: 1px solid var(--arch-tooltip-border);
|
||||
border-radius: 8px;
|
||||
background: var(--arch-tooltip-panel);
|
||||
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
|
||||
color: var(--arch-tooltip-text);
|
||||
padding: 12px;
|
||||
transform: translateY(4px);
|
||||
transition:
|
||||
opacity 120ms ease 500ms,
|
||||
transform 120ms ease 500ms,
|
||||
visibility 0ms linear 500ms;
|
||||
}
|
||||
|
||||
.arch-panel-extension-combobox-option.has-tooltip > .arch-panel-extension-service-request-tooltip {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.arch-panel-extension-service-request-tooltip-portal.is-visible {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition-delay: 0ms;
|
||||
}
|
||||
|
||||
.arch-panel-extension-combobox-option.has-tooltip:hover .arch-panel-extension-service-request-tooltip,
|
||||
.arch-panel-extension-combobox-option.has-tooltip:focus .arch-panel-extension-service-request-tooltip,
|
||||
.arch-panel-extension-combobox-option.has-tooltip.is-tooltip-active .arch-panel-extension-service-request-tooltip {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition-delay: 0ms;
|
||||
}
|
||||
|
||||
.arch-panel-extension-combobox-menu.has-service-request-tooltips:has(.arch-panel-extension-combobox-option.has-tooltip:hover)
|
||||
.arch-panel-extension-combobox-option-main,
|
||||
.arch-panel-extension-combobox-menu.has-service-request-tooltips:has(.arch-panel-extension-combobox-option.has-tooltip:focus)
|
||||
.arch-panel-extension-combobox-option-main,
|
||||
.arch-panel-extension-combobox-menu.has-service-request-tooltips:has(.arch-panel-extension-combobox-option.has-tooltip.is-tooltip-active)
|
||||
.arch-panel-extension-combobox-option-main {
|
||||
max-width: calc(100% - var(--arch-service-request-tooltip-reserved-width, 448px));
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.arch-panel-extension-service-request-tooltip-title {
|
||||
display: block;
|
||||
color: var(--arch-tooltip-text);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.arch-panel-extension-service-request-tooltip-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(110px, 0.42fr) minmax(0, 1fr);
|
||||
gap: 7px 10px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.arch-panel-extension-service-request-tooltip-label {
|
||||
color: var(--arch-tooltip-muted);
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
line-height: 1.35;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.arch-panel-extension-service-request-tooltip-value {
|
||||
min-width: 0;
|
||||
color: var(--arch-tooltip-text);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.arch-panel-extension-service-request-tooltip-excerpt {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.arch-panel-extension-service-request-tooltip-more {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.arch-panel-extension-service-request-tooltip-more summary {
|
||||
width: max-content;
|
||||
color: var(--arch-tooltip-link);
|
||||
cursor: pointer;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.arch-panel-extension-service-request-tooltip-more summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.arch-panel-extension-service-request-tooltip-more[open] summary {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.arch-panel-extension-service-request-tooltip-value:has(.arch-panel-extension-service-request-tooltip-more[open])
|
||||
.arch-panel-extension-service-request-tooltip-excerpt {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.arch-panel-extension-combobox-menu.has-service-request-tooltips {
|
||||
width: min(760px, calc(100vw - 48px));
|
||||
}
|
||||
|
||||
.arch-panel-extension-service-request-tooltip {
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 10px;
|
||||
width: min(340px, calc(100% - 24px));
|
||||
transform: translateY(4px);
|
||||
}
|
||||
|
||||
.arch-panel-extension-combobox-menu.has-service-request-tooltips:has(.arch-panel-extension-combobox-option.has-tooltip:hover)
|
||||
.arch-panel-extension-combobox-option-main,
|
||||
.arch-panel-extension-combobox-menu.has-service-request-tooltips:has(.arch-panel-extension-combobox-option.has-tooltip:focus)
|
||||
.arch-panel-extension-combobox-option-main,
|
||||
.arch-panel-extension-combobox-menu.has-service-request-tooltips:has(.arch-panel-extension-combobox-option.has-tooltip.is-tooltip-active)
|
||||
.arch-panel-extension-combobox-option-main {
|
||||
max-width: calc(100% - var(--arch-service-request-tooltip-reserved-width, 368px));
|
||||
}
|
||||
|
||||
.arch-panel-extension-combobox-option.has-tooltip:hover .arch-panel-extension-service-request-tooltip,
|
||||
.arch-panel-extension-combobox-option.has-tooltip:focus .arch-panel-extension-service-request-tooltip,
|
||||
.arch-panel-extension-combobox-option.has-tooltip.is-tooltip-active .arch-panel-extension-service-request-tooltip {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.arch-panel-extension-combobox-menu.has-service-request-tooltips {
|
||||
width: min(520px, calc(100vw - 32px));
|
||||
}
|
||||
|
||||
.arch-panel-extension-combobox-menu.has-service-request-tooltips:has(.arch-panel-extension-combobox-option.has-tooltip:hover)
|
||||
.arch-panel-extension-combobox-option-main,
|
||||
.arch-panel-extension-combobox-menu.has-service-request-tooltips:has(.arch-panel-extension-combobox-option.has-tooltip:focus)
|
||||
.arch-panel-extension-combobox-option-main,
|
||||
.arch-panel-extension-combobox-menu.has-service-request-tooltips:has(.arch-panel-extension-combobox-option.has-tooltip.is-tooltip-active)
|
||||
.arch-panel-extension-combobox-option-main {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.arch-panel-extension-service-request-tooltip {
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 8px;
|
||||
width: min(420px, calc(100vw - 48px));
|
||||
max-height: min(320px, calc(100vh - 120px));
|
||||
}
|
||||
}
|
||||
|
||||
.arch-panel-extension-time-management-days {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, minmax(110px, 1fr));
|
||||
|
||||
Reference in New Issue
Block a user