ShinobiSystems
/
Shinobi
mirror of https://gitlab.com/Shinobi-Systems/Shinobi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

better control over dashboard colors through definitions/en_CA.js

email-send-options-from-account
Moe 2021-10-09 12:56:45 -07:00
parent 42714a285c
commit 472ed38377
13 changed files with 73 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
definitions/en_CA.js
View File

@ -1,5 +1,12 @@
module.exports = function(s,config,lang){ module.exports = function(s,config,lang){
return { const Theme = {
isDark: true,
}
const mainBackgroundColor = Theme.isDark ? 'bg-dark' : Theme.isDarkDefaultBg || 'bg-light'
const textWhiteOnBgDark = Theme.isDark ? 'text-white' : ''
return Object.assign({
Theme: Theme,
},{
"Monitor Status Codes": { "Monitor Status Codes": {
"0": "Disabled", "0": "Disabled",
"1": "Starting", "1": "Starting",
@ -7564,15 +7571,15 @@ module.exports = function(s,config,lang){
}, },
"Monitor Options": { "Monitor Options": {
"section": "Monitor Options", "section": "Monitor Options",
"dropdownClass": "dropdown-menu-dark bg-dark" "dropdownClass": `dropdown-menu-dark ${mainBackgroundColor}`
}, },
"SideMenu": { "SideMenu": {
"section": "SideMenu", "section": "SideMenu",
"blocks": { "blocks": {
"Container1": { "Container1": {
// "id": "sidebarMenu", // "id": "sidebarMenu",
// "class": "col-md-3 col-lg-2 d-md-block bg-dark sidebar collapse", "class": `col-md-3 col-lg-2 d-md-block ${mainBackgroundColor} sidebar collapse`,
"info": [ "links": [
{ {
icon: 'home', icon: 'home',
label: lang.Home, label: lang.Home,
@ -7705,18 +7712,13 @@ module.exports = function(s,config,lang){
class: 'logout', class: 'logout',
}, },
] ]
}
}
}, },
"Home": { "SideMenuBeforeList": {
"section": "Home", "name": "SideMenuBeforeList",
"blocks": {
"Container1": {
"name": "Container1",
"color": "grey", "color": "grey",
"noHeader": true, "noHeader": true,
"noDefaultSectionClasses": true, "noDefaultSectionClasses": true,
"section-class": "col-md-3 pt-3", "section-class": "px-3",
"info": [ "info": [
{ {
"id": "indicator-bars", "id": "indicator-bars",
@ -7725,11 +7727,6 @@ module.exports = function(s,config,lang){
"noDefaultSectionClasses": true, "noDefaultSectionClasses": true,
"section-class": "card text-white bg-gradient-blue px-3 py-2 mb-3 border-0", "section-class": "card text-white bg-gradient-blue px-3 py-2 mb-3 border-0",
info: [ info: [
{
"fieldType": "div",
"class": "h6 card-title",
"text": `<i class="fa fa-th"></i> &nbsp; ${lang['CPU']} & ${lang['RAM']}`
},
{ {
"fieldType": "indicatorBar", "fieldType": "indicatorBar",
"icon": "microchip", "icon": "microchip",
@ -7749,11 +7746,6 @@ module.exports = function(s,config,lang){
"noDefaultSectionClasses": true, "noDefaultSectionClasses": true,
"section-class": "disk-indicator-bars", "section-class": "disk-indicator-bars",
info: [ info: [
{
"fieldType": "div",
"class": "h6 card-title",
"divContent": `<i class="fa fa-th"></i> &nbsp; ${lang['CPU']} & ${lang['RAM']}`
},
{ {
"fieldType": "indicatorBar", "fieldType": "indicatorBar",
"icon": "hdd", "icon": "hdd",
@ -7761,13 +7753,34 @@ module.exports = function(s,config,lang){
"label": `<span class="diskUsed" style="letter-spacing:2px;font-weight:100"></span>`, "label": `<span class="diskUsed" style="letter-spacing:2px;font-weight:100"></span>`,
}, },
] ]
}
]
}, },
{
"fieldType": "indicatorBar",
"percent": 0,
"icon": "video-camera",
"name": "activeCameraCount",
"label": `<span class="activeCameraCount"><i class="fa fa-spinner fa-pulse"></i></span> ${lang['Active Monitors']}`,
},
]
}
]
}
}
},
"Home": {
"section": "Home",
"blocks": {
"Container1": {
"name": "Container1",
"color": "grey",
"noHeader": true,
"noDefaultSectionClasses": true,
"section-class": "col-md-3 pt-3",
"info": [
{ {
"fieldType": "div", "fieldType": "div",
"class": "card bg-dark mb-3", "class": `card ${mainBackgroundColor} mb-3`,
"divContent": `<div class="card-body text-white"> "divContent": `<div class="card-body ${textWhiteOnBgDark}">
<h5 class="card-title"><i class="fa fa-th text-muted"></i> ${lang['Live Grid']}</h5> <h5 class="card-title"><i class="fa fa-th text-muted"></i> ${lang['Live Grid']}</h5>
<p class="card-text">${lang.liveGridDescription}</p> <p class="card-text">${lang.liveGridDescription}</p>
<a href="#" page-open="liveGrid" class="btn btn-primary">${lang.Open}</a> <a href="#" page-open="liveGrid" class="btn btn-primary">${lang.Open}</a>
@ -7775,8 +7788,8 @@ module.exports = function(s,config,lang){
}, },
{ {
"fieldType": "div", "fieldType": "div",
"class": "card bg-dark", "class": `card ${mainBackgroundColor} mb-3`,
"divContent": `<div class="card-body text-white"> "divContent": `<div class="card-body ${textWhiteOnBgDark}">
<h5 class="card-title"><i class="fa fa-gears text-muted"></i> ${lang['Account Settings']}</h5> <h5 class="card-title"><i class="fa fa-gears text-muted"></i> ${lang['Account Settings']}</h5>
<p class="card-text">${lang.accountSettingsDescription}</p> <p class="card-text">${lang.accountSettingsDescription}</p>
<a href="#" page-open="accountSettings" class="btn btn-primary">${lang.Open}</a> <a href="#" page-open="accountSettings" class="btn btn-primary">${lang.Open}</a>
@ -7798,5 +7811,5 @@ module.exports = function(s,config,lang){
} }
} }
}, },
} })
} }

4
web/assets/js/bs5.dashboard-base.js
View File

@ -532,7 +532,7 @@ function getAllSectionsFromDefinition(definitionsBase){
function buildSubMenuItems(listOfItems){ function buildSubMenuItems(listOfItems){
var html = '' var html = ''
$.each(listOfItems,function(n,item){ $.each(listOfItems,function(n,item){
if(item)html += `<li><a class="text-white ${item.class || ''}" ${item.attributes || ''}><span class="${item.hasParent ? 'ml-3' : ''} dot dot-${item.color || 'blue'} mr-2"></span>${item.label}</a></li>` if(item)html += `<li><a class="${definitions.Theme.isDark ? 'text-white' : 'text-dark'} text-decoration-none ${item.class || ''}" ${item.attributes || ''}><span class="${item.hasParent ? 'ml-3' : ''} dot dot-${item.color || 'blue'} mr-2"></span>${item.label}</a></li>`
}) })
return html return html
} }
@ -610,7 +610,7 @@ function buildLogRow(v){
var html = '' var html = ''
html += `<div class="card shadow-lg mb-3 px-0 btn-default search-row"> html += `<div class="card shadow-lg mb-3 px-0 btn-default search-row">
<div class="card-header"> <div class="card-header">
<small class="text-white">${v.info && v.info.type ? v.info.type : v.mid}</small> <small class="${definitions.Theme.isDark ? 'text-white' : ''}">${v.info && v.info.type ? v.info.type : v.mid}</small>
</div> </div>
<div class="card-body"> <div class="card-body">
<div>${jsonToHtmlBlock(v.info.msg)}</div> <div>${jsonToHtmlBlock(v.info.msg)}</div>

2
web/assets/js/bs5.monitorsList.js
View File

@ -13,7 +13,7 @@ $(document).ready(function(){
var streamUrl = libURL + buildStreamUrl(row.mid).replace($user.auth_token,selectedApiKey) var streamUrl = libURL + buildStreamUrl(row.mid).replace($user.auth_token,selectedApiKey)
theList.append(` theList.append(`
<div data-mid="${row.mid}" class="col-md-4 glM${row.mid}"> <div data-mid="${row.mid}" class="col-md-4 glM${row.mid}">
<div class="text-white mb-3 card shadow-sm btn-default"> <div class="${definitions.Theme.isDark ? 'text-white' : 'text-dark'} mb-3 card shadow-sm btn-default">
<div class="card monitor-card-preview snapshot launch-live-grid-monitor cursor-pointer" style="background-image:url(${getApiPrefix('icon') + '/' + row.mid})"></div> <div class="card monitor-card-preview snapshot launch-live-grid-monitor cursor-pointer" style="background-image:url(${getApiPrefix('icon') + '/' + row.mid})"></div>
<div class="p-3"> <div class="p-3">
<div class="mb-2"> <div class="mb-2">

2
web/assets/js/bs5.startup.js
View File

@ -118,7 +118,7 @@ $('body')
dashboardOptions('dropdown_toggle',dropdownToggles) dashboardOptions('dropdown_toggle',dropdownToggles)
}) })
.on('click','.logout',function(e){ .on('click','.logout',function(e){
$.get(getApiPrefix() + '/logout/'+user.ke+'/'+user.uid,function(data){ $.get(getApiPrefix() + '/logout/'+$user.ke+'/'+$user.uid,function(data){
localStorage.removeItem('ShinobiLogin_' + location.host); localStorage.removeItem('ShinobiLogin_' + location.host);
location.href = location.href; location.href = location.href;
}); });

2
web/assets/js/bs5.videoPlayer.js
View File

@ -33,7 +33,7 @@ $(document).ready(function(){
eventMatrixHtml += `</div>` eventMatrixHtml += `</div>`
} }
var baseHtml = `<main class="container page-tab tab-videoPlayer" id="tab-${newTabId}" video-id="${video.mid}${video.time}"> var baseHtml = `<main class="container page-tab tab-videoPlayer" id="tab-${newTabId}" video-id="${video.mid}${video.time}">
<div class="my-3 bg-dark text-white rounded shadow-sm"> <div class="my-3 ${definitions.Theme.isDark ? 'bg-dark text-white' : 'bg-light text-dark'} rounded shadow-sm">
<div class="p-3"> <div class="p-3">
<h6 class="video-title border-bottom-dotted border-bottom-dark pb-2 mb-0">${tabLabel}</h6> <h6 class="video-title border-bottom-dotted border-bottom-dark pb-2 mb-0">${tabLabel}</h6>
</div> </div>

4
web/assets/js/bs5.videos.js
View File

@ -83,11 +83,11 @@ function createVideoRow(row,classOverride){
<div class="video-row ${classOverride ? classOverride : `col-md-12 col-lg-6 mb-3`} search-row" data-mid="${row.mid}" data-time="${row.time}"> <div class="video-row ${classOverride ? classOverride : `col-md-12 col-lg-6 mb-3`} search-row" data-mid="${row.mid}" data-time="${row.time}">
<div class="card shadow-lg px-0 btn-default"> <div class="card shadow-lg px-0 btn-default">
<div class="card-header d-flex flex-row"> <div class="card-header d-flex flex-row">
<div class="flex-grow-1 text-white"> <div class="flex-grow-1 ${definitions.Theme.isDark ? 'text-white' : ''}">
${loadedMonitors[row.mid] ? loadedMonitors[row.mid].name : row.mid} ${loadedMonitors[row.mid] ? loadedMonitors[row.mid].name : row.mid}
</div> </div>
<div> <div>
<a class="badge btn btn-primary open-video mr-1" title="${lang['Watch']}"><i class="fa fa-play-circle"></i></a> <a href="#" class="badge btn btn-primary open-video mr-1" title="${lang['Watch']}"><i class="fa fa-play-circle"></i></a>
<a class="badge btn btn-success" download href="${videoEndpoint}" title="${lang['Download']}"><i class="fa fa-download"></i></a> <a class="badge btn btn-success" download href="${videoEndpoint}" title="${lang['Download']}"><i class="fa fa-download"></i></a>
<a class="badge btn btn-danger delete-video" title="${lang['Delete']}"><i class="fa fa-trash-o"></i></a> <a class="badge btn btn-danger delete-video" title="${lang['Delete']}"><i class="fa fa-trash-o"></i></a>
</div> </div>

4
web/libs/themes/Light-v3/style.css
View File

@ -83,9 +83,9 @@
.bg-darker { .bg-darker {
background-color: #e5e5e5!important; background-color: #e5e5e5!important;
} }
.bg-dark .text-white { /* .bg-dark .text-white {
color: #333!important; color: #333!important;
} } */
.bg-dark a.nav-link:not([href]):not(.active):hover { .bg-dark a.nav-link:not([href]):not(.active):hover {
color: #000; color: #000;
} }

6
web/pages/blocks/home/fieldBuilders.ejs
View File

@ -58,9 +58,9 @@ drawBlock = function(monitorSettings){
<div class="<%- monitorSettings['section-pre-class'] %>"> <div class="<%- monitorSettings['section-pre-class'] %>">
<% } <% }
%> %>
<<%- monitorSettings.isForm ? 'form' : 'div' %> <%- attributes.join(' ') %> style="<%- styles.join(';') %>" class="<%- !monitorSettings.noDefaultSectionClasses ? `card form-group-group p-3 bg-dark mb-3 shadow` : '' %> <%- sectionClass.join(' ') %>"> <<%- monitorSettings.isForm ? 'form' : 'div' %> <%- attributes.join(' ') %> style="<%- styles.join(';') %>" class="<%- !monitorSettings.noDefaultSectionClasses ? `card form-group-group p-3 ${define.Theme.isDark ? 'bg-dark' : 'bg-light'} mb-3 shadow` : '' %> <%- sectionClass.join(' ') %>">
<% if(!monitorSettings['noHeader']){ %> <% if(!monitorSettings['noHeader']){ %>
<h4 class="form-section-header <%- monitorSettings.headerButtons || monitorSettings.headerTitle && ( monitorSettings.headerTitle.indexOf('<a ') > -1 || monitorSettings.headerTitle.indexOf('<button ') > -1 ) ? 'no-toggle-header' : '' %> cursor-pointer mb-3 pb-3 text-white border-bottom-dotted border-color-<%- monitorSettings.color || 'dark' %> <%- monitorSettings.headerClass %>"><%- headerTitle %> <h4 class="form-section-header <%- monitorSettings.headerButtons || monitorSettings.headerTitle && ( monitorSettings.headerTitle.indexOf('<a ') > -1 || monitorSettings.headerTitle.indexOf('<button ') > -1 ) ? 'no-toggle-header' : '' %> cursor-pointer mb-3 pb-3 <%- define.Theme.isDark ? 'text-white' : '' %> border-bottom-dotted border-color-<%- monitorSettings.color || 'dark' %> <%- monitorSettings.headerClass %>"><%- headerTitle %>
<% if(monitorSettings.headerButtons){ %> <% if(monitorSettings.headerButtons){ %>
<div class="pull-right"> <div class="pull-right">
<% monitorSettings.headerButtons.forEach(function(button){ %> <% monitorSettings.headerButtons.forEach(function(button){ %>
@ -208,7 +208,7 @@ drawBlock = function(monitorSettings){
</div> </div>
<div> <div>
<div class="progress"> <div class="progress">
<div class="progress-bar progress-bar-${field.color || 'warning'}" role="progressbar" style="width: 0%;"></div> <div class="progress-bar progress-bar-${field.color || 'warning'}" role="progressbar" style="width: ${field.percent || '0'}%;"></div>
</div> </div>
</div> </div>
</div>` </div>`

2
web/pages/blocks/home/menuSecond.ejs
View File

@ -1,7 +1,7 @@
<% const menuInfo = define.SideMenu.blocks.Container1 %> <% const menuInfo = define.SideMenu.blocks.Container1 %>
<div class="nav-scroller bg--body shadow-sm"> <div class="nav-scroller bg--body shadow-sm">
<nav id="pageTabLinks" class="nav nav-underline" aria-label="Secondary navigation"> <nav id="pageTabLinks" class="nav nav-underline" aria-label="Secondary navigation">
<% menuInfo.info.forEach((item) => { %> <% menuInfo.links.forEach((item) => { %>
<a class="nav-link <%- item.class %>" <%- item.pageOpen ? `page-open="${item.pageOpen}"` : '' %> aria-current="page" href="#"><%- item.label %></a> <a class="nav-link <%- item.class %>" <%- item.pageOpen ? `page-open="${item.pageOpen}"` : '' %> aria-current="page" href="#"><%- item.label %></a>
<% }) %> <% }) %>
</nav> </nav>

14
web/pages/blocks/home/menuSide.ejs
View File

@ -1,5 +1,5 @@
<% const menuInfo = define.SideMenu.blocks.Container1 %> <% const menuInfo = define.SideMenu.blocks.Container1 %>
<nav id="<%- menuInfo.id || 'sidebarMenu' %>" class="<%- menuInfo.class || 'col-md-3 col-lg-2 d-md-block bg-dark sidebar collapse' %>"> <nav id="<%- menuInfo.id || 'sidebarMenu' %>" class="<%- menuInfo.class || 'col-md-3 col-lg-2 d-md-block sidebar collapse' %>">
<div id="menu-side" class="position-sticky"> <div id="menu-side" class="position-sticky">
<div class="d-flex flex-row align-items-center p-3 m-3 btn-default rounded shadow-sm cursor-pointer"> <div class="d-flex flex-row align-items-center p-3 m-3 btn-default rounded shadow-sm cursor-pointer">
<div class="lh-1" data-bs-toggle="collapse" data-bs-target=".home-collapse"> <div class="lh-1" data-bs-toggle="collapse" data-bs-target=".home-collapse">
@ -13,10 +13,18 @@
<a class_toggle="compressed-monitor-icons" data-target="#monitorSideList" icon-toggle="fa-th fa-bars" icon-child="i"><i class="fa fa-th"></i></a> <a class_toggle="compressed-monitor-icons" data-target="#monitorSideList" icon-toggle="fa-th fa-bars" icon-child="i"><i class="fa fa-th"></i></a>
</div> </div>
</div> </div>
<%
var drawBlock
var buildOptions
%>
<%
include fieldBuilders.ejs
%>
<% drawBlock(define.SideMenu.blocks.SideMenuBeforeList) %>
<div class="collapse show home-collapse"> <div class="collapse show home-collapse">
<ul id="pageTabLinks" class="nav flex-column nav-pills"> <ul id="pageTabLinks" class="nav flex-column nav-pills">
<div class="pb-2 px-3" id="home-collapse"> <div class="pb-2 px-3" id="home-collapse">
<% menuInfo.info.forEach((item) => { <% menuInfo.links.forEach((item) => {
if(item.divider){ %> if(item.divider){ %>
<li><hr class="dropdown-divider"></li> <li><hr class="dropdown-divider"></li>
<% }else{ %> <% }else{ %>
@ -28,7 +36,7 @@
<ul class="btn-default rounded btn-toggle-nav list-unstyled fw-normal ml-3 mt-2 px-2 pb-2 pt-1 <%- item.ulClass ? item.ulClass : '' %>"> <ul class="btn-default rounded btn-toggle-nav list-unstyled fw-normal ml-3 mt-2 px-2 pb-2 pt-1 <%- item.ulClass ? item.ulClass : '' %>">
<% if(item.ulItems){ <% if(item.ulItems){
item.ulItems.forEach((listItem) => { %> item.ulItems.forEach((listItem) => { %>
<li><a class="text-white <%- listItem.class ? listItem.class : '' %>" <%- listItem.attributes ? listItem.attributes : '' %>><span class="dot dot-<%- listItem.color ? listItem.color : 'blue' %> shadow mr-2"></span><%- listItem.label ? listItem.label : 'Need Label' %></a></li> <li><a class="<%- define.Theme.isDark ? 'text-white' : '' %> <%- listItem.class ? listItem.class : '' %>" <%- listItem.attributes ? listItem.attributes : '' %>><span class="dot dot-<%- listItem.color ? listItem.color : 'blue' %> shadow mr-2"></span><%- listItem.label ? listItem.label : 'Need Label' %></a></li>
<% }) <% })
} %> } %>
</ul> </ul>

4
web/pages/blocks/home/monitorSettings.ejs
View File

@ -1,6 +1,6 @@
<main class="container page-tab pt-3" id="tab-monitorSettings"> <main class="container page-tab pt-3" id="tab-monitorSettings">
<div class="card form-group-group p-3 bg-dark mb-3 shadow"> <div class="card form-group-group p-3 <%- define.Theme.isDark ? 'bg-dark' : 'bg-light' %> mb-3 shadow">
<h4 id="tab-monitorSettings-title" class="monitor-section-header mb-3 pb-3 text-white border-bottom-dotted border-color-blue "> <h4 id="tab-monitorSettings-title" class="monitor-section-header mb-3 pb-3 <%- define.Theme.isDark ? 'text-white' : '' %> border-bottom-dotted border-color-blue ">
<%- lang['Monitor Settings'] %> : <%- lang['Monitor Settings'] %> :
<span><%- lang['Add New'] %></span> <span><%- lang['Add New'] %></span>
</h4> </h4>

4
web/pages/blocks/home/monitorsList.ejs
View File

@ -1,6 +1,6 @@
<main class="container page-tab" id="tab-monitorsList"> <main class="container page-tab" id="tab-monitorsList">
<div class="my-3 px-3 pt-3 bg-dark text-white rounded shadow-sm"> <div class="my-3 px-3 pt-3 <%- define.Theme.isDark ? 'bg-dark text-white' : 'bg-light' %> rounded shadow-sm">
<h4 class="mb-3 pb-3 text-white border-bottom-dotted border-color-blue d-flex flex-row"> <h4 class="mb-3 pb-3 <%- define.Theme.isDark ? 'text-white' : '' %> border-bottom-dotted border-color-blue d-flex flex-row">
<div style="flex:8"> <div style="flex:8">
<%- lang['Monitors'] %> <%- lang['Monitors'] %>
</div> </div>

4
web/pages/blocks/home/recentVideos.ejs
View File

@ -1,5 +1,5 @@
<div class="my-3 p-3 bg-dark text-white rounded shadow-sm" id="recentVideos"> <div class="my-3 p-3 <%- define.Theme.isDark ? 'bg-dark text-white' : 'bg-light' %> rounded shadow-sm" id="recentVideos">
<h4 class="mb-3 pb-3 text-white border-bottom-dotted border-color-blue"><%- lang['Recent Videos'] %></h4> <h4 class="mb-3 pb-3 <%- define.Theme.isDark ? 'text-white' : '' %> border-bottom-dotted border-color-blue"><%- lang['Recent Videos'] %></h4>
<div class="flex-table flex-table-dark mx-n3 pt-2 px-3 row" id="recentVideosList"></div> <div class="flex-table flex-table-dark mx-n3 pt-2 px-3 row" id="recentVideosList"></div>
<small class="d-block text-end mt-3"> <small class="d-block text-end mt-3">
<a class="btn badge" onclick="openTab('monitorsList',{})"><%- lang['Monitors'] %></a> <a class="btn badge" onclick="openTab('monitorsList',{})"><%- lang['Monitors'] %></a>