d6fb4f93ad
Previously, on Android devices, when the gr-reply-dialog overlay is opene, important contents could get cut off, including the submit and cancel buttons. This change makes the reply dialog scrollable and full width on small screens. The max-height is also 100% so if scrolling is required, the overlay will appear full screen. Bug: Issue 4944 Change-Id: Ibf265a3039129363e479cbb3c29cb887aa23d889
263 lines
8.3 KiB
HTML
263 lines
8.3 KiB
HTML
<!--
|
|
Copyright (C) 2015 The Android Open Source Project
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
-->
|
|
|
|
<link rel="import" href="../../../bower_components/polymer/polymer.html">
|
|
<link rel="import" href="../../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
|
|
<link rel="import" href="../../../bower_components/iron-selector/iron-selector.html">
|
|
<link rel="import" href="../../../behaviors/rest-client-behavior.html">
|
|
<link rel="import" href="../../shared/gr-account-chip/gr-account-chip.html">
|
|
<link rel="import" href="../../shared/gr-button/gr-button.html">
|
|
<link rel="import" href="../../shared/gr-js-api-interface/gr-js-api-interface.html">
|
|
<link rel="import" href="../../shared/gr-overlay/gr-overlay.html">
|
|
<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
|
|
<link rel="import" href="../../shared/gr-storage/gr-storage.html">
|
|
<link rel="import" href="../gr-account-list/gr-account-list.html">
|
|
|
|
<dom-module id="gr-reply-dialog">
|
|
<template>
|
|
<style>
|
|
:host {
|
|
display: block;
|
|
max-height: 90vh;
|
|
}
|
|
:host([disabled]) {
|
|
pointer-events: none;
|
|
}
|
|
:host([disabled]) .container {
|
|
opacity: .5;
|
|
}
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: 90vh;
|
|
}
|
|
section {
|
|
border-top: 1px solid #ddd;
|
|
padding: .5em .75em;
|
|
width: 100%;
|
|
}
|
|
.peopleContainer,
|
|
.labelsContainer,
|
|
.actionsContainer {
|
|
flex-shrink: 0;
|
|
}
|
|
.peopleContainer {
|
|
display: table;
|
|
}
|
|
.peopleList {
|
|
display: flex;
|
|
padding-top: .1em;
|
|
}
|
|
.peopleListLabel {
|
|
color: #666;
|
|
min-width: 7em;
|
|
padding-right: .5em;
|
|
}
|
|
gr-account-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
#reviewerConfirmationOverlay {
|
|
padding: 1em;
|
|
text-align: center;
|
|
}
|
|
.reviewerConfirmationButtons {
|
|
margin-top: 1em;
|
|
}
|
|
.groupName {
|
|
font-weight: bold;
|
|
}
|
|
.groupSize {
|
|
font-style: italic;
|
|
}
|
|
.textareaContainer {
|
|
display: flex;
|
|
flex: 1;
|
|
min-height: 6em;
|
|
position: relative;
|
|
}
|
|
iron-autogrow-textarea {
|
|
padding: 0;
|
|
font-family: var(--monospace-font-family);
|
|
}
|
|
.message {
|
|
border: none;
|
|
width: 100%;
|
|
}
|
|
.labelContainer:not(:first-of-type) {
|
|
margin-top: .5em;
|
|
}
|
|
.labelName {
|
|
display: inline-block;
|
|
min-width: 7em;
|
|
margin-right: .5em;
|
|
white-space: nowrap;
|
|
}
|
|
iron-selector {
|
|
display: inline-flex;
|
|
}
|
|
iron-selector > gr-button {
|
|
margin-right: .25em;
|
|
}
|
|
iron-selector > gr-button:first-of-type {
|
|
border-top-left-radius: 2px;
|
|
border-bottom-left-radius: 2px;
|
|
}
|
|
iron-selector > gr-button:last-of-type {
|
|
border-top-right-radius: 2px;
|
|
border-bottom-right-radius: 2px;
|
|
}
|
|
iron-selector > gr-button.iron-selected {
|
|
background-color: #ddd;
|
|
}
|
|
.draftsContainer {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
}
|
|
.draftsContainer h3 {
|
|
margin-top: .25em;
|
|
}
|
|
.actionsContainer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.action:link,
|
|
.action:visited {
|
|
color: #00e;
|
|
}
|
|
@media screen and (max-width: 50em) {
|
|
:host {
|
|
max-height: none;
|
|
}
|
|
.container {
|
|
max-height: none;
|
|
}
|
|
}
|
|
</style>
|
|
<div class="container">
|
|
<section class="peopleContainer">
|
|
<div class="peopleList">
|
|
<div class="peopleListLabel">Owner</div>
|
|
<gr-account-chip account="[[_owner]]">
|
|
<gr-account-chip>
|
|
</div>
|
|
</section>
|
|
<section class="peopleContainer">
|
|
<div class="peopleList">
|
|
<div class="peopleListLabel">Reviewers</div>
|
|
<gr-account-list
|
|
id="reviewers"
|
|
accounts="[[_reviewers]]"
|
|
change="[[change]]"
|
|
filter="[[filterReviewerSuggestion]]"
|
|
pending-confirmation="{{_reviewerPendingConfirmation}}"
|
|
placeholder="Add reviewer...">
|
|
</gr-account-list>
|
|
</div>
|
|
<template is="dom-if" if="[[serverConfig.note_db_enabled]]">
|
|
<div class="peopleList">
|
|
<div class="peopleListLabel">CC</div>
|
|
<gr-account-list
|
|
id="ccs"
|
|
accounts="[[_ccs]]"
|
|
change="[[change]]"
|
|
filter="[[filterReviewerSuggestion]]"
|
|
pending-confirmation="{{_ccPendingConfirmation}}"
|
|
placeholder="Add CC...">
|
|
</gr-account-list>
|
|
</div>
|
|
</template>
|
|
<gr-overlay
|
|
id="reviewerConfirmationOverlay"
|
|
on-iron-overlay-canceled="_cancelPendingReviewer"
|
|
with-backdrop>
|
|
<div class="reviewerConfirmation">
|
|
Group
|
|
<span class="groupName">
|
|
{{_reviewerPendingConfirmation.group.name}}
|
|
</span>
|
|
has
|
|
<span class="groupSize">
|
|
{{_reviewerPendingConfirmation.count}}
|
|
</span>
|
|
members.
|
|
<br>
|
|
Are you sure you want to add them all?
|
|
</div>
|
|
<div class="reviewerConfirmationButtons">
|
|
<gr-button on-tap="_confirmPendingReviewer">Yes</gr-button>
|
|
<gr-button on-tap="_cancelPendingReviewer">No</gr-button>
|
|
</div>
|
|
</gr-overlay>
|
|
</section>
|
|
<section class="textareaContainer">
|
|
<iron-autogrow-textarea
|
|
id="textarea"
|
|
class="message"
|
|
autocomplete="on"
|
|
placeholder="Say something..."
|
|
disabled="{{disabled}}"
|
|
rows="4"
|
|
max-rows="15"
|
|
bind-value="{{draft}}"
|
|
on-bind-value-changed="_handleTextareaChanged">
|
|
</iron-autogrow-textarea>
|
|
</section>
|
|
<section class="labelsContainer">
|
|
<template is="dom-if" if="[[_isClosed(change)]]" id="labelDisabled">
|
|
<div class="labelDisabledMessage">
|
|
Setting labels are disabled for this change because it has been
|
|
closed.
|
|
</div>
|
|
</template>
|
|
<template is="dom-repeat"
|
|
items="[[_labels]]" as="label">
|
|
<div class="labelContainer">
|
|
<span class="labelName">[[label.name]]</span>
|
|
<iron-selector data-label$="[[label.name]]"
|
|
selected="[[_computeIndexOfLabelValue(change.labels, permittedLabels, label)]]">
|
|
<template is="dom-repeat"
|
|
items="[[_computePermittedLabelValues(permittedLabels, label.name)]]"
|
|
as="value">
|
|
<gr-button has-tooltip data-value$="[[value]]"
|
|
title$="[[_computeLabelValueTitle(change.labels, label.name, value)]]">[[value]]</gr-button>
|
|
</template>
|
|
</iron-selector>
|
|
</div>
|
|
</template>
|
|
</section>
|
|
<section class="draftsContainer" hidden$="[[_computeHideDraftList(diffDrafts)]]">
|
|
<h3>[[_computeDraftsTitle(diffDrafts)]]</h3>
|
|
<gr-comment-list
|
|
comments="[[diffDrafts]]"
|
|
change-num="[[change._number]]"
|
|
patch-num="[[patchNum]]"></gr-comment-list>
|
|
</section>
|
|
<section class="actionsContainer">
|
|
<gr-button primary class="action send" on-tap="_sendTapHandler">Send</gr-button>
|
|
<gr-button
|
|
id="cancelButton"
|
|
class="action cancel"
|
|
on-tap="_cancelTapHandler">Cancel</gr-button>
|
|
</section>
|
|
</div>
|
|
<gr-js-api-interface id="jsAPI"></gr-js-api-interface>
|
|
<gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
|
|
<gr-storage id="storage"></gr-storage>
|
|
</template>
|
|
<script src="gr-reply-dialog.js"></script>
|
|
</dom-module>
|