cerebrate-project
/
cerebrate
mirror of https://github.com/cerebrate-project/cerebrate
1
0
Fork 0
Code Issues Releases Wiki Activity

chg: [layout:sidebar] Started integration of sidebar - WiP

pull/72/head
mokaddem 2021-09-07 15:51:21 +02:00
parent 256b39691c
commit 50c4a31a2e
10 changed files with 320 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/Controller/Component/ACLComponent.php
View File

@ -11,6 +11,7 @@ use Cake\ORM\TableRegistry;
use Cake\Core\Configure;
use Cake\Core\Configure\Engine\PhpConfig;
use Cake\Utility\Inflector;
use Cake\Routing\Router;
class ACLComponent extends Component
{
@ -458,6 +459,7 @@ class ACLComponent extends Component
'ContactDB' => [
'Individuals' => [
'label' => __('Individuals'),
'icon' => 'address-book',
'url' => '/individuals/index',
'children' => [
'index' => [
@ -493,6 +495,7 @@ class ACLComponent extends Component
],
'Organisations' => [
'label' => __('Organisations'),
'icon' => 'building',
'url' => '/organisations/index',
'children' => [
'index' => [
@ -528,6 +531,7 @@ class ACLComponent extends Component
],
'EncryptionKeys' => [
'label' => __('Encryption keys'),
'icon' => 'key',
'url' => '/encryptionKeys/index',
'children' => [
'index' => [
@ -552,6 +556,7 @@ class ACLComponent extends Component
'Trust Circles' => [
'SharingGroups' => [
'label' => __('Sharing Groups'),
'icon' => 'user-friends',
'url' => '/sharingGroups/index',
'children' => [
'index' => [
@ -583,6 +588,7 @@ class ACLComponent extends Component
'Sync' => [
'Broods' => [
'label' => __('Broods'),
'icon' => 'network-wired',
'url' => '/broods/index',
'children' => [
'index' => [
@ -620,6 +626,7 @@ class ACLComponent extends Component
'Administration' => [
'Roles' => [
'label' => __('Roles'),
'icon' => 'id-badge',
'url' => '/roles/index',
'children' => [
'index' => [
@ -655,6 +662,7 @@ class ACLComponent extends Component
],
'Users' => [
'label' => __('Users'),
'icon' => 'users',
'url' => '/users/index',
'children' => [
'index' => [
@ -690,6 +698,7 @@ class ACLComponent extends Component
],
'Inbox' => [
'label' => __('Inbox'),
'icon' => 'inbox',
'url' => '/inbox/index',
'children' => [
'index' => [
@ -722,6 +731,7 @@ class ACLComponent extends Component
],
'Outbox' => [
'label' => __('Outbox'),
'icon' => 'inbox',
'url' => '/outbox/index',
'children' => [
'index' => [
@ -751,6 +761,7 @@ class ACLComponent extends Component
],
'MetaTemplates' => [
'label' => __('Meta Field Templates'),
'icon' => 'object-group',
'url' => '/metaTemplates/index',
'children' => [
'index' => [
@ -781,6 +792,7 @@ class ACLComponent extends Component
],
'LocalTools' => [
'label' => __('Local Tools'),
'icon' => 'tools',
'url' => '/localTools/index',
'children' => [
'index' => [
@ -810,6 +822,7 @@ class ACLComponent extends Component
'Instance' => [
__('Instance'),
'url' => '/instance/home',
'icon' => 'database',
'children' => [
'migration' => [
'url' => '/instance/migrationIndex',
@ -821,6 +834,7 @@ class ACLComponent extends Component
'Cerebrate' => [
'Roles' => [
'label' => __('Roles'),
'icon' => 'id-badge',
'url' => '/roles/index',
'children' => [
'index' => [
@ -845,6 +859,7 @@ class ACLComponent extends Component
'Instance' => [
__('Instance'),
'url' => '/instance/home',
'icon' => 'home',
'children' => [
'home' => [
'url' => '/instance/home',
@ -854,6 +869,7 @@ class ACLComponent extends Component
],
'Users' => [
__('My Profile'),
'icon' => 'user-circle',
'children' => [
'View My Profile' => [
'url' => '/users/view',
@ -872,6 +888,7 @@ class ACLComponent extends Component
'Open' => [
'Organisations' => [
'label' => __('Organisations'),
'icon' => 'buildings',
'url' => '/open/organisations/index',
'children' => [
'index' => [
@ -883,6 +900,7 @@ class ACLComponent extends Component
],
'Individuals' => [
'label' => __('Individuals'),
'icon' => 'address-book',
'url' => '/open/individuals/index',
'children' => [
'index' => [

1
templates/element/genericElements/side_menu_scaffold.php
View File

@ -1,4 +1,5 @@
<?php
// return;
$children = '';
$backgroundColour = $darkMode ? 'bg-dark' : 'bg-light';
if (isset($menu[$metaGroup])) {

11
templates/element/layouts/header.php Normal file
View File

@ -0,0 +1,11 @@
<div class="container-fluid bg-success">
<div class="left-navbar">
<span class="navbar-brand">Logo</span>
</div>
<div class="center-navbar">
Breadcrumb
</div>
<div class="right-navbar">
right
</div>
</div>

17
templates/element/layouts/sidebar.php Normal file
View File

@ -0,0 +1,17 @@
<div class="sidebar-wrapper">
<div class="sidebar-scroll">
<div class="sidebar-content">
<ul class="sidebar-elements">
<?php foreach ($menu as $category => $categorized): ?>
<?= $this->element('layouts/sidebar/category', ['label' => $category]) ?>
<?php foreach ($categorized as $parentName => $parent): ?>
<?= $this->element('layouts/sidebar/entry', [
'parent' => $parent,
])
?>
<?php endforeach; ?>
<?php endforeach; ?>
</ul>
</div>
</div>
</div>

4
templates/element/layouts/sidebar/category.php Normal file
View File

@ -0,0 +1,4 @@
<li class="category text-muted">
<span class="category-label"><?= h($label) ?></span>
<span class="category-divider"><hr /></span>
</li>

44
templates/element/layouts/sidebar/entry.php Normal file
View File

@ -0,0 +1,44 @@
<?php
$seed = 'sb-' . mt_rand();
$icon = $parent['icon'] ?? '';
$label = $parent['label'] ?? '';
$children = $parent['children'] ?? [];
if ($label == 'List organisations') {
$children = [
[
'label' => 'level 1',
'children' => [
'Level 2' => [
'label' => 'level 2',
'children' => [
'Level 3' => [
'label' => 'level 3',
]
]
]
]
]
];
}
if (!empty($children)) {
$url = "#{$seed}";
} else {
$url = $parent['url'] ?? '#';
}
?>
<?php if (empty($parent['skipTopMenu'])): ?>
<li class="<?= !empty($children) ? 'parent collapsed' : '' ?>">
<a class="sidebar-link <?= !empty($children) ? 'collapsed' : '' ?>" href="<?= h($url) ?>" data-toggle="collapse">
<i class="sidebar-icon <?= $this->FontAwesome->getClass($icon) ?>"></i>
<span class="text"><?= h($label) ?></span>
</a>
<?php if (!empty($children)): ?>
<?= $this->element('layouts/sidebar/sub-menu', [
'seed' => $seed,
'children' => $children,
]);
?>
<?php endif; ?>
</li>
<?php endif; ?>

12
templates/element/layouts/sidebar/sub-menu.php Normal file
View File

@ -0,0 +1,12 @@
<?php
$seed = $seed ?? 'sd-' . mt_rand();
?>
<ul id="<?= $seed ?>" class="sub-menu collapse">
<?php foreach ($children as $child): ?>
<?= $this->element('layouts/sidebar/entry', [
'parent' => $child,
])
?>
<?php endforeach; ?>
</ul>

31
templates/layout/default.php
View File

@ -35,6 +35,7 @@ $cakeDescription = 'Cerebrate';
?>
<?= $this->Html->css('main.css') ?>
<?= $this->Html->css('font-awesome') ?>
<?= $this->Html->css('layout.css') ?>
<?= $this->Html->script('jquery-3.5.1.min.js') ?>
<?= $this->Html->script('popper.min.js') ?>
<?= $this->Html->script('bootstrap.bundle.js') ?>
@ -48,27 +49,25 @@ $cakeDescription = 'Cerebrate';
<?= $this->Html->meta('favicon.ico', '/img/favicon.ico', ['type' => 'icon']); ?>
</head>
<body>
<header>
<?= $this->element('header') ?>
</header>
<main role="main">
<div class="container-fluid">
<div class="row">
<div class="col-1 d-none d-xl-block sidebar p-0">
<?= $this->element('side_menu') ?>
</div>
<div role="main" class="col-xl-11 col-lg-12 ml-sm-auto pt-3 px-4">
<div class="col-12 d-xl-none px-0"><?= $this->element('side_menu', ['minimal' => 1]) ?></div>
<?= $this->Flash->render() ?>
<?= $this->fetch('content') ?>
</div>
</div>
<div class="main-wrapper">
<header class="navbar top-navbar">
<?= $this->element('layouts/header') ?>
</header>
<div class="sidebar">
<?= $this->element('layouts/sidebar') ?>
</div>
</main>
<main role="main" class="content">
<div class="container-fluid">
<?= $this->Flash->render() ?>
<?= $this->fetch('content') ?>
</div>
</main>
</div>
<div id="mainModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mediumModalLabel" aria-hidden="true"></div>
<div id="mainToastContainer" style="position: absolute; top: 15px; right: 15px; z-index: 1080"></div>
<div id="mainModalContainer"></div>
</body>
<script>
const darkMode = (<?= empty($darkMode) ? 'false' : 'true' ?>)
</script>

196
webroot/css/layout.css Normal file
View File

@ -0,0 +1,196 @@
/* layout */
:root {
--navbar-height: 60px;
--sidebar-width: 230px;
}
.main-wrapper {
min-height: 100%;
padding-top: var(--navbar-height);
}
.top-navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 0;
margin-bottom: 0;
}
.content {
position: relative;
left: 0;
margin-left: var(--sidebar-width);
min-height: 100%;
background: red;
}
.sidebar {
height: 100%;
margin-top: var(--navbar-height);
position: fixed;
top: 0;
bottom: 0;
width: var(--sidebar-width);
left: 0;
}
.left-navbar {
}
.center-navbar {
display: flex;
flex: 1 1 auto;
line-height: var(--navbar-height);
padding: 0 20px;
}
.right-navbar {
display: flex;
flex: 0 0 auto;
padding-right: 20px;
}
/* sidebar */
.sidebar-wrapper {
width: 100%;
height: 100%;
}
.sidebar-scroll {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
.sidebar-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding-top: 10px;
}
ul.sidebar-elements {
margin: 0;
padding: 0;
}
/* sidebar entry */
ul.sidebar-elements > li {
list-style: none;
}
li.parent {
}
ul.sidebar-elements li > a.sidebar-link {
display: block;
padding: 0 20px;
line-height: 35px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-decoration: none;
color: unset;
}
ul.sidebar-elements > li > a.sidebar-link:hover {
background-color: #f0f0f0;
}
ul.sidebar-elements > li > a.sidebar-link > * {
text-align: center;
vertical-align: middle;
}
ul.sidebar-elements > li > a.sidebar-link > i.sidebar-icon {
margin-right: 10px;
font-size: 19px;
min-width: 19px;
line-height: 19px;
}
ul.sidebar-elements > li > a.sidebar-link > span.text {
line-height: 40px;
white-space: nowrap;
}
/* sidebar sub-menu */
ul.sidebar-elements li.parent > a.sidebar-link::before {
content: "\f0d7";
float: right;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 1rem;
color: #bbb;
}
ul.sidebar-elements li.parent > a.sidebar-link:not(.collapsed)::before {
content: "\f0d8";
}
ul.sidebar-elements > li ul {
padding: 10px 0;
list-style: none;
line-height: 20px;
}
ul.sidebar-elements > li ul li > a.sidebar-link {
font-size: 0.9rem;
padding-left: 35px;
padding-right: 17px;
}
ul.sidebar-elements > li ul li > a.sidebar-link:hover {
background-color: #e0e0e0;
}
ul.sidebar-elements > li ul li > ul > li > a.sidebar-link {
font-size: 0.85rem;
padding-left: 50px;
padding-right: 14px;
}
ul.sidebar-elements > li ul li > ul > li > ul > li > a.sidebar-link {
font-size: 0.8rem;
padding-left: 65px;
padding-right: 11px;
}
ul.sidebar-elements > li ul li > ul > li > ul > li > ul > li > a.sidebar-link {
font-size: 0.78rem;
padding-left: 80px;
padding-right: 8px;
}
/* sidebar category */
ul.sidebar-elements > li.category {
padding: 15px 20px 0;
line-height: 30px;
display: flex;
}
ul.sidebar-elements > li.category > span.category-label {
text-transform: uppercase;
font-size: 0.75rem;
font-weight: 600;
display: flex;
margin-right: 15px;
}
ul.sidebar-elements > li.category > span.category-divider {
flex: 1 0 0%;
display: flex;
align-items: center;
}
ul.sidebar-elements > li.category > span.category-divider > hr {
margin: 0;
height: 1px;
flex: 1 0 auto;
}

4
webroot/css/main.css
View File

@ -17,7 +17,7 @@
color:black;
}
.sidebar {}
/* .sidebar {}
.side-bar-ul {
top: 70px;
@ -87,7 +87,7 @@
.side-bar-ul>.sidebar-brand a:hover {
color: #fff;
background: none;
}
} */
@media(min-width:768px) {
#wrapper {