opendev/gerrit
Code Issues Proposed changes

Merge "Change font-size to 14px and tweak the UI"

Browse Source
This commit is contained in:
Ben Rohlfs
2019-10-29 13:46:50 +00:00
committed by Gerrit Code Review
parent 6faf4f5e40 4a809aabdc
commit 893bf15157
21 changed files with 91 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
plugins/replication

Submodule plugins/replication updated: 5622267e9f...94a465e098

4
polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html
View File

@@ -105,10 +105,6 @@ limitations under the License.
.u-red {
color: var(--vote-text-color-disliked);
}
.label.u-green:not(.u-monospace),
.label.u-red:not(.u-monospace) {
font-size: var(--font-size-h3);
}
.u-gray-background {
background-color: var(--table-header-background-color);
}

2
polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.html
View File

@@ -54,7 +54,7 @@ limitations under the License.
max-width: 20ch;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
vertical-align: top;
white-space: nowrap;
}
gr-editable-label {

13
polygerrit-ui/app/elements/change/gr-change-requirements/gr-change-requirements.html
View File

@@ -46,8 +46,8 @@ limitations under the License.
iron-icon {
color: inherit;
}
.name {
font-weight: var(--font-weight-bold);
.status iron-icon {
vertical-align: top;
}
section {
display: table-row;
@@ -57,16 +57,15 @@ limitations under the License.
}
.title {
min-width: 10em;
padding: var(--spacing-m) var(--spacing-m) 0 var(--requirements-horizontal-padding);
vertical-align: top;
padding: var(--spacing-s) var(--spacing-m) 0 var(--requirements-horizontal-padding);
}
.value {
padding: var(--spacing-m) var(--spacing-m) 0 0;
vertical-align: middle;
padding: var(--spacing-s) var(--spacing-m) 0 0;
}
.title,
.value {
display: table-cell;
vertical-align: top;
}
.hidden {
display: none;
@@ -89,7 +88,7 @@ limitations under the License.
float: right;
}
.spacer {
height: .5em;
height: var(--spacing-m);
}
</style>
<template

6
polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
View File

@@ -70,7 +70,7 @@ limitations under the License.
background-color: var(--table-header-background-color);
border-bottom: 1px solid var(--border-color);
display: flex;
padding: var(--spacing-m) var(--spacing-l);
padding: var(--spacing-s) var(--spacing-l);
z-index: 99; /* Less than gr-overlay's backdrop */
}
.header.editMode {
@@ -230,7 +230,7 @@ limitations under the License.
paper-tabs {
background-color: var(--table-header-background-color);
border-top: 1px solid var(--border-color);
height: 3rem;
height: calc(var(--line-height-normal) + 2*var(--spacing-m));
--paper-tabs-selection-bar-color: var(--link-color);
}
paper-tab {
@@ -292,7 +292,7 @@ limitations under the License.
align-items: flex-start;
flex-direction: column;
flex: 1;
padding: var(--spacing-m) var(--spacing-l);
padding: var(--spacing-s) var(--spacing-l);
}
gr-change-star {
vertical-align: middle;

2
polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.html
View File

@@ -48,7 +48,7 @@ limitations under the License.
background-color: var(--table-header-background-color);
border-top: 1px solid var(--border-color);
display: flex;
padding: 6px var(--spacing-l);
padding: var(--spacing-s) var(--spacing-l);
}
.patchInfo-left {
align-items: baseline;

2
polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
View File

@@ -48,7 +48,7 @@ limitations under the License.
align-items: center;
border-top: 1px solid var(--border-color);
display: flex;
min-height: 2.25em;
min-height: calc(var(--line-height-normal) + 2*var(--spacing-s));
padding: var(--spacing-xs) var(--spacing-l) var(--spacing-xs) calc(var(--spacing-l) - .35rem);
}
:host(.loading) .row {

13
polygerrit-ui/app/elements/change/gr-message/gr-message.html
View File

@@ -57,7 +57,7 @@ limitations under the License.
}
.contentContainer {
margin-left: calc(var(--spacing-l) + 2.5em);
padding: 10px 0;
padding: var(--spacing-m) 0;
}
.showAvatar.collapsed .contentContainer {
margin-left: calc(var(--spacing-l) + 1.75em);
@@ -73,13 +73,13 @@ limitations under the License.
}
.collapsed gr-avatar {
top: var(--spacing-m);
height: 1.75em;
width: 1.75em;
height: var(--line-height-normal);
width: var(--line-height-normal);
}
.expanded gr-avatar {
top: 12px;
height: 2.5em;
width: 2.5em;
top: var(--spacing-l);
height: var(--line-height-h1);
width: var(--line-height-h1);
}
.name {
font-weight: var(--font-weight-bold);
@@ -143,6 +143,7 @@ limitations under the License.
}
.dateContainer iron-icon {
cursor: pointer;
vertical-align: top;
}
.replyContainer {
padding: var(--spacing-m) 0 0 0;

2
polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.html
View File

@@ -38,7 +38,7 @@ limitations under the License.
display: flex;
justify-content: space-between;
min-height: 3.2em;
padding: var(--spacing-m) var(--spacing-l);
padding: var(--spacing-s) var(--spacing-l);
}
#messageControlsContainer {
padding: 0 var(--spacing-l);

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

@@ -72,7 +72,7 @@ limitations under the License.
justify-content: space-between;
}
header {
padding: var(--spacing-m) var(--spacing-l);
padding: var(--spacing-s) var(--spacing-l);
}
.patchRangeLeft {
align-items: center;
@@ -113,10 +113,7 @@ limitations under the License.
}
.subHeader {
flex-wrap: wrap;
padding: 0 var(--spacing-l) var(--spacing-m);
}
.subHeader > div {
margin-top: var(--spacing-xs);
padding: 0 var(--spacing-l) var(--spacing-s);
}
.prefsButton {
text-align: right;
@@ -158,7 +155,7 @@ limitations under the License.
}
@media screen and (max-width: 50em) {
header {
padding: var(--spacing-m) var(--spacing-l);
padding: var(--spacing-s) var(--spacing-l);
}
.dash {
display: none;

4
polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
View File

@@ -44,8 +44,8 @@ limitations under the License.
}
:host {
font-family: var(--monospace-font-family, ''), 'Roboto Mono';
font-size: var(--font-size, 12px);
line-height: var(--line-height-mono, 16px);
font-size: var(--font-size, var(--font-size-mono, 12px));
line-height: var(--line-height-mono, 1.334);
}
.thread-group {

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

@@ -39,14 +39,18 @@ limitations under the License.
border: 1px solid var(--border-color);
}
paper-input {
height: 100%;
height: var(--line-height-normal);
width: 100%;
@apply --gr-autocomplete;
--paper-input-container: {
padding: 0;
}
--paper-input-container-input: {
font-size: inherit;
font-size: var(--font-size-normal);
/* paper-input insists on adding 1px above and below such that we have
to substract that to get a line height that is consistent with
normal text. */
line-height: calc(var(--line-height-normal) - 2px);
}
--paper-input-container-underline: {
display: none;

12
polygerrit-ui/app/elements/shared/gr-comment-thread/gr-comment-thread.html
View File

@@ -28,6 +28,12 @@ limitations under the License.
<dom-module id="gr-comment-thread">
<template>
<style include="shared-styles">
:host {
font-family: var(--font-family);
font-size: var(--font-size-normal);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-normal);
}
gr-button {
margin-left: var(--spacing-m);
}
@@ -37,12 +43,12 @@ limitations under the License.
}
#container {
background-color: var(--comment-background-color);
border: 1px solid var(--border-color);
color: var(--comment-text-color);
display: block;
margin-bottom: 1px;
margin: 0 4px 4px 4px;
white-space: normal;
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
border-radius: 4px;
/** This is required for firefox to continue the inheritance */
-webkit-user-select: inherit;
-moz-user-select: inherit;

12
polygerrit-ui/app/elements/shared/gr-comment/gr-comment.html
View File

@@ -74,11 +74,6 @@ limitations under the License.
flex: 1;
overflow: hidden;
}
.authorName,
.draftLabel,
.draftTooltip {
font-weight: var(--font-weight-bold);
}
.draftLabel,
.draftTooltip {
color: var(--deemphasized-text-color);
@@ -119,6 +114,13 @@ limitations under the License.
display: flex;
justify-content: flex-end;
}
.rightActions gr-button {
--gr-button: {
height: 20px;
padding: 0 var(--spacing-s);
color: var(--default-button-text-color);
}
}
.editMessage {
display: none;
margin: var(--spacing-m) 0;

1
polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html
View File

@@ -39,7 +39,6 @@ limitations under the License.
label {
color: var(--deemphasized-text-color);
display: inline-block;
font-weight: var(--font-weight-bold);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

16
polygerrit-ui/app/elements/shared/gr-label-info/gr-label-info.html
View File

@@ -40,8 +40,9 @@ limitations under the License.
display: flex;
justify-content: center;
margin-right: var(--spacing-s);
padding: var(--spacing-xxs) var(--spacing-m);
padding: 0;
@apply --vote-chip-styles;
border-width: 0;
}
.max {
background-color: var(--vote-color-approved);
@@ -59,16 +60,17 @@ limitations under the License.
display: none;
}
td {
vertical-align: middle;
vertical-align: top;
}
tr {
min-height: 2.25em;
min-height: var(--line-height-normal);
}
gr-button {
vertical-align: top;
--gr-button: {
height: 2em;
height: var(--line-height-normal);
width: var(--line-height-normal);
padding: 0;
width: 2em;
}
}
gr-button[disabled] iron-icon {
@@ -78,8 +80,8 @@ limitations under the License.
margin-right: var(--spacing-xs);
}
iron-icon {
height: 1.2em;
width: 1.2em;
height: calc(var(--line-height-normal) - 2px);
width: calc(var(--line-height-normal) - 2px);
}
.labelValueContainer:not(:first-of-type) td {
padding-top: var(--spacing-s);

27
polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea.html
View File

@@ -35,6 +35,9 @@ limitations under the License.
}
:host(.monospace) {
font-family: var(--monospace-font-family);
font-size: var(--font-size-mono);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-mono);
}
#emojiSuggestions {
font-family: var(--font-family);
@@ -59,6 +62,10 @@ limitations under the License.
/** This is needed for firefox */
--iron-autogrow-textarea_-_white-space: pre-wrap;
/* iron-autogrow-textarea has a "-webkit-appearance: textarea" :host
css rule, which prevents overriding the border color. Clear that. */
-webkit-appearance: none;
}
#textarea.noBorder {
border: none;
@@ -88,15 +95,17 @@ limitations under the License.
on-dropdown-closed="_resetEmojiDropdown"
on-item-selected="_handleEmojiSelect">
</gr-autocomplete-dropdown>
<iron-autogrow-textarea
id="textarea"
autocomplete="[[autocomplete]]"
placeholder=[[placeholder]]
disabled="[[disabled]]"
rows="[[rows]]"
max-rows="[[maxRows]]"
value="{{text}}"
on-bind-value-changed="_onValueChanged"></iron-autogrow-textarea>
<div id="borderWrapper">
<iron-autogrow-textarea
id="textarea"
autocomplete="[[autocomplete]]"
placeholder=[[placeholder]]
disabled="[[disabled]]"
rows="[[rows]]"
max-rows="[[maxRows]]"
value="{{text}}"
on-bind-value-changed="_onValueChanged"></iron-autogrow-textarea>
</div>
<gr-reporting id="reporting"></gr-reporting>
</template>
<script src="gr-textarea.js"></script>

2
polygerrit-ui/app/styles/gr-change-list-styles.html
View File

@@ -96,7 +96,7 @@ limitations under the License.
text-decoration: underline;
}
.cell {
height: 2.25rem;
padding: var(--spacing-s) 0;
}
.star {
padding: 0;

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

@@ -33,10 +33,9 @@ limitations under the License.
.title {
color: var(--deemphasized-text-color);
font-weight: var(--font-weight-bold);
max-width: 20em;
padding-left: var(--metadata-horizontal-padding);
padding-right: var(--spacing-m);
padding-right: var(--metadata-horizontal-padding);
word-break: break-word;
}

4
polygerrit-ui/app/styles/main.css
View File

@@ -26,10 +26,10 @@ html {
-webkit-text-size-adjust: none;
/*
* Default browser fonts are 16px. We want users with default settings to see
* a base font of 13px. 13/16 = .8125. This needs to be in html because
* a base font of 14px. 14/16 = .875. This needs to be in html because
* can use rems based on this font-size throughout the app.
*/
font-size: .8125em;
font-size: .875em;
}
html,
body {

23
polygerrit-ui/app/styles/themes/app-theme.html
View File

@@ -75,17 +75,18 @@ html {
/* fonts */
--font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
--monospace-font-family: 'Roboto Mono', Menlo, 'Lucida Console', Monaco, monospace;
--font-size-small: .92rem; /* 12px */
--font-size-normal: 1rem; /* 13px */
--font-size-h3: 1.154rem; /* 15px */
--font-size-h2: 1.5rem; /* 19.5px */
--font-size-h1: 2rem; /* 26px */
--line-height-mono: 16px;
--line-height-small: 1.4; /* 16.8px */
--line-height-normal: 1.4; /* 18.2px */
--line-height-h3: 1.4; /* 21.0px */
--line-height-h2: 1.4; /* 27.3px */
--line-height-h1: 1.4; /* 36.4px */
--font-size-mono: 12px; /* 12px */
--font-size-small: .857rem; /* 12px */
--font-size-normal: 1rem; /* 14px */
--font-size-h3: 1.143rem; /* 16px */
--font-size-h2: 1.429rem; /* 20px */
--font-size-h1: 1.714rem; /* 24px */
--line-height-mono: 1.334; /* 16px */
--line-height-small: 1.143rem; /* 16px */
--line-height-normal: 1.429rem; /* 20px */
--line-height-h3: 1.714rem; /* 24px */
--line-height-h2: 2rem; /* 28px */
--line-height-h1: 2.286rem; /* 32px */
--font-weight-normal: 400;
--font-weight-bold: 500;