mirego/accent
1
1
Fork 0
mirror of https://github.com/mirego/accent.git synced 2024-09-20 07:08:54 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add markdown-it for translation comment text render

Browse Source
This commit is contained in:
Simon Prévost 2020-11-05 20:57:07 -05:00
parent e40fe4cb86
commit ed01cb95f0
11 changed files with 124 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webapp/app/pods/components/quick-submit-textarea/component.ts
View File

@ -3,7 +3,7 @@ import {action} from '@ember/object';
import {restartableTask} from 'ember-concurrency-decorators';
import {timeout} from 'ember-concurrency';
const DEBOUNCE_OFFSET = 1000; // ms
const DEBOUNCE_OFFSET = 100; // ms
const ENTER_KEY = 13;
interface Args {

5
webapp/app/pods/components/quick-submit-textarea/template.hbs
View File

@ -1,9 +1,8 @@
<textarea
{{on "blur" this.blur}}
{{on "focus" this.focus}}
{{on "keyup" this.keyUp}}
{{on "input" this.keyUp}}
{{on "keydown" this.keyDown}}
rows={{@rows}}
...attributes
>{{@value}}
</textarea>
>{{@value}}</textarea>

2
webapp/app/pods/components/quick-submit-textfield/component.ts
View File

@ -3,7 +3,7 @@ import {action} from '@ember/object';
import {restartableTask} from 'ember-concurrency-decorators';
import {timeout} from 'ember-concurrency';
const DEBOUNCE_OFFSET = 200; // ms
const DEBOUNCE_OFFSET = 100; // ms
const ENTER_KEY = 13;
interface Args {

2
webapp/app/pods/components/quick-submit-textfield/template.hbs
View File

@ -3,7 +3,7 @@
value={{@value}}
{{on "blur" this.blur}}
{{on "focus" this.focus}}
{{on "keyup" this.keyUp}}
{{on "input" this.keyUp}}
{{on "keydown" this.keyDown}}
...attributes
>

26
webapp/app/pods/components/translation-comments-list/item/component.ts Normal file
View File

@ -0,0 +1,26 @@
import MarkdownIt from 'markdown-it';
import {htmlSafe} from '@ember/string';
import Component from '@glimmer/component';
const markdown = MarkdownIt({
html: false,
linkify: true,
typographer: true,
});
interface Args {
comment: {
text: string;
insertedAt: Date;
user: {
fullname: string;
pictureUrl: string;
};
};
}
export default class TranslationsCommentsListItem extends Component<Args> {
get text() {
return htmlSafe(markdown.render(this.args.comment.text));
}
}

29
webapp/app/pods/components/translation-comments-list/item/styles.scss Normal file
View File

@ -0,0 +1,29 @@
.header {
display: flex;
align-items: center;
}
.user {
display: inline-flex;
align-items: center;
margin-right: 6px;
font-size: 12px;
font-weight: bold;
}
.user-picture {
width: 16px;
height: 16px;
margin-right: 6px;
border-radius: 3px;
}
.date {
color: var(--color-grey);
font-size: 11px;
}
.content {
margin-top: 5px;
font-size: 13px;
}

19
webapp/app/pods/components/translation-comments-list/item/template.hbs Normal file
View File

@ -0,0 +1,19 @@
<div local-class="header">
<span local-class="user">
{{#if @comment.user.pictureUrl}}
<AccAvatarImg
local-class="user-picture"
src="{{@comment.user.pictureUrl}}"
/>
{{/if}}
{{@comment.user.fullname}}
</span>
<span local-class="date">
<TimeAgoInWordsTag @date={{@comment.insertedAt}} />
</span>
</div>
<div local-class="content">
{{this.text}}
</div>

30
webapp/app/pods/components/translation-comments-list/styles.scss
View File

@ -36,36 +36,6 @@
}
}
.itemComment-header {
display: flex;
align-items: center;
}
.itemComment-user {
display: inline-flex;
align-items: center;
margin-right: 6px;
font-size: 12px;
font-weight: bold;
}
.itemComment-user-picture {
width: 16px;
height: 16px;
margin-right: 6px;
border-radius: 3px;
}
.itemComment-date {
color: var(--color-grey);
font-size: 11px;
}
.itemComment-content {
margin-top: 5px;
font-size: 13px;
}
@media (max-width: var(--screen-lg)) {
.translation-comments-list {
border-color: transparent;

20
webapp/app/pods/components/translation-comments-list/template.hbs
View File

@ -1,25 +1,7 @@
<ul local-class="translation-comments-list" ...attributes>
{{#each @comments key="id" as |comment|}}
<li local-class="itemComment">
<div local-class="itemComment-header">
<span local-class="itemComment-user">
{{#if comment.user.pictureUrl}}
<AccAvatarImg
local-class="itemComment-user-picture"
src="{{comment.user.pictureUrl}}"
/>
{{/if}}
{{comment.user.fullname}}
</span>
<span local-class="itemComment-date">
<TimeAgoInWordsTag @date={{comment.insertedAt}} />
</span>
</div>
<div local-class="itemComment-content">
{{comment.text}}
</div>
<TranslationCommentsList::Item @comment={{comment}} />
</li>
{{else}}
<EmptyContent

46
webapp/package-lock.json generated
View File

@ -2676,6 +2676,25 @@
"@types/sizzle": "*"
}
},
"@types/linkify-it": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-2.1.0.tgz",
"integrity": "sha512-Q7DYAOi9O/+cLLhdaSvKdaumWyHbm7HAk/bFwwyTuU0arR5yyCeW5GOoqt4tJTpDRxhpx9Q8kQL6vMpuw9hDSw=="
},
"@types/markdown-it": {
"version": "10.0.2",
"resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-10.0.2.tgz",
"integrity": "sha512-FGKiVW1UgeIEAChYAuHcfCd0W4LsMEyrSyTVaZiuJhwR4BwSVUD8JKnzmWAMK2FHNLZSPGUaEkpa/dkZj2uq1w==",
"requires": {
"@types/linkify-it": "*",
"@types/mdurl": "*"
}
},
"@types/mdurl": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-1.0.2.tgz",
"integrity": "sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA=="
},
"@types/mime": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/@types/mime/-/mime-2.0.3.tgz",
@ -9832,6 +9851,18 @@
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
"integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
},
"markdown-it": {
"version": "11.0.1",
"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-11.0.1.tgz",
"integrity": "sha512-aU1TzmBKcWNNYvH9pjq6u92BML+Hz3h5S/QpfTFwiQF852pLT+9qHsrhM9JYipkOXZxGn+sGH8oyJE9FD9WezQ==",
"requires": {
"argparse": "^1.0.7",
"entities": "~2.0.0",
"linkify-it": "^3.0.1",
"mdurl": "^1.0.1",
"uc.micro": "^1.0.5"
}
},
"merge-trees": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/merge-trees/-/merge-trees-2.0.0.tgz",
@ -20597,15 +20628,22 @@
}
},
"markdown-it": {
"version": "11.0.1",
"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-11.0.1.tgz",
"integrity": "sha512-aU1TzmBKcWNNYvH9pjq6u92BML+Hz3h5S/QpfTFwiQF852pLT+9qHsrhM9JYipkOXZxGn+sGH8oyJE9FD9WezQ==",
"version": "12.0.2",
"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-12.0.2.tgz",
"integrity": "sha512-4Lkvjbv2kK+moL9TbeV+6/NHx+1Q+R/NIdUlFlkqkkzUcTod4uiyTJRiBidKR9qXSdkNFkgv+AELY8KN9vSgVA==",
"requires": {
"argparse": "^1.0.7",
"argparse": "^2.0.1",
"entities": "~2.0.0",
"linkify-it": "^3.0.1",
"mdurl": "^1.0.1",
"uc.micro": "^1.0.5"
},
"dependencies": {
"argparse": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
}
}
},
"markdown-it-terminal": {

2
webapp/package.json
View File

@ -29,6 +29,7 @@
"dependencies": {
"@glimmer/tracking": "1.0.2",
"@joeattardi/emoji-button": "2.12.1",
"@types/markdown-it": "10.0.2",
"@types/pell": "1.0.0",
"apollo-boost": "0.4.9",
"apollo-client": "2.6.10",
@ -72,6 +73,7 @@
"graphql-tag": "2.10.3",
"hoek": "6.1.3",
"loader.js": "4.7.0",
"markdown-it": "12.0.2",
"merge": "1.2.1",
"pell": "1.0.6",
"raven-js": "3.27.2",