From 6a380e3ddbb071e89fdc8b037725159ad4e25920 Mon Sep 17 00:00:00 2001
From: "Salvador E. Tropea" <salvador@inti.gob.ar>
Date: Tue, 12 Dec 2023 11:08:31 -0300
Subject: [PATCH] [KiRi] Moved style from HTML to CSS

---
 kibot/resources/kiri/index.html | 116 ++++++++---------
 kibot/resources/kiri/kiri.css   | 217 ++++++++++++++++++++++++++++++++
 2 files changed, 277 insertions(+), 56 deletions(-)

diff --git a/kibot/resources/kiri/index.html b/kibot/resources/kiri/index.html
index f54557f5..ec5467ed 100644
--- a/kibot/resources/kiri/index.html
+++ b/kibot/resources/kiri/index.html
@@ -18,25 +18,28 @@
 		<div id="server_offline" style="display: none;">
 		</div>
 
-		<div class="container fill no-gutters" style="background-color: #333; overflow-y: hidden; overflow-x: hidden; padding: 0px 10px 0px 10px; margin: 0px;">
-			<div class="row fill align-items-start no-gutters" style="overflow-y: hidden; overflow-x: hidden; padding: 0px 0px 0px 0px; margin: 0px;">
-				<div class="col align-self-start justify-content-start col-3 no-gutters" style="height: 100%; overflow-y: hidden; overflow-x: hidden; padding: 0px 0px 0px 0px; margin: 0px;">
-					<div class="list-group 3 no-gutters" style="padding: 0px 0px 0px 0px; margin: 0px 0px 0px 8px; height: 95%;">
-						<span style="margin-top: 1em"></span>
-						<h3 class="text-light" style="margin-left: 5px;">Kicad Revision Inspector</h3>
-						<div id="sch_title" style="display: inline; margin-left: 5px;">
-							<h4 id="sch_title_text" class="text-warning text-bold" style="margin-bottom: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">[SCH_TITLE]</h4>
+		<!-- User Interface -->
+		<div class="container fill no-gutters ui-style">
+			<div class="row fill align-items-start no-gutters ui-row-style">
+				<!-- Project info and commits -->
+				<div class="col align-self-start justify-content-start col-3 no-gutters ui-col-prjdata">
+					<div class="list-group 3 no-gutters ui-list-prjdata">
+						<span class="ui-list-topsep-prjdata"></span>
+						<h3 class="text-light ui-kiri-title">Kicad Revision Inspector</h3>
+						<div id="sch_title" class="ui-sch-title-m" style="display: inline;">
+							<h4 id="sch_title_text" class="text-warning text-bold ui-sch-title">[SCH_TITLE]</h4>
 							<p id="sch_rev" class="text-light text-sm" >Rev. [SCH_REVISION] ([SCH_DATE])</p>
 						</div>
-						<div id="pcb_title" style="display: none; margin-left: 5px;">
-							<h4 id="pcb_title_text" class="text-info text-bold" style="margin-bottom: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">[PCB_TITLE]</h4>
+						<div id="pcb_title" class="ui-pcb-title-m" style="display: none;">
+							<h4 id="pcb_title_text" class="text-info text-bold ui-pcb-title">[PCB_TITLE]</h4>
 							<p id="pcb_rev" class="text-light text-sm">Rev. [PCB_REVISION] ([PCB_DATE])</p>
 						</div>
-						<p class="text-light" >
-							<span style="margin-left:5px; margin-right:0.5em" class="iconify" data-icon="fa-solid:code-branch" data-inline="false"></span>
+						<!-- Commits -->
+						<p class="text-light">
+							<span class="iconify icon-commits" data-icon="fa-solid:code-branch" data-inline="false"></span>
 							Commits
 						</p>
-						<div class="form-check scrollbox" style="padding: 0px 4px 8px 0px; margin: 0px; margin-right: 4px; overflow-y: scroll">
+						<div class="form-check scrollbox ui-commits-list">
 							<form id="commits_form" class="overflow-auto scrollbox-content">
 								<!-- FILL_COMMITS_HERE -->
 							</form>
@@ -44,49 +47,48 @@
 					</div>
 				</div>
 
-				<div class="col align-self-start justify-content-start col-7 no-gutters" style="background-color: #333; padding: 0px 0px 0px 0px; margin: 0px; height: 90vh;">
+				<!-- Controls, commit legends and diff -->
+				<div class="col align-self-start justify-content-start col-7 no-gutters ui-center">
+					<div class="row no-gutters ui-center-row">
+						<!-- Controls -->
+						<div class="container no-gutters ui-controls">
+							<div class="row no-gutters ui-controls-row">
 
-					<div class="row no-gutters" style="width: 100%; padding: 0px 0px 0px 0px; margin: 0px;">
-
-						<div class="container no-gutters" style="width: 100%; flex: 1; padding: 0px 0px 0px 0px; margin: 0px;">
-
-							<div class="row no-gutters" style="width: 100%; margin: 0px 0px 0px 5px;">
-
-								<form class="inline" style="padding: 0px 0px 0px 0px; margin: 20px 0px 0px 10px;">
+								<form class="inline ui-pcb-sch-sel">
 									<div id="view_mode" class="form-group row btn-group btn-group-toggle" data-toggle="buttons" role="group" aria-label="View Mode">
 										<label id="show_sch_lbl" data-toggle="tooltip" title="Schematic View (s)" class="btn btn-secondary active" onclick="show_sch()">
 											<input id="show_sch" type="radio" name="view_mode" value="show_sch" checked>
-											<span class="iconify" style="width: 20px; height: 20px;" data-icon="carbon:schematics" data-inline="false"></span>
+											<span class="iconify icon-control" data-icon="carbon:schematics" data-inline="false"></span>
 										</label>
 										<label id="show_pcb_lbl" data-toggle="tooltip" title="Layout View (s)" class="btn btn-secondary" onclick="show_pcb()">
 											<input id="show_pcb" type="radio" name="view_mode" value="show_pcb" >
-											<span class="iconify" style="width: 20px; height: 20px;" data-icon="codicon:circuit-board" data-inline="false"></span>
+											<span class="iconify icon-control" data-icon="codicon:circuit-board" data-inline="false"></span>
 										</label>
 									</div>
 								</form>
 
-								<span style="width: 2em"></span>
+								<span class="ui-controls-sep1"></span>
 
-								<form class="inline" style="padding: 0px 0px 0px 0px; margin: 20px 0px 0px 20px;">
+								<form class="inline ui-controls-svg">
 									<div id="svg_controls" class="form-group btn-group btn-group-toggle" role="group" aria-label="Zoom Level">
 										<button id="zoom-in" data-toggle="tooltip" title="Zoom In (+)" name="svg_controls" type="button" aria-pressed="false" class="btn btn-secondary" onclick="this.blur();">
-										<span class="iconify" style="width: 20px; height: 20px;" data-icon="akar-icons:zoom-in" data-inline="false"></span>
+										<span class="iconify icon-control" data-icon="akar-icons:zoom-in" data-inline="false"></span>
 										</button>
-										<button id="zoom-out" data-toggle="tooltip" title="Zoom Out (-)" name="svg_controls" type="button" aria-pressed="false" class="btn btn-secondary" onclick="this.blur();" >
-										<span class="iconify" style="width: 20px; height: 20px;" data-icon="akar-icons:zoom-out" data-inline="false"></span>
+										<button id="zoom-out" data-toggle="tooltip" title="Zoom Out (-)" name="svg_controls" type="button" aria-pressed="false" class="btn btn-secondary" onclick="this.blur();">
+										<span class="iconify icon-control" data-icon="akar-icons:zoom-out" data-inline="false"></span>
 										</button>
-										<button id="zoom-fit" data-toggle="tooltip" title="Fit View (0)" name="svg_controls" type="button" aria-pressed="false" class="btn btn-secondary" onclick="this.blur();" >
-										<span class="iconify" style="width: 20px; height: 20px;" data-icon="carbon:center-to-fit" data-inline="false"></span>
+										<button id="zoom-fit" data-toggle="tooltip" title="Fit View (0)" name="svg_controls" type="button" aria-pressed="false" class="btn btn-secondary" onclick="this.blur();">
+										<span class="iconify icon-control" data-icon="carbon:center-to-fit" data-inline="false"></span>
 										</button>
 									</div>
 								</form>
 
-								<span style="width: 1em"></span>
+								<span class="ui-controls-sep2"></span>
 
-								<form class="inline" style="padding: 0px 0px 0px 0px; margin: 20px 0px 0px 20px;">
+								<form class="inline ui-controls-info">
 									<div id="info_controls" class="form-group btn-group btn-group-toggle" role="group" aria-label="Info">
 										<button id="info-btn" data-toggle="modal" title="Info (i)" name="info_controls" type="button" aria-pressed="false" class="btn btn-secondary" data-target="#shortcuts-modal" onclick="this.blur();">
-											<span class="iconify" style="width: 20px; height: 20px;" data-icon="akar-icons:info" data-inline="false"></span>
+											<span class="iconify icon-control" data-icon="akar-icons:info" data-inline="false"></span>
 										</button>
 									</div>
 								</form>
@@ -94,11 +96,12 @@
 							</div>
 						</div>
 					</div>
-					<div class="col no-gutters" style="width: 100%; padding: 0px 0px 0px 0px; margin: 0px; height: 100%; ">
-						<div class="col no-gutters" style="width: 100%; height: 90%; padding: 0px 0px 0px 0px; margin: 0px;">
-							<div id="legend" class="rounded no-gutters" style="background-color: #222; width: 100%; padding: 8px 5px 8px 5px; margin: 0px;">
+					<!-- Commit legends -->
+					<div class="col no-gutters ui-canvas-out">
+						<div class="col no-gutters ui-canvas-in">
+							<div id="legend" class="rounded no-gutters ui-legend">
 								<iframe name="hidden_post_target" class="hidden_iframe"></iframe>
-								<span id=commit1_legend style="margin-left:0.5em; margin-right:0.2em; color: #00FF00; width: 10px; height: 10px;" class="iconify" data-icon="teenyicons-square-solid"></span>
+								<span id="commit1_legend" class="iconify icon-commit1" data-icon="teenyicons-square-solid"></span>
 								<small id="commit1_legend_text" class="text-sm text-light">
 									Newer
 									<span class="text-monospace">
@@ -109,8 +112,8 @@
 										</form>
 									</span>
 								</small>
-								<span style="display: inline; width: 2em;"></span>
-								<span id="commit2_legend" 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 class="ui-legend-sep1"></span>
+								<span id="commit2_legend icon-commit2" class="iconify" data-icon="teenyicons-square-solid"></span>
 								<small id="commit2_legend_text" class="text-sm text-light">
 									Older
 									<span class="text-monospace">
@@ -121,31 +124,31 @@
 										</form>
 									</span>
 								</small>
-								<span id="commit3_legend" 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 icon-commit3" class="iconify" data-icon="teenyicons-square-solid"></span>
 								<small id="commit3_legend_text" class="text-sm text-light">
 									Unchanged
 								</small>
 							</div>
-
-							<div id="diff-container" class="position-relative" style="height: 94%; padding: 0px">
+							<!-- Diff canvas -->
+							<div id="diff-container" class="position-relative ui-diff-container">
 								<!-- SVGS_GOES_HERE -->
 							</div>
 						</div>
 					</div>
-
 				</div>
 
-				<div class="col align-self-start justify-content-start col-1 no-gutters" style="width: 100%; padding: 0px 0px 0px 0px; margin: 0px; height: 100vh;" >
-
+				<!-- Sheets/Layers -->
+				<div class="col align-self-start justify-content-start col-1 no-gutters ui-sheets-col">
 					<div class="list-group no-gutters" id="pages_list" style="display: inline;">
-						<div class="form-check no-gutters" style="width: 180px; padding-top: 1em">
+						<!-- Sheets form -->
+						<div class="form-check no-gutters ui-sheets-form">
 							<p class="text-light">
-								<span style="margin-right:0.5em; width: 20px; height: 20px;" class="iconify" data-icon="gridicons:next-page" data-inline="false"></span>
+								<span class="iconify icon-sheets" data-icon="gridicons:next-page" data-inline="false"></span>
 								Pages
 							</p>
-							<div class="row" style="height: 85%; width: 300px;">
-								<div class="col" style="height: 100%; width: 100%">
-									<div id="pages_list_div" class="form-check scrollbox" style="height: 100%; width: 100%; padding: 0px 0px 8px 0px; margin: 0px; overflow-y: scroll; max-height: 90vh;">
+							<div class="row ui-sheets-form-row">
+								<div class="col ui-sheets-form-col">
+									<div id="pages_list_div" class="form-check scrollbox ui-sheets-form-div">
 										<form id="pages_list_form" class="overflow-auto scrollbox-content">
 											<!-- FILL_PAGES_HERE -->
 										</form>
@@ -155,15 +158,15 @@
 						</div>
 					</div>
 
-					<div class="list-group no-gutters" id="layers_list" style="display: none; height: 100%;">
-						<div class="form-check no-gutters" style="width: 180px; padding-top: 1em; height: 100%; ">
+					<div class="list-group no-gutters" id="layers_list" style="display: none;">
+						<div class="form-check no-gutters ui-sheets-form">
 							<p class="text-light">
-								<span style="margin-right:0.5em; width: 20px; height: 20px;" class="iconify" data-icon="teenyicons:layers-solid" data-inline="false"></span>
+								<span class="iconify icon-sheets" data-icon="teenyicons:layers-solid" data-inline="false"></span>
 								Layers
 							</p>
-							<div class="row" style="height: 85%; width: 300px;">
-								<div class="col" style="height: 100%; width: 100%">
-									<div id="layers_list_div" class="form-check scrollbox" style="height: 100%; width: 100%; padding: 0px 0px 8px 0px; margin: 0px; overflow-y: scroll; max-height: 90vh;">
+							<div class="row ui-sheets-form-row">
+								<div class="col ui-sheets-form-col">
+									<div id="layers_list_div" class="form-check scrollbox ui-sheets-form-div">
 										<form id="layers_list_form" class="overflow-auto scrollbox-content">
 											<!-- FILL_LAYERS_HERE -->
 										</form>
@@ -176,6 +179,7 @@
 			</div>
 		</div>
 
+		<!-- Help dialog -->
 		<div class="modal fade text-light" id="shortcuts-modal" tabindex="-1" role="dialog" aria-labelledby="shortcuts-modal-title" aria-hidden="true">
 			<div class="modal-dialog modal-dialog-centered" role="document">
 				<div class="modal-content">
diff --git a/kibot/resources/kiri/kiri.css b/kibot/resources/kiri/kiri.css
index a7d875ea..18cbbfbd 100644
--- a/kibot/resources/kiri/kiri.css
+++ b/kibot/resources/kiri/kiri.css
@@ -360,3 +360,220 @@ hr {
 	margin-left: 0.5em;
 	margin-right: 0.1em;
 }
+
+.icon-commits {
+	margin-left: 5px;
+	margin-right:0.5em;
+}
+
+.icon-control {
+	width: 20px;
+	height: 20px;
+}
+
+.icon-commit1 {
+	margin-left: 0.5em;
+	margin-right: 0.2em;
+	color: #00FF00;
+	width: 10px;
+	height: 10px;
+}
+
+.icon-commit2 {
+	display: inline;
+	margin-left: 1em;
+	margin-right:0.2em;
+	color: #FF0000;
+	width: 10px;
+	height: 10px;
+}
+
+.icon-commit3 {
+	margin-left:1em;
+	margin-right:0.2em;
+	color: #FFA000;
+	width: 10px;
+	height: 10px;
+}
+
+.icon-sheets {
+	margin-right:0.5em;
+	width: 20px;
+	height: 20px;
+}
+
+.ui-style {
+	background-color: #333;
+	overflow-y: hidden;
+	overflow-x: hidden;
+	padding: 0px 10px 0px 10px;
+	margin: 0px;
+}
+
+.ui-row-style {
+	overflow-y: hidden;
+	overflow-x: hidden;
+	padding: 0px 0px 0px 0px;
+	margin: 0px;
+}
+
+.ui-col-prjdata {
+	height: 100%;
+	overflow-y: hidden;
+	overflow-x: hidden;
+	padding: 0px 0px 0px 0px;
+	margin: 0px;
+}
+
+.ui-list-prjdata {
+	height: 95%;
+	padding: 0px 0px 0px 0px;
+	margin: 0px 0px 0px 8px;
+}
+
+.ui-list-topsep-prjdata {
+	margin-top: 1em;
+}
+
+.ui-kiri-title {
+	margin-left: 5px;
+}
+
+.ui-sch-title-m {
+	margin-left: 5px;
+}
+
+.ui-pcb-title-m {
+	margin-left: 5px;
+}
+
+.ui-sch-title {
+	margin-bottom: 0px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.ui-pcb-title {
+	margin-bottom: 0px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.ui-commits-list {
+	padding: 0px 4px 8px 0px;
+	margin: 0px;
+	margin-right: 4px;
+	overflow-y: scroll;
+}
+
+.ui-center {
+	background-color: #333;
+	padding: 0px 0px 0px 0px;
+	margin: 0px;
+	height: 90vh;
+}
+
+.ui-center-row {
+	width: 100%;
+	padding: 0px 0px 0px 0px;
+	margin: 0px;
+}
+
+.ui-controls {
+	width: 100%;
+	flex: 1;
+	padding: 0px 0px 0px 0px;
+	margin: 0px;
+}
+
+.ui-controls-row {
+	width: 100%;
+	margin: 0px 0px 0px 5px;
+}
+
+.ui-pcb-sch-sel {
+	padding: 0px 0px 0px 0px;
+	margin: 20px 0px 0px 10px;
+}
+
+.ui-controls-sep1 {
+	width: 2em;
+}
+
+.ui-controls-svg {
+	padding: 0px 0px 0px 0px;
+	margin: 20px 0px 0px 20px;
+}
+
+.ui-controls-sep2 {
+	width: 1em;
+}
+
+.ui-controls-info {
+	padding: 0px 0px 0px 0px;
+	margin: 20px 0px 0px 20px;
+}
+
+.ui-canvas-out {
+	width: 100%;
+	height: 100%;
+	padding: 0px 0px 0px 0px;
+	margin: 0px;
+}
+
+.ui-canvas-in {
+	width: 100%;
+	height: 90%;
+	padding: 0px 0px 0px 0px;
+	margin: 0px;
+}
+
+.ui-legend {
+	background-color: #222;
+	width: 100%;
+	padding: 8px 5px 8px 5px;
+	margin: 0px;
+}
+
+.ui-legend-sep1 {
+	display: inline;
+	width: 2em;
+}
+
+.ui-diff-container {
+	height: 94%;
+	padding: 0px;
+}
+
+.ui-sheets-col {
+	width: 100%;
+	padding: 0px 0px 0px 0px;
+	margin: 0px;
+	height: 100vh;
+}
+
+.ui-sheets-form {
+	width: 180px;
+	padding-top: 1em;
+}
+
+.ui-sheets-form-row {
+	height: 85%;
+	width: 300px;
+}
+
+.ui-sheets-form-col {
+	height: 100%;
+	width: 100%;
+}
+
+.ui-sheets-form-div {
+	height: 100%;
+	width: 100%;
+	padding: 0px 0px 8px 0px;
+	margin: 0px;
+	overflow-y: scroll;
+	max-height: 90vh;
+}