opendev/gerrit
Code Issues Proposed changes

Merge "Change the layout of gr-label-scores to be a table"

Browse Source
This commit is contained in:
Ben Rohlfs
2020-02-05 09:06:59 +00:00
committed by Gerrit Code Review
parent 6426df5cd0 2648883531
commit ea5c56a83d
3 changed files with 84 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.html
View File

@@ -27,42 +27,37 @@ limitations under the License.
/* Workaround for empty style block - see https://github.com/Polymer/tools/issues/408 */ /* Workaround for empty style block - see https://github.com/Polymer/tools/issues/408 */
</style> </style>
<style include="shared-styles"> <style include="shared-styles">
.labelContainer { .labelNameCell,
align-items: center; .buttonsCell,
display: flex; .selectedValueCell {
margin-bottom: var(--spacing-m); padding: var(--spacing-s) var(--spacing-m);
display: table-cell;
} }
.labelName { /* We want the :hover highlight to extend to the border of the dialog. */
display: inline-block; .labelNameCell {
flex: 0 0 auto; padding-left: var(--spacing-xl);
margin-right: var(--spacing-m); }
min-width: 7em; .selectedValueCell {
text-align: left; padding-right: var(--spacing-xl);
width: 20%; }
/* This is a trick to let the selectedValueCell take the remaining width. */
.labelNameCell,
.buttonsCell {
white-space: nowrap;
}
.selectedValueCell {
width: 75%;
} }
.labelMessage { .labelMessage {
color: var(--deemphasized-text-color); color: var(--deemphasized-text-color);
} }
.placeholder::before {
content: ' ';
}
.selectedValueText {
color: var(--deemphasized-text-color);
font-style: italic;
margin: 0 var(--spacing-m);
}
.selectedValueText.hidden {
display: none;
}
.buttonWrapper {
flex: none;
}
gr-button { gr-button {
min-width: 40px; min-width: 42px;
box-sizing: border-box;
--gr-button: { --gr-button: {
background-color: var(--button-background-color, var(--table-header-background-color)); background-color: var(--button-background-color, var(--table-header-background-color));
color: var(--primary-text-color); color: var(--primary-text-color);
padding: var(--spacing-xs) var(--spacing-m); padding: 0 var(--spacing-m);
@apply --vote-chip-styles; @apply --vote-chip-styles;
} }
} }
@@ -83,63 +78,62 @@ limitations under the License.
} }
.placeholder { .placeholder {
display: inline-block; display: inline-block;
width: 40px; width: 42px;
height: 1px;
}
.placeholder::before {
content: ' ';
}
.selectedValueCell {
color: var(--deemphasized-text-color);
font-style: italic;
}
.selectedValueCell.hidden {
display: none;
} }
@media only screen and (max-width: 50em) { @media only screen and (max-width: 50em) {
.selectedValueText { .selectedValueCell {
display: none; display: none;
} }
} }
@media only screen and (max-width: 25em) {
.labelName {
margin: 0;
text-align: center;
width: 100%;
}
.labelContainer {
display: block;
}
}
</style> </style>
<div class="labelContainer"> <span class="labelNameCell">[[label.name]]</span>
<span class="labelName">[[label.name]]</span> <div class="buttonsCell">
<div class="buttonWrapper"> <template is="dom-repeat"
items="[[_computeBlankItems(permittedLabels, label.name, 'start')]]"
as="value">
<span class="placeholder" data-label$="[[label.name]]"></span>
</template>
<iron-selector
id="labelSelector"
attr-for-selected="data-value"
selected="[[_computeLabelValue(labels, permittedLabels, label)]]"
hidden$="[[!_computeAnyPermittedLabelValues(permittedLabels, label.name)]]"
on-selected-item-changed="_setSelectedValueText">
<template is="dom-repeat" <template is="dom-repeat"
items="[[_computeBlankItems(permittedLabels, label.name, 'start')]]" items="[[_items]]"
as="value"> as="value">
<span class="placeholder" data-label$="[[label.name]]"></span> <gr-button
class$="[[_computeButtonClass(value, index, _items.length)]]"
has-tooltip
data-name$="[[label.name]]"
data-value$="[[value]]"
title$="[[_computeLabelValueTitle(labels, label.name, value)]]">
[[value]]</gr-button>
</template> </template>
<iron-selector </iron-selector>
id="labelSelector" <template is="dom-repeat"
attr-for-selected="data-value" items="[[_computeBlankItems(permittedLabels, label.name, 'end')]]"
selected="[[_computeLabelValue(labels, permittedLabels, label)]]" as="value">
hidden$="[[!_computeAnyPermittedLabelValues(permittedLabels, label.name)]]" <span class="placeholder" data-label$="[[label.name]]"></span>
on-selected-item-changed="_setSelectedValueText"> </template>
<template is="dom-repeat" <span class="labelMessage"
items="[[_items]]" hidden$="[[_computeAnyPermittedLabelValues(permittedLabels, label.name)]]">
as="value"> You don't have permission to edit this label.
<gr-button </span>
class$="[[_computeButtonClass(value, index, _items.length)]]" </div>
has-tooltip <div class$="selectedValueCell [[_computeHiddenClass(permittedLabels, label.name)]]">
data-name$="[[label.name]]" <span id="selectedValueLabel">[[_selectedValueText]]</span>
data-value$="[[value]]"
title$="[[_computeLabelValueTitle(labels, label.name, value)]]">
[[value]]</gr-button>
</template>
</iron-selector>
<template is="dom-repeat"
items="[[_computeBlankItems(permittedLabels, label.name, 'end')]]"
as="value">
<span class="placeholder" data-label$="[[label.name]]"></span>
</template>
<span class="labelMessage"
hidden$="[[_computeAnyPermittedLabelValues(permittedLabels, label.name)]]">
You don't have permission to edit this label.
</span>
</div>
<div class$="selectedValueText [[_computeHiddenClass(permittedLabels, label.name)]]">
<span id="selectedValueLabel">[[_selectedValueText]]</span>
</div>
</div> </div>
</template> </template>
<script src="gr-label-score-row.js"></script> <script src="gr-label-score-row.js"></script>

17
polygerrit-ui/app/elements/change/gr-label-scores/gr-label-scores.html
View File

@@ -23,18 +23,23 @@ limitations under the License.
<dom-module id="gr-label-scores"> <dom-module id="gr-label-scores">
<template> <template>
<style include="shared-styles"> <style include="shared-styles">
:host {
display: table;
width: 100%;
}
.mergedMessage { .mergedMessage {
font-style: italic; font-style: italic;
text-align: center; text-align: center;
width: 100%; width: 100%;
} }
gr-label-score-row.no-access { gr-label-score-row:hover {
display: var(--label-no-access-display, initial); background-color: var(--hover-background-color);
} }
@media only screen and (max-width: 25em) { gr-label-score-row {
:host { display: table-row;
text-align: center; }
} gr-label-score-row.no-access {
display: var(--label-no-access-display, table-row);
} }
</style> </style>
<template is="dom-repeat" items="[[_labels]]" as="label"> <template is="dom-repeat" items="[[_labels]]" as="label">

4
polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.html
View File

@@ -64,6 +64,10 @@ limitations under the License.
padding: var(--spacing-m) var(--spacing-xl); padding: var(--spacing-m) var(--spacing-xl);
width: 100%; width: 100%;
} }
section.labelsContainer {
/* We want the :hover highlight to extend to the border of the dialog. */
padding: var(--spacing-m) 0;
}
.actions { .actions {
background-color: var(--dialog-background-color); background-color: var(--dialog-background-color);
bottom: 0; bottom: 0;