0.1.0.2

.idea/workspace.xml

@@ -12,7 +12,9 @@
   <component name="ChangeListManager">
     <list default="true" id="78c692f3-8e9f-49c7-86c1-0c5e9d711b1f" name="Default Changelist" comment="0.1.0.2">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/QrItem.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/QrItem.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/components/Qrcode.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Qrcode.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/Qrcode.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Qrcode.js" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -77,7 +79,7 @@
       <option name="presentableId" value="Default" />
       <updated>1588240852207</updated>
       <workItem from="1588240855414" duration="15673000" />
-      <workItem from="1588305721761" duration="12962000" />
+      <workItem from="1588305721761" duration="17092000" />
     </task>
     <task id="LOCAL-00001" summary="0.1.0.1">
       <created>1588308749650</created>
@@ -261,7 +263,14 @@
       <option name="project" value="LOCAL" />
       <updated>1588323249801</updated>
     </task>
-    <option name="localTasksCounter" value="27" />
+    <task id="LOCAL-00027" summary="0.1.0.2">
+      <created>1588324026075</created>
+      <option name="number" value="00027" />
+      <option name="presentableId" value="LOCAL-00027" />
+      <option name="project" value="LOCAL" />
+      <updated>1588324026075</updated>
+    </task>
+    <option name="localTasksCounter" value="28" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -289,10 +298,10 @@
       <screen x="0" y="23" width="2541" height="1057" />
     </state>
     <state x="1161" y="421" key="#Notifications/428.1103.1680.1027/0.23.2541.1057/-1600.203.1600.877@0.23.2541.1057" timestamp="1588307553058" />
-    <state x="870" y="291" key="Vcs.Push.Dialog.v2" timestamp="1588323264967">
+    <state x="870" y="291" key="Vcs.Push.Dialog.v2" timestamp="1588324036378">
       <screen x="0" y="23" width="2541" height="1057" />
     </state>
-    <state x="870" y="291" key="Vcs.Push.Dialog.v2/428.1103.1680.1027/0.23.2541.1057/-1600.203.1600.877@0.23.2541.1057" timestamp="1588323264967" />
+    <state x="870" y="291" key="Vcs.Push.Dialog.v2/428.1103.1680.1027/0.23.2541.1057/-1600.203.1600.877@0.23.2541.1057" timestamp="1588324036378" />
     <state x="997" y="347" key="git4idea.merge.GitPullDialog" timestamp="1588322703667">
       <screen x="0" y="23" width="2541" height="1057" />
     </state>

src/components/QrItem.js

@@ -21,7 +21,7 @@ class QrItem extends React.Component {
         return (
             <div className="Qr-item">
                 <div className="Qr-item-image">
-                    <svg width="100%" height="100%" viewBox={calViewBox(this.props)} fill="white">
+                    <svg className="Qr-item-svg" width="100%" height="100%" viewBox={calViewBox(this.props)} fill="white">
                         {this.props.renderer}
                     </svg>
                 </div>

src/components/Qrcode.css

@@ -3,6 +3,26 @@
     box-sizing: border-box;
     border-top: rgba(0,0,0,0.06) solid 3px;
     border-bottom: rgba(0,0,0,0.06) solid 3px;
+    padding-top: calc((10px + 2vmin) * 2);
+    padding-bottom: calc((10px + 2vmin) * 2);
+}
+
+.Qr-titled-nobg {
+    padding-top: calc((10px + 2vmin) * 2);
+    padding-bottom: calc((10px + 2vmin) * 2);
+}
+
+.Qr-title {
+    margin-top: 3em;
+}
+
+.Qr-subtitle {
+    margin-top: -1em;
+}
+
+.Qr-s-subtitle {
+    margin-top: 0;
+    margin-bottom: 0;
 }
 
 .Qr-s {
@@ -19,14 +39,17 @@
 }
 
 .Qr-s-title {
-    margin-top: 23px;
     font-size: 1.4em;
 }
 
+.title-margin {
+    margin-bottom: 20px;
+}
+
 .Qr-box {
     white-space: nowrap;
     display: flex;
-    padding: 10px 13px 23px 23px;
+    padding: 10px 13px 0px 23px;
 }
 
 @media (min-width: 1000px) {
@@ -56,6 +79,14 @@
     transition-duration: 0.2s;
 }
 
+.Qr-item-svg {
+    opacity: 0.36;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    -webkit-transition-duration: 0.2s; /* Safari */
+    transition-duration: 0.2s;
+}
+
 @media (min-width: 500px) {
     .Qr-item-image {
         width: 200px;
@@ -67,6 +98,10 @@
     border-color: #44D7B6;
 }
 
+.Qr-item:hover .Qr-item-svg {
+    opacity: 1;
+}
+
 .Qr-item:hover .Qr-item-detail {
     color: #000000;
 }
@@ -82,18 +117,30 @@
     transition-duration: 0.2s;
 }
 
-.Qr-input {
+td:nth-child(1) {
-    caret-color: #44D7B6;
+    font-size: 0.8em;
+}
+
+td:nth-child(2) {
+    font-size: 0.8em;
+}
+
+.big-input {
     font-size: calc(10px + 2vmin);
-    padding: 0;
     margin-bottom: calc((10px + 2vmin) * 2);
+    border: rgba(0,0,0,0.12) solid 3px;
+}
+
+.Qr-input {
+    font-size: 0.6em;
+    caret-color: #44D7B6;
+    padding: 0;
     line-height: 2em;
     box-sizing: border-box;
-    border: rgba(0,0,0,0.12) solid 3px;
+    border: rgba(0,0,0,0.12) solid 2px;
     border-radius: 3em;
     outline: none;
     text-indent: 1em;
-    width: 20em;
     max-width: calc(100vw - 46px);
     overflow: visible;
     -webkit-transition-timing-function: ease-in-out;
@@ -103,6 +150,8 @@
     -webkit-appearance: none;
     -webkit-text-size-adjust: 100%;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    font-family: 'Futura', sans-serif;
+    color: rgba(0,0,0,0.6);
 }
 
 .Qr-input::placeholder {
@@ -110,11 +159,6 @@
     color: rgba(0,0,0,0.18);
 }
 
-.Qr-input {
-    font-family: 'Futura', sans-serif;
-    color: rgba(0,0,0,0.6);
-}
-
 .Qr-Centered {
     padding-left: 23px;
     padding-right: 23px;
@@ -125,4 +169,14 @@
 .Qr-input:focus {
     border-color: #44D7B6;
     color: #000000;
+}
+
+.Qr-table {
+    width: 100%;
+    border-spacing: 0;
+    margin-top: 23px;
+}
+
+.Qr-div-table {
+    max-width: 600px;
 }

src/components/Qrcode.js

@@ -47,9 +47,10 @@ class Qrcode extends React.Component {
         return (
             <div>
                 <div className="Qr-Centered">
-                    <h1>qrbtf.com</h1>
+                    <h1 className="Qr-title">qrbtf.com</h1>
+                    <p className="Qr-subtitle">参数化二维码生成器</p>
                     <input
-                        className="Qr-input"
+                        className="Qr-input big-input"
                         placeholder="Input your URL here"
                         onChange={this.handleChange}
                         onBlur={this.handleCreate}
@@ -57,8 +58,9 @@ class Qrcode extends React.Component {
                     />
                 </div>
                 <div className="Qr-titled">
-                    <div className="Qr-Centered Qr-s-title">
+                    <div className="Qr-Centered title-margin">
-                        Styles
+                        <div className="Qr-s-title">Styles</div>
+                        <p className="Qr-s-subtitle">样式选择</p>
                     </div>
                     <div className="Qr-s">
                         <div className="Qr-box">
@@ -66,6 +68,31 @@ class Qrcode extends React.Component {
                         </div>
                     </div>
                 </div>
+                <div className="Qr-titled-nobg">
+                    <div className="Qr-Centered title-margin">
+                        <div className="Qr-s-title">Parameters</div>
+                        <p className="Qr-s-subtitle">参数调整</p>
+                    </div>
+                    <div className="Qr-Centered">
+                        <div className="Qr-div-table">
+                            <table className="Qr-table">
+                                <tbody>
+                                    <tr>
+                                        <td>圆点大小</td>
+                                        <td><input className="Qr-input"
+                                                   placeholder="10" />&ensp;px</td>
+                                    </tr>
+                                    <tr>
+                                        <td>随机种</td>
+                                        <td><input className="Qr-input"
+                                                   placeholder="1" /></td>
+                                    </tr>
+                                </tbody>
+
+                            </table>
+                        </div>
+                    </div>
+                </div>
             </div>
         );
     }