Skip to content

Commit

Permalink
Add permission dropdowns page list and page tree items
Browse files Browse the repository at this point in the history
  • Loading branch information
@Fajfa
Fajfa committed Sep 11, 2023
1 parent abe1eb6 commit 7fdc854
Show file tree
Hide file tree
Showing 6 changed files with 253 additions and 188 deletions.
191 changes: 164 additions & 27 deletions client/web/compose/src/components/Admin/Page/Tree.vue
View file
Expand Up @@ -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
Expand All @@ -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"
Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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 changes: 10 additions & 0 deletions client/web/compose/src/themes/corteza-base/custom.scss
View file
Expand Up @@ -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 {
Expand Down
8 changes: 0 additions & 8 deletions client/web/compose/src/views/Admin/Modules/Edit.vue
View file
Expand Up @@ -889,11 +889,3 @@ export default {
},
}
</script>

<style lang="scss">
.permissions-dropdown {
.dropdown-item {
padding: 0;
}
}
</style>
71 changes: 48 additions & 23 deletions client/web/compose/src/views/Admin/Modules/List.vue
View file
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -343,11 +376,3 @@ export default {
},
}
</script>

<style lang="scss">
.permissions-dropdown {
.dropdown-item {
padding: 0;
}
}
</style>
8 changes: 0 additions & 8 deletions client/web/compose/src/views/Admin/Pages/Edit.vue
View file
Expand Up @@ -1305,11 +1305,3 @@ export default {
outline: 2px solid $success;
}
</style>

<style lang="scss">
.permissions-dropdown {
.dropdown-item {
padding: 0;
}
}
</style>

0 comments on commit 7fdc854

Please sign in to comment.