Enhance the UI of code rendered in comments
Use a background color and a border for code, similar to
chat.google.com.
Also fix a bug where all the <gr-linked-text> elements in one
paragraph were using display:inline-block, but they have to use
display:inline.
And when using display:inline you have to be careful about the
white space in the HTML template. So remove white space such that
we won't get unwanted trailing white space.
Before https://imgur.com/a/BkxIEFu
After https://imgur.com/a/ryY7YLY
After Dark https://imgur.com/a/2nZw8Dh
Change-Id: I37b640cac1697c39800975aa4d9ad21d3201d003
diff --git a/polygerrit-ui/app/elements/shared/gr-formatted-text/gr-formatted-text.ts b/polygerrit-ui/app/elements/shared/gr-formatted-text/gr-formatted-text.ts
index b2d5429..417d7fb 100644
--- a/polygerrit-ui/app/elements/shared/gr-formatted-text/gr-formatted-text.ts
+++ b/polygerrit-ui/app/elements/shared/gr-formatted-text/gr-formatted-text.ts
@@ -109,7 +109,6 @@
:host([noTrailingMargin]) gr-linked-text.pre:last-child {
margin: 0;
}
- code,
blockquote {
border-left: 1px solid #aaa;
padding: 0 var(--spacing-m);
@@ -117,7 +116,11 @@
code {
display: block;
white-space: pre-wrap;
- color: var(--deemphasized-text-color);
+ background-color: var(--background-color-secondary);
+ border: 1px solid var(--border-color);
+ border-left-width: var(--spacing-s);
+ margin: var(--spacing-m) 0;
+ padding: var(--spacing-s) var(--spacing-m);
}
li {
list-style-type: disc;
@@ -127,8 +130,12 @@
gr-linked-text.pre {
font-family: var(--monospace-font-family);
font-size: var(--font-size-code);
- /* usually 16px = 12px + 4px */
- line-height: calc(var(--font-size-code) + var(--spacing-s));
+ line-height: var(--line-height-mono);
+ }
+ gr-linked-text.pre {
+ background-color: var(--background-color-secondary);
+ border: 1px solid var(--border-color);
+ padding: 1px var(--spacing-s);
}
`,
];
diff --git a/polygerrit-ui/app/elements/shared/gr-linked-text/gr-linked-text_html.ts b/polygerrit-ui/app/elements/shared/gr-linked-text/gr-linked-text_html.ts
index 88ead45..1893d14 100644
--- a/polygerrit-ui/app/elements/shared/gr-linked-text/gr-linked-text_html.ts
+++ b/polygerrit-ui/app/elements/shared/gr-linked-text/gr-linked-text_html.ts
@@ -16,13 +16,12 @@
*/
import {html} from '@polymer/polymer/lib/utils/html-tag';
-export const htmlTemplate = html`
- <style>
+export const htmlTemplate = html`<style>
:host {
display: block;
}
:host([inline]) {
- display: inline-block;
+ display: inline;
}
:host([pre]) span {
white-space: var(--linked-text-white-space, pre-wrap);
@@ -35,7 +34,5 @@
}
a {
color: var(--link-color);
- }
- </style>
- <span id="output"></span>
-`;
+ }</style
+ ><span id="output"></span>`;
