Skip to content

Commit f67c89f

Browse files
AkryumAkryum
committed
feat: plugin/dep/vulnerability widgets design
1 parent 763e4e7 commit f67c89f

File tree

14 files changed

+302
-50
lines changed

14 files changed

+302
-50
lines changed

‎packages/@vue/cli-ui-addon-widgets/src/components/DependencyUpdates.vue

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,49 @@
11
<template>
22
<div class="dependency-updates">
3-
Updates
3+
<StatusWidget
4+
v-if="status"
5+
:icon="icons[status.status]"
6+
:icon-class="iconClasses[status.status]"
7+
:title="$t(`org.vue.widgets.dependency-updates.messages.${status.status}`)"
8+
:status="status"
9+
@check="checkForUpdates()"
10+
>
11+
<template slot="more-actions">
12+
<VueButton
13+
:to="{ name: 'project-dependencies' }"
14+
:label="$t('org.vue.widgets.dependency-updates.page')"
15+
icon-left="collections_bookmark"
16+
/>
17+
</template>
18+
</StatusWidget>
419
</div>
520
</template>
21+
22+
<script>
23+
import { UPDATES_ICONS, UPDATES_ICON_CLASSES } from '../util/consts'
24+
25+
import StatusWidget from './StatusWidget.vue'
26+
27+
export default {
28+
components: {
29+
StatusWidget
30+
},
31+
32+
sharedData () {
33+
return mapSharedData('org.vue.widgets.dependency-updates.', {
34+
status: 'status'
35+
})
36+
},
37+
38+
created () {
39+
this.icons = UPDATES_ICONS
40+
this.iconClasses = UPDATES_ICON_CLASSES
41+
},
42+
43+
methods: {
44+
checkForUpdates () {
45+
// TODO
46+
}
47+
}
48+
}
49+
</script>

‎packages/@vue/cli-ui-addon-widgets/src/components/KillPort.vue

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@
1111
v-if="status === 'killing'"
1212
class="icon"
1313
/>
14-
<VueIcon
14+
<ItemLogo
1515
v-else
16-
:icon="icon"
16+
:image="icon"
1717
class="icon large"
1818
/>
1919
<div class="info">
@@ -106,24 +106,28 @@ export default {
106106
justify-content space-between
107107
108108
.status
109-
color $vue-ui-color-primary
109+
h-box()
110+
align-items center
110111
.icon
111-
position relative
112-
left (-($padding-item * 2))
113-
margin-right (-($padding-item * 2) + 4px)
114-
>>> svg
115-
fill @color
112+
width 48px
113+
height @width
114+
>>> .vue-ui-icon
115+
width 32px
116+
height @width
116117
.info
117118
font-size 24px
118119
font-weight lighter
119120
121+
.status-killed
122+
.status
123+
.icon >>> svg
124+
fill $vue-ui-color-success !important
125+
120126
.status-error
121127
.status
122-
color $vue-ui-color-danger
123128
.icon >>> svg
124-
fill @color
129+
fill $vue-ui-color-danger !important
125130
126-
.status,
127131
.actions
128132
h-box()
129133
box-center()

‎packages/@vue/cli-ui-addon-widgets/src/components/PluginUpdates.vue

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,24 @@
33
<StatusWidget
44
v-if="status"
55
:icon="icons[status.status]"
6-
/>
6+
:icon-class="iconClasses[status.status]"
7+
:title="$t(`org.vue.widgets.plugin-updates.messages.${status.status}`)"
8+
:status="status"
9+
@check="checkForUpdates()"
10+
>
11+
<template slot="more-actions">
12+
<VueButton
13+
:to="{ name: 'project-plugins' }"
14+
:label="$t('org.vue.widgets.plugin-updates.page')"
15+
icon-left="extension"
16+
/>
17+
</template>
18+
</StatusWidget>
719
</div>
820
</template>
921

1022
<script>
11-
import { UPDATES_ICONS } from '../util/icons'
23+
import { UPDATES_ICONS, UPDATES_ICON_CLASSES } from '../util/consts'
1224
1325
import StatusWidget from './StatusWidget.vue'
1426
@@ -25,6 +37,13 @@ export default {
2537
2638
created () {
2739
this.icons = UPDATES_ICONS
40+
this.iconClasses = UPDATES_ICON_CLASSES
41+
},
42+
43+
methods: {
44+
checkForUpdates () {
45+
// TODO
46+
}
2847
}
2948
}
3049
</script>

‎packages/@vue/cli-ui-addon-widgets/src/components/StatusWidget.vue

Lines changed: 79 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,58 @@
11
<template>
22
<div class="status-widget">
3-
<div class="icon-wrapper">
4-
<ItemLogo
5-
:image="icon"
6-
class="icon"
7-
:class="iconClass"
8-
/>
9-
<VueIcon
10-
v-if="secondaryIcon"
11-
:icon="secondaryIcon"
12-
class="secondary-icon"
13-
/>
3+
<div class="header">
4+
<div class="icon-wrapper">
5+
<ItemLogo
6+
:image="icon"
7+
class="icon"
8+
:class="iconClass"
9+
/>
10+
</div>
11+
12+
<div class="info">
13+
<div class="title" v-html="title"/>
14+
<div
15+
v-if="status.lastUpdate"
16+
class="last-updated"
17+
>
18+
<div class="label">
19+
{{ $t('org.vue.widgets.status-widget.last-updated') }}
20+
</div>
21+
<VueTimeago
22+
:datetime="status.lastUpdate"
23+
:auto-update="60"
24+
/>
25+
<VueButton
26+
v-if="status.status !== 'loading'"
27+
v-tooltip="$t('org.vue.widgets.status-widget.check')"
28+
icon-left="cached"
29+
class="icon-button flat check-button"
30+
@click="$emit('check')"
31+
/>
32+
</div>
33+
</div>
1434
</div>
1535

16-
<div class="info">
17-
<div class="title" v-html="title"/>
18-
<div class="description" v-html="description"/>
36+
<div class="actions">
37+
<slot name="actions">
38+
<VueButton
39+
v-if="status.status === 'attention'"
40+
:label="$t('org.vue.widgets.status-widget.more-info')"
41+
icon-left="add_circle"
42+
@click="widget.openDetails()"
43+
/>
44+
<slot name="more-actions"/>
45+
</slot>
1946
</div>
2047
</div>
2148
</template>
2249

2350
<script>
2451
export default {
52+
inject: [
53+
'widget'
54+
],
55+
2556
props: {
2657
icon: {
2758
type: String,
@@ -33,18 +64,13 @@ export default {
3364
default: undefined
3465
},
3566
36-
secondaryIcon: {
37-
type: String,
38-
default: undefined
39-
},
40-
4167
title: {
4268
type: String,
4369
required: true
4470
},
4571
46-
description: {
47-
type: String,
72+
status: {
73+
type: Object,
4874
required: true
4975
}
5076
}
@@ -54,10 +80,40 @@ export default {
5480
<style lang="stylus" scoped>
5581
@import "~@vue/cli-ui/src/style/imports"
5682
57-
.status-widget
83+
.header
5884
h-box()
59-
box-center()
85+
align-items center
86+
padding $padding-item
6087
6188
.icon-wrapper
6289
position relative
90+
top -2px
91+
.icon
92+
width 48px
93+
height @width
94+
>>> .vue-ui-icon
95+
width 32px
96+
height @width
97+
98+
.title
99+
font-size 24px
100+
font-weight lighter
101+
102+
.last-updated
103+
color $color-text-light
104+
h-box()
105+
.label
106+
margin-right 4px
107+
108+
.check-button
109+
margin-left 4px
110+
position relative
111+
top -4px
112+
113+
.actions
114+
h-box()
115+
box-center()
116+
/deep/ > *
117+
&:not(:last-child)
118+
margin-right ($padding-item / 2)
63119
</style>

‎packages/@vue/cli-ui-addon-widgets/src/components/Vulnerability.vue

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<template>
2+
<div class="vulnerability">
3+
<StatusWidget
4+
v-if="status"
5+
:icon="icons[status.status]"
6+
:icon-class="iconClasses[status.status]"
7+
:title="$t(`org.vue.widgets.vulnerability.messages.${status.status}`)"
8+
:status="status"
9+
@check="checkForUpdates()"
10+
/>
11+
</div>
12+
</template>
13+
14+
<script>
15+
import { UPDATES_ICON_CLASSES } from '../util/consts'
16+
17+
import StatusWidget from './StatusWidget.vue'
18+
19+
const UPDATES_ICONS = {
20+
'ok': 'verified_user',
21+
'loading': 'hourglass_full',
22+
'attention': 'error'
23+
}
24+
25+
export default {
26+
components: {
27+
StatusWidget
28+
},
29+
30+
sharedData () {
31+
return mapSharedData('org.vue.widgets.vulnerability.', {
32+
status: 'status'
33+
})
34+
},
35+
36+
created () {
37+
this.icons = UPDATES_ICONS
38+
this.iconClasses = UPDATES_ICON_CLASSES
39+
},
40+
41+
methods: {
42+
checkForUpdates () {
43+
// TODO
44+
}
45+
}
46+
}
47+
</script>

‎packages/@vue/cli-ui-addon-widgets/src/main.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@ import Welcome from './components/Welcome.vue'
22
import KillPort from './components/KillPort.vue'
33
import PluginUpdates from './components/PluginUpdates.vue'
44
import DependencyUpdates from './components/DependencyUpdates.vue'
5+
import Vulnerability from './components/Vulnerability.vue'
56

67
ClientAddonApi.component('org.vue.widgets.components.welcome', Welcome)
78
ClientAddonApi.component('org.vue.widgets.components.kill-port', KillPort)
89
ClientAddonApi.component('org.vue.widgets.components.plugin-updates', PluginUpdates)
910
ClientAddonApi.component('org.vue.widgets.components.dependency-updates', DependencyUpdates)
11+
ClientAddonApi.component('org.vue.widgets.components.vulnerability', Vulnerability)

‎packages/@vue/cli-ui-addon-widgets/src/util/consts.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export const UPDATES_ICONS = {
2+
'ok': 'check_circle',
3+
'loading': 'hourglass_full',
4+
'attention': 'error'
5+
}
6+
7+
export const UPDATES_ICON_CLASSES = {
8+
'ok': 'success',
9+
'loading': '',
10+
'attention': 'warning'
11+
}

‎packages/@vue/cli-ui-addon-widgets/src/util/icons.js

Lines changed: 0 additions & 5 deletions
This file was deleted.

0 commit comments

Comments
 (0)