opendev/gerrit
Code Issues Proposed changes

Refactor edit textarea into gr-default-editor

Browse Source 
Done to keep with the event-based pattern of keeping track of edits, as
opposed to the existing mechanism of two-way databinding.

Bug: Issue 4437
Change-Id: Iec35538d9d163a983ecd405e4cd52ab5a41d7772
This commit is contained in:
Kasper Nilsson
2017-12-19 14:54:15 -08:00
parent 86fb8911f9
commit 8819114ecf
6 changed files with 137 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
polygerrit-ui/app/elements/edit/gr-default-editor/gr-default-editor.html Normal file
View File

@@ -0,0 +1,43 @@
<!--
Copyright (C) 2017 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="../../../styles/shared-styles.html">
<dom-module id="gr-default-editor">
<template>
<style include="shared-styles">
textarea {
border: 1px solid #ddd;
border-radius: 3px;
box-sizing: border-box;
font-family: var(--monospace-font-family);
min-height: 60vh;
resize: none;
white-space: pre;
width: 100%;
}
textarea:focus {
outline: none;
}
</style>
<textarea
id="textarea"
value="[[fileContent]]"
on-input="_handleTextareaInput"></textarea>
</template>
<script src="gr-default-editor.js"></script>
</dom-module>

35
polygerrit-ui/app/elements/edit/gr-default-editor/gr-default-editor.js Normal file
View File

@@ -0,0 +1,35 @@
// Copyright (C) 2017 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.
(function() {
'use strict';
Polymer({
is: 'gr-default-editor',
/**
* Fired when the content of the editor changes.
*
* @event content-change
*/
properties: {
fileContent: String,
},
_handleTextareaInput(e) {
this.dispatchEvent(new CustomEvent('content-change',
{detail: {value: e.target.value}, bubbles: true}));
},
});
})();

55
polygerrit-ui/app/elements/edit/gr-default-editor/gr-default-editor_test.html Normal file
View File

@@ -0,0 +1,55 @@
<!--
Copyright (C) 2017 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.
-->
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>gr-default-editor</title>
<script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<script src="../../../bower_components/web-component-tester/browser.js"></script>
<link rel="import" href="../../../test/common-test-setup.html"/>
<link rel="import" href="gr-default-editor.html">
<script>void(0);</script>
<test-fixture id="basic">
<template>
<gr-default-editor></gr-default-editor>
</template>
</test-fixture>
<script>
suite('gr-default-editor tests', () => {
let element;
setup(() => {
element = fixture('basic');
element.fileContent = '';
});
test('fires content-change event', done => {
const contentChangedHandler = e => {
assert.equal(e.detail.value, 'test');
done();
};
const textarea = element.$.textarea;
element.addEventListener('content-change', contentChangedHandler);
textarea.value = 'test';
textarea.dispatchEvent(new CustomEvent('input',
{target: textarea, bubbles: true}));
});
});
</script>

17
polygerrit-ui/app/elements/edit/gr-editor-view/gr-editor-view.html
View File

@@ -26,9 +26,9 @@ limitations under the License.
<link rel="import" href="../../shared/gr-editable-label/gr-editable-label.html">
<link rel="import" href="../../shared/gr-fixed-panel/gr-fixed-panel.html">
<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
<link rel="import" href="../gr-default-editor/gr-default-editor.html">
<link rel="import" href="../../../styles/shared-styles.html">
<dom-module id="gr-editor-view">
<template>
<style include="shared-styles">
@@ -54,19 +54,6 @@ limitations under the License.
.textareaWrapper {
margin: var(--default-horizontal-margin);
}
.textareaWrapper textarea {
border: 1px solid #ddd;
border-radius: 3px;
box-sizing: border-box;
font-family: var(--monospace-font-family);
min-height: 60vh;
resize: none;
white-space: pre;
width: 100%;
}
.textareaWrapper textarea:focus {
outline: none;
}
.textareaWrapper .editButtons {
display: none;
}
@@ -100,7 +87,7 @@ limitations under the License.
<gr-endpoint-param name="fileContent" value="[[_newContent]]"></gr-endpoint-param>
<gr-endpoint-param name="prefs" value="[[_prefs]]"></gr-endpoint-param>
<gr-endpoint-param name="fileType" value="[[_type]]"></gr-endpoint-param>
<textarea value="{{_newContent::input}}" id="file"></textarea>
<gr-default-editor id="file" file-content="[[_newContent]]"></gr-default-editor>
</gr-endpoint-decorator>
</div>
<gr-rest-api-interface id="restAPI"></gr-rest-api-interface>

5
polygerrit-ui/app/elements/edit/gr-editor-view/gr-editor-view_test.html
View File

@@ -127,7 +127,7 @@ suite('gr-editor-view tests', () => {
});
test('initial load', () => {
assert.equal(element.$.file.value, originalText);
assert.equal(element.$.file.fileContent, originalText);
assert.isTrue(element.$.save.hasAttribute('disabled'));
});
@@ -137,7 +137,6 @@ suite('gr-editor-view tests', () => {
element._newContent = newText;
flushAsynchronousOperations();
assert.equal(element.$.file.value, newText);
assert.isFalse(element.$.save.hasAttribute('disabled'));
MockInteractions.tap(element.$.save);
@@ -157,7 +156,6 @@ suite('gr-editor-view tests', () => {
element._newContent = newText;
flushAsynchronousOperations();
assert.equal(element.$.file.value, newText);
assert.isFalse(element.$.save.hasAttribute('disabled'));
MockInteractions.tap(element.$.save);
@@ -174,7 +172,6 @@ suite('gr-editor-view tests', () => {
element._newContent = newText;
flushAsynchronousOperations();
assert.equal(element.$.file.value, newText);
assert.isFalse(element.$.save.hasAttribute('disabled'));
MockInteractions.tap(element.$.cancel);

1
polygerrit-ui/app/test/index.html
View File

@@ -104,6 +104,7 @@ limitations under the License.
'diff/gr-selection-action-box/gr-selection-action-box_test.html',
'diff/gr-syntax-layer/gr-syntax-layer_test.html',
'diff/gr-syntax-lib-loader/gr-syntax-lib-loader_test.html',
'edit/gr-default-editor/gr-default-editor_test.html',
'edit/gr-edit-controls/gr-edit-controls_test.html',
'edit/gr-edit-file-controls/gr-edit-file-controls_test.html',
'edit/gr-editor-view/gr-editor-view_test.html',