superdesk-ui-framework 2.4.14 → 2.4.15

package/app/index.js

@@ -36,6 +36,7 @@ export {
     NavButton,
     Tab,
     TabList,
+    toasted,
     Menu,
     SubNav,
     SlidingToolbar,

package/app/scripts/modals.js

@@ -4,16 +4,17 @@ sdModal.$inject = ['$document', '$rootScope'];
 function sdModal($document, $rootScope) {
     return {
         template:
-`<div class="modal" data-backdrop="static" data-test-id="{{testId}}">
-    <div class="modal__dialog" ng-if="model">
-        <div class="modal__content" ng-transclude></div>
-    </div>
-</div>
-<div class="modal__backdrop fade in" ng-if="model"></div>`,
+            `<div class="modal" data-theme="{{theme}}" data-backdrop="static" data-test-id="{{testId}}">
+                <div class="modal__dialog" ng-if="model">
+                    <div class="modal__content" ng-transclude></div>
+                </div>
+            </div>
+            <div class="modal__backdrop fade in" ng-if="model"></div>`,
         transclude: true,
         scope: {
             model: '=',
             testId: '=?',
+            theme: '@',
         },
         link: function (scope, element) {
             scope.testId = scope.testId || '';
@@ -30,25 +31,38 @@ function sdModal($document, $rootScope) {
                         content[0].style = 'z-index: ' + (1050 + $rootScope.modals);
                         content[1].style = 'z-index: ' + (1049 + $rootScope.modals);
                         _initialized = true;
+                        console.log(content);
                     }
                     content.show().addClass('in');
                     $document.find('body').addClass('modal-open');
                     $rootScope.modals++;
                 } else if (initialized()) {
                     content.hide().removeClass('in');
-                    $document.find('body').removeClass('modal-open');
+                    
+                    // If multiple modals are opened,
+                    // remove modal class only when last one is closed
+                    if ($rootScope.modals === 1) {
+                        $document.find('body').removeClass('modal-open');
+                    }
+
                     closeModal();
                 }
             });
 
             var closeModal = function () {
                 scope.model = false;
-                $rootScope.modals--;
+
+                if ($rootScope.modals > 0) {
+                    $rootScope.modals--;
+                }
+                
                 scope.$evalAsync();
             };
 
             $document.bind('keydown', (evt) => {
-                if (evt.which === 27) {
+                evt.preventDefault();
+
+                if (evt.which === 27 && $rootScope.modals > 0) {
                     closeModal();
                 }
             });

package/app/styles/_buttons.scss

@@ -811,6 +811,7 @@ $button-nav-color: currentColor;
 //------------------------------------------------------
 
 .dark-ui,
+[data-theme="dark-ui"],
 [class^="--dark-ui"],
 [class*="--dark-ui"] {
   .btn.btn--ui-dark.btn--hollow.btn--active {
@@ -822,6 +823,22 @@ $button-nav-color: currentColor;
     }
   }
 
+  .btn:not(.btn--success):not(.btn--primary):not(.btn--alert):not(.btn--warning):not(.btn--highlight):not(.btn--sd-green):not(.btn--hollow):not(.btn--text-only) {
+      color: inherit;
+      background-color: hsla(0, 0%, 50%, 0.5);
+      &:hover {
+        background-color: hsla(0, 0%, 40%, 0.5);
+      }
+  }
+  .btn.btn--text-only {
+    &:not(.btn--success):not(.btn--primary):not(.btn--alert):not(.btn--warning):not(.btn--highlight):not(.btn--sd-green):not(.btn--hollow) {
+      color: inherit;
+      &:hover {
+        background-color: hsla(0, 0%, 40%, 0.5);
+      }
+    }
+  }
+
   .btn {
     &.btn--hollow {
       @include button-hollow;

package/app/styles/_modals.scss

@@ -24,19 +24,18 @@ $modal-x-large-width : 1000px;
 $modal-fill-width: 100%;
 $modal-fullscreen-width: 100%;
 
-$modal-border-radius: 4px;
-$modal-line-color: #e4e4e4;
+$modal-border-radius: $border-radius__base--large;
+$modal-line-color: var(--color-line__modal);
+$modal-bg-color: var(--color-bg__modal);
 
 $modal-header-height : $nav-height;
 $modal-footer-height : 48px;
 $modal-subnav-height : $nav-height;
 
 $modal-padding : $sd-base-increment * 2;
+$modal-box-shadow: 0 0 8px 2px hsla(0, 0%, 0%, 0.3);
+
 
-// Box shadow
-@mixin modal-box-shadow {
-    @include box-shadow(0, 0, 8px, 2px, rgba(0, 0, 0, 0.3));
-}
 // Map with all modal sizes
 $modal-sizes: (
   default: $modal-base-width,
@@ -68,12 +67,12 @@ $modal-sizes: (
     margin: 0 auto;
 }
 @mixin modal-content() {
-    background-color: $white;
+    background-color: $modal-bg-color;
     display: flex;
     flex-direction: column;
     margin: 10px 0;
-    @include border-radius($modal-border-radius);
-    @include modal-box-shadow();
+    border-radius: $modal-border-radius;
+    box-shadow: $modal-box-shadow;
 }
 @mixin modal-header() {
     padding: $modal-padding - $sd-base-increment $modal-padding;
@@ -81,7 +80,7 @@ $modal-sizes: (
     min-height: $modal-header-height;
 }
 @mixin modal-body() {
-    background: $sd-background;
+    background: $modal-bg-color;
     overflow-y: auto;
     padding: $modal-padding;
     position: relative;
@@ -240,11 +239,11 @@ $modal-sizes: (
         }
     }
     // modifier, change body to white background 
-    &.modal--white {
-        .modal__body {
-            background: $white !important;
-        }
-    }
+    // &.modal--white {
+    //     .modal__body {
+    //         background: $white !important;
+    //     }
+    // }
     // fix for calling a modal from another modal
     &.modal--double {
         z-index: 1060;
@@ -269,7 +268,6 @@ $modal-sizes: (
         .modal__body-header {
             height: 48px;
             width: 100%;
-            background: $white;
             border-bottom: 1px solid $modal-line-color;
             padding: 0;
             &--add-padding {
@@ -288,7 +286,6 @@ $modal-sizes: (
             width: 100%;
             overflow-y: auto;
             padding: $modal-padding;
-            background: $sd-background;
             min-height: 60px;
         }
         .modal__body-footer {
@@ -391,4 +388,13 @@ $modal-sizes: (
     .modal__header, .modal__body {
         @include sd-padding('3', 'left');
     }
+}
+
+.dark-ui,
+[data-theme="dark-ui"] {
+    .modal__content {
+        .side-panel {
+            --color-bg-00: hsla(0, 0%, 14%, 1);
+        }
+    }
 }

package/app/styles/_tooltips.scss

@@ -310,8 +310,74 @@ $tooltip-dark-UI: #222;
   }
 }
 
+.p-tooltip {
+  position:absolute;
+  z-index: 1000;
+  min-width: 3em;
+  max-width: 21em;
+}
 
+.p-tooltip.p-tooltip-right,
+.p-tooltip.p-tooltip-left {
+  padding: 0 5px;
+}
 
+.p-tooltip.p-tooltip-top,
+.p-tooltip.p-tooltip-bottom {
+    padding: 5px 0;
+}
 
+.p-tooltip .p-tooltip-text {
+  white-space: pre-line;
+  min-width: 3em;
+  max-width: 21em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0.8rem 1.2rem 0.9rem;
+  border-radius: 2px;
+  background: #333;
+  color: #fff;
+  font-weight: 400;
+}
 
+.p-tooltip-arrow {
+    border: 10px solid transparent;
+    z-index: 1001;
+    text-transform: none;
+    font-size: 1.2rem; 
+    line-height: 1;
+    user-select: none;
+    pointer-events: none;
+    position: absolute;
+    width: 5px;
+    height: 5px;
+}
 
+.p-tooltip-top .p-tooltip-arrow {
+    bottom: 0;
+    left: 50%;
+    border-bottom-width: 0;
+    border-top-color: #333;
+}
+
+.p-tooltip-bottom .p-tooltip-arrow {
+    top: 0;
+    left: 50%;
+    border-top-width: 0;
+    border-bottom-color: #333;
+}
+
+.p-tooltip-right .p-tooltip-arrow {
+    top: 50%;
+    left: 0;
+    border-left-width: 0;
+    border-right-color: #333;
+}
+
+.p-tooltip-left .p-tooltip-arrow {
+    top: 50%;
+    right: 0;
+    border-right-width: 0;
+    border-left-color: #333;
+}

package/app/styles/app.scss

@@ -73,6 +73,7 @@
 @import 'form-elements/checkbox';
 @import 'form-elements/radio';
 @import 'form-elements/autocomplete';
+@import 'form-elements/select-grid';
 
 // Menus
 @import 'menus/sd-sidebar-menu';

package/app/styles/components/_sd-toaster.scss

@@ -4,6 +4,8 @@ $sd-toast-max-width: 56rem !default;
 $sd-toast-margin: 2rem !default;
 
 $toast-palette: $sd-basic-palette;
+$sd-toast-position-top: 5.6rem;
+$sd-toast-z-index: 9999;
 
 $toast-sizes: (
     fixed-s: 32rem,
@@ -12,7 +14,6 @@ $toast-sizes: (
     fixed-xl: 56rem,
 );
 
-
 .sd-toast__container {
     display: flex!important;
     flex-direction: column;
@@ -20,21 +21,21 @@ $toast-sizes: (
     position: fixed;
     right: 0;
     left: 0;
-    z-index: 40;
+    z-index: $sd-toast-z-index;
     overflow: hidden;
     padding: 0 20px 20px;
     pointer-events: none;
     &.sd-toast__container--top {
-        top: 0;
+        top: $sd-toast-position-top;
         bottom: auto;
     }
     &.sd-toast__container--top-left {
-        top: 0;
+        top: $sd-toast-position-top;
         bottom: auto;
         align-items: flex-start;
     }
     &.sd-toast__container--top-right {
-        top: 0;
+        top: $sd-toast-position-top;
         bottom: auto;
         align-items: flex-end;
     }

package/app/styles/form-elements/_inputs.scss

@@ -777,6 +777,7 @@
                 color:inherit;
                 font-size: 1.4rem;
                 line-height: 2rem;
+                background-color: var(--color-bg__select-option);
             }
         }
         cursor: pointer;

package/app/styles/form-elements/_select-grid.scss

@@ -0,0 +1,77 @@
+.select-grid__overlay-panel {
+    z-index: 1500 !important;
+    margin-top: 1px;
+}
+
+.select-grid__panel {
+    width: 450px;
+    max-height: 550px;
+    background-color: var(--color-bg-00);
+    display: flex;
+    flex-direction: column;
+}
+
+.select-grid__header {
+    padding: 1rem;
+    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
+}
+
+.select-grid__body {
+    overflow-y: auto;
+    margin: 0;
+    padding: 1rem;
+    position: relative;
+}
+
+.select-grid__item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: $sd-text;
+
+    &:hover, &:focus {
+        color: $sd-blue;
+        cursor: pointer;
+
+        i {
+            color: $sd-blue;
+        }
+    }
+
+    &:hover {
+        background: $sd-colour-background__menu-item--hover;
+    }
+
+    &:focus {
+        outline: 2px solid $sd-colour-interactive__base;
+        outline-offset: -2px;
+    }
+}
+
+.sd-input--grid-select {
+    .btn {
+        grid-row: 2/3;
+        grid-column: 2/4;
+        background-color: var(--color-input-bg);
+        border-bottom: 1px solid var(--color-input-border);
+        width: 3.2rem;
+    }
+
+    .btn:hover {
+        background-color: var(--color-input-bg--hover);
+        border-color: var(--color-input-border-hover);
+    }
+
+    .btn:focus {
+        background-color: var(--color-input-bg--focus);
+        box-shadow: 0 1px 0 0 $sd-blue;
+    }
+}
+
+.form__item--auto-width {
+    .sd-input--grid-select {
+        .btn {
+            margin-top: 0;
+        }
+    }
+}

package/app/styles/pr-superdesk-theme.scss

@@ -2,4 +2,6 @@
 @import 'primereact/pr-autocomplete.scss';
 @import 'primereact/pr-dropdown.scss';
 @import 'primereact/pr-datepicker.scss';
-@import 'primereact/pr-dialog.scss';
+@import 'primereact/pr-dialog.scss';
+@import 'primereact/pr-menu.scss';
+@import 'primereact/pr-skeleton.scss';

package/app/styles/primereact/_pr-menu.scss

@@ -0,0 +1,38 @@
+.p-tieredmenu {
+    &, .p-submenu-list {
+        padding-top: 0.4rem;
+        padding-bottom: 0.4rem;
+        background: $white;
+        box-shadow: 0 3px 7px rgba(0,0,0,0.3);
+    }
+}
+
+.p-menuitem-text {
+    font-size: 1.2rem;
+}
+
+.p-menu-separator {
+    width: 100%;
+    height: 1px;
+    background: #e5e5e5;
+}
+
+.p-menuitem-link {
+    padding: .8rem 1.6rem;
+    min-width: 100px;
+    font-size: 14px;
+    color: $sd-text;
+
+    &:hover {
+        background: $sd-colour-background__menu-item--hover;
+    }
+
+    &:focus {
+        outline: 2px solid $sd-colour-interactive__base;
+        outline-offset: -2px;
+    }
+}
+
+.p-menuitem-icon {
+    margin-right: 0.8rem;
+}

package/app/styles/primereact/_pr-skeleton.scss

@@ -0,0 +1,35 @@
+.p-skeleton {
+    position: relative;
+    overflow: hidden;
+    background-color: #e9ecef;
+}
+
+.p-skeleton::after {
+    content: "";
+    animation: p-skeleton-animation 1.2s infinite;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: translateX(-100%);
+    z-index: 1;
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
+}
+
+.p-skeleton-circle {
+    border-radius: 50%;
+}
+
+.p-skeleton-none::after {
+    animation: none;
+}
+
+@keyframes p-skeleton-animation {
+    from {
+        transform: translateX(-100%);
+    }
+    to {
+        transform: translateX(100%);
+    }
+}

package/app/styles/variables/_colors.scss

@@ -269,11 +269,11 @@ $baseColors: (
   --color-selected-bg:        #eaf2f5;
   --color-selected-bg--hover: #dfebf0;
 
-  --color-bg-00:              #ffffff;
-  --color-bg-50:              #f8f8f8;
-  --color-bg-100:             #ededed;
-  --color-bg-150:             #dfdfdf;
-  --color-bg-200:             #a1a1a1;
+  --color-bg-00:              hsl(0, 0%, 100%);
+  --color-bg-50:              hsl(0, 0%, 97%);
+  --color-bg-100:             hsl(0, 0%, 93%);
+  --color-bg-150:             hsl(0, 0%, 87%);
+  --color-bg-200:             hsl(0, 0%, 63%);
 
   --color-bg-800:             #2c2c2c;
 
@@ -283,14 +283,19 @@ $baseColors: (
   --color-inset-search-border:       rgba(0,0,0,.20);
   --color-inset-search-border-hover: rgba(0,0,0,.35);
 
-  --color-assignment-to-do:      #c4170b; //red--700
-  --color-assignment-progress:   #d17d00; //orange--600
-  --color-assignment-completed:  #74a838; //light-green--600
+  --color-assignment-to-do:          #c4170b; //red--700
+  --color-assignment-progress:       #d17d00; //orange--600
+  --color-assignment-completed:      #74a838; //light-green--600
 
-  --color-grid-item-Bg: #fff;
+  --color-grid-item-Bg:              hsl(0, 0%, 100%);
 
-  --color-dropdown-menu-Bg: rgb(255,255,255);
-  --color-dropdown-menu-text: rgb(51, 51, 51);
+  --color-dropdown-menu-Bg:          rgb(255,255,255);
+  --color-dropdown-menu-text:        rgb(51, 51, 51);
+
+  --color-bg__modal:                 hsla(0, 0%, 100%, 1);
+  --color-line__modal:               hsla(0, 0%, 90%);
+
+  --color-bg__select-option:         hsla(0, 0%, 100%, 1);
 }
 
 // CSS variables for dark theme
@@ -311,8 +316,8 @@ $baseColors: (
   --color-text:               rgb(244, 244, 244);
   --color-text-light:         rgba(244, 244, 244,0.75);
 
-  --color-contrast-bg:        #333;
-  --color-contrast-bg--hover: #383838;
+  --color-contrast-bg:        hsl(0, 0%, 20%);
+  --color-contrast-bg--hover: hsl(0, 0%, 22%);
   
   --color-selected-bg:        #35393b;
   --color-selected-bg--hover: #3b4246;
@@ -327,7 +332,7 @@ $baseColors: (
 
   --color-kanban-border:      #8e8e8e;
 
-  --color-inset-search-bg:    rgba(0,0,0,0.2);
+  --color-inset-search-bg:           rgba(0,0,0,0.2);
   --color-inset-search-border:       rgba(255,255,255,0.35);
   --color-inset-search-border-hover: rgba(255,255,255,0.55);
   
@@ -335,13 +340,20 @@ $baseColors: (
   [class*=" big-icon--"] {
     color: $white;
   }
-  --color-grid-item-Bg: #272727;
+  --color-grid-item-Bg:       hsl(0, 0%, 15%);
+  
+  --color-bg__modal:          hsla(0, 0%, 20%);
+  --color-line__modal:        hsla(0, 0%, 25%);
+
+  --color-bg__select-option:  hsla(0, 0%, 20%, 1);
 }
 
 [class^="--dark-ui"],
-[class*="--dark-ui"] {
-  --color-contrast-bg:        #333;
-  --color-contrast-bg--hover: #383838;
+[class*="--dark-ui"],
+.dark-ui {
+  --color-contrast-bg:        hsl(0, 0%, 20%);
+  --color-contrast-bg--hover: hsl(0, 0%, 22%);
+  --color-bg__select-option:  hsla(0, 0%, 20%, 1);
 }
 
 [data-theme="accessible-light-ui"] {

package/app-typescript/components/Button.tsx

@@ -11,7 +11,7 @@ interface IButtonBase {
     icon?: string;
     disabled?: boolean;
     iconOnly?: boolean;
-    onClick(): void;
+    onClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
     'data-test-id'?: string;
 }
 
@@ -40,7 +40,7 @@ export class Button extends React.PureComponent<IPropsButton> {
                 id={this.props.id}
                 className={classes}
                 tabIndex={0}
-                onClick={this.props.disabled ? () => false : this.props.onClick}
+                onClick={this.props.disabled ? () => false : (event) => this.props.onClick(event)}
                 aria-label={this.props.iconOnly ? this.props.text : ''}
                 data-test-id={this.props['data-test-id']}>
                 {this.props.icon ? <Icon name={this.props.icon} /> : null}

package/app-typescript/components/DropdownFirst.tsx

@@ -43,7 +43,7 @@ export const DropdownFirst = ({
     const [open, setOpen] = React.useState(false);
     const [height, setHeight] = React.useState(false);
     const ref = React.useRef(null);
-    let inDebounce: NodeJS.Timeout;
+    let inDebounce: number;
 
     function calculate() {
         let number = getDimensions(ref.current);
@@ -61,7 +61,7 @@ export const DropdownFirst = ({
         return function() {
             const context = children;
             clearTimeout(inDebounce);
-            inDebounce = setTimeout(() => calculate.apply(context), delay);
+            inDebounce = window.setTimeout(() => calculate.apply(context), delay);
         };
     };