UI: Move depends-on field above submit-requirements
The intent is to move it closer to other core metadata items, so
that the change-info section does not look disjointed. This change
also adjusts the edit dialog to place it over other elements and
to use fonts from core for the text area.
Also, change the title name of then field from 'Depends-on' to 'DependsOn' as the original name is too long and will wrap into
the next line when the core fields have a shorter title width.
Screenshots: https://imgur.com/a/1wDNSEp
Change-Id: If44fd7ac39ec498bdc115701f877d3ea4e85be62
diff --git a/gr-depends-on-plugin/gr-depends-on-edit_html.js b/gr-depends-on-plugin/gr-depends-on-edit_html.js
index 13d98a8..7cf7b3f 100644
--- a/gr-depends-on-plugin/gr-depends-on-edit_html.js
+++ b/gr-depends-on-plugin/gr-depends-on-edit_html.js
@@ -30,13 +30,19 @@
padding: 0px;
position: var(--layout-fit_-_position);
}
- .text_area {
- min-height: 100px;
- max-height: 150px;
- }
.depends_on_edit {
display: inline;
}
+ iron-autogrow-textarea {
+ font-family: var(--monospace-font-family);
+ font-size: var(--font-size-mono);
+ line-height: var(--line-height-mono);
+ width: 50ch;
+ height: 10ch;
+ }
+ dialog {
+ z-index: 9999; /* To keep it above other elements */
+ }
</style>
<div class="depends_on_edit">
<paper-button class="edit_button" on-click="_openEditDialog">
diff --git a/gr-depends-on-plugin/gr-depends-on-plugin.js b/gr-depends-on-plugin/gr-depends-on-plugin.js
index 6c54759..985d620 100644
--- a/gr-depends-on-plugin/gr-depends-on-plugin.js
+++ b/gr-depends-on-plugin/gr-depends-on-plugin.js
@@ -125,6 +125,19 @@
this._hasError = true;
});
}
+
+ // plugin change-metadata-items don't flex with core ones as the css layout
+ // is broken in core. Until core is fixed, use below logic to set the width
+ // of the title. This is fragile though and will likely break when new core
+ // metadata types are added or the logic for how they are rendered changes.
+ _computeTitleWidthClass() {
+ if ((this.change.project.length + this.change.branch.length < 40) ||
+ (!!this.change.cherry_pick_of_change &&
+ !!this.change.cherry_pick_of_patch_set)) {
+ return 'title-long';
+ }
+ return 'title-short';
+ }
}
customElements.define(GrDependsOnPlugin.is, GrDependsOnPlugin);
diff --git a/gr-depends-on-plugin/gr-depends-on-plugin_html.js b/gr-depends-on-plugin/gr-depends-on-plugin_html.js
index 3dd5a53..faeef65 100644
--- a/gr-depends-on-plugin/gr-depends-on-plugin_html.js
+++ b/gr-depends-on-plugin/gr-depends-on-plugin_html.js
@@ -16,12 +16,22 @@
*/
export const htmlTemplate = Polymer.html`
- <style>
+ <style include="gr-change-metadata-shared-styles">
a {
color: var(--link-color);
}
- .depends_on_block {
- padding-bottom: var(--spacing-m);
+ .title {
+ padding-right: var(--spacing-xs);
+ }
+ section .title,
+ section .value {
+ padding-top: var(--spacing-s);
+ }
+ .title-short {
+ width: 74px;
+ }
+ .title-long {
+ width: 96px;
}
.depends_on_info {
display: inline;
@@ -32,14 +42,6 @@
--iron-icon-height: 18px;
--iron-icon-width: 18px;
}
- .title {
- color: var(--deemphasized-text-color);
- display: table-cell;
- vertical-align: top;
- max-width: 20em;
- min-width: 7em;
- padding-left: var(--metadata-horizontal-padding);
- }
.value {
display: table-cell;
vertical-align: top;
@@ -57,12 +59,12 @@
</style>
<div class="depends_on_block">
<section>
- <span class="title">
+ <span class$="title [[_computeTitleWidthClass()]]">
<gr-tooltip-content
has-tooltip
title="List of changes that the current change depends on."
>
- Depends-on
+ DependsOn
</gr-tooltip-content>
</span>
<span class="value">
diff --git a/gr-depends-on-plugin/plugin.js b/gr-depends-on-plugin/plugin.js
index 00b5669..89c92ba 100644
--- a/gr-depends-on-plugin/plugin.js
+++ b/gr-depends-on-plugin/plugin.js
@@ -19,5 +19,6 @@
Gerrit.install(plugin => {
plugin.registerCustomComponent(
- 'change-metadata-item', 'gr-depends-on-plugin');
+ 'change-metadata-item', 'gr-depends-on-plugin',
+ {slot: 'above-submit-requirements'});
});
