mirror of https://github.com/veops/cmdb.git
feat(cmdb-ui):preference citype order (#378)
This commit is contained in:
wang-liang0615
GitHub
parent
6e3f9478b3
commit
4a4b9e6ef0
|
|
@ -114,3 +114,12 @@ export function revokeRelationView(rid, data) {
|
|||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// preference citype order
|
||||
export function preferenceCitypeOrder(data) {
|
||||
return axios({
|
||||
url: `/v0.1/preference/ci_types/order`,
|
||||
method: 'POST',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
|
@ -138,7 +138,7 @@ const genCmdbRoutes = async () => {
|
|||
const [preference, relation] = await Promise.all([getPreference(), getRelationView()])
|
||||
|
||||
preference.forEach(item => {
|
||||
routes.children[2].children.unshift({
|
||||
routes.children[2].children.push({
|
||||
path: `/cmdb/instances/types/${item.id}`,
|
||||
component: () => import(`../views/ci/index`),
|
||||
name: `cmdb_${item.id}`,
|
||||
|
|
|
|||
|
|
@ -293,7 +293,6 @@
|
|||
</a-pagination>
|
||||
</div>
|
||||
<create-instance-form ref="create" @reload="reloadData" @submit="batchUpdate" />
|
||||
<!-- <EditAttrsDrawer ref="editAttrsDrawer" @refresh="refreshAfterEditAttrs" /> -->
|
||||
<!-- <batch-update-relation :typeId="typeId" ref="batchUpdateRelation" @submit="batchUpdateRelation" /> -->
|
||||
<JsonEditor ref="jsonEditor" @jsonEditorOk="jsonEditorOk" />
|
||||
<BatchDownload ref="batchDownload" @batchDownload="batchDownload" />
|
||||
|
|
|
|||
|
|
@ -1,103 +0,0 @@
|
|||
<template>
|
||||
<CustomDrawer
|
||||
:visible="visible"
|
||||
width="600"
|
||||
@close="
|
||||
() => {
|
||||
visible = false
|
||||
}
|
||||
"
|
||||
:title="$t('cmdb.ci.attributeSettings')"
|
||||
>
|
||||
<CustomTransfer
|
||||
ref="customTransfer"
|
||||
:dataSource="attrList"
|
||||
:showSearch="true"
|
||||
:listStyle="{
|
||||
width: '230px',
|
||||
height: '500px',
|
||||
}"
|
||||
:titles="[$t('cmdb.components.unselectAttributes'), $t('cmdb.components.selectAttributes')]"
|
||||
:render="item => item.title"
|
||||
:targetKeys="selectedAttrList"
|
||||
@change="handleChange"
|
||||
@selectChange="selectChange"
|
||||
>
|
||||
<span slot="notFoundContent">{{ $t('noData') }}</span>
|
||||
</CustomTransfer>
|
||||
<div class="custom-drawer-bottom-action">
|
||||
<a-button @click="handleSubmit" type="primary">{{ $t('confirm') }}</a-button>
|
||||
</div>
|
||||
</CustomDrawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { subscribeCIType, getSubscribeAttributes } from '@/modules/cmdb/api/preference'
|
||||
import { getCITypeAttributesByName } from '@/modules/cmdb/api/CITypeAttr'
|
||||
export default {
|
||||
name: 'EditAttrsDrawer',
|
||||
data() {
|
||||
return {
|
||||
attrList: [],
|
||||
typeId: null,
|
||||
visible: false,
|
||||
selectedAttrList: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open(typeId) {
|
||||
this.typeId = typeId
|
||||
this.getAttrs()
|
||||
},
|
||||
getAttrs() {
|
||||
getCITypeAttributesByName(this.typeId).then(res => {
|
||||
const attributes = res.attributes
|
||||
getSubscribeAttributes(this.typeId).then(_res => {
|
||||
const attrList = []
|
||||
const selectedAttrList = []
|
||||
const subAttributes = _res.attributes
|
||||
this.instanceSubscribed = _res.is_subscribed
|
||||
subAttributes.forEach(item => {
|
||||
selectedAttrList.push(item.id.toString())
|
||||
})
|
||||
|
||||
attributes.forEach(item => {
|
||||
const data = {
|
||||
key: item.id.toString(),
|
||||
title: item.alias || item.name,
|
||||
}
|
||||
attrList.push(data)
|
||||
})
|
||||
|
||||
this.attrList = attrList
|
||||
this.selectedAttrList = selectedAttrList
|
||||
this.visible = true
|
||||
})
|
||||
})
|
||||
},
|
||||
handleChange(targetKeys, direction, moveKeys) {
|
||||
this.selectedAttrList = targetKeys
|
||||
},
|
||||
handleSubmit() {
|
||||
const that = this
|
||||
if (this.selectedAttrList.length) {
|
||||
subscribeCIType(this.typeId, this.selectedAttrList).then(res => {
|
||||
this.$message.success(this.$t('cmdb.components.subSuccess'))
|
||||
this.visible = false
|
||||
this.$emit('refresh')
|
||||
})
|
||||
} else {
|
||||
this.$confirm({
|
||||
title: that.$t('warning'),
|
||||
content: that.$t('cmdb.ci.tips4'),
|
||||
})
|
||||
}
|
||||
},
|
||||
selectChange(sourceSelectedKeys, targetSelectedKeys) {
|
||||
this.$refs.customTransfer.dbClick(sourceSelectedKeys, targetSelectedKeys, 'title', 'key')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
|
@ -1 +0,0 @@
|
|||
editAttrsDrawer 这个文件似乎也没用了
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<span class="cmdb-preference-left-card-title">{{ $t('cmdb.preference.mySub') }}</span>
|
||||
<span
|
||||
class="cmdb-preference-left-card-content"
|
||||
><ops-icon type="cmdb-ci" :style="{ marginRight: '5px' }" />{{ $t('cmdb.menu.ciTable') }}:
|
||||
><ops-icon type="cmdb-ci" :style="{ marginRight: '5px' }"/>{{ $t('cmdb.menu.ciTable') }}:
|
||||
<a-badge
|
||||
showZero
|
||||
:count="self.instance.length"
|
||||
|
|
@ -16,11 +16,10 @@
|
|||
height: '23px',
|
||||
fontSize: '14px',
|
||||
}"
|
||||
/></span
|
||||
>
|
||||
/></span>
|
||||
<span
|
||||
class="cmdb-preference-left-card-content"
|
||||
><ops-icon type="cmdb-tree" :style="{ marginRight: '5px' }" />{{ $t('cmdb.menu.ciTree') }}:
|
||||
><ops-icon type="cmdb-tree" :style="{ marginRight: '5px' }"/>{{ $t('cmdb.menu.ciTree') }}:
|
||||
<a-badge
|
||||
showZero
|
||||
:count="self.tree.length"
|
||||
|
|
@ -31,57 +30,67 @@
|
|||
height: '23px',
|
||||
fontSize: '14px',
|
||||
}"
|
||||
/></span
|
||||
>
|
||||
/></span>
|
||||
</div>
|
||||
<div class="cmdb-preference-group" v-for="(group, index) in myPreferences" :key="group.name">
|
||||
<div class="cmdb-preference-group-title">
|
||||
<span> <ops-icon :style="{ marginRight: '10px' }" :type="group.icon" />{{ group.name }} </span>
|
||||
</div>
|
||||
<div class="cmdb-preference-group-content" v-for="ciType in group.ci_types" :key="ciType.id">
|
||||
<div
|
||||
:class="{
|
||||
'cmdb-preference-avatar': true,
|
||||
'cmdb-preference-avatar-noicon': !ciType.icon,
|
||||
'cmdb-preference-avatar-noicon-is_subscribed': !ciType.icon,
|
||||
}"
|
||||
:style="{ width: '30px', height: '30px', marginRight: '10px' }"
|
||||
>
|
||||
<template v-if="ciType.icon">
|
||||
<img
|
||||
v-if="ciType.icon.split('$$')[2]"
|
||||
:src="`/api/common-setting/v1/file/${ciType.icon.split('$$')[3]}`"
|
||||
:style="{ maxHeight: '30px', maxWidth: '30px' }"
|
||||
/>
|
||||
<ops-icon
|
||||
v-else
|
||||
:style="{
|
||||
color: ciType.icon.split('$$')[1],
|
||||
fontSize: '14px',
|
||||
}"
|
||||
:type="ciType.icon.split('$$')[0]"
|
||||
/>
|
||||
</template>
|
||||
<span v-else :style="{ fontSize: '20px' }">{{ ciType.name[0].toUpperCase() }}</span>
|
||||
<draggable
|
||||
v-model="group.ci_types"
|
||||
:animation="300"
|
||||
@change="
|
||||
(e) => {
|
||||
orderChange(e, group)
|
||||
}
|
||||
"
|
||||
>
|
||||
<div class="cmdb-preference-group-content" v-for="ciType in group.ci_types" :key="ciType.id">
|
||||
<OpsMoveIcon class="cmdb-preference-move-icon" />
|
||||
<div
|
||||
:class="{
|
||||
'cmdb-preference-avatar': true,
|
||||
'cmdb-preference-avatar-noicon': !ciType.icon,
|
||||
'cmdb-preference-avatar-noicon-is_subscribed': !ciType.icon && ciType.is_subscribed,
|
||||
}"
|
||||
:style="{ width: '30px', height: '30px', marginRight: '10px' }"
|
||||
>
|
||||
<template v-if="ciType.icon">
|
||||
<img
|
||||
v-if="ciType.icon.split('$$')[2]"
|
||||
:src="`/api/common-setting/v1/file/${ciType.icon.split('$$')[3]}`"
|
||||
:style="{ maxHeight: '30px', maxWidth: '30px' }"
|
||||
/>
|
||||
<ops-icon
|
||||
v-else
|
||||
:style="{
|
||||
color: ciType.icon.split('$$')[1],
|
||||
fontSize: '14px',
|
||||
}"
|
||||
:type="ciType.icon.split('$$')[0]"
|
||||
/>
|
||||
</template>
|
||||
<span v-else :style="{ fontSize: '20px' }">{{ ciType.name[0].toUpperCase() }}</span>
|
||||
</div>
|
||||
<span class="cmdb-preference-group-content-title">{{ ciType.alias || ciType.name }}</span>
|
||||
<span class="cmdb-preference-group-content-action">
|
||||
<a-tooltip :title="$t('cmdb.preference.cancelSub')">
|
||||
<span
|
||||
@click="unsubscribe(ciType, group.type)"
|
||||
><ops-icon type="cmdb-preference-cancel-subscribe" />
|
||||
</span>
|
||||
</a-tooltip>
|
||||
<a-divider type="vertical" :style="{ margin: '0 3px' }" />
|
||||
<a-tooltip :title="$t('cmdb.preference.editSub')">
|
||||
<span
|
||||
@click="openSubscribeSetting(ciType, `${index + 1}`)"
|
||||
><ops-icon
|
||||
type="cmdb-preference-subscribe"
|
||||
/></span>
|
||||
</a-tooltip>
|
||||
</span>
|
||||
</div>
|
||||
<span class="cmdb-preference-group-content-title">{{ ciType.alias || ciType.name }}</span>
|
||||
<span class="cmdb-preference-group-content-action">
|
||||
<a-tooltip :title="$t('cmdb.preference.cancelSub')">
|
||||
<span
|
||||
@click="unsubscribe(ciType, group.type)"
|
||||
><ops-icon type="cmdb-preference-cancel-subscribe" />
|
||||
</span>
|
||||
</a-tooltip>
|
||||
<a-divider type="vertical" :style="{ margin: '0 3px' }" />
|
||||
<a-tooltip :title="$t('cmdb.preference.editSub')">
|
||||
<span
|
||||
@click="openSubscribeSetting(ciType, `${index + 1}`)"
|
||||
><ops-icon
|
||||
type="cmdb-preference-subscribe"
|
||||
/></span>
|
||||
</a-tooltip>
|
||||
</span>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cmdb-preference-right">
|
||||
|
|
@ -124,19 +133,12 @@
|
|||
>
|
||||
</div>
|
||||
<div class="cmdb-preference-colleague">
|
||||
<template v-if="type_id2users[item.id] && type_id2users[item.id].length">
|
||||
<span
|
||||
>{{ type_id2users[item.id].length > 99 ? '99+' : type_id2users[item.id].length
|
||||
}}{{ $t('cmdb.preference.peopleSub') }}</span
|
||||
>
|
||||
<span class="cmdb-preference-colleague-name">
|
||||
<span v-for="uid in type_id2users[item.id].slice(0, 4)" :key="uid">
|
||||
{{ getNameByUid(uid) }}
|
||||
</span>
|
||||
<span class="cmdb-preference-colleague-ellipsis" v-if="type_id2users[item.id].length > 4">...</span>
|
||||
</span>
|
||||
</template>
|
||||
<span v-else :style="{ marginLeft: 'auto' }">{{ $t('cmdb.preference.noSub') }}</span>
|
||||
<span
|
||||
v-if="type_id2users[item.id] && type_id2users[item.id].length"
|
||||
>{{ type_id2users[item.id].length > 99 ? '99+' : type_id2users[item.id].length
|
||||
}}{{ $t('cmdb.preference.peopleSub') }}</span
|
||||
>
|
||||
<span v-else>{{ $t('cmdb.preference.noSub') }}</span>
|
||||
</div>
|
||||
<div class="cmdb-preference-progress">
|
||||
<div class="cmdb-preference-progress-info">
|
||||
|
|
@ -190,15 +192,23 @@ import router, { resetRouter } from '@/router'
|
|||
import store from '@/store'
|
||||
import { mapState } from 'vuex'
|
||||
import moment from 'moment'
|
||||
import draggable from 'vuedraggable'
|
||||
import { getCITypeGroups } from '../../api/ciTypeGroup'
|
||||
import { getPreference, getPreference2, subscribeCIType, subscribeTreeView } from '@/modules/cmdb/api/preference'
|
||||
import {
|
||||
getPreference,
|
||||
getPreference2,
|
||||
subscribeCIType,
|
||||
subscribeTreeView,
|
||||
preferenceCitypeOrder,
|
||||
} from '@/modules/cmdb/api/preference'
|
||||
import CollapseTransition from '@/components/CollapseTransition'
|
||||
import SubscribeSetting from '../../components/subscribeSetting/subscribeSetting'
|
||||
import { getCIAdcStatistics } from '../../api/ci'
|
||||
import { ops_move_icon as OpsMoveIcon } from '@/core/icons'
|
||||
|
||||
export default {
|
||||
name: 'Preference',
|
||||
components: { CollapseTransition, SubscribeSetting },
|
||||
components: { CollapseTransition, SubscribeSetting, draggable, OpsMoveIcon },
|
||||
data() {
|
||||
return {
|
||||
citypeData: [],
|
||||
|
|
@ -214,7 +224,6 @@ export default {
|
|||
computed: {
|
||||
...mapState({
|
||||
windowHeight: (state) => state.windowHeight,
|
||||
allUsers: (state) => state.user.allUsers,
|
||||
}),
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -277,10 +286,6 @@ export default {
|
|||
}, 300)
|
||||
}
|
||||
},
|
||||
getNameByUid(uid) {
|
||||
const _find = this.allUsers.find((item) => item.uid === uid)
|
||||
return _find?.username[0].toUpperCase() || 'A'
|
||||
},
|
||||
getsubscribedDays(item) {
|
||||
const subscribedTime = this.self.type_id2subs_time[item.id]
|
||||
moment.duration(moment().diff(moment(subscribedTime)))
|
||||
|
|
@ -351,6 +356,17 @@ export default {
|
|||
this.expandKeys.push(group.id)
|
||||
}
|
||||
},
|
||||
orderChange(e, group) {
|
||||
preferenceCitypeOrder({ type_ids: group.ci_types.map((type) => type.id), is_tree: group.type !== 'ci' })
|
||||
.then(() => {
|
||||
if (group.type === 'ci') {
|
||||
this.resetRoute()
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.getCITypes(false)
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -426,7 +442,7 @@ export default {
|
|||
align-items: center;
|
||||
height: 45px;
|
||||
padding: 0 8px;
|
||||
cursor: default;
|
||||
cursor: move;
|
||||
justify-content: flex-start;
|
||||
&:hover {
|
||||
background: #ffffff;
|
||||
|
|
@ -437,6 +453,15 @@ export default {
|
|||
white-space: nowrap;
|
||||
margin-left: auto;
|
||||
}
|
||||
.cmdb-preference-move-icon {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
.cmdb-preference-move-icon {
|
||||
width: 14px;
|
||||
height: 20px;
|
||||
cursor: move;
|
||||
visibility: hidden;
|
||||
}
|
||||
.cmdb-preference-group-content-title {
|
||||
flex: 1;
|
||||
|
|
|
|||
|
|
@ -32,32 +32,24 @@
|
|||
>
|
||||
<template #one>
|
||||
<div class="tree-views-left" :style="{ height: `${windowHeight - 115}px` }">
|
||||
<a-collapse
|
||||
:activeKey="current"
|
||||
accordion
|
||||
@change="handleChangeCi"
|
||||
:bordered="false"
|
||||
:destroyInactivePanel="true"
|
||||
<draggable
|
||||
v-model="subscribeTreeViewCiTypes"
|
||||
:animation="300"
|
||||
@change="
|
||||
(e) => {
|
||||
orderChange(e, subscribeTreeViewCiTypes)
|
||||
}
|
||||
"
|
||||
>
|
||||
<a-collapse-panel
|
||||
v-for="ciType in subscribeTreeViewCiTypes"
|
||||
:key="String(ciType.type_id)"
|
||||
:showArrow="false"
|
||||
:style="{
|
||||
borderRadius: '4px',
|
||||
marginBottom: '5px',
|
||||
border: 0,
|
||||
overflow: 'hidden',
|
||||
width: '100%',
|
||||
}"
|
||||
>
|
||||
<div v-for="ciType in subscribeTreeViewCiTypes" :key="ciType.type_id">
|
||||
<div
|
||||
slot="header"
|
||||
@click="handleChangeCi(ciType.type_id)"
|
||||
:class="{
|
||||
'custom-header': true,
|
||||
'custom-header-selected': Number(ciType.type_id) === Number(typeId),
|
||||
'custom-header-selected': Number(ciType.type_id) === Number(typeId) && !treeKeys.length,
|
||||
}"
|
||||
>
|
||||
<OpsMoveIcon class="move-icon" />
|
||||
<span class="tree-views-left-header-icon">
|
||||
<template v-if="ciType.icon">
|
||||
<img
|
||||
|
|
@ -95,6 +87,7 @@
|
|||
:tree-data="treeData"
|
||||
:load-data="onLoadData"
|
||||
:expandedKeys="expandedKeys"
|
||||
v-if="Number(ciType.type_id) === Number(typeId)"
|
||||
>
|
||||
<a-icon slot="switcherIcon" type="down" />
|
||||
<template #title="{ key: treeKey, title, isLeaf }">
|
||||
|
|
@ -107,8 +100,8 @@
|
|||
/>
|
||||
</template>
|
||||
</a-tree>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
</template>
|
||||
<template #two>
|
||||
|
|
@ -407,7 +400,13 @@
|
|||
/* eslint-disable no-useless-escape */
|
||||
import _ from 'lodash'
|
||||
import Sortable from 'sortablejs'
|
||||
import { getSubscribeTreeView, getSubscribeAttributes, subscribeTreeView } from '@/modules/cmdb/api/preference'
|
||||
import draggable from 'vuedraggable'
|
||||
import {
|
||||
getSubscribeTreeView,
|
||||
getSubscribeAttributes,
|
||||
subscribeTreeView,
|
||||
preferenceCitypeOrder,
|
||||
} from '@/modules/cmdb/api/preference'
|
||||
import { searchCI, updateCI, deleteCI } from '@/modules/cmdb/api/ci'
|
||||
import { getCITypes } from '@/modules/cmdb/api/CIType'
|
||||
import { getCITableColumns } from '../../utils/helper'
|
||||
|
|
@ -444,6 +443,7 @@ export default {
|
|||
PreferenceSearch,
|
||||
MetadataDrawer,
|
||||
OpsMoveIcon,
|
||||
draggable,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -463,7 +463,6 @@ export default {
|
|||
pageSize: 50,
|
||||
currentPage: 1,
|
||||
totalNumber: 0,
|
||||
current: '', // 当前页面的type_id
|
||||
currentAttrList: [],
|
||||
trigger: false,
|
||||
newLoad: true,
|
||||
|
|
@ -571,7 +570,6 @@ export default {
|
|||
this.subscribeTreeViewCiTypes = res
|
||||
if (this.subscribeTreeViewCiTypes.length) {
|
||||
this.typeId = this.$route.params.typeId || this.subscribeTreeViewCiTypes[0].type_id
|
||||
this.current = `${this.typeId}`
|
||||
this.selectedRowKeys = []
|
||||
this.$refs.xTable.getVxetableRef().clearCheckboxRow()
|
||||
this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
|
||||
|
|
@ -600,7 +598,6 @@ export default {
|
|||
async loadCurrentView() {
|
||||
if (this.subscribeTreeViewCiTypes.length) {
|
||||
this.typeId = this.$route.params.typeId || this.subscribeTreeViewCiTypes[0].type_id
|
||||
this.current = String(this.typeId)
|
||||
this.selectedRowKeys = []
|
||||
this.$refs.xTable.getVxetableRef().clearCheckboxRow()
|
||||
this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
|
||||
|
|
@ -746,9 +743,14 @@ export default {
|
|||
name: 'cmdb_tree_views_item',
|
||||
params: { typeId: Number(value) },
|
||||
})
|
||||
this.typeId = Number(value)
|
||||
} else {
|
||||
this.newLoad = true
|
||||
this.initPage()
|
||||
this.typeId = null
|
||||
this.$nextTick(() => {
|
||||
this.typeId = Number(value)
|
||||
this.newLoad = true
|
||||
this.initPage()
|
||||
})
|
||||
}
|
||||
this.isSetDataNodes = []
|
||||
},
|
||||
|
|
@ -1209,6 +1211,13 @@ export default {
|
|||
this.$message.error(this.$t('cmdb.ci.copyFailed'))
|
||||
})
|
||||
},
|
||||
orderChange(e, subscribeTreeViewCiTypes) {
|
||||
preferenceCitypeOrder({ type_ids: subscribeTreeViewCiTypes.map((type) => type.type_id), is_tree: true }).catch(
|
||||
() => {
|
||||
this.getTreeViews()
|
||||
}
|
||||
)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1230,65 +1239,68 @@ export default {
|
|||
&:hover {
|
||||
overflow: auto;
|
||||
}
|
||||
.ant-collapse-borderless {
|
||||
background-color: #fff;
|
||||
}
|
||||
.ant-collapse-item:has(.custom-header-selected):not(:has(.ant-tree-treenode-selected)) > .ant-collapse-header,
|
||||
.ant-collapse-item-active:not(:has(.ant-tree-treenode-selected)) > .ant-collapse-header {
|
||||
background-color: #d6e4ff;
|
||||
}
|
||||
.ant-collapse-header {
|
||||
padding: 8px 12px 4px;
|
||||
.custom-header {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 8px 0 8px 12px;
|
||||
cursor: move;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
&:hover {
|
||||
background-color: #f0f5ff;
|
||||
> .actions,
|
||||
> .move-icon {
|
||||
display: inherit;
|
||||
}
|
||||
}
|
||||
&:hover > .custom-header > .actions {
|
||||
display: inherit;
|
||||
.move-icon {
|
||||
width: 14px;
|
||||
height: 20px;
|
||||
cursor: move;
|
||||
position: absolute;
|
||||
display: none;
|
||||
left: 0;
|
||||
}
|
||||
.custom-header {
|
||||
width: 100%;
|
||||
.tree-views-left-header-icon {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.tree-views-left-header-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0px 1px 2px rgba(47, 84, 235, 0.2);
|
||||
margin-right: 6px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.tree-views-left-header-name {
|
||||
flex: 1;
|
||||
font-weight: bold;
|
||||
margin-left: 5px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.actions {
|
||||
display: none;
|
||||
margin-left: auto;
|
||||
}
|
||||
.action {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
&:hover {
|
||||
background-color: #cacaca;
|
||||
}
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0px 1px 2px rgba(47, 84, 235, 0.2);
|
||||
margin-right: 6px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.tree-views-left-header-name {
|
||||
flex: 1;
|
||||
font-weight: bold;
|
||||
margin-left: 5px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.actions {
|
||||
display: none;
|
||||
margin-left: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
.action {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
&:hover {
|
||||
background-color: #cacaca;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-collapse > .ant-collapse-item > .ant-collapse-header {
|
||||
white-space: nowrap;
|
||||
.custom-header-selected {
|
||||
background-color: #d3e3fd !important;
|
||||
}
|
||||
.ant-tree li {
|
||||
padding: 2px 0;
|
||||
|
|
|
|||
Loading…
Reference in New Issue