Add color picker

source/Component/AttrInput/AttrInput.scss

@@ -1,7 +1,6 @@
 @import "../Theme/Theme.scss";
 
-$line-min-height: 24px;
-$root-min-height: 26px;
+$line-min-height: 26px;
 
 div.attr-input {
 	width: 100%;
@@ -23,7 +22,7 @@ div.attr-input {
         width: 50%;
         height: 100%;
         max-width: 180px;
-        min-height: $root-min-height;
+        min-height: $line-min-height;
 
         div.input-content {
             box-sizing: border-box;
@@ -33,14 +32,13 @@ div.attr-input {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            min-height: $root-min-height;
+            height: $line-min-height;
     
             input {
                 width: 100%;
                 height: 100%;
                 border: none;
                 outline:none;
-                min-height: $line-min-height;
             };
     
             input:focus {
@@ -73,17 +71,35 @@ div.attr-input {
             padding-top: 5px;
             min-height: $line-min-height;
         }
+
+        div.error-view {
+            border-radius: 3px;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+            height: $line-min-height;
+            text-overflow: ellipsis;
+            word-wrap: none;
+            word-break: keep-all;
+            white-space: nowrap;
+            cursor:not-allowed;
+
+            span {
+                padding-left: 8px;
+            }
+        }
     }
 }
 
 div.dark.attr-input {
 
-	div.input-content,
+	div.input-content, div.error-view,
 	div.input-content input {
 		background-color: $lt-bg-color-lvl3-dark;
 		color: $lt-font-color-normal-dark;
 	}
 
+    div.error-view:hover,
 	div.button-left:hover, div.button-right:hover {
 		background-color: $lt-bg-color-lvl2-dark;
 	}
@@ -91,12 +107,13 @@ div.dark.attr-input {
 
 div.light.attr-input {
 
-	div.input-content,
+	div.input-content, div.error-view,
 	div.input-content input {
 		background-color: $lt-bg-color-lvl3-light;
 		color: $lt-font-color-normal-light;
 	}
 
+    div.error-view:hover,
 	div.button-left:hover, div.button-right:hover {
 		background-color: $lt-bg-color-lvl2-light;
 	}

source/Component/AttrInput/AttrInput.tsx

@@ -153,6 +153,16 @@ class AttrInput extends Component<IAttrInputProps> {
         this.error = this.check(value.toString());
     }
 
+    private renderErrorInput() {
+        return <div className="error-view">
+            {
+                this.props.disableI18n ? 
+                <Localization i18nKey={this.props.disableI18n}/> :
+                <span>{this.props.value}</span>
+            }
+        </div>
+    }
+
 	public render(): ReactNode {
 
 		return <Theme
@@ -165,9 +175,7 @@ class AttrInput extends Component<IAttrInputProps> {
             <div className="root-content">
                 {
                     this.props.disable ? 
-                        this.props.disableI18n ? 
-                            <Localization i18nKey={this.props.disableI18n}/> :
-                            <div>{this.props.value}</div> :
+                        this.renderErrorInput() :
                         this.renderInput()
                 }
             </div>