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

refactor:增加钻取等图标样式

Browse Source
This commit is contained in:
wangjiahao 2021-08-11 14:08:46 +08:00
parent 6efe6dd11f
commit ef979dbd72
10 changed files with 397 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
View File

@ -7,6 +7,7 @@
@mousedown="elementMouseDown"
>
<edit-bar v-if="config === curComponent" :element="config" @showViewDetails="showViewDetails" />
<!-- <view-track-bar v-if="config === curComponent" :element="config" />-->
<de-out-widget
v-if="config.type==='custom'"
:id="'component' + config.id"
@ -37,9 +38,10 @@ import { mixins } from '@/components/canvas/utils/events'
import { mapState } from 'vuex'
import DeOutWidget from '@/components/dataease/DeOutWidget'
import EditBar from '@/components/canvas/components/Editor/EditBar'
import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
export default {
components: { DeOutWidget, EditBar },
components: { DeOutWidget, EditBar, ViewTrackBar },
mixins: [mixins],
props: {
config: {

124
frontend/src/components/canvas/components/Editor/ViewTrackBar.vue Normal file
View File

@ -0,0 +1,124 @@
<template>
<div class="bar-main-left">
<div>
<!--上钻-->
<i
class="icon iconfont "
:class="[
{
['icon-shangzuan i-active']: drillUpStatus ,
['icon-quxiaoshangzuan i-on-active']: !drillUpStatus
}
]"
@click.stop="drillUpChange"
/>
<!--下钻-->
<i
class="icon iconfont "
:class="[
{
['icon-xiazuan i-active']: drillDownStatus ,
['icon-quxiaoxiazuan i-on-active']: !drillDownStatus
}
]"
@click.stop="drillDownChange"
/>
<!--上卷-->
<i
class="icon iconfont "
:class="[
{
['icon-linkage i-active']: linkageStatus ,
['icon-quxiaoliandong i-on-active']: !linkageStatus
}
]"
@click.stop="linkageChange"
/>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
props: {
element: {
type: Object,
required: true
},
active: {
type: Boolean,
required: false,
default: false
},
// 当前模式 preview 预览 edit 编辑，
activeModel: {
type: String,
required: false,
default: 'preview'
}
},
data() {
return {
drillUpStatus: false,
drillDownStatus: false,
linkageStatus: false
}
},
computed: {
linkageInfo() {
return this.targetLinkageInfo[this.element.propValue.viewId]
},
...mapState([
'menuTop',
'menuLeft',
'menuShow',
'curComponent',
'componentData',
'canvasStyleData',
'linkageSettingStatus',
'targetLinkageInfo',
'curLinkageView'
])
},
methods: {
drillUpChange() {
this.drillUpStatus = !this.drillUpStatus
},
drillDownChange() {
this.drillDownStatus = !this.drillDownStatus
},
linkageChange() {
this.linkageStatus = !this.linkageStatus
}
}
}
</script>
<style lang="scss" scoped>
.bar-main-left{
position: absolute;
left: 0px;
float:right;
z-index: 2;
border-radius:2px;
padding-left: 5px;
padding-right: 2px;
cursor:pointer!important;
background-color: #0a7be0;
}
.i-on-active{
color: whitesmoke;
float: right;
margin-right: 3px;
}
.i-active{
color: yellow;
float: right;
margin-right: 3px;
}
</style>

50
frontend/src/styles/deicon/demo.css
View File

@ -3,9 +3,9 @@
font-family: "iconfont logo";
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
}
.logo {
@ -215,35 +215,35 @@
margin: 1em 0;
}
.markdown > p,
.markdown > blockquote,
.markdown > .highlight,
.markdown > ol,
.markdown > ul {
.markdown>p,
.markdown>blockquote,
.markdown>.highlight,
.markdown>ol,
.markdown>ul {
width: 80%;
}
.markdown ul > li {
.markdown ul>li {
list-style: circle;
}
.markdown > ul li,
.markdown blockquote ul > li {
.markdown>ul li,
.markdown blockquote ul>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown > ul li p,
.markdown > ol li p {
.markdown>ul li p,
.markdown>ol li p {
margin: 0.6em 0;
}
.markdown ol > li {
.markdown ol>li {
list-style: decimal;
}
.markdown > ol li,
.markdown blockquote ol > li {
.markdown>ol li,
.markdown blockquote ol>li {
margin-left: 20px;
padding-left: 4px;
}
@ -260,7 +260,7 @@
font-weight: 600;
}
.markdown > table {
.markdown>table {
border-collapse: collapse;
border-spacing: 0px;
empty-cells: show;
@ -269,20 +269,20 @@
margin-bottom: 24px;
}
.markdown > table th {
.markdown>table th {
white-space: nowrap;
color: #333;
font-weight: 600;
}
.markdown > table th,
.markdown > table td {
.markdown>table th,
.markdown>table td {
border: 1px solid #e9e9e9;
padding: 8px 16px;
text-align: left;
}
.markdown > table th {
.markdown>table th {
background: #F7F7F7;
}
@ -318,8 +318,8 @@
display: inline-block;
}
.markdown > br,
.markdown > p > br {
.markdown>br,
.markdown>p>br {
clear: both;
}
@ -453,13 +453,13 @@ pre[class*="language-"] {
overflow: auto;
}
:not(pre) > code[class*="language-"],
:not(pre)>code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
:not(pre)>code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;

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

@ -54,6 +54,48 @@
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe973;</span>
<div class="name">线性图标-取消下钻</div>
<div class="code-name">&amp;#xe973;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6ed;</span>
<div class="name">线性图标-取消下钻</div>
<div class="code-name">&amp;#xe6ed;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6f7;</span>
<div class="name">联动</div>
<div class="code-name">&amp;#xe6f7;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe613;</span>
<div class="name">下钻</div>
<div class="code-name">&amp;#xe613;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61f;</span>
<div class="name">上钻</div>
<div class="code-name">&amp;#xe61f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe637;</span>
<div class="name">取消联动</div>
<div class="code-name">&amp;#xe637;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe604;</span>
<div class="name">edit-2</div>
<div class="code-name">&amp;#xe604;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe612;</span>
<div class="name">edit-2</div>
@ -318,9 +360,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1627282547459') format('woff2'),
url('iconfont.woff?t=1627282547459') format('woff'),
url('iconfont.ttf?t=1627282547459') format('truetype');
src: url('iconfont.woff2?t=1628652979833') format('woff2'),
url('iconfont.woff?t=1628652979833') format('woff'),
url('iconfont.ttf?t=1628652979833') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -346,6 +388,69 @@
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-quxiaoshangzuan"></span>
<div class="name">
线性图标-取消下钻
</div>
<div class="code-name">.icon-quxiaoshangzuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-quxiaoxiazuan"></span>
<div class="name">
线性图标-取消下钻
</div>
<div class="code-name">.icon-quxiaoxiazuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-linkage"></span>
<div class="name">
联动
</div>
<div class="code-name">.icon-linkage
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xiazuan"></span>
<div class="name">
下钻
</div>
<div class="code-name">.icon-xiazuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shangzuan"></span>
<div class="name">
上钻
</div>
<div class="code-name">.icon-shangzuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-quxiaoliandong"></span>
<div class="name">
取消联动
</div>
<div class="code-name">.icon-quxiaoliandong
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-edit-outline"></span>
<div class="name">
edit-2
</div>
<div class="code-name">.icon-edit-outline
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-edit"></span>
<div class="name">
@ -742,6 +847,62 @@
<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-quxiaoshangzuan"></use>
</svg>
<div class="name">线性图标-取消下钻</div>
<div class="code-name">#icon-quxiaoshangzuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-quxiaoxiazuan"></use>
</svg>
<div class="name">线性图标-取消下钻</div>
<div class="code-name">#icon-quxiaoxiazuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-linkage"></use>
</svg>
<div class="name">联动</div>
<div class="code-name">#icon-linkage</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xiazuan"></use>
</svg>
<div class="name">下钻</div>
<div class="code-name">#icon-xiazuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shangzuan"></use>
</svg>
<div class="name">上钻</div>
<div class="code-name">#icon-shangzuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-quxiaoliandong"></use>
</svg>
<div class="name">取消联动</div>
<div class="code-name">#icon-quxiaoliandong</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-edit-outline"></use>
</svg>
<div class="name">edit-2</div>
<div class="code-name">#icon-edit-outline</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-edit"></use>

34
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=1627282547459') format('woff2'),
url('iconfont.woff?t=1627282547459') format('woff'),
url('iconfont.ttf?t=1627282547459') format('truetype');
src: url('iconfont.woff2?t=1628652979833') format('woff2'),
url('iconfont.woff?t=1628652979833') format('woff'),
url('iconfont.ttf?t=1628652979833') format('truetype');
}
.iconfont {
@ -13,6 +13,34 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-quxiaoshangzuan:before {
content: "\e973";
}
.icon-quxiaoxiazuan:before {
content: "\e6ed";
}
.icon-linkage:before {
content: "\e6f7";
}
.icon-xiazuan:before {
content: "\e613";
}
.icon-shangzuan:before {
content: "\e61f";
}
.icon-quxiaoliandong:before {
content: "\e637";
}
.icon-edit-outline:before {
content: "\e604";
}
.icon-edit:before {
content: "\e612";
}

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

File diff suppressed because one or more lines are too long

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

@ -5,6 +5,55 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "23496077",
"name": "线性图标-取消下钻",
"font_class": "quxiaoshangzuan",
"unicode": "e973",
"unicode_decimal": 59763
},
{
"icon_id": "23005499",
"name": "线性图标-取消下钻",
"font_class": "quxiaoxiazuan",
"unicode": "e6ed",
"unicode_decimal": 59117
},
{
"icon_id": "8657066",
"name": "联动",
"font_class": "linkage",
"unicode": "e6f7",
"unicode_decimal": 59127
},
{
"icon_id": "12725578",
"name": "下钻",
"font_class": "xiazuan",
"unicode": "e613",
"unicode_decimal": 58899
},
{
"icon_id": "13006352",
"name": "上钻",
"font_class": "shangzuan",
"unicode": "e61f",
"unicode_decimal": 58911
},
{
"icon_id": "22983243",
"name": "取消联动",
"font_class": "quxiaoliandong",
"unicode": "e637",
"unicode_decimal": 58935
},
{
"icon_id": "5384479",
"name": "edit-2",
"font_class": "edit-outline",
"unicode": "e604",
"unicode_decimal": 58884
},
{
"icon_id": "3684252",
"name": "edit-2",

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.