From 7073895d528dc57f8c3fad26e895c643a3e03478 Mon Sep 17 00:00:00 2001
From: ciaochaos <1272777550@qq.com>
Date: Fri, 15 May 2020 17:01:10 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A2=9C=E8=89=B2=E5=8F=82=E6=95=B0=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Qrcode.css          | 18 +++++++++++++++---
 src/components/app/App.css         |  3 +++
 src/components/param/ParamColor.js | 12 +++++++++---
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/components/Qrcode.css b/src/components/Qrcode.css
index 168ac30..e5d5f00 100644
--- a/src/components/Qrcode.css
+++ b/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 {
-    width: 200px;
+.twitter-picker {
+    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;
+}
\ No newline at end of file
diff --git a/src/components/app/App.css b/src/components/app/App.css
index 939bbfa..f1513ac 100644
--- a/src/components/app/App.css
+++ b/src/components/app/App.css
@@ -15,3 +15,6 @@
   font-size: calc(10px + 2vmin);
   color: black;
 }
+
+.Layout {
+}
\ No newline at end of file
diff --git a/src/components/param/ParamColor.js b/src/components/param/ParamColor.js
index b7231c4..aa3da96 100644
--- a/src/components/param/ParamColor.js
+++ b/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>