Separates inherited roles and editable roles on capabilities list.
This commit is contained in:
Mateus Machado Luna
parent
ca612638f4
commit
6c2c2fd5f1
|
|
@ -14,7 +14,7 @@
|
||||||
</th>
|
</th>
|
||||||
<!-- Capability date -->
|
<!-- Capability date -->
|
||||||
<th>
|
<th>
|
||||||
<div class="th-wrap">{{ $i18n.get('label_associated_roles') }}</div>
|
<div class="th-wrap">{{ $i18n.get('label_user_roles') }}</div>
|
||||||
</th>
|
</th>
|
||||||
<!-- Actions -->
|
<!-- Actions -->
|
||||||
<th class="actions-header">
|
<th class="actions-header">
|
||||||
|
|
@ -37,7 +37,7 @@
|
||||||
v-tooltip="{
|
v-tooltip="{
|
||||||
delay: {
|
delay: {
|
||||||
show: 500,
|
show: 500,
|
||||||
hide: 300,
|
hide: 120,
|
||||||
},
|
},
|
||||||
content: capability.display_name,
|
content: capability.display_name,
|
||||||
autoHide: false,
|
autoHide: false,
|
||||||
|
|
@ -56,7 +56,7 @@
|
||||||
v-tooltip="{
|
v-tooltip="{
|
||||||
delay: {
|
delay: {
|
||||||
show: 500,
|
show: 500,
|
||||||
hide: 300,
|
hide: 120,
|
||||||
},
|
},
|
||||||
content: capability.description,
|
content: capability.description,
|
||||||
autoHide: false,
|
autoHide: false,
|
||||||
|
|
@ -78,7 +78,7 @@
|
||||||
v-tooltip="{
|
v-tooltip="{
|
||||||
delay: {
|
delay: {
|
||||||
show: 500,
|
show: 500,
|
||||||
hide: 300,
|
hide: 120,
|
||||||
},
|
},
|
||||||
content: props['complete-roles-list'],
|
content: props['complete-roles-list'],
|
||||||
autoHide: false,
|
autoHide: false,
|
||||||
|
|
@ -116,38 +116,69 @@
|
||||||
<tr
|
<tr
|
||||||
:key="index"
|
:key="index"
|
||||||
class="capabilities-edit-form">
|
class="capabilities-edit-form">
|
||||||
<transition name="form-collapse">
|
<transition name="form-capabilities">
|
||||||
<td
|
<td
|
||||||
v-if="index == editingCapability"
|
v-if="index == editingCapability"
|
||||||
class="tainacan-form"
|
class="tainacan-form"
|
||||||
colspan="4">
|
colspan="4">
|
||||||
<template v-if="existingRoles && Object.values(existingRoles).length && capability.roles">
|
<div>
|
||||||
<b-field :addons="false">
|
<template v-if="existingRoles && Object.values(existingRoles).length && capability.roles">
|
||||||
<label class="label is-inline-block">
|
<b-field :addons="false">
|
||||||
{{ $i18n.get('label_associated_roles') }}
|
<label class="label is-inline-block">
|
||||||
<help-button
|
{{ $i18n.get('label_inherited_roles') }}
|
||||||
:title="$i18n.get('label_associated_roles')"
|
<help-button
|
||||||
:message="$i18n.get('info_associated_roles')"/>
|
:title="$i18n.get('label_inherited_roles')"
|
||||||
</label>
|
:message="$i18n.get('info_inherited_roles')"/>
|
||||||
<div class="roles-list">
|
</label>
|
||||||
<b-checkbox
|
<div class="roles-list">
|
||||||
v-for="(role, roleIndex) of existingRoles"
|
<b-checkbox
|
||||||
:key="roleIndex"
|
v-if="capability.roles_inherited[role.slug]"
|
||||||
size="is-small"
|
v-for="(role, roleIndex) of existingRoles"
|
||||||
:value="capability.roles[role.slug] || capability.roles_inherited[role.slug] ? true : false"
|
:key="roleIndex"
|
||||||
@input="($event) => updateRole(role.slug, index, $event)"
|
size="is-small"
|
||||||
name="roles"
|
:value="capability.roles[role.slug] || capability.roles_inherited[role.slug] ? true : false"
|
||||||
:disabled="capability.roles_inherited[role.slug]">
|
name="roles_inherited"
|
||||||
{{ role.name }}
|
disabled>
|
||||||
</b-checkbox>
|
{{ role.name }}
|
||||||
</div>
|
</b-checkbox>
|
||||||
</b-field>
|
</div>
|
||||||
</template>
|
</b-field>
|
||||||
<p
|
</template>
|
||||||
v-else
|
<p
|
||||||
class="is-italic has-text-gray">
|
v-else
|
||||||
{{ $i18n.get('info_no_role_associated_capability') }}
|
class="is-italic has-text-gray">
|
||||||
</p>
|
{{ $i18n.get('info_no_role_associated_capability') }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<template v-if="existingRoles && Object.values(existingRoles).length && capability.roles">
|
||||||
|
<b-field :addons="false">
|
||||||
|
<label class="label is-inline-block">
|
||||||
|
{{ $i18n.get('label_associated_roles') }}
|
||||||
|
<help-button
|
||||||
|
:title="$i18n.get('label_associated_roles')"
|
||||||
|
:message="$i18n.get('info_associated_roles')"/>
|
||||||
|
</label>
|
||||||
|
<div class="roles-list">
|
||||||
|
<b-checkbox
|
||||||
|
v-if="!capability.roles_inherited[role.slug]"
|
||||||
|
v-for="(role, roleIndex) of existingRoles"
|
||||||
|
:key="roleIndex"
|
||||||
|
size="is-small"
|
||||||
|
:value="capability.roles[role.slug] || capability.roles_inherited[role.slug] ? true : false"
|
||||||
|
@input="($event) => updateRole(role.slug, index, $event)"
|
||||||
|
name="roles">
|
||||||
|
{{ role.name }}
|
||||||
|
</b-checkbox>
|
||||||
|
</div>
|
||||||
|
</b-field>
|
||||||
|
</template>
|
||||||
|
<p
|
||||||
|
v-else
|
||||||
|
class="is-italic has-text-gray">
|
||||||
|
{{ $i18n.get('info_no_role_associated_capability') }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</transition>
|
</transition>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
@ -232,28 +263,45 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|
||||||
.table-container .table-wrapper table.tainacan-table tbody tr {
|
.table-container .table-wrapper table.tainacan-table tbody tr {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
|
|
||||||
&.capabilities-edit-form td{
|
&.capabilities-edit-form td {
|
||||||
min-height: 300px;
|
min-height: 120px;
|
||||||
height: 300px;
|
padding: 12px 24px;
|
||||||
padding: 16px 24px;
|
|
||||||
background-color: #f6f6f6;
|
background-color: #f6f6f6;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
|
|
||||||
|
&>div {
|
||||||
|
display: table-cell;
|
||||||
|
padding: 12px 24px;
|
||||||
|
|
||||||
|
&:last-of-type {
|
||||||
|
border-left: 1px solid #cbcbcb;
|
||||||
|
}
|
||||||
|
}
|
||||||
.roles-list {
|
.roles-list {
|
||||||
margin-top: 12px;
|
|
||||||
column-count: 3;
|
column-count: 3;
|
||||||
break-inside: avoid;
|
break-inside: avoid;
|
||||||
|
|
||||||
label {
|
label {
|
||||||
margin-left: 12px;
|
margin-left: 12px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 1280px) {
|
||||||
|
.roles-list {
|
||||||
|
column-count: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.roles-list {
|
||||||
column-count: 1;
|
column-count: 1;
|
||||||
}
|
}
|
||||||
|
&>div:last-of-type {
|
||||||
|
border-left: 0px solid #cbcbcb;
|
||||||
|
border-top: 0px solid #cbcbcb;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.capabilities-edit-form:hover {
|
&.capabilities-edit-form:hover {
|
||||||
|
|
|
||||||
|
|
@ -386,6 +386,62 @@ $modal-z: 9999999;
|
||||||
animation-timing-function: ease;
|
animation-timing-function: ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Capababilities Form Collapse
|
||||||
|
@keyframes form-capabilities-in {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
height: 0px;
|
||||||
|
max-height: 0px;
|
||||||
|
min-height: 0px;
|
||||||
|
// -ms-transform: translate(0%, -30%); /* IE 9 */
|
||||||
|
// -webkit-transform: translate(0%, -30%); /* Safari */
|
||||||
|
// transform: translate(0%, -30%);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
height: 120px;
|
||||||
|
max-height: 120px;
|
||||||
|
min-height: 120px;
|
||||||
|
opacity: 1;
|
||||||
|
// -ms-transform: translate(0, 0); /* IE 9 */
|
||||||
|
// -webkit-transform: translate(0, 0); /* Safari */
|
||||||
|
// transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes form-capabilities-out {
|
||||||
|
from {
|
||||||
|
height: 120px;
|
||||||
|
max-height: 120px;
|
||||||
|
min-height: 120px;
|
||||||
|
//opacity: 1;
|
||||||
|
// -ms-transform: translate(0, 0); /* IE 9 */
|
||||||
|
// -webkit-transform: translate(0, 0); /* Safari */
|
||||||
|
// transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
height: 0px;
|
||||||
|
max-height: 0px;
|
||||||
|
min-height: 0px;
|
||||||
|
//opacity: 0;
|
||||||
|
// -ms-transform: translate(0%, -30%); /* IE 9 */
|
||||||
|
// -webkit-transform: translate(0%, -30%); /* Safari */
|
||||||
|
// transform: translate(0%, -30%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-capabilities-enter-active {
|
||||||
|
overflow: hidden;
|
||||||
|
animation-name: form-capabilities-in;
|
||||||
|
animation-duration: 0.2s;
|
||||||
|
animation-timing-function: ease;
|
||||||
|
}
|
||||||
|
.form-capabilities-leave-active {
|
||||||
|
overflow: hidden;
|
||||||
|
animation-name: form-capabilities-out;
|
||||||
|
animation-duration: 0.15s;
|
||||||
|
animation-timing-function: ease;
|
||||||
|
}
|
||||||
|
|
||||||
// Filters menu
|
// Filters menu
|
||||||
@keyframes filters-menu-in {
|
@keyframes filters-menu-in {
|
||||||
from {
|
from {
|
||||||
|
|
|
||||||
|
|
@ -439,7 +439,10 @@ return apply_filters( 'tainacan-admin-i18n', [
|
||||||
'label_month' => __( 'Month', 'tainacan' ),
|
'label_month' => __( 'Month', 'tainacan' ),
|
||||||
'label_year' => __( 'Year', 'tainacan' ),
|
'label_year' => __( 'Year', 'tainacan' ),
|
||||||
'label_related_to' => __( 'Related to', 'tainacan' ),
|
'label_related_to' => __( 'Related to', 'tainacan' ),
|
||||||
|
'label_user_roles' => __( 'User roles', 'tainacan' ),
|
||||||
'label_associated_roles' => __( 'Associated roles', 'tainacan' ),
|
'label_associated_roles' => __( 'Associated roles', 'tainacan' ),
|
||||||
|
'label_inherited_roles' => __( 'Inherited roles', 'tainacan' ),
|
||||||
|
|
||||||
// Instructions. More complex sentences to guide user and placeholders
|
// Instructions. More complex sentences to guide user and placeholders
|
||||||
'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ),
|
'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ),
|
||||||
'instruction_delete_selected_items' => __( 'Delete selected items', 'tainacan' ),
|
'instruction_delete_selected_items' => __( 'Delete selected items', 'tainacan' ),
|
||||||
|
|
@ -573,7 +576,8 @@ return apply_filters( 'tainacan-admin-i18n', [
|
||||||
'info_showing_capabilities' => __( 'Showing capabilities ', 'tainacan' ),
|
'info_showing_capabilities' => __( 'Showing capabilities ', 'tainacan' ),
|
||||||
'info_no_capabilities_found' => __( 'No capabilities found.', 'tainacan' ),
|
'info_no_capabilities_found' => __( 'No capabilities found.', 'tainacan' ),
|
||||||
'info_no_role_associated_capability' => __( 'No role associated to this capability', 'tainacan' ),
|
'info_no_role_associated_capability' => __( 'No role associated to this capability', 'tainacan' ),
|
||||||
'info_associated_roles' => __( 'These are the roles that have this capability.', 'tainacan' ),
|
'info_associated_roles' => __( 'These are the roles that have this capability set. You may add or remove the capability to customize the role.', 'tainacan' ),
|
||||||
|
'info_inherited_roles' => __( 'These are the roles that have greater capabilities, which inherit this one. You can not edit this as it will not have precendece over the greater capability.', 'tainacan' ),
|
||||||
'info_warning_remove_from_trash_first' => __( 'Remove this item from trash first' ),
|
'info_warning_remove_from_trash_first' => __( 'Remove this item from trash first' ),
|
||||||
'info_to' => __( ' to ', 'tainacan' ),
|
'info_to' => __( ' to ', 'tainacan' ),
|
||||||
'info_of' => __( ' of ', 'tainacan' ),
|
'info_of' => __( ' of ', 'tainacan' ),
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue