templates
/
KiBot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[KiRi] Moved style from the JS to the CSS 

- Most of the style was moved
- Colors aren't hard coded anymore, fetched from the page
This commit is contained in:
Salvador E. Tropea 2023-12-12 13:10:31 -03:00
parent 5b64e55239
commit 7578ee4ab8
2 changed files with 99 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
kibot/resources/kiri/kiri.css
View File

@ -278,6 +278,14 @@ hr {
height: 10px; height: 10px;
} }
.icon-commit1-fs {
margin-left: 0em;
margin-right: 0.2em;
color: #00FF00;
width: 10px;
height: 10px;
}
.icon-commit2 { .icon-commit2 {
display: inline; display: inline;
margin-left: 1em; margin-left: 1em;
@ -287,6 +295,19 @@ hr {
height: 10px; height: 10px;
} }
.icon-commit2-fs {
display: inline;
margin-left:1em;
margin-right:0.2em;
color: #FF0000;
width: 10px;
height: 10px;
}
.commit-standalone-color {
color: #A7A7A7;
}
.icon-commit3 { .icon-commit3 {
margin-left:1em; margin-left:1em;
margin-right:0.2em; margin-right:0.2em;
@ -295,6 +316,29 @@ hr {
height: 10px; height: 10px;
} }
.icon-commit3-fs {
margin-left: 1em;
margin-right: 0.2em;
color: #FFA000;
width: 10px;
height: 10px;
}
.icon-sch-pcb-modif {
padding-left: 0px;
padding-right: 0px;
width: 14px;
height: 14px;
}
.icon-sch-modif {
color: #A6E22E;
}
.icon-pcb-modif {
color: #F92672;
}
.icon-sheets { .icon-sheets {
margin-right:0.5em; margin-right:0.5em;
width: 20px; width: 20px;
@ -441,6 +485,25 @@ hr {
width: 2em; width: 2em;
} }
.ui-legend-sep1-fs {
display: inline;
width: 3em;
}
.ui-legend-sep2-fs {
margin-left:1em;
margin-right:0.2em;
}
.ui-view-item-fs {
margin-left:1em;
margin-right:0.2em;
}
.ui-fs-label {
background-color: #333;
}
.ui-diff-container { .ui-diff-container {
height: 94%; height: 94%;
padding: 0px; padding: 0px;

66
kibot/resources/kiri/kiri.js
View File

@ -36,10 +36,12 @@ var layers_commit1 = new Set();
var layers_commit2 = new Set(); var layers_commit2 = new Set();
var current_layers_list = []; var current_layers_list = [];
const SCH_IMG = '<span class="iconify" style="padding-left: 0px; padding-right: 0px; width: 14px; height: 14px; color: #A6E22E;"'+ const SCH_IMG = '<span class="iconify icon-sch-pcb-modif icon-sch-modif" data-inline="false"; data-icon="carbon:schematics"></span>';
' data-inline="false"; data-icon="carbon:schematics"></span>'; const PCB_IMG = '<span class="iconify icon-sch-pcb-modif icon-pcb-modif" data-inline="false"; data-icon="codicon:circuit-board"></span>';
const PCB_IMG = '<span class="iconify" style="padding-left: 0px; padding-right: 0px; width: 14px; height: 14px; color: #F92672;"'+
' data-inline="false"; data-icon="codicon:circuit-board"></span>'; var commit1_legend_color;
var commit2_legend_color;
var commit_standalone_color;
// ======================================= // =======================================
// HANDLE SHORTCUTS // HANDLE SHORTCUTS
@ -220,16 +222,16 @@ function reset_commits_selection()
$("#commit1_legend_text").css('visibility', 'visible'); $("#commit1_legend_text").css('visibility', 'visible');
$("#commit1_legend_fs").css('visibility', 'visible'); $("#commit1_legend_fs").css('visibility', 'visible');
$("#commit1_legend_text_fs").css('visibility', 'visible'); $("#commit1_legend_text_fs").css('visibility', 'visible');
$("#commit1_legend").css('color', '#00FF00'); $("#commit1_legend").css('color', commit1_legend_color);
$("#commit1_legend_fs").css('color', '#00FF00'); $("#commit1_legend_fs").css('color', commit1_legend_color);
$("#diff-xlink-2").css('visibility', 'visible') $("#diff-xlink-2").css('visibility', 'visible')
$("#commit2_legend").css('visibility', 'visible'); $("#commit2_legend").css('visibility', 'visible');
$("#commit2_legend_text").css('visibility', 'visible'); $("#commit2_legend_text").css('visibility', 'visible');
$("#commit2_legend_fs").css('visibility', 'visible'); $("#commit2_legend_fs").css('visibility', 'visible');
$("#commit2_legend_text_fs").css('visibility', 'visible'); $("#commit2_legend_text_fs").css('visibility', 'visible');
$("#commit2_legend").css('color', '#FF0000'); $("#commit2_legend").css('color', commit2_legend_color);
$("#commit2_legend_fs").css('color', '#FF0000'); $("#commit2_legend_fs").css('color', commit2_legend_color);
$("#commit3_legend").css('visibility', 'visible'); $("#commit3_legend").css('visibility', 'visible');
$("#commit3_legend_text").css('visibility', 'visible'); $("#commit3_legend_text").css('visibility', 'visible');
@ -294,18 +296,18 @@ function toggle_old_commit_visibility()
$("#commit2_legend_fs").css('visibility', 'visible'); $("#commit2_legend_fs").css('visibility', 'visible');
$("#commit2_legend_text_fs").css('visibility', 'visible'); $("#commit2_legend_text_fs").css('visibility', 'visible');
$("#commit2_legend").css('color', '#a7a7a7'); $("#commit2_legend").css('color', commit_standalone_color);
$("#commit2_legend_fs").css('color', '#a7a7a7'); $("#commit2_legend_fs").css('color', commit_standalone_color);
} }
else else
{ {
$("#diff-xlink-1").css('filter', 'url(#filter-1)') /// FILTER_DEFAULT $("#diff-xlink-1").css('filter', 'url(#filter-1)') /// FILTER_DEFAULT
$("#diff-xlink-2").css('filter', 'url(#filter-2)') /// FILTER_DEFAULT $("#diff-xlink-2").css('filter', 'url(#filter-2)') /// FILTER_DEFAULT
$("#commit1_legend").css('color', '#00FF00'); $("#commit1_legend").css('color', commit1_legend_color);
$("#commit1_legend_fs").css('color', '#00FF00'); $("#commit1_legend_fs").css('color', commit1_legend_color);
$("#commit2_legend").css('color', '#FF0000'); $("#commit2_legend").css('color', commit2_legend_color);
$("#commit2_legend_fs").css('color', '#FF0000'); $("#commit2_legend_fs").css('color', commit2_legend_color);
} }
} }
@ -350,18 +352,18 @@ function toggle_new_commit_visibility()
$("#commit1_legend_fs").css('visibility', 'visible'); $("#commit1_legend_fs").css('visibility', 'visible');
$("#commit1_legend_text_fs").css('visibility', 'visible'); $("#commit1_legend_text_fs").css('visibility', 'visible');
$("#commit1_legend").css('color', '#a7a7a7'); $("#commit1_legend").css('color', commit_standalone_color);
$("#commit1_legend_text_fs").css('color', '#a7a7a7'); $("#commit1_legend_text_fs").css('color', commit_standalone_color);
} }
else else
{ {
$("#diff-xlink-1").css('filter', 'url(#filter-1)') /// FILTER_DEFAULT $("#diff-xlink-1").css('filter', 'url(#filter-1)') /// FILTER_DEFAULT
$("#diff-xlink-2").css('filter', 'url(#filter-2)') /// FILTER_DEFAULT $("#diff-xlink-2").css('filter', 'url(#filter-2)') /// FILTER_DEFAULT
$("#commit1_legend").css('color', '#00FF00'); $("#commit1_legend").css('color', commit1_legend_color);
$("#commit1_legend_fs").css('color', '#00FF00'); $("#commit1_legend_fs").css('color', commit1_legend_color);
$("#commit2_legend").css('color', '#FF0000'); $("#commit2_legend").css('color', commit2_legend_color);
$("#commit2_legend_fs").css('color', '#FF0000'); $("#commit2_legend_fs").css('color', commit2_legend_color);
} }
} }
@ -1257,6 +1259,10 @@ $(document).ready(function()
function ready() function ready()
{ {
console.log('Starting JS'); console.log('Starting JS');
commit1_legend_color = $(".icon-commit1").css('color');
commit2_legend_color = $(".icon-commit2").css('color');
commit_standalone_color = $(".commit-standalone-color").css('color');
console.log(commit_standalone_color);
load_project_data(); load_project_data();
load_commits(); load_commits();
check_server_status(); check_server_status();
@ -1613,31 +1619,31 @@ function update_fullscreen_label()
else else
{ {
label = ` label = `
<div id="fullscreen_label" class="alert alert-dark border border-dark rounded-pill position-absolute top-10 start-50 translate-middle" style="background-color: #333;" role="alert"> <div id="fullscreen_label" class="alert alert-dark border border-dark rounded-pill position-absolute top-10 start-50 translate-middle ui-fs-label" role="alert">
<span id=commit1_legend_fs style="margin-left:0em; margin-right:0.2em; color: #00FF00; width: 10px; height: 10px;" class="iconify" data-icon="teenyicons-square-solid"></span> <span id="commit1_legend_fs" class="iconify icon-commit1-fs" data-icon="teenyicons-square-solid"></span>
<small id=commit1_legend_text_fs class="text-sm text-light"> <small id="commit1_legend_text_fs" class="text-sm text-light">
Newer Newer
<span id="commit1_fs" class="text-monospace">(<a id="commit1_legend_hash">${commit1}</a>)</span> <span id="commit1_fs" class="text-monospace">(<a id="commit1_legend_hash">${commit1}</a>)</span>
</small> </small>
<span style="display: inline; width: 3em;"></span> <span class="ui-legend-sep1-fs"></span>
<span id="commit2_legend_fs" style="display: inline; margin-left:1em; margin-right:0.2em; color: #FF0000; width: 10px; height: 10px;" class="iconify" data-icon="teenyicons-square-solid"></span> <span id="commit2_legend_fs" class="iconify icon-commit2-fs" data-icon="teenyicons-square-solid"></span>
<small id=commit2_legend_text_fs class="text-sm text-light"> <small id=commit2_legend_text_fs class="text-sm text-light">
Older Older
<span id="commit2_fs" class="text-monospace">(<a id="commit2_legend_hash">${commit2}</a>)</span> <span id="commit2_fs" class="text-monospace">(<a id="commit2_legend_hash">${commit2}</a>)</span>
</small> </small>
<span style="display: inline; width: 3em;"></span> <span class="ui-legend-sep1-fs"></span>
<span id="commit3_legend_fs" style="margin-left:1em; margin-right:0.2em; color: #FFA000; width: 10px; height: 10px;" class="iconify" data-icon="teenyicons-square-solid"></span> <span id="commit3_legend_fs" class="iconify icon-commit3-fs" data-icon="teenyicons-square-solid"></span>
<small id="commit3_legend_text_fs" class="text-sm text-light"> <small id="commit3_legend_text_fs" class="text-sm text-light">
Unchanged Unchanged
</small> </small>
<small class="text-sm text-muted" style="margin-left:1em; margin-right:0.2em;"> <small class="text-sm text-muted ui-legend-sep2-fs">
| |
</small> </small>
<span style="display: inline; width: 3em;"></span> <span class="ui-legend-sep1-fs"></span>
<small id="view_item_fs" class="text-sm text-light" style="margin-left:1em; margin-right:0.2em;"> <small id="view_item_fs" class="text-sm text-light ui-view-item-fs">
${view_item} ${view_item}
</small> </small>
</div> </div>