in ui/suggest-owners.js [96:351]
static get template() {
return Polymer.html`
<style include="shared-styles">
:host {
display: block;
background-color: var(--view-background-color);
border: 1px solid var(--view-background-color);
border-radius: var(--border-radius);
box-shadow: var(--elevation-level-1);
padding: 0 var(--spacing-m);
margin: var(--spacing-m) 0;
}
.loadingSpin {
display: inline-block;
}
li {
list-style: none;
}
.suggestion-container {
/* TODO: TBD */
max-height: 300px;
overflow-y: auto;
}
.flex-break {
height: 0;
flex-basis: 100%;
}
.suggestion-row, .show-all-owners-row {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.suggestion-row {
flex-wrap: wrap;
border-top: 1px solid var(--border-color);
padding: var(--spacing-s) 0;
}
.show-all-owners-row {
padding: var(--spacing-m) var(--spacing-xl) var(--spacing-s) 0;
}
.show-all-owners-row .loading {
padding: 0;
}
.show-all-owners-row .show-all-label {
margin-left: auto; /* align label to the right */
}
.suggestion-row-indicator {
margin-right: var(--spacing-s);
visibility: hidden;
line-height: 26px;
}
.suggestion-row-indicator[visible] {
visibility: visible;
}
.suggestion-row-indicator[visible] iron-icon {
color: var(--link-color);
vertical-align: top;
position: relative;
--iron-icon-height: 18px;
--iron-icon-width: 18px;
top: 4px; /* (26-18)/2 - 26px line-height and 18px icon */
}
.suggestion-group-name {
width: 260px;
line-height: 26px;
text-overflow: ellipsis;
overflow: hidden;
padding-right: var(--spacing-s);
white-space: nowrap;
}
.group-name-content {
display: flex;
align-items: center;
}
.group-name-content .group-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.group-name-prefix {
padding-left: var(--spacing-s);
white-space: nowrap;
color: var(--deemphasized-text-color);
}
.suggested-owners {
--account-gap: var(--spacing-xs);
--negative-account-gap: calc(-1*var(--account-gap));
margin: var(--negative-account-gap) 0 0 var(--negative-account-gap);
flex: 1;
}
.fetch-error-content,
.owned-by-all-users-content,
.no-owners-content {
line-height: 26px;
flex: 1;
padding-left: var(--spacing-m);
}
.owned-by-all-users-content iron-icon {
width: 16px;
height: 16px;
padding-top: 5px;
}
.fetch-error-content {
color: var(--error-text-color);
}
.no-owners-content a {
padding-left: var(--spacing-s);
}
.no-owners-content a iron-icon {
width: 16px;
height: 16px;
padding-top: 5px;
}
gr-account-label {
display: inline-block;
padding: var(--spacing-xs) var(--spacing-m);
user-select: none;
border: 1px solid transparent;
--label-border-radius: 8px;
/* account-max-length defines the max text width inside account-label.
With 60px the gr-account-label always has width <= 100px and 5 labels
are always fit in a single row */
--account-max-length: 60px;
border: 1px solid var(--border-color);
margin: var(--account-gap) 0 0 var(--account-gap)
}
gr-account-label:focus {
outline: none;
}
gr-account-label:hover {
box-shadow: var(--elevation-level-1);
cursor: pointer;
}
gr-account-label[selected] {
background-color: var(--chip-selected-background-color);
border: 1px solid var(--chip-selected-background-color);
color: var(--chip-selected-text-color);
}
gr-hovercard {
max-width: 800px;
}
.loading {
display: flex;
align-content: center;
align-items: center;
justify-content: center;
padding: var(--spacing-m);
}
.loadingSpin {
width: 18px;
height: 18px;
margin-right: var(--spacing-m);
}
</style>
<ul class="suggestion-container">
<li class="show-all-owners-row">
<p class="loading" hidden="[[!isLoading]]">
<span class="loadingSpin"></span>
[[progressText]]
</p>
<label class="show-all-label">
<input
id="showAllOwnersCheckbox"
type="checkbox"
checked="{{_showAllOwners::change}}"
/>
Show all owners
</label>
</li>
</ul>
<ul class="suggestion-container">
<template
is="dom-repeat"
items="[[suggestedOwners]]"
as="suggestion"
index-as="suggestionIndex"
>
<li class="suggestion-row">
<div
class="suggestion-row-indicator"
visible$="[[suggestion.hasSelected]]"
>
<iron-icon icon="gr-icons:check-circle"></iron-icon>
</div>
<div class="suggestion-group-name">
<div class="group-name-content">
<span class="group-name">
[[suggestion.groupName.name]]
</span>
<template is="dom-if" if="[[suggestion.groupName.prefix]]">
<span class="group-name-prefix">
([[suggestion.groupName.prefix]])
</span>
</template>
<gr-hovercard hidden="[[suggestion.expanded]]">
<owner-group-file-list
files="[[suggestion.files]]"
>
</owner-group-file-list>
</gr-hovercard>
</div>
<owner-group-file-list
hidden="[[!suggestion.expanded]]"
files="[[suggestion.files]]"
></owner-group-file-list>
</div>
<template is="dom-if" if="[[suggestion.error]]">
<div class="fetch-error-content">
[[suggestion.error]]
<a on-click="_showErrorDetails"
</div>
</template>
<template is="dom-if" if="[[!suggestion.error]]">
<template is="dom-if" if="[[!_areOwnersFound(suggestion.owners)]]">
<div class="no-owners-content">
<span>Not found</span>
<a on-click="_reportDocClick" href="https://gerrit.googlesource.com/plugins/code-owners/+/HEAD/resources/Documentation/how-to-use.md#no-code-owners-found" target="_blank">
<iron-icon icon="gr-icons:help-outline" title="read documentation"></iron-icon>
</a>
</div>
</template>
<template is="dom-if" if="[[suggestion.owners.owned_by_all_users]]">
<div class="owned-by-all-users-content">
<iron-icon icon="gr-icons:info" ></iron-icon>
<span>[[_getOwnedByAllUsersContent(isLoading, suggestedOwners)]]</span>
</div>
</template>
<template is="dom-if" if="[[!suggestion.owners.owned_by_all_users]]">
<template is="dom-if" if="[[_showAllOwners]]">
<div class="flex-break"></div>
</template>
<ul class="suggested-owners">
<template
is="dom-repeat"
items="[[suggestion.owners.code_owners]]"
as="owner"
index-as="ownerIndex"
><!--
--><gr-account-label
data-suggestion-index$="[[suggestionIndex]]"
data-owner-index$="[[ownerIndex]]"
account="[[owner.account]]"
selected$="[[isSelected(owner)]]"
on-click="toggleAccount">
</gr-account-label><!--
--></template>
</ul>
</template>
</template>
</li>
</template>
</ul>
`;
}