amechama/sharkey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨

Browse Source
This commit is contained in:
syuilo 2024-08-17 14:57:26 +09:00
parent 68ec7450af
commit 383c41bdb6
1 changed files with 44 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
packages/frontend/src/components/MkRolePreview.vue
View File

@ -4,25 +4,32 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<MkA v-adaptive-bg :to="forModeration ? `/admin/roles/${role.id}` : `/roles/${role.id}`" class="_panel" :class="$style.root" tabindex="-1" :style="{ '--color': role.color }"> <MkA :to="forModeration ? `/admin/roles/${role.id}` : `/roles/${role.id}`" :class="$style.root" tabindex="-1" :style="{ '--color': role.color }">
<div :class="$style.title"> <template v-if="forModeration">
<span :class="$style.icon"> <i v-if="role.isPublic" class="ti ti-world" :class="$style.icon" style="color: var(--success)"></i>
<template v-if="role.iconUrl"> <i v-else class="ti ti-lock" :class="$style.icon" style="color: var(--warn)"></i>
<img :class="$style.badge" :src="role.iconUrl"/> </template>
<div v-adaptive-bg class="_panel" :class="$style.body">
<div :class="$style.bodyTitle">
<span :class="$style.bodyIcon">
<template v-if="role.iconUrl">
<img :class="$style.bodyBadge" :src="role.iconUrl"/>
</template>
<template v-else>
<i v-if="role.isAdministrator" class="ti ti-crown" style="color: var(--accent);"></i>
<i v-else-if="role.isModerator" class="ti ti-shield" style="color: var(--accent);"></i>
<i v-else class="ti ti-user" style="opacity: 0.7;"></i>
</template>
</span>
<span :class="$style.bodyName">{{ role.name }}</span>
<template v-if="detailed">
<span v-if="role.target === 'manual'" :class="$style.bodyUsers">{{ role.usersCount }} users</span>
<span v-else-if="role.target === 'conditional'" :class="$style.bodyUsers">({{ i18n.ts._role.conditional }})</span>
</template> </template>
<template v-else> </div>
<i v-if="role.isAdministrator" class="ti ti-crown" style="color: var(--accent);"></i> <div :class="$style.bodyDescription">{{ role.description }}</div>
<i v-else-if="role.isModerator" class="ti ti-shield" style="color: var(--accent);"></i>
<i v-else class="ti ti-user" style="opacity: 0.7;"></i>
</template>
</span>
<span :class="$style.name">{{ role.name }}</span>
<template v-if="detailed">
<span v-if="role.target === 'manual'" :class="$style.users">{{ role.usersCount }} users</span>
<span v-else-if="role.target === 'conditional'" :class="$style.users">({{ i18n.ts._role.conditional }})</span>
</template>
</div> </div>
<div :class="$style.description">{{ role.description }}</div>
</MkA> </MkA>
</template> </template>
@ -42,34 +49,44 @@ const props = withDefaults(defineProps<{
<style lang="scss" module> <style lang="scss" module>
.root { .root {
display: block;
padding: 16px 20px;
border-left: solid 6px var(--color);
}
.title {
display: flex; display: flex;
align-items: center;
} }
.icon { .icon {
margin: 0 12px;
}
.body {
display: block;
padding: 16px 20px;
flex: 1;
border-left: solid 6px var(--color);
}
.bodyTitle {
display: flex;
}
.bodyIcon {
margin-right: 8px; margin-right: 8px;
} }
.badge { .bodyBadge {
height: 1.3em; height: 1.3em;
vertical-align: -20%; vertical-align: -20%;
} }
.name { .bodyName {
font-weight: bold; font-weight: bold;
} }
.users { .bodyUsers {
margin-left: auto; margin-left: auto;
opacity: 0.7; opacity: 0.7;
} }
.description { .bodyDescription {
opacity: 0.7; opacity: 0.7;
font-size: 85%; font-size: 85%;
} }