@rio-cloud/rio-uikit 0.16.2-beta.9 → 0.16.3-beta.1

package/lib/es/index.js

@@ -72,6 +72,7 @@ var _exportNames = {
   NotBookedState: true,
   CustomState: true,
   TimePicker: true,
+  ResponsiveColumnStripe: true,
   SortArrowUp: true,
   SortArrowDown: true,
   SortArrows: true,
@@ -95,6 +96,8 @@ var _exportNames = {
   useClipboard: true,
   useElementSize: true,
   useScrollPosition: true,
+  useDarkMode: true,
+  useMutationObserver: true,
   hasTouch: true,
   inIframe: true,
   isDesktop: true,
@@ -543,6 +546,12 @@ Object.defineProperty(exports, "Resizer", {
     return _Resizer2["default"];
   }
 });
+Object.defineProperty(exports, "ResponsiveColumnStripe", {
+  enumerable: true,
+  get: function get() {
+    return _ResponsiveColumnStripe2["default"];
+  }
+});
 Object.defineProperty(exports, "ResponsiveVideo", {
   enumerable: true,
   get: function get() {
@@ -928,6 +937,12 @@ Object.defineProperty(exports, "useClipboard", {
     return _useClipboard["default"];
   }
 });
+Object.defineProperty(exports, "useDarkMode", {
+  enumerable: true,
+  get: function get() {
+    return _useDarkMode["default"];
+  }
+});
 Object.defineProperty(exports, "useEffectOnce", {
   enumerable: true,
   get: function get() {
@@ -964,6 +979,12 @@ Object.defineProperty(exports, "useKey", {
     return _useKey["default"];
   }
 });
+Object.defineProperty(exports, "useMutationObserver", {
+  enumerable: true,
+  get: function get() {
+    return _useMutationObserver["default"];
+  }
+});
 Object.defineProperty(exports, "useOnMount", {
   enumerable: true,
   get: function get() {
@@ -1067,6 +1088,7 @@ var _ForbiddenState2 = _interopRequireDefault(require("./components/states/Forbi
 var _NotBookedState2 = _interopRequireDefault(require("./components/states/NotBookedState"));
 var _CustomState2 = _interopRequireDefault(require("./components/states/CustomState"));
 var _TimePicker2 = _interopRequireDefault(require("./components/timepicker/TimePicker"));
+var _ResponsiveColumnStripe2 = _interopRequireDefault(require("./components/responsiveColumnStripe/ResponsiveColumnStripe"));
 var _SortArrows2 = require("./components/table/SortArrows");
 var _SortUtils = require("./utils/SortUtils");
 var _routeUtils = require("./utils/routeUtils");
@@ -1083,6 +1105,8 @@ var _useClickOutside = _interopRequireDefault(require("./hooks/useClickOutside")
 var _useClipboard = _interopRequireDefault(require("./hooks/useClipboard"));
 var _useElementSize = _interopRequireDefault(require("./hooks/useElementSize"));
 var _useScrollPosition = _interopRequireDefault(require("./hooks/useScrollPosition"));
+var _useDarkMode = _interopRequireDefault(require("./hooks/useDarkMode"));
+var _useMutationObserver = _interopRequireDefault(require("./hooks/useMutationObserver"));
 var _deviceUtils = require("./utils/deviceUtils");
 var _colorScheme = require("./utils/colorScheme");
 var _GroupSelectionUtil = require("./utils/GroupSelectionUtil");

package/lib/es/styles/components/ApplicationHeader.less

@@ -456,6 +456,8 @@
   }
 
   .CollapsedDropdown {
+    display: block;
+    
     > .dropdown-menu {
       left: auto;
       right: 0;

package/lib/es/styles/components/Dialog.less

@@ -1,6 +1,7 @@
 @modal-outer-margin: 30px;
 @modal-inner-padding: 20px;
-@modal-title-padding: 15px;
+@modal-title-y-padding: 15px;
+@modal-title-x-padding: 20px;
 @modal-content-bg: var(--color-white);
 @modal-content-border-color: var(--gray-light);
 @modal-backdrop-bg: var(--always-color-black);
@@ -40,6 +41,7 @@ body {
   top: 0;
   width: 100% !important;
   z-index: @zindex-modal;
+  backdrop-filter: blur(1px);
 
   // When fading in the modal, animate it to slide down
   &.fade .modal-dialog {
@@ -91,11 +93,6 @@ body {
             }
           }
         }
-
-        // because of overflow :after styling
-        &:after {
-          display: none !important;
-        }
       }
 
       .modal-footer:before {
@@ -138,7 +135,6 @@ body {
         border-bottom: 1px solid @modal-header-border-color;
         display: flex;
         justify-content: space-between;
-        padding: @modal-title-padding;
         padding: 0;
         position: relative;
         z-index: 1;
@@ -150,15 +146,16 @@ body {
           float: left;
           font-weight: @font-light;
           justify-content: center;
-          padding: 15px;
+          padding: @modal-title-y-padding @modal-title-x-padding;
           width: calc(~'100% - 60px');
           word-break: break-word;
 
           .modal-header-title {
             display: flex;
-            order: 1;
+            flex-wrap: wrap;
             font-size: @font-size-xl - 2;
             line-height: @font-size-xl - 2;
+            order: 1;
           }
 
           .modal-header-subtitle {
@@ -254,16 +251,12 @@ body {
         width: @modal-xl;
       }
 
-      &.modal-full {
-        width: calc(~'100vw - @{modal-outer-margin} * 2');
-      }
-
-      &.modal-fullscreen {
+      &.modal-fullscreen, &.modal-full, &.modal-full-width {
         width: calc(~'100vw - @{modal-outer-margin} * 2');
       }
     }
 
-    &.modal-fullscreen {
+    &.modal-fullscreen, &.modal-full-height {
       .modal-content {
         height: calc(~'100vh - (@{modal-outer-margin} * 2)'); // --vh fallback
         height: calc(~'var(--vh, 1vh) * 100 - (@{modal-outer-margin} * 2)');
@@ -278,6 +271,7 @@ body {
         .modal-body {
           flex: 1 1 0; // instead "auto" we 0 for safari
           position: relative;
+          overflow-y: auto;
 
           .iframe-wrapper {
             overflow: hidden;
@@ -306,10 +300,10 @@ body {
         .modal-body {
           overflow-y: auto;
 
-          &:after {
-            content: '';
-            display: block;
-            height: 30px;
+          &.no-overflow-gradient {
+            + .modal-footer:before {
+              display: none;
+            }
           }
         }
 
@@ -420,7 +414,8 @@ body {
 
     .modal-lg &,
     .modal-xl &,
-    .modal-full & {
+    .modal-full &,
+    .modal-full-width & {
       @media (min-width: @splitWrapperBreakpoint) {
         width: 20%;
       }
@@ -453,7 +448,8 @@ body {
 
     .modal-lg &,
     .modal-xl &,
-    .modal-full & {
+    .modal-full &,
+    .modal-full-width & {
       @media (min-width: @splitWrapperBreakpoint) {
         max-width: 80%;
       }
@@ -461,7 +457,7 @@ body {
   }
 }
 
-/* Animation classes for dialogs triggered by "react-transition-group" component */
+// Animation classes for dialogs triggered by "react-transition-group" component
 .modal-enter {
   .modal-content {
     display: block;
@@ -498,4 +494,26 @@ body {
   .modal-backdrop {
     opacity: 0;
   }
-}
+}
+
+// modal-body atomic vh classes for iframes with unknown height
+// .modal-body {
+//   &.height-100vh {
+//     height: calc(~"var(--vh, 1vh) * 100 - 190px") !important;
+
+//     @media (max-width: @modal-sm) {
+//       height: calc(~"var(--vh, 1vh) * 100 - 170px") !important;
+//     }
+//   }
+
+//   // no modal-footer version
+//   &:last-child {
+//     &.height-100vh {
+//       height: calc(~"var(--vh, 1vh) * 100 - 120px") !important;
+
+//       @media (max-width: @modal-sm) {
+//         height: calc(~"var(--vh, 1vh) * 100 - 90px") !important;
+//       }
+//     }
+//   }
+// }

package/lib/es/styles/components/MapMarker.less

@@ -160,7 +160,7 @@
     }
 
     .rio-map-icon {
-      margin-right: @bubbleSize * 0.4;
+      margin: 0 @bubbleSize * 0.3;
 
       &.rioglyph {
         top: 0; // unnecessary rioglyph hack
@@ -174,6 +174,14 @@
           width: 100%;
         }
       }
+
+      + .rio-map-icon {
+        margin: 0 @bubbleSize * 0.3 0 -(@bubbleSize) * 0.3;
+      }
+
+      + .rio-map-name {
+        padding: 0 @bubbleSize * 0.4 0 0;
+      }
     }
 
     &.moving {
@@ -192,18 +200,6 @@
       transition: height @animationDuration ~',' bottom @animationDuration;
     }
 
-    .rio-map-icon {
-      margin: 0 @bubbleSize * 0.3;
-
-      + .rio-map-icon {
-        margin: 0 @bubbleSize * 0.3 0 -(@bubbleSize) * 0.3;
-      }
-
-      + .rio-map-name {
-        padding: 0 @bubbleSize * 0.4 0 0;
-      }
-    }
-
     .rio-map-direction {
       border-radius: @border-radius-round;
       background-color: .hslb(@color-map-marker-asset-hsl, '+', '5%')[@result];
@@ -223,10 +219,10 @@
         margin-right: @bubbleSize * 0.2;
       }
     }
+
   }
 
   .rio-map-position-arrow {
-    background-color: var(--color-map-marker-text);
     bottom: (@iconSize * 0.5) - (@positionTriangleSize * 0.45);
     color: transparent;
     height: @positionTriangleSize;
@@ -296,6 +292,220 @@
       display: none !important;
     }
   }
+
+  // coloring
+  [class*="map-marker-type"] {
+    color: var(--color-map-marker-text);
+
+    .rio-map-icon {
+      &:before {
+        color: var(--color-map-marker-text);
+      }
+    }
+
+    &[class*="asset"] {
+      background-color: var(--color-map-marker-asset);
+      border: 1px solid var(--color-map-marker-asset);
+
+      &.active {
+        color: var(--color-map-marker-asset);
+        background-color: var(--color-map-marker-active);
+
+        .rio-map-icon {
+          &:before {
+            color: var(--color-map-marker-asset);
+          }
+        }
+      }
+
+      ~ .rio-map-position-arrow {
+        background-color: var(--color-map-marker-asset);
+      }
+
+      ~ .rio-map-position {
+        color: var(--color-map-marker-asset);
+      }
+    }
+
+    &[class*="poi"] {
+      background-color: var(--color-map-marker-poi);
+      border: 1px solid var(--color-map-marker-poi);
+
+      &.active {
+        color: var(--color-map-marker-poi);
+        background-color: var(--color-map-marker-active);
+
+        .rio-map-icon {
+          &:before {
+            color: var(--color-map-marker-poi);
+          }
+        }
+      }
+
+      ~ .rio-map-position-arrow {
+        background-color: var(--color-map-marker-poi);
+      }
+
+      ~ .rio-map-position {
+        color: var(--color-map-marker-poi);
+      }
+    }
+
+    &[class*="geofence"] {
+      background-color: var(--color-map-marker-geofence);
+      border: 1px solid var(--color-map-marker-geofence);
+
+      &.active {
+        color: var(--color-map-marker-geofence);
+        background-color: var(--color-map-marker-active);
+
+        .rio-map-icon {
+          &:before {
+            color: var(--color-map-marker-geofence);
+          }
+        }
+      }
+
+      ~ .rio-map-position-arrow {
+        background-color: var(--color-map-marker-geofence);
+      }
+
+      ~ .rio-map-position {
+        color: var(--color-map-marker-geofence);
+      }
+    }
+
+    &[class*="route"] {
+      background-color: var(--color-map-marker-route);
+      border: 1px solid var(--color-map-marker-route);
+
+      &.active {
+        color: var(--color-map-marker-route);
+        background-color: var(--color-map-marker-active);
+
+        .rio-map-icon {
+          &:before {
+            color: var(--color-map-marker-route);
+          }
+        }
+      }
+
+      ~ .rio-map-position-arrow {
+        background-color: var(--color-map-marker-route);
+      }
+
+      ~ .rio-map-position {
+        color: var(--color-map-marker-route);
+      }
+    }
+
+    // night colors
+    .map-type-night & {
+      color: var(--color-map-marker-text-night);
+
+      .rio-map-icon {
+        &:before {
+          color: var(--color-map-marker-text-night);
+        }
+      }
+
+      &[class*="asset"] {
+        background-color: var(--color-map-marker-asset-night);
+        border: 1px solid var(--color-map-marker-asset-night);
+
+        &.active {
+          color: var(--color-map-marker-asset-night);
+          background-color: var(--color-map-marker-active-night);
+
+          .rio-map-icon {
+            &:before {
+              color: var(--color-map-marker-asset-night);
+            }
+          }
+        }
+
+        ~ .rio-map-position-arrow {
+          background-color: var(--color-map-marker-asset-night);
+        }
+
+        ~ .rio-map-position {
+          color: var(--color-map-marker-asset-night);
+        }
+      }
+
+      &[class*="poi"] {
+        background-color: var(--color-map-marker-poi-night);
+        border: 1px solid var(--color-map-marker-poi-night);
+
+        &.active {
+          color: var(--color-map-marker-poi-night);
+          background-color: var(--color-map-marker-active-night);
+
+          .rio-map-icon {
+            &:before {
+              color: var(--color-map-marker-poi-night);
+            }
+          }
+        }
+
+        ~ .rio-map-position-arrow {
+          background-color: var(--color-map-marker-poi-night);
+        }
+
+        ~ .rio-map-position {
+          color: var(--color-map-marker-poi-night);
+        }
+      }
+
+      &[class*="geofence"] {
+        background-color: var(--color-map-marker-geofence-night);
+        border: 1px solid var(--color-map-marker-geofence-night);
+
+        &.active {
+          color: var(--color-map-marker-geofence-night);
+          background-color: var(--color-map-marker-active-night);
+
+          .rio-map-icon {
+            &:before {
+              color: var(--color-map-marker-geofence-night);
+            }
+          }
+        }
+
+        ~ .rio-map-position-arrow {
+          background-color: var(--color-map-marker-geofence-night);
+        }
+
+        ~ .rio-map-position {
+          color: var(--color-map-marker-geofence-night);
+        }
+      }
+
+      &[class*="route"] {
+        background-color: var(--color-map-marker-route-night);
+        border: 1px solid var(--color-map-marker-route-night);
+
+        &.active {
+          color: var(--color-map-marker-route-night);
+          background-color: var(--color-map-marker-active-night);
+
+          .rio-map-icon {
+            &:before {
+              color: var(--color-map-marker-route-night);
+            }
+          }
+        }
+
+        ~ .rio-map-position-arrow {
+          background-color: var(--color-map-marker-route-night);
+        }
+
+        ~ .rio-map-position {
+          color: var(--color-map-marker-route-night);
+        }
+      }
+    }
+  }
 }
 
 #rio-map-context-menu {

package/lib/es/styles/components/MapSettings.less

@@ -10,6 +10,10 @@
     background: var(--color-white);
     cursor: pointer;
     padding: 3px;
+
+    .map-type-night & {
+      background: #444a4c;
+    }
   }
 
   .MapSettingsTileSpacer {
@@ -28,7 +32,7 @@
 
   // moved MapSettingsWrapper left on large noTouch devices
   @media (min-width: @screen-ls) {
-    +.MapSettingsWrapper {
+    + .MapSettingsWrapper {
       right: 47px;
     }
   }
@@ -60,6 +64,10 @@
       background: var(--color-white);
       cursor: pointer;
       padding: 5px;
+
+      .map-type-night & {
+        background: #444a4c;
+      }
     }
 
     .MapSettingsPanel {
@@ -70,9 +78,17 @@
       margin-bottom: 10px;
       padding: 5px;
 
+      .map-type-night & {
+        background: #444a4c;
+      }
+
       .MapSettingsItem {
         background: var(--color-white);
         cursor: pointer;
+
+        .map-type-night & {
+          background: #444a4c;
+        }
       }
     }
   }
@@ -110,31 +126,31 @@
   }
 }
 
-// OLD
-.MapSettings {
-  align-items: flex-end;
-  bottom: 15px;
-  display: flex;
-  flex-flow: column-reverse;
-  padding: 0;
-  position: absolute;
-  right: 47px;
-  z-index: 1;
-
-  @media (max-width: @screen-ls) {
-    right: 15px;
-  }
-
-  .MapSettingsPanel {
-    &:extend(.shadow-smooth);
-    background: var(--color-white);
-    display: flex;
-    margin-bottom: 10px;
-
-    .MapSettingsTile,
-    .MapSettingsButton {
-      cursor: pointer;
-      padding: 5px;
-    }
-  }
-}
+// // OLD
+// .MapSettings {
+//   align-items: flex-end;
+//   bottom: 15px;
+//   display: flex;
+//   flex-flow: column-reverse;
+//   padding: 0;
+//   position: absolute;
+//   right: 47px;
+//   z-index: 1;
+
+//   @media (max-width: @screen-ls) {
+//     right: 15px;
+//   }
+
+//   .MapSettingsPanel {
+//     &:extend(.shadow-smooth);
+//     background: var(--color-white);
+//     display: flex;
+//     margin-bottom: 10px;
+
+//     .MapSettingsTile,
+//     .MapSettingsButton {
+//       cursor: pointer;
+//       padding: 5px;
+//     }
+//   }
+// }

package/lib/es/styles/components/Notification.less

@@ -49,7 +49,7 @@
 
       &:before {
         position: absolute;
-        top: 50%;
+        top: 24px;
         left: 15px;
         margin-top: -14px;
         display: block;

package/lib/es/styles/design/alerts.less

@@ -2,8 +2,8 @@
   border-color: transparent;
   border-radius: @border-radius-default;
   border-style: solid;
-  border-width: 2px;
-  padding: 12px;
+  border-width: 1px;
+  padding: 15px;
   position: relative;
 
   .alert-link {
@@ -18,7 +18,11 @@
     position: absolute;
     right: 3px;
     top: 6px;
-    transform: scale(0.75);
+    color: var(--gray-darker) !important;
+
+    * {
+      transform: scale(0.6);
+    }
   }
 
   > p,
@@ -37,18 +41,12 @@
 
     &.alert- {
       &@{key} {
-
         background-color: @background;
         border-color: @value;
-        color: @value;
 
         .alert-link {
           color: @value;
         }
-
-        > .close .rioglyph {
-          color: @value;
-        }
       }
     }
   })

package/lib/es/styles/design/aspect-ratio.less

@@ -1,6 +1,7 @@
 .aspect-ratio-resizer {
     display: grid;
     position: relative;
+    width: 100%;
 
     > * {
         grid-area: ~"1 / 1 / 2 / 2";

package/lib/es/styles/design/blur.less

@@ -0,0 +1,7 @@
+.backdrop {
+    &-blur-1 { backdrop-filter: blur(1px) !important; }
+    &-blur-2 { backdrop-filter: blur(2px) !important; }
+    &-blur-3 { backdrop-filter: blur(3px) !important; }
+    &-blur-4 { backdrop-filter: blur(4px) !important; }
+    &-blur-5 { backdrop-filter: blur(5px) !important; }
+}