@visns-studio/visns-components 6.4.3 → 6.5.0

package/src/components/styles/Notification.module.scss

@@ -448,3 +448,86 @@
         width: 300px;
     }
 }
+
+/* ----------------------------------------------------------------------------
+   Mounted in the sidebar rail
+   ----------------------------------------------------------------------------
+   A project can opt its navigation into `actionsPlacement: 'sidebar'`, which
+   pins the account actions to the bottom of the rail instead of the content
+   header. The rail's block advertises itself with `data-nav-actions="sidebar"`
+   (see Navigation.jsx / Navigation.module.scss `.rail-actions`), which is all
+   this file needs to know.
+
+   Two things change. The trigger is a full-width row rather than a 36px chip,
+   so it carries a visible label — published by the row as `--nav-action-label`
+   because the component draws its own trigger and takes no label of its own.
+   And the panel anchors to the row's right edge: `top: 100%; right: 0` would
+   drop it below the foot of the viewport and off the left of the screen.
+
+   The row's own padding, colour and radius come from `.rail-actions`; only
+   what this file would otherwise force back is restated here.
+   ------------------------------------------------------------------------- */
+[data-nav-actions='sidebar'] {
+    .notificationTrigger {
+        justify-content: flex-start;
+        /* The chip was a fixed 40px square; a row is as tall as the padding
+           the rail gives it, which is what the rows beside it measure. */
+        height: auto;
+
+        // The label. `content` reads the row's custom property; the fallback
+        // covers a settings entry that never carried a label — in the header
+        // the bell was an icon with a tooltip, so most don't.
+        &::after {
+            content: var(--nav-action-label, 'Notifications');
+            flex: 1 1 auto;
+            min-width: 0;
+            text-align: left;
+        }
+
+        // The chip's lift read as a stray button in a list of rows. The
+        // focus ring is left alone — it is the only keyboard affordance
+        // these rows have.
+        &:hover,
+        &:focus,
+        &:active {
+            transform: none;
+        }
+
+        &:hover {
+            background-color: rgba(var(--tertiary-color-rgb), 0.05);
+            color: var(--secondary-color);
+        }
+    }
+
+    // Was pinned to the corner of a round chip. On a wide row it belongs at
+    // the end of the line, where the eye lands after the label.
+    .badge {
+        top: 50%;
+        right: 14px;
+        transform: translateY(-50%);
+    }
+
+    // Beside the rail, bottom-aligned with the row that opened it.
+    .dropdownWrapper {
+        top: auto;
+        right: auto;
+        bottom: 0;
+        left: calc(100% + 10px);
+        margin-top: 0;
+    }
+
+    @media (max-width: 1024px) {
+        // Inside the drawer there is nothing to the right, so the panel
+        // opens upward from the row.
+        .dropdownWrapper {
+            left: 0;
+            bottom: calc(100% + 8px);
+        }
+
+        // Keeps the panel inside a phone's viewport when the list is long —
+        // it grows from the foot of the drawer towards the header.
+        .notiscrollwrap {
+            max-height: 40vh;
+        }
+    }
+}

package/src/components/styles/SwitchAccount.module.scss

@@ -24,6 +24,28 @@
     z-index: 999;
 }
 
+/* Mounted in the sidebar rail — `navConfig.actionsPlacement: 'sidebar'`.
+   The list is sized and shunted 470px left to hang off a chip at the top
+   right of the header; from a rail at the left edge that puts it off-screen.
+   The rail's action block advertises itself with `data-nav-actions`, which is
+   all this file needs to know. See Navigation.module.scss `.rail-actions`. */
+[data-nav-actions='sidebar'] .notibox {
+    width: min(550px, calc(100vw - var(--sidebar-width) - 24px));
+    max-height: 60vh;
+    transform: none;
+    left: calc(100% + 10px);
+    bottom: 0;
+}
+
+@media (max-width: 1024px) {
+    /* Inside the drawer there is nothing to the right of the row. */
+    [data-nav-actions='sidebar'] .notibox {
+        width: min(550px, calc(100vw - 24px));
+        left: 0;
+        bottom: calc(100% + 8px);
+    }
+}
+
 .notibox-item {
     width: 100%;
     display: block;

package/src/components/styles/global-datagrid.css

@@ -510,3 +510,144 @@ body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap > div {
 .InovuaReactDataGrid__group-toolbar {
     display: none !important;
 }
+
+/* =========================================================================
+   Native date column filters — see columns/NativeDateFilterEditor.jsx
+
+   The editor replaces Inovua's popup-calendar DateFilter with the platform's
+   own picker. Everything here exists to make an `<input type="date">` sit in
+   the filter row at exactly the size and weight of its text / dropdown
+   neighbours, whose look comes from the toolkit's own
+   `.inovua-react-toolkit-text-input--theme-default-light` rule (32px tall,
+   1px #cdcecd border, 14px #555e68 text).
+
+   Height itself is not set here: the wrapper carries the grid's own
+   `.InovuaReactDataGrid__column-header__filter` class, which the datagrid
+   theme already pins to min/max-height 32px alongside every other filter.
+
+   Note: `global.css` excludes `.visns-native-date-filter__input` from the
+   app-wide `input[type]` rule, whose 1rem padding would otherwise burst the
+   32px filter row.
+   ========================================================================= */
+.visns-native-date-filter {
+    position: relative;
+    display: flex;
+    /* stretch, not center: the input has to fill the 32px the theme pins the
+       filter to, or the clickable area is smaller than the box it draws. */
+    align-items: stretch;
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    overflow: hidden;
+    border: 1px solid #cdcecd;
+    border-radius: 1px;
+    background: #fff;
+    color: #555e68;
+    font-size: 14px;
+    transition: border 0.2s, box-shadow 0.2s;
+}
+
+.visns-native-date-filter:hover {
+    border-color: #7986cb;
+}
+
+.visns-native-date-filter:focus-within {
+    border-color: #7986cb;
+    box-shadow: 0 0 0 2px rgba(121, 134, 203, 0.4);
+}
+
+.visns-native-date-filter--disabled {
+    opacity: 0.5;
+}
+
+.visns-native-date-filter--disabled:hover {
+    border-color: #cdcecd;
+}
+
+.visns-native-date-filter__input {
+    flex: 1 1 auto;
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    height: auto;
+    margin: 0;
+    padding: 0 2px 0 8px;
+    border: none;
+    outline: none;
+    background: none;
+    color: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: 1;
+    -webkit-appearance: none;
+    appearance: none;
+}
+
+/* An empty native date input renders its locale mask (dd/mm/yyyy) at full
+   contrast, which reads as a value; mute it to the same placeholder weight
+   the toolkit's text filters use. (`:invalid` cannot express this — an empty
+   optional date input is valid — so the editor sets the modifier itself.) */
+.visns-native-date-filter--empty .visns-native-date-filter__input {
+    color: rgba(85, 94, 104, 0.7);
+}
+
+/* The calendar glyph IS how the picker opens on desktop — keep it, just
+   shrink it into the 32px row. */
+.visns-native-date-filter__input::-webkit-calendar-picker-indicator {
+    margin: 0;
+    padding: 0 2px;
+    opacity: 0.55;
+    cursor: pointer;
+}
+
+.visns-native-date-filter__input::-webkit-calendar-picker-indicator:hover {
+    opacity: 1;
+}
+
+/* Browser-supplied clear / spin affordances are replaced by our own button,
+   which is consistent across engines. */
+.visns-native-date-filter__input::-webkit-clear-button,
+.visns-native-date-filter__input::-webkit-inner-spin-button {
+    display: none;
+    -webkit-appearance: none;
+}
+
+.visns-native-date-filter__input::-moz-calendar-picker-indicator {
+    opacity: 0.55;
+    cursor: pointer;
+}
+
+.visns-native-date-filter__clear {
+    flex: none;
+    align-self: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    margin: 0 4px 0 0;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    color: #99a1aa;
+    cursor: pointer;
+    outline: none;
+}
+
+.visns-native-date-filter__clear:hover,
+.visns-native-date-filter__clear:focus {
+    color: #555e68;
+}
+
+/* inrange / notinrange: two of the same input either side of the theme's
+   own separator. */
+.visns-native-date-filter__range {
+    flex: 1;
+    min-width: 0;
+    align-items: center;
+}
+
+.visns-native-date-filter__range .visns-native-date-filter {
+    flex: 1 1 0;
+}

package/src/components/styles/global.css

@@ -245,7 +245,9 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
         .inovua-react-toolkit-text-input__input
     ):not(.inovua-react-toolkit-numeric-input__input):not(
         .variable-inserter-search-input
-    ):not(.react-datepicker__month-select):not(.react-datepicker__year-select) {
+    ):not(.react-datepicker__month-select):not(
+        .react-datepicker__year-select
+    ):not(.visns-native-date-filter__input) {
     background: white;
     border-radius: var(--br);
     border: 1px solid rgba(var(--paragraph-color-rgb), 0.15);

package/src/index.js

@@ -38,6 +38,7 @@ import AudioPlayer from './components/controls/AudioPlayer';
 import GalleryModal from './components/modals/GalleryModal';
 import ImageModal from './components/ImageModal';
 import DatePickerPortal from './components/utils/DatePickerPortal';
+import NativeDateFilterEditor from './components/columns/NativeDateFilterEditor';
 import ImportWizardModal from './components/ImportWizardModal';
 export * from './components/columns/ColumnRenderers.jsx';
 
@@ -147,6 +148,7 @@ export {
     MergeEntity,
     MultiSelect,
     MultiCheckbox,
+    NativeDateFilterEditor,
     Navigation,
     Notification,
     NotificationList,