Merge branch 'develop' into async

superdesk · Jan 22, 2025 · 7b1887f · 7b1887f
2 parents 941ff64 + 6de440e
commit 7b1887f
Show file tree

Hide file tree

Showing 20 changed files with 819 additions and 575 deletions.
diff --git a/assets/index.ts b/assets/index.ts
@@ -7,9 +7,6 @@ import {gettext, isTouchDevice} from 'utils';
 import {registerCoverageFieldComponent} from './agenda/components/preview';
 import {Button} from './ui/components/Button';
 
-if (isTouchDevice()) {
-    document.documentElement.classList.add('no-touch');
-}
 
 interface IExtensions {
     prepareWirePreview?(content: HTMLElement, item: IArticle): HTMLElement;
@@ -49,3 +46,37 @@ export const exposed: IExposedForExtensions = {
 };
 
 import 'app';
+
+// navigation scripts
+if (isTouchDevice()) {
+    document.documentElement.classList.add('no-touch');
+}
+
+const navigation = document.getElementById('nav');
+const pinButton = document.getElementById('pin-btn');
+
+if (pinButton != null) {
+    pinButton.addEventListener('click', () => {
+        handleNavToggle();
+    });
+}
+
+if (sessionStorage.getItem('navigation-pinned')) {
+    handleNavToggle();
+}
+
+function handleNavToggle() {
+    if (navigation == null || pinButton == null) {
+        return null;
+    }
+
+    if (navigation.classList.contains('nav-block--pinned')) {
+        sessionStorage.removeItem('navigation-pinned');
+        navigation.classList.remove('nav-block--pinned');
+        pinButton.setAttribute('title', gettext('Expand'));
+    } else {
+        sessionStorage.setItem('navigation-pinned', 'true');
+        navigation.classList.add('nav-block--pinned');
+        pinButton.setAttribute('title', gettext('Collapse'));
+    }
+}
diff --git a/assets/search/components/SearchResultsBar/SearchResultsFiltersRow.tsx b/assets/search/components/SearchResultsBar/SearchResultsFiltersRow.tsx
@@ -9,6 +9,7 @@ import {setItemTypeFilter, toggleDropdownFilter} from 'agenda/actions';
 import {searchFilterSelector} from 'search/selectors';
 import {connect} from 'react-redux';
 import {agendaCoverageStatusFilter, getActiveFilterLabel} from 'agenda/components/AgendaCoverageExistsFilter';
+import {getCoverageDisplayName} from 'agenda/utils';
 
 const IS_AGENDA = location.pathname.includes('/agenda');
 
@@ -26,6 +27,7 @@ type IActiveFilter = {
     calendar?: any;
     location?: any;
     region?: any;
+    coverage?: any;
     coverage_type?: any;
     coverage_status?: any;
 };
@@ -108,9 +110,15 @@ function SearchResultsFiltersRow(props: IPropsAgendaExtended) {
                             },
                         ];
                     } else if (Array.isArray(activeFilter[filter])) {
+                        let getLabel = (val: string) => val;
+
+                        if (filter === 'coverage') {
+                            getLabel = getCoverageDisplayName;
+                        }
+
                         return activeFilter[filter].map((val: string) => ({
                             key: filter + val,
-                            label: val,
+                            label: getLabel(val),
                             onRemove: () => {
                                 removeDropdownFilter(filter, val);
                             },

diff --git a/assets/styles/app.scss b/assets/styles/app.scss
@@ -3,6 +3,7 @@
 @import './color-functions.scss';
 @import './custom.scss'; // Bootstrap customized
 @import './index.scss';
+@import './sidenav.scss';
 @import './article-list.scss';
 @import './icon-font.scss';
 @import './icon-font-small.scss';

diff --git a/assets/styles/breakpoints.scss b/assets/styles/breakpoints.scss
@@ -61,6 +61,12 @@
     }
 }
 
+@mixin large_phone {
+    @media only screen and (max-width: 768px) {
+        @content;
+    }
+}
+
 @mixin tablet {
     @media only screen and (orientation: portrait) and (min-width: 576px) and (max-width: 1439px), (orientation: landscape) and (min-width: 992px) and (max-width: 1439px) {
         @content;

diff --git a/assets/styles/custom-display.scss b/assets/styles/custom-display.scss
@@ -29,6 +29,10 @@
     .d-phone-none {display: none;}
     .d-phone-block {display: block;}
 }
+@include large_phone {
+    .d-phone-none {display: none;}
+    .d-phone-block {display: block;}
+}
 
 @include tablet {
     .d-tablet-none {display: none;}

diff --git a/assets/styles/custom-variables.scss b/assets/styles/custom-variables.scss
@@ -405,25 +405,37 @@ $container-max-widths: (
     --sidenav-color-bg:                     var(--color-primary);
     --sidenav-color-item-bg:                transparent;
     --sidenav-color-item-fg:                hsla(0, 0%, 100%, 1);
+    --sidenav-color-item-bg--hover:         hsla(0, 0%, 0%, 0.16);
     --sidenav-color-item-bg--active:        hsla(0, 0%, 100%, 1);
     --sidenav-color-item-fg--active:        var(--color-primary);
     --sidenav-color-badge-bg:               hsla(0, 0%, 16%, 1);
     --sidenav-color-badge-bg--active:       hsla(0, 0%, 16%, 1);
     --sidenav-color-badge-fg:               hsla(0, 0%, 98%, 1);
     --sidenav-color-badge-fg--active:       hsla(0, 0%, 98%, 1);
     --sidenav-color-badge-outline--active:  var(--sidenav-color-item-bg--active);
+    --sidenav-item-size:                    var(--space--5);
+    --sidenav-item-font-size:               0.875rem;
     --sidenav-item-badge-size:              1.25rem;
     --sidenav-item-badge-font-size:         0.6875rem;
-    --sidenav-item-helper-icon-size:        1.25rem;
+    --sidenav-item-helper-icon-size:        1.125rem;
     --sidenav-item-helper-icon-fg:          var(--sidenav-color-bg);
     --sidenav-item-border-radius:           var(--border-radius--s);
     --separator-dot-size:                   3px;
     --separator-dot-color-bg:               var(--sidenav-color-item-fg);
     // Title and size options
-    --sidenav-item-title-display:           block; // set to none to hide the title
-    --sidenav-size-width:                   80px; // width of the sidenav on desktop
-    --sidenav-item-gap:                     8px; // left and right spacing between item and the bar on desktop
-    --sidenav-item-width:                   calc(var(--sidenav-size-width) - var(--sidenav-item-gap)); // width of the sidenav item on desktop
+    //--sidenav-item-title-display:           block; // set to none to hide the title
+    // --sidenav-size-width:                   56px; // width of the sidenav on desktop
+    // --sidenav-item-gap:                     8px; // left and right spacing between item and the bar on desktop
+    // --sidenav-item-width:                   calc(var(--sidenav-size-width) - var(--sidenav-item-gap)); // width of the sidenav item on desktop
+    --sidenav-item-radius:                  var(--border-radius--s);
+    --sidenav-size:                         3.5rem;
+    --sidenav-size-overlay:                 14rem;
+    --sidenav-size-pinned:                  14rem;
+    --sidenav-shadow-overlay:               4px 0 8px hsla(0, 0%, 0%, 0.24);
+    --sidenav-pin-button-color-bg-default:  hsla(0, 0%, 16%, 0.2);
+    --sidenav-pin-button-color-bg-hover:    hsla(0, 0%, 100%, 0.8);
+    --sidenav-pin-button-color-fg-default:  hsla(0, 0%, 100%, 1);
+    --sidenav-pin-button-color-fg-hover:    var(--color-primary);
 
     // COMPONENT: PROFILE MODAL
     --profile-header-height: 56px;