Browse Source

[Feature][UI Next][V1.0.0-Alpha] Unify clickable text in tables. (#8813)

3.0.0/version-upgrade
Amy0104 3 years ago committed by GitHub
parent
commit
f5711e4fcd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 6
      dolphinscheduler-ui-next/src/components/button-link/index.module.scss
  2. 51
      dolphinscheduler-ui-next/src/components/button-link/index.tsx
  3. 9
      dolphinscheduler-ui-next/src/components/modal/index.tsx
  4. 23
      dolphinscheduler-ui-next/src/utils/log.ts
  5. 12
      dolphinscheduler-ui-next/src/views/datasource/list/use-columns.ts
  6. 9
      dolphinscheduler-ui-next/src/views/projects/list/use-table.ts
  7. 10
      dolphinscheduler-ui-next/src/views/projects/task/definition/index.module.scss
  8. 15
      dolphinscheduler-ui-next/src/views/projects/task/definition/use-table.ts
  9. 8
      dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.module.scss
  10. 22
      dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.ts
  11. 8
      dolphinscheduler-ui-next/src/views/projects/workflow/instance/index.module.scss
  12. 31
      dolphinscheduler-ui-next/src/views/projects/workflow/instance/use-table.ts
  13. 14
      dolphinscheduler-ui-next/src/views/resource/file/table/use-table.ts
  14. 8
      dolphinscheduler-ui-next/src/views/resource/udf/resource/index.module.scss
  15. 25
      dolphinscheduler-ui-next/src/views/resource/udf/resource/use-table.ts
  16. 19
      dolphinscheduler-ui/src/sass/common/_table.scss

6
dolphinscheduler-ui-next/src/views/resource/file/table/index.module.scss → dolphinscheduler-ui-next/src/components/button-link/index.module.scss

@ -14,10 +14,10 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.button-link {
cursor: pointer;
color: var(--n-color-target);
.links {
color: #2080f0;
text-decoration: none;
&:hover {
text-decoration: underline;
}

51
dolphinscheduler-ui-next/src/components/button-link/index.tsx

@ -0,0 +1,51 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { defineComponent, PropType, renderSlot } from 'vue'
import { NButton } from 'naive-ui'
import styles from './index.module.scss'
const props = {
disabled: {
type: Boolean,
default: false
},
iconPlacement: {
type: String as PropType<'left' | 'right'>,
default: 'left'
}
}
const ButtonLink = defineComponent({
name: 'button-link',
props,
emits: ['click'],
setup(props, { slots, emit }) {
const onClick = (ev: MouseEvent) => {
emit('click', ev)
}
return () => (
<NButton {...props} onClick={onClick} text class={styles['button-link']}>
{{
default: renderSlot(slots, 'default'),
icon: renderSlot(slots, 'icon')
}}
</NButton>
)
}
})
export default ButtonLink

9
dolphinscheduler-ui-next/src/components/modal/index.tsx

@ -15,8 +15,9 @@
* limitations under the License.
*/
import { defineComponent, h, PropType, renderSlot, Ref } from 'vue'
import { NModal, NCard, NButton, NSpace, NIcon } from 'naive-ui'
import { defineComponent, PropType, renderSlot, Ref } from 'vue'
import { NModal, NCard, NButton, NSpace } from 'naive-ui'
import ButtonLink from '@/components/button-link'
import { useI18n } from 'vue-i18n'
import styles from './index.module.scss'
import { LinkOption } from '@/components/modal/types'
@ -108,12 +109,12 @@ const Modal = defineComponent({
.filter((item: any) => item.show)
.map((item: any) => {
return (
<NButton text onClick={item.action}>
<ButtonLink onClick={item.action}>
{{
default: () => item.text,
icon: () => item.icon()
}}
</NButton>
</ButtonLink>
)
})}
</NSpace>

23
dolphinscheduler-ui-next/src/utils/log.ts

@ -27,11 +27,20 @@ const log = {
const typeColor = (type = 'primary') => {
let color = ''
switch (type) {
case 'primary': color = '#1890ff'; break
case 'success': color = '#52c41a'; break
case 'warning': color = '#faad14'; break
case 'error': color = '#ff4d4f'; break
default:; break
case 'primary':
color = '#1890ff'
break
case 'success':
color = '#52c41a'
break
case 'warning':
color = '#faad14'
break
case 'error':
color = '#ff4d4f'
break
default:
break
}
return color
}
@ -46,7 +55,9 @@ const typeColor = (type = 'primary') => {
console.log(
`%c ${title} %c ${text} %c`,
'background:#35495E; padding: 2px ; border-radius: 3px 0 0 3px; color: #fff;',
`background:${typeColor(type)}; padding: 2px; border-radius: 0 3px 3px 0; color: #fff;`,
`background:${typeColor(
type
)}; padding: 2px; border-radius: 0 3px 3px 0; color: #fff;`,
'background:transparent'
)
}

12
dolphinscheduler-ui-next/src/views/datasource/list/use-columns.ts

@ -20,6 +20,7 @@ import { useI18n } from 'vue-i18n'
import { NPopover, NButton, NIcon, NPopconfirm, NSpace } from 'naive-ui'
import { EditOutlined, DeleteOutlined } from '@vicons/antd'
import JsonHighlight from './json-highlight'
import ButtonLink from '@/components/button-link'
import { TableColumns } from './types'
export function useColumns(onCallback: Function) {
@ -52,16 +53,9 @@ export function useColumns(onCallback: Function) {
{ trigger: 'click' },
{
trigger: () =>
h(
NButton,
{
quaternary: true,
type: 'primary'
},
{
h(ButtonLink, null, {
default: () => t('datasource.click_to_view')
}
),
}),
default: () => h(JsonHighlight, { rowData })
}
)

9
dolphinscheduler-ui-next/src/views/projects/list/use-table.ts

@ -18,6 +18,7 @@
import { h, reactive, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useAsyncState } from '@vueuse/core'
import ButtonLink from '@/components/button-link'
import { queryProjectListPaging } from '@/service/modules/projects'
import { parseTime } from '@/utils/common'
import { deleteProject } from '@/service/modules/projects'
@ -77,18 +78,14 @@ export function useTable() {
{
default: () =>
h(
'a',
ButtonLink,
{
onClick: () => {
menuStore.setProjectCode(row.code)
router.push({ path: `/projects/${row.code}` })
}
},
{
default: () => {
return row.name
}
}
{ default: () => row.name }
),
tooltip: () => row.name
}

10
dolphinscheduler-ui-next/src/views/projects/task/definition/index.module.scss

@ -42,13 +42,3 @@
justify-content: center;
}
}
.links {
color: dodgerblue;
text-decoration: none;
cursor: pointer;
&:hover {
text-decoration: underline;
}
}

15
dolphinscheduler-ui-next/src/views/projects/task/definition/use-table.ts

@ -18,6 +18,7 @@
import { useAsyncState } from '@vueuse/core'
import { reactive, h, ref } from 'vue'
import { NButton, NIcon, NPopconfirm, NSpace, NTag, NTooltip } from 'naive-ui'
import ButtonLink from '@/components/button-link'
import { useI18n } from 'vue-i18n'
import {
DeleteOutlined,
@ -30,7 +31,6 @@ import {
deleteTaskDefinition
} from '@/service/modules/task-definition'
import { useRoute } from 'vue-router'
import styles from './index.module.scss'
import type {
TaskDefinitionItem,
TaskDefinitionRes
@ -55,18 +55,11 @@ export function useTable(onEdit: Function) {
width: 400,
render: (row: IRecord) =>
h(
'a',
ButtonLink,
{
class: styles.links,
onClick: () => {
onEdit(row, true)
}
onClick: () => void onEdit(row, true)
},
{
default: () => {
return row.taskName
}
}
{ default: () => row.taskName }
)
},
{

8
dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.module.scss

@ -86,11 +86,3 @@
width: 86%;
}
}
.links {
color: #2080f0;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}

22
dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.ts

@ -29,10 +29,10 @@ import {
release
} from '@/service/modules/process-definition'
import TableAction from './components/table-action'
import { IDefinitionParam } from './types'
import styles from './index.module.scss'
import { NEllipsis, NTag } from 'naive-ui'
import ButtonLink from '@/components/button-link'
export function useTable() {
const { t } = useI18n()
@ -72,17 +72,15 @@ export function useTable() {
{
default: () =>
h(
'a',
ButtonLink,
{
href: 'javascript:',
class: styles.links,
onClick: () =>
router.push({
void router.push({
name: 'workflow-definition-detail',
params: { code: row.code }
})
},
row.name
{ default: () => row.name }
),
tooltip: () => row.name
}
@ -191,8 +189,7 @@ export function useTable() {
}
const deleteWorkflow = (row: any) => {
deleteByCode(variables.projectCode, row.code)
.then(() => {
deleteByCode(variables.projectCode, row.code).then(() => {
window.$message.success(t('project.workflow.success'))
getTableData({
pageSize: variables.pageSize,
@ -209,8 +206,7 @@ export function useTable() {
| 'OFFLINE'
| 'ONLINE'
}
release(data, variables.projectCode, row.code)
.then(() => {
release(data, variables.projectCode, row.code).then(() => {
window.$message.success(t('project.workflow.success'))
getTableData({
pageSize: variables.pageSize,
@ -225,8 +221,7 @@ export function useTable() {
codes: String(row.code),
targetProjectCode: variables.projectCode
}
batchCopyByCodes(data, variables.projectCode)
.then(() => {
batchCopyByCodes(data, variables.projectCode).then(() => {
window.$message.success(t('project.workflow.success'))
getTableData({
pageSize: variables.pageSize,
@ -267,8 +262,7 @@ export function useTable() {
const data = {
codes: String(row.code)
}
batchExportByCodes(data, variables.projectCode)
.then((res: any) => {
batchExportByCodes(data, variables.projectCode).then((res: any) => {
downloadBlob(res, fileName)
})
}

8
dolphinscheduler-ui-next/src/views/projects/workflow/instance/index.module.scss

@ -86,11 +86,3 @@
width: 86%;
}
}
.links {
color: #2080f0;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}

31
dolphinscheduler-ui-next/src/views/projects/workflow/instance/use-table.ts

@ -22,6 +22,7 @@ import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import type { Router } from 'vue-router'
import { NTooltip, NIcon, NSpin } from 'naive-ui'
import ButtonLink from '@/components/button-link'
import { RowKey } from 'naive-ui/lib/data-table/src/interface'
import {
queryProcessInstanceListPaging,
@ -74,24 +75,18 @@ export function useTable() {
title: t('project.workflow.workflow_name'),
key: 'name',
width: 200,
render: (_row: IWorkflowInstance) =>
render: (row: IWorkflowInstance) =>
h(
'a',
ButtonLink,
{
href: 'javascript:',
class: styles.links,
onClick: () =>
router.push({
void router.push({
name: 'workflow-instance-detail',
params: { id: _row.id },
query: { code: _row.processDefinitionCode }
params: { id: row.id },
query: { code: row.processDefinitionCode }
})
},
{
default: () => {
return _row.name
}
}
{ default: () => row.name }
)
},
{
@ -276,8 +271,7 @@ export function useTable() {
}
const deleteInstance = (id: number) => {
deleteProcessInstanceById(id, variables.projectCode)
.then(() => {
deleteProcessInstanceById(id, variables.projectCode).then(() => {
window.$message.success(t('project.workflow.success'))
if (variables.tableData.length === 1 && variables.page > 1) {
variables.page -= 1
@ -292,8 +286,7 @@ export function useTable() {
processInstanceIds: _.join(variables.checkedRowKeys, ',')
}
batchDeleteProcessInstanceByIds(data, variables.projectCode)
.then(() => {
batchDeleteProcessInstanceByIds(data, variables.projectCode).then(() => {
window.$message.success(t('project.workflow.success'))
if (
@ -312,8 +305,7 @@ export function useTable() {
* operating
*/
const _upExecutorsState = (param: ExecuteReq) => {
execute(param, variables.projectCode)
.then(() => {
execute(param, variables.projectCode).then(() => {
window.$message.success(t('project.workflow.success'))
getTableData()
@ -348,8 +340,7 @@ export function useTable() {
const _countDownFn = (param: ICountDownParam) => {
const { index } = param
variables.tableData[index].buttonType = param.buttonType
execute(param, variables.projectCode)
.then(() => {
execute(param, variables.projectCode).then(() => {
variables.tableData[index].disabled = true
window.$message.success(t('project.workflow.success'))
_countDown(() => {

14
dolphinscheduler-ui-next/src/views/resource/file/table/use-table.ts

@ -22,9 +22,9 @@ import { bytesToSize } from '@/utils/common'
import { useFileStore } from '@/store/file/file'
import TableAction from './table-action'
import { IRenameFile } from '../types'
import ButtonLink from '@/components/button-link'
import type { Router } from 'vue-router'
import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
import styles from './index.module.scss'
const goSubFolder = (router: Router, item: any) => {
const fileStore = useFileStore()
@ -55,17 +55,11 @@ export function useTable(renameResource: IRenameFile, updateList: () => void) {
width: 120,
render: (row) =>
h(
'a',
ButtonLink,
{
href: 'javascript:',
class: styles.links,
onClick: () => goSubFolder(router, row)
onClick: () => void goSubFolder(router, row)
},
{
default: () => {
return row.name
}
}
{ default: () => row.name }
)
},
{ title: t('resource.file.user_name'), width: 100, key: 'user_name' },

8
dolphinscheduler-ui-next/src/views/resource/udf/resource/index.module.scss

@ -70,12 +70,4 @@
align-items: center;
margin-top: 20px;
}
.links {
color: #2080f0;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}

25
dolphinscheduler-ui-next/src/views/resource/udf/resource/use-table.ts

@ -31,8 +31,8 @@ import {
deleteResource,
queryResourceById
} from '@/service/modules/resources'
import ButtonLink from '@/components/button-link'
import { IUdfResourceParam } from './types'
import styles from './index.module.scss'
const goSubFolder = (router: Router, item: any) => {
const fileStore = useFileStore()
@ -75,24 +75,16 @@ export function useTable() {
title: t('resource.udf.udf_source_name'),
key: 'alias',
render: (row) => {
if (!row.directory) {
return row.alias
} else {
return h(
'a',
return !row.directory
? row.alias
: h(
ButtonLink,
{
href: 'javascript:',
class: styles.links,
onClick: () => goSubFolder(router, row)
onClick: () => void goSubFolder(router, row)
},
{
default: () => {
return row.alias
}
}
{ default: () => row.alias }
)
}
}
},
{
title: t('resource.udf.whether_directory'),
@ -265,8 +257,7 @@ export function useTable() {
fullName
},
id
)
.then((res: any) => {
).then((res: any) => {
fileStore.setCurrentDir(res.fullName)
router.push({ name: 'resource-sub-manage', params: { id: res.id } })
})

19
dolphinscheduler-ui/src/sass/common/_table.scss

@ -97,7 +97,8 @@
&:hover {
background: #ddecff;
}
th,td{
th,
td {
&:nth-child(1) {
width: 50px;
text-align: center;
@ -126,12 +127,6 @@
}
}
}
.links {
color: #2d8cf0;
&:hover {
text-decoration: underline;
}
}
}
.table-small-model {
@ -140,7 +135,8 @@
width: 100%;
tr {
background: #fff;
th,td {
th,
td {
padding-left: 8px;
}
th {
@ -149,19 +145,16 @@
font-size: 12px;
font-weight: bold;
color: #333;
border-bottom: 2px solid #ECEDEC;
border-bottom: 2px solid #ecedec;
}
td {
height: 32px;
line-height: 32px;
border-bottom: 1px solid #ECEDEC;
border-bottom: 1px solid #ecedec;
span {
font-size: 12px;
color: #333;
}
.links {
color:#2d8cf0;
}
}
&:hover {
td {

Loading…
Cancel
Save