EDUCATIC
/
digitaldemocratic
mirror of https://gitlab.com/digitaldemocratic/digitaldemocratic
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(api,admin): added menu bar

darta 2022-01-24 17:37:36 +01:00
parent 39c68f52a0
commit 7dfd04b7b6
7 changed files with 346 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
admin/src/admin/static/templates/base.html
View File

@ -38,7 +38,7 @@
</head>
<body class="nav-md">
<div class="container body">
<div class="container body" style="margin-top: 50px;">
<div class="main_container">
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
@ -102,6 +102,18 @@
<script src="/static/vendor/fancytree/src/jquery-ui-dependencies/jquery-ui.min.js"></script>
<script src="/static/vendor/fancytree/dist/jquery.fancytree.min.js"></script>
<script src="/static/vendor/fancytree/src/jquery.fancytree.table.js"></script>
<!-- Header render -->
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: "GET",
url: "https://api."+document.domain.split(/\.(.+)/)[1]+"/header/html/admin",
success: function(data) {
$('#header').html(data)
}
})
})
</script>
<!-- flashed messages with pnotify -->
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}

53
admin/src/admin/static/templates/header.html
View File

@ -1,53 +1,2 @@
<div class="top_nav" >
<div class="nav_menu">
<nav class="" role="navigation" >
<div class="nav toggle">
<a id="menu_toggle"><i class="fa fa-bars"></i></a>
</div>
<img src="/custom/img/logo.png" class="nav_menu_logo" alt="dd">
<ul class="nav navbar-nav navbar-right">
<li class="">
<a href="javascript:" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<img src="/static/img/user.png" alt="..." >
<span class=" fa fa-angle-down"></span>
</a>
<ul class="dropdown-menu dropdown-usermenu pull-right">
<li><a href="/profile"><i class="fa fa-gear pull-right"></i> Profile</a></li>
<li><a href="/logout"><i class="fa fa-sign-out pull-right"></i> Log Out</a></li>
</ul>
</li>
<!-- <li role="presentation" class="sync-status">
<a href="javascript:" class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-spinner"></i>
<span class="badge"></span>
</a>
<ul id="menu1" class="dropdown-menu list-unstyled msg_list" role="menu">
<li>
<a>
<span class="image"><i class="fa fa-user"></i></span>
<span>
<span>Users</span>
<span class="time"><span class="perc"></span>%</span>
</span>
<span class="message">
Status <span class="have"></span> <span class="of"></span>
</span>
</a>
<a>
<span class="image"><i class="fa fa-users"></i></span>
<span>
<span>Groups</span>
<span class="time"><span class="perc"></span>%</span>
</span>
<span class="message">
Status <span class="have"></span> <span class="of"></span>
</span>
</a>
</li>
</ul>
</li> -->
</ul>
</nav>
</div>
<div id="header">
</div>

12
admin/src/admin/static/templates/sidebar.html
View File

@ -1,8 +1,4 @@
<div class="navbar nav_title" style="border: 0;">
<a href="/about" class="site_title">
<img src="/custom/img/logo.png" class="sidebar_logo logo_white" alt="dd">
<span>Digital Democratic</span>
</a>
</div>
<div class="clearfix"></div>
@ -18,13 +14,7 @@
<li><a href="/roles"><i class="fa fa-user-secret"></i> Roles</a></li>
<li><a href="/sysadmin/external"><i class="fa fa-external-link"></i> Import</a></li>
<li><a href="/dashboard"><i class="fa fa-paint-brush"></i> Customization</a></li>
{% if current_user.role == 'admin' %}
<h3>System Admin</h3>
<div class="clearfix"></div>
<li><a href="/sysadmin/users"><i class="fa fa-user"></i> SysAdminUsers</span></a></li>
<li><a href="/sysadmin/groups"><i class="fa fa-user"></i> SysAdminGroups</span></a></li>
<li><a href="/sysadmin/external"><i class="fa fa-external-link"></i> External</a></li>
{% endif %}
<li><a href="/legal"><i class="fa fa-legal"></i> Legal</a></li>
</ul>
<ul class="nav side-menu">
<li><a href="/about"><i class="fa fa-question"></i> About</span></a>

2
admin/src/admin/views/WebViews.py
View File

@ -90,7 +90,7 @@ def avatar(userid):
def dashboard(provider=False):
data = json.loads(requests.get("http://isard-sso-api/json").text)
return render_template(
"pages/dashboard.html", title="Dashboard", nav="Dashboard", data=data
"pages/dashboard.html", title="Customization", nav="Customization", data=data
)

9
docker/api/default.conf
View File

@ -72,6 +72,15 @@ server {
access_log off;
}
location /header/html/admin {
alias /api/api/static/templates/header_admin.html;
default_type text/html;
index header_admin.html
expires 1m;
log_not_found off;
access_log off;
}
location / {
try_files $uri $uri/
expires 1m;

8
docker/api/src/api/lib/menu.py
View File

@ -110,6 +110,7 @@ class Menu:
with open("api/static/templates/header.html", "w") as fh:
fh.write(output_from_parsed_template)
## Nextcloud. Nginx will serve /header/html/nextcloud -> header_nextcloud.html
with open("api/static/templates/header_nextcloud.html", "w") as fh:
fh.write(output_from_parsed_template)
with open("api/static/templates/header_nextcloud.html", "a") as fh:
@ -118,6 +119,13 @@ class Menu:
with open("api/static/templates/header.json", "w") as fh:
fh.write(json.dumps(self.menudict))
## Admin app. Nginx will serve /header/html/admin -> header_admin.html
template = env.get_template("admin.html")
output_from_parsed_template = template.render(data=self.menudict)
print(output_from_parsed_template)
with open("api/static/templates/header_admin.html", "w") as fh:
fh.write(output_from_parsed_template)
def get_header(self):
return self.menudict
# with open('menu.yaml', 'w') as yml:

313
docker/api/src/api/static/_templates/admin.html Normal file
View File

@ -0,0 +1,313 @@
{% block css %}
<style>
/* Header used classes */
header#header {
background-color: white !important;
box-shadow: 0 2px 4px #00000014;
border-bottom: 1px solid #262626;
display: inline-flex;
top: 0;
width: 100%;
z-index: 2000;
height: 50px;
position: absolute;
box-sizing: border-box;
justify-content: space-between;
}
#nextcloud {
padding: 7px 0;
padding-left: 86px;
position: relative;
height: 100%;
box-sizing: border-box;
opacity: 1;
align-items: center;
display: flex;
flex-wrap: wrap;
overflow: hidden;
}
a * {
cursor: pointer;
}
a {
border: 0;
color: var(--color-main-text);
text-decoration: none;
cursor: pointer;
}
#theming-preview-logo,
#header #nextcloud {
padding-left: 64px;
}
#header #header-left,
#header .header-left {
flex: 1 0;
white-space: nowrap;
min-width: 0;
}
#header #header-right,
#header .header-right {
justify-content: flex-end;
flex-shrink: 1;
}
#header .header-right > div,
#header .header-right > form {
height: 100%;
position: relative;
}
#header #navbar-menu-apps #menu-apps-btn {
cursor: pointer;
position: relative;
}
#header #navbar-menu-apps #menu-apps-btn #dropdownMenuAppsButton {
cursor: pointer;
height: 16px;
margin-right: 16px;
}
#header
#navbar-menu-apps
#menu-apps-btn
#dropdownMenuAppsButton
#menu-apps-icon {
height: 16px;
width: 16px;
}
#header div#navbar-menu-apps {
display: flex;
align-items: center;
}
#header #navbar-menu-apps .dropdown-menu {
display: none;
position: absolute;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 5px;
box-shadow: rgb(0 0 0 / 20%) 0 3px 8px;
margin-top: -2px;
padding: 10px;
max-height: 500px;
overflow-y: scroll;
z-index: 2000;
background-color: white;
top: 33px;
right: -14px;
left: auto;
}
#header #navbar-menu-apps .dropdown-menu ul {
list-style: none;
display: grid;
flex-wrap: wrap;
padding: 15px 2px 0 0;
margin-bottom: 0;
grid-template-columns: 82px 82px 82px;
grid-gap: 12px 2px;
}
#header #navbar-menu-apps .dropdown-menu ul li.app a.app-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
text-align: center;
color: #262626;
text-decoration: none;
}
#header #navbar-menu-apps .dropdown-menu ul li.app a.app-link .icon {
width: 40px;
height: 40px;
background-color: #cc0066;
border-radius: 0.25rem;
margin-right: 0;
display: flex;
align-items: center;
justify-content: center;
}
#header #navbar-menu-apps .dropdown-menu ul li.app a.app-link .icon i {
color: #fff;
font-size: 19px;
}
#header #navbar-menu-apps .dropdown-menu ul li.app a.app-link .text {
text-align: center;
margin-top: 4px;
height: 26px;
font-size: 13px;
line-height: 15px;
overflow-wrap: anywhere;
}
#header #header-left,
#header .header-left,
#header #header-right,
#header .header-right {
display: inline-flex;
align-items: center;
}
</style>
{% endblock %}
<header role="banner" id="header">
<div id="navbar-logo" class="header-left">
<a href="/" id="nextcloud">
<img src="/custom/img/logo.png" alt="" style="height: 39px" />
</a>
</div>
<div id="navbar-nextcloud" class="header-right">
<div id="navbar-menu-apps" onclick="openMenu()">
<div id="menu-apps-btn">
<div
id="dropdownMenuAppsButton"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<svg
id="menu-apps-icon"
data-name="Menú Apps"
xmlns="http://www.w3.org/2000/svg"
width="26"
height="26"
viewBox="0 0 26 26"
>
<rect
id="Rectángulo_2"
data-name="Rectángulo 2"
width="6"
height="6"
fill="#262626"
></rect>
<rect
id="Rectángulo_1447"
data-name="Rectángulo 1447"
width="6"
height="6"
transform="translate(0 10)"
fill="#262626"
></rect>
<rect
id="Rectángulo_1450"
data-name="Rectángulo 1450"
width="6"
height="6"
transform="translate(0 20)"
fill="#262626"
></rect>
<rect
id="Rectángulo_1440"
data-name="Rectángulo 1440"
width="6"
height="6"
transform="translate(10)"
fill="#262626"
></rect>
<rect
id="Rectángulo_1446"
data-name="Rectángulo 1446"
width="6"
height="6"
transform="translate(10 10)"
fill="#262626"
></rect>
<rect
id="Rectángulo_1449"
data-name="Rectángulo 1449"
width="6"
height="6"
transform="translate(10 20)"
fill="#262626"
></rect>
<rect
id="Rectángulo_1441"
data-name="Rectángulo 1441"
width="6"
height="6"
transform="translate(20)"
fill="#262626"
></rect>
<rect
id="Rectángulo_1445"
data-name="Rectángulo 1445"
width="6"
height="6"
transform="translate(20 10)"
fill="#262626"
></rect>
<rect
id="Rectángulo_1448"
data-name="Rectángulo 1448"
width="6"
height="6"
transform="translate(20 20)"
fill="#262626"
></rect>
</svg>
</div>
<div
id="dropdownMenuApps"
class="dropdown-menu dropdown-menu-right"
aria-labelledby="dropdownMenuButton"
style="display: none"
>
<ul id="app-apps">
{% for item in data.apps_internal %}
<li class="app {{ item.shorname }}">
<a href="{{ item.href }}" class="app-link" target="_blank">
<div class="icon {{ item.shorname }}">
<i class="{{ item.icon }}" aria-hidden="true"></i>
</div>
<div class="text">{{ item.name }}</div>
</a>
</li>
{% endfor %}
</ul>
<ul id="app-external" class="external-links">
{% for item in data.apps_external %}
<li class="app {{ item.shorname }}">
<a href="{{ item.href }}" class="app-link" target="_blank">
<div class="icon {{ item.shorname }}">
<i class="{{ item.icon }}" aria-hidden="true"></i>
</div>
<div class="text">{{ item.name }}</div>
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
<div id="dd-logo">
<a href="https://xnet-x.net/ca/digital-democratic/" target="_blank">
<img src="http://localhost:80/img/dd.svg" alt="" style="height: 16px; margin-right: 21px; margin-top: 16px">
</a>
</div>
</div>
</header>
{% block pagescript %}
<script>
function openMenu(){
if ($('#menu-apps-btn').hasClass("open")) {
console.log('open')
$('#dropdownMenuApps').css('display', 'none')
} else {
$('#dropdownMenuApps').css('display', 'block')
console.log('closed')
}
}
</script>
{% endblock %}