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;

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

@@ -53,6 +53,7 @@ limitations under the License.
} }
</style> </style>
<table id="changeList"> <table id="changeList">
<thead>
<tr class="topHeader"> <tr class="topHeader">
<th class="leftPadding"></th> <th class="leftPadding"></th>
<th class="star" hidden$="[[!showStar]]" hidden></th> <th class="star" hidden$="[[!showStar]]" hidden></th>
@@ -76,9 +77,11 @@ limitations under the License.
</th> </th>
</template> </template>
</tr> </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]]">
<tbody>
<tr class="groupHeader"> <tr class="groupHeader">
<td class="leftPadding"></td> <td class="leftPadding"></td>
<td class="star" hidden$="[[!showStar]]" hidden></td> <td class="star" hidden$="[[!showStar]]" hidden></td>
@@ -90,7 +93,9 @@ limitations under the License.
</a> </a>
</td> </td>
</tr> </tr>
</tbody>
</template> </template>
<tbody class="groupContent">
<template is="dom-if" if="[[_isEmpty(changeSection)]]"> <template is="dom-if" if="[[_isEmpty(changeSection)]]">
<tr class="noChanges"> <tr class="noChanges">
<td class="leftPadding"></td> <td class="leftPadding"></td>
@@ -118,6 +123,7 @@ limitations under the License.
tabindex="0" tabindex="0"
label-names="[[labelNames]]"></gr-change-list-item> label-names="[[labelNames]]"></gr-change-list-item>
</template> </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;

31
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,6 +365,7 @@ limitations under the License.
class="container" class="container"
on-show-checks-table="_handleShowTab" on-show-checks-table="_handleShowTab"
hidden$="{{_loading}}"> hidden$="{{_loading}}">
<section class="changeInfoSection">
<div class$="[[_computeHeaderClass(_editMode)]]"> <div class$="[[_computeHeaderClass(_editMode)]]">
<div class="headerTitle"> <div class="headerTitle">
<div class="changeStatuses"> <div class="changeStatuses">
@@ -421,7 +424,7 @@ limitations under the License.
on-download-tap="_handleOpenDownloadDialog"></gr-change-actions> on-download-tap="_handleOpenDownloadDialog"></gr-change-actions>
</div><!-- end commit actions --> </div><!-- end commit actions -->
</div><!-- end header --> </div><!-- end header -->
<section class="changeInfo"> <div class="changeInfo">
<div class="changeInfo-column changeMetadata hideOnMobileOverlay"> <div class="changeInfo-column changeMetadata hideOnMobileOverlay">
<gr-change-metadata <gr-change-metadata
id="metadata" id="metadata"
@@ -519,9 +522,9 @@ limitations under the License.
</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>
@@ -539,6 +542,7 @@ limitations under the License.
</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,6 +624,8 @@ 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>
<section class="changeLog">
<template is="dom-if" if="[[_isSelectedView(_currentView, <template is="dom-if" if="[[_isSelectedView(_currentView,
_commentTabs.CHANGE_LOG)]]"> _commentTabs.CHANGE_LOG)]]">
<gr-messages-list <gr-messages-list
@@ -661,7 +668,9 @@ limitations under the License.
hide-toggle-buttons hide-toggle-buttons
on-thread-list-modified="_handleReloadDiffComments"></gr-thread-list> on-thread-list-modified="_handleReloadDiffComments"></gr-thread-list>
</template> </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: '';