AliceO2Group · xsalonx · Aug 1, 2023 · Jul 31, 2023 · Jul 31, 2023 · Jul 31, 2023
diff --git a/app/public/components/about/about.js b/app/public/components/about/about.js
@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright 2019-2020 CERN and copyright holders of ALICE O2.
+ * See http://alice-o2.web.cern.ch/copyright for details of the copyright holders.
+ * All rights not expressly granted are reserved.
+ *
+ * This software is distributed under the terms of the GNU General Public
+ * License v3 (GPL Version 3), copied verbatim in the file "COPYING".
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+import { h } from '/js/src/index.js';
+
+export default function about() {
+    const title = h('h3.text-primary', 'About');
+
+    return h('', [
+        h('.flex.bottom-20.justify-center.items-center',
+            h('.settings-40-primary'),
+            h('.inline.top-15.left-10',
+                title)),
+
+        h('.flex-wrap.justify-between.items-center',
+            h('.icon-placeholder-20-primary'),
+            h('.text-dark-blue.ph2', 'Icons by'),
+
+            h('a', {
+                target: '_blank',
+                href: 'https://icons8.com/',
+            }, 'Icons8')),
+    ]);
+}
diff --git a/app/public/components/common/modal.js b/app/public/components/common/modal.js
diff --git a/app/public/components/sidebar/sidebar.js b/app/public/components/sidebar/sidebar.js
@@ -15,6 +15,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';
 const { pageNames } = RCT;

 /**
@@ -26,6 +27,8 @@ 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',
@@ -41,7 +44,20 @@ export default function sidebar(model) {

            h('.sidebar-section',
                h('.sidebar-section-title', 'Preferences'),
-                h('', 'UI theme'),
+                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('', 'List of detectors'),
-                h('', 'Defined filters'))));
+                h('', 'Defined filters')),
+
+            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'))))));
 }
diff --git a/app/public/components/sidebar/sidebarItem.js b/app/public/components/sidebar/sidebarItem.js
@@ -24,14 +24,14 @@ export default function sidebarItem(model, pageName, label) {
            onclick: () => model.navigation.goToDefaultPageUrl(pageName),
        },
        model.router.params.page === pageName
-            ? h('div',
+            ? h('',
                h('.vertical-center',
                    h('.current-page',
                        h('.title-text-relative.hidden', label))),
-                h('.folder-20.vertical-center'),
+                h('.folder-15-off-white.vertical-center'),
                h('.title-text.vertical-center', label, displayedSubPagesCount))
-            : h('div',
-                h('.folder-20.vertical-center'),
+            : h('',
+                h('.folder-15-off-white.vertical-center'),
                h('.title-text.vertical-center', label, displayedSubPagesCount))),
    ]);
 }
diff --git a/app/public/styles/components/index.less b/app/public/styles/components/index.less
@@ -13,4 +13,4 @@
 */

 @import (less) "./modal.css";
-@import (less) "./sidebar.css";
+@import (less) "./sidebar.less";
diff --git a/app/public/styles/components/sidebar.css → app/public/styles/components/sidebar.less b/app/public/styles/components/sidebar.css → app/public/styles/components/sidebar.less
@@ -25,3 +25,8 @@
    padding: 0;
    margin: 0;
 }
+
+.sidebar-item-button {
+    .unset;
+    width: 100% !important;
+}
diff --git a/app/public/styles/custom.less b/app/public/styles/custom.less
@@ -146,3 +146,7 @@
 .gap-0-5 {
    gap: 0.5em;
 }
+
+.unset {
+    all: unset !important;
+}
diff --git a/app/public/styles/ehevi/index.less b/app/public/styles/ehevi/index.less
@@ -63,3 +63,7 @@
 .ehevi .text-primary {
    color: var(--primary);
 }
+
+.ehevi .text-dark-blue {
+    color: var(--dark-blue);
+}
diff --git a/.../styles/images/icons/10/primary/Close.svg → .../styles/images/icons/10/primary/close.svg b/.../styles/images/icons/10/primary/Close.svg → .../styles/images/icons/10/primary/close.svg
diff --git a/...c/styles/images/icons/10/primary/Done.svg → ...c/styles/images/icons/10/primary/done.svg b/...c/styles/images/icons/10/primary/Done.svg → ...c/styles/images/icons/10/primary/done.svg
diff --git a/app/public/styles/images/icons/15/off-white/about.svg b/app/public/styles/images/icons/15/off-white/about.svg
diff --git a/app/public/styles/images/icons/15/off-white/folder.svg b/app/public/styles/images/icons/15/off-white/folder.svg
diff --git a/...c/styles/images/icons/15/primary/Back.svg → ...c/styles/images/icons/15/primary/back.svg b/...c/styles/images/icons/15/primary/Back.svg → ...c/styles/images/icons/15/primary/back.svg
diff --git a/...tyles/images/icons/15/primary/Forward.svg → ...tyles/images/icons/15/primary/forward.svg b/...tyles/images/icons/15/primary/Forward.svg → ...tyles/images/icons/15/primary/forward.svg
diff --git a/...c/styles/images/icons/15/primary/More.svg → ...c/styles/images/icons/15/primary/more.svg b/...c/styles/images/icons/15/primary/More.svg → ...c/styles/images/icons/15/primary/more.svg
diff --git a/app/public/styles/images/icons/20/Folder.svg b/app/public/styles/images/icons/20/Folder.svg
diff --git a/...tyles/images/icons/20/off-white/Close.svg → ...tyles/images/icons/20/off-white/close.svg b/...tyles/images/icons/20/off-white/Close.svg → ...tyles/images/icons/20/off-white/close.svg
diff --git a/app/public/styles/images/icons/20/off-white/settings.svg b/app/public/styles/images/icons/20/off-white/settings.svg
diff --git a/...yles/images/icons/20/off-white/Slider.svg → ...yles/images/icons/20/off-white/slider.svg b/...yles/images/icons/20/off-white/Slider.svg → ...yles/images/icons/20/off-white/slider.svg
diff --git a/...les/images/icons/20/off-white/Sorting.svg → ...les/images/icons/20/off-white/sorting.svg b/...les/images/icons/20/off-white/Sorting.svg → ...les/images/icons/20/off-white/sorting.svg
diff --git a/.../styles/images/icons/20/primary/Close.svg → .../styles/images/icons/20/primary/close.svg b/.../styles/images/icons/20/primary/Close.svg → .../styles/images/icons/20/primary/close.svg
diff --git a/...tyles/images/icons/20/primary/Forward.svg → ...tyles/images/icons/20/primary/forward.svg b/...tyles/images/icons/20/primary/Forward.svg → ...tyles/images/icons/20/primary/forward.svg
diff --git a/app/public/styles/images/icons/20/primary/icon-placeholder.svg b/app/public/styles/images/icons/20/primary/icon-placeholder.svg
diff --git a/...c/styles/images/icons/20/primary/Link.svg → ...c/styles/images/icons/20/primary/link.svg b/...c/styles/images/icons/20/primary/Link.svg → ...c/styles/images/icons/20/primary/link.svg
diff --git a/...c/styles/images/icons/20/primary/Save.svg → ...c/styles/images/icons/20/primary/save.svg b/...c/styles/images/icons/20/primary/Save.svg → ...c/styles/images/icons/20/primary/save.svg
diff --git a/...styles/images/icons/20/primary/Slider.svg → ...styles/images/icons/20/primary/slider.svg b/...styles/images/icons/20/primary/Slider.svg → ...styles/images/icons/20/primary/slider.svg
diff --git a/...tyles/images/icons/20/primary/Sorting.svg → ...tyles/images/icons/20/primary/sorting.svg b/...tyles/images/icons/20/primary/Sorting.svg → ...tyles/images/icons/20/primary/sorting.svg
diff --git a/...ic/styles/images/icons/90/Synchronize.svg → ...ic/styles/images/icons/90/synchronize.svg b/...ic/styles/images/icons/90/Synchronize.svg → ...ic/styles/images/icons/90/synchronize.svg
diff --git a/...lic/styles/images/icons/90/Unexpected.svg → ...lic/styles/images/icons/90/unexpected.svg b/...lic/styles/images/icons/90/Unexpected.svg → ...lic/styles/images/icons/90/unexpected.svg
diff --git a/app/public/styles/images/icons/icon-sizes.less b/app/public/styles/images/icons/icon-sizes.less
@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright 2019-2020 CERN and copyright holders of ALICE O2.
+ * See http://alice-o2.web.cern.ch/copyright for details of the copyright holders.
+ * All rights not expressly granted are reserved.
+ *
+ * This software is distributed under the terms of the GNU General Public
+ * License v3 (GPL Version 3), copied verbatim in the file "COPYING".
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+.icon-only-button {
+    width: 48px;
+    height: 32px;
+    padding: 0 !important;
+    display: inline-block;
+    position: relative;
+}
+
+.icon-10 {
+    width: 10px;
+    height: 10px;
+    display: inline-block;
+}
+
+.icon-15 {
+    width: 15px;
+    height: 15px;
+    display: inline-block;
+}
+
+.icon-20 {
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+}
+
+.icon-40 {
+    width: 40px;
+    height: 40px;
+    display: inline-block;
+}
+
+.icon-90 {
+    width: 90px;
+    height: 90px;
+    display: inline-block;
+}