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

package/app/styles/components/_subnav.scss

@@ -277,94 +277,101 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-
       }
     }
   }
+  .sd-create-btn {
+    background-color: var(--color-dropdown-menu-Bg);
+    position: relative;
+    box-shadow: 0 8px 0 0px var(--color-dropdown-menu-Bg), -2px -1px 8px -2px rgba(0, 0, 0, 0.24), 3px -1px 8px -2px rgba(0, 0, 0, 0.24);
+    border-color: transparent !important;
+    z-index: 1001;
+  }
 }
   
 .navbtn {
-    position: relative;
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    height: $subnav-height;
-    width: 4.8rem;
-    padding: 0;
-    background: transparent;
-    color: $sd-text;
-    text-align: center;
-    text-decoration: none;
-    border: 0px solid transparent;
-    border-color: $navbutton-border-color;
-    border-inline-width: 1px 0;
-    cursor:pointer;
-    background: transparent;
-    transition: background-color 0.2s ease-out, color 0.1s ease-out;
-    i {
-        opacity: 0.75;
-        vertical-align: baseline !important;
-        transition: opacity 0.2s ease-out;
-    }
-    [class^="big-icon--"],
-    [class*=" big-icon--"] {
-        line-height: 1;
-        color: $sd-text;
-        display: block;
-    }
-    .big-icon--send-to {
-        margin-left: 0.3rem;
-    }
-    [class^="icon-"],
-    [class*=" icon-"] {
-        color: $sd-text;
-    }
-    &:hover {
-        background: var(--color-navbutton-bg-hover);
-        > i {
-            opacity: 1;
-        }
-    }
-    &.navbtn--left {
-        border-inline-width: 0 1px;
-    }
-    &.navbtn--blue {
-        background: $sd-colour-interactive;
-        border-color: var(--sd-colour-interactive--lighten-10);
-        color: $white;
-        &.disabled {
-            background: var(--sd-colour-interactive--lighten-30);
-        }
-    }
-    &.navbtn--text-only {
-      width: auto;
-      line-height: $subnav-height;
-      padding: 0 20px;
+  position: relative;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  height: $subnav-height;
+  width: 4.8rem;
+  padding: 0;
+  background: transparent;
+  color: $sd-text;
+  text-align: center;
+  text-decoration: none;
+  border: 0px solid transparent;
+  border-color: $navbutton-border-color;
+  border-inline-width: 1px 0;
+  cursor:pointer;
+  background: transparent;
+  transition: background-color 0.2s ease-out, color 0.1s ease-out;
+  i {
+      opacity: 0.75;
+      vertical-align: baseline !important;
+      transition: opacity 0.2s ease-out;
+  }
+  [class^="big-icon--"],
+  [class*=" big-icon--"] {
+      line-height: 1;
+      color: $sd-text;
+      display: block;
+  }
+  .big-icon--send-to {
+      margin-left: 0.3rem;
+  }
+  [class^="icon-"],
+  [class*=" icon-"] {
+      color: $sd-text;
+  }
+  &:hover {
+      background: var(--color-navbutton-bg-hover);
+      > i {
+          opacity: 1;
+      }
+  }
+  &.navbtn--left {
       border-inline-width: 0 1px;
-      font-size: 1.5rem;
-    }
-    &.navbtn--border-r {
-      border-inline-end: 1px !important;
-    }
-    &.navbtn--highlighted {
-      background-color: $purple !important;
-      transition: all 0.3s;
-      padding: 0 0 0 9px;
+  }
+  &.navbtn--blue {
+      background: $sd-colour-interactive;
+      border-color: var(--sd-colour-interactive--lighten-10);
       color: $white;
-      &:hover {
-        background-color: darken($purple, 10%);
-      }
-    }
-    &.navbtn--darker {
-      background-color: rgba(0, 0, 0, 0.05);
-    }
-    &.navbtn--active {
-      background-color: $sd-colour-interactive;
-        > i {
-          opacity: 1;
-          color: $white;
+      &.disabled {
+          background: var(--sd-colour-interactive--lighten-30);
       }
+  }
+  &.navbtn--text-only {
+    width: auto;
+    line-height: $subnav-height;
+    padding: 0 20px;
+    border-inline-width: 0 1px;
+    font-size: 1.5rem;
+  }
+  &.navbtn--border-r {
+    border-inline-end: 1px !important;
+  }
+  &.navbtn--highlighted {
+    background-color: $purple !important;
+    transition: all 0.3s;
+    padding: 0 0 0 9px;
+    color: $white;
+    &:hover {
+      background-color: darken($purple, 10%);
     }
-    &.navbtn--publish {
-      background-color: rgba(0, 0, 0, 0.05);
+  }
+  &.navbtn--darker {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+  &.navbtn--active {
+    background-color: $sd-colour-interactive;
+      > i {
+        opacity: 1;
+        color: $white;
     }
+  }
+  &.navbtn--publish {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
 }
 
 .dropdown.open {

package/app/styles/design-tokens/_design-tokens-general.scss

@@ -2,6 +2,13 @@
 // ====================================================
 :root {
     // GENERAL
+    --gap--x-small:   0.4rem;  // 4px
+    --gap--small:     0.8rem;  // 8px
+    --gap--medium:    1.6rem;  // 16px
+    --gap--large:     2.4rem;  // 24px;
+    --gap--x-large:   3.2rem;  // 32px;
+    --gap--xx-large:  4rem;    // 40px;
+    --gap--auto:      auto;
 
     // BORDER RADIUS
     --b-radius--x-small: 2px;

package/app/styles/design-tokens/_new-colors.scss

@@ -310,6 +310,7 @@
     --sd-shadow__subnav:                    0 1px 0px var(--sd-colour--shadow-line), 0 1px 3px hsla(0, 0%, 0%, 0.07), 0 1px 0 0 hsla(0, 0%, 0%, 0.1);
     
     --sd-shadow__item--selected:            0 0 0 2px var(--sd-colour-interactive), 0 0 0 5px var(--sd-colour-interactive--alpha-30);
+    --sd-shadow__item--selected-thin:       0 0 0 1px var(--sd-colour-interactive), inset 0 0 0 2px var(--sd-colour-interactive--alpha-30);
 
     // Webkit scrollbar colors
     --sd-colour__webkit-scrollbar--hover:       hsla(214, 13%, 50%, 0.24);
@@ -454,6 +455,7 @@
     --sd-shadow__subnav:                    0 1px 0px var(--sd-colour--shadow-line), 0 1px 3px hsla(0, 0%, 0%, 0.14), 0 2px 0 0 hsla(0, 0%, 0%, 0.12);
 
     --sd-shadow__item--selected:            0 0 0 2px var(--sd-colour-interactive), 0 0 0 5px var(--sd-colour-interactive--alpha-30);
+    --sd-shadow__item--selected-thin:       0 0 0 1px var(--sd-colour-interactive), inset 0 0 0 2px var(--sd-colour-interactive--alpha-30);
 
     // Webkit scrollbar colors
     --sd-colour__webkit-scrollbar--hover:       hsla(214, 13%, 30%, 0.24);
@@ -556,7 +558,7 @@
     --color-text-light:                   hsla(214, 13%, 30%, 0.75);
     --color-text-lighter:                 hsla(214, 13%, 30%, 0.55);
     --color-icon-default:                 hsla(214, 13%, 30%, 1);
-    --sd-slugline-color:                  hsla(197, 100%, 5%, 1) !important;
+    --sd-slugline-color:                  hsla(197, 100%, 15%, 1) !important;
     --sd-time-schedule-color:             hsla(268, 100%, 25%, 1);
     --sd-navy-color:                      hsla(240, 100%, 25%, 1);
     
@@ -572,7 +574,7 @@
     --color-checkbox-border-hover:        hsla(0, 0%, 0%, 0.4);
   
     --color-selected-bg:                  hsla(196, 35%, 94%, 1);
-    --color-selected-bg--hover:           var(--sd-colour-interactive--alpha-10);
+    --color-selected-bg--hover:           hsla(196, 35%, 93%, 1);
   
     --color-bg-00:                        hsla(0, 0%, 100%, 1);
     --color-bg-50:                        hsla(0, 0%, 97%, 1);

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

@@ -688,4 +688,8 @@
     &--no-label {
         grid-template-rows: auto auto auto;
     }
+    &--full-width {
+        flex-grow: 1;
+        width: 100%;
+    }
 }

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

@@ -671,6 +671,9 @@ $planningEditor-width: 53rem;
     .side-panel__container {
         width: var(--width__container--medium);
         overflow-y: auto;
+        &.side-panel__container--xx-large{
+            width: var(--width__container--xx-large);
+        }
         .side-panel {
             opacity: 1;
         }
@@ -715,17 +718,28 @@ $planningEditor-width: 53rem;
     overflow: auto;
 }
 
-.sd-content-wrapper__content-splitter { 
-    grid-column: contentSplitter;
+.content-splitter--visible {
+    &.sd-content-wrapper__content-splitter {
+        display: block;
+        grid-column: contentSplitter;
+        // this styling might be moved to an inner element
+        width: 3px;
+        background-color: hsl(214, 13%, 40%);
+        cursor: col-resize;
+    }
 
-    // this styling might be moved to an inner element
-    width: 3px;
-    background-color: #666;
-    cursor: col-resize;
+}
+.sd-content-wrapper__content-splitter { 
+    display: none;
 }
 .sd-content-wrapper__authoring-content-area { 
     grid-column: authoringArea;
     display: grid;
+    display: grid;
+    //border-inline-start: 2px solid hsla(214, 13%, 45%, 1);
+    grid-template-rows: 1fr;
+    grid-auto-columns: auto;
+    overflow-y: auto;
 }
 
 // main page structure - top bar, slide-in main navigation, content area and footer (open items bar).
@@ -737,7 +751,7 @@ $planningEditor-width: 53rem;
     grid-gap: 0;
     height: 100vh;
     position: relative;
-    background-color: aquamarine;
+    //background-color: aquamarine;
 
     .sd-main-menu {
         grid-column: slideInNavigation;

package/app/styles/layout/_container.scss

@@ -20,6 +20,9 @@
     &--gap-none {
         gap: 0;
     }
+    &--gap-x-small {
+        gap: $sd-base-increment / 2;
+    }
     &--gap-small {
         gap: $sd-base-increment;
     }

package/app/styles/layout/_editor.scss

@@ -134,19 +134,45 @@
     justify-content: space-between;
     align-items: center;
     box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.2);
+    &--custom {
+        height: auto;
+        flex-direction: column;
+        align-items: stretch;
+        padding: 0;
+    }
+}
+.sd-editor-content__save-bar {
+    height: $nav-height;
+    position: relative;
+    padding: 4px 20px;
+    //background-color: var(--sd-colour-panel-bg--000);
+    background-color: var(--sd-colour-interactive);
+    z-index: 3;
+    transition: all 0.5s;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.2);
+    &--custom {
+        height: auto;
+        flex-direction: column;
+        align-items: stretch;
+        padding: 0;
+    }
 }
-// .sd-editor-content__main-container {
-//     grid-column: editorMain;
-//     grid-row: editorMainContainer;
-//     display: flex;
-//     flex-direction: column;
-//     overflow-y: auto;
-//     p {
-//         font-size: 16px;
-//         line-height: 1.5;
-//         margin-bottom: 24px;
-//     }
-// }
+.sd-editor-content__toolbar-inner {
+    height: $nav-height;
+    position: relative;
+    padding: 4px 20px;
+    background-color: var(--sd-colour-panel-bg--000);
+    z-index: 3;
+    transition: all 0.5s;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.2);
+}
+
 .sd-editor-content__main-container {
     grid-column: editorMain;
     grid-row: editorMainContainer;
@@ -166,9 +192,6 @@
 
     grid-column: 1 / 3;
     grid-row: authoringHeader;
-
-
-
     display: flex;
     flex-direction: column;
     background-color: var(--sd-colour-panel-bg--100);
@@ -177,7 +200,7 @@
     padding: $sd-base-increment * 3 $sd-base-increment * 1.5;
     z-index: 2;
     box-shadow: 0px 1px 4px -1px rgba(0, 0, 0, 0.25);
-    max-height: 800px;
+    max-height: 1400px;
     transition: max-height 0.12s ease-in;
     & > .authoring-header__holder {
         height: auto;
@@ -202,6 +225,21 @@
             overflow: hidden;
             transition: opacity 0.4s 0.1s;
         }
+        &.authoring-header--padding-small,
+        &.authoring-header--padding-medium,
+        &.authoring-header--padding-large {
+            padding-block-start: 0 !important;
+            padding-block-end: 0 !important;
+        }
+    }
+    &.authoring-header--padding-small {
+        padding: $sd-base-increment * 3 $sd-base-increment * 1.5;
+    }
+    &.authoring-header--padding-medium {
+        padding: $sd-base-increment * 3 $sd-base-increment * 3;
+    }
+    &.authoring-header--padding-large {
+        padding: $sd-base-increment * 3 $sd-base-increment * 4;
     }
 }
 .authoring-header__toggle {
@@ -302,5 +340,59 @@
         background: var(--sd-colour__webkit-scrollbar-thumb--hover);
         cursor: pointer;
     }
+}
+
+.sd-editor__container {
+    grid-column: 1 / 2;
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-auto-columns: auto;
+    overflow-y: auto;
+
+    width: 0;
+    min-width: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition: all ease-in-out 0.1s;
+    .sd-content-wrapper__main-content-area.sd-main-content-grid {
+        grid-column: 1 / 2 !important;
+    }
+}
+
+.open-editor {
+    .sd-editor__container {
+        opacity: 1;
+        overflow-y: auto;
+        width: auto;
+        min-width: 45vw;
+        //min-width: 45%;
+        //max-width: 1200px;
 
+    }
 }
+
+.sd-editor__input--title {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 100%;
+    color: var(--color-text);
+    border: 0;
+    border: 2px solid var(--color-input-border);
+    font-size: 3.2rem;
+    font-weight: 500;
+    background-color: transparent;
+    transition: all ease 0.3s;
+    padding: 0 1.6rem;
+    min-height: 5.6rem;
+    border-radius: var(--b-radius--large);
+    display: block;
+    &:hover {
+        border-color: var(--color-input-border-hover);
+    }
+    &:focus {
+        outline: none;
+        border-color: var(--sd-colour-interactive--alpha-50);
+        box-shadow: inset 0 0 0 4px var(--sd-colour-interactive--alpha-20);
+    }
+}

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

@@ -132,6 +132,12 @@ $sd-sideTabMenu-background: var(--sd-colour-sidebar-menu--20);
   &--static {
     position: static;
   }
+  .badge {
+    position: absolute;
+    inset-block-start: 3px;
+    inset-inline-end: 3px;
+    z-index: 1;
+  }
 }
 
 .sd-sidetab-menu__btn {

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

@@ -34,6 +34,8 @@
     pointer-events: auto;
     max-height: 90%;
     transform: scale(1);
+    
+    overflow: hidden;
 }
 
 .p-dialog-content {
@@ -211,6 +213,8 @@
 .p-dialog .p-dialog-header {
     border-bottom: 0 none;
     background: transparent;
+    position: relative;
+    z-index: 1012;
     padding: 0.8rem 0.8rem 0.8rem 1.6rem;
     border-top-right-radius: $border-radius__base--large;
     border-top-left-radius: $border-radius__base--large;
@@ -251,7 +255,6 @@
 }
 
 .p-dialog .p-dialog-content {
-    padding: 1.6rem;
     background-color: transparent;
     font-size: 1.4rem;
     p {
@@ -267,6 +270,8 @@
     border-bottom-right-radius: $border-radius__base--full;
     border-bottom-left-radius: $border-radius__base--full;
     box-shadow: 0 -1px 0 var(--sd-colour-line--x-light);
+    position: relative;
+    z-index: 2;
 }
 
 .p-dialog .p-dialog-footer button {
@@ -298,20 +303,18 @@
     &:hover {
         .p-dialog-header-close-icon {
             opacity: 1;
-          }
+        }
     }
     &:active {
         .p-dialog-header-close-icon {
             color: $sd-colour-interactive !important;
             opacity: 1;
-          }
+        }
     }
-
-    
 }
 
 .p-dialog-content {
-    //p {}
+    // size
     &--small {
         width: var(--width__modal--small);
     }
@@ -324,7 +327,36 @@
     }
     &--x-large {
         width: var(--width__modal--x-large);
-        min-height: 30rem;
+        //min-height: 30rem;
+        height: calc(100vh - 200px);
+    }
+    // padding
+    &--0-padding {
+        padding: 0 !important;
+    }
+    &--s-padding {
+        padding: $sd-base-increment * 2;
+    }
+    &--m-padding {
+        padding: $sd-base-increment * 3
+    }
+    &--l-padding {
+        padding: $sd-base-increment * 4;
+    }
+    &--default {
+        background-color: transparent !important;
+    }
+    &--dark {
+        background-color: var(--sd-colour-panel-bg--200) !important;
+    }
+    &--medium {
+        background-color: var(--sd-colour-panel-bg--100) !important;
     }
 }
 
+.p-dialog-content {
+    //max-height: 100%;
+    .sd-main-content-grid {
+        height: 100% !important;
+    }
+}

package/app-typescript/components/CreateButton.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Icon } from './Icon';
+import { Tooltip } from './Tooltip';
+interface IProps {
+    id?: string;
+    ariaValue: string;
+    toolTipFlow?: 'top' | 'left' | 'right' | 'down';
+    type?: 'default' | 'primary' | 'highlight' | 'darker';
+    state?: 'normal' | 'active'; // defaults to 'normal'
+    value?: 'button' | 'submit' | 'reset'; // defaults to 'button'
+    onClick(): void;
+}
+export class CreateButton extends React.PureComponent<IProps> {
+    static defaultProps = {
+        toolTipFlow: 'left',
+    };
+    render() {
+        let classes = classNames('sd-create-btn', {
+            'sd-navbtn--active': this.props.state === 'active',
+            [`sd-navbtn--${this.props.type}`]: this.props.type,
+        });
+        const value = this.props.value === undefined ? 'button' : this.props.value;
+        return (
+            <Tooltip text={this.props.ariaValue} flow={this.props.toolTipFlow} appendToBody={true}>
+                <button type={value}
+                    className={classes}
+                    tabIndex={0}
+                    onClick={this.props.onClick}
+                    aria-label={this.props.ariaValue}
+                    id={this.props.id}>
+                        <Icon name="plus-large" />
+                        <span className="circle"></span>
+                </button>
+            </Tooltip>
+        );
+    }
+}

package/app-typescript/components/DropZone.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Icon } from './Icon';
+// import * as PanelElements from '../../app-typescript/components/Layouts/Panel';
 
 interface IProps {
     icon?: boolean;
-    text: string;
-    actionText: string;
+    iconSmall?: boolean;
+    text?: string;
     heading?: string;
     className?: string;
     width?: 'auto' | 'full';
@@ -71,8 +72,8 @@ export class DropZone extends React.PureComponent<IProps, IState> {
             onDragEnd={() => false}
             >
                 <div className='sd-dropzone__target-border'>
-                    <input type="file" className='sd-dropzone__input'/>
                 </div>
+                <input type="file" className='sd-dropzone__input'/>
                 {this.props.icon ?
                     <figure className='sd-dropzone__icon' aria-hidden='true'>
                         <Icon name='upload-alt' size='big' />
@@ -82,7 +83,6 @@ export class DropZone extends React.PureComponent<IProps, IState> {
                     <h4 className='sd-dropzone__heading'>{this.props.heading}</h4> : null
                 }
                 <p className='sd-dropzone__description'>{this.props.text}</p>
-                {/* <Button text={this.props.actionText} style='hollow' onClick={() => false} /> */}
             </div>
         );
     }

package/app-typescript/components/Icon.tsx

@@ -5,6 +5,7 @@ interface IProps {
     size?: 'small' | 'big'; // defaults to 'small'
     type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'light';
     className?: string;
+    scale?: '2x' | '3x' | '4x';
     ariaHidden?: boolean;
 }
 
@@ -14,7 +15,8 @@ export class Icon extends React.PureComponent<IProps> {
             [`icon-${this.props.name}`]:
                 (this.props.name && !this.props.size) || (this.props.name && this.props.size === 'small'),
             [`big-icon--${this.props.name}`]: this.props.name && this.props.size === 'big',
-            [`${this.props.type}`]: this.props.type,
+            [`color--${this.props.type}`]: this.props.type,
+            [`scale--${this.props.scale}`]: this.props.scale,
         });
         return (
             <i className={classes} aria-label={this.props.name} aria-hidden={this.props.ariaHidden}></i>