feat: v-card-info

pull/1870/head
NGPixel 5 years ago
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>

@ -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…
Cancel
Save