AliceO2Group · xsalonx · Aug 8, 2023 · Aug 2, 2023 · Aug 3, 2023 · Aug 3, 2023
diff --git a/app/public/components/detectors/detectorIcon.js b/app/public/components/detectors/detectorIcon.js
@@ -15,6 +15,7 @@
 import qcTypeSelection from '../../views/runs/runsPerDataPass/overview/qcTypeSelection.js';
 import { h } from '/js/src/index.js';
 import { RCT } from '../../config.js';
+import { showModal } from '../../views/modal/modal.js';
 const { runBasedQuality } = RCT.quality;
 
 export default function detectorIcon(navigation, item, index, detectorName, timeBased = false) {
@@ -29,18 +30,8 @@ export default function detectorIcon(navigation, item, index, detectorName, time
             }, item, index, detectorName, runDetectorId, timeBased))),
         h('button.btn.no-border-bottom.pointer.run-quality.good', {
             id: runDetectorId,
-            onclick: () => {
-                document.getElementById(runBasedQcModalId).style.display = 'block';
-                document.addEventListener('click', (event) => {
-                    const modalContent = document.getElementsByClassName('modal-content');
-                    const modal = document.getElementsByClassName('modal');
-                    if (Array.from(modalContent).find((e) => e != event.target)
-                    && Array.from(modal).find((e) => e == event.target)
-                    && document.getElementById(runBasedQcModalId)) {
-                        document.getElementById(runBasedQcModalId).style.display = 'none';
-                    }
-                });
-            } },
+            onclick: () => showModal(runBasedQcModalId),
+        },
         runBasedQuality.good),
     ];
 }
diff --git a/app/public/components/sidebar/sidebar.js b/app/public/components/sidebar/sidebar.js
@@ -16,6 +16,7 @@ import { h } from '/js/src/index.js';
 import { RCT } from '../../config.js';
 import sidebarItem from './sidebarItem.js';
 import { modal, modalIds, showModal } from '../../views/modal/modal.js';
+import { pageTitle } from '../table/title.js';
 const { pageNames } = RCT;
 
 /**
@@ -26,38 +27,42 @@ const { pageNames } = RCT;
  */
 
 export default function sidebar(model) {
-    return h('.sidebar.p3',
-        modal(modalIds.about.modal),
-        modal(modalIds.pageSettings.modal, model),
-        h('.logo'),
-        h('.flex-column.gap-20',
-            h('.sidebar-section',
-                h('.sidebar-section-title', 'Pages'),
-                sidebarItem(model, pageNames.periods, 'Periods'),
-                sidebarItem(model, pageNames.dataPasses, 'Data Passes'),
-                sidebarItem(model, pageNames.anchoragePerDatapass, 'Anchorage per Data pass'),
-                sidebarItem(model, pageNames.mc, 'Monte Carlo'),
-                sidebarItem(model, pageNames.anchoredPerMC, 'Anchored per MC'),
-                sidebarItem(model, pageNames.runsPerPeriod, 'Runs per period'),
-                sidebarItem(model, pageNames.runsPerDataPass, 'Runs per Data pass'),
-                sidebarItem(model, pageNames.flags, 'QA flags')),
+    return h('.sidebar.sidebar-collapsible', {
+        id: 'sidebar',
+    },
+    modal(modalIds.about.modal),
+    modal(modalIds.pageSettings.modal, model),
+    h('.logo.ph3.hide-on-close'),
+    h('.flex-column.gap-20',
+        h('.sidebar-section',
+            h('.sidebar-section-title.ph2.hide-on-close', 'Pages'),
+            sidebarItem(model, pageNames.periods, pageTitle(pageNames.periods)),
+            sidebarItem(model, pageNames.dataPasses, pageTitle(pageNames.dataPasses)),
+            sidebarItem(model, pageNames.anchoragePerDatapass, pageTitle(pageNames.anchoragePerDatapass)),
+            sidebarItem(model, pageNames.mc, pageTitle(pageNames.mc)),
+            sidebarItem(model, pageNames.anchoredPerMC, pageTitle(pageNames.anchoredPerMC)),
+            sidebarItem(model, pageNames.runsPerPeriod, pageTitle(pageNames.runsPerPeriod)),
+            sidebarItem(model, pageNames.runsPerDataPass, pageTitle(pageNames.runsPerDataPass)),
+            sidebarItem(model, pageNames.flags, pageTitle(pageNames.flags))),
 
-            h('.sidebar-section',
-                h('.sidebar-section-title', 'Preferences'),
-                h('button.sidebar-item-button', {
-                    onclick: () => showModal(modalIds.pageSettings.modal) },
-                h('.flex-wrap.page-title',
-                    h('.settings-20-off-white.vertical-center'),
-                    h('.title-text.vertical-center', 'Page settings'))),
+        h('.sidebar-section',
+            h('.sidebar-section-title.ph2.hide-on-close', 'Preferences'),
+            h('button.sidebar-item-button', {
+                onclick: () => showModal(modalIds.pageSettings.modal),
+            }, h('.page-title',
+                h('.settings-15-off-white.vertical-center'),
+                h('.title-text.vertical-center.hide-on-close', 'Page settings'))),
 
-                h('', 'List of detectors'),
-                h('', 'Defined filters')),
+            h('button.sidebar-item-button', {
+                onclick: () => showModal(modalIds.about.modal),
+            }, h('.page-title',
+                h('.detector-15-off-white.vertical-center'),
+                h('.title-text.vertical-center.hide-on-close', 'Detectors')))),
 
-            h('.sidebar-section',
-                h('button.sidebar-item-button', {
-                    onclick: () => showModal(modalIds.about.modal),
-                },
-                h('.flex-wrap.page-title',
-                    h('.about-15-off-white.vertical-center'),
-                    h('.title-text.vertical-center', 'About'))))));
+        h('.sidebar-section',
+            h('button.sidebar-item-button', {
+                onclick: () => showModal(modalIds.about.modal),
+            }, h('.page-title',
+                h('.about-15-off-white.vertical-center'),
+                h('.title-text.vertical-center.hide-on-close', 'About'))))));
 }
diff --git a/app/public/components/sidebar/sidebarItem.js b/app/public/components/sidebar/sidebarItem.js
@@ -13,25 +13,31 @@
  */
 
 import { h } from '/js/src/index.js';
+import { RCT } from '../../config.js';
+const { pageNames } = RCT;
 
 export default function sidebarItem(model, pageName, label) {
     const subPagesCount = model.getSubPagesCount(pageName);
     const displayedSubPagesCount = subPagesCount > 0 ? ` (${subPagesCount})` : '';
 
-    return h('.flex-wrap', [
-        h('.page-title', {
-            class: model.router.params.page === pageName ? 'selected' : '',
-            onclick: () => model.navigation.goToDefaultPageUrl(pageName),
-        },
-        model.router.params.page === pageName
-            ? h('',
-                h('.vertical-center',
-                    h('.current-page',
-                        h('.title-text-relative.hidden', label))),
-                h('.folder-15-off-white.vertical-center'),
-                h('.title-text.vertical-center', label, displayedSubPagesCount))
-            : h('',
-                h('.folder-15-off-white.vertical-center'),
-                h('.title-text.vertical-center', label, displayedSubPagesCount))),
-    ]);
+    const icon = () => {
+        switch (pageName) {
+            case pageNames.periods: return h('.periods-15-off-white.vertical-center');
+            case pageNames.dataPasses: return h('.data-passes-15-off-white.vertical-center');
+            case pageNames.anchoragePerDatapass: return h('.anchorage-per-dp-15-off-white.vertical-center');
+            case pageNames.mc: return h('.mc-15-off-white.vertical-center');
+            case pageNames.anchoredPerMC: return h('.anchored-per-mc-15-off-white.vertical-center');
+            case pageNames.runsPerPeriod: return h('.runs-per-period-15-off-white.vertical-center');
+            case pageNames.runsPerDataPass: return h('.runs-per-dp-15-off-white.vertical-center');
+            case pageNames.flags: return h('.qa-15-off-white.vertical-center');
+            default: return h('.folder-15-off-white.vertical-center');
+        }
+    };
+
+    return h(`button.sidebar-item-button${model.router.params.page === pageName ? '.current-page' : ''}`, {
+        class: model.router.params.page === pageName ? 'selected' : '',
+        onclick: () => model.navigation.goToDefaultPageUrl(pageName),
+    }, h('.page-title',
+        icon(),
+        h('.title-text.vertical-center.hide-on-close', label, displayedSubPagesCount)));
 }
diff --git a/app/public/components/table/pager.js b/app/public/components/table/pager.js
@@ -23,6 +23,7 @@ const { site } = RCT.dataReqParams;
 export default function pager(model, data, pagerOnly = true) {
     const sitesNumber = Math.ceil(data.totalRecordsNumber / data.rowsOnSite);
     const currentSite = Number(Object.fromEntries(data.url.searchParams.entries())[site]);
+    const columnOptionsSelectId = 'columns-option-select-id';
 
     const pageButton = (targetSite) => {
         const url = replaceUrlParams(data.url, { [RCT.dataReqParams.site]: targetSite });
@@ -46,7 +47,7 @@ export default function pager(model, data, pagerOnly = true) {
     const moreSitesRight = currentSite < sitesNumber - 1;
 
     function handleOptionChange() {
-        const columnsOptionsSelect = document.getElementById('columns-options');
+        const columnsOptionsSelect = document.getElementById(columnOptionsSelectId);
         const selectedValue = columnsOptionsSelect.options[columnsOptionsSelect.selectedIndex].value;
         switch (selectedValue) {
             case '0':
@@ -88,9 +89,9 @@ export default function pager(model, data, pagerOnly = true) {
                             onclick: () => model.changeSortingRowVisibility(),
                         }, model.sortingRowVisible ? h('.sorting-20-off-white.abs-center') : h('.sorting-20-primary.abs-center')),
 
-                        h('select.select.show-columns', {
-                            id: 'columns-options',
-                            name: 'showOptions',
+                        h('select.select.column-options-select', {
+                            id: columnOptionsSelectId,
+                            name: columnOptionsSelectId,
                             onchange: () => handleOptionChange(),
                         },
                         [

diff --git a/app/public/components/table/title.js b/app/public/components/table/title.js
@@ -16,20 +16,20 @@ import { h } from '/js/src/index.js';
 import { RCT } from '../../config.js';
 const { pageNames } = RCT;
 
-export default function title(page) {
-    const pageTitle = () => {
-        switch (page) {
-            case pageNames.periods: return 'Periods';
-            case pageNames.runsPerPeriod: return 'Runs per period';
-            case pageNames.runsPerDataPass: return 'Runs per data pass';
-            case pageNames.dataPasses: return 'Data passes per period';
-            case pageNames.mc: return 'Monte Carlo';
-            case pageNames.flags: return 'Flags';
-            case pageNames.anchoragePerDatapass: return 'Anchorage per data pass';
-            case pageNames.anchoredPerMC: return 'Anchored per MC';
-            default: return page;
-        }
-    };
+export function pageTitle(page) {
+    switch (page) {
+        case pageNames.periods: return 'Periods';
+        case pageNames.runsPerPeriod: return 'Runs per period';
+        case pageNames.runsPerDataPass: return 'Runs per data pass';
+        case pageNames.dataPasses: return 'Data passes per period';
+        case pageNames.mc: return 'Monte Carlo';
+        case pageNames.flags: return 'Flags';
+        case pageNames.anchoragePerDatapass: return 'Anchorage per data pass';
+        case pageNames.anchoredPerMC: return 'Anchored per MC';
+        default: return page;
+    }
+}
 
-    return h('h3.p-right-15.text-primary', pageTitle());
+export default function title(page) {
+    return h('h3.p-right-15.text-primary', pageTitle(page));
 }
diff --git a/app/public/styles/components/sidebar.less b/app/public/styles/components/sidebar.less
@@ -19,14 +19,8 @@
     width: 100%;
 }
 
-.title-text-relative {
-    position: relative;
-    top: -20px;
-    padding: 0;
-    margin: 0;
-}
-
 .sidebar-item-button {
     .unset;
-    width: 100% !important;
+    width: 89% !important;
+    padding: 0 1em !important;
 }
diff --git a/app/public/styles/ehevi/custom/components/sidebar.css b/app/public/styles/ehevi/custom/components/sidebar.css
@@ -17,6 +17,10 @@
     text-decoration: none !important;
     color: var(--color-gray-darker);
     line-height: normal;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    overflow: hidden;
 }
 
 .ehevi .page-title:hover {
@@ -29,28 +33,48 @@
 
 .ehevi .title-text {
     color: var(--off-white) !important;
-    padding-left: 30px;
-    padding-top: 0;
-    margin-top: 0;
-}
-
-.ehevi .current-page {
-    background-color: var(--white) !important;
-    opacity: 0.1;
-    border-radius: 25px;
-    position: relative;
-    left: -5px;
-    padding-right: 45px;
-    min-height: 25px;
-    align-items: center;
+    padding-left: 2em;
+}
+
+.ehevi .sidebar-item-button.current-page {
+    background-color: var(--primary-hover) !important;
+    border-radius: 25px !important;
 }
 
 .ehevi .sidebar {
     background-color: var(--primary) !important;
     color: var(--off-white) !important;
     font-size: small !important;
+    padding: 0.45em !important;
 }
 
-.ehevi .sidebar-section-title {
+.ehevi .sidebar.sidebar-visible {
+    width: 20em !important;
+}
+
+.ehevi .sidebar.sidebar-collapsible {
+    width: 3.9em;
+    background-color: var(--primary) !important;
+    color: var(--off-white) !important;
+    font-size: small !important;
+    padding: 0.45em !important;
+}
+
+.ehevi .sidebar.sidebar-collapsible:hover {
+    width: 20em !important;
+}
+
+.ehevi .sidebar .sidebar-section-title {
     text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.ehevi .sidebar.sidebar-collapsible .hide-on-close {
+    opacity: 0;
+    transition: opacity 0.3s linear;
+}
+
+.ehevi .sidebar.sidebar-collapsible:hover .hide-on-close {
+    opacity: 1;
+    transition: opacity 0.3s linear;
 }
diff --git a/app/public/styles/ehevi/custom/input/select.css b/app/public/styles/ehevi/custom/input/select.css
@@ -19,36 +19,23 @@
     background-image: url('/styles/images/icons/10/primary/expand-arrow.svg');
     background-repeat: no-repeat;
     background-color: var(--white);
-    background-position-y: 5px;
+    background-position: center right 0.5em;
     border: 1px solid var(--selection-color) !important;
     border-radius: 10px;
     font-size: xx-small;
     padding-left: 10px;
     max-height: 30px;
-  }
-
-.ehevi .select.show-columns {
-    min-width: 170px;
-    background-position-x: 92%;
-    background-position-y: 5px;
-}
 
-.ehevi .select.color-theme {
     font-size: small !important;
     min-height: fit-content;
     min-width: fit-content;
     padding-right: 30px;
-    background-position-x: 85%;
-}
+  }
 
-.ehevi select.filter-select {
-    font-size: small !important;
-    min-height: fit-content;
-    min-width: fit-content;
-    padding-right: 30px;
-    background-position-x: 90%;
+.ehevi .select.column-options-select {
+    min-width: 170px;
 }
 
-.ehevi select.filter-select option[disabled]:first-child {
+.ehevi .select option[disabled]:first-child {
     display: none !important;
 }
diff --git a/app/public/styles/images/icons/15/off-white/anchorage-per-dp.svg b/app/public/styles/images/icons/15/off-white/anchorage-per-dp.svg