diff options
Diffstat (limited to 'polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.html')
| -rw-r--r-- | polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.html | 116 |
1 files changed, 68 insertions, 48 deletions
diff --git a/polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.html b/polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.html index 64960915da..0ac5019b71 100644 --- a/polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.html +++ b/polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.html @@ -1,4 +1,5 @@ <!-- +@license Copyright (C) 2017 The Android Open Source Project Licensed under the Apache License, Version 2.0 (the "License"); @@ -17,103 +18,122 @@ limitations under the License. <link rel="import" href="../../../bower_components/polymer/polymer.html"> <link rel="import" href="../../../bower_components/iron-selector/iron-selector.html"> <link rel="import" href="../../shared/gr-button/gr-button.html"> +<link rel="import" href="../../../styles/gr-voting-styles.html"> <link rel="import" href="../../../styles/shared-styles.html"> <dom-module id="gr-label-score-row"> <template> + <style include="gr-voting-styles"></style> <style include="shared-styles"> .labelContainer { + align-items: center; + display: flex; margin-bottom: .5em; } - .labelContainer:last-child { - margin-bottom: 0; - } .labelName { display: inline-block; + flex: 0 0 auto; margin-right: .5em; min-width: 7em; - text-align: right; - white-space: nowrap; - width: 25%; + text-align: left; + width: 20%; } .labelMessage { - color: #666; + color: var(--deemphasized-text-color); } .placeholder::before { content: ' '; } .selectedValueText { - color: #666; + color: var(--deemphasized-text-color); font-style: italic; - margin-bottom: .5em; - margin-left: calc(25% + .5em); + margin: 0 .5em 0 .5em; } .selectedValueText.hidden { display: none; } + .buttonWrapper { + flex: none; + } gr-button { min-width: 40px; --gr-button: { - border: 1px solid #d1d2d3; - border-radius: 12px; - box-shadow: none; + background-color: var(--button-background-color, var(--table-header-background-color)); + color: var(--primary-text-color); padding: .2em .85em; + @apply(--vote-chip-styles); } - --gr-button-background: #f5f5f5; - --gr-button-color: black; - --gr-button-hover-color: black; - } - iron-selector > gr-button.iron-selected { - --gr-button-background:#ddd; - --gr-button-color: black; - --gr-button-hover-background-color: #ddd; - --gr-button-hover-color: black; + gr-button.iron-selected.max { + --button-background-color: var(--vote-color-approved); + } + gr-button.iron-selected.positive { + --button-background-color: var(--vote-color-recommended); + } + gr-button.iron-selected.min { + --button-background-color: var(--vote-color-rejected); + } + gr-button.iron-selected.negative { + --button-background-color: var(--vote-color-disliked); + } + gr-button.iron-selected.neutral { + --button-background-color: var(--vote-color-neutral); } .placeholder { display: inline-block; width: 40px; } + @media only screen and (max-width: 50em) { + .selectedValueText { + display: none; + } + } @media only screen and (max-width: 25em) { .labelName { margin: 0; text-align: center; width: 100%; } - .selectedValueText { - display: none; + .labelContainer { + display: block; } } </style> <div class="labelContainer"> <span class="labelName">[[label.name]]</span> - <template is="dom-repeat" - items="[[_computeBlankItems(permittedLabels, label.name, 'start')]]" - as="value"> - <span class="placeholder" data-label$="[[label.name]]"></span> - </template> - <iron-selector - attr-for-selected="value" - selected="[[_computeLabelValue(labels, permittedLabels, label)]]" - hidden$="[[!_computeAnyPermittedLabelValues(permittedLabels, label.name)]]" - on-selected-item-changed="_setSelectedValueText"> + <div class="buttonWrapper"> <template is="dom-repeat" - items="[[_computePermittedLabelValues(permittedLabels, label.name)]]" + items="[[_computeBlankItems(permittedLabels, label.name, 'start')]]" as="value"> - <gr-button has-tooltip value$="[[value]]" - title$="[[_computeLabelValueTitle(labels, label.name, value)]]"> - [[value]]</gr-button> + <span class="placeholder" data-label$="[[label.name]]"></span> </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> + <iron-selector + attr-for-selected="value" + selected="[[_computeLabelValue(labels, permittedLabels, label)]]" + hidden$="[[!_computeAnyPermittedLabelValues(permittedLabels, label.name)]]" + on-selected-item-changed="_setSelectedValueText"> + <template is="dom-repeat" + items="[[_items]]" + as="value"> + <gr-button + class$="[[_computeButtonClass(value, index, _items.length)]]" + has-tooltip + name="[[label.name]]" + 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> |