| <!-- |
| @license |
| Copyright (C) 2018 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="../../../bower_components/polymer/polymer.html"> |
| <link rel="import" href="../../../behaviors/rest-client-behavior/rest-client-behavior.html"> |
| <link rel="import" href="../../../styles/shared-styles.html"> |
| <link rel="import" href="../../shared/gr-hovercard/gr-hovercard.html"> |
| <link rel="import" href="../../shared/gr-icons/gr-icons.html"> |
| <link rel="import" href="../../shared/gr-label/gr-label.html"> |
| <link rel="import" href="../../shared/gr-label-info/gr-label-info.html"> |
| |
| <dom-module id="gr-change-requirements"> |
| <template strip-whitespace> |
| <style include="shared-styles"> |
| .status { |
| display: inline-block; |
| font-family: var(--monospace-font-family); |
| text-align: center; |
| } |
| .neutral .status { |
| color: #FFA62F; |
| } |
| .positive .status { |
| color: var(--vote-text-color-recommended); |
| } |
| .negative .status { |
| color: var(--vote-text-color-disliked); |
| } |
| iron-icon { |
| color: inherit; |
| } |
| .requirement { |
| align-items: center; |
| background-color: var(--table-header-background-color); |
| border: 1px solid var(--border-color); |
| border-radius: 1em; |
| display: flex; |
| font-weight: bold; |
| height: 2rem; |
| justify-content: space-between; |
| margin: .25em; |
| min-width: 3em; |
| padding: .2em .65em |
| } |
| .status { |
| margin-left: .3em; |
| } |
| .title { |
| font-weight: bold; |
| } |
| .required, |
| .optional { |
| display: block; |
| } |
| .optional { |
| margin-top: .5em; |
| } |
| .fieldContainer { |
| display: flex; |
| flex-wrap: wrap; |
| margin-top: .25em; |
| max-width: 25em; |
| } |
| .hidden { |
| display: none; |
| } |
| </style> |
| <div class="required"> |
| <span class="title">Required for submission</span> |
| <div class="fieldContainer"> |
| <template |
| is="dom-repeat" |
| items="[[_requiredLabels]]"> |
| <gr-label |
| tabindex="0" |
| id$="[[item.label]]" |
| class$="requirement [[item.style]]"> |
| <span class="labelName">[[_computeLabelShortcut(item.label)]]</span> |
| <span class="status"> |
| <template is="dom-if" if="[[item.icon]]"> |
| <iron-icon class="icon" icon="[[item.icon]]"></iron-icon> |
| </template> |
| <template is="dom-if" if="[[!item.icon]]"> |
| <span>[[_computeLabelValue(item.labelInfo.value)]]</span> |
| </template> |
| </span> |
| </gr-label> |
| <gr-hovercard position="top" for="[[item.label]]"> |
| <gr-label-info |
| change="{{change}}" |
| account="[[account]]" |
| mutable="[[mutable]]" |
| label="[[item.label]]" |
| label-info="[[item.labelInfo]]"></gr-label-info> |
| </gr-hovercard> |
| </template> |
| <template |
| is="dom-repeat" |
| items="[[_requirements]]"> |
| <gr-label |
| tabindex="0" |
| class$="requirement [[_computeRequirementClass(item.satisfied)]]" |
| has-tooltip$="[[item.tooltip]]" title$="[[item.tooltip]]"> |
| [[item.fallback_text]] |
| <span class="status"> |
| <iron-icon class="icon" icon="[[_computeRequirementIcon(item.satisfied)]]"></iron-icon> |
| </span> |
| </gr-label> |
| </template> |
| </div> |
| </div> |
| <div class$="optional [[_computeShowOptional(_optionalLabels.*)]]"> |
| <span class="title">Optional for submission</span> |
| <div class="fieldContainer"> |
| <template |
| is="dom-repeat" |
| items="[[_optionalLabels]]"> |
| <gr-label |
| tabindex="0" |
| id$="[[item.label]]" |
| class$="requirement [[item.style]]"> |
| <span class="labelName">[[_computeLabelShortcut(item.label)]]</span> |
| <span class="status"> |
| <template is="dom-if" if="[[item.icon]]"> |
| <iron-icon class="icon" icon="[[item.icon]]"></iron-icon> |
| </template> |
| <template is="dom-if" if="[[!item.icon]]"> |
| <span>[[_computeLabelValue(item.labelInfo.value)]]</span> |
| </template> |
| </span> |
| </gr-label> |
| <gr-hovercard position="top" for="[[item.label]]"> |
| <gr-label-info |
| change="{{change}}" |
| account="[[account]]" |
| mutable="[[mutable]]" |
| label="[[item.label]]" |
| label-info="[[item.labelInfo]]"></gr-label-info> |
| </gr-hovercard> |
| </template> |
| </div> |
| </div> |
| </template> |
| <script src="gr-change-requirements.js"></script> |
| </dom-module> |