amass/md
1
0
Fork 0
mirror of https://github.com/doocs/md.git synced 2024-11-24 19:10:34 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feature: night theme for upload-image-dialog

Browse Source
This commit is contained in:
JimQing 2020-09-02 21:09:56 +08:00
parent eacc33c598
commit 488a259950
2 changed files with 161 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/assets/less/theme.less
View File

@ -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;

56
src/components/CodemirrorEditor/uploadImgDialog.vue
View File

@ -1,26 +1,14 @@
<template>
<el-dialog title="插入图片" class="dialog" :visible="value" @close="$emit('close')">
<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-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"
>
<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">
将文件拖到此处，或
@ -29,19 +17,16 @@
</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 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-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>
@ -53,7 +38,9 @@
</template>
<script>
import { uploadImgFile } from "../../assets/scripts/uploadImageFile";
import {
uploadImgFile
} from "../../assets/scripts/uploadImageFile";
export default {
props: {
@ -68,8 +55,7 @@ export default {
repo: "",
accessToken: "",
},
options: [
{
options: [{
value: "default",
label: "默认图床",
},
@ -137,7 +123,10 @@ export default {
validateConfig() {
switch (this.imgHost) {
case "github":
const { repo, accessToken } = this.formGitHub;
const {
repo, accessToken
} = this.formGitHub;
if (!repo || !accessToken) {
this.$message.error("未配置 GitHub 参数");
return false;
@ -156,21 +145,26 @@ export default {
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;
}
.setting-form {
width: 70%;
.el-form-item {
margin: 15px;
}
.el-form-item:last-child {
text-align: right;
}