Expose line_wrapping preference as part of the API
- Make line-length indicator follow a color css variable
instead of rendering a base64 png image.
Change-Id: I3b3e6d456862983bff48a8afb42a842fa03d7491
diff --git a/polygerrit-ui/app/api/diff.ts b/polygerrit-ui/app/api/diff.ts
index 98cd4dc..7400295 100644
--- a/polygerrit-ui/app/api/diff.ts
+++ b/polygerrit-ui/app/api/diff.ts
@@ -206,6 +206,7 @@
font_size: number;
// TODO: Missing documentation
show_file_comment_button?: boolean;
+ line_wrapping?: boolean;
}
export declare interface ImageDiffPreferences {
diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff_html.ts b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff_html.ts
index 9da3bf1..d01943c 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff_html.ts
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff_html.ts
@@ -429,9 +429,16 @@
}
/** Support the line length indicator **/
.full-width td.content .contentText {
- background-image: var(--line-length-indicator);
+ /*
+ Same strategy as in https://stackoverflow.com/questions/1179928/how-can-i-put-a-vertical-line-down-the-center-of-a-div
+ */
+ background-image: linear-gradient(
+ var(--line-length-indicator-color),
+ var(--line-length-indicator-color)
+ );
+ background-size: 1px 100%;
background-position: var(--line-limit) 0;
- background-repeat: repeat-y;
+ background-repeat: no-repeat;
}
.newlineWarning {
color: var(--deemphasized-text-color);
diff --git a/polygerrit-ui/app/styles/themes/app-theme.ts b/polygerrit-ui/app/styles/themes/app-theme.ts
index d768c96..1996800 100644
--- a/polygerrit-ui/app/styles/themes/app-theme.ts
+++ b/polygerrit-ui/app/styles/themes/app-theme.ts
@@ -377,8 +377,7 @@
/* misc */
--border-radius: 4px;
--reply-overlay-z-index: 1000;
- /* Base 64 encoded 1x1px of #681da8 */
- --line-length-indicator: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2PIlF2xAgAD+AHXfBDdKAAAAABJRU5ErkJggg==');
+ --line-length-indicator-color: #681da8;
/* paper and iron component overrides */
--iron-overlay-backdrop-background-color: black;
diff --git a/polygerrit-ui/app/styles/themes/dark-theme.ts b/polygerrit-ui/app/styles/themes/dark-theme.ts
index dec438d..926b02d 100644
--- a/polygerrit-ui/app/styles/themes/dark-theme.ts
+++ b/polygerrit-ui/app/styles/themes/dark-theme.ts
@@ -230,8 +230,7 @@
--syntax-variable-color: #f77669;
/* misc */
- /* Base 64 encoded 1x1px of #d7aefb; */
- --line-length-indicator: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2O4vu73fwAIYAOAtqAXCQAAAABJRU5ErkJggg==');
+ --line-length-indicator-color: #d7aefb;
/* paper and iron component overrides */
--iron-overlay-backdrop-background-color: white;
diff --git a/polygerrit-ui/app/types/diff.ts b/polygerrit-ui/app/types/diff.ts
index b29e312..16338335 100644
--- a/polygerrit-ui/app/types/diff.ts
+++ b/polygerrit-ui/app/types/diff.ts
@@ -104,7 +104,6 @@
hide_line_numbers?: boolean;
hide_empty_pane?: boolean;
match_brackets?: boolean;
- line_wrapping?: boolean;
}
export declare type DiffPreferencesInfoKey = keyof DiffPreferencesInfo;
