opendev/gerrit
Code Issues Proposed changes

Use the same font everywhere in gr-diff

Browse Source 
Pulls the monospace font rule in gr-diff into :host. The monospace font
should apply to everywhere by default, e.g. also to the context control
rows.

Before https://i.imgur.com/oMSfhC5.png
After: https://i.imgur.com/2PqhxKf.png

Also fix the black color of the hyphens in the context control rows.

Change-Id: I8ee16b46da6dd0454d0b8991cc0836d7a4550f8d
This commit is contained in:
Ben Rohlfs
2019-10-24 17:47:40 +02:00
committed by David Pursehouse
parent 3f7790a71f
commit 5259b3adfe
2 changed files with 7 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -42,6 +42,11 @@ limitations under the License.
max-width: var(--content-width, 80ch); max-width: var(--content-width, 80ch);
white-space: normal; white-space: normal;
} }
:host {
font-family: var(--monospace-font-family, ''), 'Roboto Mono';
font-size: var(--font-size, 12px);
line-height: var(--line-height-mono, 16px);
}
.thread-group { .thread-group {
display: block; display: block;
@@ -106,8 +111,6 @@ limitations under the License.
} }
.lineNum, .lineNum,
.content { .content {
/* Set font size based the user's diff preference. */
font-size: var(--font-size, var(--font-size-normal));
vertical-align: top; vertical-align: top;
white-space: pre; white-space: pre;
} }
@@ -184,6 +187,7 @@ limitations under the License.
.contextControl { .contextControl {
background-color: var(--diff-context-control-background-color); background-color: var(--diff-context-control-background-color);
border: 1px solid var(--diff-context-control-border-color); border: 1px solid var(--diff-context-control-border-color);
color: var(--diff-context-control-color);
} }
.contextControl gr-button { .contextControl gr-button {
display: inline-block; display: inline-block;
@@ -225,8 +229,6 @@ limitations under the License.
background-color: var(--table-header-background-color); background-color: var(--table-header-background-color);
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
color: var(--link-color); color: var(--link-color);
font-family: var(--monospace-font-family);
font-size: var(--font-size, var(--font-size-normal));
padding: var(--spacing-m) 0 var(--spacing-m) 48px; padding: var(--spacing-m) 0 var(--spacing-m) 48px;
} }
#loadingError, #loadingError,
@@ -254,8 +256,6 @@ limitations under the License.
} }
td.blame { td.blame {
display: none; display: none;
font-family: var(--font-family);
font-size: var(--font-size, var(--font-size-normal));
padding: 0 var(--spacing-m); padding: 0 var(--spacing-m);
white-space: pre; white-space: pre;
} }
@@ -278,11 +278,6 @@ limitations under the License.
overflow: hidden; overflow: hidden;
width: 200px; width: 200px;
} }
/** Since the line limit position is determined by charachter size, blank
lines also need to have the same font size as everything else */
.full-width .blank {
font-size: var(--font-size, var(--font-size-normal));
}
/** Support the line length indicator **/ /** Support the line length indicator **/
.full-width td.content, .full-width td.content,
.full-width td.blank { .full-width td.blank {

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

@@ -80,6 +80,7 @@ html {
--font-size-h3: 1.154rem; /* 15px */ --font-size-h3: 1.154rem; /* 15px */
--font-size-h2: 1.5rem; /* 19.5px */ --font-size-h2: 1.5rem; /* 19.5px */
--font-size-h1: 2rem; /* 26px */ --font-size-h1: 2rem; /* 26px */
--line-height-mono: 16px;
--line-height-small: 1.4; /* 16.8px */ --line-height-small: 1.4; /* 16.8px */
--line-height-normal: 1.4; /* 18.2px */ --line-height-normal: 1.4; /* 18.2px */
--line-height-h3: 1.4; /* 21.0px */ --line-height-h3: 1.4; /* 21.0px */