style: Modify bar style.

jaywcjlove · jaywcjlove · commit 152a41892e04 · 2022-01-18T12:58:00.000+08:00
diff --git a/src/icon.tsx b/src/icon.tsx
@@ -1,6 +1,9 @@
 export const full = (
-  <svg viewBox="0 0 1024 1024">
-    <path d="M909 959H780a30 30 0 0 1 0-60h99a20 20 0 0 0 20-20v-99a30 30 0 0 1 60 0v129a50 50 0 0 1-50 50z m20-685a30 30 0 0 1-30-30v-99a20 20 0 0 0-20-20h-99a30 30 0 0 1 0-60h129a50 50 0 0 1 50 50v129a30 30 0 0 1-30 30z m-157 28v420a50 50 0 0 1-50 50H302a50 50 0 0 1-50-50V302a50 50 0 0 1 50-50h420a50 50 0 0 1 50 50z m-60 30a20 20 0 0 0-20-20H332a20 20 0 0 0-20 20v360a20 20 0 0 0 20 20h360a20 20 0 0 0 20-20V332zM244 125h-99a20 20 0 0 0-20 20v99a30 30 0 0 1-60 0V115a50 50 0 0 1 50-50h129a30 30 0 0 1 0 60zM95 750a30 30 0 0 1 30 30v99a20 20 0 0 0 20 20h99a30 30 0 0 1 0 60H115a50 50 0 0 1-50-50V780a30 30 0 0 1 30-30z" />
+  <svg viewBox="0 0 176 176">
+    <path
+      d="M40.25 8.8817842e-15 5.25 8.8817842e-15C2.35 8.8817842e-15 0 2.35 0 5.25L0 40.15C0 40.175 0 40.2 0 40.225 0 43.1375 2.35 45.4875 5.25 45.4875 8.15 45.4875 10.525 43.1375 10.525 40.225 10.525 39.925 10.475 39.6125 10.425 39.325L10.425 11.35C10.425 10.8625 10.8125 10.475 11.2875 10.475L39.6875 10.475C39.875 10.4875 40.0625 10.525 40.25 10.525 43.15 10.525 45.5125 8.175 45.5125 5.2625 45.5125 2.35 43.15 8.8817842e-15 40.25 8.8817842e-15ZM143.136561 140.373919C143.136561 142.009731 141.787547 143.3375 140.162358 143.3375L34.0895201 143.3375C32.4537083 143.3375 31.1259389 142.009731 31.1259389 140.373919L31.1259389 34.3117033C31.1259389 32.6652693 32.4537083 31.3375 34.0895201 31.3375L140.162358 31.3375C141.787547 31.3375 143.136561 32.6652693 143.136561 34.3117033L143.136561 140.373919ZM134.725 3.55271368e-15 169.725 3.55271368e-15C172.625 3.55271368e-15 174.975 2.35 174.975 5.25L174.975 40.15C174.975 40.175 175 40.2 175 40.225 175 43.1375 172.6375 45.4875 169.725 45.4875 166.8125 45.4875 164.4625 43.1375 164.4625 40.225 164.4625 39.925 164.5125 39.6125 164.55 39.325L164.55 11.35C164.55 10.8625 164.175 10.475 163.675 10.475L135.2875 10.475C135.0875 10.4875 134.925 10.525 134.725 10.525 131.825 10.525 129.475 8.175 129.475 5.2625 129.475 2.35 131.825 3.55271368e-15 134.725 3.55271368e-15ZM40.25 174.975 5.25 174.975C2.35 174.975 0 172.6375 0 169.7375L0 134.825C0 134.8 0 134.775 0 134.75 0 131.8375 2.35 129.475 5.25 129.475 8.15 129.475 10.525 131.825 10.525 134.75 10.525 135.05 10.475 135.3625 10.425 135.65L10.425 163.6125C10.425 164.1 10.8125 164.4875 11.2875 164.4875L39.6875 164.4875C39.875 164.475 40.05 164.4375 40.2375 164.4375 43.1375 164.4375 45.5 166.7875 45.5 169.7 45.5 172.6125 43.15 174.975 40.25 174.975ZM134.725 174.975 169.725 174.975C172.625 174.975 174.975 172.625 174.975 169.7375L174.975 134.825C174.975 134.8 175 134.775 175 134.75 175 131.8375 172.6375 129.475 169.725 129.475 166.8125 129.475 164.4625 131.825 164.4625 134.75 164.4625 135.05 164.5125 135.3625 164.55 135.65L164.55 163.6125C164.55 164.1 164.175 164.4875 163.675 164.4875L135.2875 164.4875C135.0875 164.475 134.925 164.4375 134.725 164.4375 131.825 164.4375 129.475 166.7875 129.475 169.7 129.475 172.6125 131.825 174.975 134.725 174.975Z"
+      transform="translate(.5 .512)"
+    />
   </svg>
 );
 
@@ -15,7 +18,16 @@ export const bgPlaid = (
 );
 
 export const copy = (
-  <svg viewBox="0 0 1024 1024">
-    <path d="M869.865 46.545a107.706 107.706 0 0 1 107.59 107.567v599.412a107.706 107.706 0 0 1-107.59 107.567h-148.41v8.797a107.683 107.683 0 0 1-107.567 107.567H154.112A107.683 107.683 0 0 1 46.545 869.888V270.476a107.683 107.683 0 0 1 107.567-107.567h148.433v-8.797a107.706 107.706 0 0 1 107.59-107.567h459.73z m-715.73 861.091h459.73a37.841 37.841 0 0 0 37.771-37.748V270.476c0-20.806-16.942-37.749-37.748-37.749H154.135c-20.806 0-37.771 16.943-37.771 37.749v599.412c0 20.83 16.965 37.748 37.771 37.748z m753.501-154.112V154.112c0-20.806-16.965-37.748-37.771-37.748h-459.73c-20.806 0-37.771 16.942-37.771 37.748v8.797h241.524a107.683 107.683 0 0 1 107.567 107.567v520.797h148.41c20.806 0 37.771-16.92 37.771-37.749z m-384-381.16a34.91 34.91 0 0 1 0 69.818H244.364a34.91 34.91 0 0 1 0-69.818h279.272z m0 162.909a34.91 34.91 0 0 1 0 69.818H244.364a34.91 34.91 0 0 1 0-69.818h279.272z m-93.09 162.909a34.91 34.91 0 0 1 0 69.818H244.363a34.91 34.91 0 0 1 0-69.818h186.181z" />
+  <svg viewBox="0 0 170 185">
+    <path d="M153.846154,-3.55271368e-15 L53.8461537,-3.55271368e-15 C45.3846152,-3.55271368e-15 38.4615385,6.92307695 38.4615385,15.3846154 L38.4615385,23.0769232 L130.769231,23.0769232 C139.230769,23.0769232 146.153846,30 146.153846,38.4615385 L146.153846,146.153846 L153.846154,146.153846 C162.307692,146.153846 169.230769,139.230769 169.230769,130.769231 L169.230769,15.3846154 C169.230769,6.92307695 162.307692,-3.55271368e-15 153.846154,-3.55271368e-15 Z M130.769231,53.8461539 C130.769231,45.3846154 123.846154,38.4615385 115.384615,38.4615385 L15.3846154,38.4615385 C6.92307695,38.4615385 3.55271368e-15,45.3846154 3.55271368e-15,53.8461539 L3.55271368e-15,169.230769 C3.55271368e-15,177.692308 6.92307695,184.615385 15.3846154,184.615385 L115.384615,184.615385 C123.846154,184.615385 130.769231,177.692308 130.769231,169.230769 L130.769231,53.8461539 Z M61.5384615,80.7692309 C61.5384615,83.0769232 60,84.6153848 57.6923076,84.6153848 L26.923077,84.6153848 C24.6153846,84.6153848 23.076923,83.0769232 23.076923,80.7692309 L23.076923,73.0769232 C23.076923,70.7692309 24.6153846,69.2307693 26.923077,69.2307693 L57.6923076,69.2307693 C60,69.2307693 61.5384615,70.7692309 61.5384615,73.0769232 L61.5384615,80.7692309 Z M92.3076922,142.307692 C92.3076922,144.615385 90.7692307,146.153846 88.4615385,146.153846 L26.923077,146.153846 C24.6153846,146.153846 23.076923,144.615385 23.076923,142.307692 L23.076923,134.615385 C23.076923,132.307692 24.6153846,130.769231 26.923077,130.769231 L88.4615385,130.769231 C90.7692309,130.769231 92.3076922,132.307692 92.3076922,134.615385 L92.3076922,142.307692 L92.3076922,142.307692 Z M107.692308,111.538462 C107.692308,113.846154 106.153846,115.384615 103.846154,115.384615 L26.923077,115.384615 C24.6153846,115.384615 23.076923,113.846154 23.076923,111.538462 L23.076923,103.846154 C23.076923,101.538462 24.6153846,100 26.923077,100 L103.846154,100 C106.153846,100 107.692308,101.538462 107.692308,103.846154 L107.692308,111.538462 L107.692308,111.538462 Z" />
+  </svg>
+);
+
+export const copyOk = (
+  <svg viewBox="0 0 170 185">
+    <path
+      d="M153.846154,-3.55271368e-15 L53.8461537,-3.55271368e-15 C45.3846152,-3.55271368e-15 38.4615385,6.92307695 38.4615385,15.3846154 L38.4615385,23.0769232 L130.769231,23.0769232 C139.230769,23.0769232 146.153846,30 146.153846,38.4615385 L146.153846,146.153846 L153.846154,146.153846 C162.307692,146.153846 169.230769,139.230769 169.230769,130.769231 L169.230769,15.3846154 C169.230769,6.92307695 162.307692,-3.55271368e-15 153.846154,-3.55271368e-15 Z M130.769231,53.8461539 C130.769231,45.3846154 123.846154,38.4615385 115.384615,38.4615385 L15.3846154,38.4615385 C6.92307695,38.4615385 3.55271368e-15,45.3846154 3.55271368e-15,53.8461539 L3.55271368e-15,169.230769 C3.55271368e-15,177.692308 6.92307695,184.615385 15.3846154,184.615385 L115.384615,184.615385 C123.846154,184.615385 130.769231,177.692308 130.769231,169.230769 L130.769231,53.8461539 Z M106.941858,105.608333 C110.211682,102.450235 115.409229,102.495402 118.623676,105.709849 C121.838122,108.924296 121.883289,114.121842 118.725191,117.391667 L118.725191,117.391667 L72.8918576,163.225 C69.6376921,166.478183 64.3626897,166.478183 61.1085242,163.225 L61.1085242,163.225 L31.9418576,134.058333 C28.7837592,130.788509 28.828926,125.590962 32.0433729,122.376515 C35.2578198,119.162069 40.4553662,119.116902 43.7251908,122.275 L43.7251908,122.275 L67.0001908,145.55 Z M57.6923076,69.2307693 C60,69.2307693 61.5384615,70.7692309 61.5384615,73.0769232 L61.5384615,80.7692309 C61.5384615,83.0769232 60,84.6153848 57.6923076,84.6153848 L26.923077,84.6153848 C24.6153846,84.6153848 23.076923,83.0769232 23.076923,80.7692309 L23.076923,73.0769232 C23.076923,70.7692309 24.6153846,69.2307693 26.923077,69.2307693 L57.6923076,69.2307693 Z"
+      transform="translate(1)"
+    />
   </svg>
 );
diff --git a/src/index.less b/src/index.less
@@ -121,21 +121,23 @@
     cursor: pointer;
     background-color: rgba(0, 0, 0, 0.03);
     box-shadow: inset 1px 0 0 0 #d5d5d5;
-    padding: 3px 3px 8px 2px;
+    padding: 3px 0 8px 0;
     margin: 0 auto;
     color: rgba(0, 0, 0, 0.45);
     writing-mode: tb-rl;
     position: relative;
     display: flex;
+    align-items: center;
     width: 29px;
     line-height: 24px;
-    font-size: 14px;
+    font-size: 12px;
     max-width: 29px;
     min-width: 29px;
     min-height: 29px;
     &-btn {
       overflow: hidden;
-      padding: 5px 0;
+      padding: 5px 0 10px 0;
+      display: flex;
       transition: all 0.3s;
       user-select: none;
       flex: 1;
@@ -144,10 +146,9 @@
       }
     }
     &-iconbtns {
-      margin-top: 5px;
-      margin-right: 3px;
-      height: 15px;
-      width: 15px;
+      margin-top: 6px;
+      height: 14px;
+      width: 14px;
       line-height: 22px;
     }
     svg {
diff --git a/src/index.tsx b/src/index.tsx
@@ -236,7 +236,7 @@ const CodePreview = React.forwardRef<CodePreviewRef, CodePreviewProps>((props, r
               .trim()}
             onClick={onCopyCode}
           >
-            {icon.copy}
+            {copied ? icon.copyOk : icon.copy}
           </div>
           <div
             className={[`${prefixCls}-bar-iconbtns`, fullScreen ? `${prefixCls}-bar-copied` : null]

Original file line number	Diff line number	Diff line change
`@@ -236,7 +236,7 @@ const CodePreview = React.forwardRef<CodePreviewRef, CodePreviewProps>((props, r`
`236`	`236`	`.trim()}`
`237`	`237`	`onClick={onCopyCode}`
`238`	`238`	`>`
`239`		`- {icon.copy}`
	`239`	`+ {copied ? icon.copyOk : icon.copy}`
`240`	`240`	`</div>`
`241`	`241`	`<div`
`242`	`242`	className={[`${prefixCls}-bar-iconbtns`, fullScreen ? `${prefixCls}-bar-copied` : null]