DeforaNetworks/corteza
DeforaNetworks/corteza
3
0
Fork 0
Code

Add permission dropdowns page list and page tree items

Browse Source
This commit is contained in:
Jože Fortun 2023-09-11 13:47:09 +02:00
parent abe1eb6a4d
commit 7fdc854255
6 changed files with 253 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

191
client/web/compose/src/components/Admin/Page/Tree.vue
View File

@ -12,17 +12,14 @@
<template
slot-scope="{item}"
>
<b-row
<div
v-if="item.pageID"
no-gutters
class="wrap d-flex pr-2"
class="d-flex flex-wrap align-content-center justify-content-between pr-2"
>
<b-col
cols="12"
xl="6"
lg="5"
class="flex-fill pl-2 overflow-hidden"
:class="{'grab': namespace.canCreatePage}"
<div
class="px-2 flex-fill overflow-hidden text-truncate"
:class="{'grab': namespace.canCreatePage }"
>
{{ item.title }}
<span
@ -40,17 +37,12 @@
>
{{ $t('invalid') }}
</b-badge>
</b-col>
<b-col
cols="12"
xl="6"
lg="7"
class="text-right"
>
</div>
<div class="px-2">
<b-button-group
v-if="item.canUpdatePage"
size="sm"
class="mr-1"
>
<b-button
data-test-id="button-page-builder"
@ -92,17 +84,45 @@
</b-button>
</b-button-group>
<c-permissions-button
v-if="item.canGrant"
:title="item.title || item.handle || item.pageID"
:target="item.title || item.handle || item.pageID"
:resource="`corteza::compose:page/${namespace.namespaceID}/${item.pageID}`"
:tooltip="$t('permissions:resources.compose.page.tooltip')"
button-variant="outline-light"
class="text-dark d-print-none border-0"
/>
</b-col>
</b-row>
<b-dropdown
v-if="item.canGrant || namespace.canGrant"
data-test-id="dropdown-permissions"
variant="light"
size="sm"
:title="$t('permissions:resources.compose.page.tooltip')"
class="permissions-dropdown ml-1"
>
<template #button-content>
<font-awesome-icon :icon="['fas', 'lock']" />
</template>
<b-dropdown-item>
<c-permissions-button
v-if="namespace.canGrant"
:title="item.title || item.handle || item.pageID"
:target="item.title || item.handle || item.pageID"
:resource="`corteza::compose:page/${namespace.namespaceID}/${item.pageID}`"
:button-label="$t('general:label.page')"
:show-button-icon="false"
button-variant="white text-left w-100"
/>
</b-dropdown-item>
<b-dropdown-item>
<c-permissions-button
v-if="item.canGrant"
:title="item.title || item.handle || item.pageID"
:target="item.title || item.handle || item.pageID"
:resource="`corteza::compose:page-layout/${namespace.namespaceID}/${item.pageID}/*`"
:button-label="$t('general:label.pageLayout')"
:show-button-icon="false"
all-specific
button-variant="white text-left w-100"
/>
</b-dropdown-item>
</b-dropdown>
</div>
</div>
</template>
</sortable-tree>
@ -235,9 +255,126 @@ export default {
},
}
</script>
<style lang="scss" scoped>
.grab {
cursor: grab;
z-index: 1;
}
</style>
<style lang="scss">
//!important usage to over-ride library styling
$input-height: 42px;
$content-height: 48px;
$blank-li-height: 10px;
$left-padding: 5px;
$border-color: $light;
$hover-color: $gray-200;
$dropping-color: $secondary;
.page-name-input {
height: $input-height;
}
.list-group {
.content {
height: 0 !important;
}
ul {
.content {
height: 100% !important;
min-height: $content-height !important;
line-height: $content-height !important;
&:hover {
background: $hover-color;
}
}
}
li {
white-space: nowrap;
background: $white;
&.blank-li {
height: $blank-li-height !important;
.sortable-tree {
max-height: 100%;
}
&:nth-last-of-type(1)::before {
border-left-color: $white !important;
height: 0;
}
}
&::before {
top: $content-height / -2 !important;
border-left-color: $white !important;
}
&::after {
height: $content-height !important;
top: $content-height / 2 !important;
border-color: $white !important;
}
&.parent-li:nth-last-child(2)::before {
height: $content-height !important;
top: $content-height / -2 !important;
}
}
.parent-li {
border-top: 1px solid $border-color;
.exist-li, .blank-li {
border-top: none;
&::after {
border-top: 2px solid $border-color !important;
margin-left: 0;
}
&::before {
border-left: 2px solid $border-color !important;
}
}
&.blank-li {
&::before {
border-left: 2px solid $border-color !important;
}
}
&.exist-li {
&::before {
border-color: $white !important;
}
.parent-li {
&.exist-li {
&::before {
border-color: $border-color !important;
}
}
}
}
}
}
.droper {
background: $dropping-color !important;
}
.pages-list-header {
min-height: $content-height;
background-color: $gray-200;
margin-bottom: -1.8rem !important;
border-bottom: 2px solid $light;
z-index: 1;
}
</style>

10
client/web/compose/src/themes/corteza-base/custom.scss
View File

@ -348,6 +348,16 @@ input[type="search"]::-webkit-search-cancel-button {
cursor: pointer;
}
.permissions-dropdown {
li {
line-height: initial;
}
.dropdown-item {
padding: 0;
}
}
// Supporting CSS to improve print-to-PDF option
@media print {
@page {

8
client/web/compose/src/views/Admin/Modules/Edit.vue
View File

@ -889,11 +889,3 @@ export default {
},
}
</script>
<style lang="scss">
.permissions-dropdown {
.dropdown-item {
padding: 0;
}
}
</style>

71
client/web/compose/src/views/Admin/Modules/List.vue
View File

@ -116,7 +116,54 @@
/>
<b-dropdown
v-if="m.canGrant || m.canDeleteModule"
v-if="m.canGrant"
data-test-id="dropdown-permissions"
size="sm"
variant="light"
:title="$t('permissions:resources.compose.module.tooltip')"
class="permissions-dropdown ml-1"
>
<template #button-content>
<font-awesome-icon :icon="['fas', 'lock']" />
</template>
<b-dropdown-item>
<c-permissions-button
:title="m.name || m.handle || m.moduleID"
:target="m.name || m.handle || m.moduleID"
:resource="`corteza::compose:module/${namespace.namespaceID}/${m.moduleID}`"
:button-label="$t('general:label.module.single')"
:show-button-icon="false"
button-variant="white text-left w-100"
/>
</b-dropdown-item>
<b-dropdown-item>
<c-permissions-button
:title="m.name || m.handle || m.moduleID"
:target="m.name || m.handle || m.moduleID"
:resource="`corteza::compose:module-field/${namespace.namespaceID}/${m.moduleID}/*`"
:button-label="$t('general:label.field')"
:show-button-icon="false"
all-specific
button-variant="white text-left w-100"
/>
</b-dropdown-item>
<b-dropdown-item>
<c-permissions-button
:title="m.name || m.handle || m.moduleID"
:target="m.name || m.handle || m.moduleID"
:resource="`corteza::compose:record/${namespace.namespaceID}/${m.moduleID}/*`"
:button-label="$t('general:label.record')"
:show-button-icon="false"
all-specific
button-variant="white text-left w-100"
/>
</b-dropdown-item>
</b-dropdown>
<b-dropdown
variant="outline-light"
toggle-class="d-flex align-items-center justify-content-center text-primary border-0 py-2 ml-1"
no-caret
@ -141,20 +188,6 @@
{{ $t('allRecords.label') }}
</b-dropdown-item>
<b-dropdown-item
v-if="m.canGrant"
link-class="p-0"
>
<c-permissions-button
:title="m.name || m.handle || m.moduleID"
:target="m.name || m.handle || m.moduleID"
:resource="`corteza::compose:module/${m.namespaceID}/${m.moduleID}`"
:tooltip="$t('permissions:resources.compose.module.tooltip')"
:button-label="$t('permissions:ui.label')"
button-variant="link dropdown-item text-decoration-none text-dark regular-font rounded-0"
/>
</b-dropdown-item>
<c-input-confirm
v-if="m.canDeleteModule"
borderless
@ -343,11 +376,3 @@ export default {
},
}
</script>
<style lang="scss">
.permissions-dropdown {
.dropdown-item {
padding: 0;
}
}
</style>

8
client/web/compose/src/views/Admin/Pages/Edit.vue
View File

@ -1305,11 +1305,3 @@ export default {
outline: 2px solid $success;
}
</style>
<style lang="scss">
.permissions-dropdown {
.dropdown-item {
padding: 0;
}
}
</style>

153
client/web/compose/src/views/Admin/Pages/List.vue
View File

@ -47,13 +47,38 @@
</b-input-group>
</div>
<div class="d-flex justify-content-sm-end flex-grow-1">
<c-permissions-button
<b-dropdown
v-if="namespace.canGrant"
:resource="`corteza::compose:page/${namespace.namespaceID}/*`"
class="btn-lg"
:button-label="$t('label.permissions')"
button-variant="light"
/>
data-test-id="dropdown-permissions"
size="lg"
variant="light"
class="permissions-dropdown"
>
<template #button-content>
<font-awesome-icon :icon="['fas', 'lock']" />
<span>
{{ $t('label.permissions') }}
</span>
</template>
<b-dropdown-item>
<c-permissions-button
:resource="`corteza::compose:page/${namespace.namespaceID}/*`"
:button-label="$t('general:label.page')"
:show-button-icon="false"
button-variant="white text-left w-100"
/>
</b-dropdown-item>
<b-dropdown-item>
<c-permissions-button
:resource="`corteza::compose:page-layout/${namespace.namespaceID}/*/*`"
:button-label="$t('general:label.pageLayout')"
:show-button-icon="false"
button-variant="white text-left w-100"
/>
</b-dropdown-item>
</b-dropdown>
</div>
</b-row>
<b-row
@ -197,119 +222,3 @@ export default {
},
}
</script>
<style lang="scss">
//!important usage to over-ride library styling
$input-height: 42px;
$content-height: 48px;
$blank-li-height: 10px;
$left-padding: 5px;
$border-color: $light;
$hover-color: $gray-200;
$dropping-color: $secondary;
.page-name-input {
height: $input-height;
}
.sortable-tree {
.content {
height: 0 !important;
}
ul {
.content {
height: 100% !important;
min-height: $content-height !important;
line-height: $content-height !important;
&:hover {
background: $hover-color;
}
}
}
li {
white-space: nowrap;
background: $white;
&.blank-li {
height: $blank-li-height !important;
.sortable-tree {
max-height: 100%;
}
&:nth-last-of-type(1)::before {
border-left-color: $white !important;
height: 0;
}
}
&::before {
top: $content-height / -2 !important;
border-left-color: $white !important;
}
&::after {
height: $content-height !important;
top: $content-height / 2 !important;
border-color: $white !important;
}
&.parent-li:nth-last-child(2)::before {
height: $content-height !important;
top: $content-height / -2 !important;
}
}
.parent-li {
border-top: 1px solid $border-color;
.exist-li, .blank-li {
border-top: none;
&::after {
border-top: 2px solid $border-color !important;
margin-left: 0;
}
&::before {
border-left: 2px solid $border-color !important;
}
}
&.blank-li {
&::before {
border-left: 2px solid $border-color !important;
}
}
&.exist-li {
&::before {
border-color: $white !important;
}
.parent-li {
&.exist-li {
&::before {
border-color: $border-color !important;
}
}
}
}
}
}
.droper {
background: $dropping-color !important;
}
.pages-list-header {
min-height: $content-height;
background-color: $gray-200;
margin-bottom: -1.8rem !important;
border-bottom: 2px solid $light;
z-index: 1;
}
</style>