颜色参数样式调整

src/components/Qrcode.css

@@ -359,7 +359,6 @@ input[type="number"]{
 
 .dl-btn {
     cursor: pointer;
-    float: left;
     font-size: 0.9em;
     line-height: 2em;
     margin: 0;
@@ -405,6 +404,11 @@ input[type="number"]{
     color: #44D7B6;
 }
 
+.dl-btn-active {
+    border-color: #44D7B6;
+    color: #44D7B6;
+}
+
 .dl-btn:active {
     -webkit-transition-duration: 0s; /* Safari */
     transition-duration: 0s;
@@ -470,6 +474,14 @@ select:-moz-focusring {
     text-shadow: 0 0 0 #000;
 }
 
-.Qr-color-picker {
+.twitter-picker {
-    width: 200px;
+    max-width: calc(100vw - 46px)!important;
+    border: 0px solid rgba(0, 0, 0, 0.12) !important;
+    box-sizing: border-box;
+    border-radius: 10px!important;
+    box-shadow: 0px 3px 6px -4px rgba(0, 0, 0, 0.12), 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 9px 28px 8px rgba(0, 0, 0, 0.05) !important;
 }
+
+.twitter-picker:nth-last-child(1) input {
+    font: 15px 'Futura', sans-serif !important;
+}

src/components/app/App.css

@@ -15,3 +15,6 @@
   font-size: calc(10px + 2vmin);
   color: black;
 }
+
+.Layout {
+}

src/components/param/ParamColor.js

@@ -1,7 +1,7 @@
 import React, {useState} from 'react';
 import reactCSS from 'reactcss';
 import PropTypes from 'prop-types';
-import {TwitterPicker} from 'react-color';
+import { TwitterPicker } from 'react-color';
 import '../Qrcode.css';
 
 const ParamColor = ({ rendererIndex, paramIndex, value, onChange }) => {
@@ -16,8 +16,13 @@ const ParamColor = ({ rendererIndex, paramIndex, value, onChange }) => {
                 display: 'inline-block',
                 cursor: 'pointer',
             },
+            container: {
+                position: 'relative',
+            },
             popover: {
+                marginTop: '10px',
                 position: 'absolute',
+                right: '0',
                 zIndex: '2',
             },
             cover: {
@@ -31,7 +36,7 @@ const ParamColor = ({ rendererIndex, paramIndex, value, onChange }) => {
     });
 
     return (
-        <div>
+        <div style={styles.container}>
             <button className="dl-btn" onClick={ () => setDisplay(!displayColorPicker) }>
                 选择颜色
             </button>
@@ -41,8 +46,9 @@ const ParamColor = ({ rendererIndex, paramIndex, value, onChange }) => {
                         <div style={styles.cover} onClick={() => setDisplay(false)} />
                         <TwitterPicker
                             key={"input_" + rendererIndex + "_" + paramIndex}
-                            triangle="hide"
+                            triangle="none"
                             color={value}
+                            colors={['#FF6900', '#FCB900', '#7BDCB5', '#00D084', '#8ED1FC', '#0693E3', '#ABB8C3', '#EB144C', '#F78DA7', '#9900EF']}
                             onChangeComplete={onChange}
                         />
                     </div>