Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-01 01:36:00 -04:00
Code Issues Packages Projects Releases Wiki Activity

Started item permission design revamp

Browse Source
This commit is contained in:
Dan Brown 2022-10-02 13:17:28 +01:00
parent 953402f2eb
commit f19bad8903
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
6 changed files with 77 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resources/icons/role.svg Normal file
View File

@ -0,0 +1,4 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 415 B

31
resources/sass/_components.scss
View File

@ -798,11 +798,34 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
max-width: 500px;
}
.permissions-table [permissions-table-toggle-all-in-row] {
display: none;
.content-permissions {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
.permissions-table tr:hover [permissions-table-toggle-all-in-row] {
display: inline;
.content-permissions-row {
border: 1.5px solid #E2E2E2;
border-bottom-width: 0;
label {
padding-bottom: 0;
}
&:hover {
background-color: #F2F2F2;
}
}
.content-permissions-row:first-child {
border-radius: 4px 4px 0 0;
}
.content-permissions-row:last-child {
border-radius: 0 0 4px 4px;
border-bottom-width: 1.5px;
}
.content-permissions-row-toggle-all {
visibility: hidden;
}
.content-permissions-row:hover .content-permissions-row-toggle-all {
visibility: visible;
}
.content-permissions-row-label {
font-weight: bold;
}
.template-item {

4
resources/sass/_layout.scss
View File

@ -158,8 +158,8 @@ body.flexbox {
}
}
.gap-m {
gap: $-m;
.flex-none {
flex: none;
}
.justify-flex-start {

14
resources/sass/_spacing.scss
View File

@ -29,4 +29,16 @@
}
}
@include spacing('margin', 'm');
@include spacing('padding', 'p');
@include spacing('padding', 'p');
@each $sizeLetter, $size in $spacing {
.gap-#{$sizeLetter} {
gap: $size !important;
}
.gap-x-#{$sizeLetter} {
column-gap: $size !important;
}
.gap-y-#{$sizeLetter} {
row-gap: $size !important;
}
}

28
resources/views/form/entity-permissions-row.blade.php Normal file
View File

@ -0,0 +1,28 @@
<div class="content-permissions-row flex-container-row justify-space-between wrap">
<div class="content-permissions-row-label gap-x-m flex-container-row items-center px-l py-m flex">
<div class="text-large" title="{{ trans('common.role') }}">
@icon('role')
</div>
<span>{{ $role->display_name }}</span>
<button type="button"
class="ml-auto flex-none text-small text-primary text-button hover-underline content-permissions-row-toggle-all hide-under-s"
permissions-table-toggle-all-in-row
>{{ trans('common.toggle_all') }}</button>
</div>
<div class="flex-container-row justify-space-between gap-x-xl wrap items-center">
<div class="px-l">
@include('form.restriction-checkbox', ['name'=>'restrictions', 'label' => trans('common.view'), 'action' => 'view'])
</div>
<div class="px-l">
@if(!$model->isA('page'))
@include('form.restriction-checkbox', ['name'=>'restrictions', 'label' => trans('common.create'), 'action' => 'create'])
@endif
</div>
<div class="px-l">
@include('form.restriction-checkbox', ['name'=>'restrictions', 'label' => trans('common.update'), 'action' => 'update'])
</div>
<div class="px-l">
@include('form.restriction-checkbox', ['name'=>'restrictions', 'label' => trans('common.delete'), 'action' => 'delete'])
</div>
</div>
</div>

25
resources/views/form/entity-permissions.blade.php
View File

@ -24,31 +24,12 @@
<p class="text-warn">{{ trans('entities.shelves_permissions_cascade_warning') }}</p>
@endif
<hr>
<table permissions-table class="table permissions-table toggle-switch-list" style="{{ !$model->restricted ? 'display: none' : '' }}">
<tr>
<th>{{ trans('common.role') }}</th>
<th colspan="{{ $model->isA('page') ? '3' : '4' }}">
{{ trans('common.actions') }}
<a href="#" permissions-table-toggle-all class="text-small ml-m text-primary">{{ trans('common.toggle_all') }}</a>
</th>
</tr>
<div class="content-permissions mt-m mb-xl">
@foreach(\BookStack\Auth\Role::restrictable() as $role)
<tr>
<td width="33%" class="pt-m">
{{ $role->display_name }}
<a href="#" permissions-table-toggle-all-in-row class="text-small float right ml-m text-primary">{{ trans('common.toggle_all') }}</a>
</td>
<td>@include('form.restriction-checkbox', ['name'=>'restrictions', 'label' => trans('common.view'), 'action' => 'view'])</td>
@if(!$model->isA('page'))
<td>@include('form.restriction-checkbox', ['name'=>'restrictions', 'label' => trans('common.create'), 'action' => 'create'])</td>
@endif
<td>@include('form.restriction-checkbox', ['name'=>'restrictions', 'label' => trans('common.update'), 'action' => 'update'])</td>
<td>@include('form.restriction-checkbox', ['name'=>'restrictions', 'label' => trans('common.delete'), 'action' => 'delete'])</td>
</tr>
@include('form.entity-permissions-row', ['role' => $role, 'model' => $model])
@endforeach
</table>
</div>
<div class="text-right">
<a href="{{ $model->getUrl() }}" class="button outline">{{ trans('common.cancel') }}</a>