From 764d4f8cf451494338c0e4bd5be63fdd73837c87 Mon Sep 17 00:00:00 2001 From: Kohei Yoshino Date: Tue, 16 Oct 2018 16:17:05 -0400 Subject: [PATCH] Bug 1496004 - Improve layout of attachment detail page, hide comment form when custom form is inserted --- extensions/FlagTypeComment/web/js/ftc.js | 10 ++++- extensions/FlagTypeComment/web/styles/ftc.css | 28 +++++++++++-- .../hook/flag/list-requestee.html.tmpl | 2 +- extensions/Review/web/styles/review.css | 5 +++ skins/standard/attachment.css | 41 ++++++++++++++++--- template/en/default/attachment/edit.html.tmpl | 29 ++++++------- 6 files changed, 87 insertions(+), 28 deletions(-) diff --git a/extensions/FlagTypeComment/web/js/ftc.js b/extensions/FlagTypeComment/web/js/ftc.js index 2682721bc..291b5ff53 100644 --- a/extensions/FlagTypeComment/web/js/ftc.js +++ b/extensions/FlagTypeComment/web/js/ftc.js @@ -26,6 +26,9 @@ Bugzilla.FlagTypeComment = class FlagTypeComment { if (this.$flags && this.$comment) { this.selects = [...this.$flags.querySelectorAll('.flag_select')]; this.selects.forEach($select => $select.addEventListener('change', () => this.flag_onselect($select))); + this.$fieldset_wrapper = this.$flags.parentElement.appendChild(document.createElement('div')); + this.$fieldset_wrapper.id = 'approval-request-fieldset-wrapper'; + this.$comment_wrapper = document.querySelector('#smallCommentFrame') || this.$comment.parentElement; this.$comment.form.addEventListener('submit', () => this.form_onsubmit()); } } @@ -49,7 +52,7 @@ Bugzilla.FlagTypeComment = class FlagTypeComment { * @type {Array} */ get inserted_fieldsets() { - return [...this.$flags.parentElement.querySelectorAll('fieldset.approval-request')]; + return [...this.$fieldset_wrapper.querySelectorAll('fieldset.approval-request')]; } /** @@ -120,7 +123,7 @@ Bugzilla.FlagTypeComment = class FlagTypeComment { $fieldset = this.find_available_fieldset(name); if ($fieldset) { - this.$flags.parentElement.appendChild($fieldset); + this.$fieldset_wrapper.appendChild($fieldset); } } @@ -133,6 +136,9 @@ Bugzilla.FlagTypeComment = class FlagTypeComment { this.add_comment(text); } } + + // Hide the original comment form when one or more `
`s are inserted + this.$comment_wrapper.hidden = this.inserted_fieldsets.length > 0; } /** diff --git a/extensions/FlagTypeComment/web/styles/ftc.css b/extensions/FlagTypeComment/web/styles/ftc.css index 93d190935..a6ab1c18a 100644 --- a/extensions/FlagTypeComment/web/styles/ftc.css +++ b/extensions/FlagTypeComment/web/styles/ftc.css @@ -5,14 +5,30 @@ * This Source Code Form is "Incompatible With Secondary Licenses", as * defined by the Mozilla Public License, v. 2.0. */ +#approval-request-fieldset-wrapper { + margin: 0 0 0 16px; +} + +#approval-request-fieldset-wrapper:empty { + display: none; +} + fieldset.approval-request { - margin: 1em 0; + margin: 0 0 8px; +} + +fieldset.approval-request:last-child { + margin: 0; } fieldset.approval-request legend { font-weight: bold; } +fieldset.approval-request table { + width: 100%; +} + fieldset.approval-request th { padding: .4em; width: 20em; @@ -36,11 +52,11 @@ fieldset.approval-request input[type="text"] { } fieldset.approval-request input.long[type="text"] { - width: 40em; + width: 100%; } fieldset.approval-request textarea { - width: 40em; + width: 100%; min-height: 5em; font-size: inherit; line-height: inherit; @@ -56,3 +72,9 @@ fieldset.approval-request table ~ p:last-child { margin: .4em; text-align: right; } + +@media screen and (max-width: 1023px) { + #approval-request-fieldset-wrapper { + margin: 16px 0 0 0; + } +} diff --git a/extensions/Review/template/en/default/hook/flag/list-requestee.html.tmpl b/extensions/Review/template/en/default/hook/flag/list-requestee.html.tmpl index 771bc803c..da458dd18 100644 --- a/extensions/Review/template/en/default/hook/flag/list-requestee.html.tmpl +++ b/extensions/Review/template/en/default/hook/flag/list-requestee.html.tmpl @@ -8,7 +8,7 @@ [% RETURN UNLESS type.name == 'review' %] -