Skip to content

Improve repositories workspace UI #373

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

Closed
Cloud-Kid wants to merge 1 commit into from
Closed

Improve repositories workspace UI #373

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
37 changes: 37 additions & 0 deletions www/controllers/Layout/Container/vars/repos/properties.vars.inc.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<?php
$repoController = new \Controllers\Repo\Repo();
$taskController = new \Controllers\Task\Task();

// Get total repos count
$totalRepos = $repoController->count();

// Get used and free disk space in bytes, and also in percent
$diskTotalSpace = disk_total_space(REPOS_DIR);
$diskFreeSpace = disk_free_space(REPOS_DIR);
$diskUsedSpace = $diskTotalSpace - $diskFreeSpace;
$diskFreeSpaceHuman = \Controllers\Utils\Convert::sizeToHuman($diskFreeSpace);
$diskUsedSpaceHuman = \Controllers\Utils\Convert::sizeToHuman($diskUsedSpace);
$diskUsedSpacePercent = round(($diskUsedSpace / $diskTotalSpace) * 100);
$diskFreeSpacePercent = round(($diskFreeSpace / $diskTotalSpace) * 100);

// Get last and next scheduled tasks
$lastScheduledTask = $taskController->getLastScheduledTask();
$nextScheduledTasks = $taskController->getNextScheduledTask();

if (!empty($nextScheduledTasks)) {
$data = [];

foreach ($nextScheduledTasks as $task) {
$data[] = $taskController->getDayTimeLeft($task['Id']);
}

$nextScheduledTasks = $data;

// Sort tasks by date and time
array_multisort(array_column($nextScheduledTasks, 'date'), SORT_ASC, array_column($nextScheduledTasks, 'time'), SORT_ASC, $nextScheduledTasks);

// Remove duplicates when multiple tasks are scheduled for the same date and time
$nextScheduledTasks = array_unique($nextScheduledTasks, SORT_REGULAR);
}

unset($repoController, $taskController, $diskTotalSpace, $diskFreeSpace, $diskUsedSpace, $data);
1 change: 1 addition & 0 deletions www/controllers/Layout/Tab/Repos.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,6 @@ class Repos
public static function render()
{
Render::render('repos/list');
Render::render('repos/properties');
}
}
134 changes: 133 additions & 1 deletion www/public/resources/styles/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,117 @@ article {
font-size: 14px;
}

.repo-workspace-title {
display: flex;
justify-content: space-between;
align-items: flex-start;
}

.repo-workspace-title h3 {
margin-bottom: 6px;
}

.repo-command-bar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
padding: 12px 14px;
background-color: #182b3e;
border: 1px solid #24405c;
border-radius: 20px;
box-shadow: rgb(0 0 0) 0px 10px 13px -12px, rgb(0 0 0 / 15%) 0px 0px 10px 2px;
}

.repo-command-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
row-gap: 8px;
}

.repo-list-toolbar {
display: grid;
grid-template-columns: 1fr auto;
column-gap: 12px;
align-items: center;
}

.repo-side-workspace {
position: sticky;
top: 20px;
align-self: flex-start;
}

.repo-kpi-grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 12px;
margin-bottom: 20px;
}

.repo-kpi-card {
display: flex;
align-items: center;
column-gap: 12px;
min-width: 0;
padding: 14px;
background-color: #182b3e;
border: 1px solid #24405c;
border-radius: 20px;
box-shadow: rgb(0 0 0) 0px 10px 13px -12px, rgb(0 0 0 / 15%) 0px 0px 10px 2px;
}

.repo-kpi-value {
font-family: 'Archivo';
font-size: 24px;
font-weight: 700;
line-height: 1;
}

.repo-storage-meter {
width: 100%;
height: 9px;
overflow: hidden;
background-color: #0e1e2f;
border: 1px solid #24405c;
border-radius: 20px;
}

.repo-storage-meter span {
display: block;
height: 100%;
min-width: 3px;
background-color: #15bf7f;
border-radius: 20px;
}

.repo-timeline-item,
.repo-action-row {
display: flex;
align-items: center;
column-gap: 12px;
min-height: 38px;
padding: 8px 0;
color: white;
text-decoration: none;
}

.repo-timeline-item + .repo-timeline-item,
.repo-action-row + .repo-action-row {
border-top: 1px solid #24405c;
}

.repo-action-row {
cursor: pointer;
}

.repo-action-row:hover span,
.repo-timeline-item:hover p:first-child {
text-decoration: underline;
}

.repos-list-group-select-all-btns {
align-items: center;
margin-left: 380px;
Expand Down Expand Up @@ -639,4 +750,25 @@ footer #github img { width: 25px; }
.repos-list-group-flex-div {
grid-template-columns: 350px 55px auto auto auto 55px 1fr 40px;
}
}
}

@media (max-width:1499px) {
.repo-command-bar {
align-items: flex-start;
flex-direction: column;
}

.repo-command-actions {
justify-content: flex-start;
}

.repo-list-toolbar,
.repo-kpi-grid {
grid-template-columns: 1fr;
row-gap: 10px;
}

.repo-side-workspace {
position: static;
}
}
25 changes: 16 additions & 9 deletions www/views/includes/containers/repos/list.inc.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
<?php
use \Controllers\User\Permission\Repo as RepoPermission; ?>

<section class="section-main reloadable-container" container="repos/list">
<section class="section-left reloadable-container" container="repos/list">
<div class="reposList">
<h3 class="margin-bottom-40">REPOSITORIES</h3>
<div class="repo-workspace-title margin-bottom-20">
<div>
<h3>REPOSITORIES</h3>
<p class="mediumopacity-cst">Mirrors, snapshots and environments</p>
</div>
</div>

<div class="flex align-item-center justify-space-between column-gap-10 margin-bottom-10">
<div class="repo-command-bar margin-bottom-20">
<div class="flex flex-wrap align-item-center column-gap-10 row-gap-5">
<div class="flex align-item-center column-gap-5 mediumopacity-cst" title="Total repositories">
<img src="/assets/icons/package.svg" class="icon-np icon-medium" />
Expand Down Expand Up @@ -74,7 +79,7 @@
endif ?>
</div>

<div class="flex align-item-center">
<div class="repo-command-actions">
<?php
if (RepoPermission::allowedAction('edit-groups')) : ?>
<div class="slide-btn get-panel-btn mediumopacity" panel="repos/groups/list" title="Manage repos groups">
Expand Down Expand Up @@ -104,11 +109,13 @@

<?php
if (IS_ADMIN or (!empty(USER_PERMISSIONS['repositories']['view']['groups']) or in_array('all', USER_PERMISSIONS['repositories']['view']))) { ?>
<input id="repo-search-input" class="margin-bottom-10" type="text" placeholder="Search" onkeyup="myrepo.search()" title="Search by repository name, distribution, section or release version" />
<div class="repo-list-toolbar margin-bottom-10">
<input id="repo-search-input" type="text" placeholder="Search repositories, snapshots, environments" onkeyup="myrepo.search()" title="Search by repository name, distribution, section, release version, environment or description" />

<div class="flex justify-end column-gap-5 margin-bottom-10 margin-right-15">
<div id="hide-all-repo-groups" state="visible">
<img src="/assets/icons/view.svg" class="icon lowopacity pointer" title="Hide/Show all repositories groups" />
<div class="flex align-item-center column-gap-5">
<div id="hide-all-repo-groups" state="visible">
<img src="/assets/icons/view.svg" class="icon lowopacity pointer" title="Hide/Show all repositories groups" />
</div>
</div>
</div>

Expand All @@ -126,4 +133,4 @@
new EChart('doughnut', 'repo-storage-chart');
});
</script>
</section>
</section>
Loading
Loading