From 1691564857148bac1fd043f1321bced350561bcc Mon Sep 17 00:00:00 2001
From: Maxime Jacquemin <maxime2.jacquemin@gmail.com>
Date: Fri, 18 Feb 2022 19:24:35 +0100
Subject: [PATCH] [ivette] A dark mode for the Pivot Table
---
ivette/src/colors/dark.css | 1 +
ivette/src/colors/light.css | 1 +
ivette/src/dome/renderer/controls/style.css | 1 +
.../src/frama-c/kernel/PivotTable-style.css | 326 ++++++++++++++++++
ivette/src/frama-c/kernel/PivotTable.tsx | 3 +-
5 files changed, 331 insertions(+), 1 deletion(-)
create mode 100644 ivette/src/frama-c/kernel/PivotTable-style.css
diff --git a/ivette/src/colors/dark.css b/ivette/src/colors/dark.css
index a9d73f4b698..ee7b62fbc14 100644
--- a/ivette/src/colors/dark.css
+++ b/ivette/src/colors/dark.css
@@ -39,6 +39,7 @@
--lcd-button-color: #21211a;
--lcd-button-background: #727798;
+ --default-button-color: #3c495b;
--default-led-img: radial-gradient(circle at center, #5f92b9, #4189bf);
--default-button-img: linear-gradient(to bottom, #3c495b 0%, #455164 100%);
--default-button-hover: #364355;
diff --git a/ivette/src/colors/light.css b/ivette/src/colors/light.css
index c3c59e29af0..8b3c4f6f8c9 100644
--- a/ivette/src/colors/light.css
+++ b/ivette/src/colors/light.css
@@ -39,6 +39,7 @@
--lcd-button-color: #61611a;
--lcd-button-background: #b2b798;
+ --default-button-color: #e8e8e8;
--default-led-img: radial-gradient(circle at center, #9fd2f9, #81c9ff);
--default-button-img: linear-gradient(to bottom, #e8e8e8 0%, #f1f1f1 100%);
--default-button-hover: #ffffff;
diff --git a/ivette/src/dome/renderer/controls/style.css b/ivette/src/dome/renderer/controls/style.css
index a6eb5276d72..4d04c9be879 100644
--- a/ivette/src/dome/renderer/controls/style.css
+++ b/ivette/src/dome/renderer/controls/style.css
@@ -11,6 +11,7 @@
.dome-xLabel .dome-xIcon {
margin-right: 4px ;
+ fill: var(--info-text-discrete);
}
.dome-xLabel.dome-text-descr {
diff --git a/ivette/src/frama-c/kernel/PivotTable-style.css b/ivette/src/frama-c/kernel/PivotTable-style.css
new file mode 100644
index 00000000000..d7df5c6006c
--- /dev/null
+++ b/ivette/src/frama-c/kernel/PivotTable-style.css
@@ -0,0 +1,326 @@
+.pvtUi {
+ color: var(--text);
+ font-family: Verdana;
+ border-collapse: collapse;
+}
+.pvtUi select {
+ user-select: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -khtml-user-select: none;
+ -ms-user-select: none;
+}
+
+.pvtUi td.pvtOutput {
+ vertical-align: top;
+}
+
+table.pvtTable {
+ font-size: 8pt;
+ text-align: left;
+ border-collapse: collapse;
+ margin-top: 3px;
+ margin-left: 3px;
+ font-family: Verdana;
+}
+table.pvtTable thead tr th,
+table.pvtTable tbody tr th {
+ background-color: var(--background-intense);
+ border: 1px solid var(--border);
+ font-size: 8pt;
+ padding: 5px;
+}
+
+table.pvtTable .pvtColLabel {
+ text-align: center;
+}
+table.pvtTable .pvtTotalLabel {
+ text-align: right;
+}
+
+table.pvtTable tbody tr td {
+ color: var(--text);
+ padding: 5px;
+ background-color: var(--background-alterning-odd);
+ border: 1px solid var(--border);
+ vertical-align: top;
+ text-align: right;
+}
+
+.pvtTotal,
+.pvtGrandTotal {
+ font-weight: bold;
+}
+
+.pvtRowOrder,
+.pvtColOrder {
+ cursor: pointer;
+ width: 15px;
+ margin-left: 5px;
+ display: inline-block;
+ user-select: none;
+ text-decoration: none !important;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -khtml-user-select: none;
+ -ms-user-select: none;
+}
+
+.pvtAxisContainer,
+.pvtVals {
+ border: 1px solid var(--border);
+ background: var(--background-softer);
+ padding: 5px;
+ min-width: 20px;
+ min-height: 20px;
+}
+
+.pvtRenderers {
+ padding-left: 5px;
+ user-select: none;
+}
+
+.pvtDropdown {
+ display: inline-block;
+ position: relative;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -khtml-user-select: none;
+ -ms-user-select: none;
+ margin: 3px;
+}
+
+.pvtDropdownIcon {
+ float: right;
+ color: var(--border-discrete);
+}
+.pvtDropdownCurrent {
+ text-align: left;
+ border: 1px solid var(--border-discrete);
+ border-radius: 4px;
+ display: inline-block;
+ position: relative;
+ width: 210px;
+ box-sizing: border-box;
+ background: var(--background-interaction);
+}
+
+.pvtDropdownCurrentOpen {
+ border-radius: 4px 4px 0 0;
+}
+
+.pvtDropdownMenu {
+ background: var(--background-alterning-odd);
+ position: absolute;
+ width: 100%;
+ margin-top: -1px;
+ border-radius: 0 0 4px 4px;
+ border: 1px solid var(--border-discrete);
+ border-top: 1px solid var(--border-discrete);
+ box-sizing: border-box;
+}
+
+.pvtDropdownValue {
+ padding: 2px 5px;
+ font-size: 12px;
+ text-align: left;
+}
+.pvtDropdownActiveValue {
+ background: var(--selected-element);
+}
+
+.pvtVals {
+ text-align: center;
+ white-space: nowrap;
+ vertical-align: top;
+ padding-bottom: 12px;
+}
+
+.pvtRows {
+ height: 35px;
+}
+
+.pvtAxisContainer li {
+ padding: 8px 6px;
+ list-style-type: none;
+ cursor: move;
+}
+.pvtAxisContainer li.pvtPlaceholder {
+ -webkit-border-radius: 5px;
+ padding: 3px 15px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+ border: 1px dashed var(--border-discrete);
+}
+.pvtAxisContainer li.pvtPlaceholder span.pvtAttr {
+ display: none;
+}
+
+.pvtAxisContainer li span.pvtAttr {
+ -webkit-text-size-adjust: 100%;
+ background: var(--background-interaction);
+ border: 1px solid var(--border);
+ padding: 2px 5px;
+ white-space: nowrap;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+ user-select: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -khtml-user-select: none;
+ -ms-user-select: none;
+}
+
+.pvtTriangle {
+ cursor: pointer;
+ color: var(--info-text-discrete);
+}
+
+.pvtHorizList li {
+ display: inline-block;
+}
+.pvtVertList {
+ vertical-align: top;
+}
+
+.pvtFilteredAttribute {
+ font-style: italic;
+}
+
+.sortable-chosen .pvtFilterBox {
+ display: none !important;
+}
+
+.pvtCloseX {
+ position: absolute;
+ right: 5px;
+ top: 5px;
+ font-size: 18px;
+ cursor: pointer;
+ text-decoration: none !important;
+}
+
+.pvtDragHandle {
+ position: absolute;
+ left: 5px;
+ top: 5px;
+ font-size: 18px;
+ cursor: move;
+ color: var(--border-discrete);
+}
+
+.pvtButton {
+ color: var(--text);
+ border-radius: 5px;
+ padding: 3px 6px;
+ background: var(--default-button-color);
+ border: 1px solid;
+ border-color: var(--border);
+ font-size: 14px;
+ margin: 3px;
+ transition: 0.34s all cubic-bezier(0.19, 1, 0.22, 1);
+ text-decoration: none !important;
+}
+
+.pvtButton:hover {
+ background: var(--default-button-hover);
+ background-image: none;
+ border-color: var(--border-discrete);
+}
+
+.pvtButton:active {
+ background: var(--default-button-active);
+ background-image: none;
+}
+
+.pvtFilterBox input {
+ border: 1px solid var(--border-discrete);
+ border-radius: 5px;
+ color: var(--info-text-discrete);
+ padding: 0 3px;
+ font-size: 14px;
+}
+
+.pvtFilterBox input:focus {
+ border-color: var(--border);
+ outline: none;
+}
+
+.pvtFilterBox {
+ z-index: 100;
+ width: 300px;
+ border: 1px solid var(--border);
+ background-color: var(--background-report);
+ position: absolute;
+ text-align: center;
+ user-select: none;
+ min-height: 100px;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -khtml-user-select: none;
+ -ms-user-select: none;
+}
+
+.pvtFilterBox h4 {
+ margin: 15px;
+}
+.pvtFilterBox p {
+ margin: 10px auto;
+}
+.pvtFilterBox button {
+ color: var(--text);
+}
+.pvtFilterBox input[type='text'] {
+ width: 230px;
+ color: var(--text);
+ margin-bottom: 5px;
+}
+
+.pvtCheckContainer {
+ text-align: left;
+ font-size: 14px;
+ white-space: nowrap;
+ overflow-y: scroll;
+ width: 100%;
+ max-height: 30vh;
+ border-top: 1px solid var(--border);
+}
+
+.pvtCheckContainer p {
+ margin: 0;
+ margin-bottom: 1px;
+ padding: 3px;
+ cursor: default;
+}
+
+.pvtCheckContainer p.selected {
+ background: var(--selected-element);
+}
+
+.pvtOnly {
+ display: none;
+ width: 35px;
+ float: left;
+ font-size: 12px;
+ padding-left: 5px;
+ cursor: pointer;
+}
+
+.pvtOnlySpacer {
+ display: block;
+ width: 35px;
+ float: left;
+}
+
+.pvtCheckContainer p:hover .pvtOnly {
+ display: block;
+}
+.pvtCheckContainer p:hover .pvtOnlySpacer {
+ display: none;
+}
+
+.pvtRendererArea {
+ padding: 5px;
+}
+
diff --git a/ivette/src/frama-c/kernel/PivotTable.tsx b/ivette/src/frama-c/kernel/PivotTable.tsx
index 1d1684ad141..54b3cff8814 100644
--- a/ivette/src/frama-c/kernel/PivotTable.tsx
+++ b/ivette/src/frama-c/kernel/PivotTable.tsx
@@ -34,7 +34,8 @@ import * as Status from 'frama-c/kernel/Status';
import * as States from 'frama-c/states';
import * as PivotState from 'frama-c/plugins/pivot/api/general';
import PivotTableUI from 'react-pivottable/PivotTableUI';
-import 'react-pivottable/pivottable.css';
+// import 'react-pivottable/pivottable.css';
+import 'frama-c/kernel/PivotTable-style.css';
// --------------------------------------------------------------------------
// --- Pivot Table for Properties
--
GitLab