Skip to content

Modernize UI: vertical card menus, dual-panel multi-select widgets, a… #457

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nykroy wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Modernize UI: vertical card menus, dual-panel multi-select widgets, a… #457

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
135 changes: 112 additions & 23 deletions admin/code/tce_edit_test.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -970,55 +970,144 @@

echo '<div class="row">' . K_NEWLINE;
echo '<span class="label">' . K_NEWLINE;
echo '<label for="user_groups">' . $l['w_groups'] . '</label>' . K_NEWLINE;
echo '<label>' . $l['w_groups'] . '</label>' . K_NEWLINE;
echo '</span>' . K_NEWLINE;
echo '<span class="formw">' . K_NEWLINE;
echo '<select name="user_groups[]" id="user_groups" size="5" multiple="multiple">' . K_NEWLINE;
//$sql = F_user_group_select_sql();

echo '<div id="groups_container">' . K_NEWLINE;
echo '<input type="text" class="ms-search" id="groups_search" placeholder="&#128269; ' . htmlspecialchars($l['w_search'] ?? 'Search', ENT_COMPAT, $l['a_meta_charset']) . '..." />' . K_NEWLINE;
echo '<div class="ms-widget">' . K_NEWLINE;
echo '<div class="ms-panel" id="groups_available"><div class="ms-panel-title">' . htmlspecialchars($l['w_available'] ?? 'Available', ENT_NOQUOTES, $l['a_meta_charset']) . '</div><div id="groups_available_list"></div></div>' . K_NEWLINE;
echo '<div class="ms-arrows"><button type="button" onclick="msAddAll(\'groups\')" title="Add all">&raquo;</button><button type="button" onclick="msRemoveAll(\'groups\')" title="Remove all">&laquo;</button></div>' . K_NEWLINE;
echo '<div class="ms-panel ms-selected" id="groups_selected"><div class="ms-panel-title">' . htmlspecialchars($l['w_selected'] ?? 'Selected', ENT_NOQUOTES, $l['a_meta_charset']) . '</div><div id="groups_selected_list"></div></div>' . K_NEWLINE;
echo '</div></div>' . K_NEWLINE;

echo '<div id="groups_hidden_inputs">' . K_NEWLINE;
$sql = 'SELECT * FROM ' . K_TABLE_GROUPS . ' ORDER BY group_name';
$all_groups_json = [];
if ($r = F_db_query($sql, $db)) {
while ($m = F_db_fetch_array($r)) {
echo '<option value="' . $m['group_id'] . '"';
if (isset($test_id) && $test_id > 0 && F_isTestOnGroup($test_id, $m['group_id'])) {
echo ' selected="selected"';
$gid = (int) $m['group_id'];
$is_sel = (isset($test_id) && $test_id > 0 && F_isTestOnGroup($test_id, $gid));
$all_groups_json[] = '{"id":' . $gid . ',"name":"' . addslashes($m['group_name']) . '","sel":' . ($is_sel ? 'true' : 'false') . '}';
if ($is_sel) {
echo '<input type="hidden" name="user_groups[]" value="' . $gid . '" />' . K_NEWLINE;
}

echo '>' . htmlspecialchars($m['group_name'], ENT_NOQUOTES, $l['a_meta_charset']) . '</option>' . K_NEWLINE;
}
} else {
echo '</select></span></div>' . K_NEWLINE;
F_display_db_error();
}

echo '</select>' . K_NEWLINE;
echo '</span>' . K_NEWLINE;
echo '</div>' . K_NEWLINE;

echo '</span></div>' . K_NEWLINE;

echo '<div class="row">' . K_NEWLINE;
echo '<span class="label">' . K_NEWLINE;
echo '<label for="sslcerts">' . $l['w_sslcerts'] . '</label>' . K_NEWLINE;
echo '<label>' . $l['w_sslcerts'] . '</label>' . K_NEWLINE;
echo '</span>' . K_NEWLINE;
echo '<span class="formw">' . K_NEWLINE;
echo '<select name="sslcerts[]" id="sslcerts" size="5" multiple="multiple">' . K_NEWLINE;

echo '<div id="ssl_container">' . K_NEWLINE;
echo '<input type="text" class="ms-search" id="ssl_search" placeholder="&#128269; ' . htmlspecialchars($l['w_search'] ?? 'Search', ENT_COMPAT, $l['a_meta_charset']) . '..." />' . K_NEWLINE;
echo '<div class="ms-widget">' . K_NEWLINE;
echo '<div class="ms-panel" id="ssl_available"><div class="ms-panel-title">' . htmlspecialchars($l['w_available'] ?? 'Available', ENT_NOQUOTES, $l['a_meta_charset']) . '</div><div id="ssl_available_list"></div></div>' . K_NEWLINE;
echo '<div class="ms-arrows"><button type="button" onclick="msAddAll(\'ssl\')" title="Add all">&raquo;</button><button type="button" onclick="msRemoveAll(\'ssl\')" title="Remove all">&laquo;</button></div>' . K_NEWLINE;
echo '<div class="ms-panel ms-selected" id="ssl_selected"><div class="ms-panel-title">' . htmlspecialchars($l['w_selected'] ?? 'Selected', ENT_NOQUOTES, $l['a_meta_charset']) . '</div><div id="ssl_selected_list"></div></div>' . K_NEWLINE;
echo '</div></div>' . K_NEWLINE;

echo '<div id="ssl_hidden_inputs">' . K_NEWLINE;
$sql = 'SELECT * FROM ' . K_TABLE_SSLCERTS . ' ORDER BY ssl_name';
$all_ssl_json = [];
if ($r = F_db_query($sql, $db)) {
while ($m = F_db_fetch_array($r)) {
echo '<option value="' . $m['ssl_id'] . '"';
if (isset($test_id) && $test_id > 0 && F_isTestOnSSLCerts($test_id, $m['ssl_id'])) {
echo ' selected="selected"';
$sid = (int) $m['ssl_id'];
$sname = $m['ssl_name'] . ' (' . substr($m['ssl_end_date'], 0, 10) . ')';
$is_sel = (isset($test_id) && $test_id > 0 && F_isTestOnSSLCerts($test_id, $sid));
$all_ssl_json[] = '{"id":' . $sid . ',"name":"' . addslashes($sname) . '","sel":' . ($is_sel ? 'true' : 'false') . '}';
if ($is_sel) {
echo '<input type="hidden" name="sslcerts[]" value="' . $sid . '" />' . K_NEWLINE;
}

echo '>' . htmlspecialchars($m['ssl_name'] . ' (' . substr($m['ssl_end_date'], 0, 10) . ')', ENT_NOQUOTES, $l['a_meta_charset']) . '</option>' . K_NEWLINE;
}
} else {
echo '</select></span></div>' . K_NEWLINE;
F_display_db_error();
}

echo '</select>' . K_NEWLINE;
echo '</span>' . K_NEWLINE;
echo '</div>' . K_NEWLINE;

echo '</span></div>' . K_NEWLINE;

echo '<script type="text/javascript">
//<![CDATA[
var msData = {};
msData["groups"] = {items: [' . implode(',', $all_groups_json) . '], hiddenName: "user_groups[]"};
msData["ssl"] = {items: [' . implode(',', $all_ssl_json) . '], hiddenName: "sslcerts[]"};

function msRender(key) {
var d = msData[key];
var searchVal = document.getElementById(key + "_search").value.toLowerCase();
var avail = document.getElementById(key + "_available_list");
var sel = document.getElementById(key + "_selected_list");
var hidden = document.getElementById(key + "_hidden_inputs");
avail.innerHTML = "";
sel.innerHTML = "";
hidden.innerHTML = "";
var hasAvail = false, hasSel = false;
for (var i = 0; i < d.items.length; i++) {
var item = d.items[i];
var el = document.createElement("span");
el.className = "ms-item " + (item.sel ? "ms-item-selected" : "ms-item-available");
el.textContent = item.name;
el.setAttribute("data-idx", i);
el.setAttribute("data-key", key);
el.onclick = function() {
var k = this.getAttribute("data-key");
var idx = parseInt(this.getAttribute("data-idx"));
msData[k].items[idx].sel = !msData[k].items[idx].sel;
msRender(k);
};
if (item.sel) {
sel.appendChild(el);
hasSel = true;
var inp = document.createElement("input");
inp.type = "hidden";
inp.name = d.hiddenName;
inp.value = item.id;
hidden.appendChild(inp);
} else {
if (searchVal === "" || item.name.toLowerCase().indexOf(searchVal) !== -1) {
avail.appendChild(el);
hasAvail = true;
}
}
}
if (!hasAvail) { avail.innerHTML = "<div class=\\"ms-empty\\">---</div>"; }
if (!hasSel) { sel.innerHTML = "<div class=\\"ms-empty\\">---</div>"; }
}

function msAddAll(key) {
var d = msData[key];
var s = document.getElementById(key + "_search").value.toLowerCase();
for (var i = 0; i < d.items.length; i++) {
if (!d.items[i].sel && (s === "" || d.items[i].name.toLowerCase().indexOf(s) !== -1)) {
d.items[i].sel = true;
}
}
msRender(key);
}

function msRemoveAll(key) {
for (var i = 0; i < msData[key].items.length; i++) {
msData[key].items[i].sel = false;
}
msRender(key);
}

document.getElementById("groups_search").onkeyup = function() { msRender("groups"); };
document.getElementById("ssl_search").onkeyup = function() { msRender("ssl"); };
msRender("groups");
msRender("ssl");
//]]>
</script>' . K_NEWLINE;

echo getFormRowTextInput('test_score_right', $l['w_score_right'], $l['h_score_right'], '', $test_score_right, '^([0-9\+\-]*)([\.]?)([0-9]*)$', 20, false, false, false);
echo getFormRowTextInput('test_score_wrong', $l['w_score_wrong'], $l['h_score_wrong'], '', $test_score_wrong, '^([0-9\+\-]*)([\.]?)([0-9]*)$', 20, false, false, false);
echo getFormRowTextInput('test_score_unanswered', $l['w_score_unanswered'], $l['h_score_unanswered'], '', $test_score_unanswered, '^([0-9\+\-]*)([\.]?)([0-9]*)$', 20, false, false, false);
Expand Down
106 changes: 91 additions & 15 deletions admin/code/tce_edit_user.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -486,33 +486,109 @@

echo '<div class="row">' . K_NEWLINE;
echo '<span class="label">' . K_NEWLINE;
echo '<label for="user_groups">' . $l['w_groups'] . '</label>' . K_NEWLINE;
echo '<label>' . $l['w_groups'] . '</label>' . K_NEWLINE;
echo '</span>' . K_NEWLINE;
echo '<span class="formw">' . K_NEWLINE;
echo '<select name="user_groups[]" id="user_groups" size="5" multiple="multiple">' . K_NEWLINE;

echo '<div id="ugroups_container">' . K_NEWLINE;
echo '<input type="text" class="ms-search" id="ugroups_search" placeholder="&#128269; ' . htmlspecialchars($l['w_search'] ?? 'Search', ENT_COMPAT, $l['a_meta_charset']) . '..." />' . K_NEWLINE;
echo '<div class="ms-widget">' . K_NEWLINE;
echo '<div class="ms-panel" id="ugroups_available"><div class="ms-panel-title">' . htmlspecialchars($l['w_available'] ?? 'Available', ENT_NOQUOTES, $l['a_meta_charset']) . '</div><div id="ugroups_available_list"></div></div>' . K_NEWLINE;
echo '<div class="ms-arrows"><button type="button" onclick="msAddAll(\'ugroups\')" title="Add all">&raquo;</button><button type="button" onclick="msRemoveAll(\'ugroups\')" title="Remove all">&laquo;</button></div>' . K_NEWLINE;
echo '<div class="ms-panel ms-selected" id="ugroups_selected"><div class="ms-panel-title">' . htmlspecialchars($l['w_selected'] ?? 'Selected', ENT_NOQUOTES, $l['a_meta_charset']) . '</div><div id="ugroups_selected_list"></div></div>' . K_NEWLINE;
echo '</div></div>' . K_NEWLINE;

echo '<div id="ugroups_hidden_inputs">' . K_NEWLINE;
$sql = 'SELECT * FROM ' . K_TABLE_GROUPS . ' ORDER BY group_name';
$ugroups_json = [];
if ($r = F_db_query($sql, $db)) {
while ($m = F_db_fetch_array($r)) {
echo '<option value="' . $m['group_id'] . '"';
if (! F_isAuthorizedEditorForGroup($m['group_id'])) {
echo ' style="text-decoration:line-through;"';
$gid = (int) $m['group_id'];
$is_auth = F_isAuthorizedEditorForGroup($gid);
$is_sel = F_isUserOnGroup($user_id, $gid);
$gname = ($is_sel ? '* ' : '') . $m['group_name'] . ($is_auth ? '' : ' ✗');
$ugroups_json[] = '{"id":' . $gid . ',"name":"' . addslashes($gname) . '","sel":' . ($is_sel ? 'true' : 'false') . ',"auth":' . ($is_auth ? 'true' : 'false') . '}';
if ($is_sel) {
echo '<input type="hidden" name="user_groups[]" value="' . $gid . '" />' . K_NEWLINE;
}
}
} else {
F_display_db_error();
}
echo '</div>' . K_NEWLINE;

if (F_isUserOnGroup($user_id, $m['group_id'])) {
echo ' selected="selected"';
$m['group_name'] = '* ' . $m['group_name'];
echo '</span></div>' . K_NEWLINE;

echo '<script type="text/javascript">
//<![CDATA[
var msData = {};
msData["ugroups"] = {items: [' . implode(',', $ugroups_json) . '], hiddenName: "user_groups[]"};

function msRender(key) {
var d = msData[key];
var searchVal = document.getElementById(key + "_search").value.toLowerCase();
var avail = document.getElementById(key + "_available_list");
var sel = document.getElementById(key + "_selected_list");
var hidden = document.getElementById(key + "_hidden_inputs");
avail.innerHTML = "";
sel.innerHTML = "";
hidden.innerHTML = "";
var hasAvail = false, hasSel = false;
for (var i = 0; i < d.items.length; i++) {
var item = d.items[i];
var el = document.createElement("span");
el.className = "ms-item " + (item.sel ? "ms-item-selected" : "ms-item-available");
if (item.auth === false) { el.style.textDecoration = "line-through"; el.style.opacity = "0.6"; }
el.textContent = item.name;
el.setAttribute("data-idx", i);
el.setAttribute("data-key", key);
el.onclick = function() {
var k = this.getAttribute("data-key");
var idx = parseInt(this.getAttribute("data-idx"));
msData[k].items[idx].sel = !msData[k].items[idx].sel;
msRender(k);
};
if (item.sel) {
sel.appendChild(el);
hasSel = true;
var inp = document.createElement("input");
inp.type = "hidden";
inp.name = d.hiddenName;
inp.value = item.id;
hidden.appendChild(inp);
} else {
if (searchVal === "" || item.name.toLowerCase().indexOf(searchVal) !== -1) {
avail.appendChild(el);
hasAvail = true;
}
}
}
if (!hasAvail) { avail.innerHTML = "<div class=\\"ms-empty\\">---</div>"; }
if (!hasSel) { sel.innerHTML = "<div class=\\"ms-empty\\">---</div>"; }
}

function msAddAll(key) {
var d = msData[key];
var s = document.getElementById(key + "_search").value.toLowerCase();
for (var i = 0; i < d.items.length; i++) {
if (!d.items[i].sel && (s === "" || d.items[i].name.toLowerCase().indexOf(s) !== -1)) {
d.items[i].sel = true;
}
}
msRender(key);
}

echo '>' . htmlspecialchars($m['group_name'], ENT_NOQUOTES, $l['a_meta_charset']) . '</option>' . K_NEWLINE;
function msRemoveAll(key) {
for (var i = 0; i < msData[key].items.length; i++) {
msData[key].items[i].sel = false;
}
} else {
echo '</select></span></div>' . K_NEWLINE;
F_display_db_error();
msRender(key);
}

echo '</select>' . K_NEWLINE;
echo '</span>' . K_NEWLINE;
echo '</div>' . K_NEWLINE;
document.getElementById("ugroups_search").onkeyup = function() { msRender("ugroups"); };
msRender("ugroups");
//]]>
</script>' . K_NEWLINE;

echo getFormRowTextInput('user_otpkey', $l['w_otpkey'], $l['h_otpkey'], '', $user_otpkey, '', 255, false, false, false);

Expand Down
31 changes: 26 additions & 5 deletions admin/code/tce_menu_modules.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,13 +40,34 @@

echo '<div class="container">' . K_NEWLINE;

// print submenu
echo '<ul>' . K_NEWLINE;
// Modern vertical menu with icons
$module_icons = [
'tce_edit_module.php' => '&#128218;',
'tce_edit_subject.php' => '&#128209;',
'tce_edit_question.php' => '&#10067;',
'tce_edit_answer.php' => '&#9989;',
'tce_show_all_questions.php' => '&#128203;',
'tce_import_questions.php' => '&#128228;',
'tce_filemanager.php' => '&#128193;',
'tce_edit_sslcerts.php' => '&#128274;',
];

echo '<div class="vmenu">' . K_NEWLINE;
foreach ($menu['tce_menu_modules.php']['sub'] as $link => $data) {
echo F_menu_link($link, $data, 1);
if (! $data['enabled'] || $_SESSION['session_user_level'] < $data['level']) {
continue;
}
$icon = isset($module_icons[$link]) ? $module_icons[$link] : '&#128196;';
echo '<a href="' . $data['link'] . '" class="vmenu-item" title="' . htmlspecialchars($data['title'], ENT_COMPAT, $l['a_meta_charset']) . '">' . K_NEWLINE;
echo '<span class="vmenu-icon">' . $icon . '</span>' . K_NEWLINE;
echo '<span class="vmenu-text">' . K_NEWLINE;
echo '<span class="vmenu-name">' . htmlspecialchars($data['name'], ENT_NOQUOTES, $l['a_meta_charset']) . '</span>' . K_NEWLINE;
echo '<span class="vmenu-desc">' . htmlspecialchars($data['title'], ENT_NOQUOTES, $l['a_meta_charset']) . '</span>' . K_NEWLINE;
echo '</span>' . K_NEWLINE;
echo '<span class="vmenu-arrow">&rsaquo;</span>' . K_NEWLINE;
echo '</a>' . K_NEWLINE;
}

echo '</ul>' . K_NEWLINE;
echo '</div>' . K_NEWLINE;

//echo '<div class="pagehelp">'.$l['w_modules'].'</div>'.K_NEWLINE;
echo '</div>' . K_NEWLINE;
Expand Down
30 changes: 25 additions & 5 deletions admin/code/tce_menu_tests.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,13 +40,33 @@

echo '<div class="container">' . K_NEWLINE;

// print submenu
echo '<ul>' . K_NEWLINE;
// Modern vertical menu with icons
$test_icons = [
'tce_edit_test.php' => '&#128221;',
'tce_select_tests.php' => '&#128269;',
'tce_import_omr_answers.php' => '&#128196;',
'tce_import_omr_bulk.php' => '&#128230;',
'tce_edit_rating.php' => '&#11088;',
'tce_show_result_allusers.php' => '&#128202;',
'tce_show_result_user.php' => '&#128100;',
];

echo '<div class="vmenu">' . K_NEWLINE;
foreach ($menu['tce_menu_tests.php']['sub'] as $link => $data) {
echo F_menu_link($link, $data, 1);
if (! $data['enabled'] || $_SESSION['session_user_level'] < $data['level']) {
continue;
}
$icon = isset($test_icons[$link]) ? $test_icons[$link] : '&#128196;';
echo '<a href="' . $data['link'] . '" class="vmenu-item" title="' . htmlspecialchars($data['title'], ENT_COMPAT, $l['a_meta_charset']) . '">' . K_NEWLINE;
echo '<span class="vmenu-icon">' . $icon . '</span>' . K_NEWLINE;
echo '<span class="vmenu-text">' . K_NEWLINE;
echo '<span class="vmenu-name">' . htmlspecialchars($data['name'], ENT_NOQUOTES, $l['a_meta_charset']) . '</span>' . K_NEWLINE;
echo '<span class="vmenu-desc">' . htmlspecialchars($data['title'], ENT_NOQUOTES, $l['a_meta_charset']) . '</span>' . K_NEWLINE;
echo '</span>' . K_NEWLINE;
echo '<span class="vmenu-arrow">&rsaquo;</span>' . K_NEWLINE;
echo '</a>' . K_NEWLINE;
}

echo '</ul>' . K_NEWLINE;
echo '</div>' . K_NEWLINE;

//echo '<div class="pagehelp">'.$l['w_tests'].'</div>'.K_NEWLINE;
echo '</div>' . K_NEWLINE;
Expand Down
Loading