opendev/gerrit
Code Issues Proposed changes

Change font-size to 14px and tweak the UI

Browse Source 
Changes the normal font-size from 13px to 14px.

Enforces 24px row height in change metadata and change requirements for
most rows. Text spans should always be 20px in height, even for icons
inputs and gr-autocomplete. Metadata titles are not bold anymore.

Converts the --line-height-* css vars from being relative to absolute.
That is extremely useful for specifying height of icons in inline layout
flow.

Reduces tab height (Files, Checks, Change Log, etc.) to 36px.

Dashboard, file list and change log rows are all targeted to have 28px
height: 20px line-height + 2*4px padding. For the change log this seems
too drastic a change, so we are keeping 36px height for now.

Reduces the vertical padding in the diff-view header.

Makes the comment thread widget nicer by replacing the border with
margin, box-shadow and border-radius. Colors the buttons blue and
reduces them to the 20px line height. Change the border color from
black to gray.

Change-Id: I3fc76c64dc42b61f05cbeb8e3a62629240571080
This commit is contained in:
Ben Rohlfs 2019-10-25 14:08:04 +02:00
parent 4f889cba0d
commit 4a809aabdc
21 changed files with 91 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
plugins/replication

@ -1 +1 @@
Subproject commit 5622267e9fe339e185c6e80978b57100476d8f25
Subproject commit 94a465e0989ff8124aca3dca8e200aeb870cc9dd

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;