Files
gerrit/polygerrit-ui/app/elements/settings/gr-menu-editor/gr-menu-editor.html
Becky Siegel 16721e6c8b Update gr-button to use paper button
Mostly styling updates but notable changes:
- Common color in theme.html, should be used by all buttons and links.
- CSS mixin to style gr-button passed to paper button (used in
  gr-label-score-row, gr-linked-chip)
- Some things that look like buttons but aren't exactly buttons get
  text-transform uppercase to appear like a button.
- Primary and secondary buttons are both the same color, but for now
- have not removed secondary so that it's possible to style them
  differently if we decide to.

Change-Id: Ib5ef3b0fc4883cd6dfc5c38e6d954925101d531f
2017-10-01 14:06:55 +01:00

116 lines
3.6 KiB
HTML

<!--
Copyright (C) 2016 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="../../../bower_components/iron-input/iron-input.html">
<link rel="import" href="../../shared/gr-button/gr-button.html">
<link rel="import" href="../../shared/gr-date-formatter/gr-date-formatter.html">
<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
<link rel="import" href="../../../styles/shared-styles.html">
<link rel="import" href="../../../styles/gr-form-styles.html">
<dom-module id="gr-menu-editor">
<template>
<style include="shared-styles">
.buttonColumn {
width: 2em;
}
.moveUpButton,
.moveDownButton {
width: 100%
}
tbody tr:first-of-type td .moveUpButton,
tbody tr:last-of-type td .moveDownButton {
display: none;
}
td.urlCell {
word-break: break-word;
}
.newUrlInput {
min-width: 23em;
}
</style>
<style include="gr-form-styles"></style>
<div class="gr-form-styles">
<table>
<thead>
<tr>
<th class="nameHeader">Name</th>
<th class="url-header">URL</th>
</tr>
</thead>
<tbody>
<template is="dom-repeat" items="[[menuItems]]">
<tr>
<td>[[item.name]]</td>
<td class="urlCell">[[item.url]]</td>
<td class="buttonColumn">
<gr-button
link
data-index="[[index]]"
on-tap="_handleMoveUpButton"
class="moveUpButton"></gr-button>
</td>
<td class="buttonColumn">
<gr-button
link
data-index="[[index]]"
on-tap="_handleMoveDownButton"
class="moveDownButton"></gr-button>
</td>
<td>
<gr-button
link
data-index="[[index]]"
on-tap="_handleDeleteButton"
class="remove-button">Delete</gr-button>
</td>
</tr>
</template>
</tbody>
<tfoot>
<tr>
<th>
<input
is="iron-input"
placeholder="New Title"
on-keydown="_handleInputKeydown"
bind-value="{{_newName}}">
</th>
<th>
<input
class="newUrlInput"
is="iron-input"
placeholder="New URL"
on-keydown="_handleInputKeydown"
bind-value="{{_newUrl}}">
</th>
<th></th>
<th></th>
<th>
<gr-button
link
disabled$="[[_computeAddDisabled(_newName, _newUrl)]]"
on-tap="_handleAddButton">Add</gr-button>
</th>
</tr>
</tfoot>
</table>
</div>
</template>
<script src="gr-menu-editor.js"></script>
</dom-module>