opendev/gerrit
Code Issues Proposed changes

Sanitize height, border and padding of gr-autocomplete

Browse Source 
Remove --gr-autocomplete. Always put border, border-radius, padding
on gr-autocomplete, unless it is classified as "borderless".

Add a border-radius also to the gr-autocomplete-dropdown. Makes it
look nicer.

Adjust the vertical offset of where the dropdown is shown in
gr-autocomplete to 31px, which matches the default styles. Only needs
a different value in gr-account-entry, where no border and no padding
is used.

Drop height:2em from gr-autocomplete usages, which makes it fall back
to height being calculated from border, padding, line-height as usual.

Also drop height:2em from input,select,textarea form styles, and
align their padding to 4px as used everywhere else.

Align also the standard border-radius and padding of input with that
of gr-autocomplete.

Change-Id: If3e1434f206f50577b926b3f35b624636534926b
This commit is contained in:
Ben Rohlfs
2019-11-19 23:52:00 +01:00
parent ee93acbd18
commit 285e40e1d9
13 changed files with 45 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
polygerrit-ui/app/elements/admin/gr-create-change-dialog/gr-create-change-dialog.html
View File

@@ -43,11 +43,6 @@ limitations under the License.
.value {
width: 32em;
}
gr-autocomplete {
--gr-autocomplete: {
padding: 0 var(--spacing-xs);
}
}
.hide {
display: none;
}

9
polygerrit-ui/app/elements/admin/gr-create-repo-dialog/gr-create-repo-dialog.html
View File

@@ -40,14 +40,7 @@ limitations under the License.
width: 20em;
}
gr-autocomplete {
border: none;
--gr-autocomplete: {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
height: 2em;
padding: 0 var(--spacing-xs);
width: 20em;
}
width: 20em;
}
</style>

4
polygerrit-ui/app/elements/admin/gr-group-members/gr-group-members.html
View File

@@ -48,10 +48,6 @@ limitations under the License.
}
gr-autocomplete {
width: 20em;
--gr-autocomplete: {
height: 2em;
width: 20em;
}
}
a {
color: var(--primary-text-color);

3
polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar.html
View File

@@ -29,11 +29,9 @@ limitations under the License.
}
gr-autocomplete {
background-color: var(--view-background-color);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
flex: 1;
outline: none;
padding: var(--spacing-xs);
}
</style>
<form>
@@ -45,7 +43,6 @@ limitations under the License.
on-commit="_handleInputCommit"
allow-non-suggested-values
multi
borderless
threshold="[[_threshold]]"
tab-complete
vertical-offset="30"></gr-autocomplete>

12
polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls.html
View File

@@ -55,21 +55,13 @@ limitations under the License.
gr-dialog .main > iron-input{
width: 100%;
}
gr-autocomplete {
--gr-autocomplete: {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
height: 2em;
padding: 0 var(--spacing-xs);
}
}
input {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
height: 2em;
margin: var(--spacing-m) 0;
padding: 0 var(--spacing-xs);
padding: var(--spacing-s);
width: 100%;
box-sizing: content-box;
}
@media screen and (max-width: 50em) {
gr-dialog {

3
polygerrit-ui/app/elements/shared/gr-account-entry/gr-account-entry.html
View File

@@ -40,7 +40,8 @@ limitations under the License.
on-commit="_handleInputCommit"
clear-on-commit
warn-uncommitted
text="{{_inputText}}">
text="{{_inputText}}"
vertical-offset="24">
</gr-autocomplete>
</template>
<script src="gr-account-entry.js"></script>

1
polygerrit-ui/app/elements/shared/gr-autocomplete-dropdown/gr-autocomplete-dropdown.html
View File

@@ -60,6 +60,7 @@ limitations under the License.
.dropdown-content {
background: var(--dropdown-background-color);
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
border-radius: var(--border-radius);
max-height: 50vh;
overflow: auto;
}

23
polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.html
View File

@@ -36,13 +36,14 @@ limitations under the License.
margin: 0 var(--spacing-xs);
vertical-align: top;
}
paper-input:not(.borderless) {
border: 1px solid var(--border-color);
paper-input.borderless {
border: none;
padding: 0;
}
paper-input {
height: var(--line-height-normal);
width: 100%;
@apply --gr-autocomplete;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: var(--spacing-s);
--paper-input-container: {
padding: 0;
};
@@ -50,13 +51,25 @@ limitations under the License.
font-size: var(--font-size-normal);
line-height: var(--line-height-normal);
};
/* This is a hack for not being able to set height:0 on the underline
of a paper-input 2.2.3 element. All the underline fixes below only
actually work in 3.x.x, so the height must be adjusted directly as
a workaround until we are on Polymer 3. */
height: var(--line-height-normal);
--paper-input-container-underline-height: 0;
--paper-input-container-underline-wrapper-height: 0;
--paper-input-container-underline-focus-height: 0;
--paper-input-container-underline-legacy-height: 0;
--paper-input-container-underline: {
height: 0;
display: none;
};
--paper-input-container-underline-focus: {
height: 0;
display: none;
};
--paper-input-container-underline-disabled: {
height: 0;
display: none;
};
}

24
polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.js
View File

@@ -74,9 +74,9 @@
},
/**
* The number of characters that must be typed before suggestions are
* made. If threshold is zero, default suggestions are enabled.
*/
* The number of characters that must be typed before suggestions are
* made. If threshold is zero, default suggestions are enabled.
*/
threshold: {
type: Number,
value: 1,
@@ -89,11 +89,15 @@
type: Boolean,
value: false,
},
// Vertical offset needed for a 1em font-size with no vertical padding.
// Inputs with additional padding will need to increase vertical offset.
/**
* Vertical offset needed for an element with 20px line-height, 4px
* padding and 1px border (30px height total). Plus 1px spacing between
* input and dropdown. Inputs with different line-height or padding will
* need to tweak vertical offset.
*/
verticalOffset: {
type: Number,
value: 20,
value: 31,
},
text: {
@@ -110,10 +114,10 @@
},
/**
* When true, tab key autocompletes but does not fire the commit event.
* When false, tab key not caught, and focus is removed from the element.
* See Issue 4556, Issue 6645.
*/
* When true, tab key autocompletes but does not fire the commit event.
* When false, tab key not caught, and focus is removed from the element.
* See Issue 4556, Issue 6645.
*/
tabComplete: {
type: Boolean,
value: false,

2
polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete_test.html
View File

@@ -335,7 +335,7 @@ limitations under the License.
});
test('vertical offset overridden by param if it exists', () => {
assert.equal(element.$.suggestions.verticalOffset, 20);
assert.equal(element.$.suggestions.verticalOffset, 31);
element.verticalOffset = 30;
assert.equal(element.$.suggestions.verticalOffset, 30);
});

7
polygerrit-ui/app/elements/shared/gr-labeled-autocomplete/gr-labeled-autocomplete.html
View File

@@ -38,14 +38,7 @@ limitations under the License.
#body {
display: flex;
}
gr-autocomplete {
height: 1.5em;
--gr-autocomplete: {
border: none;
}
}
#trigger {
border-left: 1px solid var(--deemphasized-text-color);
color: var(--deemphasized-text-color);
cursor: pointer;
padding-left: var(--spacing-s);

17
polygerrit-ui/app/styles/gr-form-styles.html
View File

@@ -61,7 +61,6 @@ limitations under the License.
}
.gr-form-styles td,
.gr-form-styles tfoot th {
height: 2em;
padding: var(--spacing-s) 0;
vertical-align: middle;
}
@@ -84,8 +83,7 @@ limitations under the License.
.gr-form-styles textarea {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
height: 2em;
padding: 0 var(--spacing-xs);
padding: var(--spacing-s);
}
.gr-form-styles td:last-child {
width: 5em;
@@ -97,23 +95,16 @@ limitations under the License.
.gr-form-styles iron-autogrow-textarea {
border: none;
height: auto;
min-height: 2em;
min-height: 4em;
--iron-autogrow-textarea: {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
box-sizing: border-box;
padding: var(--spacing-s) var(--spacing-xs) 0 var(--spacing-xs);
padding: var(--spacing-s);
}
}
.gr-form-styles gr-autocomplete {
border: none;
--gr-autocomplete: {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
height: 2em;
padding: 0 var(--spacing-xs);
width: 14em;
}
width: 14em;
}
@media only screen and (max-width: 40em) {
.gr-form-styles section {

3
polygerrit-ui/app/styles/shared-styles.html
View File

@@ -42,10 +42,11 @@ limitations under the License.
input {
background-color: inherit;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
box-sizing: border-box;
color: var(--primary-text-color);
margin: 0;
padding: 0;
padding: var(--spacing-s);
}
iron-autogrow-textarea {
background-color: inherit;