From e5eb6b4421b71197165dca8247bd08b7216b9a68 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alex=20Arag=C3=B3n?= Date: Thu, 7 Feb 2019 16:02:14 -0500 Subject: [PATCH] fix table user list - refs #2681 --- assets/css/scss/_base.scss | 178 +++++++++++++++++++++++--- assets/css/scss/_variables.scss | 10 +- main/admin/user_list.php | 89 +++++++++---- main/inc/lib/display.lib.php | 9 +- main/inc/lib/sortable_table.class.php | 6 +- 5 files changed, 239 insertions(+), 53 deletions(-) diff --git a/assets/css/scss/_base.scss b/assets/css/scss/_base.scss index a292e92f97..6ee3c6f57f 100644 --- a/assets/css/scss/_base.scss +++ b/assets/css/scss/_base.scss @@ -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 { diff --git a/assets/css/scss/_variables.scss b/assets/css/scss/_variables.scss index 1aa664fa95..3b20711a8d 100644 --- a/assets/css/scss/_variables.scss +++ b/assets/css/scss/_variables.scss @@ -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 // --------------------------------------------------------- diff --git a/main/admin/user_list.php b/main/admin/user_list.php index cbf643d372..4b07c824f5 100755 --- a/main/admin/user_list.php +++ b/main/admin/user_list.php @@ -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 = '
'.$photo.'' + .$iconAdmin.''.$iconActive.'
'; + // 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 = '
'; + $result = '
'; if (!$user_is_anonymous) { $icon = Display::return_icon( 'course.png', @@ -563,7 +602,7 @@ function modify_filter($user_id, $url_params, $row) ); $result .= ' '.$icon.' -
  
+
'; $icon = Display::return_icon( @@ -573,19 +612,19 @@ function modify_filter($user_id, $url_params, $row) ); $result .= ' '.$icon.' -
  
+
'; } else { - $result .= Display::return_icon('course_na.png', get_lang('Courses')).'  '; - $result .= Display::return_icon('course_na.png', get_lang('Sessions')).'  '; + $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 .= ''. - Display::return_icon('info2.png', get_lang('Info')).'  '; + Display::return_icon('info2.png', get_lang('Info')).''; } else { - $result .= Display::return_icon('info2_na.png', get_lang('Info')).'  '; + $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 .= ''. - Display::return_icon('login_as.png', get_lang('LoginAs')).' '; + Display::return_icon('login_as.png', get_lang('LoginAs')).''; } else { - $result .= Display::return_icon('login_as_na.png', get_lang('LoginAs')).' '; + $result .= Display::return_icon('login_as_na.png', get_lang('LoginAs')); } } else { - $result .= Display::return_icon('login_as_na.png', get_lang('LoginAs')).' '; + $result .= Display::return_icon('login_as_na.png', get_lang('LoginAs')); } } else { - $result .= Display::return_icon('login_as_na.png', get_lang('LoginAs')).' '; + $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') - ).' '; + ); } else { $result .= ''. Display::return_icon('statistics.png', get_lang('Reporting')). - ' '; + ''; } if (api_is_platform_admin(true)) { @@ -638,14 +677,14 @@ function modify_filter($user_id, $url_params, $row) [], ICON_SIZE_SMALL ). - ' '; + ''; } else { $result .= Display::return_icon( 'edit_na.png', get_lang('Edit'), [], ICON_SIZE_SMALL - ).' '; + ).''; } } @@ -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 = []; diff --git a/main/inc/lib/display.lib.php b/main/inc/lib/display.lib.php index 7bcd4a91e9..e39c32eab5 100755 --- a/main/inc/lib/display.lib.php +++ b/main/inc/lib/display.lib.php @@ -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 ''.$hclickable_text.''; + $classCut = ''; + if($cut){ + $classCut = 'cut-email'; + } + return ''.$hclickable_text.''; } /** diff --git a/main/inc/lib/sortable_table.class.php b/main/inc/lib/sortable_table.class.php index 82824357e4..84821ae23d 100755 --- a/main/inc/lib/sortable_table.class.php +++ b/main/inc/lib/sortable_table.class.php @@ -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] = 'checkbox_name.'[]" value="'.$row[0].'"'; if (isset($_GET[$this->param_prefix.'selectall'])) { $row[0] .= ' checked="checked"'; } - $row[0] .= '/>'; + $row[0] .= '/>
'; } } if (is_array($row)) {