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){
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": {
"0": "Disabled",
"1": "Starting",
@ -7564,15 +7571,15 @@ module.exports = function(s,config,lang){
},
"Monitor Options": {
"section": "Monitor Options",
"dropdownClass": "dropdown-menu-dark bg-dark"
"dropdownClass": `dropdown-menu-dark ${mainBackgroundColor}`
},
"SideMenu": {
"section": "SideMenu",
"blocks": {
"Container1": {
// "id": "sidebarMenu",
// "class": "col-md-3 col-lg-2 d-md-block bg-dark sidebar collapse",
"info": [
"class": `col-md-3 col-lg-2 d-md-block ${mainBackgroundColor} sidebar collapse`,
"links": [
{
icon: 'home',
label: lang.Home,
@ -7705,18 +7712,13 @@ module.exports = function(s,config,lang){
class: 'logout',
},
]
}
}
},
"Home": {
"section": "Home",
"blocks": {
"Container1": {
"name": "Container1",
"SideMenuBeforeList": {
"name": "SideMenuBeforeList",
"color": "grey",
"noHeader": true,
"noDefaultSectionClasses": true,
"section-class": "col-md-3 pt-3",
"section-class": "px-3",
"info": [
{
"id": "indicator-bars",
@ -7725,11 +7727,6 @@ module.exports = function(s,config,lang){
"noDefaultSectionClasses": true,
"section-class": "card text-white bg-gradient-blue px-3 py-2 mb-3 border-0",
info: [
{
"fieldType": "div",
"class": "h6 card-title",
"text": `<i class="fa fa-th"></i> &nbsp; ${lang['CPU']} & ${lang['RAM']}`
},
{
"fieldType": "indicatorBar",
"icon": "microchip",
@ -7749,11 +7746,6 @@ module.exports = function(s,config,lang){
"noDefaultSectionClasses": true,
"section-class": "disk-indicator-bars",
info: [
{
"fieldType": "div",
"class": "h6 card-title",
"divContent": `<i class="fa fa-th"></i> &nbsp; ${lang['CPU']} & ${lang['RAM']}`
},
{
"fieldType": "indicatorBar",
"icon": "hdd",
@ -7761,13 +7753,34 @@ module.exports = function(s,config,lang){
"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",
"class": "card bg-dark mb-3",
"divContent": `<div class="card-body text-white">
"class": `card ${mainBackgroundColor} mb-3`,
"divContent": `<div class="card-body ${textWhiteOnBgDark}">
<h5 class="card-title"><i class="fa fa-th text-muted"></i> ${lang['Live Grid']}</h5>
<p class="card-text">${lang.liveGridDescription}</p>
<a href="#" page-open="liveGrid" class="btn btn-primary">${lang.Open}</a>
@ -7775,8 +7788,8 @@ module.exports = function(s,config,lang){
},
{
"fieldType": "div",
"class": "card bg-dark",
"divContent": `<div class="card-body text-white">
"class": `card ${mainBackgroundColor} mb-3`,
"divContent": `<div class="card-body ${textWhiteOnBgDark}">
<h5 class="card-title"><i class="fa fa-gears text-muted"></i> ${lang['Account Settings']}</h5>
<p class="card-text">${lang.accountSettingsDescription}</p>
<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){
var html = ''
$.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
}
@ -610,7 +610,7 @@ function buildLogRow(v){
var html = ''
html += `<div class="card shadow-lg mb-3 px-0 btn-default search-row">
<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 class="card-body">
<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)
theList.append(`
<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="p-3">
<div class="mb-2">

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

@ -118,7 +118,7 @@ $('body')
dashboardOptions('dropdown_toggle',dropdownToggles)
})
.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);
location.href = location.href;
});

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

@ -33,7 +33,7 @@ $(document).ready(function(){
eventMatrixHtml += `</div>`
}
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">
<h6 class="video-title border-bottom-dotted border-bottom-dark pb-2 mb-0">${tabLabel}</h6>
</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="card shadow-lg px-0 btn-default">
<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}
</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-danger delete-video" title="${lang['Delete']}"><i class="fa fa-trash-o"></i></a>
</div>

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

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

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

@ -58,9 +58,9 @@ drawBlock = function(monitorSettings){
<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']){ %>
<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){ %>
<div class="pull-right">
<% monitorSettings.headerButtons.forEach(function(button){ %>
@ -208,7 +208,7 @@ drawBlock = function(monitorSettings){
</div>
<div>
<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>`

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

@ -1,7 +1,7 @@
<% const menuInfo = define.SideMenu.blocks.Container1 %>
<div class="nav-scroller bg--body shadow-sm">
<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>
<% }) %>
</nav>

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

@ -1,5 +1,5 @@
<% 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 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">
@ -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>
</div>
</div>
<%
var drawBlock
var buildOptions
%>
<%
include fieldBuilders.ejs
%>
<% drawBlock(define.SideMenu.blocks.SideMenuBeforeList) %>
<div class="collapse show home-collapse">
<ul id="pageTabLinks" class="nav flex-column nav-pills">
<div class="pb-2 px-3" id="home-collapse">
<% menuInfo.info.forEach((item) => {
<% menuInfo.links.forEach((item) => {
if(item.divider){ %>
<li><hr class="dropdown-divider"></li>
<% }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 : '' %>">
<% if(item.ulItems){
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>

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

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

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

@ -1,6 +1,6 @@
<main class="container page-tab" id="tab-monitorsList">
<div class="my-3 px-3 pt-3 bg-dark text-white rounded shadow-sm">
<h4 class="mb-3 pb-3 text-white border-bottom-dotted border-color-blue d-flex flex-row">
<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 <%- define.Theme.isDark ? 'text-white' : '' %> border-bottom-dotted border-color-blue d-flex flex-row">
<div style="flex:8">
<%- lang['Monitors'] %>
</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">
<h4 class="mb-3 pb-3 text-white border-bottom-dotted border-color-blue"><%- lang['Recent Videos'] %></h4>
<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 <%- 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>
<small class="d-block text-end mt-3">
<a class="btn badge" onclick="openTab('monitorsList',{})"><%- lang['Monitors'] %></a>