From 85810b5767a44cfff1d8948d5375e0757e72d12d Mon Sep 17 00:00:00 2001
From: Simba <ycyin8795@163.com>
Date: Sun, 21 Jun 2020 21:23:12 +0800
Subject: [PATCH] preference engines style

---
 .../matter/widget/ShareOperationModal.tsx     | 21 ++++++--
 src/pages/preference/Index.less               |  5 ++
 src/pages/preference/Index.tsx                | 54 +++++++++----------
 .../preference/widget/PreviewEngineCell.tsx   | 25 ++++++---
 4 files changed, 66 insertions(+), 39 deletions(-)

diff --git a/src/pages/matter/widget/ShareOperationModal.tsx b/src/pages/matter/widget/ShareOperationModal.tsx
index e1538d9..62f8d74 100644
--- a/src/pages/matter/widget/ShareOperationModal.tsx
+++ b/src/pages/matter/widget/ShareOperationModal.tsx
@@ -3,7 +3,10 @@ import TankComponent from "../../../common/component/TankComponent";
 import { Modal, Button, Col, Row, Select } from "antd";
 import "./ShareOperationModal.less";
 import Share from "../../../common/model/share/Share";
-import { ShareExpireOptionList, ShareExpireOption } from "../../../common/model/share/ShareExpireOption";
+import {
+  ShareExpireOptionList,
+  ShareExpireOption,
+} from "../../../common/model/share/ShareExpireOption";
 import Lang from "../../../common/model/global/Lang";
 
 interface IProps {
@@ -55,17 +58,27 @@ export default class ShareOperationModal extends TankComponent<IProps, IState> {
         <Row>
           <Col span={8}>{Lang.t("matter.expire")}</Col>
           <Col span={16}>
-            <Select className="wp100" value={share.expireOption} onChange={this.selectChange}>
+            <Select
+              className="wp100"
+              value={share.expireOption}
+              onChange={this.selectChange}
+            >
               {ShareExpireOptionList.map((option) => (
                 <Select.Option key={option.value} value={option.value}>
-                  {option.name}
+                  {Lang.t(option.name)}
                 </Select.Option>
               ))}
             </Select>
           </Col>
         </Row>
         <div className="mt10 text-right">
-          <Button type="primary" className="mr10" onClick={() => this.props.onSuccess(share)}>{Lang.t("matter.share")}</Button>
+          <Button
+            type="primary"
+            className="mr10"
+            onClick={() => this.props.onSuccess(share)}
+          >
+            {Lang.t("matter.share")}
+          </Button>
           <Button onClick={this.props.onClose}>{Lang.t("matter.close")}</Button>
         </div>
       </div>
diff --git a/src/pages/preference/Index.less b/src/pages/preference/Index.less
index 683d94f..46a4f81 100644
--- a/src/pages/preference/Index.less
+++ b/src/pages/preference/Index.less
@@ -23,5 +23,10 @@
     top: 0;
     margin-right: 0;
   }
+  .box {
+    .widget-tank-content-card {
+      padding: 20px 10px 5px;
+    }
+  }
 
 }
diff --git a/src/pages/preference/Index.tsx b/src/pages/preference/Index.tsx
index a326aaa..d8f9783 100644
--- a/src/pages/preference/Index.tsx
+++ b/src/pages/preference/Index.tsx
@@ -147,37 +147,33 @@ export default class Index extends TankComponent<IProps, IState> {
               https://tank-doc.eyeblue.cn/zh
             </a>
           </InfoCell>
+          <InfoCell name={Lang.t("preference.previewConfig")}>
+            {this.preference.previewConfig.previewEngines.map((engines, index) => (
+              <div key={index} className="relative mb10 box">
+                <TankContentCard>
+                  <Tooltip title={Lang.t("preference.enginePreview")}>
+                    {engines.previewInSite ? (
+                      <Tag className="preview-tip" color="warning">
+                        {Lang.t("preference.previewCurrent")}
+                      </Tag>
+                    ) : (
+                      <Tag className="preview-tip" color="success">
+                        {Lang.t("preference.previewOpen")}
+                      </Tag>
+                    )}
+                  </Tooltip>
+                  <InfoCell name={Lang.t("preference.engineReg")}>
+                    {engines.url}
+                  </InfoCell>
+                  <InfoCell name={Lang.t("preference.engineSuffix")}>
+                    {engines.extensions}
+                  </InfoCell>
+                </TankContentCard>
+              </div>
+            ))}
+          </InfoCell>
         </TankContentCard>
 
-        <div className="mt20" />
-        <TankTitle name={Lang.t("preference.previewConfig")} />
-
-        {this.preference.previewConfig.previewEngines.map((engines, index) => (
-          <div key={index} className="relative mb10">
-            <TankContentCard>
-              <Divider orientation="left">
-                {Lang.t("preference.engine", index + 1)}
-              </Divider>
-              <Tooltip title={Lang.t("preference.enginePreview")}>
-                {engines.previewInSite ? (
-                  <Tag className="preview-tip" color="warning">
-                    {Lang.t("preference.previewCurrent")}
-                  </Tag>
-                ) : (
-                  <Tag className="preview-tip" color="success">
-                    {Lang.t("preference.previewOpen")}
-                  </Tag>
-                )}
-              </Tooltip>
-              <InfoCell name={Lang.t("preference.engineReg")}>
-                {engines.url}
-              </InfoCell>
-              <InfoCell name={Lang.t("preference.engineSuffix")}>
-                {engines.extensions}
-              </InfoCell>
-            </TankContentCard>
-          </div>
-        ))}
       </div>
     );
   }
diff --git a/src/pages/preference/widget/PreviewEngineCell.tsx b/src/pages/preference/widget/PreviewEngineCell.tsx
index e88cf81..b4a021e 100644
--- a/src/pages/preference/widget/PreviewEngineCell.tsx
+++ b/src/pages/preference/widget/PreviewEngineCell.tsx
@@ -3,8 +3,9 @@ import "./PreviewEngineCell.less";
 import TankComponent from "../../../common/component/TankComponent";
 import PreviewEngine from "../../../common/model/preference/model/PreviewEngine";
 import { DeleteOutlined } from "@ant-design/icons";
-import { Checkbox, Form, Input, Switch, Badge, Tooltip } from "antd";
+import { Form, Input, Switch, Tooltip } from "antd";
 import Lang from "../../../common/model/global/Lang";
+import { QuestionCircleOutlined } from "@ant-design/icons";
 
 interface IProps {
   previewEngine: PreviewEngine;
@@ -17,7 +18,6 @@ interface IState {}
 export default class PreviewEngineCell extends TankComponent<IProps, IState> {
   constructor(props: IProps) {
     super(props);
-    this.state = {};
   }
 
   render() {
@@ -40,7 +40,10 @@ export default class PreviewEngineCell extends TankComponent<IProps, IState> {
           <Form.Item
             label={
               <Tooltip title={Lang.t("preference.engineRegHelper")}>
-                <Badge dot>{Lang.t("preference.engineReg")}</Badge>
+                <div>
+                  {Lang.t("preference.engineReg")}
+                  <QuestionCircleOutlined className="btn-action text-warning" />
+                </div>
               </Tooltip>
             }
             rules={[
@@ -60,7 +63,10 @@ export default class PreviewEngineCell extends TankComponent<IProps, IState> {
           <Form.Item
             label={
               <Tooltip title={Lang.t("preference.engineSuffixPlaceHolder")}>
-                <Badge dot>{Lang.t("preference.engineSuffix")}</Badge>
+                <div>
+                  {Lang.t("preference.engineSuffix")}
+                  <QuestionCircleOutlined className="btn-action text-warning" />
+                </div>
               </Tooltip>
             }
             rules={[
@@ -82,8 +88,15 @@ export default class PreviewEngineCell extends TankComponent<IProps, IState> {
 
           <Form.Item
             label={
-              <Tooltip title={`${Lang.t("preference.previewCurrent")} or ${Lang.t("preference.previewOpen")}`}>
-                <Badge dot>{Lang.t("preference.previewCurrent")}</Badge>
+              <Tooltip
+                title={`${Lang.t("preference.previewCurrent")} or ${Lang.t(
+                  "preference.previewOpen"
+                )}`}
+              >
+                <div>
+                  {Lang.t("preference.previewCurrent")}
+                  <QuestionCircleOutlined className="btn-action text-warning" />
+                </div>
               </Tooltip>
             }
           >