Skip to content

Commit

Permalink
Allow editing submitted input for Compose
Browse files Browse the repository at this point in the history 
The #editContainer takes over the full dialog's existing height, sort
of like a dialog over the existing submitted input and results.

http://screencast/cast/NTg2MTQ3NjY2MDE1MDI3Mnw2MTZkOTI2ZS01Nw

Bug: b:305099595
Change-Id: I1847922a331167c18d61a7d7f77fe48a0b1d4e96
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4977705
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1215981}
  • Loading branch information
John Lee authored and Chromium LUCI CQ committed Oct 27, 2023
1 parent 70ffe8a commit 571c7f4
Show file tree
Hide file tree
Showing 7 changed files with 322 additions and 94 deletions.
202 changes: 124 additions & 78 deletions chrome/browser/resources/compose/app.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
<style include="cr-hidden-style md-select">
:host {
--gap-between-sections_: 16px;
--padding_: 20px;
display: flex;
flex-direction: column;
gap: 16px;
padding: 20px 0;
gap: var(--gap-between-sections_);
padding: var(--padding_) 0;
}

a {
Expand All @@ -14,7 +16,7 @@
display: flex;
height: 24px;
align-items: center;
padding: 0 20px;
padding: 0 var(--padding_);
}

h1 {
Expand All @@ -31,6 +33,13 @@
margin-inline-end: -6px;
}

#bodyAndFooter {
display: flex;
flex-direction: column;
gap: var(--gap-between-sections_);
position: relative;
}

#body {
--scrollbar-width_: 4px;
box-sizing: border-box;
Expand Down Expand Up @@ -109,7 +118,7 @@
.footer {
align-items: center;
display: flex;
padding: 0 20px;
padding: 0 var(--padding_);
justify-content: flex-end;
}

Expand All @@ -131,6 +140,30 @@
.footer cr-button {
margin-inline-start: 8px;
}

:host-context([is-editing-submitted-input_]) #body,
:host-context([is-editing-submitted-input_]) .footer {
visibility: hidden;
}

#editContainer {
box-sizing: border-box;
display: flex;
flex-direction: column;
position: absolute;
gap: var(--gap-between-sections_);
inset: 0;
padding: 0 var(--padding_);
}

#editContainer compose-textarea {
flex: 1;
}

#editContainer .footer {
padding: 0;
visibility: visible;
}
</style>

<div id="heading">
Expand All @@ -139,91 +172,104 @@ <h1>$i18n{dialogTitle}</h1>
</cr-icon-button>
</div>

<div id="body" scrollable>
<compose-textarea id="textarea"
value="{{input_}}"
readonly="[[submitted_]]"
allow-exiting-readonly-mode="[[!loading_]]">
</compose-textarea>

<div id="loading" hidden="[[!loading_]]">
<cr-loading-gradient>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="43">
<clipPath>
<rect x="0" y="0" width="100%" height="11" rx="4"></rect>
<rect x="0" y="16" width="100%" height="10.8333" rx="4"></rect>
<rect x="0" y="32" width="75%" height="11" rx="4"></rect>
</clipPath>
</svg>
</cr-loading-gradient>
</div>
<div id="bodyAndFooter">
<div id="body" scrollable>
<compose-textarea id="textarea"
value="{{input_}}"
readonly="[[submitted_]]"
allow-exiting-readonly-mode="[[!loading_]]"
on-edit-click="onEditClick_">
</compose-textarea>

<div id="resultContainer" hidden="[[!hasSuccessfulResponse_(response_)]]">
[[response_.result]]

<div id="resultOptions">

<select class="md-select" id="lengthMenu" value="[[selectedLength_]]"
on-change="onLengthChanged_">
<template is="dom-repeat" items="[[lengthOptions_]]">
<option value="[[item]]">
[[getLengthOptionLabel_(item)]]
</option>
</template>
</select>
<select class="md-select" id="toneMenu" value="[[selectedTone_]]"
on-change="onToneChanged_">
<template is="dom-repeat" items="[[toneOptions_]]">
<option value="[[item]]">
[[getToneOptionLabel_(item)]]
</option>
</template>
</select>
<div id="loading" hidden="[[!loading_]]">
<cr-loading-gradient>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="43">
<clipPath>
<rect x="0" y="0" width="100%" height="11" rx="4"></rect>
<rect x="0" y="16" width="100%" height="10.8333" rx="4"></rect>
<rect x="0" y="32" width="75%" height="11" rx="4"></rect>
</clipPath>
</svg>
</cr-loading-gradient>
</div>

<div class="icon-buttons-row">
<cr-icon-button id="undoButton" iron-icon="compose:undo"
disabled="[[!undoEnabled_]]"
on-click="onUndoClick_">
</cr-icon-button>
<cr-icon-button id="refreshButton" iron-icon="compose:refresh"
on-click="onSubmit_">
</cr-icon-button>
<div id="resultContainer" hidden="[[!hasSuccessfulResponse_(response_)]]">
[[response_.result]]

<div id="resultOptions">
<select class="md-select" id="lengthMenu" value="[[selectedLength_]]"
on-change="onLengthChanged_">
<template is="dom-repeat" items="[[lengthOptions_]]">
<option value="[[item]]">
[[getLengthOptionLabel_(item)]]
</option>
</template>
</select>
<select class="md-select" id="toneMenu" value="[[selectedTone_]]"
on-change="onToneChanged_">
<template is="dom-repeat" items="[[toneOptions_]]">
<option value="[[item]]">
[[getToneOptionLabel_(item)]]
</option>
</template>
</select>

<div class="icon-buttons-row">
<cr-icon-button id="undoButton" iron-icon="compose:undo"
disabled="[[!undoEnabled_]]"
on-click="onUndoClick_">
</cr-icon-button>
<cr-icon-button id="refreshButton" iron-icon="compose:refresh"
on-click="onSubmit_">
</cr-icon-button>
</div>
</div>
</div>
</div>
</div>

<div id="submitFooter" class="footer" hidden$="[[submitted_]]">
<div class="footer-text">
<div>
$i18nRaw{inputFooter}
<div id="submitFooter" class="footer" hidden$="[[submitted_]]">
<div class="footer-text">
<div>$i18nRaw{inputFooter}</div>
</div>
<cr-button id="submitButton" class="action-button" on-click="onSubmit_"
disabled="[[!isSubmitEnabled_]]">
$i18n{submitButton}
</cr-button>
</div>
<cr-button id="submitButton" class="action-button" on-click="onSubmit_"
disabled="[[!isSubmitEnabled_]]">
$i18n{submitButton}
</cr-button>
</div>

<div id="resultFooter" class="footer"
hidden="[[!hasSuccessfulResponse_(response_)]]">
<div class="footer-text">
<div>
$i18nRaw{resultFooter}
</div>
<div id="resultFooter" class="footer"
hidden="[[!hasSuccessfulResponse_(response_)]]">
<div class="footer-text">
<div>$i18nRaw{resultFooter}</div>

<div class="icon-buttons-row">
<cr-icon-button iron-icon="cr:thumbs-up"></cr-icon-button>
<cr-icon-button iron-icon="cr:thumbs-down" on-click="onThumbsDown_">
</cr-icon-button>
<div class="icon-buttons-row">
<cr-icon-button iron-icon="cr:thumbs-up"></cr-icon-button>
<cr-icon-button iron-icon="cr:thumbs-down" on-click="onThumbsDown_">
</cr-icon-button>
</div>
</div>
<cr-button id="insertButton" class="action-button" on-click="onAccept_">
$i18n{insertButton}
</cr-button>
</div>
<cr-button id="insertButton" class="action-button" on-click="onAccept_">
$i18n{insertButton}
</cr-button>
</div>

<div id="errorFooter" class="footer"
hidden="[[!hasFailedResponse_(response_)]]">
<div class="footer-text">[[failedResponseErrorText_(response_)]]</div>
<div id="errorFooter" class="footer"
hidden="[[!hasFailedResponse_(response_)]]">
<div class="footer-text">[[failedResponseErrorText_(response_)]]</div>
</div>

<div id="editContainer" hidden$="[[!isEditingSubmittedInput_]]">
<compose-textarea id="editTextarea" value="{{editedInput_}}">
</compose-textarea>
<div class="footer">
<cr-button id="cancelEditButton" class="tonal-button"
on-click="onCancelEditClick_">
$i18n{editCancelButton}
</cr-button>
<cr-button id="submitEditButton" class="action-button"
on-click="onSubmitEdit_" disabled$="[[!isEditSubmitEnabled_]]">
$i18n{editUpdateButton}
</cr-button>
</div>
</div>
</div>

0 comments on commit 571c7f4

Please sign in to comment.