opendev/gerrit
Code Issues Proposed changes

Restyle dashboard selection/hover states

Browse Source 
Selected/focus state is now represented with a light blue background and
a blue outline, while hover is now changed to a slightly darker blue.

As a component of this change, some of the colors are replaced with
variables set in the app theme. These constants will be reused
throughout the app in descendant changes.

Bug: Issue 8362
Change-Id: I9498df814d1eab5ff4ec1ebb18de77366b8971c4
This commit is contained in:
Kasper Nilsson
2018-04-11 15:19:20 -07:00
parent 2f90615543
commit 99598a1ad7
4 changed files with 36 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -36,16 +36,11 @@ limitations under the License.
:host {
display: table-row;
}
:host:focus {
:host(:focus) {
outline: none;
}
:host(:hover) {
background-color: #eeeeee;
}
:host([selected]) {
/* Double the value used in the file list due to the parent table having
`border-collapse: collapse;` */
border-left: .7rem solid var(--color-link);
background-color: #e8effa;
}
:host([needs-review]) {
font-family: var(--font-family-bold);
@@ -99,12 +94,6 @@ limitations under the License.
a:hover {
text-decoration: underline;
}
.positionIndicator {
visibility: hidden;
}
:host([selected]) .positionIndicator {
visibility: visible;
}
.u-monospace {
font-family: var(--monospace-font-family);
}
@@ -129,13 +118,10 @@ limitations under the License.
:host {
display: flex;
}
:host([selected]) {
border-left: none;
}
}
</style>
<style include="gr-change-list-styles"></style>
<td class="cell keyboard"></td>
<td class="cell leftPadding"></td>
<td class="cell star" hidden$="[[!showStar]]" hidden>
<gr-change-star change="{{change}}"></gr-change-star>
</td>

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

@@ -38,7 +38,7 @@ limitations under the License.
</style>
<table id="changeList">
<tr class="topHeader">
<th class="keyboard"></th>
<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">
@@ -57,7 +57,7 @@ limitations under the License.
index-as="sectionIndex">
<template is="dom-if" if="[[changeSection.sectionName]]">
<tr class="groupHeader">
<td class="keyboard"></td>
<td class="leftPadding"></td>
<td class="star" hidden$="[[!showStar]]" hidden></td>
<td class="cell"
colspan$="[[_computeColspan(changeTableColumns, labelNames)]]">
@@ -69,7 +69,7 @@ limitations under the License.
</template>
<template is="dom-if" if="[[!changeSection.results.length]]">
<tr class="noChanges">
<td class="keyboard"></td>
<td class="leftPadding"></td>
<td class="star" hidden$="[[!showStar]]" hidden></td>
<td class="cell"
colspan$="[[_computeColspan(changeTableColumns, labelNames)]]">

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

@@ -23,10 +23,12 @@ limitations under the License.
--header-icon: none;
--header-icon-size: 0em;
--footer-background-color: var(--header-background-color);
--border-color: #ddd;
/* Following are not part of plugin API. */
--search-border-color: #ddd;
--selection-background-color: #ebf5fb;
--selection-background-color: #f1f5fb;
--selection-border-color: #cadcfa;
--default-text-color: #000;
--view-background-color: #fff;
--default-horizontal-margin: 1rem;

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

@@ -22,7 +22,19 @@ limitations under the License.
}
gr-change-list-item,
tr {
border-bottom: 1px solid #ddd;
border-top: 1px solid var(--border-color);
}
gr-change-list-item[selected],
gr-change-list-item:focus {
background-color: var(--selection-background-color);
border: 1px solid var(--selection-border-color);
}
.topHeader ~ gr-change-list-item:first-of-type,
.topHeader + .groupHeader {
border-top: none;
}
tbody {
border-bottom: 1px solid var(--border-color);
}
tr.topHeader {
border: none;
@@ -57,7 +69,7 @@ limitations under the License.
/* :after pseudoelements are used here because borders on sticky table
headers with a background color are broken. */
th:after {
border-bottom: 1px solid #ddd;
border-bottom: 1px solid var(--border-color);
bottom: 0;
content: '';
left: 0;
@@ -65,7 +77,7 @@ limitations under the License.
width: 100%;
}
th.label:after {
border-left: 1px solid #ddd;
border-left: 1px solid var(--border-color);
top: 0;
}
.groupHeader {
@@ -81,14 +93,12 @@ limitations under the License.
.cell {
height: 2.25rem;
}
.keyboard,
.star {
padding: 0;
}
gr-change-star {
vertical-align: middle;
}
.keyboard,
.branch,
.star,
.label,
@@ -101,18 +111,17 @@ limitations under the License.
.project {
white-space: nowrap;
}
.keyboard,
.star {
vertical-align: middle;
}
.keyboard {
.leftPadding {
width: 20px;
}
.star {
width: 30px;
}
.label {
border-left: 1px solid #ddd;
border-left: 1px solid var(--border-color);
text-align: center;
width: 3rem;
}
@@ -146,12 +155,21 @@ limitations under the License.
justify-content: space-between;
padding: .25em .5em;
}
gr-change-list-item[selected],
gr-change-list-item:focus {
background-color: var(--view-background-color);
border: none;
border-top: 1px solid var(--border-color);
}
gr-change-list-item:hover {
background-color: var(--view-background-color);
}
.cell {
align-items: center;
display: flex;
}
.topHeader,
.keyboard,
.leftPadding,
.status,
.project,
.branch,