From 488a259950787fc59ca0d84a801733ecbc3c93cc Mon Sep 17 00:00:00 2001
From: JimQing <jimqing@yeah.net>
Date: Wed, 2 Sep 2020 21:09:56 +0800
Subject: [PATCH] feature: night theme for upload-image-dialog

---
 src/assets/less/theme.less                    |  11 +-
 .../CodemirrorEditor/uploadImgDialog.vue      | 308 +++++++++---------
 2 files changed, 161 insertions(+), 158 deletions(-)

diff --git a/src/assets/less/theme.less b/src/assets/less/theme.less
index e03944d..a9efb6b 100644
--- a/src/assets/less/theme.less
+++ b/src/assets/less/theme.less
@@ -65,7 +65,7 @@
             color: @nightWhiteColor;
         }
     }
-    .insert__dialog, .about__dialog, .reset__dialog {
+    .insert__dialog, .about__dialog, .reset__dialog, .upload__dialog {
         .el-dialog {
             background-color: @nightBgColor;
         }
@@ -75,6 +75,15 @@
         .el-dialog__title, .el-form-item__label {
             color: @nightWhiteColor;
         }
+        .el-tabs__item {
+            color: @nightActiveCodeMirrorColor;
+        }
+        .is-active {
+            color: @nightWhiteColor;
+        }
+        .el-upload-dragger {
+            background-color: @nightButtonBg;
+        }
     }
     /deep/ .el-icon-upload, .el-icon-download, .el-icon-refresh, .el-icon-s-grid {
         color: @nightWhiteColor;
diff --git a/src/components/CodemirrorEditor/uploadImgDialog.vue b/src/components/CodemirrorEditor/uploadImgDialog.vue
index d4cbb45..7b7583a 100644
--- a/src/components/CodemirrorEditor/uploadImgDialog.vue
+++ b/src/components/CodemirrorEditor/uploadImgDialog.vue
@@ -1,178 +1,172 @@
 <template>
-  <el-dialog title="插入图片" class="dialog" :visible="value" @close="$emit('close')">
-    <el-tabs type="card" :value="'upload'">
-      <el-tab-pane class="upload-panel" label="选择上传" name="upload">
-        <el-select v-model="imgHost" @change="changeImgHost" placeholder="请选择" size="small">
-          <el-option
-            v-for="item in options"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          ></el-option>
-        </el-select>
-        <el-upload
-          drag
-          action
-          :headers="{'Content-Type': 'multipart/form-data'}"
-          :show-file-list="false"
-          :multiple="true"
-          accept=".jpg, .jpeg, .png, .gif"
-          name="file"
-          :before-upload="beforeUpload"
-          v-loading="uploadingImg"
-        >
-          <i class="el-icon-upload"></i>
-          <div class="el-upload__text">
-            将文件拖到此处，或
-            <em>点击上传</em>
-          </div>
-        </el-upload>
-      </el-tab-pane>
-      <el-tab-pane class="github-panel" label="GitHub 图床" name="github">
-        <el-form
-          class="setting-form"
-          ref="form"
-          :model="formGitHub"
-          label-position="right"
-          label-width="100px"
-        >
-          <el-form-item label="GitHub 仓库">
-            <el-input v-model="formGitHub.repo" placeholder="如：github.com/yanglbme/resource"></el-input>
-          </el-form-item>
-          <el-form-item label="token">
-            <el-input v-model="formGitHub.accessToken" placeholder="如：cc1d0c1426d0fd0902bd2d7184b14da61b8abc46"></el-input>
-            <el-link type="primary" href="https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token" target="_blank">如何获取 GitHub token？</el-link>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" @click="onSubmit">保存配置</el-button>
-          </el-form-item>
-        </el-form>
-      </el-tab-pane>
-    </el-tabs>
-  </el-dialog>
+    <el-dialog title="插入图片" class="upload__dialog" :visible="value" @close="$emit('close')">
+        <el-tabs type="card" :value="'upload'">
+            <el-tab-pane class="upload-panel" label="选择上传" name="upload">
+                <el-select v-model="imgHost" @change="changeImgHost" placeholder="请选择" size="small">
+                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                    </el-option>
+                </el-select>
+                <el-upload drag action :headers="{'Content-Type': 'multipart/form-data'}" :show-file-list="false"
+                    :multiple="true" accept=".jpg, .jpeg, .png, .gif" name="file" :before-upload="beforeUpload"
+                    v-loading="uploadingImg">
+                    <i class="el-icon-upload"></i>
+                    <div class="el-upload__text">
+                        将文件拖到此处，或
+                        <em>点击上传</em>
+                    </div>
+                </el-upload>
+            </el-tab-pane>
+            <el-tab-pane class="github-panel" label="GitHub 图床" name="github">
+                <el-form class="setting-form" ref="form" :model="formGitHub" label-position="right" label-width="100px">
+                    <el-form-item label="GitHub 仓库">
+                        <el-input v-model="formGitHub.repo" placeholder="如：github.com/yanglbme/resource"></el-input>
+                    </el-form-item>
+                    <el-form-item label="token">
+                        <el-input v-model="formGitHub.accessToken"
+                            placeholder="如：cc1d0c1426d0fd0902bd2d7184b14da61b8abc46"></el-input>
+                        <el-link type="primary"
+                            href="https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token"
+                            target="_blank">如何获取 GitHub token？</el-link>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" @click="onSubmit">保存配置</el-button>
+                    </el-form-item>
+                </el-form>
+            </el-tab-pane>
+        </el-tabs>
+    </el-dialog>
 </template>
 
 <script>
-import { uploadImgFile } from "../../assets/scripts/uploadImageFile";
+import {
+    uploadImgFile
+} from "../../assets/scripts/uploadImageFile";
 
 export default {
-  props: {
-    value: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      formGitHub: {
-        repo: "",
-        accessToken: "",
-      },
-      options: [
-        {
-          value: "default",
-          label: "默认图床",
+    props: {
+        value: {
+            type: Boolean,
+            default: false,
         },
-        {
-          value: "github",
-          label: "GitHub",
+    },
+    data() {
+        return {
+            formGitHub: {
+                repo: "",
+                accessToken: "",
+            },
+            options: [{
+                    value: "default",
+                    label: "默认图床",
+                },
+                {
+                    value: "github",
+                    label: "GitHub",
+                },
+            ],
+            imgHost: "default",
+            uploadingImg: false,
+        };
+    },
+    created() {
+        if (localStorage.getItem("GitHubConfig")) {
+            this.formGitHub = JSON.parse(localStorage.getItem("GitHubConfig"));
+        }
+        if (localStorage.getItem("ImgHost")) {
+            this.imgHost = localStorage.getItem("ImgHost");
+        }
+    },
+    methods: {
+        changeImgHost() {
+            console.log("select img host:", this.imgHost);
+            localStorage.setItem("ImgHost", this.imgHost);
         },
-      ],
-      imgHost: "default",
-      uploadingImg: false,
-    };
-  },
-  created() {
-    if (localStorage.getItem("GitHubConfig")) {
-      this.formGitHub = JSON.parse(localStorage.getItem("GitHubConfig"));
-    }
-    if (localStorage.getItem("ImgHost")) {
-      this.imgHost = localStorage.getItem("ImgHost");
-    }
-  },
-  methods: {
-    changeImgHost() {
-      console.log("select img host:", this.imgHost);
-      localStorage.setItem("ImgHost", this.imgHost);
-    },
-    onSubmit() {
-      if (!(this.formGitHub.repo && this.formGitHub.accessToken)) {
-        const blankElement = this.formGitHub.repo ? "token" : "GitHub 仓库"
-        this.$message({
-          showClose: true,
-          message: `参数「​${blankElement}」不能为空`,
-          type: "error",
-        });
-        return;
-      }
-      localStorage.setItem("GitHubConfig", JSON.stringify(this.formGitHub));
-      console.log("submit github params:", this.formGitHub);
-      this.$message({
-        message: "保存成功",
-        type: "success",
-      });
-    },
-    // 图片上传前的处理
-    beforeUpload(file) {
-      if (!this.validateConfig()) {
-        return;
-      }
+        onSubmit() {
+            if (!(this.formGitHub.repo && this.formGitHub.accessToken)) {
+                const blankElement = this.formGitHub.repo ? "token" : "GitHub 仓库"
+                this.$message({
+                    showClose: true,
+                    message: `参数「​${blankElement}」不能为空`,
+                    type: "error",
+                });
+                return;
+            }
+            localStorage.setItem("GitHubConfig", JSON.stringify(this.formGitHub));
+            console.log("submit github params:", this.formGitHub);
+            this.$message({
+                message: "保存成功",
+                type: "success",
+            });
+        },
+        // 图片上传前的处理
+        beforeUpload(file) {
+            if (!this.validateConfig()) {
+                return;
+            }
 
-      this.uploadingImg = true;
-      uploadImgFile(file)
-        .then((res) => {
-          this.$emit("uploaded", res);
-          this.uploadingImg = false;
-        })
-        .catch((err) => {
-          this.uploadingImg = false;
-          this.$message({
-            showClose: true,
-            message: err,
-            type: "error",
-          });
-        });
-      return false;
-    },
-    validateConfig() {
-      switch (this.imgHost) {
-        case "github":
-          const { repo, accessToken } = this.formGitHub;
-          if (!repo || !accessToken) {
-            this.$message.error("未配置 GitHub 参数");
+            this.uploadingImg = true;
+            uploadImgFile(file)
+                .then((res) => {
+                    this.$emit("uploaded", res);
+                    this.uploadingImg = false;
+                })
+                .catch((err) => {
+                    this.uploadingImg = false;
+                    this.$message({
+                        showClose: true,
+                        message: err,
+                        type: "error",
+                    });
+                });
             return false;
-          }
-      }
-      return true;
+        },
+        validateConfig() {
+            switch (this.imgHost) {
+                case "github":
+                    const {
+                        repo, accessToken
+                    } = this.formGitHub;
+                    
+                    if (!repo || !accessToken) {
+                        this.$message.error("未配置 GitHub 参数");
+                        return false;
+                    }
+            }
+            return true;
+        },
     },
-  },
 };
 </script>
 
 <style lang="less" scoped>
 .upload-panel {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  .el-select {
-    align-self: flex-end;
-    margin: 0 67.75px 20px;
-    width: 100px;
-  }
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+
+    .el-select {
+        align-self: flex-end;
+        margin: 0 67.75px 20px;
+        width: 100px;
+    }
 }
+
 .github-panel {
-  display: flex;
-  justify-content: center;
+    display: flex;
+    justify-content: center;
 }
+
 .setting-form {
-  width: 70%;
-  .el-form-item {
-    margin: 15px;
-  }
-  .el-form-item:last-child {
-    text-align: right;
-  }
+    width: 70%;
+
+    .el-form-item {
+        margin: 15px;
+    }
+
+    .el-form-item:last-child {
+        text-align: right;
+    }
 }
-</style>
\ No newline at end of file
+</style>