opendev/gerrit
Code Issues Proposed changes

Redesign of tab header rows and change list sections

Browse Source 
Change Page:
light https://imgur.com/a/50BhE7s
dark https://imgur.com/a/9unbDDo

Dashboard Page:
light https://imgur.com/a/iRV1fh1
dark https://imgur.com/a/N9RYSMx

Change-Id: Idb1fa738e2ac796bce6b649eb1ec064e88bfcd59
This commit is contained in:
Ben Rohlfs
2020-02-13 11:59:59 +01:00
parent d31ad03da9
commit da1623871e
12 changed files with 326 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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">
<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);

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-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 */

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

@@ -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: '';