csmith1865/obscreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 16 Wiki Activity

settings list & plugin ok

Browse Source
This commit is contained in:
jr-k 2024-07-12 16:55:52 +02:00
parent 415cbf29b7
commit e58fc32fc6
18 changed files with 226 additions and 415 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
data/www/css/compiled/main.css
View File

File diff suppressed because one or more lines are too long

3
data/www/js/plugins.js
View File

@ -4,7 +4,8 @@ jQuery(document).ready(function ($) {
};
$(document).on('click', '.variable-edit', function () {
const variable = JSON.parse($(this).parents('tr:eq(0)').attr('data-entity'));
const $dataHolder = $(this).is('tr') ? $(this) : $(this).parents('tr:eq(0)');
const variable = JSON.parse($dataHolder.attr('data-entity'));
if (variable['selectables']) {
var $select = $('<select id="variable-edit-value" name="value" required="required"></select>');

3
data/www/js/settings.js
View File

@ -4,7 +4,8 @@ jQuery(document).ready(function ($) {
};
$(document).on('click', '.variable-edit', function () {
const variable = JSON.parse($(this).parents('tr:eq(0)').attr('data-entity'));
const $dataHolder = $(this).is('tr') ? $(this) : $(this).parents('tr:eq(0)');
const variable = JSON.parse($dataHolder.attr('data-entity'));
if (variable['selectables']) {
var $select = $('<select id="variable-edit-value" name="value" required="required"></select>');

12
data/www/scss/components/_empty.scss
View File

@ -1,5 +1,9 @@
span.empty {
text-transform: uppercase;
opacity: 0.5;
color: $lightGrey;
}
background: rgba($yellow, .3);
color: $yellow;
text-transform: lowercase;
border-radius: 2px;
padding: 2px 4px;
font-weight: bold;
}

178
data/www/scss/components/_panels.scss
View File

@ -1,178 +0,0 @@
.panel {
background: $white;
border-radius: 5px;
padding: 25px 25px 80px 25px;
margin: 10px 25px;
align-self: stretch;
}
.panel.no-border {
border: none;
}
.panel h3 {
color: $black;
}
.panel-inactive {
background: rgba(255, 255, 255, .1);
color: white;
border-color: $lightGrey;
}
.panel-inactive h3 {
color: lighten($black, 10%);
}
.panel table {
width: 100%;
margin-top: 30px;
border-collapse: collapse;
text-align: left;
font-weight: normal;
}
.panel th {
border-bottom: 1px solid $white;
border-collapse: collapse;
padding: 10px;
font-weight: normal;
}
.panel-inactive th {
border-color: $lightGrey;
}
.panel td {
border-collapse: collapse;
padding: 10px;
}
.panel td .td-secondary {
font-size: 14px;
opacity: 0.6;
margin-left: 3px;
}
.panel td a.item.sort {
cursor: move;
}
.panel td a.item-name {
color: $white;
}
.panel-inactive td a.item-name {
color: $lightGrey;
}
.panel td a.item-name:hover {
text-decoration: underline;
}
.panel td.actions a {
background: $white;
color: lighten($black, 20%);
border: 1px solid $lightGrey;
border-radius: 4px;
padding: 2px;
width: 35px;
display: inline-block;
text-align: center;
margin: 0 2px;
}
.panel td.actions a:hover {
color: $limeGreen;
border-color: $limeGreen;
}
.panel td.actions a.item-edit:hover {
color: $sweetPurple;
border-color: $sweetPurple;
}
.panel td.actions a.item-delete:hover {
color: $danger;
border-color: $danger;
}
.panel td.infos {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
}
.panel td .inner {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.panel td div.badge {
margin-right: 5px;
font-size: 10px;
font-weight: bold;
}
.panel a {
color: $limeGreen;
text-decoration: none;
}
.panel a:hover {
color: darken($limeGreen, 10%);
}
.panel.panel-menu {
display: flex;
flex: 1;
flex-direction: column;
align-self: stretch;
margin-right: 0;
border-color: $bitterPurple;
}
.panel.panel-menu ul {
flex: 1;
max-width: 250px;
display: flex;
flex-direction: column;
align-self: stretch;
list-style: none;
margin: 0;
padding: 0;
}
.panel.panel-menu ul li {
margin: 3px 0;
}
.panel.panel-menu ul li a {
padding: 5px 15px;
color: inherit;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex: 1;
}
.panel.panel-menu ul li:hover {
color: $neutralGrey;
font-weight: bold;
}
.panel.panel-menu ul li.active {
color: $bitterPurple;
background: rgba($bitterPurple, 0.34);
border-radius: 4px;
font-weight: bold;
border: 1px solid $bitterPurple;
}
.panel.panel-menu ul li.active a {
color: inherit;
}

181
data/www/scss/components/_panes.scss
View File

@ -1,97 +1,136 @@
.panel {
background: $white;
border-radius: 5px;
padding: 25px 25px 80px 25px;
margin: 10px 25px;
table.panes {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
align-self: stretch;
&.no-border {
border: none;
}
tbody {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
align-self: stretch;
margin: 1px 1px 28px 1px;
background: $layoutBackground;
border-radius: $baseRadius;
border: 4px solid rgba($white, .05);
h3 {
color: $black;
}
&:hover {
border-color: rgba($seaBlue, .05);
table {
width: 100%;
margin-top: 30px;
border-collapse: collapse;
text-align: left;
font-weight: normal;
th {
border-bottom: 1px solid $white;
border-collapse: collapse;
padding: 10px;
font-weight: normal;
tr.title-item {
border-color: rgba($seaBlue, .05);
}
}
td {
border-collapse: collapse;
padding: 10px;
tr {
flex: 1;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
align-self: stretch;
padding: 8px 18px;
background: #222;
.td-secondary {
font-size: 14px;
opacity: 0.6;
margin-left: 3px;
}
&:nth-child(odd) {
background-color: $layoutBackground;
a.item-name {
color: $white;
&:hover {
text-decoration: underline;
td.description {
color: rgba($white, .7);
}
}
&.infos {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
&:nth-child(even) {
background-color: #141414;
}
&.actions {
a {
background: $white;
color: lighten($black, 20%);
border: 1px solid $lightGrey;
border-radius: 4px;
padding: 2px;
width: 35px;
display: inline-block;
text-align: center;
margin: 0 2px;
&:hover {
color: $limeGreen;
border-color: $limeGreen;
}
}
}
.inner {
td {
color: #888;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex: 1;
font-size: 14px;
&.vertical {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
&.description {
align-self: stretch;
}
&.value {
flex: 0;
margin-left: 20px;
min-width: 100px;
i.icon-legend {
font-size: 10px;
margin-right: 10px;
}
i.icon-value {
padding: 2px 2px 1px 2px;
border-radius: 2px;
width: 16px;
text-align: center;
}
}
}
.badge {
margin-right: 5px;
font-size: 10px;
font-weight: bold;
&.title-item {
border-bottom: 1px solid #222;
td {
color: rgba($seaBlue, .9);
font-size: 16px;
font-weight: bold;
.more {
flex: 1;
text-align: right;
font-size: 12px;
color: #888;
font-weight: normal;
font-style: italic;
}
}
}
a {
color: $limeGreen;
text-decoration: none;
&.variable-item {
cursor: pointer;
&hover {
color: darken($limeGreen, 10%);
&:hover {
background-color: rgba($seaBlue, .05);
td {
font-weight: bold;
color: white;
i.icon-legend {
color: white;
}
span,
i.icon-value {
background-color: rgba($white, .3);
color: white;
}
&.description {
color: $seaBlue;
}
}
}
}
}
}
}
}

12
data/www/scss/forms/_forms.scss
View File

@ -19,6 +19,12 @@ form {
align-items: flex-start;
align-self: stretch;
.alert {
padding: 8px 15px;
font-size: 14px;
margin: 0 0 25px 0;
}
.form-group {
display: flex;
flex-direction: column;
@ -70,6 +76,12 @@ form {
display: flex;
flex-direction: row;
div {
color: rgba($white, .7);
font-size: 14px;
}
select,
input,
textarea {

3
data/www/scss/main.scss
View File

@ -23,8 +23,7 @@
// Legacy
@import 'components/panes';
//@import 'components/panels';
//@import 'components/empty';
@import 'components/empty';
//@import 'components/switches';
//@import 'components/cards';
//@import 'components/badges';

9
data/www/scss/pages/_plugins.scss
View File

@ -1,14 +1,9 @@
.view-plugins-list main .main-container {
.bottom-content {
.page-content {
.plugin-description {
font-size: 14px;
margin-left: 34px;
color: $lightGrey;
.inner {
padding: 10px;
}
}
.page-panel.right-panel {

8
data/www/scss/pages/_settings.scss
View File

@ -1,13 +1,9 @@
.view-settings-list main .main-container {
.bottom-content {
.page-content {
.plugin-description {
font-size: 14px;
margin-left: 34px;
color: $lightGrey;
.inner {
padding: 10px;
}
}
.page-panel.right-panel {

4
data/www/scss/utils/_variables.scss
View File

@ -12,6 +12,7 @@ $neutralGrey: rgb(70, 70, 70);
$lightGrey: rgb(153, 153, 153);
$white: rgb(255, 255, 255);
$black: rgb(0, 0, 0);
$yellow: rgb(229, 161, 35);
// Brand Colors
$youtube: rgb(253, 60, 1);
@ -24,7 +25,7 @@ $ubuntu: rgb(214, 69, 20);
$suse: rgb(111, 180, 37);
$redhat: rgb(198, 2, 0);
$centos: rgb(155, 76, 136);
$other: rgb(229, 161, 35);
$other: $yellow;
// Type Colors
$info: $seaBlue;
@ -50,6 +51,7 @@ $colors: (
purple: $sweetPurple,
purple-alt: $bitterPurple,
neutral: $neutralGrey,
yellow: $yellow,
white: $white,
black: $black,
youtube: $youtube,

4
lang/fr.json
View File

@ -156,11 +156,11 @@
"settings_variable_form_label_name": "Nom",
"settings_variable_form_label_value": "Valeur",
"settings_variable_form_button_cancel": "Annuler",
"settings_variable_form_error_not_playlist_enabled_while_fleet_player_enabled": "Vous ne pouvez pas désactiver les listes de lecture tant que la gestion de flotte de lecteurs est activée",
"settings_variable_form_error_not_playlist_enabled_while_fleet_player_enabled": "Vous ne pouvez pas désactiver les playlists tant que la gestion de flotte de lecteurs est activée",
"settings_variable_desc_lang": "Langage de l'application",
"settings_variable_desc_playlist_enabled": "Activer la gestion des playlists",
"settings_variable_desc_fleet_player_enabled": "Activer la gestion de flotte des players",
"settings_variable_desc_edition_fleet_player_enabled": "Les listes de lecture seront également activées",
"settings_variable_desc_edition_fleet_player_enabled": "Les playlists seront également activées",
"settings_variable_desc_auth_enabled": "Activer la gestion de l'authentification",
"settings_variable_desc_edition_auth_enabled": "Les identifiants de l'utilisateur par défaut seront admin/admin",
"settings_variable_desc_external_url": "URL externe (i.e: https://studio-01.company.com or http://10.10.3.100)",

97
views/configuration/plugins/component/table.jinja.html
View File

@ -1,66 +1,45 @@
<table class="variables">
<thead>
<tr>
<th>{{ l.settings_variable_panel_th_description }}</th>
<th>{{ l.settings_variable_panel_th_value }}</th>
<th class="tac">{{ l.settings_variable_panel_th_activity }}</th>
</tr>
</thead>
<table class="panes variables">
<tbody>
{% set ns = namespace(last_section='') %}
{% for variable in variables %}
{% set section_change = variable.plugin and ns.last_section != variable.plugin or variable.section and ns.last_section != variable.section %}
{% set ns = namespace(last_section='') %}
{% for variable in variables %}
{% set section_change = variable.plugin and ns.last_section != variable.plugin %}
{% if section_change %}
<tr>
<td colspan="3">
<h3>
{% if variable.is_from_plugin() %}
{% if section_change %}
{% if not loop.first %}</tbody><tbody>{% endif %}
<tr class="title-item">
<td colspan="3">
{% set plugin = plugins[variable.plugin] %}
<i class="fa fa-puzzle-piece icon-left"></i> {{ t(plugin.use_title()) }}
{% if plugin.use_description() %}
<div class="plugin-description">{{ t(plugin.use_description()) }}</div>
{% endif %}
{% else %}
<i class="fa fa-cog icon-left"></i> {{ variable.section }}
{% endif %}
</h3>
</td>
</tr>
{% endif %}
<tr class="variable-item" data-level="{{ variable.id }}" data-entity="{{ variable.to_json() }}">
<td class="infos">
<div class="inner">
{{ t(variable.description) }}
</div>
</td>
<td>
{% if variable.value %}
{% if variable.type.value == 'bool' %}
{% if variable.display() %}
<i class="fa fa-check alert-success alert-icon"></i>
{% else %}
<i class="fa fa-times alert-error alert-icon"></i>
{% endif %}
{% else %}
{{ variable.display() }}
{% endif %}
{% else %}
<span class="empty">{{ l.common_empty }}</span>
{% endif %}
</td>
<td class="actions tac">
<a href="javascript:void(0);" class="item-edit variable-edit">
<i class="fa fa-pencil"></i>
</a>
</td>
</tr>
{{ t(plugin.use_title()) }}
{% if plugin.use_description() %}
<div class="more">{{ t(plugin.use_description()) }}</div>
{% endif %}
</td>
</tr>
{% endif %}
<tr class="variable-item variable-edit" data-level="{{ variable.id }}" data-entity="{{ variable.to_json() }}">
<td class="description">
{{ t(variable.description) }}
</td>
<td class="value">
<i class="fa fa-pencil icon-legend"></i>
{% if variable.value %}
{% if variable.type.value == 'bool' %}
{% if variable.display() %}
<i class="fa fa-check alert-success alert-icon icon-value"></i>
{% else %}
<i class="fa fa-times alert-error alert-icon icon-value"></i>
{% endif %}
{% else %}
{{ variable.display() }}
{% endif %}
{% else %}
<span class="empty">{{ l.common_empty }}</span>
{% endif %}
</td>
</tr>
{% if variable.is_from_plugin() %}
{% set ns.last_section = variable.plugin %}
{% else %}
{% set ns.last_section = variable.section %}
{% endif %}
{% endfor %}
{% endfor %}
</tbody>
</table>

22
views/configuration/plugins/list.jinja.html
View File

@ -27,23 +27,17 @@
<div class="bottom-content">
<div class="page-content">
<div class="inner">
<div class="panel panel-inactive">
<div class="panel-body">
<h3>{{ l.settings_variable_panel_plugin_variables }}</h3>
{% with variables=variables %}
{% include 'configuration/plugins/component/table.jinja.html' %}
{% endwith %}
{% with variables=variables %}
{% include 'configuration/plugins/component/table.jinja.html' %}
{% endwith %}
</div>
</div>
<div class="modals hidden">
<div class="modals-outer">
<div class="modals-inner">
{% include 'configuration/plugins/modal/edit.jinja.html' %}
</div>
<div class="modals hidden">
<div class="modals-outer">
<div class="modals-inner">
{% include 'configuration/plugins/modal/edit.jinja.html' %}
</div>
</div>
</div>
</div>
</div>
</div>

11
views/configuration/plugins/modal/edit.jinja.html
View File

@ -6,30 +6,29 @@
<form class="form" action="{{ url_for('settings_variable_plugin_edit') }}" method="POST">
<input type="hidden" name="id" id="variable-edit-id" />
<div class="form-group">
<div class="form-group hidden">
<label for="variable-edit-name" class="hidden">{{ l.settings_variable_form_label_name }}</label>
<div class="widget">
<div id="variable-edit-description"></div>
<input type="text" name="name" id="variable-edit-name" required="required" disabled="disabled" class="hidden" />
</div>
</div>
<div id="variable-edit-description-edition" class="alert alert-info">
<div id="variable-edit-description-edition" class="alert alert-danger">
</div>
<div class="form-group">
<label for="variable-edit-value">{{ l.settings_variable_form_label_value }}</label>
<label for="variable-edit-value" id="variable-edit-description"></label>
<div class="widget">
<input type="text" name="value" id="variable-edit-value" required="required" />
</div>
</div>
<div class="actions">
<button type="button" class="btn-normal modal-close">
<button type="button" class="btn-naked modal-close">
{{ l.settings_variable_form_button_cancel }}
</button>
<button type="submit" class="green">
<button type="submit" class="btn-info">
<i class="fa fa-save icon-left"></i>{{ l.settings_variable_form_edit_submit }}
</button>
</div>

59
views/configuration/settings/component/table.jinja.html
View File

@ -1,46 +1,29 @@
<table class="variables">
<thead>
<tr>
<th>{{ l.settings_variable_panel_th_description }}</th>
<th>{{ l.settings_variable_panel_th_value }}</th>
<th class="tac">{{ l.settings_variable_panel_th_activity }}</th>
</tr>
</thead>
<table class="panes variables">
<tbody>
{% set ns = namespace(last_section='') %}
{% for variable in variables %}
{% set section_change = variable.plugin and ns.last_section != variable.plugin or variable.section and ns.last_section != variable.section %}
{% set section_change = variable.section and ns.last_section != variable.section %}
{% if section_change %}
<tr>
<td colspan="3">
<h3>
{% if variable.is_from_plugin() %}
{% set plugin = plugins[variable.plugin] %}
<i class="fa fa-puzzle-piece icon-left"></i> {{ t(plugin.use_title()) }}
{% if plugin.use_description() %}
<div class="plugin-description">{{ t(plugin.use_description()) }}</div>
{% endif %}
{% else %}
<i class="fa fa-cog icon-left"></i> {{ variable.section }}
{% endif %}
</h3>
</td>
</tr>
{% if not loop.first %}</tbody><tbody>{% endif %}
<tr class="title-item">
<td colspan="3">
{{ variable.section }}
</td>
</tr>
{% endif %}
<tr class="variable-item" data-level="{{ variable.id }}" data-entity="{{ variable.to_json() }}">
<td class="infos">
<div class="inner">
{{ t(variable.description) }}
</div>
<tr class="variable-item variable-edit" data-level="{{ variable.id }}" data-entity="{{ variable.to_json() }}">
<td class="description">
{{ t(variable.description) }}
</td>
<td>
<td class="value">
<i class="fa fa-pencil icon-legend"></i>
{% if variable.value %}
{% if variable.type.value == 'bool' %}
{% if variable.display() %}
<i class="fa fa-check alert-success alert-icon"></i>
<i class="fa fa-check alert-success alert-icon icon-value"></i>
{% else %}
<i class="fa fa-times alert-error alert-icon"></i>
<i class="fa fa-times alert-error alert-icon icon-value"></i>
{% endif %}
{% else %}
{{ variable.display() }}
@ -49,18 +32,10 @@
<span class="empty">{{ l.common_empty }}</span>
{% endif %}
</td>
<td class="actions tac">
<a href="javascript:void(0);" class="item-edit variable-edit">
<i class="fa fa-pencil"></i>
</a>
</td>
</tr>
{% if variable.is_from_plugin() %}
{% set ns.last_section = variable.plugin %}
{% else %}
{% set ns.last_section = variable.section %}
{% endif %}
{% set ns.last_section = variable.section %}
{% endfor %}
</tbody>
</table>

22
views/configuration/settings/list.jinja.html
View File

@ -27,23 +27,17 @@
<div class="bottom-content">
<div class="page-content">
<div class="inner">
<div class="panel">
<div class="panel-body">
<h3>{{ l.settings_variable_panel_system_variables }}</h3>
{% with variables=variables %}
{% include 'configuration/settings/component/table.jinja.html' %}
{% endwith %}
{% with variables=variables %}
{% include 'configuration/settings/component/table.jinja.html' %}
{% endwith %}
</div>
</div>
<div class="modals hidden">
<div class="modals-outer">
<div class="modals-inner">
{% include 'configuration/settings/modal/edit.jinja.html' %}
</div>
<div class="modals hidden">
<div class="modals-outer">
<div class="modals-inner">
{% include 'configuration/settings/modal/edit.jinja.html' %}
</div>
</div>
</div>
</div>
</div>
</div>

11
views/configuration/settings/modal/edit.jinja.html
View File

@ -6,30 +6,29 @@
<form class="form" action="{{ url_for('settings_variable_edit') }}" method="POST">
<input type="hidden" name="id" id="variable-edit-id" />
<div class="form-group">
<div class="form-group hidden">
<label for="variable-edit-name" class="hidden">{{ l.settings_variable_form_label_name }}</label>
<div class="widget">
<div id="variable-edit-description"></div>
<input type="text" name="name" id="variable-edit-name" required="required" disabled="disabled" class="hidden" />
</div>
</div>
<div id="variable-edit-description-edition" class="alert alert-info">
<div id="variable-edit-description-edition" class="alert alert-danger">
</div>
<div class="form-group">
<label for="variable-edit-value">{{ l.settings_variable_form_label_value }}</label>
<label for="variable-edit-value" id="variable-edit-description"></label>
<div class="widget">
<input type="text" name="value" id="variable-edit-value" required="required" />
</div>
</div>
<div class="actions">
<button type="button" class="btn-normal modal-close">
<button type="button" class="btn-naked modal-close">
{{ l.settings_variable_form_button_cancel }}
</button>
<button type="submit" class="green">
<button type="submit" class="btn-info">
<i class="fa fa-save icon-left"></i>{{ l.settings_variable_form_edit_submit }}
</button>
</div>