Skip to content

D
dataease
提交 ef979dbd authored 作者: wangjiahao's avatar wangjiahao
浏览文件
操作

refactor:增加钻取等图标样式

上级 6efe6dd1
显示空白字符变更
内嵌 并排
正在显示 包含 393 行增加 和 29 行删除
frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
浏览文件 @ ef979dbd
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
@mousedown="elementMouseDown" @mousedown="elementMouseDown"
> >
<edit-bar v-if="config === curComponent" :element="config" @showViewDetails="showViewDetails" /> <edit-bar v-if="config === curComponent" :element="config" @showViewDetails="showViewDetails" />
<!-- <view-track-bar v-if="config === curComponent" :element="config" />-->
<de-out-widget <de-out-widget
v-if="config.type==='custom'" v-if="config.type==='custom'"
:id="'component' + config.id" :id="'component' + config.id"
...@@ -37,9 +38,10 @@ import { mixins } from '@/components/canvas/utils/events' ...@@ -37,9 +38,10 @@ import { mixins } from '@/components/canvas/utils/events'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import DeOutWidget from '@/components/dataease/DeOutWidget' import DeOutWidget from '@/components/dataease/DeOutWidget'
import EditBar from '@/components/canvas/components/Editor/EditBar' import EditBar from '@/components/canvas/components/Editor/EditBar'
import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
export default { export default {
components: { DeOutWidget, EditBar }, components: { DeOutWidget, EditBar, ViewTrackBar },
mixins: [mixins], mixins: [mixins],
props: { props: {
config: { config: {
......
frontend/src/components/canvas/components/Editor/ViewTrackBar.vue 0 → 100644
浏览文件 @ ef979dbd
<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>
frontend/src/styles/deicon/demo.css
浏览文件 @ ef979dbd
...@@ -215,35 +215,35 @@ ...@@ -215,35 +215,35 @@
margin: 1em 0; margin: 1em 0;
} }
.markdown > p, .markdown>p,
.markdown > blockquote, .markdown>blockquote,
.markdown > .highlight, .markdown>.highlight,
.markdown > ol, .markdown>ol,
.markdown > ul { .markdown>ul {
width: 80%; width: 80%;
} }
.markdown ul > li { .markdown ul>li {
list-style: circle; list-style: circle;
} }
.markdown > ul li, .markdown>ul li,
.markdown blockquote ul > li { .markdown blockquote ul>li {
margin-left: 20px; margin-left: 20px;
padding-left: 4px; padding-left: 4px;
} }
.markdown > ul li p, .markdown>ul li p,
.markdown > ol li p { .markdown>ol li p {
margin: 0.6em 0; margin: 0.6em 0;
} }
.markdown ol > li { .markdown ol>li {
list-style: decimal; list-style: decimal;
} }
.markdown > ol li, .markdown>ol li,
.markdown blockquote ol > li { .markdown blockquote ol>li {
margin-left: 20px; margin-left: 20px;
padding-left: 4px; padding-left: 4px;
} }
...@@ -260,7 +260,7 @@ ...@@ -260,7 +260,7 @@
font-weight: 600; font-weight: 600;
} }
.markdown > table { .markdown>table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0px; border-spacing: 0px;
empty-cells: show; empty-cells: show;
...@@ -269,20 +269,20 @@ ...@@ -269,20 +269,20 @@
margin-bottom: 24px; margin-bottom: 24px;
} }
.markdown > table th { .markdown>table th {
white-space: nowrap; white-space: nowrap;
color: #333; color: #333;
font-weight: 600; font-weight: 600;
} }
.markdown > table th, .markdown>table th,
.markdown > table td { .markdown>table td {
border: 1px solid #e9e9e9; border: 1px solid #e9e9e9;
padding: 8px 16px; padding: 8px 16px;
text-align: left; text-align: left;
} }
.markdown > table th { .markdown>table th {
background: #F7F7F7; background: #F7F7F7;
} }
...@@ -318,8 +318,8 @@ ...@@ -318,8 +318,8 @@
display: inline-block; display: inline-block;
} }
.markdown > br, .markdown>br,
.markdown > p > br { .markdown>p>br {
clear: both; clear: both;
} }
...@@ -453,13 +453,13 @@ pre[class*="language-"] { ...@@ -453,13 +453,13 @@ pre[class*="language-"] {
overflow: auto; overflow: auto;
} }
:not(pre) > code[class*="language-"], :not(pre)>code[class*="language-"],
pre[class*="language-"] { pre[class*="language-"] {
background: #f5f2f0; background: #f5f2f0;
} }
/* Inline code */ /* Inline code */
:not(pre) > code[class*="language-"] { :not(pre)>code[class*="language-"] {
padding: .1em; padding: .1em;
border-radius: .3em; border-radius: .3em;
white-space: normal; white-space: normal;
......
frontend/src/styles/deicon/demo_index.html
浏览文件 @ ef979dbd
...@@ -54,6 +54,48 @@ ...@@ -54,6 +54,48 @@
<div class="content unicode" style="display: block;"> <div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box"> <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"> <li class="dib">
<span class="icon iconfont">&#xe612;</span> <span class="icon iconfont">&#xe612;</span>
<div class="name">edit-2</div> <div class="name">edit-2</div>
...@@ -318,9 +360,9 @@ ...@@ -318,9 +360,9 @@
<pre><code class="language-css" <pre><code class="language-css"
>@font-face { >@font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('iconfont.woff2?t=1627282547459') format('woff2'), src: url('iconfont.woff2?t=1628652979833') format('woff2'),
url('iconfont.woff?t=1627282547459') format('woff'), url('iconfont.woff?t=1628652979833') format('woff'),
url('iconfont.ttf?t=1627282547459') format('truetype'); url('iconfont.ttf?t=1628652979833') format('truetype');
} }
</code></pre> </code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
...@@ -346,6 +388,69 @@ ...@@ -346,6 +388,69 @@
<div class="content font-class"> <div class="content font-class">
<ul class="icon_lists dib-box"> <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"> <li class="dib">
<span class="icon iconfont icon-edit"></span> <span class="icon iconfont icon-edit"></span>
<div class="name"> <div class="name">
...@@ -742,6 +847,62 @@ ...@@ -742,6 +847,62 @@
<div class="content symbol"> <div class="content symbol">
<ul class="icon_lists dib-box"> <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"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-edit"></use> <use xlink:href="#icon-edit"></use>
......
frontend/src/styles/deicon/iconfont.css
浏览文件 @ ef979dbd
@font-face { @font-face {
font-family: "iconfont"; /* Project id 2459092 */ font-family: "iconfont"; /* Project id 2459092 */
src: url('iconfont.woff2?t=1627282547459') format('woff2'), src: url('iconfont.woff2?t=1628652979833') format('woff2'),
url('iconfont.woff?t=1627282547459') format('woff'), url('iconfont.woff?t=1628652979833') format('woff'),
url('iconfont.ttf?t=1627282547459') format('truetype'); url('iconfont.ttf?t=1628652979833') format('truetype');
} }
.iconfont { .iconfont {
...@@ -13,6 +13,34 @@ ...@@ -13,6 +13,34 @@
-moz-osx-font-smoothing: grayscale; -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 { .icon-edit:before {
content: "\e612"; content: "\e612";
} }
......
frontend/src/styles/deicon/iconfont.js
浏览文件 @ ef979dbd
This source diff could not be displayed because it is too large. You can view the blob instead.
frontend/src/styles/deicon/iconfont.json
浏览文件 @ ef979dbd
...@@ -5,6 +5,55 @@ ...@@ -5,6 +5,55 @@
"css_prefix_text": "icon-", "css_prefix_text": "icon-",
"description": "", "description": "",
"glyphs": [ "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", "icon_id": "3684252",
"name": "edit-2", "name": "edit-2",
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论