Files
gerrit/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.html
Kasper Nilsson 99598a1ad7 Restyle dashboard selection/hover states
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
2018-04-13 10:50:11 -07:00

102 lines
4.3 KiB
HTML

<!--
@license
Copyright (C) 2015 The Android Open Source Project
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<link rel="import" href="../../../behaviors/base-url-behavior/base-url-behavior.html">
<link rel="import" href="../../../behaviors/gr-change-table-behavior/gr-change-table-behavior.html">
<link rel="import" href="../../../behaviors/gr-url-encoding-behavior.html">
<link rel="import" href="../../../behaviors/keyboard-shortcut-behavior/keyboard-shortcut-behavior.html">
<link rel="import" href="../../../behaviors/rest-client-behavior/rest-client-behavior.html">
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../styles/gr-change-list-styles.html">
<link rel="import" href="../../core/gr-navigation/gr-navigation.html">
<link rel="import" href="../../shared/gr-cursor-manager/gr-cursor-manager.html">
<link rel="import" href="../gr-change-list-item/gr-change-list-item.html">
<link rel="import" href="../../../styles/shared-styles.html">
<dom-module id="gr-change-list">
<template>
<style include="shared-styles"></style>
<style include="gr-change-list-styles">
#changeList {
border-collapse: collapse;
width: 100%;
}
</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>
</tr>
<template is="dom-repeat" items="[[sections]]" as="changeSection"
index-as="sectionIndex">
<template is="dom-if" if="[[changeSection.sectionName]]">
<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)]]">
[[changeSection.sectionName]]
</a>
</td>
</tr>
</template>
<template is="dom-if" if="[[!changeSection.results.length]]">
<tr class="noChanges">
<td class="leftPadding"></td>
<td class="star" hidden$="[[!showStar]]" hidden></td>
<td class="cell"
colspan$="[[_computeColspan(changeTableColumns, labelNames)]]">
No changes
</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>
</table>
<gr-cursor-manager
id="cursor"
index="{{selectedIndex}}"
scroll-behavior="keep-visible"
focus-on-move></gr-cursor-manager>
</template>
<script src="gr-change-list.js"></script>
</dom-module>