Merge "Redesign of tab header rows and change list sections"
This commit is contained in:
Ben Rohlfs
@@ -37,7 +37,7 @@ limitations under the License.
|
||||
<style include="shared-styles">
|
||||
:host {
|
||||
display: table-row;
|
||||
color: var(--reviewed-text-color);
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
:host(:focus) {
|
||||
outline: none;
|
||||
|
||||
@@ -53,71 +53,77 @@ limitations under the License.
|
||||
}
|
||||
</style>
|
||||
<table id="changeList">
|
||||
<tr class="topHeader">
|
||||
<th class="leftPadding"></th>
|
||||
<th class="star" hidden$="[[!showStar]]" hidden></th>
|
||||
<th class="number" hidden$="[[!showNumber]]" hidden>#</th>
|
||||
<template is="dom-repeat" items="[[changeTableColumns]]" as="item">
|
||||
<th class$="[[_lowerCase(item)]]"
|
||||
hidden$="[[isColumnHidden(item, visibleChangeTableColumns)]]">
|
||||
[[item]]
|
||||
</th>
|
||||
</template>
|
||||
<template is="dom-repeat" items="[[labelNames]]" as="labelName">
|
||||
<th class="label" title$="[[labelName]]">
|
||||
[[_computeLabelShortcut(labelName)]]
|
||||
</th>
|
||||
</template>
|
||||
<template is="dom-repeat" items="[[_dynamicHeaderEndpoints]]"
|
||||
as="pluginHeader">
|
||||
<th class="endpoint">
|
||||
<gr-endpoint-decorator name$="[[pluginHeader]]">
|
||||
</gr-endpoint-decorator>
|
||||
</th>
|
||||
</template>
|
||||
</tr>
|
||||
<thead>
|
||||
<tr class="topHeader">
|
||||
<th class="leftPadding"></th>
|
||||
<th class="star" hidden$="[[!showStar]]" hidden></th>
|
||||
<th class="number" hidden$="[[!showNumber]]" hidden>#</th>
|
||||
<template is="dom-repeat" items="[[changeTableColumns]]" as="item">
|
||||
<th class$="[[_lowerCase(item)]]"
|
||||
hidden$="[[isColumnHidden(item, visibleChangeTableColumns)]]">
|
||||
[[item]]
|
||||
</th>
|
||||
</template>
|
||||
<template is="dom-repeat" items="[[labelNames]]" as="labelName">
|
||||
<th class="label" title$="[[labelName]]">
|
||||
[[_computeLabelShortcut(labelName)]]
|
||||
</th>
|
||||
</template>
|
||||
<template is="dom-repeat" items="[[_dynamicHeaderEndpoints]]"
|
||||
as="pluginHeader">
|
||||
<th class="endpoint">
|
||||
<gr-endpoint-decorator name$="[[pluginHeader]]">
|
||||
</gr-endpoint-decorator>
|
||||
</th>
|
||||
</template>
|
||||
</tr>
|
||||
</thead>
|
||||
<template is="dom-repeat" items="[[sections]]" as="changeSection"
|
||||
index-as="sectionIndex">
|
||||
<template is="dom-if" if="[[changeSection.name]]">
|
||||
<tr class="groupHeader">
|
||||
<td class="leftPadding"></td>
|
||||
<td class="star" hidden$="[[!showStar]]" hidden></td>
|
||||
<td class="cell"
|
||||
colspan$="[[_computeColspan(changeTableColumns, labelNames)]]">
|
||||
<a href$="[[_sectionHref(changeSection.query)]]" class="section-title">
|
||||
<span class="section-name">[[changeSection.name]]</span>
|
||||
<span class="section-count-label">[[changeSection.countLabel]]</span>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template is="dom-if" if="[[_isEmpty(changeSection)]]">
|
||||
<tr class="noChanges">
|
||||
<td class="leftPadding"></td>
|
||||
<td class="star" hidden$="[[!showStar]]" hidden></td>
|
||||
<td class="cell"
|
||||
colspan$="[[_computeColspan(changeTableColumns, labelNames)]]">
|
||||
<template is="dom-if" if="[[_isOutgoing(changeSection)]]">
|
||||
<slot name="empty-outgoing"></slot>
|
||||
</template>
|
||||
<template is="dom-if" if="[[!_isOutgoing(changeSection)]]">
|
||||
No changes
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template is="dom-repeat" items="[[changeSection.results]]" as="change">
|
||||
<gr-change-list-item
|
||||
selected$="[[_computeItemSelected(sectionIndex, index, selectedIndex)]]"
|
||||
highlight$="[[_computeItemHighlight(account, change)]]"
|
||||
needs-review$="[[_computeItemNeedsReview(account, change, showReviewedState)]]"
|
||||
change="[[change]]"
|
||||
visible-change-table-columns="[[visibleChangeTableColumns]]"
|
||||
show-number="[[showNumber]]"
|
||||
show-star="[[showStar]]"
|
||||
tabindex="0"
|
||||
label-names="[[labelNames]]"></gr-change-list-item>
|
||||
<tbody>
|
||||
<tr class="groupHeader">
|
||||
<td class="leftPadding"></td>
|
||||
<td class="star" hidden$="[[!showStar]]" hidden></td>
|
||||
<td class="cell"
|
||||
colspan$="[[_computeColspan(changeTableColumns, labelNames)]]">
|
||||
<a href$="[[_sectionHref(changeSection.query)]]" class="section-title">
|
||||
<span class="section-name">[[changeSection.name]]</span>
|
||||
<span class="section-count-label">[[changeSection.countLabel]]</span>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</template>
|
||||
<tbody class="groupContent">
|
||||
<template is="dom-if" if="[[_isEmpty(changeSection)]]">
|
||||
<tr class="noChanges">
|
||||
<td class="leftPadding"></td>
|
||||
<td class="star" hidden$="[[!showStar]]" hidden></td>
|
||||
<td class="cell"
|
||||
colspan$="[[_computeColspan(changeTableColumns, labelNames)]]">
|
||||
<template is="dom-if" if="[[_isOutgoing(changeSection)]]">
|
||||
<slot name="empty-outgoing"></slot>
|
||||
</template>
|
||||
<template is="dom-if" if="[[!_isOutgoing(changeSection)]]">
|
||||
No changes
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template is="dom-repeat" items="[[changeSection.results]]" as="change">
|
||||
<gr-change-list-item
|
||||
selected$="[[_computeItemSelected(sectionIndex, index, selectedIndex)]]"
|
||||
highlight$="[[_computeItemHighlight(account, change)]]"
|
||||
needs-review$="[[_computeItemNeedsReview(account, change, showReviewedState)]]"
|
||||
change="[[change]]"
|
||||
visible-change-table-columns="[[visibleChangeTableColumns]]"
|
||||
show-number="[[showNumber]]"
|
||||
show-star="[[showStar]]"
|
||||
tabindex="0"
|
||||
label-names="[[labelNames]]"></gr-change-list-item>
|
||||
</template>
|
||||
</tbody>
|
||||
</template>
|
||||
</table>
|
||||
<gr-cursor-manager
|
||||
|
||||
@@ -34,7 +34,6 @@ limitations under the License.
|
||||
<template>
|
||||
<style include="shared-styles">
|
||||
:host {
|
||||
background-color: var(--view-background-color);
|
||||
display: block;
|
||||
}
|
||||
.loading {
|
||||
|
||||
@@ -68,17 +68,7 @@ limitations under the License.
|
||||
}
|
||||
iron-icon {
|
||||
color: inherit;
|
||||
height: 1.2rem;
|
||||
margin-right: var(--spacing-xs);
|
||||
width: 1.2rem;
|
||||
}
|
||||
gr-button {
|
||||
min-height: 2.25em;
|
||||
}
|
||||
gr-dropdown {
|
||||
--gr-button: {
|
||||
min-height: 2.25em;
|
||||
}
|
||||
}
|
||||
#moreActions iron-icon {
|
||||
margin: 0;
|
||||
|
||||
@@ -60,7 +60,7 @@ limitations under the License.
|
||||
<template>
|
||||
<style include="shared-styles">
|
||||
.container:not(.loading) {
|
||||
background-color: var(--view-background-color);
|
||||
background-color: var(--background-color-tertiary);
|
||||
}
|
||||
.container.loading {
|
||||
color: var(--deemphasized-text-color);
|
||||
@@ -68,7 +68,7 @@ limitations under the License.
|
||||
}
|
||||
.header {
|
||||
align-items: center;
|
||||
background-color: var(--table-header-background-color);
|
||||
background-color: var(--background-color-primary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
padding: var(--spacing-s) var(--spacing-l);
|
||||
@@ -112,13 +112,15 @@ limitations under the License.
|
||||
.changeStatus {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.changeInfo {
|
||||
background-color: var(--table-header-background-color);
|
||||
}
|
||||
/* Strong specificity here is needed due to
|
||||
https://github.com/Polymer/polymer/issues/2531 */
|
||||
.container section.changeInfo {
|
||||
.container .changeInfo {
|
||||
display: flex;
|
||||
background-color: var(--background-color-secondary);
|
||||
}
|
||||
section {
|
||||
background-color: var(--view-background-color);
|
||||
box-shadow: var(--elevation-level-1);
|
||||
}
|
||||
.changeId {
|
||||
color: var(--deemphasized-text-color);
|
||||
@@ -233,9 +235,9 @@ limitations under the License.
|
||||
margin-right: -5px;
|
||||
}
|
||||
paper-tabs {
|
||||
background-color: var(--table-header-background-color);
|
||||
border-top: 1px solid var(--border-color);
|
||||
height: calc(var(--line-height-normal) + 2*var(--spacing-m));
|
||||
background-color: var(--background-color-tertiary);
|
||||
margin-top: var(--spacing-m);
|
||||
height: calc(var(--line-height-h3) + var(--spacing-m));
|
||||
--paper-tabs-selection-bar-color: var(--link-color);
|
||||
}
|
||||
paper-tab {
|
||||
@@ -363,182 +365,184 @@ limitations under the License.
|
||||
class="container"
|
||||
on-show-checks-table="_handleShowTab"
|
||||
hidden$="{{_loading}}">
|
||||
<div class$="[[_computeHeaderClass(_editMode)]]">
|
||||
<div class="headerTitle">
|
||||
<div class="changeStatuses">
|
||||
<template is="dom-repeat" items="[[_changeStatuses]]" as="status">
|
||||
<gr-change-status
|
||||
max-width="100"
|
||||
status="[[status]]"></gr-change-status>
|
||||
</template>
|
||||
</div>
|
||||
<div class="statusText">
|
||||
<template
|
||||
is="dom-if"
|
||||
if="[[_computeShowCommitInfo(_changeStatus, _change.current_revision)]]">
|
||||
<span class="text"> as </span>
|
||||
<gr-commit-info
|
||||
change="[[_change]]"
|
||||
commit-info="[[_computeMergedCommitInfo(_change.current_revision, _change.revisions)]]"
|
||||
server-config="[[_serverConfig]]"></gr-commit-info>
|
||||
</template>
|
||||
</div>
|
||||
<gr-change-star
|
||||
id="changeStar"
|
||||
change="{{_change}}"
|
||||
on-toggle-star="_handleToggleStar"
|
||||
hidden$="[[!_loggedIn]]"></gr-change-star>
|
||||
|
||||
<a aria-label$="[[_computeChangePermalinkAriaLabel(_change._number)]]"
|
||||
href$="[[_computeChangeUrl(_change)]]">[[_change._number]]</a>
|
||||
<span class="changeNumberColon">: </span>
|
||||
<span class="headerSubject">[[_change.subject]]</span>
|
||||
<gr-copy-clipboard
|
||||
hide-input
|
||||
text="[[_computeCopyTextForTitle(_change)]]">
|
||||
</gr-copy-clipboard>
|
||||
</div><!-- end headerTitle -->
|
||||
<div class="commitActions" hidden$="[[!_loggedIn]]">
|
||||
<gr-change-actions
|
||||
id="actions"
|
||||
change="[[_change]]"
|
||||
disable-edit="[[disableEdit]]"
|
||||
has-parent="[[hasParent]]"
|
||||
actions="[[_change.actions]]"
|
||||
revision-actions="{{_currentRevisionActions}}"
|
||||
change-num="[[_changeNum]]"
|
||||
change-status="[[_change.status]]"
|
||||
commit-num="[[_commitInfo.commit]]"
|
||||
latest-patch-num="[[computeLatestPatchNum(_allPatchSets)]]"
|
||||
commit-message="[[_latestCommitMessage]]"
|
||||
edit-patchset-loaded="[[hasEditPatchsetLoaded(_patchRange.*)]]"
|
||||
edit-mode="[[_editMode]]"
|
||||
edit-based-on-current-patch-set="[[hasEditBasedOnCurrentPatchSet(_allPatchSets)]]"
|
||||
private-by-default="[[_projectConfig.private_by_default]]"
|
||||
on-reload-change="_handleReloadChange"
|
||||
on-edit-tap="_handleEditTap"
|
||||
on-stop-edit-tap="_handleStopEditTap"
|
||||
on-download-tap="_handleOpenDownloadDialog"></gr-change-actions>
|
||||
</div><!-- end commit actions -->
|
||||
</div><!-- end header -->
|
||||
<section class="changeInfo">
|
||||
<div class="changeInfo-column changeMetadata hideOnMobileOverlay">
|
||||
<gr-change-metadata
|
||||
id="metadata"
|
||||
change="{{_change}}"
|
||||
account="[[_account]]"
|
||||
revision="[[_selectedRevision]]"
|
||||
commit-info="[[_commitInfo]]"
|
||||
server-config="[[_serverConfig]]"
|
||||
parent-is-current="[[_parentIsCurrent]]"
|
||||
on-show-reply-dialog="_handleShowReplyDialog">
|
||||
</gr-change-metadata>
|
||||
</div>
|
||||
<div id="mainChangeInfo" class="changeInfo-column mainChangeInfo">
|
||||
<div id="commitAndRelated" class="hideOnMobileOverlay">
|
||||
<div class="commitContainer">
|
||||
<div>
|
||||
<gr-button
|
||||
id="replyBtn"
|
||||
class="reply"
|
||||
title="[[createTitle(Shortcut.OPEN_REPLY_DIALOG,
|
||||
ShortcutSection.ACTIONS)]]"
|
||||
hidden$="[[!_loggedIn]]"
|
||||
primary
|
||||
disabled="[[_replyDisabled]]"
|
||||
on-click="_handleReplyTap">[[_replyButtonLabel]]</gr-button>
|
||||
</div>
|
||||
<div
|
||||
id="commitMessage"
|
||||
class="commitMessage">
|
||||
<gr-editable-content id="commitMessageEditor"
|
||||
editing="[[_editingCommitMessage]]"
|
||||
content="{{_latestCommitMessage}}"
|
||||
storage-key="[[_computeCommitMessageKey(_change._number, _change.current_revision)]]"
|
||||
remove-zero-width-space
|
||||
collapsed$="[[_computeCommitMessageCollapsed(_commitCollapsed, _commitCollapsible)]]">
|
||||
<gr-linked-text pre
|
||||
content="[[_latestCommitMessage]]"
|
||||
config="[[_projectConfig.commentlinks]]"
|
||||
remove-zero-width-space></gr-linked-text>
|
||||
</gr-editable-content>
|
||||
<gr-button link
|
||||
class="editCommitMessage"
|
||||
on-click="_handleEditCommitMessage"
|
||||
hidden$="[[_hideEditCommitMessage]]">Edit</gr-button>
|
||||
<div class="changeId" hidden$="[[!_changeIdCommitMessageError]]">
|
||||
<hr>
|
||||
Change-Id:
|
||||
<span
|
||||
class$="[[_computeChangeIdClass(_changeIdCommitMessageError)]]"
|
||||
title$="[[_computeTitleAttributeWarning(_changeIdCommitMessageError)]]">
|
||||
[[_change.change_id]]
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="commitCollapseToggle"
|
||||
class="collapseToggleContainer"
|
||||
hidden$="[[!_commitCollapsible]]">
|
||||
<gr-button
|
||||
link
|
||||
id="commitCollapseToggleButton"
|
||||
class="collapseToggleButton"
|
||||
on-click="_toggleCommitCollapsed">
|
||||
[[_computeCollapseText(_commitCollapsed)]]
|
||||
</gr-button>
|
||||
</div>
|
||||
<gr-endpoint-decorator name="commit-container">
|
||||
<gr-endpoint-param name="change" value="[[_change]]">
|
||||
</gr-endpoint-param>
|
||||
<gr-endpoint-param name="revision" value="[[_selectedRevision]]">
|
||||
</gr-endpoint-param>
|
||||
</gr-endpoint-decorator>
|
||||
<section class="changeInfoSection">
|
||||
<div class$="[[_computeHeaderClass(_editMode)]]">
|
||||
<div class="headerTitle">
|
||||
<div class="changeStatuses">
|
||||
<template is="dom-repeat" items="[[_changeStatuses]]" as="status">
|
||||
<gr-change-status
|
||||
max-width="100"
|
||||
status="[[status]]"></gr-change-status>
|
||||
</template>
|
||||
</div>
|
||||
<div class="relatedChanges">
|
||||
<gr-related-changes-list id="relatedChanges"
|
||||
class$="[[_computeRelatedChangesClass(_relatedChangesCollapsed)]]"
|
||||
change="[[_change]]"
|
||||
mergeable="[[_mergeable]]"
|
||||
has-parent="{{hasParent}}"
|
||||
on-update="_updateRelatedChangeMaxHeight"
|
||||
patch-num="[[computeLatestPatchNum(_allPatchSets)]]"
|
||||
on-new-section-loaded="_computeShowRelatedToggle">
|
||||
</gr-related-changes-list>
|
||||
<div
|
||||
id="relatedChangesToggle"
|
||||
class="collapseToggleContainer">
|
||||
<gr-button
|
||||
link
|
||||
id="relatedChangesToggleButton"
|
||||
class="collapseToggleButton"
|
||||
on-click="_toggleRelatedChangesCollapsed">
|
||||
[[_computeCollapseText(_relatedChangesCollapsed)]]
|
||||
</gr-button>
|
||||
<div class="statusText">
|
||||
<template
|
||||
is="dom-if"
|
||||
if="[[_computeShowCommitInfo(_changeStatus, _change.current_revision)]]">
|
||||
<span class="text"> as </span>
|
||||
<gr-commit-info
|
||||
change="[[_change]]"
|
||||
commit-info="[[_computeMergedCommitInfo(_change.current_revision, _change.revisions)]]"
|
||||
server-config="[[_serverConfig]]"></gr-commit-info>
|
||||
</template>
|
||||
</div>
|
||||
<gr-change-star
|
||||
id="changeStar"
|
||||
change="{{_change}}"
|
||||
on-toggle-star="_handleToggleStar"
|
||||
hidden$="[[!_loggedIn]]"></gr-change-star>
|
||||
|
||||
<a aria-label$="[[_computeChangePermalinkAriaLabel(_change._number)]]"
|
||||
href$="[[_computeChangeUrl(_change)]]">[[_change._number]]</a>
|
||||
<span class="changeNumberColon">: </span>
|
||||
<span class="headerSubject">[[_change.subject]]</span>
|
||||
<gr-copy-clipboard
|
||||
hide-input
|
||||
text="[[_computeCopyTextForTitle(_change)]]">
|
||||
</gr-copy-clipboard>
|
||||
</div><!-- end headerTitle -->
|
||||
<div class="commitActions" hidden$="[[!_loggedIn]]">
|
||||
<gr-change-actions
|
||||
id="actions"
|
||||
change="[[_change]]"
|
||||
disable-edit="[[disableEdit]]"
|
||||
has-parent="[[hasParent]]"
|
||||
actions="[[_change.actions]]"
|
||||
revision-actions="{{_currentRevisionActions}}"
|
||||
change-num="[[_changeNum]]"
|
||||
change-status="[[_change.status]]"
|
||||
commit-num="[[_commitInfo.commit]]"
|
||||
latest-patch-num="[[computeLatestPatchNum(_allPatchSets)]]"
|
||||
commit-message="[[_latestCommitMessage]]"
|
||||
edit-patchset-loaded="[[hasEditPatchsetLoaded(_patchRange.*)]]"
|
||||
edit-mode="[[_editMode]]"
|
||||
edit-based-on-current-patch-set="[[hasEditBasedOnCurrentPatchSet(_allPatchSets)]]"
|
||||
private-by-default="[[_projectConfig.private_by_default]]"
|
||||
on-reload-change="_handleReloadChange"
|
||||
on-edit-tap="_handleEditTap"
|
||||
on-stop-edit-tap="_handleStopEditTap"
|
||||
on-download-tap="_handleOpenDownloadDialog"></gr-change-actions>
|
||||
</div><!-- end commit actions -->
|
||||
</div><!-- end header -->
|
||||
<div class="changeInfo">
|
||||
<div class="changeInfo-column changeMetadata hideOnMobileOverlay">
|
||||
<gr-change-metadata
|
||||
id="metadata"
|
||||
change="{{_change}}"
|
||||
account="[[_account]]"
|
||||
revision="[[_selectedRevision]]"
|
||||
commit-info="[[_commitInfo]]"
|
||||
server-config="[[_serverConfig]]"
|
||||
parent-is-current="[[_parentIsCurrent]]"
|
||||
on-show-reply-dialog="_handleShowReplyDialog">
|
||||
</gr-change-metadata>
|
||||
</div>
|
||||
<div id="mainChangeInfo" class="changeInfo-column mainChangeInfo">
|
||||
<div id="commitAndRelated" class="hideOnMobileOverlay">
|
||||
<div class="commitContainer">
|
||||
<div>
|
||||
<gr-button
|
||||
id="replyBtn"
|
||||
class="reply"
|
||||
title="[[createTitle(Shortcut.OPEN_REPLY_DIALOG,
|
||||
ShortcutSection.ACTIONS)]]"
|
||||
hidden$="[[!_loggedIn]]"
|
||||
primary
|
||||
disabled="[[_replyDisabled]]"
|
||||
on-click="_handleReplyTap">[[_replyButtonLabel]]</gr-button>
|
||||
</div>
|
||||
<div
|
||||
id="commitMessage"
|
||||
class="commitMessage">
|
||||
<gr-editable-content id="commitMessageEditor"
|
||||
editing="[[_editingCommitMessage]]"
|
||||
content="{{_latestCommitMessage}}"
|
||||
storage-key="[[_computeCommitMessageKey(_change._number, _change.current_revision)]]"
|
||||
remove-zero-width-space
|
||||
collapsed$="[[_computeCommitMessageCollapsed(_commitCollapsed, _commitCollapsible)]]">
|
||||
<gr-linked-text pre
|
||||
content="[[_latestCommitMessage]]"
|
||||
config="[[_projectConfig.commentlinks]]"
|
||||
remove-zero-width-space></gr-linked-text>
|
||||
</gr-editable-content>
|
||||
<gr-button link
|
||||
class="editCommitMessage"
|
||||
on-click="_handleEditCommitMessage"
|
||||
hidden$="[[_hideEditCommitMessage]]">Edit</gr-button>
|
||||
<div class="changeId" hidden$="[[!_changeIdCommitMessageError]]">
|
||||
<hr>
|
||||
Change-Id:
|
||||
<span
|
||||
class$="[[_computeChangeIdClass(_changeIdCommitMessageError)]]"
|
||||
title$="[[_computeTitleAttributeWarning(_changeIdCommitMessageError)]]">
|
||||
[[_change.change_id]]
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="commitCollapseToggle"
|
||||
class="collapseToggleContainer"
|
||||
hidden$="[[!_commitCollapsible]]">
|
||||
<gr-button
|
||||
link
|
||||
id="commitCollapseToggleButton"
|
||||
class="collapseToggleButton"
|
||||
on-click="_toggleCommitCollapsed">
|
||||
[[_computeCollapseText(_commitCollapsed)]]
|
||||
</gr-button>
|
||||
</div>
|
||||
<gr-endpoint-decorator name="commit-container">
|
||||
<gr-endpoint-param name="change" value="[[_change]]">
|
||||
</gr-endpoint-param>
|
||||
<gr-endpoint-param name="revision" value="[[_selectedRevision]]">
|
||||
</gr-endpoint-param>
|
||||
</gr-endpoint-decorator>
|
||||
</div>
|
||||
<div class="relatedChanges">
|
||||
<gr-related-changes-list id="relatedChanges"
|
||||
class$="[[_computeRelatedChangesClass(_relatedChangesCollapsed)]]"
|
||||
change="[[_change]]"
|
||||
mergeable="[[_mergeable]]"
|
||||
has-parent="{{hasParent}}"
|
||||
on-update="_updateRelatedChangeMaxHeight"
|
||||
patch-num="[[computeLatestPatchNum(_allPatchSets)]]"
|
||||
on-new-section-loaded="_computeShowRelatedToggle">
|
||||
</gr-related-changes-list>
|
||||
<div
|
||||
id="relatedChangesToggle"
|
||||
class="collapseToggleContainer">
|
||||
<gr-button
|
||||
link
|
||||
id="relatedChangesToggleButton"
|
||||
class="collapseToggleButton"
|
||||
on-click="_toggleRelatedChangesCollapsed">
|
||||
[[_computeCollapseText(_relatedChangesCollapsed)]]
|
||||
</gr-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="patchInfo">
|
||||
<template is="dom-if" if="[[_showPrimaryTabs]]">
|
||||
<paper-tabs id="primaryTabs" on-selected-changed="_handleFileTabChange">
|
||||
<paper-tab>Files</paper-tab>
|
||||
<template is="dom-repeat" items="[[_dynamicTabHeaderEndpoints]]"
|
||||
as="tabHeader">
|
||||
<paper-tab>
|
||||
<gr-endpoint-decorator name$="[[tabHeader]]">
|
||||
<gr-endpoint-param name="change" value="[[_change]]">
|
||||
</gr-endpoint-param>
|
||||
<gr-endpoint-param name="revision" value="[[_selectedRevision]]">
|
||||
</gr-endpoint-param>
|
||||
</gr-endpoint-decorator>
|
||||
</paper-tab>
|
||||
</template>
|
||||
</paper-tabs>
|
||||
</template>
|
||||
<template is="dom-if" if="[[_showPrimaryTabs]]">
|
||||
<paper-tabs id="primaryTabs" on-selected-changed="_handleFileTabChange">
|
||||
<paper-tab>Files</paper-tab>
|
||||
<template is="dom-repeat" items="[[_dynamicTabHeaderEndpoints]]"
|
||||
as="tabHeader">
|
||||
<paper-tab>
|
||||
<gr-endpoint-decorator name$="[[tabHeader]]">
|
||||
<gr-endpoint-param name="change" value="[[_change]]">
|
||||
</gr-endpoint-param>
|
||||
<gr-endpoint-param name="revision" value="[[_selectedRevision]]">
|
||||
</gr-endpoint-param>
|
||||
</gr-endpoint-decorator>
|
||||
</paper-tab>
|
||||
</template>
|
||||
</paper-tabs>
|
||||
</template>
|
||||
|
||||
<section class="patchInfo">
|
||||
<div hidden$="[[!_showFileTabContent]]">
|
||||
<gr-file-list-header
|
||||
id="fileListHeader"
|
||||
@@ -606,6 +610,7 @@ limitations under the License.
|
||||
<gr-endpoint-param name="revision" value="[[_selectedRevision]]">
|
||||
</gr-endpoint-param>
|
||||
</gr-endpoint-decorator>
|
||||
|
||||
<paper-tabs
|
||||
id="commentTabs"
|
||||
on-selected-changed="_handleCommentTabChange">
|
||||
@@ -619,49 +624,53 @@ limitations under the License.
|
||||
</paper-tab>
|
||||
<paper-tab class="robotComments">Findings</paper-tab>
|
||||
</paper-tabs>
|
||||
<template is="dom-if" if="[[_isSelectedView(_currentView,
|
||||
_commentTabs.CHANGE_LOG)]]">
|
||||
<gr-messages-list
|
||||
class="hideOnMobileOverlay"
|
||||
change-num="[[_changeNum]]"
|
||||
labels="[[_change.labels]]"
|
||||
messages="[[_change.messages]]"
|
||||
reviewer-updates="[[_change.reviewer_updates]]"
|
||||
change-comments="[[_changeComments]]"
|
||||
project-name="[[_change.project]]"
|
||||
show-reply-buttons="[[_loggedIn]]"
|
||||
on-message-anchor-tap="_handleMessageAnchorTap"
|
||||
on-reply="_handleMessageReply"></gr-messages-list>
|
||||
</template>
|
||||
<template is="dom-if" if="[[_isSelectedView(_currentView,
|
||||
_commentTabs.COMMENT_THREADS)]]">
|
||||
<gr-thread-list
|
||||
threads="[[_commentThreads]]"
|
||||
change="[[_change]]"
|
||||
change-num="[[_changeNum]]"
|
||||
comment-tab="[[_currentView]]"
|
||||
logged-in="[[_loggedIn]]"
|
||||
only-show-robot-comments-with-human-reply
|
||||
on-thread-list-modified="_handleReloadDiffComments"></gr-thread-list>
|
||||
</template>
|
||||
<template is="dom-if" if="[[_isSelectedView(_currentView,
|
||||
_commentTabs.ROBOT_COMMENTS)]]">
|
||||
<gr-dropdown-list
|
||||
class="patch-set-dropdown"
|
||||
items="[[_robotCommentsPatchSetDropdownItems]]"
|
||||
on-value-change="_handleRobotCommentPatchSetChanged"
|
||||
value="[[_currentRobotCommentsPatchSet]]">
|
||||
</gr-dropdown-list>
|
||||
<gr-thread-list
|
||||
threads="[[_robotCommentThreads]]"
|
||||
change="[[_change]]"
|
||||
change-num="[[_changeNum]]"
|
||||
logged-in="[[_loggedIn]]"
|
||||
comment-tab="[[_currentView]]"
|
||||
hide-toggle-buttons
|
||||
on-thread-list-modified="_handleReloadDiffComments"></gr-thread-list>
|
||||
</template>
|
||||
|
||||
<section class="changeLog">
|
||||
<template is="dom-if" if="[[_isSelectedView(_currentView,
|
||||
_commentTabs.CHANGE_LOG)]]">
|
||||
<gr-messages-list
|
||||
class="hideOnMobileOverlay"
|
||||
change-num="[[_changeNum]]"
|
||||
labels="[[_change.labels]]"
|
||||
messages="[[_change.messages]]"
|
||||
reviewer-updates="[[_change.reviewer_updates]]"
|
||||
change-comments="[[_changeComments]]"
|
||||
project-name="[[_change.project]]"
|
||||
show-reply-buttons="[[_loggedIn]]"
|
||||
on-message-anchor-tap="_handleMessageAnchorTap"
|
||||
on-reply="_handleMessageReply"></gr-messages-list>
|
||||
</template>
|
||||
<template is="dom-if" if="[[_isSelectedView(_currentView,
|
||||
_commentTabs.COMMENT_THREADS)]]">
|
||||
<gr-thread-list
|
||||
threads="[[_commentThreads]]"
|
||||
change="[[_change]]"
|
||||
change-num="[[_changeNum]]"
|
||||
comment-tab="[[_currentView]]"
|
||||
logged-in="[[_loggedIn]]"
|
||||
only-show-robot-comments-with-human-reply
|
||||
on-thread-list-modified="_handleReloadDiffComments"></gr-thread-list>
|
||||
</template>
|
||||
<template is="dom-if" if="[[_isSelectedView(_currentView,
|
||||
_commentTabs.ROBOT_COMMENTS)]]">
|
||||
<gr-dropdown-list
|
||||
class="patch-set-dropdown"
|
||||
items="[[_robotCommentsPatchSetDropdownItems]]"
|
||||
on-value-change="_handleRobotCommentPatchSetChanged"
|
||||
value="[[_currentRobotCommentsPatchSet]]">
|
||||
</gr-dropdown-list>
|
||||
<gr-thread-list
|
||||
threads="[[_robotCommentThreads]]"
|
||||
change="[[_change]]"
|
||||
change-num="[[_changeNum]]"
|
||||
logged-in="[[_loggedIn]]"
|
||||
comment-tab="[[_currentView]]"
|
||||
hide-toggle-buttons
|
||||
on-thread-list-modified="_handleReloadDiffComments"></gr-thread-list>
|
||||
</template>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<gr-apply-fix-dialog
|
||||
id="applyFixDialog"
|
||||
prefs="[[_diffPrefs]]"
|
||||
|
||||
@@ -46,7 +46,6 @@ limitations under the License.
|
||||
}
|
||||
.patchInfo-header {
|
||||
align-items: center;
|
||||
background-color: var(--table-header-background-color);
|
||||
border-top: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
padding: var(--spacing-s) var(--spacing-l);
|
||||
|
||||
@@ -67,6 +67,7 @@ limitations under the License.
|
||||
visibility: hidden;
|
||||
}
|
||||
.header-row {
|
||||
background-color: var(--background-color-secondary);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
.controlRow {
|
||||
|
||||
@@ -33,12 +33,10 @@ limitations under the License.
|
||||
}
|
||||
.header {
|
||||
align-items: center;
|
||||
background-color: var(--table-header-background-color);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
border-top: 1px solid var(--border-color);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
min-height: 3.2em;
|
||||
padding: var(--spacing-s) var(--spacing-l);
|
||||
}
|
||||
#messageControlsContainer {
|
||||
@@ -53,6 +51,7 @@ limitations under the License.
|
||||
}
|
||||
#messageControlsContainer {
|
||||
align-items: center;
|
||||
background-color: var(--background-color-secondary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
height: 2.25em;
|
||||
|
||||
@@ -51,7 +51,7 @@ limitations under the License.
|
||||
<template>
|
||||
<style include="shared-styles">
|
||||
:host {
|
||||
background-color: var(--view-background-color);
|
||||
background-color: var(--background-color-tertiary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
|
||||
@@ -17,34 +17,13 @@ limitations under the License.
|
||||
<dom-module id="gr-change-list-styles">
|
||||
<template>
|
||||
<style>
|
||||
gr-change-list-item,
|
||||
tr {
|
||||
gr-change-list-item:not(:first-of-type) {
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
gr-change-list-item[selected],
|
||||
gr-change-list-item:focus {
|
||||
background-color: var(--selection-background-color);
|
||||
}
|
||||
/* The border-collapse attribute only works on sibling elements, not
|
||||
cousin elements. So, if we want the table to have a sticky header and
|
||||
have borders between each row, we must disable the border-top on the
|
||||
elements directly below a .topHeader. */
|
||||
.topHeader ~ gr-change-list-item:first-of-type,
|
||||
.topHeader + .groupHeader {
|
||||
border-top: none;
|
||||
}
|
||||
/* Needed to show a border on top of the first gr-change-list-item when a
|
||||
groupHeader exists. Cannot use + selector because of dom-repeats
|
||||
existing in the DOM tree. */
|
||||
.topHeader ~ .groupHeader ~ gr-change-list-item {
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
tbody {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
tr.topHeader {
|
||||
border: none;
|
||||
}
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
@@ -59,16 +38,12 @@ limitations under the License.
|
||||
th.label {
|
||||
border-left: none;
|
||||
}
|
||||
.topHeader,
|
||||
.groupHeader {
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
.topHeader th {
|
||||
background-color: var(--table-header-background-color);
|
||||
height: 3rem;
|
||||
background-color: var(--background-color-primary);
|
||||
padding: var(--spacing-s) 0;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: -1px; /* Offset for top borders */
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
/* :after pseudoelements are used here because borders on sticky table
|
||||
@@ -86,7 +61,14 @@ limitations under the License.
|
||||
top: 0;
|
||||
}
|
||||
.groupHeader {
|
||||
background-color: var(--table-subheader-background-color);
|
||||
background-color: transparent;
|
||||
font-size: var(--font-size-h3);
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: var(--line-height-h3);
|
||||
}
|
||||
.groupContent {
|
||||
background-color: var(--background-color-primary);
|
||||
box-shadow: var(--elevation-level-1);
|
||||
}
|
||||
.groupHeader a {
|
||||
color: var(--primary-text-color);
|
||||
@@ -98,6 +80,9 @@ limitations under the License.
|
||||
.cell {
|
||||
padding: var(--spacing-s) 0;
|
||||
}
|
||||
.groupHeader .cell {
|
||||
padding-top: var(--spacing-l);
|
||||
}
|
||||
.star {
|
||||
padding: 0;
|
||||
}
|
||||
@@ -196,7 +181,7 @@ limitations under the License.
|
||||
}
|
||||
.groupHeader .cell,
|
||||
.noChanges .cell {
|
||||
padding: 0 var(--spacing-m);
|
||||
padding-left: var(--spacing-m);
|
||||
}
|
||||
.subject {
|
||||
margin-bottom: var(--spacing-xs);
|
||||
|
||||
@@ -140,9 +140,16 @@ limitations under the License.
|
||||
--paper-toggle-button-checked-button-color: var(--link-color);
|
||||
}
|
||||
paper-tabs {
|
||||
font-size: var(--font-size-h3);
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: var(--line-height-h3);
|
||||
--paper-font-common-base: {
|
||||
font-family: var(--font-family);
|
||||
-webkit-font-smoothing: initial;
|
||||
};
|
||||
--paper-tab-content-focused: {
|
||||
/* paper-tabs uses 700 here, which can look awkward */
|
||||
font-weight: var(--font-weight-normal);
|
||||
font-weight: var(--font-weight-bold);
|
||||
};
|
||||
--paper-tab-content-unselected: {
|
||||
/* paper-tabs uses 0.8 here, but we want to control the color directly */
|
||||
|
||||
@@ -109,8 +109,8 @@ html {
|
||||
--spacing-xxl: 24px;
|
||||
|
||||
/* header and footer */
|
||||
--footer-background-color: var(--background-color-tertiary);
|
||||
--footer-border-top: 1px solid var(--border-color);
|
||||
--footer-background-color: transparent;
|
||||
--footer-border-top: none;
|
||||
--header-background-color: var(--background-color-tertiary);
|
||||
--header-border-bottom: 1px solid var(--border-color);
|
||||
--header-border-image: '';
|
||||
|
||||
Reference in New Issue
Block a user