Apache
/
druid
mirror of https://github.com/apache/druid.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix history dialog styling (#7536) 

* Fix history dialog

* more styling
This commit is contained in:
Qi Shu 2019-04-25 07:59:34 -07:00 committed by Fangjin Yang
parent 658fb2b062
commit 3ec9fbaa47
3 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web-console/src/dialogs/history-dialog.scss
View File

@ -26,8 +26,11 @@
padding: 15px 15px 0 15px; padding: 15px 15px 0 15px;
h3 { .history-dialog-title {
padding-left: 10px; padding-left: 10px;
margin-bottom: 2px;
font-size: 24px;
font-weight: 600;
} }
.no-record { .no-record {
@ -39,7 +42,7 @@
.history-record-entries { .history-record-entries {
margin-bottom: 10px; margin: 10px 0;
max-height: 60vh; max-height: 60vh;
overflow: scroll; overflow: scroll;
@ -49,10 +52,6 @@
border-style: dot-dash; border-style: dot-dash;
word-wrap: break-word; word-wrap: break-word;
hr {
margin: 5px 0 5px 0;
}
.bp3-card { .bp3-card {
padding-bottom: 10px; padding-bottom: 10px;
} }
@ -60,14 +59,15 @@
.history-record-title { .history-record-title {
justify-content: space-between; justify-content: space-between;
display: flex; display: flex;
}
.history-record-comment-title {
margin-bottom: 5px; margin-bottom: 5px;
.history-record-title-change {
font-weight: 600;
font-size: 16px;
}
} }
.json-collapse { .json-collapse {
button { button {
position: relative; position: relative;

13
web-console/src/dialogs/history-dialog.tsx
View File

@ -16,14 +16,14 @@
* limitations under the License. * limitations under the License.
*/ */
import { Card, Dialog } from '@blueprintjs/core'; import {Card, Dialog, Divider, IDialogProps} from '@blueprintjs/core';
import * as React from 'react'; import * as React from 'react';
import { JSONCollapse } from '../components/json-collapse'; import { JSONCollapse } from '../components/json-collapse';
import './history-dialog.scss'; import './history-dialog.scss';
interface HistoryDialogProps extends React.Props<any> { interface HistoryDialogProps extends IDialogProps {
historyRecords: any; historyRecords: any;
} }
@ -46,7 +46,7 @@ export class HistoryDialog extends React.Component<HistoryDialogProps, HistoryDi
content = <div className="no-record">No history records available</div>; content = <div className="no-record">No history records available</div>;
} else { } else {
content = <> content = <>
<h3>History</h3> <span className={'history-dialog-title'}>History</span>
<div className="history-record-entries"> <div className="history-record-entries">
{ {
historyRecords.map((record: any) => { historyRecords.map((record: any) => {
@ -57,10 +57,10 @@ export class HistoryDialog extends React.Component<HistoryDialogProps, HistoryDi
return <div key={record.auditTime} className="history-record-entry"> return <div key={record.auditTime} className="history-record-entry">
<Card> <Card>
<div className="history-record-title"> <div className="history-record-title">
<h5>Change</h5> <span className="history-record-title-change">Change</span>
<p>{formattedTime}</p> <span>{formattedTime}</span>
</div> </div>
<hr/> <Divider/>
<p>{auditInfo.comment === '' ? '(No comment)' : auditInfo.comment}</p> <p>{auditInfo.comment === '' ? '(No comment)' : auditInfo.comment}</p>
<JSONCollapse <JSONCollapse
stringValue={record.payload} stringValue={record.payload}
@ -81,7 +81,6 @@ export class HistoryDialog extends React.Component<HistoryDialogProps, HistoryDi
render(): React.ReactNode { render(): React.ReactNode {
return <Dialog return <Dialog
className="history-dialog"
isOpen isOpen
{...this.props} {...this.props}
> >

1
web-console/src/dialogs/snitch-dialog.tsx
View File

@ -127,6 +127,7 @@ export class SnitchDialog extends React.Component<SnitchDialogProps, SnitchDialo
const { historyRecords } = this.props; const { historyRecords } = this.props;
return <HistoryDialog return <HistoryDialog
{...this.props} {...this.props}
className={'history-dialog'}
historyRecords={historyRecords} historyRecords={historyRecords}
> >
<div className={Classes.DIALOG_FOOTER_ACTIONS}> <div className={Classes.DIALOG_FOOTER_ACTIONS}>