opendev/gerrit
Code Issues Proposed changes

Merge "Redesign of tab header rows and change list sections"

Browse Source
This commit is contained in:
Ben Rohlfs
2020-02-18 16:38:43 +00:00
committed by Gerrit Code Review
parent ed6b1a849e da1623871e
commit 20e7b86af5
12 changed files with 326 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html
View File

@@ -37,7 +37,7 @@ limitations under the License.
<style include="shared-styles"> <style include="shared-styles">
:host { :host {
display: table-row; display: table-row;
color: var(--reviewed-text-color); color: var(--primary-text-color);
} }
:host(:focus) { :host(:focus) {
outline: none; outline: none;

128
polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.html
View File

@@ -53,71 +53,77 @@ limitations under the License.
} }
</style> </style>
<table id="changeList"> <table id="changeList">
<tr class="topHeader"> <thead>
<th class="leftPadding"></th> <tr class="topHeader">
<th class="star" hidden$="[[!showStar]]" hidden></th> <th class="leftPadding"></th>
<th class="number" hidden$="[[!showNumber]]" hidden>#</th> <th class="star" hidden$="[[!showStar]]" hidden></th>
<template is="dom-repeat" items="[[changeTableColumns]]" as="item"> <th class="number" hidden$="[[!showNumber]]" hidden>#</th>
<th class$="[[_lowerCase(item)]]" <template is="dom-repeat" items="[[changeTableColumns]]" as="item">
hidden$="[[isColumnHidden(item, visibleChangeTableColumns)]]"> <th class$="[[_lowerCase(item)]]"
[[item]] hidden$="[[isColumnHidden(item, visibleChangeTableColumns)]]">
</th> [[item]]
</template> </th>
<template is="dom-repeat" items="[[labelNames]]" as="labelName"> </template>
<th class="label" title$="[[labelName]]"> <template is="dom-repeat" items="[[labelNames]]" as="labelName">
[[_computeLabelShortcut(labelName)]] <th class="label" title$="[[labelName]]">
</th> [[_computeLabelShortcut(labelName)]]
</template> </th>
<template is="dom-repeat" items="[[_dynamicHeaderEndpoints]]" </template>
as="pluginHeader"> <template is="dom-repeat" items="[[_dynamicHeaderEndpoints]]"
<th class="endpoint"> as="pluginHeader">
<gr-endpoint-decorator name$="[[pluginHeader]]"> <th class="endpoint">
</gr-endpoint-decorator> <gr-endpoint-decorator name$="[[pluginHeader]]">
</th> </gr-endpoint-decorator>
</template> </th>
</tr> </template>
</tr>
</thead>
<template is="dom-repeat" items="[[sections]]" as="changeSection" <template is="dom-repeat" items="[[sections]]" as="changeSection"
index-as="sectionIndex"> index-as="sectionIndex">
<template is="dom-if" if="[[changeSection.name]]"> <template is="dom-if" if="[[changeSection.name]]">
<tr class="groupHeader"> <tbody>
<td class="leftPadding"></td> <tr class="groupHeader">
<td class="star" hidden$="[[!showStar]]" hidden></td> <td class="leftPadding"></td>
<td class="cell" <td class="star" hidden$="[[!showStar]]" hidden></td>
colspan$="[[_computeColspan(changeTableColumns, labelNames)]]"> <td class="cell"
<a href$="[[_sectionHref(changeSection.query)]]" class="section-title"> colspan$="[[_computeColspan(changeTableColumns, labelNames)]]">
<span class="section-name">[[changeSection.name]]</span> <a href$="[[_sectionHref(changeSection.query)]]" class="section-title">
<span class="section-count-label">[[changeSection.countLabel]]</span> <span class="section-name">[[changeSection.name]]</span>
</a> <span class="section-count-label">[[changeSection.countLabel]]</span>
</td> </a>
</tr> </td>
</template> </tr>
<template is="dom-if" if="[[_isEmpty(changeSection)]]"> </tbody>
<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> </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> </template>
</table> </table>
<gr-cursor-manager <gr-cursor-manager

1
polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view.html
View File

@@ -34,7 +34,6 @@ limitations under the License.
<template> <template>
<style include="shared-styles"> <style include="shared-styles">
:host { :host {
background-color: var(--view-background-color);
display: block; display: block;
} }
.loading { .loading {

10
polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions.html
View File

@@ -68,17 +68,7 @@ limitations under the License.
} }
iron-icon { iron-icon {
color: inherit; color: inherit;
height: 1.2rem;
margin-right: var(--spacing-xs); 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 { #moreActions iron-icon {
margin: 0; margin: 0;

447
polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
View File

@@ -60,7 +60,7 @@ limitations under the License.
<template> <template>
<style include="shared-styles"> <style include="shared-styles">
.container:not(.loading) { .container:not(.loading) {
background-color: var(--view-background-color); background-color: var(--background-color-tertiary);
} }
.container.loading { .container.loading {
color: var(--deemphasized-text-color); color: var(--deemphasized-text-color);
@@ -68,7 +68,7 @@ limitations under the License.
} }
.header { .header {
align-items: center; align-items: center;
background-color: var(--table-header-background-color); background-color: var(--background-color-primary);
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
display: flex; display: flex;
padding: var(--spacing-s) var(--spacing-l); padding: var(--spacing-s) var(--spacing-l);
@@ -112,13 +112,15 @@ limitations under the License.
.changeStatus { .changeStatus {
text-transform: capitalize; text-transform: capitalize;
} }
.changeInfo {
background-color: var(--table-header-background-color);
}
/* Strong specificity here is needed due to /* Strong specificity here is needed due to
https://github.com/Polymer/polymer/issues/2531 */ https://github.com/Polymer/polymer/issues/2531 */
.container section.changeInfo { .container .changeInfo {
display: flex; display: flex;
background-color: var(--background-color-secondary);
}
section {
background-color: var(--view-background-color);
box-shadow: var(--elevation-level-1);
} }
.changeId { .changeId {
color: var(--deemphasized-text-color); color: var(--deemphasized-text-color);
@@ -233,9 +235,9 @@ limitations under the License.
margin-right: -5px; margin-right: -5px;
} }
paper-tabs { paper-tabs {
background-color: var(--table-header-background-color); background-color: var(--background-color-tertiary);
border-top: 1px solid var(--border-color); margin-top: var(--spacing-m);
height: calc(var(--line-height-normal) + 2*var(--spacing-m)); height: calc(var(--line-height-h3) + var(--spacing-m));
--paper-tabs-selection-bar-color: var(--link-color); --paper-tabs-selection-bar-color: var(--link-color);
} }
paper-tab { paper-tab {
@@ -363,182 +365,184 @@ limitations under the License.
class="container" class="container"
on-show-checks-table="_handleShowTab" on-show-checks-table="_handleShowTab"
hidden$="{{_loading}}"> hidden$="{{_loading}}">
<div class$="[[_computeHeaderClass(_editMode)]]"> <section class="changeInfoSection">
<div class="headerTitle"> <div class$="[[_computeHeaderClass(_editMode)]]">
<div class="changeStatuses"> <div class="headerTitle">
<template is="dom-repeat" items="[[_changeStatuses]]" as="status"> <div class="changeStatuses">
<gr-change-status <template is="dom-repeat" items="[[_changeStatuses]]" as="status">
max-width="100" <gr-change-status
status="[[status]]"></gr-change-status> max-width="100"
</template> status="[[status]]"></gr-change-status>
</div> </template>
<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">:&nbsp;</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>
</div> </div>
<div class="relatedChanges"> <div class="statusText">
<gr-related-changes-list id="relatedChanges" <template
class$="[[_computeRelatedChangesClass(_relatedChangesCollapsed)]]" is="dom-if"
change="[[_change]]" if="[[_computeShowCommitInfo(_changeStatus, _change.current_revision)]]">
mergeable="[[_mergeable]]" <span class="text"> as </span>
has-parent="{{hasParent}}" <gr-commit-info
on-update="_updateRelatedChangeMaxHeight" change="[[_change]]"
patch-num="[[computeLatestPatchNum(_allPatchSets)]]" commit-info="[[_computeMergedCommitInfo(_change.current_revision, _change.revisions)]]"
on-new-section-loaded="_computeShowRelatedToggle"> server-config="[[_serverConfig]]"></gr-commit-info>
</gr-related-changes-list> </template>
<div </div>
id="relatedChangesToggle" <gr-change-star
class="collapseToggleContainer"> id="changeStar"
<gr-button change="{{_change}}"
link on-toggle-star="_handleToggleStar"
id="relatedChangesToggleButton" hidden$="[[!_loggedIn]]"></gr-change-star>
class="collapseToggleButton"
on-click="_toggleRelatedChangesCollapsed"> <a aria-label$="[[_computeChangePermalinkAriaLabel(_change._number)]]"
[[_computeCollapseText(_relatedChangesCollapsed)]] href$="[[_computeChangeUrl(_change)]]">[[_change._number]]</a>
</gr-button> <span class="changeNumberColon">:&nbsp;</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>
</div> </div>
</div> </div>
</section> </section>
<section class="patchInfo"> <template is="dom-if" if="[[_showPrimaryTabs]]">
<template is="dom-if" if="[[_showPrimaryTabs]]"> <paper-tabs id="primaryTabs" on-selected-changed="_handleFileTabChange">
<paper-tabs id="primaryTabs" on-selected-changed="_handleFileTabChange"> <paper-tab>Files</paper-tab>
<paper-tab>Files</paper-tab> <template is="dom-repeat" items="[[_dynamicTabHeaderEndpoints]]"
<template is="dom-repeat" items="[[_dynamicTabHeaderEndpoints]]" as="tabHeader">
as="tabHeader"> <paper-tab>
<paper-tab> <gr-endpoint-decorator name$="[[tabHeader]]">
<gr-endpoint-decorator name$="[[tabHeader]]"> <gr-endpoint-param name="change" value="[[_change]]">
<gr-endpoint-param name="change" value="[[_change]]"> </gr-endpoint-param>
</gr-endpoint-param> <gr-endpoint-param name="revision" value="[[_selectedRevision]]">
<gr-endpoint-param name="revision" value="[[_selectedRevision]]"> </gr-endpoint-param>
</gr-endpoint-param> </gr-endpoint-decorator>
</gr-endpoint-decorator> </paper-tab>
</paper-tab> </template>
</template> </paper-tabs>
</paper-tabs> </template>
</template>
<section class="patchInfo">
<div hidden$="[[!_showFileTabContent]]"> <div hidden$="[[!_showFileTabContent]]">
<gr-file-list-header <gr-file-list-header
id="fileListHeader" id="fileListHeader"
@@ -606,6 +610,7 @@ limitations under the License.
<gr-endpoint-param name="revision" value="[[_selectedRevision]]"> <gr-endpoint-param name="revision" value="[[_selectedRevision]]">
</gr-endpoint-param> </gr-endpoint-param>
</gr-endpoint-decorator> </gr-endpoint-decorator>
<paper-tabs <paper-tabs
id="commentTabs" id="commentTabs"
on-selected-changed="_handleCommentTabChange"> on-selected-changed="_handleCommentTabChange">
@@ -619,49 +624,53 @@ limitations under the License.
</paper-tab> </paper-tab>
<paper-tab class="robotComments">Findings</paper-tab> <paper-tab class="robotComments">Findings</paper-tab>
</paper-tabs> </paper-tabs>
<template is="dom-if" if="[[_isSelectedView(_currentView,
_commentTabs.CHANGE_LOG)]]"> <section class="changeLog">
<gr-messages-list <template is="dom-if" if="[[_isSelectedView(_currentView,
class="hideOnMobileOverlay" _commentTabs.CHANGE_LOG)]]">
change-num="[[_changeNum]]" <gr-messages-list
labels="[[_change.labels]]" class="hideOnMobileOverlay"
messages="[[_change.messages]]" change-num="[[_changeNum]]"
reviewer-updates="[[_change.reviewer_updates]]" labels="[[_change.labels]]"
change-comments="[[_changeComments]]" messages="[[_change.messages]]"
project-name="[[_change.project]]" reviewer-updates="[[_change.reviewer_updates]]"
show-reply-buttons="[[_loggedIn]]" change-comments="[[_changeComments]]"
on-message-anchor-tap="_handleMessageAnchorTap" project-name="[[_change.project]]"
on-reply="_handleMessageReply"></gr-messages-list> show-reply-buttons="[[_loggedIn]]"
</template> on-message-anchor-tap="_handleMessageAnchorTap"
<template is="dom-if" if="[[_isSelectedView(_currentView, on-reply="_handleMessageReply"></gr-messages-list>
_commentTabs.COMMENT_THREADS)]]"> </template>
<gr-thread-list <template is="dom-if" if="[[_isSelectedView(_currentView,
threads="[[_commentThreads]]" _commentTabs.COMMENT_THREADS)]]">
change="[[_change]]" <gr-thread-list
change-num="[[_changeNum]]" threads="[[_commentThreads]]"
comment-tab="[[_currentView]]" change="[[_change]]"
logged-in="[[_loggedIn]]" change-num="[[_changeNum]]"
only-show-robot-comments-with-human-reply comment-tab="[[_currentView]]"
on-thread-list-modified="_handleReloadDiffComments"></gr-thread-list> logged-in="[[_loggedIn]]"
</template> only-show-robot-comments-with-human-reply
<template is="dom-if" if="[[_isSelectedView(_currentView, on-thread-list-modified="_handleReloadDiffComments"></gr-thread-list>
_commentTabs.ROBOT_COMMENTS)]]"> </template>
<gr-dropdown-list <template is="dom-if" if="[[_isSelectedView(_currentView,
class="patch-set-dropdown" _commentTabs.ROBOT_COMMENTS)]]">
items="[[_robotCommentsPatchSetDropdownItems]]" <gr-dropdown-list
on-value-change="_handleRobotCommentPatchSetChanged" class="patch-set-dropdown"
value="[[_currentRobotCommentsPatchSet]]"> items="[[_robotCommentsPatchSetDropdownItems]]"
</gr-dropdown-list> on-value-change="_handleRobotCommentPatchSetChanged"
<gr-thread-list value="[[_currentRobotCommentsPatchSet]]">
threads="[[_robotCommentThreads]]" </gr-dropdown-list>
change="[[_change]]" <gr-thread-list
change-num="[[_changeNum]]" threads="[[_robotCommentThreads]]"
logged-in="[[_loggedIn]]" change="[[_change]]"
comment-tab="[[_currentView]]" change-num="[[_changeNum]]"
hide-toggle-buttons logged-in="[[_loggedIn]]"
on-thread-list-modified="_handleReloadDiffComments"></gr-thread-list> comment-tab="[[_currentView]]"
</template> hide-toggle-buttons
on-thread-list-modified="_handleReloadDiffComments"></gr-thread-list>
</template>
</section>
</div> </div>
<gr-apply-fix-dialog <gr-apply-fix-dialog
id="applyFixDialog" id="applyFixDialog"
prefs="[[_diffPrefs]]" prefs="[[_diffPrefs]]"

1
polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.html
View File

@@ -46,7 +46,6 @@ limitations under the License.
} }
.patchInfo-header { .patchInfo-header {
align-items: center; align-items: center;
background-color: var(--table-header-background-color);
border-top: 1px solid var(--border-color); border-top: 1px solid var(--border-color);
display: flex; display: flex;
padding: var(--spacing-s) var(--spacing-l); padding: var(--spacing-s) var(--spacing-l);

1
polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
View File

@@ -67,6 +67,7 @@ limitations under the License.
visibility: hidden; visibility: hidden;
} }
.header-row { .header-row {
background-color: var(--background-color-secondary);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
} }
.controlRow { .controlRow {

5
polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.html
View File

@@ -33,12 +33,10 @@ limitations under the License.
} }
.header { .header {
align-items: center; 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-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
min-height: 3.2em;
padding: var(--spacing-s) var(--spacing-l); padding: var(--spacing-s) var(--spacing-l);
} }
#messageControlsContainer { #messageControlsContainer {
@@ -53,6 +51,7 @@ limitations under the License.
} }
#messageControlsContainer { #messageControlsContainer {
align-items: center; align-items: center;
background-color: var(--background-color-secondary);
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
display: flex; display: flex;
height: 2.25em; height: 2.25em;

2
polygerrit-ui/app/elements/gr-app-element.html
View File

@@ -51,7 +51,7 @@ limitations under the License.
<template> <template>
<style include="shared-styles"> <style include="shared-styles">
:host { :host {
background-color: var(--view-background-color); background-color: var(--background-color-tertiary);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100%; min-height: 100%;

47
polygerrit-ui/app/styles/gr-change-list-styles.html
View File

@@ -17,34 +17,13 @@ limitations under the License.
<dom-module id="gr-change-list-styles"> <dom-module id="gr-change-list-styles">
<template> <template>
<style> <style>
gr-change-list-item, gr-change-list-item:not(:first-of-type) {
tr {
border-top: 1px solid var(--border-color); border-top: 1px solid var(--border-color);
} }
gr-change-list-item[selected], gr-change-list-item[selected],
gr-change-list-item:focus { gr-change-list-item:focus {
background-color: var(--selection-background-color); 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 { th {
text-align: left; text-align: left;
} }
@@ -59,16 +38,12 @@ limitations under the License.
th.label { th.label {
border-left: none; border-left: none;
} }
.topHeader,
.groupHeader {
font-weight: var(--font-weight-bold);
}
.topHeader th { .topHeader th {
background-color: var(--table-header-background-color); background-color: var(--background-color-primary);
height: 3rem; padding: var(--spacing-s) 0;
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
top: -1px; /* Offset for top borders */ top: 0;
z-index: 1; z-index: 1;
} }
/* :after pseudoelements are used here because borders on sticky table /* :after pseudoelements are used here because borders on sticky table
@@ -86,7 +61,14 @@ limitations under the License.
top: 0; top: 0;
} }
.groupHeader { .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 { .groupHeader a {
color: var(--primary-text-color); color: var(--primary-text-color);
@@ -98,6 +80,9 @@ limitations under the License.
.cell { .cell {
padding: var(--spacing-s) 0; padding: var(--spacing-s) 0;
} }
.groupHeader .cell {
padding-top: var(--spacing-l);
}
.star { .star {
padding: 0; padding: 0;
} }
@@ -196,7 +181,7 @@ limitations under the License.
} }
.groupHeader .cell, .groupHeader .cell,
.noChanges .cell { .noChanges .cell {
padding: 0 var(--spacing-m); padding-left: var(--spacing-m);
} }
.subject { .subject {
margin-bottom: var(--spacing-xs); margin-bottom: var(--spacing-xs);

9
polygerrit-ui/app/styles/shared-styles.html
View File

@@ -140,9 +140,16 @@ limitations under the License.
--paper-toggle-button-checked-button-color: var(--link-color); --paper-toggle-button-checked-button-color: var(--link-color);
} }
paper-tabs { 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-tab-content-focused: {
/* paper-tabs uses 700 here, which can look awkward */ /* 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-tab-content-unselected: {
/* paper-tabs uses 0.8 here, but we want to control the color directly */ /* paper-tabs uses 0.8 here, but we want to control the color directly */

4
polygerrit-ui/app/styles/themes/app-theme.html
View File

@@ -109,8 +109,8 @@ html {
--spacing-xxl: 24px; --spacing-xxl: 24px;
/* header and footer */ /* header and footer */
--footer-background-color: var(--background-color-tertiary); --footer-background-color: transparent;
--footer-border-top: 1px solid var(--border-color); --footer-border-top: none;
--header-background-color: var(--background-color-tertiary); --header-background-color: var(--background-color-tertiary);
--header-border-bottom: 1px solid var(--border-color); --header-border-bottom: 1px solid var(--border-color);
--header-border-image: ''; --header-border-image: '';