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
Download Patch File Download Diff File Expand all files Collapse all files

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;