center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

style: 画布工具栏样式修改

Browse Source
This commit is contained in:
wangjiahao 2022-06-15 11:23:56 +08:00
parent dcc6730f06
commit bbab167253
12 changed files with 108 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/src/components/canvas/components/Toolbar.vue
View File

@ -29,7 +29,7 @@
<div v-show="!editControlButton" class="toolbar">
<div class="panel-info-area">
<el-tooltip :content="$t('panel.back') ">
<i class="el-icon-back icon-back" @click="closePanelEdit" />
<span class="icon iconfont icon-jiantou insert" @click="closePanelEdit" />
</el-tooltip>
<span class="text">
{{ panelInfo.name }}
@ -48,9 +48,7 @@
<span class="button_self">
<el-dropdown :hide-on-click="false" trigger="click" placement="bottom-start" size="mini">
<el-button size="mini">
<span class="icon iconfont icon-gengduo" />
</el-button>
<span class="icon iconfont icon-gengduo insert de-icon-base"><span class="icon-font-margin">{{ $t('panel.more') }}</span></span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>
<el-dropdown placement="right-start" size="mini" style="width: 100%">
@ -59,7 +57,7 @@
class="icon iconfont"
:class="[canvasStyleData.auxiliaryMatrix?'icon-shujujuzhen':'icon-xuanfuanniu']"
/>
<span style="font-size: 12px">{{ $t('panel.new_element_distribution') }}</span>
<span class="icon-font-margin" style="font-size: 12px">{{ $t('panel.new_element_distribution') }}</span>
<i class="el-icon-arrow-right el-icon--right" />
</span>
<el-dropdown-menu slot="dropdown">
@ -76,24 +74,22 @@
</el-dropdown-item>
<el-dropdown-item>
<span class="icon iconfont-tb" :class="[canvasStyleData.aidedDesign.showGrid?'icon-wangge-open':'icon-wangge-close']" />
{{ $t('panel.aided_grid') }}
<span class="icon-font-margin">{{ $t('panel.aided_grid') }}</span>
<el-switch v-model="showGridSwitch" size="mini" @change="showGridChange" />
</el-dropdown-item>
<el-dropdown-item @click.native="openOuterParamsSet">
<span class="icon iconfont-tb icon-canshu" />{{ $t('panel.params_setting') }}
<span class="icon iconfont-tb icon-canshu" />
<span class="icon-font-margin">{{ $t('panel.params_setting') }}</span>
</el-dropdown-item>
<el-dropdown-item @click.native="clearCanvas">
<span class="icon iconfont-tb icon-qingkong" />{{ $t('panel.clean_canvas') }}
<span class="icon iconfont-tb icon-qingkong" />
<span class="icon-font-margin">{{ $t('panel.clean_canvas') }}</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
<el-button size="mini" class="el-icon-magic-stick el-icon--left" @click="showPanel">
{{ $t('panel.panel_style') }}
</el-button>
<el-button size="mini" @click="batchOption"><span class="icon iconfont-tb icon-piliang-copy el-icon--left" />{{
$t('panel.batch_opt') }}
</el-button>
<span class="icon iconfont icon-magic-line insert" @click="showPanel"><span class="icon-font-margin">{{ $t('panel.panel_style') }}</span></span>
<span class="icon iconfont icon-piliang-copy insert" @click="batchOption"><span class="icon-font-margin">{{ $t('panel.batch_opt') }}</span></span>
<span style="float: right;margin-left: 10px">
<el-button size="mini" type="primary" :disabled="saveButtonDisabled" @click="save(false)">
{{ $t('commons.save') }}
@ -502,8 +498,8 @@ export default {
<style lang="scss" scoped>
.toolbar {
float: right;
height: 35px;
line-height: 32px;
height: 56px;
line-height: 56px;
min-width: 400px;
.canvas-config {
@ -526,11 +522,12 @@ export default {
.insert {
display: inline-block;
font-weight: 400 !important;
font-size: 14px !important;
font-family: PingFang SC;
line-height: 1;
white-space: nowrap;
cursor: pointer;
/*background: #FFF;*/
/*border: 1px solid #DCDFE6;*/
color: var(--TextPrimary, #606266);
-webkit-appearance: none;
text-align: center;
@ -538,11 +535,9 @@ export default {
outline: 0;
margin: 0;
transition: .1s;
font-weight: 500;
padding: 5px 5px;
font-size: 16px !important;
border-radius: 3px;
margin-left: 10px;
margin-left: 5px;
&:active {
color: #000;
@ -589,7 +584,7 @@ export default {
.switch-position {
position: absolute;
top: 3px;
top: 13px;
right: 50%;
width: 100px;
}
@ -619,8 +614,9 @@ export default {
left: 10px;
.text {
margin-left: 20px;
margin-left: 15px;
font-size: 16px;
font-weight: 500;
color: var(--TextPrimary, #606266);
}
;
@ -633,4 +629,8 @@ export default {
}
.icon-font-margin{
margin-left: 2px;
}
</style>

1
frontend/src/lang/en.js
View File

@ -1458,6 +1458,7 @@ export default {
sure_bt: 'Confirm'
},
panel: {
more: 'More',
level: 'Level',
enlarge: 'Enlarge',
panel_style: 'Panel Style',

1
frontend/src/lang/tw.js
View File

@ -1459,6 +1459,7 @@ export default {
sure_bt: '確定'
},
panel: {
more: '更多',
level: '层级',
enlarge: '放大',
panel_style: '仪表板样式',

1
frontend/src/lang/zh.js
View File

@ -1466,6 +1466,7 @@ export default {
sure_bt: '确定'
},
panel: {
more: '更多',
level: '层级',
enlarge: '放大',
panel_style: '仪表板样式',

52
frontend/src/styles/deicon/demo_index.html
View File

@ -54,6 +54,18 @@
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe622;</span>
<div class="name">箭头</div>
<div class="code-name">&amp;#xe622;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe63a;</span>
<div class="name">magic-line</div>
<div class="code-name">&amp;#xe63a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60c;</span>
<div class="name">更多</div>
@ -630,9 +642,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1655095335340') format('woff2'),
url('iconfont.woff?t=1655095335340') format('woff'),
url('iconfont.ttf?t=1655095335340') format('truetype');
src: url('iconfont.woff2?t=1655262548061') format('woff2'),
url('iconfont.woff?t=1655262548061') format('woff'),
url('iconfont.ttf?t=1655262548061') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -658,6 +670,24 @@
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-jiantou"></span>
<div class="name">
箭头
</div>
<div class="code-name">.icon-jiantou
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-magic-line"></span>
<div class="name">
magic-line
</div>
<div class="code-name">.icon-magic-line
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gengduo"></span>
<div class="name">
@ -1522,6 +1552,22 @@
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiantou"></use>
</svg>
<div class="name">箭头</div>
<div class="code-name">#icon-jiantou</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-magic-line"></use>
</svg>
<div class="name">magic-line</div>
<div class="code-name">#icon-magic-line</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-gengduo"></use>

14
frontend/src/styles/deicon/iconfont.css
View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 2459092 */
src: url('iconfont.woff2?t=1655095335340') format('woff2'),
url('iconfont.woff?t=1655095335340') format('woff'),
url('iconfont.ttf?t=1655095335340') format('truetype');
src: url('iconfont.woff2?t=1655262548061') format('woff2'),
url('iconfont.woff?t=1655262548061') format('woff'),
url('iconfont.ttf?t=1655262548061') format('truetype');
}
.iconfont {
@ -13,6 +13,14 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-jiantou:before {
content: "\e622";
}
.icon-magic-line:before {
content: "\e63a";
}
.icon-gengduo:before {
content: "\e60c";
}

2
frontend/src/styles/deicon/iconfont.js
View File

File diff suppressed because one or more lines are too long

14
frontend/src/styles/deicon/iconfont.json
View File

@ -5,6 +5,20 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "1115048",
"name": "箭头",
"font_class": "jiantou",
"unicode": "e622",
"unicode_decimal": 58914
},
{
"icon_id": "10931817",
"name": "magic-line",
"font_class": "magic-line",
"unicode": "e63a",
"unicode_decimal": 58938
},
{
"icon_id": "77822",
"name": "更多",

BIN
frontend/src/styles/deicon/iconfont.ttf
View File

Binary file not shown.

BIN
frontend/src/styles/deicon/iconfont.woff
View File

Binary file not shown.

BIN
frontend/src/styles/deicon/iconfont.woff2
View File

Binary file not shown.

14
frontend/src/views/panel/edit/index.vue
View File

@ -729,7 +729,7 @@ export default {
const parent = evt.target.closest('.button-div-class')
const self = evt.target.closest('.el-drawer__wrapper')
// 点击样式按钮 排除
const stick = evt.target.closest('.el-icon-magic-stick')
const stick = evt.target.closest('.icon-magic-line')
const xuanfuanniu = evt.target.closest('.icon-xuanfuanniu')
const shujujuzhen = evt.target.closest('.icon-shujujuzhen')
const suffix = evt.target.closest('.el-input__suffix')
@ -1127,18 +1127,18 @@ export default {
<style scoped>
.ms-aside-container {
height: calc(100vh - 35px);
height: calc(100vh - 56px);
max-width: 60px;
border: none;
width: 60px;
}
.ms-main-container {
height: calc(100vh - 35px);
height: calc(100vh - 56px);
}
.de-header {
height: 35px !important;
height: 56px !important;
border-bottom: 1px solid #E6E6E6;
background-color: var(--SiderBG, white);
}
@ -1169,7 +1169,7 @@ export default {
.leftPanel {
width: 100%;
max-width: 300px;
height: calc(100vh - 35px);
height: calc(100vh - 56px);
position: fixed;
top: 91px;
left: 60px;
@ -1265,14 +1265,14 @@ export default {
.this_canvas {
width: 100%;
height: calc(100vh - 35px);
height: calc(100vh - 56px);
overflow-x: hidden;
overflow-y: auto;
background-size: 100% 100% !important;
}
.el-main {
height: calc(100vh - 35px);
height: calc(100vh - 56px);
padding: 0 !important;
overflow: auto;
position: relative;