Commit 7e1d502d authored by Tobias Kaupat's avatar Tobias Kaupat

Minor cleanup and performance improovement

- Modal Dialogs do not rerender content when not visible
- Static image widget improved and published
parent 67f1554f
Pipeline #4815163 passed with stages
in 8 minutes and 32 seconds
......@@ -5,22 +5,44 @@
(function () {
const TYPE_INFO = {
type: "static-image-widgets",
type: "static-image",
name: "Image",
version: "0.0.1",
version: "0.0.2",
author: "Lobaro",
kind: "widget",
description: "Display a static image",
settings: [
{
id: 'datasource',
name: 'Datasource',
type: 'datasource'
},
{
id: 'url',
name: 'Image Url',
type: 'string'
},
{
id: 'sizing',
name: "Sizing",
description: "How to size the image",
type: "option",
defaultValue: 'custom',
options: [
{name: "Full Width", value: "width"},
{name: "Full Height", value: "height"},
{name: "Custom", value: "custom"},
{name: "Original", value: "original"}
]
},
{
id: 'width',
name: 'Width',
type: 'string',
description: 'Width of the image, used in img style attribute',
defaultValue: ''
},
{
id: 'height',
name: 'Height',
type: 'string',
description: 'Height of the image, used in img style attribute',
defaultValue: ''
}
]
};
......@@ -30,13 +52,29 @@
const props = this.props;
const settings = props.state.settings;
return <div style={{width: '100%', height: '100%'}}>
<img style={{
let style = {}
switch (settings.sizing) {
case "width": {
style.width = '100%';
break;
}
case "height": {
style.height = '100%'
break;
}
case "custom": {
style.width = settings.width;
style.height = settings.height;
break;
}
}
return <img style={_.assign({
display: "block",
marginLeft: "auto",
marginRight: "auto"
}} width="100%" src={settings.url}/>
</div>
}, style)} src={settings.url}/>
}
}
......
......@@ -115,14 +115,16 @@ class ModalDialog extends React.Component<ModalDialogProps, any> {
<div className="header">
{props.title}
</div>
<div className="content" style={{overflowY: 'scroll', height: height - 300, minHeight:"500px"}}>
{this.props.dialogState.errors ?
this.props.dialogState.errors.map((message, i) => {
return <ModalUserMessageComponent key={i} userMessage={message}/>
})
: null}
{props.children}
</div>
{this.props.dialogState.isVisible ?
<div className="content" style={{overflowY: 'scroll', height: height - 300, minHeight:"500px"}}>
{this.props.dialogState.errors ?
this.props.dialogState.errors.map((message, i) => {
return <ModalUserMessageComponent key={i} userMessage={message}/>
})
: null}
{props.children}
</div>
: null }
<div className="actions">
{actions}
</div>
......
......@@ -138,7 +138,7 @@ const DatasourceInput = (props) => {
const datasources = props.datasources;
const setting = props.setting;
return <Field name={setting.id} component="select" className="ui fluid dropdown">
return <Field name={setting.id} component="select" className="ui fluid dropdown">
<option>{"Select " + setting.name + " ..."}</option>
{_.toPairs(datasources).map(([id, ds]) => {
return <option key={id} value={id}>{ds.settings.name + " (" + ds.type + ")"}</option>
......
......@@ -2,7 +2,6 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="widget.bundle.css?v=1">
<title>Widget</title>
</head>
<body style="margin: 0">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment