opendev/gerrit
Code Issues Proposed changes

Rename gr-settings-styles to gr-form-styles and update a few styles

Browse Source 
Because the admin section has a lot of form elements, let's generalize
gr-settings-styles to be used for all forms.

Feature: Issue 6275
Change-Id: I3b94e220c5a1413ce702f0bc272d0db307406222
This commit is contained in:
Becky Siegel
2017-05-24 10:18:50 -07:00
parent c89e5e31cf
commit d7b26e77e3
11 changed files with 57 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
polygerrit-ui/app/elements/settings/gr-account-info/gr-account-info.html
View File

@@ -19,12 +19,12 @@ limitations under the License.
<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/gr-settings-styles.html">
<link rel="import" href="../../../styles/gr-form-styles.html">
<dom-module id="gr-account-info">
<template>
<style include="gr-settings-styles"></style>
<div class="gr-settings-styles">
<style include="gr-form-styles"></style>
<div class="gr-form-styles">
<section>
<span class="title">ID</span>
<span class="value">[[_account._account_id]]</span>

6
polygerrit-ui/app/elements/settings/gr-change-table-editor/gr-change-table-editor.html
View File

@@ -20,7 +20,7 @@ limitations under the License.
<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/gr-settings-styles.html">
<link rel="import" href="../../../styles/gr-form-styles.html">
<dom-module id="gr-change-table-editor">
<template>
@@ -40,8 +40,8 @@ limitations under the License.
border: 1px solid #ddd;
}
</style>
<style include="gr-settings-styles"></style>
<div class="gr-settings-styles">
<style include="gr-form-styles"></style>
<div class="gr-form-styles">
<table>
<thead>
<tr>

4
polygerrit-ui/app/elements/settings/gr-email-editor/gr-email-editor.html
View File

@@ -44,8 +44,8 @@ limitations under the License.
border: 1px solid #ddd;
}
</style>
<style include="gr-settings-styles"></style>
<div class="gr-settings-styles">
<style include="gr-form-styles"></style>
<div class="gr-form-styles">
<table>
<thead>
<tr>

6
polygerrit-ui/app/elements/settings/gr-group-list/gr-group-list.html
View File

@@ -17,7 +17,7 @@ limitations under the License.
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
<link rel="import" href="../../../styles/gr-settings-styles.html">
<link rel="import" href="../../../styles/gr-form-styles.html">
<dom-module id="gr-group-list">
<template>
@@ -32,8 +32,8 @@ limitations under the License.
text-align: center;
}
</style>
<style include="gr-settings-styles"></style>
<div class="gr-settings-styles">
<style include="gr-form-styles"></style>
<div class="gr-form-styles">
<table>
<thead>
<tr>

8
polygerrit-ui/app/elements/settings/gr-http-password/gr-http-password.html
View File

@@ -15,7 +15,7 @@ limitations under the License.
-->
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../styles/gr-settings-styles.html">
<link rel="import" href="../../../styles/gr-form-styles.html">
<link rel="import" href="../../shared/gr-button/gr-button.html">
<link rel="import" href="../../shared/gr-overlay/gr-overlay.html">
<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
@@ -46,8 +46,8 @@ limitations under the License.
right: 2em;
}
</style>
<style include="gr-settings-styles"></style>
<div class="gr-settings-styles">
<style include="gr-form-styles"></style>
<div class="gr-form-styles">
<div hidden$="[[_passwordUrl]]">
<section>
<span class="title">Username</span>
@@ -67,7 +67,7 @@ limitations under the License.
id="generatedPasswordOverlay"
on-iron-overlay-closed="_generatedPasswordOverlayClosed"
with-backdrop>
<div class="gr-settings-styles">
<div class="gr-form-styles">
<section id="generatedPasswordDisplay">
<span class="title">New Password:</span>
<span class="value">[[_generatedPassword]]</span>

6
polygerrit-ui/app/elements/settings/gr-menu-editor/gr-menu-editor.html
View File

@@ -20,7 +20,7 @@ limitations under the License.
<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/gr-settings-styles.html">
<link rel="import" href="../../../styles/gr-form-styles.html">
<dom-module id="gr-menu-editor">
<template>
@@ -42,8 +42,8 @@ limitations under the License.
width: 23em;
}
</style>
<style include="gr-settings-styles"></style>
<div class="gr-settings-styles">
<style include="gr-form-styles"></style>
<div class="gr-form-styles">
<table>
<thead>
<tr>

6
polygerrit-ui/app/elements/settings/gr-registration-dialog/gr-registration-dialog.html
View File

@@ -15,13 +15,13 @@ limitations under the License.
-->
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../styles/gr-settings-styles.html">
<link rel="import" href="../../../styles/gr-form-styles.html">
<link rel="import" href="../../shared/gr-button/gr-button.html">
<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
<dom-module id="gr-registration-dialog">
<template>
<style include="gr-settings-styles"></style>
<style include="gr-form-styles"></style>
<style>
:host {
display: block;
@@ -47,7 +47,7 @@ limitations under the License.
justify-content: space-between;
}
</style>
<main class="gr-settings-styles">
<main class="gr-form-styles">
<header>Please confirm your contact information</header>
<main>
<p>

9
polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.html
View File

@@ -29,7 +29,7 @@ limitations under the License.
<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
<link rel="import" href="../../shared/gr-select/gr-select.html">
<link rel="import" href="../../../styles/gr-settings-styles.html">
<link rel="import" href="../../../styles/gr-form-styles.html">
<dom-module id="gr-settings-view">
<template>
@@ -42,9 +42,6 @@ limitations under the License.
margin: 2em auto;
max-width: 46em;
}
h1 {
margin-bottom: .1em;
}
h2.edited:after {
color: #444;
content: ' *';
@@ -91,7 +88,7 @@ limitations under the License.
}
}
</style>
<style include="gr-settings-styles"></style>
<style include="gr-form-styles"></style>
<div class="loading" hidden$="[[!_loading]]">Loading...</div>
<div hidden$="[[_loading]]" hidden>
<nav id="settingsNav">
@@ -110,7 +107,7 @@ limitations under the License.
<li><a href="#Groups">Groups</a></li>
</ul>
</nav>
<main class="gr-settings-styles">
<main class="gr-form-styles">
<h1>User Settings</h1>
<h2
id="Profile"

6
polygerrit-ui/app/elements/settings/gr-ssh-editor/gr-ssh-editor.html
View File

@@ -16,7 +16,7 @@ limitations under the License.
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
<link rel="import" href="../../../styles/gr-settings-styles.html">
<link rel="import" href="../../../styles/gr-form-styles.html">
<link rel="import" href="../../shared/gr-button/gr-button.html">
<link rel="import" href="../../shared/gr-overlay/gr-overlay.html">
<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
@@ -49,8 +49,8 @@ limitations under the License.
right: 2em;
}
</style>
<style include="gr-settings-styles"></style>
<div class="gr-settings-styles">
<style include="gr-form-styles"></style>
<div class="gr-form-styles">
<fieldset>
<table>
<thead>

6
polygerrit-ui/app/elements/settings/gr-watched-projects-editor/gr-watched-projects-editor.html
View File

@@ -17,7 +17,7 @@ limitations under the License.
<link rel="import" href="../../shared/gr-autocomplete/gr-autocomplete.html">
<link rel="import" href="../../shared/gr-button/gr-button.html">
<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
<link rel="import" href="../../../styles/gr-settings-styles.html">
<link rel="import" href="../../../styles/gr-form-styles.html">
<dom-module id="gr-watched-projects-editor">
<template>
@@ -54,8 +54,8 @@ limitations under the License.
width: 26em;
}
</style>
<style include="gr-settings-styles"></style>
<div class="gr-settings-styles">
<style include="gr-form-styles"></style>
<div class="gr-form-styles">
<table>
<thead>
<tr>

39
polygerrit-ui/app/styles/gr-settings-styles.html → polygerrit-ui/app/styles/gr-form-styles.html
View File

@@ -13,43 +13,58 @@ 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.
-->
<dom-module id="gr-settings-styles">
<dom-module id="gr-form-styles">
<template>
<style>
.gr-settings-styles fieldset {
.gr-form-styles h1 {
margin-bottom: .1em;
}
.gr-form-styles fieldset {
border: none;
margin: 0 0 2em 2em;
}
.gr-settings-styles section {
.gr-form-styles.full-width fieldset {
margin: 0 0 2em 0;
}
.gr-form-styles section {
margin-bottom: .5em;
}
.gr-settings-styles .title,
.gr-settings-styles .value {
.gr-form-styles .title,
.gr-form-styles .value {
display: inline-block;
vertical-align: top;
}
.gr-settings-styles .title {
.gr-form-styles .title {
color: #666;
font-weight: bold;
padding-right: .5em;
width: 11em;
}
.gr-settings-styles input {
.gr-form-styles.full-width .title {
color: #666;
font-weight: bold;
padding-right: .5em;
width: 22em;
}
.gr-form-styles input {
font-size: 1em;
}
.gr-settings-styles th {
.gr-form-styles iron-autogrow-textarea {
font-size: 1em;
}
.gr-form-styles th {
color: #666;
text-align: left;
}
.gr-settings-styles tbody tr:nth-child(even) {
.gr-form-styles tbody tr:nth-child(even) {
background-color: #f4f4f4;
}
@media only screen and (max-width: 40em) {
.gr-settings-styles section {
.gr-form-styles section {
margin-bottom: 1em;
}
.gr-settings-styles .title,
.gr-settings-styles .value {
.gr-form-styles .title,
.gr-form-styles .value {
display: block;
}
}