fix table user list - refs #2681

pull/2818/head
Alex Aragón 7 years ago
parent bdd920d1c0
commit e5eb6b4421
  1. 178
      assets/css/scss/_base.scss
  2. 10
      assets/css/scss/_variables.scss
  3. 89
      main/admin/user_list.php
  4. 9
      main/inc/lib/display.lib.php
  5. 6
      main/inc/lib/sortable_table.class.php

@ -79,17 +79,21 @@ a {
hr {
border-top: 1px solid $border-color;
}
.container-fluid{
@include large($breakpoint-xl){
width: 95%;
}
@include portrait($breakpoint-sm, $breakpoint-md){
width: 100%;
}
@include landscape($breakpoint-sm) {
width: 100%;
.main{
.container-fluid{
padding: 10px;
@include large($breakpoint-xl){
width: 95%;
}
@include portrait($breakpoint-sm, $breakpoint-md){
width: 100%;
}
@include landscape($breakpoint-sm) {
width: 100%;
}
}
}
/*** TABS ***/
.nav-tabs{
margin-bottom: 10px;
@ -144,21 +148,166 @@ hr {
// ---------------------------------------------------------
// TABLES
// ---------------------------------------------------------
.table-hover{
tbody{
tr:hover{
background-color: #f9f9f9;
}
}
}
.table{
.avatar{
border: 1px solid #cdcdcd;
.row_selected {
background-color: $row-table-select;
}
.actions-btn{
th, td{
padding: 12px 8px;
}
.checkbox{
margin-top: -1px;
margin-bottom: 0;
padding: 0;
width: 15px;
position: relative;
display: block;
label{
cursor: pointer;
padding-left: 0;
color: rgba(0,0,0, 0.5);
min-height: 20px;
margin-bottom: 0;
}
input[type=checkbox] {
opacity: 0;
position: absolute;
margin: 0;
z-index: -1;
width: 0;
height: 0;
overflow: hidden;
left: 0;
pointer-events: none;
&:focus + .checkbox-material .check:after {
opacity: 0.2;
}
&:checked {
& + .checkbox-material .check {
background: #2196F3;
}
& + .checkbox-material .check:before {
color: #FFFFFF;
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
animation: checkbox-on 0.3s forwards;
}
}
}
.checkbox-material {
vertical-align: middle;
position: relative;
top: 3px;
padding-right: 5px;
&:before{
display: block;
position: absolute;
left: 0;
content: "";
background-color: rgba(0, 0, 0, 0.84);
height: 20px;
width: 20px;
border-radius: 100%;
z-index: 1;
opacity: 0;
margin: 0;
transform: scale3d(2.3, 2.3, 1);
animation: rippleOn 500ms;
}
.check{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid rgba(0,0,0, .54);
overflow: hidden;
z-index: 1;
border-radius: 3px;
&:before{
position: absolute;
content: "";
transform: rotate(45deg);
display: block;
margin-top: -3px;
margin-left: 7px;
width: 0;
height: 0;
background: red;
box-shadow: 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0 inset;
animation: checkbox-off 0.3s forwards;
}
}
}
}
.avatar-user{
position: relative;
display: block;
width: 100%;
.is-admin{
position: absolute;
right: 0;
bottom: 0;
}
.is-active{
position: absolute;
left: 10px;
bottom: -10px;
}
.avatar{
border: 1px solid #cdcdcd;
}
}
.cut-email{
width:150px;
height:20px;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
display: inline-block;
&:hover{
width: 100%;
white-space: initial;
overflow: visible;
cursor: pointer;
display: inline-block;
}
}
.toolbar-table{
display: inline-block;
width: 200px;
@include large($breakpoint-xl){
width: 100%;
}
@include portrait($breakpoint-sm, $breakpoint-md){
width: 200px;
}
@include landscape($breakpoint-sm) {
width: 200px;
}
img{
border: 1px solid #cdcdcd;
background-color: #ffffff;
padding: 4px;
border-radius: 5px;
&:hover{
background-color:#cdcdcd;
}
}
.blackboard_hide{
display: none;
}
}
.th-header{
a{
color: $grey-900;
}
}
}
// ---------------------------------------------------------
@ -1080,9 +1229,6 @@ hr {
}
}
/*** PLUGINS ***/
.row_selected {
background-color: #FFFFCC;
}
/*** REPORTS ***/
.item-report {

@ -28,14 +28,7 @@ $grey-900 : #313435;
// COLORS THEME DEFAULT
// ---------------------------------------------------------
$default-danger : #ff3c7e;
$default-dark : #54667a;
$default-grey : #565a5c;
$default-info : #4abaff;
$default-primary : #7774e7;
$default-success : #37c936;
$default-text-color : #72777a;
$default-yellow : #FFCC00;
$default-link : rgb(0, 153, 255);
$default-white : #FFFFFF;
@ -62,6 +55,7 @@ $header-link : #54667a;
$header-hover : #ff3c7e;
$breadcrumb-color : #d2f1ff;
$select-color : #ced4da;
// ---------------------------------------------------------
// OTHERS
// ---------------------------------------------------------
@ -70,6 +64,8 @@ $collapsed-size : 70px;
$header-height : 65px;
$offscreen-size : 280px;
$card-border-color : #e5e9f2;
$row-table-select : #f9ffff;
$default-yellow : #FFCC00;
// ---------------------------------------------------------
// FONTS
// ---------------------------------------------------------

@ -141,11 +141,11 @@ function active_user(element_div) {
}
function clear_course_list(div_course) {
$("div#"+div_course).html(" ");
$("div#"+div_course).html("");
$("div#"+div_course).hide("");
}
function clear_session_list(div_session) {
$("div#"+div_session).html(" ");
$("div#"+div_session).html("");
$("div#"+div_session).hide("");
}
@ -460,6 +460,7 @@ function get_user_data($from, $number_of_items, $column, $direction)
$users = [];
$t = time();
while ($user = Database::fetch_row($res)) {
$currentUser = api_get_current_user();
$userPicture = UserManager::getUserPicture(
$user[0],
USER_IMAGE_SIZE_SMALL
@ -478,6 +479,7 @@ function get_user_data($from, $number_of_items, $column, $direction)
$user[7] = '-1';
}
}
$iconAdmin = '';
if ($is_admin) {
$iconAdmin .= Display::return_icon(
@ -488,17 +490,53 @@ function get_user_data($from, $number_of_items, $column, $direction)
);
}
$iconActive = null;
$action = null;
$image = null;
if ($user[7] == '1') {
$action = 'Lock';
$image = 'accept';
} elseif ($user[7] == '-1') {
$action = 'edit';
$image = 'warning';
} elseif ($user[7] == '0') {
$action = 'Unlock';
$image = 'error';
}
if ($action === 'edit') {
$iconActive = Display::return_icon(
$image.'.png',
get_lang('AccountExpired'),
[],
16
);
} elseif ($user['0'] != $currentUser->getId()) {
// you cannot lock yourself out otherwise you could disable all the
// accounts including your own => everybody is locked out and nobody
// can change it anymore.
$iconActive = Display::return_icon(
$image.'.png',
get_lang(ucfirst($action)),
['onclick' => 'active_user(this);', 'id' => 'img_'.$user['0']],
16
);
}
$profile = '<div class="avatar-user">'.$photo.'<span class="is-admin">'
.$iconAdmin.'</span><span class="is-active">'.$iconActive.'</span></div>';
// forget about the expiration date field
$users[] = [
$user[0],
$photo.$iconAdmin,
$profile,
$user[1],
$user[2],
$user[3],
$user[4],
$user[5],
$user[6],
$user[7],
api_get_local_time($user[9]),
$user[0],
];
@ -507,6 +545,7 @@ function get_user_data($from, $number_of_items, $column, $direction)
return $users;
}
/**
* Returns a mailto-link.
*
@ -516,7 +555,7 @@ function get_user_data($from, $number_of_items, $column, $direction)
*/
function email_filter($email)
{
return Display :: encrypted_mailto_link($email, $email);
return Display :: encrypted_mailto_link($email, $email, null, true);
}
/**
@ -554,7 +593,7 @@ function modify_filter($user_id, $url_params, $row)
if ($current_user_status_label == $statusname[ANONYMOUS]) {
$user_is_anonymous = true;
}
$result = '<div class="actions-btn">';
$result = '<div class="toolbar-table">';
if (!$user_is_anonymous) {
$icon = Display::return_icon(
'course.png',
@ -563,7 +602,7 @@ function modify_filter($user_id, $url_params, $row)
);
$result .= '<a href="javascript:void(0)" onclick="load_course_list(\'div_'.$user_id.'\','.$user_id.')" >
'.$icon.'
<div class="blackboard_hide" id="div_'.$user_id.'">&nbsp;&nbsp;</div>
<div class="blackboard_hide" id="div_'.$user_id.'"></div>
</a>';
$icon = Display::return_icon(
@ -573,19 +612,19 @@ function modify_filter($user_id, $url_params, $row)
);
$result .= '<a href="javascript:void(0)" onclick="load_session_list(\'div_s_'.$user_id.'\','.$user_id.')" >
'.$icon.'
<div class="blackboard_hide" id="div_s_'.$user_id.'">&nbsp;&nbsp;</div>
<div class="blackboard_hide" id="div_s_'.$user_id.'"></div>
</a>';
} else {
$result .= Display::return_icon('course_na.png', get_lang('Courses')).'&nbsp;&nbsp;';
$result .= Display::return_icon('course_na.png', get_lang('Sessions')).'&nbsp;&nbsp;';
$result .= Display::return_icon('course_na.png', get_lang('Courses'));
$result .= Display::return_icon('course_na.png', get_lang('Sessions'));
}
if (api_is_platform_admin()) {
if (!$user_is_anonymous) {
$result .= '<a href="user_information.php?user_id='.$user_id.'">'.
Display::return_icon('info2.png', get_lang('Info')).'</a>&nbsp;&nbsp;';
Display::return_icon('info2.png', get_lang('Info')).'</a>';
} else {
$result .= Display::return_icon('info2_na.png', get_lang('Info')).'&nbsp;&nbsp;';
$result .= Display::return_icon('info2_na.png', get_lang('Info'));
}
}
@ -604,26 +643,26 @@ function modify_filter($user_id, $url_params, $row)
if (!$user_is_anonymous) {
if (api_global_admin_can_edit_admin($user_id, null, $sessionAdminCanLoginAs)) {
$result .= '<a href="user_list.php?action=login_as&user_id='.$user_id.'&sec_token='.Security::getTokenFromSession().'">'.
Display::return_icon('login_as.png', get_lang('LoginAs')).'</a>&nbsp;';
Display::return_icon('login_as.png', get_lang('LoginAs')).'</a>';
} else {
$result .= Display::return_icon('login_as_na.png', get_lang('LoginAs')).'&nbsp;';
$result .= Display::return_icon('login_as_na.png', get_lang('LoginAs'));
}
} else {
$result .= Display::return_icon('login_as_na.png', get_lang('LoginAs')).'&nbsp;';
$result .= Display::return_icon('login_as_na.png', get_lang('LoginAs'));
}
} else {
$result .= Display::return_icon('login_as_na.png', get_lang('LoginAs')).'&nbsp;';
$result .= Display::return_icon('login_as_na.png', get_lang('LoginAs'));
}
if ($current_user_status_label != $statusname[STUDENT]) {
$result .= Display::return_icon(
'statistics_na.png',
get_lang('Reporting')
).'&nbsp;';
);
} else {
$result .= '<a href="../mySpace/myStudents.php?student='.$user_id.'">'.
Display::return_icon('statistics.png', get_lang('Reporting')).
'</a>&nbsp;';
'</a>';
}
if (api_is_platform_admin(true)) {
@ -638,14 +677,14 @@ function modify_filter($user_id, $url_params, $row)
[],
ICON_SIZE_SMALL
).
'</a>&nbsp;';
'</a>';
} else {
$result .= Display::return_icon(
'edit_na.png',
get_lang('Edit'),
[],
ICON_SIZE_SMALL
).'</a>&nbsp;';
).'</a>';
}
}
@ -1096,16 +1135,16 @@ if (api_is_western_name_order()) {
$table->set_header(5, get_lang('LoginName'));
$table->set_header(6, get_lang('Email'));
$table->set_header(7, get_lang('Profile'));
$table->set_header(8, get_lang('Active'), true);
$table->set_header(9, get_lang('RegistrationDate'), true);
$table->set_header(10, get_lang('Action'), false);
//$table->set_header(8, get_lang('Active'), true);
$table->set_header(8, get_lang('RegistrationDate'), true);
$table->set_header(9, get_lang('Action'), false);
$table->set_column_filter(3, 'user_filter');
$table->set_column_filter(4, 'user_filter');
$table->set_column_filter(6, 'email_filter');
$table->set_column_filter(7, 'status_filter');
$table->set_column_filter(8, 'active_filter');
$table->set_column_filter(10, 'modify_filter');
//$table->set_column_filter(8, 'active_filter');
$table->set_column_filter(9, 'modify_filter');
// Only show empty actions bar if delete users has been blocked
$actionsList = [];

@ -624,7 +624,8 @@ class Display
public static function encrypted_mailto_link(
$email,
$clickable_text = null,
$style_class = ''
$style_class = '',
$cut = false
) {
if (is_null($clickable_text)) {
$clickable_text = $email;
@ -658,7 +659,11 @@ class Display
);
}
// Return encrypted mailto hyperlink
return '<a href="'.$hmail.'"'.$style_class.' class="clickable_email_link">'.$hclickable_text.'</a>';
$classCut = '';
if($cut){
$classCut = 'cut-email';
}
return '<a href="'.$hmail.'"'.$style_class.' class="clickable_email_link '.$classCut.'">'.$hclickable_text.'</a>';
}
/**

@ -132,7 +132,7 @@ class SortableTable extends HTML_Table
$table_id = $table_name.uniqid();
}
$this->table_id = $table_id;
parent::__construct(['class' => 'table '.$style, 'id' => $table_id]);
parent::__construct(['class' => 'table table-hover mt-4 mb-4'.$style, 'id' => $table_id]);
$this->table_name = $table_name;
$this->additional_parameters = [];
$this->param_prefix = $table_name.'_';
@ -957,11 +957,11 @@ class SortableTable extends HTML_Table
}
if (count($this->form_actions) > 0) {
if (strlen($row[0]) > 0) {
$row[0] = '<input type="checkbox" name="'.$this->checkbox_name.'[]" value="'.$row[0].'"';
$row[0] = '<div class="checkbox" ><label><input type="checkbox" name="'.$this->checkbox_name.'[]" value="'.$row[0].'"';
if (isset($_GET[$this->param_prefix.'selectall'])) {
$row[0] .= ' checked="checked"';
}
$row[0] .= '/>';
$row[0] .= '/><span class="checkbox-material"><span class="check"></span></span></label></div>';
}
}
if (is_array($row)) {

Loading…
Cancel
Save