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 FormField from 'core-components/form-field';
import SubmitButton from 'core-components/submit-button'; import SubmitButton from 'core-components/submit-button';
import TextEditor from 'core-components/text-editor'; import TextEditor from 'core-components/text-editor';
import Icon from 'core-components/icon';
class AdminPanelViewArticle extends React.Component { class AdminPanelViewArticle extends React.Component {
@ -65,17 +66,17 @@ class AdminPanelViewArticle extends React.Component {
renderArticlePreview(article) { renderArticlePreview(article) {
return ( return (
<div className="admin-panel-view-article__content"> <div className="admin-panel-view-article__content">
<div className="admin-panel-view-article__edit-buttons"> <div className="admin-panel-view-article__header-wrapper">
<Button size="medium" onClick={this.onDeleteClick.bind(this, article)}> <Header title={article.title} />
{i18n('DELETE')} <div className="admin-panel-view-article__header-buttons">
</Button> <span onClick={this.onEditClick.bind(this, article)}>
<Button className="admin-panel-view-article__edit-button" size="medium" onClick={this.onEditClick.bind(this, article)} type="tertiary"> <Icon className="admin-panel-view-article__edit-icon" name="pencil" />
{i18n('EDIT')} </span>
</Button> <span onClick={this.onDeleteClick.bind(this, article)} >
<Icon className="admin-panel-view-article__edit-icon" name="trash" />
</span>
</div>
</div> </div>
<div className="admin-panel-view-article__article">
<Header title={article.title}/>
<div className="admin-panel-view-article__article-content ql-editor"> <div className="admin-panel-view-article__article-content ql-editor">
<div dangerouslySetInnerHTML={{__html: MentionsParser.parse(article.content)}}/> <div dangerouslySetInnerHTML={{__html: MentionsParser.parse(article.content)}}/>
</div> </div>
@ -83,7 +84,6 @@ class AdminPanelViewArticle extends React.Component {
{i18n('LAST_EDITED_IN', {date: DateTransformer.transformToString(article.lastEdited)})} {i18n('LAST_EDITED_IN', {date: DateTransformer.transformToString(article.lastEdited)})}
</div> </div>
</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; word-break: break-word;
} }
&__edit-buttons { &__header-wrapper {
display: flex;
flex-direction: row;
height: 35px;
}
&__header-buttons {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 200px; width: 50px;
margin-bottom: 20px; margin-bottom: 5px;
margin-left: 15px;
} }
&__edit-button { &__edit-icon {
margin-right: 20px; color: $grey;
cursor: pointer;
} }
&__last-edited { &__last-edited {