3
0
mirror of https://github.com/snipe/snipe-it.git synced 2026-02-05 02:45:39 +00:00

Some UI refinement

This commit is contained in:
snipe
2025-10-21 19:10:58 +01:00
parent 90832fd1ad
commit 5211e2ae20
4 changed files with 152 additions and 90 deletions

View File

@ -65,6 +65,7 @@ class GroupsController extends Controller
$group->notes = $request->input('notes');
if ($group->save()) {
$group->users()->sync($request->input('associated_users'));
return redirect()->route('groups.index')->with('success', trans('admin/groups/message.success.create'));
}
@ -108,7 +109,6 @@ class GroupsController extends Controller
$group->permissions = json_encode($request->input('permission'));
$group->notes = $request->input('notes');
\Log::error(print_r($request->input('associated_users'), true));
if (! config('app.lock_passwords')) {
if ($group->save()) {

View File

@ -629,7 +629,14 @@ return [
'Self' => [
'User (Self) Accounts' => [
[
// This isn't really a permission, but we include it for now
'permission' => 'self.view',
'label' => '',
'note' => '',
'display' => false,
],
[
'permission' => 'self.two_factor',
'label' => 'Two-Factor Authentication',
@ -640,7 +647,7 @@ return [
[
'permission' => 'self.api',
'label' => 'Create API Keys',
'note' => 'The user create personal API keys to utilize the REST API.',
'note' => 'The user create personal API keys to utilize the REST API. The API keys will have the same permissions as the user account.',
'display' => true,
],

View File

@ -3,7 +3,8 @@
'updateText' => trans('admin/groups/titles.update'),
'item' => $group,
'formAction' => ($group !== null && $group->id !== null) ? route('groups.update', ['group' => $group->id]) : route('groups.store'),
'container_classes' => 'col-lg-6 col-lg-offset-3 col-md-10 col-md-offset-1 col-sm-12 col-sm-offset-0',
'topSubmit' => 'true',
])
@section('content')
@ -71,24 +72,65 @@
</div>
<style>
.slider-wrapper {
display: flex;
padding: 2px;
background-color: #e9e9e9;
margin-bottom: 3px;
border-radius: 4px;
border: 1px #d6d6d6 solid;
}
.custom-input {
flex-grow: 1;
}
<div class="col-md-12">
<div class="col-md-10">
<h4>{{ trans('admin/groups/titles.permission')}}</h4>
</div>
<div class="col-md-1 text-right">
<h4>{{ trans('admin/groups/titles.grant')}}</h4>
</div>
<div class="col-md-1 text-right">
<h4>{{ trans('admin/groups/titles.deny')}}</h4>
</div>
</div>
.custom-input input[type=radio] {
display: none;
}
.custom-input label {
display: block;
margin-bottom: 0px;
padding: 6px 8px;
color: #fff;
font-weight: bold;
text-align: center;
transition : all .4s 0s ease;
cursor: pointer;
}
.custom-input label {
color: #9a9999;
border-radius: 4px;
}
.custom-input .allow:checked + label {
background-color: green;
color: white;
border-radius: 4px;
}
.custom-input .deny:checked + label {
background-color: #a94442;
color: white;
border-radius: 4px;
}
.custom-input .allow:checked + label {
background-color: green;
color: white;
border-radius: 4px;
}
</style>
<div class="col-md-12">
@foreach ($permissions as $area => $area_permission)
<!-- handle superadmin and reports, and anything else with only one option -->
<?php $localPermission = $area_permission[0]; ?>
@php
$localPermission = $area_permission[0];
@endphp
<div class="form-group{{ ($localPermission['permission']!='superuser') ? ' nonsuperuser' : '' }}{{ ( ($localPermission['permission']!='superuser') && ($localPermission['permission']!='admin')) ? ' nonadmin' : '' }}">
<div class="callout callout-legend col-md-12">
<div class="col-md-10">
@ -100,47 +142,50 @@
<p>{{ $localPermission['note'] }}</p>
@endif
</div>
<!-- Handle the checkall ALLOW radios -->
<div class="col-md-1 text-right header-row">
<label for="{{ $area }}">
<input
class="form-control {{ str_slug($area) }}"
data-checker-group="{{ str_slug($area) }}"
aria-label="{{ $area }}"
name="permission[{{ str_slug($area) }}]"
@checked(array_key_exists(str_slug($area), $groupPermissions) && $groupPermissions[str_slug($area)] == '1')
type="radio"
value="1"
>
<span class="sr-only">
{{ trans('admin/groups/titles.allow')}}
{{ $area }}
</span>
</label>
</div>
<!-- Handle the checkall DENY radios -->
<div class="col-md-1 header-row text-right">
<label>
<input
class="form-control {{ str_slug($area) }}"
data-checker-group="{{ str_slug($area) }}"
aria-label="{{ $area }}"
name="permission[{{ str_slug($area) }}]"
type="radio"
value="0"
>
<span class="sr-only">
{{ trans('admin/groups/titles.deny')}}
{{ $area }}
</span>
</label>
<!-- Handle the checkall ALLOW and DENY radios -->
<div class="col-md-2 text-right header-row">
<div class="slider-wrapper">
<div class="custom-input"{!! (count($area_permission) > 1) ? ' data-tooltip="true" title="Grant All Permissions for '.$area.'"' : '' !!}>
<input
class="form-control {{ str_slug($area) }} allow"
data-checker-group="{{ str_slug($area) }}"
aria-label="{{ str_slug($area) }}"
name="permission[{{ str_slug($area) }}]"
@checked(array_key_exists(str_slug($area), $groupPermissions) && $groupPermissions[str_slug($area)] == '1')
type="radio"
value="1"
id="{{ str_slug($area) }}_allow"
>
<label class="allow" for="{{ str_slug($area) }}_allow">
<i class="fa-solid fa-square-check"></i>
</label>
</div>
<div class="custom-input"{!! (count($area_permission) > 1) ? ' data-tooltip="true" title="Deny All for '.$area.'"' : '' !!}>
<input
class="form-control {{ str_slug($area) }} deny"
data-checker-group="{{ str_slug($area) }}"
aria-label="{{ str_slug($area) }}"
name="permission[{{ str_slug($area) }}]"
@checked(array_key_exists(str_slug($area), $groupPermissions) && $groupPermissions[str_slug($area)] == '0')
type="radio"
value="0"
id="{{ str_slug($area) }}_deny"
>
<label class="deny" for="{{ str_slug($area) }}_deny">
<i class="fa-solid fa-square-xmark"></i>
</label>
</div>
</div>
</div>
</div>
</div>
@if (count($area_permission) > 1)
@ -149,41 +194,45 @@
@if ($this_permission['display'])
<div class="{{ ($localPermission['permission']!='superuser') ? ' nonsuperuser' : '' }}{{ ( ($localPermission['permission']!='superuser') && ($localPermission['permission']!='admin')) ? ' nonadmin' : '' }}">
<div class="form-group" style="border-bottom: 1px solid #eee; margin-right: 15px;">
<div class="form-group" style="border-bottom: 1px solid #eee; padding-right: 9px;">
<div class="col-md-10">
{{ $this_permission['label'] }}
<strong>{{ $this_permission['label'] }}</strong>{{ ($this_permission['note'] ? ' - '.$this_permission['note'] : '') }}
</div>
<div class="col-md-1 text-right">
<label for="{{ 'permission['.$this_permission['permission'].']' }}">
<input
class="form-control radiochecker-{{ str_slug($area) }}"
aria-label="permission[{{ $this_permission['permission'] }}]"
@checked(array_key_exists($this_permission['permission'], $groupPermissions) && $groupPermissions[$this_permission['permission']] == '1')
name="permission[{{ $this_permission['permission'] }}]"
type="radio"
value="1"
>
<span class="sr-only">{{ trans('admin/groups/titles.allow')}}
{{ 'permission['.$this_permission['permission'].']' }}
</span>
</label>
<div class="form-group col-md-2 text-right">
<div class="slider-wrapper">
<div class="custom-input" data-tooltip="true" title="Allow">
<input
class="radiochecker-{{ str_slug($area) }} allow"
aria-label="permission[{{ $this_permission['permission'] }}]"
@checked(array_key_exists($this_permission['permission'], $groupPermissions) && $groupPermissions[$this_permission['permission']] == '1')
name="permission[{{ $this_permission['permission'] }}]"
type="radio"
id="{{ str_slug($this_permission['permission']) }}_allow"
value="1"
>
<label for="{{ str_slug($this_permission['permission']) }}_allow" class="allow">
<i class="fa-solid fa-square-check"></i>
</label>
</div>
<div class="custom-input" data-tooltip="true" title="Deny">
<input
class="form-control deny radiochecker-{{ str_slug($area) }}"
aria-label="permission[{{ $this_permission['permission'] }}]"
@checked(array_key_exists($this_permission['permission'], $groupPermissions) && $groupPermissions[$this_permission['permission']] == '0')
name="permission[{{ $this_permission['permission'] }}]"
type="radio"
value="0"
id="{{ str_slug($this_permission['permission']) }}_deny"
>
<label for="{{ str_slug($this_permission['permission']) }}_deny">
<i class="fa-solid fa-square-xmark"></i>
</label>
</div>
</div>
</div>
<div class="col-md-1 text-right">
<label for="{{ 'permission['.$this_permission['permission'].']' }}">
<input
class="form-control radiochecker-{{ str_slug($area) }}"
aria-label="permission[{{ $this_permission['permission'] }}]"
@checked(array_key_exists($this_permission['permission'], $groupPermissions) && $groupPermissions[$this_permission['permission']] == '0')
name="permission[{{ $this_permission['permission'] }}]"
type="radio"
value="0"
>
</label>
</div>
</div>
</div>
@endif
@ -200,12 +249,15 @@
$(document).ready(function(){
if ($("input[name='permission[superuser]']").is(':checked')) {
alert('superuser is checked on page load');
$(".nonsuperuser").fadeOut();
if ($("#superuser_allow").is(':checked')) {
// alert('superuser is checked on page load');
// Hide here instead of fadeout on pageload to prevent what looks like Flash Of Unstyled Content (FOUC)
$(".nonsuperuser").hide();
$(".nonsuperuser").attr('display','none');
}
$(".superuser").change(function() {
if ($(this).val() == '1') {
$(".nonsuperuser").fadeOut();
@ -218,13 +270,16 @@
}
});
if ($("input[name='permission[admin]']").is(':checked')) {
alert('admin is checked on page load');
$(".nonadmin").fadeOut();
if ($("#admin_allow").is(':checked')) {
// alert('admin is checked on page load');
// Hide here instead of fadeout on pageload to prevent what looks like Flash Of Unstyled Content (FOUC)
$(".nonadmin").hide();
$(".nonadmin").attr('display','none');
}
$(".admin").change(function() {
if ($(this).val() == '1') {
$(".nonadmin").fadeOut();

View File

@ -24,7 +24,7 @@
<!-- row -->
<div class="row">
<!-- col-md-8 -->
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12 col-sm-offset-0">
<div class="{{ isset($container_classes) ? $container_classes : 'col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12 col-sm-offset-0'}}">
<form id="create-form" class="form-horizontal" method="post" action="{{ (isset($formAction)) ? $formAction : \Request::url() }}" autocomplete="off" role="form" enctype="multipart/form-data">