tyler.durden
/
opensupports
mirror of https://github.com/opensupports/opensupports.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[DEV-207] Edit article buttons (#1128) 

* edit article buttons

* delete blank spaces

* change article button style

* align buttons

* center header and edit buttons

* fix height of article title

* fix article classnames

* change styles classnames

* improve coding
This commit is contained in:
Joel Elias Méndez 2022-01-19 12:41:22 -03:00 committed by GitHub
parent 1228d593d0
commit 7df190ea01
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
client/src/app/admin/panel/articles/admin-panel-view-article.js
View File

@ -18,6 +18,7 @@ import Form from 'core-components/form';
import FormField from 'core-components/form-field';
import SubmitButton from 'core-components/submit-button';
import TextEditor from 'core-components/text-editor';
import Icon from 'core-components/icon';
class AdminPanelViewArticle extends React.Component {
@ -65,17 +66,17 @@ class AdminPanelViewArticle extends React.Component {
renderArticlePreview(article) {
return (
<div className="admin-panel-view-article__content">
<div className="admin-panel-view-article__edit-buttons">
<Button size="medium" onClick={this.onDeleteClick.bind(this, article)}>
{i18n('DELETE')}
</Button>
<Button className="admin-panel-view-article__edit-button" size="medium" onClick={this.onEditClick.bind(this, article)} type="tertiary">
{i18n('EDIT')}
</Button>
</div>
<div className="admin-panel-view-article__article">
<div className="admin-panel-view-article__header-wrapper">
<Header title={article.title} />
<div className="admin-panel-view-article__header-buttons">
<span onClick={this.onEditClick.bind(this, article)}>
<Icon className="admin-panel-view-article__edit-icon" name="pencil" />
</span>
<span onClick={this.onDeleteClick.bind(this, article)} >
<Icon className="admin-panel-view-article__edit-icon" name="trash" />
</span>
</div>
</div>
<div className="admin-panel-view-article__article-content ql-editor">
<div dangerouslySetInnerHTML={{__html: MentionsParser.parse(article.content)}}/>
</div>
@ -83,7 +84,6 @@ class AdminPanelViewArticle extends React.Component {
{i18n('LAST_EDITED_IN', {date: DateTransformer.transformToString(article.lastEdited)})}
</div>
</div>
</div>
);
}

18
client/src/app/admin/panel/articles/admin-panel-view-article.scss
View File

@ -4,17 +4,25 @@
word-break: break-word;
}
&__edit-buttons {
&__header-wrapper {
display: flex;
flex-direction: row;
height: 35px;
}
&__header-buttons {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 200px;
margin-bottom: 20px;
width: 50px;
margin-bottom: 5px;
margin-left: 15px;
}
&__edit-button {
margin-right: 20px;
&__edit-icon {
color: $grey;
cursor: pointer;
}
&__last-edited {