Author: bricks
Date: 2017-01-13 12:49:30 +0100 (Fri, 13 Jan 2017)
New Revision: 27200

Removed:
   trunk/gsa/src/html/classic/ng/src/web/form/css/formitem.css
   trunk/gsa/src/html/classic/ng/src/web/form/formitem.js
Modified:
   trunk/gsa/ChangeLog
   trunk/gsa/src/html/classic/ng/src/web/alerts/dialog.js
   trunk/gsa/src/html/classic/ng/src/web/alerts/emailmethodpart.js
   
trunk/gsa/src/html/classic/ng/src/web/alerts/filtercountchangedconditionpart.js
   trunk/gsa/src/html/classic/ng/src/web/alerts/filtercountleastconditionpart.js
   trunk/gsa/src/html/classic/ng/src/web/alerts/httpmethodpart.js
   trunk/gsa/src/html/classic/ng/src/web/alerts/scpmethodpart.js
   trunk/gsa/src/html/classic/ng/src/web/alerts/secinfoeventpart.js
   trunk/gsa/src/html/classic/ng/src/web/alerts/sendmethodpart.js
   trunk/gsa/src/html/classic/ng/src/web/alerts/severitychangedconditionpart.js
   trunk/gsa/src/html/classic/ng/src/web/alerts/severityleastconditionpart.js
   trunk/gsa/src/html/classic/ng/src/web/alerts/snmpmethodpart.js
   trunk/gsa/src/html/classic/ng/src/web/alerts/sourcefiremethodpart.js
   trunk/gsa/src/html/classic/ng/src/web/alerts/starttaskmethodpart.js
   trunk/gsa/src/html/classic/ng/src/web/alerts/taskeventpart.js
   trunk/gsa/src/html/classic/ng/src/web/alerts/verinicemethodpart.js
   trunk/gsa/src/html/classic/ng/src/web/credentials/dialog.js
   trunk/gsa/src/html/classic/ng/src/web/css/layout.css
   trunk/gsa/src/html/classic/ng/src/web/filterdialog.js
   trunk/gsa/src/html/classic/ng/src/web/form/checkbox.js
   trunk/gsa/src/html/classic/ng/src/web/form/css/checkboxradio.css
   trunk/gsa/src/html/classic/ng/src/web/form/css/form.css
   trunk/gsa/src/html/classic/ng/src/web/form/css/formgroup.css
   trunk/gsa/src/html/classic/ng/src/web/form/datepicker.js
   trunk/gsa/src/html/classic/ng/src/web/form/field.js
   trunk/gsa/src/html/classic/ng/src/web/form/filefield.js
   trunk/gsa/src/html/classic/ng/src/web/form/formgroup.js
   trunk/gsa/src/html/classic/ng/src/web/form/radio.js
   trunk/gsa/src/html/classic/ng/src/web/form/select2.js
   trunk/gsa/src/html/classic/ng/src/web/form/spinner.js
   trunk/gsa/src/html/classic/ng/src/web/form/textarea.js
   trunk/gsa/src/html/classic/ng/src/web/form/timezoneselect.js
   trunk/gsa/src/html/classic/ng/src/web/form/yesnoradio.js
   trunk/gsa/src/html/classic/ng/src/web/layout.js
   trunk/gsa/src/html/classic/ng/src/web/portlists/dialog.js
   trunk/gsa/src/html/classic/ng/src/web/results/filterdialog.js
   trunk/gsa/src/html/classic/ng/src/web/schedules/dialog.js
   trunk/gsa/src/html/classic/ng/src/web/targets/dialog.js
   trunk/gsa/src/html/classic/ng/src/web/tasks/dialog.js
   trunk/gsa/src/html/classic/ng/src/web/tasks/filterdialog.js
   trunk/gsa/src/html/classic/ng/src/web/wizard/advancedtaskwizard.js
   trunk/gsa/src/html/classic/ng/src/web/wizard/modifytaskwizard.js
Log:
Refactoring of the (form) layouts

* src/html/classic/ng/src/web/alerts/dialog.js,
src/html/classic/ng/src/web/alerts/emailmethodpart.js,
src/html/classic/ng/src/web/alerts/filtercountchangedconditionpart.js,
src/html/classic/ng/src/web/alerts/filtercountleastconditionpart.js,
src/html/classic/ng/src/web/alerts/httpmethodpart.js,
src/html/classic/ng/src/web/alerts/scpmethodpart.js,
src/html/classic/ng/src/web/alerts/secinfoeventpart.js,
src/html/classic/ng/src/web/alerts/sendmethodpart.js,
src/html/classic/ng/src/web/alerts/severitychangedconditionpart.js,
src/html/classic/ng/src/web/alerts/severityleastconditionpart.js,
src/html/classic/ng/src/web/alerts/snmpmethodpart.js,
src/html/classic/ng/src/web/alerts/sourcefiremethodpart.js,
src/html/classic/ng/src/web/alerts/starttaskmethodpart.js,
src/html/classic/ng/src/web/alerts/taskeventpart.js,
src/html/classic/ng/src/web/alerts/verinicemethodpart.js,
src/html/classic/ng/src/web/credentials/dialog.js,
src/html/classic/ng/src/web/css/layout.css,
src/html/classic/ng/src/web/filterdialog.js,
src/html/classic/ng/src/web/form/checkbox.js,
src/html/classic/ng/src/web/form/css/checkboxradio.css,
src/html/classic/ng/src/web/form/css/form.css,
src/html/classic/ng/src/web/form/css/formgroup.css,
src/html/classic/ng/src/web/form/css/formitem.css,
src/html/classic/ng/src/web/form/datepicker.js,
src/html/classic/ng/src/web/form/field.js,
src/html/classic/ng/src/web/form/filefield.js,
src/html/classic/ng/src/web/form/formgroup.js,
src/html/classic/ng/src/web/form/formitem.js,
src/html/classic/ng/src/web/form/radio.js,
src/html/classic/ng/src/web/form/select2.js,
src/html/classic/ng/src/web/form/spinner.js,
src/html/classic/ng/src/web/form/textarea.js,
src/html/classic/ng/src/web/form/timezoneselect.js,
src/html/classic/ng/src/web/form/yesnoradio.js,
src/html/classic/ng/src/web/layout.js,
src/html/classic/ng/src/web/portlists/dialog.js,
src/html/classic/ng/src/web/results/filterdialog.js,
src/html/classic/ng/src/web/schedules/dialog.js,
src/html/classic/ng/src/web/targets/dialog.js,
src/html/classic/ng/src/web/tasks/dialog.js,
src/html/classic/ng/src/web/tasks/filterdialog.js,
src/html/classic/ng/src/web/wizard/advancedtaskwizard.js,
src/html/classic/ng/src/web/wizard/modifytaskwizard.js: With this change there
is only flexbox layout for forms. This finally allows to center elements more
easily without the many many quirks and shortcommings of the old layout. It is
even much easier to understand because you only have choose between horizontal
(Layout flex="row") and vertical (Layout flex="column") alignment. No more
FormItems or even RadioFormItems and inline css classes.

Modified: trunk/gsa/ChangeLog
===================================================================
--- trunk/gsa/ChangeLog 2017-01-13 09:13:52 UTC (rev 27199)
+++ trunk/gsa/ChangeLog 2017-01-13 11:49:30 UTC (rev 27200)
@@ -1,3 +1,56 @@
+2017-01-13 Bj�rn Ricks <bjoern.ri...@greenbone.net>
+
+       Refactoring of the (form) layouts
+
+       * src/html/classic/ng/src/web/alerts/dialog.js,
+       src/html/classic/ng/src/web/alerts/emailmethodpart.js,
+       src/html/classic/ng/src/web/alerts/filtercountchangedconditionpart.js,
+       src/html/classic/ng/src/web/alerts/filtercountleastconditionpart.js,
+       src/html/classic/ng/src/web/alerts/httpmethodpart.js,
+       src/html/classic/ng/src/web/alerts/scpmethodpart.js,
+       src/html/classic/ng/src/web/alerts/secinfoeventpart.js,
+       src/html/classic/ng/src/web/alerts/sendmethodpart.js,
+       src/html/classic/ng/src/web/alerts/severitychangedconditionpart.js,
+       src/html/classic/ng/src/web/alerts/severityleastconditionpart.js,
+       src/html/classic/ng/src/web/alerts/snmpmethodpart.js,
+       src/html/classic/ng/src/web/alerts/sourcefiremethodpart.js,
+       src/html/classic/ng/src/web/alerts/starttaskmethodpart.js,
+       src/html/classic/ng/src/web/alerts/taskeventpart.js,
+       src/html/classic/ng/src/web/alerts/verinicemethodpart.js,
+       src/html/classic/ng/src/web/credentials/dialog.js,
+       src/html/classic/ng/src/web/css/layout.css,
+       src/html/classic/ng/src/web/filterdialog.js,
+       src/html/classic/ng/src/web/form/checkbox.js,
+       src/html/classic/ng/src/web/form/css/checkboxradio.css,
+       src/html/classic/ng/src/web/form/css/form.css,
+       src/html/classic/ng/src/web/form/css/formgroup.css,
+       src/html/classic/ng/src/web/form/css/formitem.css,
+       src/html/classic/ng/src/web/form/datepicker.js,
+       src/html/classic/ng/src/web/form/field.js,
+       src/html/classic/ng/src/web/form/filefield.js,
+       src/html/classic/ng/src/web/form/formgroup.js,
+       src/html/classic/ng/src/web/form/formitem.js,
+       src/html/classic/ng/src/web/form/radio.js,
+       src/html/classic/ng/src/web/form/select2.js,
+       src/html/classic/ng/src/web/form/spinner.js,
+       src/html/classic/ng/src/web/form/textarea.js,
+       src/html/classic/ng/src/web/form/timezoneselect.js,
+       src/html/classic/ng/src/web/form/yesnoradio.js,
+       src/html/classic/ng/src/web/layout.js,
+       src/html/classic/ng/src/web/portlists/dialog.js,
+       src/html/classic/ng/src/web/results/filterdialog.js,
+       src/html/classic/ng/src/web/schedules/dialog.js,
+       src/html/classic/ng/src/web/targets/dialog.js,
+       src/html/classic/ng/src/web/tasks/dialog.js,
+       src/html/classic/ng/src/web/tasks/filterdialog.js,
+       src/html/classic/ng/src/web/wizard/advancedtaskwizard.js,
+       src/html/classic/ng/src/web/wizard/modifytaskwizard.js: With this 
change there
+       is only flexbox layout for forms. This finally allows to center 
elements more
+       easily without the many many quirks and shortcommings of the old 
layout. It is
+       even much easier to understand because you only have choose between 
horizontal
+       (Layout flex="row") and vertical (Layout flex="column") alignment. No 
more
+       FormItems or even RadioFormItems and inline css classes.
+
 2017-01-12 Bj�rn Ricks <bjoern.ri...@greenbone.net>
 
        * src/html/classic/ng/src/web/results/results.js: Fix displaying the 
default

Modified: trunk/gsa/src/html/classic/ng/src/web/alerts/dialog.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/alerts/dialog.js      2017-01-13 
09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/alerts/dialog.js      2017-01-13 
11:49:30 UTC (rev 27200)
@@ -4,7 +4,7 @@
  * Björn Ricks <bjoern.ri...@greenbone.net>
  *
  * Copyright:
- * Copyright (C) 2016 Greenbone Networks GmbH
+ * Copyright (C) 2016 - 2017 Greenbone Networks GmbH
  *
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU General Public License
@@ -145,22 +145,25 @@
     let filter_opts = this.renderOptions(filters, 0);
 
     return (
-      <Layout float className="form-horizontal">
+      <Layout flex="column">
 
         <FormGroup title={_('Name')}>
           <TextField name="name"
+            grow="1"
             value={name} size="30"
             onChange={this.onValueChange}
             maxLength="80"/>
         </FormGroup>
 
         <FormGroup title={_('Comment')}>
-          <TextField name="comment" value={comment}
+          <TextField name="comment"
+            value={comment}
+            grow="1"
             size="30" maxLength="400"
             onChange={this.onValueChange}/>
         </FormGroup>
 
-        <FormGroup title={_('Event')}>
+        <FormGroup title={_('Event')} flex="column">
           <TaskEventPart
             value={event}
             onCheckedChange={this.onValueChange}
@@ -174,11 +177,12 @@
             onDataChange={this.onPartDataChange}/>
         </FormGroup>
 
-        <FormGroup title={_('Condition')}>
+        <FormGroup title={_('Condition')} flex="column">
 
           <Radio title={_('Always')}
             name="condition"
-            value="Always" checked={condition === 'Always'}
+            value="Always"
+            checked={condition === 'Always'}
             onChange={this.onValueChange}/>
 
           {event === 'Task run status changed' &&

Modified: trunk/gsa/src/html/classic/ng/src/web/alerts/emailmethodpart.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/alerts/emailmethodpart.js     
2017-01-13 09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/alerts/emailmethodpart.js     
2017-01-13 11:49:30 UTC (rev 27200)
@@ -4,7 +4,7 @@
  * Björn Ricks <bjoern.ri...@greenbone.net>
  *
  * Copyright:
- * Copyright (C) 2016 Greenbone Networks GmbH
+ * Copyright (C) 2016 - 2017 Greenbone Networks GmbH
  *
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU General Public License
@@ -26,15 +26,15 @@
 import {translate as _} from '../../locale.js';
 import {select_save_id, is_defined} from '../../utils.js';
 
+import Layout from '../layout.js';
 import {render_options} from '../render.js';
 
 import Select2 from '../form/select2.js';
 import FormGroup from '../form/formgroup.js';
-import FormItem from '../form/formitem.js';
 import TextArea from '../form/textarea.js';
 import TextField from '../form/textfield.js';
 import FormPart from '../form/formpart.js';
-import {RadioFormItem} from '../form/radio.js';
+import Radio from '../form/radio.js';
 
 const TASK_SUBJECT = '[OpenVAS-Manager] Task \'$n\': $e';
 const SECINFO_SUBJECT = '[OpenVAS-Manager] $T $q $S since $d';
@@ -173,10 +173,11 @@
     let attach_format_opts = render_options(report_formats);
 
     return (
-      <div>
+      <Layout flex="column" grow="1">
 
         <FormGroup title={_('To Address')}>
           <TextField
+            grow="1"
             name="to_address"
             value={to_address}
             onChange={this.onValueChange}/>
@@ -184,6 +185,7 @@
 
         <FormGroup title={_('From Address')}>
           <TextField
+            grow="1"
             name="from_address"
             value={from_address}
             onChange={this.onValueChange}/>
@@ -191,6 +193,7 @@
 
         <FormGroup title={_('Subject')}>
           <TextField
+            grow="1"
             name="subject"
             size="30"
             maxLength="80"
@@ -198,62 +201,66 @@
             value={subject}/>
         </FormGroup>
 
-        <FormGroup title={_('Content')}>
-          <RadioFormItem title={_('Simple Notice')}
+        <FormGroup title={_('Content')} flex="column">
+          <Radio title={_('Simple Notice')}
             name="notice"
             onChange={this.onValueChange}
             checked={notice === '1'}
             value="1"/>
           {capabilities.mayOp('get_report_formats') &&
-            <div>
-              <RadioFormItem
-                name="notice"
-                title={task ? _('Include report') :
-                  _('Include list of resources with message:')}
-                onChange={this.onValueChange}
-                checked={notice === '0'}
-                value="0">
-                <FormItem>
-                  <Select2
-                    name="notice_report_format"
-                    value={notice_report_format}
-                    onChange={this.onValueChange}>
-                    {report_format_opts}
-                  </Select2>
-                </FormItem>
-              </RadioFormItem>
+            <Layout flex="column" box>
+              <Layout flex box>
+                <Radio
+                  name="notice"
+                  title={task ? _('Include report') :
+                    _('Include list of resources with message:')}
+                  onChange={this.onValueChange}
+                  checked={notice === '0'}
+                  value="0">
+                </Radio>
+                <Select2
+                  name="notice_report_format"
+                  value={notice_report_format}
+                  onChange={this.onValueChange}>
+                  {report_format_opts}
+                </Select2>
+              </Layout>
               <TextArea name="message"
                 className="form-control"
                 rows="8" cols="50"
                 onChange={this.onValueChange}
                 value={message}/>
+            </Layout>
+          }
 
-              <RadioFormItem
-                name="notice"
-                title={task ? _('Attach report') :
-                  _('Attach list of resources with message:')}
-                onChange={this.onValueChange}
-                checked={notice === '2'}
-                value="2">
-                <FormItem>
-                  <Select2
-                    name="notice_attach_format"
-                    value={notice_attach_format}
-                    onChange={this.onValueChange}>
-                    {attach_format_opts}
-                  </Select2>
-                </FormItem>
-              </RadioFormItem>
+          {capabilities.mayOp('get_report_formats') &&
+            <Layout flex="column" box>
+              <Layout flex box>
+                <Radio
+                  name="notice"
+                  title={task ? _('Attach report') :
+                    _('Attach list of resources with message:')}
+                  onChange={this.onValueChange}
+                  checked={notice === '2'}
+                  value="2">
+                </Radio>
+                <Select2
+                  name="notice_attach_format"
+                  value={notice_attach_format}
+                  onChange={this.onValueChange}>
+                  {attach_format_opts}
+                </Select2>
+              </Layout>
               <TextArea name="message_attach"
                 className="form-control"
                 rows="8" cols="50"
                 onChange={this.onValueChange}
                 value={message_attach}/>
-            </div>
+            </Layout>
           }
         </FormGroup>
 
-      </div>
+      </Layout>
     );
   }
 };

Modified: 
trunk/gsa/src/html/classic/ng/src/web/alerts/filtercountchangedconditionpart.js
===================================================================
--- 
trunk/gsa/src/html/classic/ng/src/web/alerts/filtercountchangedconditionpart.js 
    2017-01-13 09:13:52 UTC (rev 27199)
+++ 
trunk/gsa/src/html/classic/ng/src/web/alerts/filtercountchangedconditionpart.js 
    2017-01-13 11:49:30 UTC (rev 27200)
@@ -4,7 +4,7 @@
  * Björn Ricks <bjoern.ri...@greenbone.net>
  *
  * Copyright:
- * Copyright (C) 2016 Greenbone Networks GmbH
+ * Copyright (C) 2016 - 2017 Greenbone Networks GmbH
  *
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU General Public License
@@ -26,12 +26,12 @@
 import {translate as _} from '../../locale.js';
 import {is_defined} from '../../utils.js';
 
+import Layout from '../layout.js';
 import {render_options} from '../render.js';
 
 import Select2 from '../form/select2.js';
 import Spinner from '../form/spinner.js';
-import FormItem from '../form/formitem.js';
-import {RadioFormItem} from '../form/radio.js';
+import Radio from '../form/radio.js';
 import RadioSelectFormPart from '../form/radioselectformpart.js';
 
 const VALUE = "Filter count changed";
@@ -65,34 +65,31 @@
 
     let filter_opts = render_options(filters);
     return (
-      <RadioFormItem title={_('Filter')}
-        value={VALUE}
-        checked={value === VALUE}
-        name="condition"
-        onChange={this.onCheckedChange}>
-        <FormItem>
-          <Select2
-            value={filter_id}
-            name="filter_id"
-            onChange={this.onValueChange}>
-            {filter_opts}
-          </Select2>
-        </FormItem>
-        <FormItem>
+      <Layout flex box>
+        <Radio title={_('Filter')}
+          value={VALUE}
+          checked={value === VALUE}
+          name="condition"
+          onChange={this.onCheckedChange}/>
+        <Select2
+          value={filter_id}
+          name="filter_id"
+          onChange={this.onValueChange}>
+          {filter_opts}
+        </Select2>
+        <Layout flex box>
           {_('matches at least')}
-        </FormItem>
-        <FormItem>
-          <Spinner
-            value={count}
-            name="count"
-            type="int"
-            min="0" size="5"
-            onChange={this.onValueChange}/>
-        </FormItem>
-        <FormItem>
+        </Layout>
+        <Spinner
+          value={count}
+          name="count"
+          type="int"
+          min="0" size="5"
+          onChange={this.onValueChange}/>
+        <Layout flex box>
           {_('result(s) more then previous scan')}
-        </FormItem>
-      </RadioFormItem>
+        </Layout>
+      </Layout>
     );
   }
 }

Modified: 
trunk/gsa/src/html/classic/ng/src/web/alerts/filtercountleastconditionpart.js
===================================================================
--- 
trunk/gsa/src/html/classic/ng/src/web/alerts/filtercountleastconditionpart.js   
    2017-01-13 09:13:52 UTC (rev 27199)
+++ 
trunk/gsa/src/html/classic/ng/src/web/alerts/filtercountleastconditionpart.js   
    2017-01-13 11:49:30 UTC (rev 27200)
@@ -4,7 +4,7 @@
  * Björn Ricks <bjoern.ri...@greenbone.net>
  *
  * Copyright:
- * Copyright (C) 2016 Greenbone Networks GmbH
+ * Copyright (C) 2016 - 2017 Greenbone Networks GmbH
  *
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU General Public License
@@ -26,12 +26,12 @@
 import {translate as _} from '../../locale.js';
 import {is_defined} from '../../utils.js';
 
+import Layout from '../layout.js';
 import {render_options} from '../render.js';
 
 import Select2 from '../form/select2.js';
 import Spinner from '../form/spinner.js';
-import FormItem from '../form/formitem.js';
-import {RadioFormItem} from '../form/radio.js';
+import Radio from '../form/radio.js';
 import RadioSelectFormPart from '../form/radioselectformpart.js';
 
 const VALUE = 'Filter count at least';
@@ -65,32 +65,30 @@
 
     let filter_opts = render_options(filters);
     return (
-      <RadioFormItem title={_('Filter')}
-        value={VALUE}
-        name="condition"
-        checked={value === VALUE}
-        onChange={this.onCheckedChange}>
-        <FormItem>
-          <Select2
-            value={at_least_filter_id}
-            name="at_least_filter_id"
-            onChange={this.onValueChange}>
-            {filter_opts}
-          </Select2>
-        </FormItem>
-        <FormItem>
+      <Layout flex box>
+        <Radio title={_('Filter')}
+          value={VALUE}
+          name="condition"
+          checked={value === VALUE}
+          onChange={this.onCheckedChange}>
+        </Radio>
+        <Select2
+          value={at_least_filter_id}
+          name="at_least_filter_id"
+          onChange={this.onValueChange}>
+          {filter_opts}
+        </Select2>
+        <Layout flex box>
           {_('matches at least')}
-        </FormItem>
-        <FormItem>
-          <Spinner value={at_least_count}
-            name="at_least_count"
-            type="int" min="0" size="5"
-            onChange={this.onValueChange}/>
-        </FormItem>
-        <FormItem>
+        </Layout>
+        <Spinner value={at_least_count}
+          name="at_least_count"
+          type="int" min="0" size="5"
+          onChange={this.onValueChange}/>
+        <Layout flex box>
           {_('result(s) NVT(s)')}
-        </FormItem>
-      </RadioFormItem>
+        </Layout>
+      </Layout>
     );
   }
 }

Modified: trunk/gsa/src/html/classic/ng/src/web/alerts/httpmethodpart.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/alerts/httpmethodpart.js      
2017-01-13 09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/alerts/httpmethodpart.js      
2017-01-13 11:49:30 UTC (rev 27200)
@@ -4,7 +4,7 @@
  * Björn Ricks <bjoern.ri...@greenbone.net>
  *
  * Copyright:
- * Copyright (C) 2016 Greenbone Networks GmbH
+ * Copyright (C) 2016 - 2017 Greenbone Networks GmbH
  *
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU General Public License
@@ -48,6 +48,7 @@
     return (
       <FormGroup title={_('HTTP Get URL')}>
         <TextField
+          grow="1"
           name="URL"
           maxLength="301"
           value={URL}

Modified: trunk/gsa/src/html/classic/ng/src/web/alerts/scpmethodpart.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/alerts/scpmethodpart.js       
2017-01-13 09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/alerts/scpmethodpart.js       
2017-01-13 11:49:30 UTC (rev 27200)
@@ -23,16 +23,16 @@
 
 import React from 'react';
 
-import {translate as _} from '../../locale.js';
+import _ from '../../locale.js';
 import {select_save_id, is_defined} from '../../utils.js';
 
+import Layout from '../layout.js';
 import {render_options} from '../render.js';
 
 import CredentialsDialog from '../credentials/dialog.js';
 
 import Select2 from '../form/select2.js';
 import FormGroup from '../form/formgroup.js';
-import FormItem from '../form/formitem.js';
 import TextField from '../form/textfield.js';
 import TextArea from '../form/textarea.js';
 import FormPart from '../form/formpart.js';
@@ -85,25 +85,24 @@
     let scp_credential_opts = render_options(credentials);
     let scp_report_format_opts = render_options(report_formats);
     return (
-      <div>
+      <Layout flex="column" box grow="1">
         <FormGroup title={_('Credential')}>
-          <FormItem>
-            <Select2
-              name="scp_credential"
-              value={scp_credential}
-              onChange={this.onValueChange}>
-              {scp_credential_opts}
-            </Select2>
-          </FormItem>
-          <FormItem>
+          <Select2
+            name="scp_credential"
+            value={scp_credential}
+            onChange={this.onValueChange}>
+            {scp_credential_opts}
+          </Select2>
+          <Layout flex box>
             <Icon img="new.svg"
               title={_('Create a credential')}
               onClick={() => { this.credentials_dialog.show(['up']); }}/>
-          </FormItem>
+          </Layout>
         </FormGroup>
 
         <FormGroup title={_('Host')}>
           <TextField
+            grow="1"
             name="scp_host"
             value={scp_host}
             onChange={this.onValueChange}
@@ -136,7 +135,7 @@
 
         <CredentialsDialog onSave={this.props.onAddCredential}
           ref={ref => this.credentials_dialog = ref}/>
-      </div>
+      </Layout>
     );
   }
 }

Modified: trunk/gsa/src/html/classic/ng/src/web/alerts/secinfoeventpart.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/alerts/secinfoeventpart.js    
2017-01-13 09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/alerts/secinfoeventpart.js    
2017-01-13 11:49:30 UTC (rev 27200)
@@ -4,7 +4,7 @@
  * Björn Ricks <bjoern.ri...@greenbone.net>
  *
  * Copyright:
- * Copyright (C) 2016 Greenbone Networks GmbH
+ * Copyright (C) 2016 - 2017 Greenbone Networks GmbH
  *
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU General Public License
@@ -26,9 +26,10 @@
 import {translate as _} from '../../locale.js';
 import {is_defined} from '../../utils.js';
 
+import Layout from '../layout.js';
+
 import Select2 from '../form/select2.js';
-import FormItem from '../form/formitem.js';
-import {RadioFormItem} from '../form/radio.js';
+import Radio from '../form/radio.js';
 import RadioSelectFormPart from '../form/radioselectformpart.js';
 
 const VALUE = 'New SecInfo arrived';
@@ -52,38 +53,36 @@
     let {feed_event, secinfo_type} = this.state;
     let {value} = this.props;
     return (
-      <RadioFormItem
-        name="event"
-        value={VALUE}
-        checked={value === VALUE}
-        onChange={this.onCheckedChange}>
-        <FormItem>
-          <Select2
-            value={feed_event}
-            name="feed_event"
-            onChange={this.onValueChange}>
-            <option value="new">{_('New')}</option>
-            <option value="updated">{_('Updated')}</option>
-          </Select2>
-        </FormItem>
-        <FormItem>
-          <Select2
-            value={secinfo_type}
-            name="secinfo_type"
-            onChange={this.onValueChange}>
-            <option value="nvt">{_('NVTs')}</option>
-            <option value="cve">{_('CVEs')}</option>
-            <option value="cpe">{_('CPEs')}</option>
-            <option value="cert_bund_adv">
-              {_('CERT-Bund Advisories')}
-            </option>
-            <option value="dfn_cert_adv">
-              {_('DFN-CERT Advisories')}
-            </option>
-            <option value="ovaldef">{_('OVAL Definition')}</option>
-          </Select2>
-        </FormItem>
-      </RadioFormItem>
+      <Layout flex box>
+        <Radio
+          name="event"
+          value={VALUE}
+          checked={value === VALUE}
+          onChange={this.onCheckedChange}>
+        </Radio>
+        <Select2
+          value={feed_event}
+          name="feed_event"
+          onChange={this.onValueChange}>
+          <option value="new">{_('New')}</option>
+          <option value="updated">{_('Updated')}</option>
+        </Select2>
+        <Select2
+          value={secinfo_type}
+          name="secinfo_type"
+          onChange={this.onValueChange}>
+          <option value="nvt">{_('NVTs')}</option>
+          <option value="cve">{_('CVEs')}</option>
+          <option value="cpe">{_('CPEs')}</option>
+          <option value="cert_bund_adv">
+            {_('CERT-Bund Advisories')}
+          </option>
+          <option value="dfn_cert_adv">
+            {_('DFN-CERT Advisories')}
+          </option>
+          <option value="ovaldef">{_('OVAL Definition')}</option>
+        </Select2>
+      </Layout>
     );
   }
 }

Modified: trunk/gsa/src/html/classic/ng/src/web/alerts/sendmethodpart.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/alerts/sendmethodpart.js      
2017-01-13 09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/alerts/sendmethodpart.js      
2017-01-13 11:49:30 UTC (rev 27200)
@@ -4,7 +4,7 @@
  * Björn Ricks <bjoern.ri...@greenbone.net>
  *
  * Copyright:
- * Copyright (C) 2016 Greenbone Networks GmbH
+ * Copyright (C) 2016 - 2017 Greenbone Networks GmbH
  *
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU General Public License
@@ -23,14 +23,14 @@
 
 import React from 'react';
 
-import {translate as _} from '../../locale.js';
+import _ from '../../locale.js';
 import {select_save_id} from '../../utils.js';
 
+import Layout from '../layout.js';
 import {render_options} from '../render.js';
 
 import Select2 from '../form/select2.js';
 import FormGroup from '../form/formgroup.js';
-import FormItem from '../form/formitem.js';
 import TextField from '../form/textfield.js';
 import FormPart from '../form/formpart.js';
 
@@ -60,27 +60,23 @@
 
     let send_report_format_opts = render_options(report_formats);
     return (
-      <div>
+      <Layout flex="column" box grow="1">
         <FormGroup title={_('Send to host')}>
-          <FormItem>
-            <TextField
-              name="send_host"
-              value={send_host}
-              size="30"
-              maxLength="256"
-              onChange={this.onValueChange}/>
-          </FormItem>
-          <FormItem>
+          <TextField
+            name="send_host"
+            value={send_host}
+            size="30"
+            maxLength="256"
+            onChange={this.onValueChange}/>
+          <Layout flex box>
             {_('on port')}
-          </FormItem>
-          <FormItem>
-            <TextField
-              name="send_port"
-              value={send_port}
-              maxLength="6"
-              size="6"
-              onChange={this.onValueChange}/>
-          </FormItem>
+          </Layout>
+          <TextField
+            name="send_port"
+            value={send_port}
+            maxLength="6"
+            size="6"
+            onChange={this.onValueChange}/>
         </FormGroup>
 
         <FormGroup title={_('Report')}>
@@ -91,7 +87,7 @@
             {send_report_format_opts}
           </Select2>
         </FormGroup>
-      </div>
+      </Layout>
     );
   }
 }

Modified: 
trunk/gsa/src/html/classic/ng/src/web/alerts/severitychangedconditionpart.js
===================================================================
--- 
trunk/gsa/src/html/classic/ng/src/web/alerts/severitychangedconditionpart.js    
    2017-01-13 09:13:52 UTC (rev 27199)
+++ 
trunk/gsa/src/html/classic/ng/src/web/alerts/severitychangedconditionpart.js    
    2017-01-13 11:49:30 UTC (rev 27200)
@@ -4,7 +4,7 @@
  * Björn Ricks <bjoern.ri...@greenbone.net>
  *
  * Copyright:
- * Copyright (C) 2016 Greenbone Networks GmbH
+ * Copyright (C) 2016 - 2017 Greenbone Networks GmbH
  *
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU General Public License
@@ -26,9 +26,10 @@
 import {translate as _} from '../../locale.js';
 import {is_defined} from '../../utils.js';
 
+import Layout from '../layout.js';
+
 import Select2 from '../form/select2.js';
-import FormItem from '../form/formitem.js';
-import {RadioFormItem} from '../form/radio.js';
+import Radio from '../form/radio.js';
 import RadioSelectFormPart from '../form/radioselectformpart.js';
 
 const VALUE = 'Severity changed';
@@ -52,22 +53,22 @@
     let {direction} = this.state;
     let {value} = this.props;
     return (
-      <RadioFormItem title={_('Severity Level')}
-        value={VALUE}
-        name="condition"
-        checked={value === VALUE}
-        onChange={this.onCheckedChange}>
-        <FormItem>
-          <Select2
-            value={direction}
-            name="direction"
-            onChange={this.onValueChange}>
-            <option value="changed">{_('changed')}</option>
-            <option value="increased">{_('increased')}</option>
-            <option value="decreased">{_('decreased')}</option>
-          </Select2>
-        </FormItem>
-      </RadioFormItem>
+      <Layout flex box>
+        <Radio title={_('Severity Level')}
+          value={VALUE}
+          name="condition"
+          checked={value === VALUE}
+          onChange={this.onCheckedChange}>
+        </Radio>
+        <Select2
+          value={direction}
+          name="direction"
+          onChange={this.onValueChange}>
+          <option value="changed">{_('changed')}</option>
+          <option value="increased">{_('increased')}</option>
+          <option value="decreased">{_('decreased')}</option>
+        </Select2>
+      </Layout>
     );
   }
 }

Modified: 
trunk/gsa/src/html/classic/ng/src/web/alerts/severityleastconditionpart.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/alerts/severityleastconditionpart.js  
2017-01-13 09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/alerts/severityleastconditionpart.js  
2017-01-13 11:49:30 UTC (rev 27200)
@@ -4,7 +4,7 @@
  * Björn Ricks <bjoern.ri...@greenbone.net>
  *
  * Copyright:
- * Copyright (C) 2016 Greenbone Networks GmbH
+ * Copyright (C) 2016 - 2017 Greenbone Networks GmbH
  *
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU General Public License
@@ -26,9 +26,10 @@
 import {translate as _} from '../../locale.js';
 import {is_defined} from '../../utils.js';
 
+import Layout from '../layout.js';
+
 import Spinner from '../form/spinner.js';
-import FormItem from '../form/formitem.js';
-import {RadioFormItem} from '../form/radio.js';
+import Radio from '../form/radio.js';
 import RadioSelectFormPart from '../form/radioselectformpart.js';
 
 const VALUE = 'Severity at least';
@@ -51,21 +52,21 @@
     let {severity} = this.state;
     let {value} = this.props;
     return (
-      <RadioFormItem title={_('Severity at least')}
-        value={VALUE}
-        checked={value === VALUE}
-        name="condition"
-        onChange={this.onCheckedChange}>
-        <FormItem>
-          <Spinner
-            value={severity}
-            name="severity"
-            type="float"
-            min="0"
-            size="5"
-            onChange={this.onValueChange}/>
-        </FormItem>
-      </RadioFormItem>
+      <Layout flex box>
+        <Radio title={_('Severity at least')}
+          value={VALUE}
+          checked={value === VALUE}
+          name="condition"
+          onChange={this.onCheckedChange}>
+        </Radio>
+        <Spinner
+          value={severity}
+          name="severity"
+          type="float"
+          min="0"
+          size="5"
+          onChange={this.onValueChange}/>
+      </Layout>
     );
   }
 }

Modified: trunk/gsa/src/html/classic/ng/src/web/alerts/snmpmethodpart.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/alerts/snmpmethodpart.js      
2017-01-13 09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/alerts/snmpmethodpart.js      
2017-01-13 11:49:30 UTC (rev 27200)
@@ -4,7 +4,7 @@
  * Björn Ricks <bjoern.ri...@greenbone.net>
  *
  * Copyright:
- * Copyright (C) 2016 Greenbone Networks GmbH
+ * Copyright (C) 2016 - 2017 Greenbone Networks GmbH
  *
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU General Public License
@@ -23,9 +23,11 @@
 
 import React from 'react';
 
-import {translate as _} from '../../locale.js';
+import _ from '../../locale.js';
 import {is_defined} from '../../utils.js';
 
+import Layout from '../layout.js';
+
 import FormGroup from '../form/formgroup.js';
 import TextField from '../form/textfield.js';
 import FormPart from '../form/formpart.js';
@@ -55,7 +57,7 @@
     let {snmp_community, snmp_agent, snmp_message} = this.state;
 
     return (
-      <div>
+      <Layout flex="column" grow="1" box>
         <FormGroup title={_('Community')}>
           <TextField
             size="30" maxLength="301"
@@ -79,7 +81,7 @@
             value={snmp_message}
             onChange={this.onValueChange}/>
         </FormGroup>
-      </div>
+      </Layout>
     );
   }
 }

Modified: trunk/gsa/src/html/classic/ng/src/web/alerts/sourcefiremethodpart.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/alerts/sourcefiremethodpart.js        
2017-01-13 09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/alerts/sourcefiremethodpart.js        
2017-01-13 11:49:30 UTC (rev 27200)
@@ -4,7 +4,7 @@
  * Björn Ricks <bjoern.ri...@greenbone.net>
  *
  * Copyright:
- * Copyright (C) 2016 Greenbone Networks GmbH
+ * Copyright (C) 2016 - 2017 Greenbone Networks GmbH
  *
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU General Public License
@@ -23,9 +23,11 @@
 
 import React from 'react';
 
-import {translate as _} from '../../locale.js';
+import _ from '../../locale.js';
 import {is_defined} from '../../utils.js';
 
+import Layout from '../layout.js';
+
 import Spinner from '../form/spinner.js';
 import FormGroup from '../form/formgroup.js';
 import TextField from '../form/textfield.js';
@@ -57,7 +59,7 @@
     let {defense_center_ip, defense_center_port, pkcs12} = this.state;
 
     return (
-      <div>
+      <Layout flex="column" box grow="1">
         <FormGroup title={_('Defense Center IP')}>
           <TextField
             size="30" maxLength="40"
@@ -82,7 +84,7 @@
             value={pkcs12}
             onChange={this.onValueChange}/>
         </FormGroup>
-      </div>
+      </Layout>
     );
   }
 }

Modified: trunk/gsa/src/html/classic/ng/src/web/alerts/starttaskmethodpart.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/alerts/starttaskmethodpart.js 
2017-01-13 09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/alerts/starttaskmethodpart.js 
2017-01-13 11:49:30 UTC (rev 27200)
@@ -4,7 +4,7 @@
  * Björn Ricks <bjoern.ri...@greenbone.net>
  *
  * Copyright:
- * Copyright (C) 2016 Greenbone Networks GmbH
+ * Copyright (C) 2016 - 2017 Greenbone Networks GmbH
  *
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU General Public License
@@ -23,7 +23,7 @@
 
 import React from 'react';
 
-import {translate as _} from '../../locale.js';
+import _ from '../../locale.js';
 import {select_save_id} from '../../utils.js';
 
 import {render_options} from '../render.js';

Modified: trunk/gsa/src/html/classic/ng/src/web/alerts/taskeventpart.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/alerts/taskeventpart.js       
2017-01-13 09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/alerts/taskeventpart.js       
2017-01-13 11:49:30 UTC (rev 27200)
@@ -4,7 +4,7 @@
  * Björn Ricks <bjoern.ri...@greenbone.net>
  *
  * Copyright:
- * Copyright (C) 2016 Greenbone Networks GmbH
+ * Copyright (C) 2016 - 2017 Greenbone Networks GmbH
  *
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU General Public License
@@ -26,9 +26,10 @@
 import {translate as _} from '../../locale.js';
 import {is_defined} from '../../utils.js';
 
+import Layout from '../layout.js';
+
 import Select2 from '../form/select2.js';
-import FormItem from '../form/formitem.js';
-import {RadioFormItem} from '../form/radio.js';
+import Radio from '../form/radio.js';
 import RadioSelectFormPart from '../form/radioselectformpart.js';
 
 const VALUE = 'Task run status changed';
@@ -51,24 +52,24 @@
     let {status} = this.state;
     let {value} = this.props;
     return (
-      <RadioFormItem title={_('Task run status changed to')}
-        name="event"
-        value={VALUE}
-        checked={value === VALUE}
-        onChange={this.onCheckedChange}>
-        <FormItem>
-          <Select2 onChange={this.onValueChange}
-            name="status"
-            value={status}>
-            <option value="Done">{('Done')}</option>
-            <option value="New">{_('New')}</option>
-            <option value="Requested">{_('Requested')}</option>
-            <option value="Running">{_('Running')}</option>
-            <option value="Stop Requested">{_('Stop Requested')}</option>
-            <option value="Stopped">{_('Stopped')}</option>
-          </Select2>
-        </FormItem>
-      </RadioFormItem>
+      <Layout flex box>
+        <Radio title={_('Task run status changed to')}
+          name="event"
+          value={VALUE}
+          checked={value === VALUE}
+          onChange={this.onCheckedChange}>
+        </Radio>
+        <Select2 onChange={this.onValueChange}
+          name="status"
+          value={status}>
+          <option value="Done">{('Done')}</option>
+          <option value="New">{_('New')}</option>
+          <option value="Requested">{_('Requested')}</option>
+          <option value="Running">{_('Running')}</option>
+          <option value="Stop Requested">{_('Stop Requested')}</option>
+          <option value="Stopped">{_('Stopped')}</option>
+        </Select2>
+      </Layout>
     );
   }
 }

Modified: trunk/gsa/src/html/classic/ng/src/web/alerts/verinicemethodpart.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/alerts/verinicemethodpart.js  
2017-01-13 09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/alerts/verinicemethodpart.js  
2017-01-13 11:49:30 UTC (rev 27200)
@@ -23,9 +23,10 @@
 
 import React from 'react';
 
-import {translate as _} from '../../locale.js';
+import _ from '../../locale.js';
 import {select_save_id, first, is_defined} from '../../utils.js';
 
+import Layout from '../layout.js';
 import {render_options} from '../render.js';
 
 import CredentialsDialog from '../credentials/dialog.js';
@@ -33,7 +34,6 @@
 import Select2 from '../form/select2.js';
 import FormGroup from '../form/formgroup.js';
 import TextField from '../form/textfield.js';
-import FormItem from '../form/formitem.js';
 import FormPart from '../form/formpart.js';
 
 import Icon from '../icons/icon.js';
@@ -109,9 +109,10 @@
     let verinice_report_format_opts = render_options(
       report_formats.filter(format => format.extension === 'vna'));
     return (
-      <div>
+      <Layout flex="column" grow="1" box>
         <FormGroup title={_('verinice.PRO URL')}>
           <TextField
+            grow="1"
             size="30" maxLength="256"
             name="verinice_server_url"
             value={verinice_server_url}
@@ -119,19 +120,17 @@
         </FormGroup>
 
         <FormGroup title={_('Credential')}>
-          <FormItem>
-            <Select2
-              name="verinice_server_credential"
-              value={verinice_server_credential}
-              onChange={this.onValueChange}>
-              {verinice_credential_opts}
-            </Select2>
-          </FormItem>
-          <FormItem>
+          <Select2
+            name="verinice_server_credential"
+            value={verinice_server_credential}
+            onChange={this.onValueChange}>
+            {verinice_credential_opts}
+          </Select2>
+          <Layout flex box>
             <Icon img="new.svg"
               title={_('Create a credential')}
               onClick={() => { this.credentials_dialog.show(['up']); }}/>
-          </FormItem>
+          </Layout>
         </FormGroup>
 
         <FormGroup title={_('verinice.PRO Report')}>
@@ -145,7 +144,7 @@
 
         <CredentialsDialog onSave={this.onAddCredential}
           ref={ref => this.credentials_dialog = ref}/>
-      </div>
+      </Layout>
     );
   }
 }

Modified: trunk/gsa/src/html/classic/ng/src/web/credentials/dialog.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/credentials/dialog.js 2017-01-13 
09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/credentials/dialog.js 2017-01-13 
11:49:30 UTC (rev 27200)
@@ -24,7 +24,7 @@
 import React from 'react';
 
 import {autobind, map, is_defined, first, extend} from '../../utils.js';
-import {translate as _} from '../../locale.js';
+import _ from '../../locale.js';
 
 import Dialog from '../dialog.js';
 import Layout from '../layout.js';
@@ -117,53 +117,56 @@
     return (
       <Layout flex="column">
 
-        <FormGroup title={_('Name')} flex>
+        <FormGroup title={_('Name')}>
           <TextField name="name"
+            grow="1"
             value={name} size="30"
             onChange={this.onValueChange}
             maxLength="80"/>
         </FormGroup>
 
-        <FormGroup title={_('Comment')} flex>
-          <TextField name="comment" value={comment}
+        <FormGroup title={_('Comment')}>
+          <TextField name="comment"
+            grow="1"
+            value={comment}
             size="30" maxLength="400"
             onChange={this.onValueChange}/>
         </FormGroup>
 
-        <FormGroup title={_('Type')} flex>
+        <FormGroup title={_('Type')}>
           <Select2 onChange={this.onTypeChange} value={base}>
             {type_opts}
           </Select2>
         </FormGroup>
 
-        <FormGroup title={_('Allow insecure user')} flex>
+        <FormGroup title={_('Allow insecure user')}>
           <YesNoRadio value={allow_insecure}
             name="allow_insecure"
             onChange={this.onValueChange}/>
         </FormGroup>
 
-        <FormGroup title={_('Auto-generate')} flex
+        <FormGroup title={_('Auto-generate')}
           condition={base === 'up' || base === 'usk'}>
           <YesNoRadio value={autogenerate}
             name="autogenerate"
             onChange={this.onValueChange}/>
         </FormGroup>
 
-        <FormGroup title={_('SNMP Community')} flex
+        <FormGroup title={_('SNMP Community')}
           condition={base === 'snmp'}>
           <PasswordField value={community}
             name="community"
             onChange={this.onValueChange}/>
         </FormGroup>
 
-        <FormGroup title={_('Username')} flex
+        <FormGroup title={_('Username')}
           condition={base === 'up' || base === 'usk' || base === 'snmp'}>
           <TextField value={credential_login}
             name="credential_login"
             onChange={this.onValueChange}/>
         </FormGroup>
 
-        <FormGroup title={_('Password')} flex
+        <FormGroup title={_('Password')}
           condition={base === 'up' || base === 'snmp'}>
           <PasswordField value={lsc_password}
             disabled={autogenerate === 1}
@@ -171,7 +174,7 @@
             onChange={this.onValueChange}/>
         </FormGroup>
 
-        <FormGroup title={_('Passphrase')} flex
+        <FormGroup title={_('Passphrase')}
           condition={base === 'usk'}>
           <PasswordField value={passphrase}
             disabled={autogenerate === 1}
@@ -179,68 +182,64 @@
             onChange={this.onValueChange}/>
         </FormGroup>
 
-        <FormGroup title={_('Privacy Password')} flex
+        <FormGroup title={_('Privacy Password')}
           condition={base === 'snmp'}>
           <PasswordField value={privacy_password}
             name="privacy_password"
             onChange={this.onValueChange}/>
         </FormGroup>
 
-        <FormGroup title={_('Certificate')} flex
+        <FormGroup title={_('Certificate')}
           condition={base === 'cc'}>
           <FileField name="certificate" onChange={this.onValueChange}/>
         </FormGroup>
 
-        <FormGroup title={_('Private Key')} flex
+        <FormGroup title={_('Private Key')}
           condition={base === 'usk' || base === 'cc'}>
           <FileField name="private_key" onChange={this.onValueChange}/>
         </FormGroup>
 
         <FormGroup title={_('Auth Algorithm')}
-          condition={base === 'snmp'} flex>
-          <Layout flex>
-            <Radio
-              className="inline"
-              value="md5"
-              title="MD5"
-              checked={auth_algorithm === 'md5'}
-              name="auth_algorithm"
-              onChange={this.onValueChange}/>
-            <Radio
-              className="inline"
-              value="sha1"
-              title="SHA1"
-              checked={auth_algorithm === 'sha1'}
-              name="auth_algorithm"
-              onChange={this.onValueChange}/>
-          </Layout>
+          condition={base === 'snmp'}>
+          <Radio
+            className="inline"
+            value="md5"
+            title="MD5"
+            checked={auth_algorithm === 'md5'}
+            name="auth_algorithm"
+            onChange={this.onValueChange}/>
+          <Radio
+            className="inline"
+            value="sha1"
+            title="SHA1"
+            checked={auth_algorithm === 'sha1'}
+            name="auth_algorithm"
+            onChange={this.onValueChange}/>
         </FormGroup>
 
         <FormGroup title={_('Privacy Algorithm')}
-          condition={base === 'snmp'} flex>
-          <Layout flex>
-            <Radio
-              className="inline"
-              value="aes"
-              title="AED"
-              checked={privacy_algorithm === 'aes'}
-              name="privacy_algorithm"
-              onChange={this.onValueChange}/>
-            <Radio
-              className="inline"
-              value="des"
-              title="DES"
-              checked={privacy_algorithm === 'des'}
-              name="privacy_algorithm"
-              onChange={this.onValueChange}/>
-            <Radio
-              className="inline"
-              value=""
-              title={_('None')}
-              checked={privacy_algorithm === ''}
-              name="privacy_algorithm"
-              onChange={this.onValueChange}/>
-          </Layout>
+          condition={base === 'snmp'}>
+          <Radio
+            className="inline"
+            value="aes"
+            title="AED"
+            checked={privacy_algorithm === 'aes'}
+            name="privacy_algorithm"
+            onChange={this.onValueChange}/>
+          <Radio
+            className="inline"
+            value="des"
+            title="DES"
+            checked={privacy_algorithm === 'des'}
+            name="privacy_algorithm"
+            onChange={this.onValueChange}/>
+          <Radio
+            className="inline"
+            value=""
+            title={_('None')}
+            checked={privacy_algorithm === ''}
+            name="privacy_algorithm"
+            onChange={this.onValueChange}/>
         </FormGroup>
 
       </Layout>

Modified: trunk/gsa/src/html/classic/ng/src/web/css/layout.css
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/css/layout.css        2017-01-13 
09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/css/layout.css        2017-01-13 
11:49:30 UTC (rev 27200)
@@ -188,4 +188,12 @@
   align-items: flex-start;
 }
 
+.flex.row > .box + .box {
+  margin-left: 10px;
+}
+
+.flex.column > .box + .box {
+  margin-top: 5px;
+}
+
 /* vim: set ts=2 sw=2 tw=80:*/

Modified: trunk/gsa/src/html/classic/ng/src/web/filterdialog.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/filterdialog.js       2017-01-13 
09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/filterdialog.js       2017-01-13 
11:49:30 UTC (rev 27200)
@@ -4,7 +4,7 @@
  * Björn Ricks <bjoern.ri...@greenbone.net>
  *
  * Copyright:
- * Copyright (C) 2016 Greenbone Networks GmbH
+ * Copyright (C) 2016 - 2017 Greenbone Networks GmbH
  *
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU General Public License
@@ -30,7 +30,6 @@
 import Layout from './layout.js';
 
 import FormGroup from './form/formgroup.js';
-import FormItem from './form/formitem.js';
 import YesNoRadio from './form/yesnoradio.js';
 import Spinner from './form/spinner.js';
 import Select2 from './form/select2.js';
@@ -145,6 +144,7 @@
     return (
       <FormGroup title={_('Filter')} flex>
         <TextField
+          grow="1"
           value={filterstring} size="30"
           onChange={this.onFilterStringChange}
           maxLength="80"/>
@@ -156,7 +156,7 @@
     let {filter} = this.state;
     let apply_overrides = filter.get('apply_overrides');
     return (
-      <FormGroup title={_('Apply Overrides')} flex>
+      <FormGroup title={_('Apply Overrides')}>
         <YesNoRadio
           value={apply_overrides}
           name="apply_overrides"
@@ -169,20 +169,16 @@
     let {filter} = this.state;
     let min_qod = filter.get('min_qod');
     return (
-      <FormGroup title={_('QoD')} flex>
-        <FormItem>
-          {_('must be at least')}
-        </FormItem>
-        <FormItem>
-          <Spinner
-            type="int"
-            name="min_qod"
-            min="0" max="100"
-            step="1"
-            value={min_qod}
-            size="1"
-            onChange={this.onFilterValueChange}/>
-        </FormItem>
+      <FormGroup title={_('QoD')}>
+        <Layout flex box>{_('must be at least')}</Layout>
+        <Spinner
+          type="int"
+          name="min_qod"
+          min="0" max="100"
+          step="1"
+          value={min_qod}
+          size="1"
+          onChange={this.onFilterValueChange}/>
       </FormGroup>
     );
   }
@@ -191,7 +187,7 @@
     let {filter} = this.state;
     let first = filter.get('first');
     return (
-      <FormGroup title={_('First result')} flex>
+      <FormGroup title={_('First result')}>
         <Spinner type="int" name="first"
           value={first}
           size="5"
@@ -204,7 +200,7 @@
     let {filter} = this.state;
     let rows = filter.get('rows');
     return (
-      <FormGroup title={_('Results per page')} flex>
+      <FormGroup title={_('Results per page')}>
         <Spinner type="int" name="rows"
           value={rows}
           size="5"
@@ -226,31 +222,25 @@
   renderSortBy() {
     let {sort_order, sort_field} = this.state;
     return (
-      <FormGroup title={_('Sort by')} flex>
-        <FormItem>
-          <Select2
-            name="sort_field"
-            value={sort_field}
-            onChange={this.onSortFieldChange}>
-            {this.renderSortFieldOptions()}
-          </Select2>
-        </FormItem>
-        <FormItem>
-          <Radio
-            className="inline"
-            name="sort_order"
-            value="sort"
-            checked={sort_order === 'sort'}
-            title={_('Ascending')}
-            onChange={this.onSortOrderChange}/>
-          <Radio
-            className="inline"
-            name="sort_order"
-            value="sort-reverse"
-            checked={sort_order === 'sort-reverse'}
-            title={_('Descending')}
-            onChange={this.onSortOrderChange}/>
-        </FormItem>
+      <FormGroup title={_('Sort by')}>
+        <Select2
+          name="sort_field"
+          value={sort_field}
+          onChange={this.onSortFieldChange}>
+          {this.renderSortFieldOptions()}
+        </Select2>
+        <Radio
+          name="sort_order"
+          value="sort"
+          checked={sort_order === 'sort'}
+          title={_('Ascending')}
+          onChange={this.onSortOrderChange}/>
+        <Radio
+          name="sort_order"
+          value="sort-reverse"
+          checked={sort_order === 'sort-reverse'}
+          title={_('Descending')}
+          onChange={this.onSortOrderChange}/>
       </FormGroup>
     );
   }

Modified: trunk/gsa/src/html/classic/ng/src/web/form/checkbox.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/form/checkbox.js      2017-01-13 
09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/form/checkbox.js      2017-01-13 
11:49:30 UTC (rev 27200)
@@ -4,7 +4,7 @@
  * Björn Ricks <bjoern.ri...@greenbone.net>
  *
  * Copyright:
- * Copyright (C) 2016 Greenbone Networks GmbH
+ * Copyright (C) 2016 - 2017 Greenbone Networks GmbH
  *
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU General Public License
@@ -25,10 +25,12 @@
 
 import {classes, is_defined} from '../../utils.js';
 
+import {withLayout} from '../layout.js';
+
 import './css/form.css';
 import './css/checkboxradio.css';
 
-export class Checkbox extends React.Component {
+export class CheckboxContainer extends React.Component {
 
   constructor(props) {
     super(props);
@@ -79,7 +81,7 @@
   }
 }
 
-Checkbox.propTypes = {
+CheckboxContainer.propTypes = {
   name: React.PropTypes.string,
   disabled: React.PropTypes.bool,
   title: React.PropTypes.string,
@@ -89,6 +91,8 @@
   uncheckedValue: React.PropTypes.any,
 };
 
+export const Checkbox = withLayout(CheckboxContainer, {box: true});
+
 export default Checkbox;
 
 // vim: set ts=2 sw=2 tw=80:

Modified: trunk/gsa/src/html/classic/ng/src/web/form/css/checkboxradio.css
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/form/css/checkboxradio.css    
2017-01-13 09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/form/css/checkboxradio.css    
2017-01-13 11:49:30 UTC (rev 27200)
@@ -1,28 +1,3 @@
-.form-horizontal .radio,
-.form-horizontal .checkbox,
-.form-horizontal .radio-inline,
-.form-horizontal .checkbox-inline {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.form-horizontal .radio,
-.form-horizontal .checkbox {
-  padding-top: 5px;
-}
-
-.form-item .radio,
-.form-item .checkbox {
-  padding-top: 0;
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.form-item .checkbox input[type="checkbox"],
-.form-item .radio input[type="radio"] {
-  top: 5px;
-}
-
 input[type="radio"],
 input[type="checkbox"] {
   padding: 0;
@@ -30,27 +5,6 @@
   line-height: normal;
 }
 
-.form-horizontal .radio,
-.form-horizontal .checkbox {
-  position: relative;
-  display: block;
-  margin-bottom: 10px;
-}
-
-.form-horizontal .radio label,
-.form-horizontal .checkbox label {
-  padding-left: 20px;
-  margin-bottom: 0;
-  font-weight: normal;
-  cursor: pointer;
-}
-
-.form-horizontal .radio input[type="radio"],
-.form-horizontal .checkbox input[type="checkbox"] {
-  position: absolute;
-  margin-left: -20px;
-}
-
 .checkbox label,
 .radio label,
 .radio-inline,
@@ -64,21 +18,10 @@
 
 .checkbox > label > div,
 .checkbox > label > span,
-.radio > label > span,
-label.radio-inline > span {
+.radio > label > span {
   margin-left: 2px;
 }
 
-.checkbox.inline + .checkbox.inline,
-.radio.inline + .radio.inline,
-.radio-inline + .radio-inline,
-.checkbox-inline + .checkbox-inline {
-  margin-top: 0;
-  margin-left: 10px;
-}
-
-.radio-inline.disabled,
-.checkbox-inline.disabled,
 input[type="radio"][disabled],
 input[type="checkbox"][disabled],
 input[type="text"][disabled],

Modified: trunk/gsa/src/html/classic/ng/src/web/form/css/form.css
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/form/css/form.css     2017-01-13 
09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/form/css/form.css     2017-01-13 
11:49:30 UTC (rev 27200)
@@ -41,7 +41,6 @@
 
 .form-control {
   display: block;
-  width: 100%;
   height: 22px;
   color: #555;
   background-color: #fff;
@@ -71,11 +70,11 @@
   margin-bottom: 0;
 }
 
-.form-horizontal .offset-container  {
+.offset-container  {
   margin-bottom: 20px;
 }
 
-.form-horizontal .offset-container .control-label {
+.offset-container .control-label {
   text-align: left;
 }
 

Modified: trunk/gsa/src/html/classic/ng/src/web/form/css/formgroup.css
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/form/css/formgroup.css        
2017-01-13 09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/form/css/formgroup.css        
2017-01-13 11:49:30 UTC (rev 27200)
@@ -25,3 +25,9 @@
 .form-inline .form-group .control-label {
   margin-right: 5px;
 }
+
+.flex.column .form-group {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+}

Deleted: trunk/gsa/src/html/classic/ng/src/web/form/css/formitem.css
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/form/css/formitem.css 2017-01-13 
09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/form/css/formitem.css 2017-01-13 
11:49:30 UTC (rev 27200)
@@ -1,23 +0,0 @@
-.form-item {
-  display: inline-block;
-  vertical-align: middle;
-  width: auto;
-}
-
-.form-item + .form-item,
-.form-item + span > .form-item {
-  margin-left: 10px;
-}
-
-.form-item label {
-  margin-bottom: 0;
-  vertical-align: middle;
-  line-height: 22px;
-  white-space: normal;
-}
-
-.form-item .form-control {
-  display: inline-block;
-  width: auto;
-  vertical-align: middle;
-}

Modified: trunk/gsa/src/html/classic/ng/src/web/form/datepicker.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/form/datepicker.js    2017-01-13 
09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/form/datepicker.js    2017-01-13 
11:49:30 UTC (rev 27200)
@@ -4,7 +4,7 @@
  * Björn Ricks <bjoern.ri...@greenbone.net>
  *
  * Copyright:
- * Copyright (C) 2016 Greenbone Networks GmbH
+ * Copyright (C) 2016 - 2017 Greenbone Networks GmbH
  *
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU General Public License
@@ -30,13 +30,15 @@
 
 import _ from '../../locale.js';
 
+import Layout from '../layout.js';
+
 import './css/datepicker.css';
 import '../css/jquery-ui.theme.css';
 import '../css/jquery-ui.structure.css';
 
 /* FIXME: the datepicker should be replaced with a native react datepicker in 
future */
 
-export class Datepicker extends React.Component {
+class DatePicker extends React.Component {
 
   constructor(...args) {
     super(...args);
@@ -93,19 +95,22 @@
   }
 
   render() {
+    let {onChange, name, value, ...other} = this.props; // eslint-disable-line 
no-unused-vars
     return (
-      <input className="datepicker-button" size="26"
-        ref={ref => this.button = ref} onClick={this.handleClick}/>
+      <Layout {...other} box>
+        <input className="datepicker-button" size="26"
+          ref={ref => this.button = ref} onClick={this.handleClick}/>
+      </Layout>
     );
   }
 }
 
-Datepicker.propTypes = {
+DatePicker.propTypes = {
   name: React.PropTypes.string,
   value: React.PropTypes.object.isRequired, // moment date object
   onChange: React.PropTypes.func,
 };
 
-export default Datepicker;
+export default DatePicker;
 
 // vim: set ts=2 sw=2 tw=80:

Modified: trunk/gsa/src/html/classic/ng/src/web/form/field.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/form/field.js 2017-01-13 09:13:52 UTC 
(rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/form/field.js 2017-01-13 11:49:30 UTC 
(rev 27200)
@@ -25,9 +25,10 @@
 
 import {classes} from '../../utils.js';
 
+import {withLayout} from '../layout.js';
 import {handle_change} from '../form.js';
 
-export const Field = ({className, type, value = '', onChange, name,
+const FieldContainer = ({className, type, value = '', onChange, name,
   ...props}) => {
   className = classes('form-control', className);
   return (
@@ -36,7 +37,7 @@
   );
 };
 
-Field.propTypes = {
+FieldContainer.propTypes = {
   className: React.PropTypes.string,
   name: React.PropTypes.string,
   type: React.PropTypes.string,
@@ -44,6 +45,8 @@
   onChange: React.PropTypes.func,
 };
 
+export const Field = withLayout(FieldContainer, {box: true});
+
 export default Field;
 
 // vim: set ts=2 sw=2 tw=80:

Modified: trunk/gsa/src/html/classic/ng/src/web/form/filefield.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/form/filefield.js     2017-01-13 
09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/form/filefield.js     2017-01-13 
11:49:30 UTC (rev 27200)
@@ -4,7 +4,7 @@
  * Björn Ricks <bjoern.ri...@greenbone.net>
  *
  * Copyright:
- * Copyright (C) 2016 Greenbone Networks GmbH
+ * Copyright (C) 2016 - 2017 Greenbone Networks GmbH
  *
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU General Public License
@@ -24,8 +24,9 @@
 import React from 'react';
 
 import {handle_value_change} from '../form.js';
+import {withLayout} from '../layout.js';
 
-export const FileField = ({onChange, ...props}) => {
+const FileFieldContainer = ({onChange, ...props}) => {
   return (
     <input {...props} type="file"
       onChange={event => handle_value_change({
@@ -36,11 +37,13 @@
   );
 };
 
-FileField.propTypes = {
+FileFieldContainer.propTypes = {
   name: React.PropTypes.string,
   onChange: React.PropTypes.func,
 };
 
+export const FileField = withLayout(FileFieldContainer, {box: true});
+
 export default FileField;
 
 // vim: set ts=2 sw=2 tw=80:

Modified: trunk/gsa/src/html/classic/ng/src/web/form/formgroup.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/form/formgroup.js     2017-01-13 
09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/form/formgroup.js     2017-01-13 
11:49:30 UTC (rev 27200)
@@ -25,48 +25,49 @@
 
 import {is_defined, classes} from '../../utils.js';
 
-import {withLayout} from '../layout.js';
+import Layout from '../layout';
 
 import './css/form.css';
 import './css/formgroup.css';
 
-export const FormGroupContainer = props => {
-  if (is_defined(props.condition) && !props.condition) {
+export const FormGroup = props => {
+  let {title, size, className, titleSize, titleOffset, offset, condition,
+    flex = "row", ...other} = props;
+
+  if (is_defined(condition) && !condition) {
     return null;
   }
 
-  let {title, size, className} = props;
-
   className = classes('form-group', className);
 
   if (title) {
-    let title_css = classes('col-' + props.titleSize, 'control-label');
+    let title_css = classes('col-' + titleSize, 'control-label');
     if (props.titleOffset) {
-      title_css = classes('offset-' + props.titleOffset, title_css);
+      title_css = classes('offset-' + titleOffset, title_css);
     }
 
     if (!is_defined(size)) {
-      size = 12 - props.titleSize - props.titleOffset;
+      size = 12 - titleSize - titleOffset;
     }
     title = <label className={title_css}>{title}</label>;
   }
 
   let css = is_defined(size) ? 'col-' + size : '';
 
-  if (props.offset) {
-    css = classes('offset-' + props.offset, css);
+  if (offset) {
+    css = classes('offset-' + offset, css);
   }
   return (
     <div className={className}>
       {title}
-      <div className={css}>
+      <Layout {...other} flex={flex} className={css}>
         {props.children}
-      </div>
+      </Layout>
     </div>
   );
 };
 
-FormGroupContainer.propTypes = {
+FormGroup.propTypes = {
   title: React.PropTypes.string,
   className: React.PropTypes.string,
   condition: React.PropTypes.bool,
@@ -86,16 +87,17 @@
     React.PropTypes.string,
     React.PropTypes.number,
   ]),
+  flex: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.bool,
+  ]),
 };
 
-FormGroupContainer.defaultProps = {
+FormGroup.defaultProps = {
   titleSize: 2,
   titleOffset: 0,
 };
 
-export const FormGroup = withLayout(FormGroupContainer,
-  {align: ['start', 'center']});
-
 export default FormGroup;
 
 // vim: set ts=2 sw=2 tw=80:

Deleted: trunk/gsa/src/html/classic/ng/src/web/form/formitem.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/form/formitem.js      2017-01-13 
09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/form/formitem.js      2017-01-13 
11:49:30 UTC (rev 27200)
@@ -1,48 +0,0 @@
-/* Greenbone Security Assistant
- *
- * Authors:
- * Björn Ricks <bjoern.ri...@greenbone.net>
- *
- * Copyright:
- * Copyright (C) 2016 Greenbone Networks GmbH
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU General Public License
- * as published by the Free Software Foundation; either version 2
- * of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program; if not, write to the Free Software
- * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
- */
-
-import React from 'react';
-
-import {is_defined} from '../../utils.js';
-
-import {Layout, get_layout_props} from '../layout.js';
-
-import './css/formitem.css';
-
-export const FormItem = props => {
-  let {align, ...lprops} = get_layout_props(props);
-
-  if (!is_defined(align)) {
-    align = ['none', 'center'];
-  }
-
-  return (
-    <Layout align={align} {...lprops} className="form-item">
-      {props.children}
-    </Layout>
-  );
-};
-
-export default FormItem;
-
-// vim: set ts=2 sw=2 tw=80:

Modified: trunk/gsa/src/html/classic/ng/src/web/form/radio.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/form/radio.js 2017-01-13 09:13:52 UTC 
(rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/form/radio.js 2017-01-13 11:49:30 UTC 
(rev 27200)
@@ -25,12 +25,12 @@
 
 import {classes, is_defined} from '../../utils.js';
 
-import FormItem from './formitem.js';
+import {withLayout} from '../layout.js';
 
 import './css/form.css';
 import './css/checkboxradio.css';
 
-export class Radio extends React.Component {
+class RadioContainer extends React.Component {
 
   constructor(...args) {
     super(...args);
@@ -67,7 +67,7 @@
   }
 }
 
-Radio.propTypes = {
+RadioContainer.propTypes = {
   name: React.PropTypes.string,
   className: React.PropTypes.string,
   disabled: React.PropTypes.bool,
@@ -75,27 +75,9 @@
   onChange: React.PropTypes.func,
 };
 
-export class RadioFormItem extends Radio {
+export const Radio = withLayout(RadioContainer,
+  {align: ['start', 'center'], box: true, flex: true});
 
-  render() {
-    let {title, children, ...other} = this.props;
-
-    return (
-      <div className="radio">
-        <FormItem>
-          <label>
-            <input {...other} type="radio" onChange={this.handleChange}/>
-            <span>
-              {title}
-            </span>
-          </label>
-        </FormItem>
-        {children}
-      </div>
-    );
-  }
-}
-
 export default Radio;
 
 // vim: set ts=2 sw=2 tw=80:

Modified: trunk/gsa/src/html/classic/ng/src/web/form/select2.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/form/select2.js       2017-01-13 
09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/form/select2.js       2017-01-13 
11:49:30 UTC (rev 27200)
@@ -4,7 +4,7 @@
  * Björn Ricks <bjoern.ri...@greenbone.net>
  *
  * Copyright:
- * Copyright (C) 2016 Greenbone Networks GmbH
+ * Copyright (C) 2016 - 2017 Greenbone Networks GmbH
  *
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU General Public License
@@ -26,6 +26,8 @@
 
 import {is_defined, is_array} from '../../utils.js';
 
+import {withLayout} from '../layout.js';
+
 import 'select2';
 
 import './css/select2.css';
@@ -51,7 +53,7 @@
   return true;
 }
 
-export class Select2 extends React.Component {
+class Select2Container extends React.Component {
 
   constructor(props) {
     super(props);
@@ -121,19 +123,24 @@
   }
 
   render() {
-    let {onChange, value, ...other} = this.props; // eslint-disable-line 
no-unused-vars
+    let {onChange, value, className, ...other} = this.props; // 
eslint-disable-line no-unused-vars
     return (
-      <select {...other} ref={ref => this.select = ref}/>
+      <span className={className}>
+        <select {...other} ref={ref => this.select = ref}/>
+      </span>
     );
   }
 }
 
-Select2.propTypes = {
+Select2Container.propTypes = {
   name: React.PropTypes.string,
   onChange: React.PropTypes.func,
   value: React.PropTypes.any,
+  className: React.PropTypes.string
 };
 
+export const Select2 = withLayout(Select2Container, {box: true});
+
 export default Select2;
 
 // vim: set ts=2 sw=2 tw=80:

Modified: trunk/gsa/src/html/classic/ng/src/web/form/spinner.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/form/spinner.js       2017-01-13 
09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/form/spinner.js       2017-01-13 
11:49:30 UTC (rev 27200)
@@ -4,7 +4,7 @@
  * Björn Ricks <bjoern.ri...@greenbone.net>
  *
  * Copyright:
- * Copyright (C) 2016 Greenbone Networks GmbH
+ * Copyright (C) 2016 - 2017 Greenbone Networks GmbH
  *
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU General Public License
@@ -26,9 +26,11 @@
 import {is_defined, autobind, parse_float, includes, KeyCode,
   classes} from '../../utils.js';
 
+import {withLayout} from '../layout.js';
+
 import './css/spinner.css';
 
-export class Spinner extends React.Component {
+class SpinnerContainer extends React.Component {
 
   constructor(props) {
     super(props);
@@ -212,8 +214,9 @@
 
   render() {
     let {value, down_active, up_active} = this.state;
-    let {size, type, min, max, disabled, maxLength, name} = this.props;
-    let css = disabled ? 'spinner disabled' : 'spinner';
+    let {size, type, min, max, disabled, maxLength, name,
+      className} = this.props;
+    let css = classes(disabled ? 'spinner disabled' : 'spinner', className);
     return (
       <span className={css}
         onWheel={this.handleMouseWheel}>
@@ -250,7 +253,7 @@
   }
 }
 
-Spinner.defaultProps = {
+SpinnerContainer.defaultProps = {
   size: 4,
   maxLenght: 5,
   type: 'int',
@@ -261,7 +264,7 @@
   React.PropTypes.string,
 ]);
 
-Spinner.propTypes = {
+SpinnerContainer.propTypes = {
   size: propTypeInt,
   maxLength: propTypeInt,
   min: propTypeInt,
@@ -271,9 +274,12 @@
   name: React.PropTypes.string,
   disabled: React.PropTypes.bool,
   value: propTypeInt,
+  className: React.PropTypes.string,
   onChange: React.PropTypes.func,
 };
 
-export {Spinner as default};
+export const Spinner = withLayout(SpinnerContainer, {box: true});
 
+export default Spinner;
+
 // vim: set ts=2 sw=2 tw=80:

Modified: trunk/gsa/src/html/classic/ng/src/web/form/textarea.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/form/textarea.js      2017-01-13 
09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/form/textarea.js      2017-01-13 
11:49:30 UTC (rev 27200)
@@ -4,7 +4,7 @@
  * Björn Ricks <bjoern.ri...@greenbone.net>
  *
  * Copyright:
- * Copyright (C) 2016 Greenbone Networks GmbH
+ * Copyright (C) 2016 - 2017 Greenbone Networks GmbH
  *
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU General Public License
@@ -26,8 +26,10 @@
 import {classes} from '../../utils.js';
 
 import {handle_change} from '../form.js';
+import {withLayout} from '../layout.js';
 
-export const TextArea = ({className, value = '', onChange, name, ...props}) => 
{
+const TextAreaContainer =
+  ({className, value = '', onChange, name, ...props}) => {
   className = classes('form-control', className);
   return (
     <textarea {...props}
@@ -37,13 +39,15 @@
   );
 };
 
-TextArea.propTypes = {
+TextAreaContainer.propTypes = {
   className: React.PropTypes.string,
   name: React.PropTypes.string,
   value: React.PropTypes.any,
   onChange: React.PropTypes.func,
 };
 
+export const TextArea = withLayout(TextAreaContainer, {box: true});
+
 export default TextArea;
 
 // vim: set ts=2 sw=2 tw=80:

Modified: trunk/gsa/src/html/classic/ng/src/web/form/timezoneselect.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/form/timezoneselect.js        
2017-01-13 09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/form/timezoneselect.js        
2017-01-13 11:49:30 UTC (rev 27200)
@@ -4,7 +4,7 @@
  * Björn Ricks <bjoern.ri...@greenbone.net>
  *
  * Copyright:
- * Copyright (C) 2016 Greenbone Networks GmbH
+ * Copyright (C) 2016 - 2017 Greenbone Networks GmbH
  *
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU General Public License
@@ -25,12 +25,14 @@
 
 import  _ from '../../locale.js';
 import {map} from '../../utils.js';
+import timezones from '../../timezones.js';
 
+import {withLayout} from '../layout.js';
+
 import Select2 from './select2.js';
 
-import timezones from '../../timezones.js';
 
-export class TimeZoneSelect extends React.Component {
+class TimeZoneSelectContainer extends React.Component {
   render() {
     let value = this.props.value ? this.props.value : undefined;
 
@@ -49,14 +51,16 @@
   }
 }
 
-TimeZoneSelect.propTypes = {
+TimeZoneSelectContainer.propTypes = {
   value: React.PropTypes.string,
 };
 
-TimeZoneSelect.defaultProps = {
+TimeZoneSelectContainer.defaultProps = {
   value: 'UTC',
 };
 
+export const TimeZoneSelect = withLayout(TimeZoneSelectContainer, {box: true});
+
 export default TimeZoneSelect;
 
 // vim: set ts=2 sw=2 tw=80:

Modified: trunk/gsa/src/html/classic/ng/src/web/form/yesnoradio.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/form/yesnoradio.js    2017-01-13 
09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/form/yesnoradio.js    2017-01-13 
11:49:30 UTC (rev 27200)
@@ -4,7 +4,7 @@
  * Björn Ricks <bjoern.ri...@greenbone.net>
  *
  * Copyright:
- * Copyright (C) 2016 Greenbone Networks GmbH
+ * Copyright (C) 2016 - 2017 Greenbone Networks GmbH
  *
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU General Public License
@@ -31,10 +31,10 @@
 
 import Radio from './radio.js';
 
-export const YesNoRadio = ({disabled, onChange, value, name}) => {
+export const YesNoRadio = ({disabled, onChange, value, name, ...other}) => {
   value = parse_int(value);
   return (
-    <Layout flex>
+    <Layout {...other} flex>
       <Radio
         title={_('Yes')}
         className="inline"

Modified: trunk/gsa/src/html/classic/ng/src/web/layout.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/layout.js     2017-01-13 09:13:52 UTC 
(rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/layout.js     2017-01-13 11:49:30 UTC 
(rev 27200)
@@ -28,26 +28,29 @@
 import './css/layout.css';
 
 const LAYOUT_PROPNAMES = [
-  'flex', 'align', 'grow', 'shrink', 'basis', 'float',
+  'flex', 'align', 'grow', 'shrink', 'basis', 'float', 'box', 'offset',
 ];
 
-export const withLayout = (Component, defaults) => {
+export const withLayout = (Component, defaults = {}) => {
   return function(props) {
-    let {className, flex, align, grow, shrink, basis, float, ...other} = 
props; // eslint-disable-line
+    /* eslint-disable */
+    let {className, flex, align, grow, shrink, basis, float, box, offset,
+      style = {}, ...other} = props;
+    /* esline-enable */
     let css = className;
-    let style = {};
 
+    flex = is_defined(flex) ? flex : defaults.flex;
+    box = is_defined(box) ? box : defaults.box;
 
     if (is_defined(flex)) {
+
+      align = is_defined(align) ? align : defaults.align;
+
       if (is_empty(flex) || flex === true) {
         flex = 'row';
       }
       css = classes('flex', flex, css);
 
-      if (!is_defined(align) && is_defined(defaults)) {
-        align = defaults.align;
-      }
-
       if (is_defined(align)) {
         if (is_array(align)) {
           css = classes('justify-' + align[0], 'align-' + align[1], css);
@@ -56,16 +59,33 @@
           css = classes('justify-' + align, css);
         }
       }
+      else {
+        // use sane defaults
+        if (flex === 'row') {
+          css = classes('justify-start', 'align-center', css);
+        }
+        else {
+          css = classes('justify-center', 'align-stretch', css);
+        }
+      }
     }
     else if (is_defined(float)) {
       css = classes('float', css);
     }
 
+    if (box) {
+      css = classes('box', css);
+    }
+
+    if (is_defined(offset)) {
+      css = classes('offset-' + offset, css);
+    }
+
     if (is_defined(grow)) {
       style.flexGrow = grow;
     }
     if (is_defined(shrink)) {
-      style.flexShring = shrink;
+      style.flexShrink = shrink;
     }
     if (is_defined(basis)) {
       style.flexBasis = basis;
@@ -85,6 +105,7 @@
   className: React.PropTypes.string,
   flex: React.PropTypes.oneOf(['row', 'column', true]),
   float: React.PropTypes.bool,
+  box: React.PropTypes.bool,
   align: React.PropTypes.oneOfType([
     React.PropTypes.string,
     React.PropTypes.array,
@@ -98,6 +119,10 @@
     React.PropTypes.number,
   ]),
   basis: React.PropTypes.string,
+  offset: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.number,
+  ]),
 };
 
 export const get_layout_props = props => {

Modified: trunk/gsa/src/html/classic/ng/src/web/portlists/dialog.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/portlists/dialog.js   2017-01-13 
09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/portlists/dialog.js   2017-01-13 
11:49:30 UTC (rev 27200)
@@ -4,7 +4,7 @@
  * Björn Ricks <bjoern.ri...@greenbone.net>
  *
  * Copyright:
- * Copyright (C) 2016 Greenbone Networks GmbH
+ * Copyright (C) 2016 - 2017 Greenbone Networks GmbH
  *
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU General Public License
@@ -24,16 +24,15 @@
 import React from 'react';
 
 import {extend} from '../../utils.js';
-import {translate as _} from '../../locale.js';
+import _ from '../../locale.js';
 
 import Dialog from '../dialog.js';
 import Layout from '../layout.js';
 
 import FormGroup from '../form/formgroup.js';
-import FormItem from '../form/formitem.js';
 import TextField from '../form/textfield.js';
 import FileField from '../form/filefield.js';
-import {RadioFormItem} from '../form/radio.js';
+import Radio from '../form/radio.js';
 
 export class PortListsDialog extends Dialog {
 
@@ -69,10 +68,11 @@
     let {name, comment, from_file, port_range} = this.state;
 
     return (
-      <Layout float className="form-horizontal">
+      <Layout flex="column">
 
         <FormGroup title={_('Name')}>
           <TextField name="name"
+            grow="1"
             value={name} size="30"
             onChange={this.onValueChange}
             maxLength="80"/>
@@ -80,32 +80,35 @@
 
         <FormGroup title={_('Comment')}>
           <TextField name="comment" value={comment}
+            grow="1"
             size="30" maxLength="400"
             onChange={this.onValueChange}/>
         </FormGroup>
 
-        <FormGroup title={_('Port Ranges')}>
-          <RadioFormItem title={_('Manual')}
-            value="0"
-            name="from_file"
-            onChange={this.onValueChange}
-            checked={from_file !== 1}>
-            <FormItem>
-              <TextField value={port_range} onChange={this.onValueChange}
-                name="port_range"
-                size="30" maxLength="400"/>
-            </FormItem>
-          </RadioFormItem>
+        <FormGroup title={_('Port Ranges')} flex="column">
+          <Layout flex box>
+            <Radio title={_('Manual')}
+              value="0"
+              name="from_file"
+              onChange={this.onValueChange}
+              checked={from_file !== '1'}/>
+            <TextField
+              grow="1"
+              disabled={from_file === '1'}
+              value={port_range}
+              onChange={this.onValueChange}
+              name="port_range"
+              size="30" maxLength="400"/>
+          </Layout>
 
-          <RadioFormItem title={_('From file')}
-            value="1"
-            name="from_file"
-            onChange={this.onValueChange}
-            checked={from_file === 1}>
-            <FormItem>
-              <FileField name="file" onChange={this.onValueChange}/>
-            </FormItem>
-          </RadioFormItem>
+          <Layout flex box>
+            <Radio title={_('From file')}
+              value="1"
+              name="from_file"
+              onChange={this.onValueChange}
+              checked={from_file === '1'}/>
+            <FileField name="file" onChange={this.onValueChange}/>
+          </Layout>
         </FormGroup>
       </Layout>
     );

Modified: trunk/gsa/src/html/classic/ng/src/web/results/filterdialog.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/results/filterdialog.js       
2017-01-13 09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/results/filterdialog.js       
2017-01-13 11:49:30 UTC (rev 27200)
@@ -4,7 +4,7 @@
  * Björn Ricks <bjoern.ri...@greenbone.net>
  *
  * Copyright:
- * Copyright (C) 2016 Greenbone Networks GmbH
+ * Copyright (C) 2016 - 2017 Greenbone Networks GmbH
  *
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU General Public License
@@ -85,17 +85,18 @@
 
     return (
       <Layout flex="column">
+
         {this.renderFilter()}
         {this.renderApplyOverrides()}
-        <FormGroup title={_('Auto-FP')} flex>
+
+        <FormGroup title={_('Auto-FP')} flex="column">
           <Checkbox name="autofp"
             checkedValue="1" uncheckedValue="0"
             checked={autofp >= 1}
             title={_('Trust vendor security updates')}
             onChange={this.onFilterIntValueChange}/>
-          <Layout flex>
+          <Layout flex box>
             <Radio
-              className="inline"
               name="autofp"
               value="1"
               disabled={autofp === 0}
@@ -103,7 +104,6 @@
               title={_('Full CVE match')}
               onChange={this.handleIntValueChange}/>
             <Radio
-              className="inline"
               name="autofp"
               value="2"
               disabled={autofp === 0}
@@ -112,46 +112,47 @@
               onChange={this.handleIntValueChange}/>
           </Layout>
         </FormGroup>
+
         {this.renderQoD()}
-        <FormGroup title={_('Severity (Class)')} flex>
-          <Layout flex>
-            <Checkbox
-              checked={levels.includes('h')}
-              className="inline"
-              name="h"
-              onChange={this.handleLevelChange}>
-              <LabelHigh/>
-            </Checkbox>
-            <Checkbox
-              checked={levels.includes('m')}
-              className="inline"
-              name="m"
-              onChange={this.handleLevelChange}>
-              <LabelMedium/>
-            </Checkbox>
-            <Checkbox
-              checked={levels.includes('l')}
-              className="inline"
-              name="l"
-              onChange={this.handleLevelChange}>
-              <LabelLow/>
-            </Checkbox>
-            <Checkbox
-              checked={levels.includes('g')}
-              className="inline"
-              name="g"
-              onChange={this.handleLevelChange}>
-              <LabelLog/>
-            </Checkbox>
-            <Checkbox
-              checked={levels.includes('f')}
-              className="inline"
-              name="f"
-              onChange={this.handleLevelChange}>
-              <LabelFalsePositive/>
-            </Checkbox>
-          </Layout>
+
+        <FormGroup title={_('Severity (Class)')}>
+          <Checkbox
+            checked={levels.includes('h')}
+            className="inline"
+            name="h"
+            onChange={this.handleLevelChange}>
+            <LabelHigh/>
+          </Checkbox>
+          <Checkbox
+            checked={levels.includes('m')}
+            className="inline"
+            name="m"
+            onChange={this.handleLevelChange}>
+            <LabelMedium/>
+          </Checkbox>
+          <Checkbox
+            checked={levels.includes('l')}
+            className="inline"
+            name="l"
+            onChange={this.handleLevelChange}>
+            <LabelLow/>
+          </Checkbox>
+          <Checkbox
+            checked={levels.includes('g')}
+            className="inline"
+            name="g"
+            onChange={this.handleLevelChange}>
+            <LabelLog/>
+          </Checkbox>
+          <Checkbox
+            checked={levels.includes('f')}
+            className="inline"
+            name="f"
+            onChange={this.handleLevelChange}>
+            <LabelFalsePositive/>
+          </Checkbox>
         </FormGroup>
+
         {this.renderFirstResult()}
         {this.renderResultsPerPage()}
         {this.renderSortBy()}

Modified: trunk/gsa/src/html/classic/ng/src/web/schedules/dialog.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/schedules/dialog.js   2017-01-13 
09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/schedules/dialog.js   2017-01-13 
11:49:30 UTC (rev 27200)
@@ -4,7 +4,7 @@
  * Björn Ricks <bjoern.ri...@greenbone.net>
  *
  * Copyright:
- * Copyright (C) 2016 Greenbone Networks GmbH
+ * Copyright (C) 2016 - 2017 Greenbone Networks GmbH
  *
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU General Public License
@@ -26,7 +26,7 @@
 import moment from 'moment-timezone';
 
 import {autobind} from '../../utils.js';
-import {translate as _} from '../../locale.js';
+import _ from '../../locale.js';
 
 import Dialog from '../dialog.js';
 import Layout from '../layout.js';
@@ -34,9 +34,8 @@
 import Select2 from '../form/select2.js';
 import Spinner from '../form/spinner.js';
 import FormGroup from '../form/formgroup.js';
-import FormItem from '../form/formitem.js';
 import TextField from '../form/textfield.js';
-import Datepicker from '../form/datepicker.js';
+import DatePicker from '../form/datepicker.js';
 import TimeZoneSelect from '../form/timezoneselect.js';
 
 const TimeUnitSelect = props => {
@@ -139,10 +138,11 @@
     let {comment, name, hour, minute, date, duration, period, duration_unit,
       period_unit, timezone} = this.state;
     return (
-      <Layout float className="form-horizontal">
+      <Layout flex="column">
 
         <FormGroup title={_('Name')}>
           <TextField name="name"
+            grow="1"
             value={name} size="30"
             onChange={this.onNameChange}
             maxLength="80"/>
@@ -150,22 +150,17 @@
 
         <FormGroup title={_('Comment')}>
           <TextField name="comment" value={comment}
+            grow="1"
             size="30" maxLength="400"
             onChange={this.onCommentChange}/>
         </FormGroup>
 
         <FormGroup title={_('First Time')}>
-          <FormItem>
-            <Datepicker value={date} onChange={this.onDateChange}/>
-          </FormItem>
-          <FormItem>
-            <Spinner type="int" min="0" max="23" size="2"
-              value={hour} onChange={this.onHourChange}/> h
-          </FormItem>
-          <FormItem>
-            <Spinner type="int" min="0" max="59" size="2"
-              value={minute} onChange={this.onMinuteChange}/> m
-          </FormItem>
+          <DatePicker value={date} onChange={this.onDateChange}/>
+          <Spinner type="int" min="0" max="23" size="2"
+            value={hour} onChange={this.onHourChange}/> h
+          <Spinner type="int" min="0" max="59" size="2"
+            value={minute} onChange={this.onMinuteChange}/> m
         </FormGroup>
 
         <FormGroup title={_('Timezone')}>
@@ -173,25 +168,17 @@
         </FormGroup>
 
         <FormGroup title={_('Period')}>
-          <FormItem>
-            <Spinner type="int" min="0" size="3"
-              value={period} onChange={this.onPeriodChange}/>
-          </FormItem>
-          <FormItem>
-            <TimeUnitSelect value={period_unit}
-              onChange={this.onPeriodUnitChange}/>
-          </FormItem>
+          <Spinner type="int" min="0" size="3"
+            value={period} onChange={this.onPeriodChange}/>
+          <TimeUnitSelect value={period_unit}
+            onChange={this.onPeriodUnitChange}/>
         </FormGroup>
 
         <FormGroup title={_('Duration')}>
-          <FormItem>
-            <Spinner type="int" min="0" size="3"
-              value={duration} onChange={this.onDurationChange}/>
-          </FormItem>
-          <FormItem>
-            <TimeUnitSelect value={duration_unit}
-              onChange={this.onDurationUnitChange}/>
-          </FormItem>
+          <Spinner type="int" min="0" size="3"
+            value={duration} onChange={this.onDurationChange}/>
+          <TimeUnitSelect value={duration_unit}
+            onChange={this.onDurationUnitChange}/>
         </FormGroup>
       </Layout>
     );

Modified: trunk/gsa/src/html/classic/ng/src/web/targets/dialog.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/targets/dialog.js     2017-01-13 
09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/targets/dialog.js     2017-01-13 
11:49:30 UTC (rev 27200)
@@ -31,12 +31,11 @@
 import Layout from '../layout.js';
 
 import FormGroup from '../form/formgroup.js';
-import FormItem from '../form/formitem.js';
 import TextField from '../form/textfield.js';
 import FileField from '../form/filefield.js';
 import YesNoRadio from '../form/yesnoradio.js';
+import Radio from '../form/radio.js';
 import Select2 from '../form/select2.js';
-import {RadioFormItem} from '../form/radio.js';
 
 import Icon from '../icons/icon.js';
 
@@ -187,48 +186,55 @@
     let snmp_credential_opts = this.renderOptions(snmp_credentials, 0);
 
     return (
-      <Layout float className="form-horizontal">
+      <Layout flex="column">
 
         <FormGroup title={_('Name')}>
           <TextField name="name"
+            grow="1"
             value={name} size="30"
             onChange={this.onValueChange}
             maxLength="80"/>
         </FormGroup>
 
-        <FormGroup title={_('Comment')}>
+        <FormGroup title={_('Comment')} flex="column">
           <TextField name="comment" value={comment}
             size="30" maxLength="400"
             onChange={this.onValueChange}/>
         </FormGroup>
 
-        <FormGroup title={_('Hosts')}>
-          <RadioFormItem value="manual" title={_('Manual')}
-            name="target_source"
-            onChange={this.onValueChange}
-            checked={target_source === 'manual'}>
-            <FormItem>
-              <TextField value={hosts} name="hosts"
-                onChange={this.onValueChange}/>
-            </FormItem>
-          </RadioFormItem>
+        <FormGroup title={_('Hosts')} flex="column">
+          <Layout flex box>
+            <Radio
+              value="manual"
+              title={_('Manual')}
+              name="target_source"
+              onChange={this.onValueChange}
+              checked={target_source === 'manual'}/>
+            <TextField
+              grow="1"
+              disabled={target_source !== 'manual'}
+              value={hosts}
+              name="hosts"
+              onChange={this.onValueChange}/>
+          </Layout>
 
-          <RadioFormItem value="file" title={_('From file')}
-            onChange={this.onValueChange}
-            name="target_source"
-            checked={target_source === 'file'}>
-            <FormItem>
-              <FileField name="file" onChange={this.onValueChange}/>
-            </FormItem>
-          </RadioFormItem>
+          <Layout flex box>
+            <Radio
+              value="file" title={_('From file')}
+              onChange={this.onValueChange}
+              name="target_source"
+              checked={target_source === 'file'}/>
+            <FileField
+              name="file"
+              onChange={this.onValueChange}/>
+          </Layout>
         </FormGroup>
 
         <FormGroup title={_('Exclude Hosts')}>
-          <FormItem>
-            <TextField value={exclude_hosts}
-              name="exclude_hosts"
-              onChange={this.onValueChange}/>
-          </FormItem>
+          <TextField value={exclude_hosts}
+            grow="1"
+            name="exclude_hosts"
+            onChange={this.onValueChange}/>
         </FormGroup>
 
         <FormGroup title={_('Reverse Lookup Only')}>
@@ -245,19 +251,17 @@
 
         {capabilities.mayOp('get_port_lists') &&
           <FormGroup title={_('Port List')}>
-            <FormItem>
-              <Select2
-                onChange={this.onValueChange}
-                name="port_list_id"
-                value={port_list_id}>
-                {port_list_opts}
-              </Select2>
-            </FormItem>
-            <FormItem>
+            <Select2
+              onChange={this.onValueChange}
+              name="port_list_id"
+              value={port_list_id}>
+              {port_list_opts}
+            </Select2>
+            <Layout box flex>
               <Icon img="new.svg"
                 title={_('Create a new port list')}
                 onClick={() => { this.portlist_dialog.show(); }}/>
-            </FormItem>
+            </Layout>
           </FormGroup>
         }
 
@@ -287,81 +291,72 @@
 
         {capabilities.mayOp('get_credentials') &&
           <FormGroup title={_('SSH')}>
-            <FormItem>
-              <Select2
-                name="ssh_credential_id"
-                onChange={this.onValueChange}
-                value={ssh_credential_id}>
-                {ssh_credential_opts}
-              </Select2>
-            </FormItem>
-            <FormItem>
+            <Select2
+              box
+              name="ssh_credential_id"
+              onChange={this.onValueChange}
+              value={ssh_credential_id}>
+              {ssh_credential_opts}
+            </Select2>
+            <Layout box flex>
               {_('on port')}
-            </FormItem>
-            <FormItem>
-              <TextField size="6"
-                name="port" value={port}
-                onChange={this.onValueChange}/>
-            </FormItem>
-            <FormItem>
+            </Layout>
+            <TextField size="6"
+              name="port" value={port}
+              onChange={this.onValueChange}/>
+            <Layout box flex>
               <Icon img="new.svg"
                 onClick={() => this.showCredentialsDialog('ssh')}
                 title={_('Create a new credential')}/>
-            </FormItem>
+            </Layout>
           </FormGroup>
         }
 
         {capabilities.mayOp('get_credentials') &&
           <FormGroup title={_('SMB')}>
-            <FormItem>
-              <Select2
-                onChange={this.onValueChange}
-                name="smb_credential_id"
-                value={smb_credential_id}>
-                {smb_credential_opts}
-              </Select2>
-            </FormItem>
-            <FormItem>
+            <Select2
+              onChange={this.onValueChange}
+              name="smb_credential_id"
+              value={smb_credential_id}>
+              {smb_credential_opts}
+            </Select2>
+            <Layout box flex>
               <Icon img="new.svg"
                 onClick={() => this.showCredentialsDialog('smb')}
                 title={_('Create a new credential')}/>
-            </FormItem>
+            </Layout>
           </FormGroup>
         }
 
         {capabilities.mayOp('get_credentials') &&
           <FormGroup title={_('ESXi')}>
-            <FormItem>
-              <Select2
-                onChange={this.onValueChange}
-                name="esxi_credential_id"
-                value={esxi_credential_id}>
-                {esxi_credential_opts}
-              </Select2>
-            </FormItem>
-            <FormItem>
+            <Select2
+              onChange={this.onValueChange}
+              name="esxi_credential_id"
+              value={esxi_credential_id}>
+              {esxi_credential_opts}
+            </Select2>
+            <Layout box flex>
               <Icon img="new.svg"
                 onClick={() => this.showCredentialsDialog('esxi')}
                 title={_('Create a new credential')}/>
-            </FormItem>
+            </Layout>
           </FormGroup>
         }
 
         {capabilities.mayOp('get_credentials') &&
           <FormGroup title={_('SNMP')}>
-            <FormItem>
-              <Select2
-                onChange={this.onValueChange}
-                name="snmp_credential_id"
-                value={snmp_credential_id}>
-                {snmp_credential_opts}
-              </Select2>
-            </FormItem>
-            <FormItem>
+            <Select2
+              onChange={this.onValueChange}
+              name="snmp_credential_id"
+              value={snmp_credential_id}>
+              {snmp_credential_opts}
+            </Select2>
+            <Layout box flex>
               <Icon img="new.svg"
                 onClick={() => this.showCredentialsDialog('snmp')}
                 title={_('Create a new credential')}/>
-            </FormItem>
+            </Layout>
           </FormGroup>
         }
       </Layout>

Modified: trunk/gsa/src/html/classic/ng/src/web/tasks/dialog.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/tasks/dialog.js       2017-01-13 
09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/tasks/dialog.js       2017-01-13 
11:49:30 UTC (rev 27200)
@@ -39,7 +39,6 @@
 import Select2 from '../form/select2.js';
 import Spinner from '../form/spinner.js';
 import FormGroup from '../form/formgroup.js';
-import FormItem from '../form/formitem.js';
 import Checkbox from '../form/checkbox.js';
 import Radio from '../form/radio.js';
 import YesNoRadio from '../form/yesnoradio.js';
@@ -434,116 +433,115 @@
 
     return (
       <Layout flex="column">
-        <FormGroup title={_('Name')} flex>
+
+        <FormGroup title={_('Name')}>
           <TextField name="name"
+            grow="1"
             value={name} size="30"
             onChange={this.onNameChange}
             maxLength="80"/>
         </FormGroup>
 
-        <FormGroup title={_('Comment')} flex>
+        <FormGroup title={_('Comment')}>
           <TextField name="comment" value={comment}
+            grow="1"
             size="30" maxLength="400"
             onChange={this.onCommentChange}/>
         </FormGroup>
 
-        <FormGroup title={_('Scan Targets')} flex>
-          <FormItem>
-            <Select2 name="target_id" disabled={!change_task}
-              onChange={this.onTargetIdChange} value={target_id}>
-              {target_opts}
-            </Select2>
-          </FormItem>
+        <FormGroup title={_('Scan Targets')}>
+          <Select2 name="target_id" disabled={!change_task}
+            onChange={this.onTargetIdChange} value={target_id}>
+            {target_opts}
+          </Select2>
           {change_task &&
-            <FormItem>
+            <Layout flex box>
               <Icon img="new.svg"
                 onClick={() => this.targets_dialog.show()}
                 title={_('Create a new target')}/>
-            </FormItem>
+            </Layout>
           }
         </FormGroup>
 
         <FormGroup condition={capabilities.mayOp('get_alerts')}
-          title={_('Alerts')} flex>
-          <FormItem>
-            <Select2 name="alert_ids" multiple="multiple" id="alert_ids"
-              onChange={this.onAlertIdsChange} value={alert_ids}>
-              {alert_opts}
-            </Select2>
-          </FormItem>
-          <FormItem>
+          title={_('Alerts')}>
+          <Select2 name="alert_ids" multiple="multiple" id="alert_ids"
+            onChange={this.onAlertIdsChange} value={alert_ids}>
+            {alert_opts}
+          </Select2>
+          <Layout flex box>
             <Icon title={_('Create a new alert')} img="new.svg"
               onClick={() => {this.alert_dialog.show();}}/>
-          </FormItem>
+          </Layout>
         </FormGroup>
 
         <FormGroup condition={capabilities.mayOp('get_schedules')}
-          title={_('Schedule')} flex>
-          <FormItem>
-            <Select2 name="schedule_id" value={schedule_id}
-              onChange={this.onScheduleChange}>
-              {schedule_opts}
-            </Select2>
-          </FormItem>
-          <FormItem>
-            <Checkbox name="schedule_periods"
-              checked={schedule_periods === 1}
-              onChange={this.onSchedulePeriodsChange}
-              title={_('Once')}/>
-          </FormItem>
-          <FormItem>
+          title={_('Schedule')}>
+          <Select2 name="schedule_id" value={schedule_id}
+            onChange={this.onScheduleChange}>
+            {schedule_opts}
+          </Select2>
+          <Checkbox name="schedule_periods"
+            checked={schedule_periods === 1}
+            onChange={this.onSchedulePeriodsChange}
+            title={_('Once')}/>
+          <Layout flex box>
             <Icon img="new.svg" title={_('Create a new schedule')}
               onClick={() => { this.schedule_dialog.show(); }}/>
-          </FormItem>
+          </Layout>
         </FormGroup>
 
-        <FormGroup title={_('Add results to Assets')} flex>
+        <FormGroup title={_('Add results to Assets')}>
           <YesNoRadio value={in_assets} onChange={this.onInAssetChange} />
         </FormGroup>
 
-        <Layout flex="column" className={classes('offset-container offset-2',
-          in_assets === 1 ? '' : 'disabled')}>
-          <FormGroup title={_('Apply Overrides')} flex>
+        <Layout flex="column"
+          offset="2"
+          className={classes('offset-container',
+            in_assets === 1 ? '' : 'disabled')}>
+          <FormGroup title={_('Apply Overrides')}>
             <YesNoRadio value={apply_overrides} disabled={in_assets !== 1}
               onChange={this.onApplyOverridesChange}/>
           </FormGroup>
 
-          <FormGroup title={_('Min QoD')} flex>
-            <FormItem>
-              <Spinner name="min_qod" value={min_qod} size="4"
-                onChange={this.onMinQodChange}
-                disabled={in_assets !== 1} type="float" min="0" max="100"/>
-            </FormItem>
-            <FormItem>%</FormItem>
+          <FormGroup title={_('Min QoD')}>
+            <Spinner name="min_qod"
+              value={min_qod}
+              size="4"
+              onChange={this.onMinQodChange}
+              disabled={in_assets !== 1} type="float" min="0" max="100"/>
+            <Layout box float>%</Layout>
           </FormGroup>
         </Layout>
 
-        <FormGroup title={_('Alterable Task')} condition={change_task} flex>
+        <FormGroup title={_('Alterable Task')} condition={change_task}>
           <YesNoRadio value={alterable} onChange={this.onAlterableChange}/>
         </FormGroup>
 
-        <FormGroup title={_('Auto Delete Reports')} flex>
+        <FormGroup title={_('Auto Delete Reports')} flex="column">
           <Radio title={_('Do not automatically delete reports')}
             name="auto_delete" value="no"
             onChange={this.onAutoDeleteChange}
             checked={auto_delete !== 'keep'}/>
-          <Radio name="auto_delete" value="keep"
-            onChange={this.onAutoDeleteChange}
-            checked={auto_delete === 'keep'}>
-            {_('Automatically delete oldest reports but always' +
-              ' keep newest ')}
-            <FormItem>
-              <Spinner type="int" min="0"
-                name="auto_delete_data"
-                value={auto_delete_data}
-                disabled={auto_delete !== 'keep'}
-                onChange={this.onAutoDeleteDataChange}/>
-            </FormItem>
-            {_(' reports')}
-          </Radio>
+          <Layout flex box>
+            <Radio name="auto_delete" value="keep"
+              onChange={this.onAutoDeleteChange}
+              title={_('Automatically delete oldest reports but always' +
+                ' keep newest')}
+              checked={auto_delete === 'keep'}>
+            </Radio>
+            <Spinner type="int" min="0"
+              name="auto_delete_data"
+              value={auto_delete_data}
+              disabled={auto_delete !== 'keep'}
+              onChange={this.onAutoDeleteDataChange}/>
+            <Layout flex box>
+              {_('reports')}
+            </Layout>
+          </Layout>
         </FormGroup>
 
-        <FormGroup title={_('Scanner')} flex>
+        <FormGroup title={_('Scanner')}>
           <Select2 name="scanner_id" value={scanner_id}
             disabled={!change_task}
             onChange={this.onScannerChange}>
@@ -552,56 +550,58 @@
         </FormGroup>
 
         {use_openvas_scan_config &&
-          <Layout flex="column"
-            className="form-group offset-container offset-2">
-            <FormGroup titleSize="4" title={_('Scan Config')} flex>
-              <Select2 name="config_id" value={openvas_config_id}
-                disabled={!change_task}
-                onChange={this.onOpenvasScanConfigChange}>
-                {openvas_scan_config_opts}
-              </Select2>
-            </FormGroup>
-            <FormGroup flex titleSize="4" title={_('Network Source 
Interface')}>
-              <FormItem>
+          <Layout float
+            offset="2"
+            className="offset-container">
+            <Layout flex="column" grow="1">
+              <FormGroup titleSize="4" title={_('Scan Config')}>
+                <Select2 name="config_id" value={openvas_config_id}
+                  disabled={!change_task}
+                  onChange={this.onOpenvasScanConfigChange}>
+                  {openvas_scan_config_opts}
+                </Select2>
+              </FormGroup>
+              <FormGroup titleSize="4" title={_('Network Source Interface')}>
                 <TextField name="source_iface"
                   onChange={this.onSourceIfaceChange}
                   value={source_iface}/>
-              </FormItem>
-            </FormGroup>
-            <FormGroup flex titleSize="4" title={_('Order for target hosts')}>
-              <Select2 name="hosts_ordering" value={hosts_ordering}
-                onChange={this.onHostOrderingChange}>
-                <option value="sequential">
-                  {_('Sequential')}
-                </option>
-                <option value="random">
-                  {_('Random')}
-                </option>
-                <option value="reverse">
-                  {_('Reverse')}
-                </option>
-              </Select2>
-            </FormGroup>
-            <FormGroup titleSize="4" flex
-              title={_('Maximum concurrently executed NVTs per host')}>
-              <Spinner name="max_checks" value={max_checks}
-                min="0" size="10" maxLength="10"
-                onChange={this.onMaxChecksChange}/>
-            </FormGroup>
-            <FormGroup titleSize="4" flex
-              title={_('Maximum concurrently scanned hosts')}>
-              <Spinner name="max_hosts" value={max_hosts}
-                type="int" min="0"
-                size="10" maxLength="10"
-                onChange={this.onMaxHostsChange}/>
-            </FormGroup>
+              </FormGroup>
+              <FormGroup titleSize="4" title={_('Order for target hosts')}>
+                <Select2 name="hosts_ordering" value={hosts_ordering}
+                  onChange={this.onHostOrderingChange}>
+                  <option value="sequential">
+                    {_('Sequential')}
+                  </option>
+                  <option value="random">
+                    {_('Random')}
+                  </option>
+                  <option value="reverse">
+                    {_('Reverse')}
+                  </option>
+                </Select2>
+              </FormGroup>
+              <FormGroup titleSize="4"
+                title={_('Maximum concurrently executed NVTs per host')}>
+                <Spinner name="max_checks" value={max_checks}
+                  min="0" size="10" maxLength="10"
+                  onChange={this.onMaxChecksChange}/>
+              </FormGroup>
+              <FormGroup titleSize="4"
+                title={_('Maximum concurrently scanned hosts')}>
+                <Spinner name="max_hosts" value={max_hosts}
+                  type="int" min="0"
+                  size="10" maxLength="10"
+                  onChange={this.onMaxHostsChange}/>
+              </FormGroup>
+            </Layout>
           </Layout>
         }
 
         {is_osp_scanner &&
-          <Layout flex="column"
-            className="form-group offset-container offset-2">
-            <FormGroup titleSize="4" title={_('Scan Config')} flex>
+          <Layout float
+            offset="2"
+            className="offset-container">
+            <FormGroup titleSize="4" title={_('Scan Config')}>
               <Select2 name="config_id" value={osp_config_id}
                 onChange={this.onOspScanConfigChange}>
                 {osp_scan_config_opts}
@@ -615,26 +615,20 @@
           <h3>{_('Tag')}</h3>
         }
         <FormGroup condition={capabilities.mayOp('get_tags') &&
-          capabilities.mayOp('create_task') && tags.length > 0} flex>
-          <FormItem>
-            <Checkbox name="add_tag"
-              onChange={this.onAddTagChange}
-              checked={add_tag === 1} title={_('Add Tag:')}/>
-          </FormItem>
-          <FormItem>
-            <Select2 name="tag_name" onChange={this.onTagNameChange}
-              value={tag_name}>
-              {tag_opts}
-            </Select2>
-          </FormItem>
-          <FormItem>
+          capabilities.mayOp('create_task') && tags.length > 0}>
+          <Checkbox name="add_tag"
+            onChange={this.onAddTagChange}
+            checked={add_tag === 1} title={_('Add Tag:')}/>
+          <Select2 name="tag_name" onChange={this.onTagNameChange}
+            value={tag_name}>
+            {tag_opts}
+          </Select2>
+          <Layout box flex>
             {_('with Value')}
-          </FormItem>
-          <FormItem>
-            <TextField name="tag_value"
-              value={tag_value}
-              onChange={this.onTagValueChange}/>
-          </FormItem>
+          </Layout>
+          <TextField name="tag_value"
+            value={tag_value}
+            onChange={this.onTagValueChange}/>
         </FormGroup>
 
       </Layout>

Modified: trunk/gsa/src/html/classic/ng/src/web/tasks/filterdialog.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/tasks/filterdialog.js 2017-01-13 
09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/tasks/filterdialog.js 2017-01-13 
11:49:30 UTC (rev 27200)
@@ -46,17 +46,23 @@
     return SORT_FIELDS;
   }
 
-  renderContent() {
+  renderFilter() {
     let {filterstring} = this.state;
+    return (
+      <FormGroup title={_('Name')} flex>
+        <TextField
+          grow="1"
+          value={filterstring} size="30"
+          onChange={this.onFilterStringChange}
+          maxLength="80"/>
+      </FormGroup>
+    );
+  }
 
+  renderContent() {
     return (
       <Layout flex="column">
-        <FormGroup title={_('Name')} flex>
-          <TextField name="name"
-            value={filterstring} size="30"
-            onChange={this.onFilterStringChange}
-            maxLength="80"/>
-        </FormGroup>
+        {this.renderFilter()}
         {this.renderApplyOverrides()}
         {this.renderQoD()}
         {this.renderFirstResult()}

Modified: trunk/gsa/src/html/classic/ng/src/web/wizard/advancedtaskwizard.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/wizard/advancedtaskwizard.js  
2017-01-13 09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/wizard/advancedtaskwizard.js  
2017-01-13 11:49:30 UTC (rev 27200)
@@ -4,7 +4,7 @@
  * Björn Ricks <bjoern.ri...@greenbone.net>
  *
  * Copyright:
- * Copyright (C) 2016 Greenbone Networks GmbH
+ * Copyright (C) 2016 - 2017 Greenbone Networks GmbH
  *
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU General Public License
@@ -127,7 +127,7 @@
     let esxi_credential_opts = render_options(
       credentials.filter(esxi_credential_filter), '');
     return (
-      <Layout flex>
+      <Layout flex align={['start', 'start']}>
         <Layout basis="40%">
           <div className="wizardess pull-right">
             <Img src="enchantress.svg"/>
@@ -174,121 +174,126 @@
             </p>
           </div>
         </Layout>
-        <Layout basis="0" grow="1">
-          <Layout float className="form-horizontal">
-            <FormGroup>
-              <h3>{_('Quick start: Create a new task')}</h3>
-            </FormGroup>
+        <Layout grow="1" basis="0" flex="column">
+          <FormGroup>
+            <h3>{_('Quick start: Create a new task')}</h3>
+          </FormGroup>
 
-            <FormGroup title={_('Task Name')} titleSize="3">
-              <TextField name="task_name" onChange={this.onValueChange}
-                value={task_name} size="30" maxLength="80"/>
-            </FormGroup>
+          <FormGroup title={_('Task Name')} titleSize="3">
+            <TextField name="task_name"
+              grow="1"
+              onChange={this.onValueChange}
+              value={task_name} size="30" maxLength="80"/>
+          </FormGroup>
 
-            <FormGroup title={_('Scan Config')} titleSize="3">
-              <Select2
-                name="config_id"
-                value={config_id}
-                onChange={this.onValueChange}>
-                {config_opts}
-              </Select2>
-            </FormGroup>
+          <FormGroup title={_('Scan Config')} titleSize="3">
+            <Select2
+              name="config_id"
+              value={config_id}
+              onChange={this.onValueChange}>
+              {config_opts}
+            </Select2>
+          </FormGroup>
 
-            <FormGroup title={_('Target Host(s)')} titleSize="3">
-              <TextField name="target_hosts" onChange={this.onValueChange}
-                value={target_hosts} maxLength="2000"/>
-            </FormGroup>
+          <FormGroup title={_('Target Host(s)')} titleSize="3">
+            <TextField name="target_hosts"
+              grow="1"
+              onChange={this.onValueChange}
+              value={target_hosts} maxLength="2000"/>
+          </FormGroup>
 
-            <FormGroup title={_('Start Time')} titleSize="3">
-              <Radio
-                title={_('Start immediately')}
-                value="2"
-                checked={auto_start === '2'}
-                name="auto_start"
-                onChange={this.onValueChange}>
-              </Radio>
+          <FormGroup title={_('Start Time')} titleSize="3" flex="column">
+            <Radio
+              title={_('Start immediately')}
+              value="2"
+              checked={auto_start === '2'}
+              name="auto_start"
+              onChange={this.onValueChange}>
+            </Radio>
 
-              <Radio
-                title={_('Create Schedule')}
-                value="1"
-                checked={auto_start === '1'}
-                name="auto_start"
-                onChange={this.onValueChange}>
-              </Radio>
-              <FormGroup offset="1">
-                <Datepicker
-                  name="date"
-                  value={date}
-                  onChange={this.onValueChange}/>
-              </FormGroup>
-              <FormGroup offset="1">
-                <span>at </span>
-                <Spinner type="int" min="0" max="23" size="2"
-                  name="start_hour"
-                  value={start_hour}
-                  onChange={this.onValueChange}/>
-                <span> h </span>
-                <Spinner type="int" min="0" max="59" size="2"
-                  name="start_minute"
-                  value={start_minute}
-                  onChange={this.onValueChange}/>
-                <span> m</span>
-              </FormGroup>
-              <FormGroup offset="1">
-                <TimeZoneSelect
-                  name="start_timezone"
-                  value={start_timezone}
-                  onChange={this.onValueChange}/>
-              </FormGroup>
-
-              <Radio
-                title={_('Do not start automatically')}
-                value="0"
-                checked={auto_start === '0'}
-                name="auto_start"
-                onChange={this.onValueChange}>
-              </Radio>
+            <Radio
+              title={_('Create Schedule')}
+              value="1"
+              checked={auto_start === '1'}
+              name="auto_start"
+              onChange={this.onValueChange}>
+            </Radio>
+            <FormGroup offset="1" box>
+              <Datepicker
+                name="date"
+                value={date}
+                onChange={this.onValueChange}/>
             </FormGroup>
-
-            <FormGroup title={_('SSH Credential')} titleSize="3">
-              <Select2 value={ssh_credential}
-                name="ssh_credential"
-                onChange={this.onValueChange}>
-                {ssh_credential_opts}
-              </Select2>
-              {_(' on port ')}
-              <Spinner min="0" max="65535" size="5"
-                value={ssh_port}
+            <FormGroup offset="1">
+              <Layout flex box>{_('at')}</Layout>
+              <Spinner type="int" min="0" max="23" size="2"
+                name="start_hour"
+                value={start_hour}
                 onChange={this.onValueChange}/>
+              <Layout flex box>{_('h')}</Layout>
+              <Spinner type="int" min="0" max="59" size="2"
+                name="start_minute"
+                value={start_minute}
+                onChange={this.onValueChange}/>
+              <Layout flex box>{_('m')}</Layout>
             </FormGroup>
-
-            <FormGroup title={_('SMB Credential')} titleSize="3">
-              <Select2 value={smb_credential}
-                name="smb_credential"
-                onChange={this.onValueChange}>
-                {smb_credential_opts}
-              </Select2>
+            <FormGroup offset="1">
+              <TimeZoneSelect
+                name="start_timezone"
+                value={start_timezone}
+                onChange={this.onValueChange}/>
             </FormGroup>
 
-            <FormGroup title={_('ESXi Credential')} titleSize="3">
-              <Select2 value={esxi_credential}
-                name="esxi_credential"
-                onChange={this.onValueChange}>
-                {esxi_credential_opts}
-              </Select2>
+            <Radio
+              title={_('Do not start automatically')}
+              value="0"
+              checked={auto_start === '0'}
+              name="auto_start"
+              onChange={this.onValueChange}>
+            </Radio>
+          </FormGroup>
+
+          <FormGroup title={_('SSH Credential')} titleSize="3">
+            <Select2 value={ssh_credential}
+              name="ssh_credential"
+              onChange={this.onValueChange}>
+              {ssh_credential_opts}
+            </Select2>
+            <Layout flex box>
+              {_(' on port ')}
+            </Layout>
+            <Spinner min="0" max="65535" size="5"
+              value={ssh_port}
+              onChange={this.onValueChange}/>
+          </FormGroup>
+
+          <FormGroup title={_('SMB Credential')} titleSize="3">
+            <Select2 value={smb_credential}
+              name="smb_credential"
+              onChange={this.onValueChange}>
+              {smb_credential_opts}
+            </Select2>
+          </FormGroup>
+
+          <FormGroup title={_('ESXi Credential')} titleSize="3">
+            <Select2 value={esxi_credential}
+              name="esxi_credential"
+              onChange={this.onValueChange}>
+              {esxi_credential_opts}
+            </Select2>
+          </FormGroup>
+
+          {capabilities.mayOp('create_alert') &&
+            capabilities.mayOp('get_alerts') &&
+            <FormGroup title={_('Email report to')} titleSize="3">
+              <TextField
+                name="alert_email"
+                grow="1"
+                value={alert_email}
+                size="30" maxLength="80"
+                onChange={this.onValueChange}/>
             </FormGroup>
-
-            {capabilities.mayOp('create_alert') &&
-              capabilities.mayOp('get_alerts') &&
-              <FormGroup title={_('Email report to')} titleSize="3">
-                <TextField
-                  name="alert_email"
-                  value={alert_email}
-                  size="30" maxLength="80"
-                  onChange={this.onValueChange}/>
-              </FormGroup>
-            }
-          </Layout>
+          }
         </Layout>
       </Layout>
     );

Modified: trunk/gsa/src/html/classic/ng/src/web/wizard/modifytaskwizard.js
===================================================================
--- trunk/gsa/src/html/classic/ng/src/web/wizard/modifytaskwizard.js    
2017-01-13 09:13:52 UTC (rev 27199)
+++ trunk/gsa/src/html/classic/ng/src/web/wizard/modifytaskwizard.js    
2017-01-13 11:49:30 UTC (rev 27200)
@@ -87,7 +87,7 @@
     let task_opts = render_options(tasks);
     let {capabilities} = this.context;
     return (
-      <Layout flex>
+      <Layout flex align={['start', 'start']}>
         <Layout basis="40%">
           <div className="wizardess pull-right">
             <Img src="enchantress.svg"/>
@@ -114,71 +114,70 @@
             </div>
           </div>
         </Layout>
-        <Layout basis="0" grow="1">
-          <Layout float className="form-horizontal">
-            <h1>{_('Quick edit: Modify a task')}</h1>
-            <FormGroup title={_('Task')} titleSize="3">
-              <Select2 name="task_id"
-                value={task_id}
-                onChange={this.onValueChange}>
-                {task_opts}
-              </Select2>
-            </FormGroup>
+        <Layout basis="0" grow="1" flex="column">
+          <h1>{_('Quick edit: Modify a task')}</h1>
+          <FormGroup title={_('Task')} titleSize="3">
+            <Select2 name="task_id"
+              value={task_id}
+              onChange={this.onValueChange}>
+              {task_opts}
+            </Select2>
+          </FormGroup>
 
-            <FormGroup title={_('Start Time')} titleSize="3">
-              <Radio
-                title={_('Do not change')}
-                value="0"
-                checked={reschedule === '0'}
-                name="reschedule"
-                onChange={this.onValueChange}>
-              </Radio>
+          <FormGroup title={_('Start Time')} titleSize="3" flex="column">
+            <Radio
+              title={_('Do not change')}
+              value="0"
+              checked={reschedule === '0'}
+              name="reschedule"
+              onChange={this.onValueChange}>
+            </Radio>
 
-              <Radio
-                title={_('Create Schedule')}
-                value="1"
-                checked={reschedule === '1'}
-                name="reschedule"
-                onChange={this.onValueChange}>
-              </Radio>
-              <FormGroup offset="1">
-                <Datepicker
-                  name="date"
-                  value={date}
-                  onChange={this.onValueChange}/>
-              </FormGroup>
-              <FormGroup offset="1">
-                <span>at </span>
-                <Spinner type="int" min="0" max="23" size="2"
-                  name="start_hour"
-                  value={start_hour}
-                  onChange={this.onValueChange}/>
-                <span> h </span>
-                <Spinner type="int" min="0" max="59" size="2"
-                  name="start_minute"
-                  value={start_minute}
-                  onChange={this.onValueChange}/>
-                <span> m</span>
-              </FormGroup>
-              <FormGroup offset="1">
-                <TimeZoneSelect
-                  name="start_timezone"
-                  value={start_timezone}
-                  onChange={this.onValueChange}/>
-              </FormGroup>
+            <Radio
+              title={_('Create Schedule')}
+              value="1"
+              checked={reschedule === '1'}
+              name="reschedule"
+              onChange={this.onValueChange}>
+            </Radio>
+            <FormGroup offset="1">
+              <Datepicker
+                name="date"
+                value={date}
+                onChange={this.onValueChange}/>
             </FormGroup>
+            <FormGroup offset="1">
+              <Layout flex box>{_('at')}</Layout>
+              <Spinner type="int" min="0" max="23" size="2"
+                name="start_hour"
+                value={start_hour}
+                onChange={this.onValueChange}/>
+              <Layout flex box>{_('h')}</Layout>
+              <Spinner type="int" min="0" max="59" size="2"
+                name="start_minute"
+                value={start_minute}
+                onChange={this.onValueChange}/>
+              <Layout flex box>{_('m')}</Layout>
+            </FormGroup>
+            <FormGroup offset="1">
+              <TimeZoneSelect
+                name="start_timezone"
+                value={start_timezone}
+                onChange={this.onValueChange}/>
+            </FormGroup>
+          </FormGroup>
 
-            {capabilities.mayOp('create_alert') &&
-              capabilities.mayOp('get_alerts') &&
-              <FormGroup title={_('Email report to')} titleSize="3">
-                <TextField
-                  name="alert_email"
-                  value={alert_email}
-                  size="30" maxLength="80"
-                  onChange={this.onValueChange}/>
-              </FormGroup>
-            }
-          </Layout>
+          {capabilities.mayOp('create_alert') &&
+            capabilities.mayOp('get_alerts') &&
+            <FormGroup title={_('Email report to')} titleSize="3">
+              <TextField
+                grow="1"
+                name="alert_email"
+                value={alert_email}
+                size="30" maxLength="80"
+                onChange={this.onValueChange}/>
+            </FormGroup>
+          }
         </Layout>
       </Layout>
     );

_______________________________________________
Openvas-commits mailing list
Openvas-commits@wald.intevation.org
https://lists.wald.intevation.org/cgi-bin/mailman/listinfo/openvas-commits

Reply via email to