Files
gerrit/polygerrit-ui/app/elements/diff/gr-diff-preferences/gr-diff-preferences.html
Becky Siegel 1f5a8510b7 Safeguard for font preferences if server has skew
Added temporary safeguard for the font preferences change so that inputs
are hidden and custom styles are not set if font-size was not part of
the preferneces response.

Change-Id: I5b34b317bf953591889fa25e1c351d4f490d989e
2016-10-14 14:13:36 -07:00

128 lines
3.9 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-storage/gr-storage.html">
<dom-module id="gr-diff-preferences">
<template>
<style>
:host {
display: block;
}
:host[disabled] {
opacity: .5;
pointer-events: none;
}
input,
select {
font: inherit;
}
input[type="number"] {
width: 4em;
}
.header,
.actions {
padding: 1em 1.5em;
}
.header {
border-bottom: 1px solid #ddd;
font-weight: bold;
}
.mainContainer {
padding: 1em 0;
}
.pref {
align-items: center;
display: flex;
padding: .35em 1.5em;
width: 20em;
}
.pref:hover {
background-color: #ebf5fb;
}
.pref label {
cursor: pointer;
flex: 1;
}
.actions {
border-top: 1px solid #ddd;
display: flex;
justify-content: space-between;
}
.beta {
font-weight: bold;
color: #888;
}
</style>
<div class="header">
Diff View Preferences
</div>
<div class="mainContainer">
<div class="pref">
<label for="contextSelect">Context</label>
<select id="contextSelect" on-change="_handleContextSelectChange">
<option value="3">3 lines</option>
<option value="10">10 lines</option>
<option value="25">25 lines</option>
<option value="50">50 lines</option>
<option value="75">75 lines</option>
<option value="100">100 lines</option>
<option value="-1">Whole file</option>
</select>
</div>
<div class="pref">
<label for="columnsInput">Columns</label>
<input is="iron-input" type="number" id="columnsInput"
prevent-invalid-input
allowed-pattern="[0-9]"
bind-value="{{_newPrefs.line_length}}">
</div>
<div class="pref">
<label for="tabSizeInput">Tab width</label>
<input is="iron-input" type="number" id="tabSizeInput"
prevent-invalid-input
allowed-pattern="[0-9]"
bind-value="{{_newPrefs.tab_size}}">
</div>
<div class="pref" hidden$="[[!_newPrefs.font_size]]">
<label for="fontSizeInput">Font Size</label>
<input is="iron-input" type="number" id="fontSizeInput"
prevent-invalid-input
allowed-pattern="[0-9]"
bind-value="{{_newPrefs.font_size}}">
</div>
<div class="pref">
<label for="showTabsInput">Show tabs</label>
<input is="iron-input" type="checkbox" id="showTabsInput"
on-tap="_handleShowTabsTap">
</div>
<div class="pref">
<label for="syntaxHighlightInput">Syntax highlighting</label>
<input is="iron-input" type="checkbox" id="syntaxHighlightInput"
on-tap="_handleSyntaxHighlightTap">
</div>
</div>
<div class="actions">
<gr-button id="saveButton" primary on-tap="_handleSave">Save</gr-button>
<gr-button id="cancelButton" on-tap="_handleCancel">Cancel</gr-button>
</div>
</template>
<script src="gr-diff-preferences.js"></script>
</dom-module>