mirror of
https://github.com/ZoneMinder/zoneminder.git
synced 2026-05-18 11:35:15 -04:00
Merge pull request #4752 from IgorA100/patch-974193
Chore: UI optimization on User page
This commit is contained in:
Isaac Connor
@@ -1720,6 +1720,78 @@ video-stream[id^='liveStream'] video{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.flex-col-2,
|
||||
.flex-col-3 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flex-col-2 > *,
|
||||
.flex-col-3 > * {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex-col-2 > * {
|
||||
min-width: 50%; /* For potential 2 columns, to align them by width (if we don't use "col-md/lg-*") */
|
||||
}
|
||||
|
||||
.flex-col-3 > * {
|
||||
min-width: 33.33333%; /* For potential 3 columns, to align them by width (if we don't use "col-md/lg-*") */
|
||||
}
|
||||
|
||||
/* +++ IgorA100 For now, let it be like this here, since it might have to be applied to many pages. https://github.com/ZoneMinder/zoneminder/pull/4752 */
|
||||
.user-page fieldset legend {
|
||||
width: auto;
|
||||
padding-inline: 0.5em;
|
||||
}
|
||||
|
||||
.user-page #header {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.user-page form#contentForm {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.user-page #content-inner {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 0 15px 15px 15px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
*[class*="flex-col-"]> *[class*="col-lg"] { /* Fix bootstrap for flex-grow: 1 */
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.user-page .col + *[class*="col-lg"],
|
||||
.user-page *[class*="col-lg"] + .col,
|
||||
.user-page *[class*="col-lg"] + *[class*="col-lg"] {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
*[class*="flex-col-"]> .col,
|
||||
*[class*="flex-col-"]> *[class*="col-md"] { /* Fix bootstrap for flex-grow: 1 */
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.user-page .col + .col,
|
||||
.user-page .col + *[class*="col-md"],
|
||||
.user-page *[class*="col-md"] + .col,
|
||||
.user-page *[class*="col-md"] + *[class*="col-md"] {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
/* --- */
|
||||
|
||||
/* +++ This block should always be located at the end! */
|
||||
.hidden {
|
||||
display: none;
|
||||
|
||||
@@ -1,6 +1,14 @@
|
||||
fieldset {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
fieldset .table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.BasicInformation, .Permissions {
|
||||
width: 50%;
|
||||
float: left;
|
||||
width: auto;
|
||||
float: unset;
|
||||
}
|
||||
|
||||
#GroupsPermissions,
|
||||
|
||||
@@ -60,7 +60,7 @@ echo getNavBarHTML();
|
||||
<input type="hidden" name="redirect" value="<?php echo isset($_REQUEST['prev']) ? htmlspecialchars($_REQUEST['prev']) : 'options&tab=users' ?>"/>
|
||||
<input type="hidden" name="uid" value="<?php echo validHtmlStr($User->Id()) ?>"/>
|
||||
<div id="header">
|
||||
<div class="float-left pl-3 pt-1">
|
||||
<div class="float-left pt-1">
|
||||
<button type="button" id="backBtn" class="btn btn-normal" data-toggle="tooltip" data-placement="top" title="<?php echo translate('Back') ?>" disabled><i class="fa fa-arrow-left"></i></button>
|
||||
<button type="button" id="refreshBtn" class="btn btn-normal" data-toggle="tooltip" data-placement="top" title="<?php echo translate('Refresh') ?>" ><i class="fa fa-refresh"></i></button>
|
||||
</div>
|
||||
@@ -72,7 +72,7 @@ echo getNavBarHTML();
|
||||
</div><!--header-->
|
||||
<div id="content-inner">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="col-lg-6 mt-4">
|
||||
<fieldset>
|
||||
<legend><?php echo translate('Account Details') ?></legend>
|
||||
<table class="table table-sm">
|
||||
@@ -121,7 +121,7 @@ echo getNavBarHTML();
|
||||
</table>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="col-lg-6 mt-4">
|
||||
<fieldset>
|
||||
<legend><?php echo translate('Preferences') ?></legend>
|
||||
<table class="table table-sm">
|
||||
@@ -270,59 +270,60 @@ echo htmlSelect('user[HomeView]', $homeview_options, $User->HomeView(), ['class'
|
||||
<?php
|
||||
if (canEdit('System')) {
|
||||
?>
|
||||
<div class="Permissions mt-4">
|
||||
<fieldset>
|
||||
<legend><?php echo translate('Global Permissions') ?></legend>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<table class="table table-sm">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row"><?php echo translate('Stream') ?></th>
|
||||
<td><?php echo htmlSelect('user[Stream]', $nv, $User->Stream(), ['class'=>'form-control form-control-sm']) ?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><?php echo translate('Events') ?></th>
|
||||
<td><?php echo htmlSelect('user[Events]', $nve, $User->Events(), ['class'=>'form-control form-control-sm']) ?></td>
|
||||
</tr>
|
||||
<div class="row flex-col-3">
|
||||
<div class="Permissions mt-4 col-lg-6">
|
||||
<fieldset>
|
||||
<legend><?php echo translate('Global Permissions') ?></legend>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<table class="table table-sm">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row"><?php echo translate('Stream') ?></th>
|
||||
<td><?php echo htmlSelect('user[Stream]', $nv, $User->Stream(), ['class'=>'form-control form-control-sm']) ?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><?php echo translate('Events') ?></th>
|
||||
<td><?php echo htmlSelect('user[Events]', $nve, $User->Events(), ['class'=>'form-control form-control-sm']) ?></td>
|
||||
</tr>
|
||||
<?php if (defined('ZM_FEATURES_SNAPSHOTS') and ZM_FEATURES_SNAPSHOTS) { ?>
|
||||
<tr>
|
||||
<th scope="row"><?php echo translate('Snapshots') ?></th>
|
||||
<td><?php echo htmlSelect('user[Snapshots]', $nve, $User->Snapshots(), ['class'=>'form-control form-control-sm']) ?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><?php echo translate('Snapshots') ?></th>
|
||||
<td><?php echo htmlSelect('user[Snapshots]', $nve, $User->Snapshots(), ['class'=>'form-control form-control-sm']) ?></td>
|
||||
</tr>
|
||||
<?php } ?>
|
||||
<tr>
|
||||
<th scope="row"><?php echo translate('Control') ?></th>
|
||||
<td><?php echo htmlSelect('user[Control]', $nve, $User->Control(), ['class'=>'form-control form-control-sm']) ?></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<tr>
|
||||
<th scope="row"><?php echo translate('Control') ?></th>
|
||||
<td><?php echo htmlSelect('user[Control]', $nve, $User->Control(), ['class'=>'form-control form-control-sm']) ?></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<table class="table table-sm">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row"><?php echo translate('Monitors') ?></th>
|
||||
<td><?php echo htmlSelect('user[Monitors]', $nvec, $User->Monitors(), ['id'=>'user[Monitors]', 'class'=>'form-control form-control-sm', 'data-on-change'=>'updateEffectivePermissions']) ?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><?php echo translate('Groups') ?></th>
|
||||
<td><?php echo htmlSelect('user[Groups]', $nve, $User->Groups(), ['class'=>'form-control form-control-sm']) ?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><?php echo translate('System') ?></th>
|
||||
<td><?php echo htmlSelect('user[System]', $nve, $User->System(), ['class'=>'form-control form-control-sm']) ?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><?php echo translate('Devices') ?></th>
|
||||
<td><?php echo htmlSelect('user[Devices]', $nve, $User->Devices(), ['class'=>'form-control form-control-sm']) ?></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<table class="table table-sm">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row"><?php echo translate('Monitors') ?></th>
|
||||
<td><?php echo htmlSelect('user[Monitors]', $nvec, $User->Monitors(), ['id'=>'user[Monitors]', 'class'=>'form-control form-control-sm', 'data-on-change'=>'updateEffectivePermissions']) ?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><?php echo translate('Groups') ?></th>
|
||||
<td><?php echo htmlSelect('user[Groups]', $nve, $User->Groups(), ['class'=>'form-control form-control-sm']) ?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><?php echo translate('System') ?></th>
|
||||
<td><?php echo htmlSelect('user[System]', $nve, $User->System(), ['class'=>'form-control form-control-sm']) ?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><?php echo translate('Devices') ?></th>
|
||||
<td><?php echo htmlSelect('user[Devices]', $nve, $User->Devices(), ['class'=>'form-control form-control-sm']) ?></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div><!--Permissions-->
|
||||
</fieldset>
|
||||
</div><!--Permissions-->
|
||||
<?php
|
||||
$groups = array();
|
||||
if (canEdit('Groups')) {
|
||||
@@ -341,18 +342,18 @@ if (canEdit('Groups')) {
|
||||
$max_depth = $group->depth();
|
||||
}
|
||||
?>
|
||||
<div id="GroupPermissions" class="mt-4">
|
||||
<fieldset>
|
||||
<legend><?php echo translate('Groups Permissions') ?></legend>
|
||||
<table class="table table-sm table-striped">
|
||||
<thead class="thead-light">
|
||||
<tr>
|
||||
<th class="name" colspan="<?php echo $max_depth+1 ?>"><?php echo translate('Name') ?></th>
|
||||
<th class="monitors"><?php echo translate('Monitors') ?></th>
|
||||
<th class="permission"><?php echo translate('Permission') ?></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<div id="GroupPermissions" class="col-lg-6 mt-4">
|
||||
<fieldset>
|
||||
<legend><?php echo translate('Groups Permissions') ?></legend>
|
||||
<table class="table table-sm table-striped">
|
||||
<thead class="thead-light">
|
||||
<tr>
|
||||
<th class="name" colspan="<?php echo $max_depth+1 ?>"><?php echo translate('Name') ?></th>
|
||||
<th class="monitors"><?php echo translate('Monitors') ?></th>
|
||||
<th class="permission"><?php echo translate('Permission') ?></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php
|
||||
function group_line($group) {
|
||||
global $children;
|
||||
@@ -382,49 +383,50 @@ if (canEdit('Groups')) {
|
||||
}
|
||||
}
|
||||
?>
|
||||
</tbody>
|
||||
</table>
|
||||
</fieldset>
|
||||
</div><!--Group Permissions-->
|
||||
</tbody>
|
||||
</table>
|
||||
</fieldset>
|
||||
</div><!--Group Permissions-->
|
||||
<?php
|
||||
} // end if canEdit(Groups)
|
||||
?>
|
||||
<div id="MonitorPermissions" class="mt-4">
|
||||
<fieldset>
|
||||
<legend><?php echo translate('Monitor Permissions') ?></legend>
|
||||
<table class="table table-sm table-striped">
|
||||
<thead class="thead-light">
|
||||
<tr>
|
||||
<th class="Id"><?php echo translate('Id') ?></th>
|
||||
<th class="Name"><?php echo translate('Name') ?></th>
|
||||
<th class="permission"><?php echo translate('Permission') ?></th>
|
||||
<th class="effective_permission"><?php echo translate('Effective Permission') ?></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<div id="MonitorPermissions" class="col-12 mt-4">
|
||||
<fieldset>
|
||||
<legend><?php echo translate('Monitor Permissions') ?></legend>
|
||||
<table class="table table-sm table-striped">
|
||||
<thead class="thead-light">
|
||||
<tr>
|
||||
<th class="Id"><?php echo translate('Id') ?></th>
|
||||
<th class="Name"><?php echo translate('Name') ?></th>
|
||||
<th class="permission"><?php echo translate('Permission') ?></th>
|
||||
<th class="effective_permission"><?php echo translate('Effective Permission') ?></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php
|
||||
$monitors = ZM\Monitor::find(['Deleted'=>0], ['order'=>'Sequence ASC']);
|
||||
foreach ($monitors as $monitor) {
|
||||
if ($monitor->canView()) {
|
||||
echo '
|
||||
<tr>
|
||||
<td class="Id">'.$monitor->Id().'</td>
|
||||
<td class="Name">'.validHtmlStr($monitor->Name()).'</td>
|
||||
<td class="permission">'.html_radio('monitor_permission['.$monitor->Id().']', $inve,
|
||||
$User->Monitor_Permission($monitor->Id())->Permission(),
|
||||
['default'=>'Inherit'],
|
||||
['data-on-change'=>'updateEffectivePermissions']).'</td>
|
||||
<td class="effective_permission" id="effective_permission'.$monitor->Id().'">'.translate($monitor->effectivePermission($User)).'</td>
|
||||
</tr>';
|
||||
<tr>
|
||||
<td class="Id">'.$monitor->Id().'</td>
|
||||
<td class="Name">'.validHtmlStr($monitor->Name()).'</td>
|
||||
<td class="permission">'.html_radio('monitor_permission['.$monitor->Id().']', $inve,
|
||||
$User->Monitor_Permission($monitor->Id())->Permission(),
|
||||
['default'=>'Inherit'],
|
||||
['data-on-change'=>'updateEffectivePermissions']).'</td>
|
||||
<td class="effective_permission" id="effective_permission'.$monitor->Id().'">'.translate($monitor->effectivePermission($User)).'</td>
|
||||
</tr>';
|
||||
} else {
|
||||
ZM\Debug("Can't view monitor ".$monitor->Id(). ' ' .$monitor->canView());
|
||||
}
|
||||
}
|
||||
?>
|
||||
</tbody>
|
||||
</table>
|
||||
</fieldset>
|
||||
</div><!--Monitor Permissions-->
|
||||
</tbody>
|
||||
</table>
|
||||
</fieldset>
|
||||
</div><!--Monitor Permissions-->
|
||||
</div> <!--.row flex-col-->
|
||||
<?php
|
||||
} // end if canEdit(System)
|
||||
?>
|
||||
|
||||
Reference in New Issue
Block a user