mirror of
https://github.com/mirego/accent.git
synced 2024-11-10 10:09:21 +03:00
Fix review page lag by replacing TextArea component with native textarea
This commit is contained in:
Simon Prévost
parent
ad049741f0
commit
701bb97b7e
@ -68,6 +68,16 @@ export default class ConflictItem extends Component<Args> {
|
||||
this.active = true;
|
||||
}
|
||||
|
||||
@action
|
||||
toggleActive() {
|
||||
this.active = true;
|
||||
}
|
||||
|
||||
@action
|
||||
focusTextarea(element: HTMLElement) {
|
||||
element.querySelector('textarea')?.focus();
|
||||
}
|
||||
|
||||
private onLoading() {
|
||||
this.error = false;
|
||||
this.loading = true;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.conflict-item {
|
||||
transition: 0.2s ease-in-out;
|
||||
transition-property: background, border-color, transform;
|
||||
transition-property: background, border-color;
|
||||
padding: 10px;
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid transparent;
|
||||
@ -10,17 +10,12 @@
|
||||
background: var(--background-light);
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-color: var(--background-light-highlight);
|
||||
background: var(--background-light);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--background-light);
|
||||
border-color: var(--background-light-highlight);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
}
|
||||
|
||||
.item-details__column {
|
||||
@ -118,11 +113,15 @@
|
||||
|
||||
.correctButton {
|
||||
position: absolute !important;
|
||||
top: 6px !important;
|
||||
top: -10px !important;
|
||||
right: 15px !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.conflict-item.active .correctButton {
|
||||
top: 6px !important;
|
||||
}
|
||||
|
||||
.textDiff,
|
||||
.textConflicted,
|
||||
.conflictedText-textReference {
|
||||
@ -198,3 +197,18 @@
|
||||
width: 100%;
|
||||
margin: 0 0 5px;
|
||||
}
|
||||
|
||||
.item-text {
|
||||
display: block;
|
||||
color: var(--input-color);
|
||||
font-family: var(--font-monospace);
|
||||
line-height: 1.4;
|
||||
padding: 0 180px 0 0;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
@ -45,7 +45,7 @@
|
||||
</div>
|
||||
|
||||
{{#if this.emptyPreviousText}}
|
||||
<div local-class="textDiff"><span local-class="added">{{@conflict.correctedText}}</span></div>
|
||||
<div local-class="textDiff"><span class="added">{{@conflict.correctedText}}</span></div>
|
||||
{{else if this.samePreviousText}}
|
||||
<div local-class="textDiff">{{@conflict.correctedText}}</div>
|
||||
{{else}}
|
||||
@ -80,20 +80,27 @@
|
||||
{{/if}}
|
||||
</div>
|
||||
<div local-class="item-details__column">
|
||||
<div local-class="textInput">
|
||||
<TranslationEdit::Form
|
||||
@projectId={{@project.id}}
|
||||
@translationId={{@conflict.id}}
|
||||
@disabled={{@conflict.isRemoved}}
|
||||
@valueType={{@conflict.valueType}}
|
||||
@value={{this.textInput}}
|
||||
@showTypeHints={{false}}
|
||||
@onFocus={{fn this.inputFocus}}
|
||||
@onBlur={{fn this.inputBlur}}
|
||||
@onKeyUp={{fn this.changeTranslationText}}
|
||||
@onSubmit={{fn this.correct}}
|
||||
/>
|
||||
</div>
|
||||
{{#if this.active}}
|
||||
<div {{did-insert this.focusTextarea}} local-class="textInput">
|
||||
<TranslationEdit::Form
|
||||
@projectId={{@project.id}}
|
||||
@translationId={{@conflict.id}}
|
||||
@disabled={{@conflict.isRemoved}}
|
||||
@valueType={{@conflict.valueType}}
|
||||
@value={{this.textInput}}
|
||||
@showTypeHints={{false}}
|
||||
@onFocus={{fn this.inputFocus}}
|
||||
@onBlur={{fn this.inputBlur}}
|
||||
@onKeyUp={{fn this.changeTranslationText}}
|
||||
@onSubmit={{fn this.correct}}
|
||||
/>
|
||||
</div>
|
||||
{{else}}
|
||||
<span tabindex="0" role="button" local-class="item-text" {{on "click" (fn this.toggleActive)}}>
|
||||
{{this.textInput}}
|
||||
</span>
|
||||
{{/if}}
|
||||
|
||||
{{#if (get @permissions "correct_translation")}}
|
||||
<AsyncButton
|
||||
@onClick={{fn this.correct}}
|
||||
|
||||
@ -8,7 +8,7 @@ import {tracked} from '@glimmer/tracking';
|
||||
import {restartableTask} from 'ember-concurrency-decorators';
|
||||
import {timeout} from 'ember-concurrency';
|
||||
|
||||
const DEBOUNCE_OFFSET = 500; // ms
|
||||
const DEBOUNCE_OFFSET = 1000; // ms
|
||||
|
||||
interface Args {
|
||||
meta: PaginationMeta;
|
||||
|
||||
@ -6,7 +6,7 @@ import {restartableTask} from 'ember-concurrency-decorators';
|
||||
import {timeout} from 'ember-concurrency';
|
||||
import {tracked} from '@glimmer/tracking';
|
||||
|
||||
const DEBOUNCE_OFFSET = 500; // ms
|
||||
const DEBOUNCE_OFFSET = 1000; // ms
|
||||
|
||||
interface Args {
|
||||
permissions: any;
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<Textarea
|
||||
@value={{@value}}
|
||||
<textarea
|
||||
{{on "blur" this.blur}}
|
||||
{{on "focus" this.focus}}
|
||||
{{on "keyup" this.keyUp}}
|
||||
{{on "keydown" this.keyDown}}
|
||||
...attributes
|
||||
/>
|
||||
>{{@value}}
|
||||
</textarea>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<Input
|
||||
<input
|
||||
type="text"
|
||||
@value={{@value}}
|
||||
value={{@value}}
|
||||
{{on "blur" this.blur}}
|
||||
{{on "focus" this.focus}}
|
||||
{{on "keyup" this.keyUp}}
|
||||
{{on "keydown" this.keyDown}}
|
||||
...attributes
|
||||
/>
|
||||
>
|
||||
|
||||
@ -7,7 +7,7 @@ import {tracked} from '@glimmer/tracking';
|
||||
import {restartableTask} from 'ember-concurrency-decorators';
|
||||
import {timeout} from 'ember-concurrency';
|
||||
|
||||
const DEBOUNCE_OFFSET = 500; // ms
|
||||
const DEBOUNCE_OFFSET = 1000; // ms
|
||||
|
||||
interface Args {
|
||||
query: string;
|
||||
|
||||
889
webapp/package-lock.json
generated
889
webapp/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -29,10 +29,10 @@
|
||||
"dependencies": {
|
||||
"@glimmer/tracking": "1.0.0",
|
||||
"@joeattardi/emoji-button": "2.12.1",
|
||||
"apollo-boost": "0.4.7",
|
||||
"apollo-client": "2.6.8",
|
||||
"apollo-link-batch-http": "1.2.13",
|
||||
"apollo-link-http": "1.5.16",
|
||||
"apollo-boost": "0.4.9",
|
||||
"apollo-client": "2.6.10",
|
||||
"apollo-link-batch-http": "1.2.14",
|
||||
"apollo-link-http": "1.5.17",
|
||||
"babel-plugin-graphql-tag": "2.5.0",
|
||||
"broccoli-asset-rev": "3.0.0",
|
||||
"cached-path-relative": "1.0.2",
|
||||
@ -41,14 +41,14 @@
|
||||
"date-fns": "2.12.0",
|
||||
"diff": "4.0.2",
|
||||
"ember-auto-import": "1.5.3",
|
||||
"ember-cli": "3.17.0",
|
||||
"ember-cli": "3.18.0",
|
||||
"ember-cli-autoprefixer": "0.8.1",
|
||||
"ember-cli-babel": "7.19.0",
|
||||
"ember-cli-babel": "7.20.0",
|
||||
"ember-cli-babel-polyfills": "2.0.1",
|
||||
"ember-cli-content-security-policy": "1.1.1",
|
||||
"ember-cli-dependency-checker": "3.2.0",
|
||||
"ember-cli-flash": "1.8.1",
|
||||
"ember-cli-htmlbars": "4.2.3",
|
||||
"ember-cli-htmlbars": "5.1.2",
|
||||
"ember-cli-inject-live-reload": "2.0.2",
|
||||
"ember-cli-sass": "10.0.1",
|
||||
"ember-cli-shims": "1.2.0",
|
||||
@ -65,7 +65,7 @@
|
||||
"ember-power-select": "4.0.0",
|
||||
"ember-radio-button": "2.0.1",
|
||||
"ember-resolver": "8.0.0",
|
||||
"ember-source": "3.18.0",
|
||||
"ember-source": "3.18.1",
|
||||
"ember-wormhole": "0.5.5",
|
||||
"graphql": "14.6.0",
|
||||
"graphql-tag": "2.10.3",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user