feat: v-card-info
This commit is contained in:
parent
134f057bb8
commit
85a5af6f06
@ -166,6 +166,7 @@ Vue.component('social-sharing', () => import(/* webpackPrefetch: true, webpackCh
|
||||
Vue.component('tags', () => import(/* webpackChunkName: "tags" */ './components/tags.vue'))
|
||||
Vue.component('unauthorized', () => import(/* webpackChunkName: "unauthorized" */ './components/unauthorized.vue'))
|
||||
Vue.component('v-card-chin', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/v-card-chin.vue'))
|
||||
Vue.component('v-card-info', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/v-card-info.vue'))
|
||||
Vue.component('welcome', () => import(/* webpackChunkName: "welcome" */ './components/welcome.vue'))
|
||||
|
||||
Vue.component('nav-footer', () => import(/* webpackChunkName: "theme" */ './themes/' + siteConfig.theme + '/components/nav-footer.vue'))
|
||||
|
@ -97,8 +97,9 @@
|
||||
v-form
|
||||
v-toolbar(color='primary', dark, dense, flat)
|
||||
v-toolbar-title.subtitle-1 {{ $t('admin:mail.dkim') }}
|
||||
v-card-info
|
||||
span {{ $t('admin:mail.dkimHint') }}
|
||||
.pa-4
|
||||
.body-2.grey--text.text--darken-2 {{ $t('admin:mail.dkimHint') }}
|
||||
v-switch(
|
||||
v-model='config.useDKIM'
|
||||
:label='$t(`admin:mail.dkimUse`)'
|
||||
|
@ -17,8 +17,9 @@
|
||||
v-card.animated.fadeInUp
|
||||
v-toolbar(color='red darken-2', dark, dense, flat)
|
||||
v-toolbar-title.subtitle-1 Security
|
||||
v-card-info(color='red')
|
||||
span Make sure to understand the implications before turning on / off a security feature.
|
||||
v-card-text
|
||||
v-alert(outlined, color='red darken-2', icon='mdi-information-outline').body-2 Make sure to understand the implications before turning on / off a security feature.
|
||||
v-switch.mt-3(
|
||||
inset
|
||||
label='Block IFrame Embedding'
|
||||
@ -106,8 +107,10 @@
|
||||
v-card.animated.fadeInUp.wait-p2s
|
||||
v-toolbar(color='primary', dark, dense, flat)
|
||||
v-toolbar-title.subtitle-1 {{ $t('admin:security.uploads') }}
|
||||
v-card-info(color='blue')
|
||||
span {{$t('admin:security.uploadsInfo')}}
|
||||
v-card-text
|
||||
v-text-field(
|
||||
v-text-field.mt-3(
|
||||
outlined
|
||||
:label='$t(`admin:security.maxUploadSize`)'
|
||||
required
|
||||
|
@ -62,12 +62,12 @@ export default {
|
||||
i18nKey: 'cache',
|
||||
isAvailable: true
|
||||
},
|
||||
{
|
||||
key: 'UtilityGraphEndpoint',
|
||||
icon: 'mdi-graphql',
|
||||
i18nKey: 'graphEndpoint',
|
||||
isAvailable: false
|
||||
},
|
||||
// {
|
||||
// key: 'UtilityGraphEndpoint',
|
||||
// icon: 'mdi-graphql',
|
||||
// i18nKey: 'graphEndpoint',
|
||||
// isAvailable: false
|
||||
// },
|
||||
{
|
||||
key: 'UtilityImportv1',
|
||||
icon: 'mdi-database-import',
|
||||
|
@ -1,14 +1,10 @@
|
||||
<template lang='pug'>
|
||||
div
|
||||
v-divider.my-0
|
||||
v-card-actions(:class='dark ? "grey darken-4-l5" : "grey lighten-4"')
|
||||
v-card-actions(:class='$vuetify.theme.dark ? "grey darken-4-l5" : "grey lighten-4"')
|
||||
slot
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
dark() { return this.$vuetify.theme.dark }
|
||||
}
|
||||
}
|
||||
export default { }
|
||||
</script>
|
||||
|
56
client/components/common/v-card-info.vue
Normal file
56
client/components/common/v-card-info.vue
Normal file
@ -0,0 +1,56 @@
|
||||
<template lang='pug'>
|
||||
.v-card-info(:class='`is-` + color')
|
||||
v-card-text(:class='colors.cls')
|
||||
v-icon(:color='colors.icon', left) {{icon}}
|
||||
slot
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: 'blue'
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: 'mdi-information-outline'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
colors () {
|
||||
switch (this.color) {
|
||||
case 'blue':
|
||||
return {
|
||||
cls: this.$vuetify.theme.dark ? 'grey darken-4-l5' : 'blue lighten-5 blue--text text--darken-3',
|
||||
icon: 'blue lighten-3'
|
||||
}
|
||||
case 'red':
|
||||
return {
|
||||
cls: this.$vuetify.theme.dark ? 'grey darken-4-l5' : 'red lighten-5 red--text text--darken-2',
|
||||
icon: 'red lighten-3'
|
||||
}
|
||||
default:
|
||||
return {
|
||||
cls: this.$vuetify.theme.dark ? 'grey darken-4-l5' : 'grey lighten-4',
|
||||
icon: 'grey darken-2'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.v-card-info {
|
||||
border-bottom: 1px solid #EEE;
|
||||
|
||||
&.is-blue {
|
||||
border-bottom-color: mc('blue', '100');
|
||||
}
|
||||
|
||||
&.is-red {
|
||||
border-bottom-color: mc('red', '100');
|
||||
}
|
||||
}
|
||||
</style>
|
Loading…
Reference in New Issue
Block a user