tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Small style adjustments to capability modal.

This commit is contained in:
Mateus Machado Luna 2019-12-20 16:51:28 -03:00
parent 2f9cd6fad9
commit 4ad02116d4
2 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/admin/components/other/capability-edition-modal.vue
View File

@ -39,10 +39,12 @@
<template v-if="existingRoles && Object.values(existingRoles).length && capability.roles"> <template v-if="existingRoles && Object.values(existingRoles).length && capability.roles">
<b-field :addons="false"> <b-field :addons="false">
<label class="label is-inline-block"> <label class="label is-inline-block">
<i class="tainacan-icon tainacan-icon-20px tainacan-icon-alertcircle"/>
{{ $i18n.get('label_inherited_roles') }} {{ $i18n.get('label_inherited_roles') }}
<help-button <help-button
:title="$i18n.get('label_inherited_roles')" :title="$i18n.get('label_inherited_roles')"
:message="$i18n.get('info_inherited_roles')"/> :message="$i18n.get('info_inherited_roles')"
forced-color="yellow2"/>
</label> </label>
<br> <br>
<div class="roles-list"> <div class="roles-list">
@ -51,6 +53,7 @@
v-for="(role, roleIndex) of existingRoles" v-for="(role, roleIndex) of existingRoles"
:key="roleIndex" :key="roleIndex"
size="is-small" size="is-small"
class="has-text-yellow2"
:value="capability.roles[role.slug] || capability.roles_inherited[role.slug] ? true : false" :value="capability.roles[role.slug] || capability.roles_inherited[role.slug] ? true : false"
name="roles_inherited" name="roles_inherited"
disabled> disabled>
@ -129,23 +132,31 @@ export default {
min-height: 120px; min-height: 120px;
vertical-align: top; vertical-align: top;
display: flex; display: flex;
align-items: flex-end; padding-top: 24px;
&>div { &>div {
padding: 12px 24px; padding: 24px;
&:first-of-type {
flex-grow: 3;
flex-shrink: 1;
}
&:last-of-type { &:last-of-type {
flex-grow: 1;
background-color: $yellow1; background-color: $yellow1;
color: $yellow2; color: $yellow2;
.label , .label,
.control-label, .control-label,
.check { .check {
color: $yellow2; color: $yellow2 !important;
}
.roles-list {
column-count: 1;
} }
} }
} }
.roles-list { .roles-list {
height: 100%;
column-count: 2; column-count: 2;
break-inside: avoid; break-inside: avoid;

9
src/admin/components/other/help-button.vue
View File

@ -1,6 +1,8 @@
<template> <template>
<span class="help-wrapper"> <span class="help-wrapper">
<a class="help-button has-text-secondary"> <a
:class="forcedColor ? 'has-text-' + forcedColor : 'has-text-secondary'"
class="help-button">
<span class="icon is-small"> <span class="icon is-small">
<i class="tainacan-icon tainacan-icon-help" /> <i class="tainacan-icon tainacan-icon-help" />
</span> </span>
@ -21,7 +23,8 @@ export default {
name: 'HelpButton', name: 'HelpButton',
props: { props: {
title: '', title: '',
message: '' message: '',
forcedColor: ''
} }
} }
</script> </script>
@ -53,7 +56,7 @@ export default {
border: none; border: none;
display: block; display: block;
border-radius: 5px; border-radius: 5px;
min-width: 250px; min-width: 280px;
max-width: 100%; max-width: 100%;
transition: margin-bottom 0.2s ease, opacity 0.3s ease; transition: margin-bottom 0.2s ease, opacity 0.3s ease;
position: absolute; position: absolute;