Started item permission design revamp

resources/icons/role.svg

@@ -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>

resources/sass/_components.scss

@@ -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] {
+.content-permissions {
-  display: none;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
 }
-.permissions-table tr:hover [permissions-table-toggle-all-in-row] {
+.content-permissions-row {
-  display: inline;
+  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 {

resources/sass/_layout.scss

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

resources/sass/_spacing.scss

@@ -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;
+  }
+}

resources/views/form/entity-permissions-row.blade.php

@@ -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>

resources/views/form/entity-permissions.blade.php

@@ -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' : '' }}">
+    <div class="content-permissions mt-m mb-xl">
-        <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>
         @foreach(\BookStack\Auth\Role::restrictable() as $role)
-            <tr>
+            @include('form.entity-permissions-row', ['role' => $role, 'model' => $model])
-                <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>
         @endforeach
-    </table>
+    </div>
 
     <div class="text-right">
         <a href="{{ $model->getUrl() }}" class="button outline">{{ trans('common.cancel') }}</a>