improve admin widgets

diff --git a/ipf/admin/assets/components/button/index.js b/ipf/admin/assets/components/button/index.js
index 7b0fef09cb65e736685c3314d8cfd868096d2989..52f48275ce42ef9cf445a154616bab363b882a92 100644 (file)
--- a/ipf/admin/assets/components/button/index.js
+++ b/ipf/admin/assets/components/button/index.js
@@ -3,17 +3,27 @@ import classNames from 'classnames';
 import style from './style.css';
 
 export class Button extends React.Component {
+    static defaultProps = {
+        className: null,
+        default: false,
+        disabled: false,
+        dangerous: false,
+        object: null,
+    };
+
     render() {
         let className = classNames({
             [style.button]: true,
             [style.button_default]: this.props.default,
             [style.button_disabled]: this.props.disabled,
-        });
+            [style.button_dangerous]: this.props.dangerous,
+        }, this.props.className);
         return <button className={className} onClick={this.clicked}>{this.props.children}</button>;
     }
 
     clicked = (event) => {
         event.preventDefault();
-        this.props.onClick();
+        const {object, onClick} = this.props;
+        onClick(object);
     }
 }

diff --git a/ipf/admin/assets/components/button/style.css b/ipf/admin/assets/components/button/style.css
index 9ff6d084564d71b6c5cf188233cbf89bec7839c1..8ef6a40496b5d90d80828227aad96539faddeab8 100644 (file)
--- a/ipf/admin/assets/components/button/style.css
+++ b/ipf/admin/assets/components/button/style.css
@@ -15,6 +15,13 @@
     color: white;
 }
 
+.button_dangerous {
+    border: 2px solid #600;
+    background: linear-gradient(to top, #933, #CC3434 16px);
+    font-weight: bold;
+    color: white;
+}
+
 .button_disabled {
     background: #e1e1e1;
     color: #888;

diff --git a/ipf/admin/assets/components/link/index.js b/ipf/admin/assets/components/link/index.js
index 14312177e660b5e93f9584e4cc97b6df847391c9..0018841b95a39b8d3f3159db5429baa7e80c6dbb 100644 (file)
--- a/ipf/admin/assets/components/link/index.js
+++ b/ipf/admin/assets/components/link/index.js
@@ -2,20 +2,20 @@ import React from 'react';
 import style from './style.css';
 
 export class Link extends React.Component {
-    constructor(...args) {
-        super(...args);
-        this.clicked = this.clicked.bind(this);
-    }
+    static defaultProps = {
+        className: style.link,
+        object: null,
+    };
 
     render() {
         return (
-            <a className={style.link} href="#" onClick={this.clicked}>{this.props.children}</a>
+            <a className={this.props.className} href="#" onClick={this.clicked}>{this.props.children}</a>
         );
     }
 
-    clicked(event) {
+    clicked = (event) => {
         event.preventDefault();
         const {object, onClick} = this.props;
         onClick(object);
-    }
+    };
 }

diff --git a/ipf/admin/assets/components/link/style.css b/ipf/admin/assets/components/link/style.css
index 2bea7618e0e9d649d4103d74bfb4333923490d12..52a206ce4a084340cf603857b2f5690f3bca96ae 100644 (file)
--- a/ipf/admin/assets/components/link/style.css
+++ b/ipf/admin/assets/components/link/style.css
@@ -1,10 +1,10 @@
-a.link,
-a.link:link,
-a.link:visited {
+.link,
+.link:link,
+.link:visited {
     color: #006A95;
     text-decoration: none;
 }
 
-a.link:hover {
+.link:hover {
     color: #036;
 }

diff --git a/ipf/admin/assets/components/text_input/index.js b/ipf/admin/assets/components/text_input/index.js
index 2a6a8bf75ce43a48a0f0a1fded32bdb8efd424d6..881db604e6a19b08643763489569f3bc691698d3 100644 (file)
--- a/ipf/admin/assets/components/text_input/index.js
+++ b/ipf/admin/assets/components/text_input/index.js
@@ -1,18 +1,14 @@
 import React from 'react';
 
 export class TextInput extends React.Component {
-    constructor(...args) {
-        super(...args);
-        this.changed = this.changed.bind(this);
-    }
-
     render() {
+        const type = this.props.password ? 'password' : 'text';
         return (
-            <input type='text' value={this.props.value} onChange={this.changed}/>
+            <input type={type} value={this.props.value || ''} onChange={this.changed}/>
         );
     }
 
-    changed(event) {
+    changed = (event) => {
         if (this.props.onChange) {
             this.props.onChange(event.target.value);
         }