diff options
Diffstat (limited to 'packages/frontend/src/components')
| -rw-r--r-- | packages/frontend/src/components/MkRolePreview.vue | 32 | ||||
| -rw-r--r-- | packages/frontend/src/components/MkUserCardMini.vue | 2 |
2 files changed, 33 insertions, 1 deletions
diff --git a/packages/frontend/src/components/MkRolePreview.vue b/packages/frontend/src/components/MkRolePreview.vue new file mode 100644 index 0000000000..ddd7dbb250 --- /dev/null +++ b/packages/frontend/src/components/MkRolePreview.vue @@ -0,0 +1,32 @@ +<template> +<MkA v-adaptive-bg :to="`/admin/roles/${role.id}`" class="_panel" :class="$style.root" tabindex="-1" :style="{ '--color': role.color }"> + <div :class="$style.title">{{ role.name }}</div> + <div :class="$style.description">{{ role.description }}</div> +</MkA> +</template> + +<script lang="ts" setup> +import { } from 'vue'; +import * as misskey from 'misskey-js'; +import * as os from '@/os'; + +const props = defineProps<{ + role: any; +}>(); +</script> + +<style lang="scss" module> +.root { + display: block; + padding: 16px 20px; + border-left: solid 6px var(--color); +} + +.title { + font-weight: bold; +} + +.description { + opacity: 0.7; +} +</style> diff --git a/packages/frontend/src/components/MkUserCardMini.vue b/packages/frontend/src/components/MkUserCardMini.vue index 1a4c494987..be8a4c408e 100644 --- a/packages/frontend/src/components/MkUserCardMini.vue +++ b/packages/frontend/src/components/MkUserCardMini.vue @@ -1,5 +1,5 @@ <template> -<div :class="[$style.root, { yellow: user.isSilenced, red: user.isSuspended, gray: false }]"> +<div v-adaptive-bg :class="[$style.root, { yellow: user.isSilenced, red: user.isSuspended, gray: false }]"> <MkAvatar class="avatar" :user="user" :disable-link="true" :show-indicator="true"/> <div class="body"> <span class="name"><MkUserName class="name" :user="user"/></span> |