superdesk-ui-framework 3.0.1-beta.2 → 3.0.1-beta.22

package/app/styles/grids/_grid-layout.scss

@@ -40,17 +40,45 @@
         background-color: var(--sd-colour-panel-bg--100);
         overflow: auto;
     }    
-    .bottom-bar {
-        height:3rem;
-        background-color: var(--sd-colour-bottom-bar);
+    .bottom-bar,
+    .sd-bottom-bar {
         grid-column: 2/3;
         grid-row: 4/5;
-        z-index: 2;
-        display: flex;
-        align-items: center;
-        flex-direction: row;
-        color: rgba(255, 255, 255, 0.75);
-        padding: 0 10px; 
+    }
+}
+
+.bottom-bar,
+.sd-bottom-bar {
+    min-height:3.2rem;
+    background-color: var(--sd-colour-bottom-bar);
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: $sd-sidebarMenu-width 1fr auto auto;
+    color: hsla(0, 0%, 100%, 0.75);
+}
+.sd-bottom-bar__action {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $sd-sidebarMenu-width;
+    text-align: center;
+    padding: 0;
+    background-color: var(--sd-colour-top-menu__btn);
+    transition: all 0.2s ease;
+    &:hover {
+        background-color: hsl(0, 0%, 0%);
+        cursor: pointer;
+    }
+    &:active {
+        background-color: var(--sd-colour-interactive);
+    }
+    &--disabled {
+        pointer-events: none !important;
+        opacity: 0.3;
     }
 }
 
@@ -188,6 +216,12 @@
             transition-delay: 0;
         }
     }
+    &.sd-column-box__slide-in-column--light {
+        background-color: var(--sd-colour-panel-bg--000);
+        .sd-column-box__slide-in-column-inner {
+            background-color: var(--sd-colour-panel-bg--000);
+        }
+    }
 }
 .sd-slide-in-panel {
     display: flex;
@@ -571,20 +605,6 @@ $planningEditor-width: 53rem;
     }
 }
 
-// DARK UI ---------------------------------------------
-//------------------------------------------------------
-
-// .dark-ui,
-// [class^="--dark-ui"],
-// [class*="--dark-ui"] {
-//     .sd-filters-panel {
-//         background-color: $sd-filters-darkUI-bg;
-//     }
-// }
-
-
-
-
 // GRID LAYOUT TEST ------------------------------------------------------------------------------------------------------------------------
 //------------------------------------------------------------------------------------------------------------------------------------------
 
@@ -671,9 +691,33 @@ $planningEditor-width: 53rem;
     .side-panel__container {
         width: var(--width__container--medium);
         overflow-y: auto;
-        &.side-panel__container--xx-large{
+        &.side-panel__container--xxx-small {
+            width: var(--width__container--xxx-small);
+        }
+        &.side-panel__container--xx-small {
+            width: var(--width__container--xx-small);
+        }
+        &.side-panel__container--x-small {
+            width: var(--width__container--x-small);
+        }
+        &.side-panel__container--small {
+            width: var(--width__container--small);
+        }
+        &.side-panel__container--large {
+            width: var(--width__container--large);
+        }
+        &.side-panel__container--x-large {
+            width: var(--width__container--x-large);
+        }
+        &.side-panel__container--xx-large {
             width: var(--width__container--xx-large);
         }
+        &.side-panel__container--xxx-large {
+            width: var(--width__container--xxx-large);
+        }
+        &.side-panel__container--full {
+            width: var(--width__container--full);
+        }
         .side-panel {
             opacity: 1;
         }
@@ -703,6 +747,9 @@ $planningEditor-width: 53rem;
     .sd-main-content-grid {
         grid-column: contentArea;
     }
+    &--editor-full {
+        grid-template-columns: [sideTabsLeft] auto [contentArea] auto [contentSplitter] auto [authoringArea] 1fr;
+    }
 }
 .sd-content-wrapper__left-tabs { 
     grid-column: sideTabsLeft;
@@ -746,17 +793,16 @@ $planningEditor-width: 53rem;
 .sd-page-grid, .sd-page-grid--test {
     margin: 0;
     display: grid;
-    grid-template-columns: [slideInNavigation] auto [contentContainer] 1fr;
+    grid-template-columns: [slideInNavigation] auto [contentContainer] 1fr [notificationPanel] 0;
     grid-template-rows: [mainToolbar] 4.8rem [contentContainer] 1fr [footerBar] auto;
     grid-gap: 0;
     height: 100vh;
     position: relative;
-    //background-color: aquamarine;
 
     .sd-main-menu {
         grid-column: slideInNavigation;
         grid-row: 1/-1;
-        background-color: #272727;
+        background-color: hsla(214, 13%, 16%, 1);
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: 1fr;
@@ -769,14 +815,81 @@ $planningEditor-width: 53rem;
             overflow: hidden;
             transition: opacity ease-in-out 0.2s, width ease-in-out 0.1s;
             opacity: 0;
-            box-shadow: inset -8px 0px 12px -4px rgba(0, 0, 0, 0.6);
         }
+        .sd-main-menu__navigation {
+            display: grid;
+            grid-template-columns: 1fr;
+            grid-template-rows: [mainMenuHeader] $nav-height [mainMenuContent] 1fr [mainMenuFooter] auto;
+            width: 0;
+            overflow: hidden;
+            transition: opacity ease-in-out 0.2s, width ease-in-out 0.1s;
+            opacity: 0;
+            box-shadow: inset -8px 0px 12px -4px rgba(0, 0, 0, 0.4), inset -1px 0px 0 0 hsla(214, 13%, 90%, 0.24);
+        }
+        .sd-main-menu__header {
+            display: flex;
+            align-items: center;
+            box-shadow: 0 2px 3px hsla(0, 0%, 0%, 0.4);
+            border-bottom: 1px solid hsla(214, 13%, 60%, 0.08);
+        }
+        .sd-main-menu__title {
+            font-size: 1.6rem;
+            font-weight: 300;
+            opacity: 0.65;
+            padding-left: 2.4rem;
+        }
+        .sd-main-menu__content {
+            overflow-y: auto;
+        }
+        .sd-main-menu__footer {
+            display: flex;
+            flex-direction: column;
+            align-items: stretch;
+            justify-content: center;
+            box-shadow: 0 -2px 3px hsla(0, 0%, 0%, 0.24);
+            border-top: 1px solid hsla(214, 13%, 60%, 0.08);
+            .sd-main-menu__footer-logo {
+                display: flex;
+                align-items: center;
+                border-top: 1px solid hsla(214, 13%, 60%, 0.08);
+                background: url(../img/SD-logo.svg) no-repeat center;
+                height: 7.6rem;
+            }
+            .sd-main-menu__footer-info {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                text-align: center;
+                font-size: 10px;
+                font-weight: 300;
+                letter-spacing: 0.05em;
+                padding: 6px 0 6px;
+                opacity: 0.5;
+            }
+            .sd-main-menu__footer-content {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                text-align: center;
+                font-size: 12px;
+                padding: 8px 0 8px;
+                opacity: 0.85;
+                height: 3.2rem;
+                border-top: 1px solid hsla(214, 13%, 60%, 0.08);
+                background-color: hsla(214, 13%, 6%, 0.24);
+            }
+        }
+
         &.sd-main-menu--open {
-            .sd-main-menu__inner {
+            .sd-main-menu__inner,
+            .sd-main-menu__navigation {
                 width: 30rem;
                 opacity: 1;
             }
         }
+        .sd-left-nav {
+            width: 100%;
+        }
     }
     .sd-top-menu {
         grid-column: contentContainer;
@@ -790,22 +903,22 @@ $planningEditor-width: 53rem;
         z-index: 1;
         overflow: auto;
         background-color: var(--sd-colour-panel-bg--100);
-
-    }    
-    .bottom-bar {
+    }   
+    .sd-notifications-slot {
+        grid-column: notificationPanel;
+        grid-row: contentContainer;
+        z-index: 2;
+        position: relative;
+        width: 0;
+    } 
+    .bottom-bar,
+    .sd-bottom-bar {
         grid-column: contentContainer;
         grid-row: footerBar;
-        height:3rem;
-        background-color: var(--sd-colour-bottom-bar);
-        z-index: 2;
-        display: flex;
-        align-items: center;
-        flex-direction: row;
-        color: rgba(255, 255, 255, 0.75);
-        padding: 0 10px; 
     }
 }
 
+
 // EDITOR 3 Layout ======================================= //
 .sd-authoring-page {
     display: grid;

package/app/styles/interface-elements/_side-panel.scss

@@ -15,7 +15,7 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200);
     .side-panel__header {
         grid-column: 1/2;
         grid-row: 1/2;
-        z-index: 1;
+        z-index: 2;
         position: relative;
         min-height: 4.8rem;
         display: flex;

package/app/styles/layout/_basic-layout.scss

@@ -38,10 +38,10 @@
 
 .sd-page__sidebar {
     & + .sd-page__main-content {
-        left: 200px;
+        left: 240px;
     }
     & + .sd-content-navigation-panel {
-        left: 200px;
+        left: 240px;
         top: 0;
         bottom: 0;
         position: absolute;

package/app/styles/layout/_editor.scss

@@ -82,7 +82,7 @@
         overflow: visible;
         .sidetabs-content-overlay__inner {
             opacity: 1;
-            width: 320px;
+            width: auto;
             position: absolute;
             overflow: hidden;
             inset-inline-end: 0;
@@ -365,12 +365,18 @@
         overflow-y: auto;
         width: auto;
         min-width: 45vw;
-        //min-width: 45%;
-        //max-width: 1200px;
-
+        max-width: 45vw;
+        &.sd-editor__container--large {
+            min-width: 52vw;
+        }
     }
 }
 
+.sd-content-wrapper--editor-full .open-editor .sd-editor__container {
+    min-width: auto;
+    max-width: none;
+}
+
 .sd-editor__input--title {
     -webkit-appearance: none;
     -moz-appearance: none;

package/app/styles/menus/_sd-bottom-tabs.scss

@@ -0,0 +1,70 @@
+.sd-bottom-nav-list {
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    min-height: 3.2rem;
+    overflow-x: auto;
+    grid-column: 2/3;
+    .sd-bottom-nav-list__item {
+        flex: 0 1 24rem;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        height: 3.2rem;
+        padding: 0 0.8rem 0 1.6rem;
+        gap: 0.8rem;
+        border-inline-end: 1px solid hsla(214, 13%, 90%, 0.14);
+        background-color: var(--sd-colour-bottom-bar__item);
+        overflow: hidden;
+        .sd-bottom-nav-list__item-title {
+            font-size: 1.4rem;
+            line-height: 1;
+            color: hsla(214, 13%, 80%, 1);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            display: flex;
+            flex: 1 1;
+            align-self: stretch;
+            align-items: center;
+            gap: 8px;
+            &:hover {
+                color: var(--sd-colour-interactive);
+                cursor: pointer;
+            }
+            [class^="icon-"],
+            [class*=" icon-"] {
+                flex-shrink: 0;
+                color: inherit !important;
+                opacity: 0.75;
+            }
+            span {
+                padding-top: 2px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                display: flex;
+                display: inline-block;
+                flex-shrink: 1;
+            }
+        }
+        &--active {
+            background-color: var(--sd-colour-bottom-bar__item--active);
+            .sd-bottom-nav-list__item-title,
+            .sd-bottom-nav-list__item-title:hover {
+                color: hsla(214, 13%, 98%, 1);
+            }
+        }
+        &--disabled {
+            opacity: 0.5;
+            pointer-events: none;
+            .sd-bottom-nav-list__item-title {
+                pointer-events: none;
+            }
+        }
+    }
+}

package/app/styles/menus/_sd-left-navigation.scss

@@ -4,6 +4,7 @@
 $sd-leftNav-bgColor: var(--sd-colour-background__left-nav);
 $sd-leftNav-borderColor: var(--sd-colour-line--light);
 $sd-leftNav-width: 24rem;
+$sd-leftNav-width-large: 32rem;
 
 $sd-leftNavBtn-bgColor: transparent;
 $sd-leftNavBtn-bgHoverColor: $sd-colour-background__menu-item--hover;
@@ -33,9 +34,31 @@ $sd-leftNavBtn-borderActive: 4px solid var(--sd-colour-interactive--active);
     &--blanc {
         border-color: transparent;
         background: transparent;
+        border-right-width: 0;
         .sd-left-nav__group-header {
             border-top-color: transparent;
         }
+    }
+    &--large {
+        width: $sd-leftNav-width-large;
+        max-width: 100%;
+        .sd-left-nav__group-header {
+            padding-inline: 2.4rem 0;
+        }
+        .sd-left-nav__btn {
+            padding-inline: 4rem 0;
+        }
+    }
+    &--reverse-border {
+        .sd-left-nav__btn {
+            border-inline-end: none;
+            border-inline-start: $sd-leftNavBtn-border;
+
+           &--active {
+                border-inline-end: none;
+                border-inline-start: $sd-leftNavBtn-borderActive;
+            }
+        }
     }   
 }
 
@@ -75,7 +98,7 @@ $sd-leftNavBtn-borderActive: 4px solid var(--sd-colour-interactive--active);
     line-height: 100%;
     text-transform: uppercase;
     letter-spacing: 0.1em;
-    color: var(--color-text-light);
+    color: var(--color-text-lighter);
     padding-block-start: 2.6rem;
     padding-block-end: 0.9rem;
     padding-inline: 1.6rem 0;

package/app/styles/menus/_sd-sidebar-menu.scss

@@ -141,7 +141,9 @@ $sd-sideTabMenu-background: var(--sd-colour-sidebar-menu--20);
 }
 
 .sd-sidetab-menu__btn {
-  display:block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   position: relative;
   width: 100%;
   height: $sd-sidebarMenu-width;
@@ -161,8 +163,8 @@ $sd-sideTabMenu-background: var(--sd-colour-sidebar-menu--20);
 .sd-sidetab-menu__main-icon {
   color: $sd-text-light;
   position: absolute;
-  top: 10px;
-  left: 10px;
+  inset-block-start: 1rem;
+  inset-inline-start: 1rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -170,25 +172,19 @@ $sd-sideTabMenu-background: var(--sd-colour-sidebar-menu--20);
     color: $sd-text-light;
   }
 }
-.sd-sidetab-menu__helper-icon {
+
+.sd-sidetab-menu__helper-icon,
+i.sd-sidetab-menu__helper-icon {
   opacity: 0;
   margin: 0;
-  left: 1.2rem;
+  inset-block-start: 1.2rem;
+  inset-inline-start: 1.2rem;
   width: 2.4rem;
   height: 2.4rem;
   font-size: 2.4rem;
   line-height: 2.4rem;
   z-index: 2;
   transition: all 0.4s 0s, transform 0.3s 0s;
-  i {
-    opacity: 0;
-    margin: 0;
-    width: 2.4rem;
-    height: 2.4rem;
-    font-size: 2.4rem;
-    line-height: 2.4rem;
-    transition: all 0.4s 0s, transform 0.3s 0s;
-  }
 }
 .sd-sidetab-menu__main-icon,
 .sd-sidetab-menu__main-icon i {

package/app/styles/menus/_sd-top-menu.scss

@@ -17,19 +17,33 @@ $sd-topMenu-background: var(--sd-colour-top-menu);
 }
 
 .sd-top-menu__collapse-nav {
-    display: inline-block;
     height: $nav-height;
-    line-height: $nav-height + 3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: $sd-sidebarMenu-width;
     text-align: center;
     padding: 0;
     background-color: var(--sd-colour-top-menu__btn);
-    box-shadow: 2px 0 5px 0 rgba(0,0,0,.35);
+    box-shadow: 2px 0 5px 0 hsla(0, 0%, 0%, 0.35);
     position: relative;
+    transition: all 0.3s ease;
     &:hover {
-        background: #000;
+        background-color: hsl(0, 0%, 0%);
         cursor: pointer;
     }
+    &.is-active {
+        margin-inline-start: -$sd-sidebarMenu-width;
+        background-color: hsla(0, 0%, 0%, 0.02);
+        box-shadow: none;
+        &:hover {
+            background-color: hsla(0, 0%, 0%, 0.24);
+        }
+    }
+    &--disabled {
+        pointer-events: none !important;
+        opacity: 0.5;
+    }
 }
 .sd-top-menu__header {
     display: inline-block;
@@ -38,7 +52,7 @@ $sd-topMenu-background: var(--sd-colour-top-menu);
     font-size: 1.5rem;
     text-align: center;
     padding: 0 2rem;
-    color: #aaa;
+    color: hsl(214, 13%, 75%);
     margin: 0;
 }
 

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

@@ -2,6 +2,7 @@
     background-color: hsla(214, 13%, 16%, 0.5) !important;
     backdrop-filter: blur(1px);
     -webkit-backdrop-filter: blur(1px);
+    z-index: 1000;
 }
 
 

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

@@ -1,7 +1,7 @@
 @import './../tag-labels';
 @import './../form-elements/checkbox';
 
-.p-dropdown, .p-multiselect {
+.p-dropdown {
     @include pr-input-item-base;
     padding-block-start: 6px;
     padding-block-end: 6px;
@@ -10,6 +10,14 @@
     color: $sd-text;
 }
 
+.p-multiselect {
+    @include pr-input-item-base;
+    height: auto !important;
+    min-height: 3.2rem !important;
+    color: $sd-text;
+    padding: 0.4rem;
+}
+
 .p-dropdown-clear-icon,
 .p-multiselect-clear-icon {
     position: static;
@@ -69,15 +77,21 @@
 }
 
 .p-multiselect-label {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
     display: flex;
+    justify-content: flex-start;
     align-items: center;
-    justify-content: center;
-
+    flex-wrap: wrap;
+    padding-inline-start: 0.4rem;
+    gap: 0.4rem;
 }
 
 .p-multiselect-token {
     @extend .tag-label;
     cursor: default;
+    margin: 0 !important;
  
     .pi-times-circle {
         overflow: inherit;

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

@@ -23,13 +23,14 @@
     padding: .8rem 1.6rem;
     min-width: 100px;
     font-size: 14px;
-    color: $sd-text;
+    color: var(--color-text);
+    width: 100%;
 
     &:hover, &:focus-visible {
         background: $sd-colour-background__menu-item--hover;
     }
-}
-
-.p-menuitem-icon {
-    margin-right: 0.8rem;
+    .p-menuitem-icon {
+        margin-right: 0.8rem;
+        color: var(--color-icon-default);
+    }
 }

package/app-typescript/components/Badge.tsx

@@ -6,6 +6,7 @@ interface IProps {
     color?: string; // https://ui-framework.superdesk.org/#/components/colors
     shape?: 'round' | 'square'; // defaults to 'round'
     children?: React.ReactNode;
+    hexColor?: string;
     'data-test-id'?: string;
 }
 
@@ -21,11 +22,11 @@ export class Badge extends React.PureComponent<IProps> {
             return (
                 <div className='element-with-badge' data-test-id={this.props['data-test-id']}>
                     {this.props.children}
-                    <span className={classes} data-test-id="badge-content">{this.props.text}</span>
+                    <span className={classes} style={{backgroundColor: this.props.hexColor}} data-test-id="badge-content">{this.props.text}</span>
                 </div>
             );
         } else {
-            return <span className={classes} data-test-id={this.props['data-test-id']}>{this.props.text}</span>;
+            return <span className={classes} style={{backgroundColor: this.props.hexColor}} data-test-id={this.props['data-test-id']}>{this.props.text}</span>;
         }
     }
 }

package/app-typescript/components/ContentDivider.tsx

@@ -6,6 +6,7 @@ interface IProps {
     orientation?: 'horizontal' |'vertical'; // defaults to 'horizontal'
     align?: 'center' | 'left' | 'right'; // defaults to 'center'
     border?: boolean;
+    margin?: 'x-small' | 'small' |'medium' | 'large' | 'none';
     children?: React.ReactNode;
 }
 
@@ -19,6 +20,8 @@ export class ContentDivider extends React.PureComponent<IProps> {
             [`sd-content-divider--text-${this.props.align}`]: this.props.align || this.props.align !== undefined,
             [`sd-content-divider--${this.props.orientation}`]:
             this.props.orientation || this.props.orientation !== undefined,
+            'sd-content-divider--margin-medium': this.props.margin === undefined,
+            [`sd-content-divider--margin-${this.props.margin}`]: this.props.margin || this.props.margin !== undefined,
         });
 
         if (this.props.children) {