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

package/examples/css/docs-page.css

@@ -1,24 +1,66 @@
 @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic,500italic,700italic,300,300italic');
 @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:200,300,400&subset=latin-ext');
 
+:root {
+    color: hsla(214, 13%, 20%, 1);
+    --docs-page-color-bg-default: hsl(0, 0%, 97%);
+    --docs-page-color-bg-00: hsla(214, 13%, 96%, 1);
+    --docs-page-color-bg-10: hsla(0, 0%, 100%, 1);
+    --docs-page-color-bg__window-bar: hsl(0, 0%, 92%);
+    --docs-page-color-bg__aside: hsla(214, 13%, 92%, 1);
+    --docs-page-color-bg__header: hsl(216, 45%, 24%);
+
+    --docs-page-color-bg__content-row--white: hsla(0, 0%, 100%, 1);
+    --docs-page-color-bg__content-row--grey: hsla(0, 0%, 95%, 1);
+    --docs-page-color-bg__example-box: hsla(214, 13%, 94%, 1);
+    --docs-page-color-bg__graphic-btn: hsla(0, 0%, 100%, 1);
+    --docs-page-color-bg__graphic-btn-graphic: linear-gradient(180deg, hsla(165, 57%, 95%, 1) 4%, hsla(191, 53%, 86%, 1) 96%);
+
+    --docs-page-border__window-bar--top: hsla(0, 0%, 100%, 0.9);
+    --docs-page-border__window-bar--bottom: hsla(0, 0%, 88%, 1);
+    --docs-page-border__table: hsla(0, 0%, 0%, 0.16);
+}
+
+:root [data-theme="dark-ui"] {
+    color: hsla(214, 13%, 96%, 1);
+    --docs-page-color-bg-default: hsla(214, 13%, 96%, 1);
+    --docs-page-color-bg-00: hsla(214, 13%, 12%, 1);
+    --docs-page-color-bg-10: hsla(214, 13%, 12%, 1);
+    --docs-page-color-bg__window-bar: hsl(0, 0%, 8%);
+    --docs-page-color-bg__aside: hsla(214, 13%, 16%, 1);
+    --docs-page-color-bg__header: hsl(216, 40%, 18%);
+
+    --docs-page-color-bg__content-row--white: hsla(0, 0%, 8%, 1);
+    --docs-page-color-bg__content-row--grey: hsla(0, 0%, 12%, 1);
+    --docs-page-color-bg__example-box: hsla(214, 13%, 18%, 1);
+    --docs-page-color-bg__graphic-btn: hsla(214, 13%, 8%, 1);
+    --docs-page-color-bg__graphic-btn-graphic: hsla(214, 13%, 14%, 1);
+
+    --docs-page-border__window-bar--top: hsla(0, 0%, 91%, 0.02);
+    --docs-page-border__window-bar--bottom: hsla(0, 0%, 88%, 0.12);
+    --docs-page-border__table: hsla(0, 0%, 100%, 0.2);
+}
 .docs-page {
     font-family: 'Roboto', sans-serif;
     font-weight: 400;
     line-height: 140%;
     margin: 0;
     padding: 0;
-    background-color: #f8f8f8;
-    color: #333;
+    background-color: var(--docs-page-color-bg-default);
     display: grid;
     grid-template-columns: auto 1fr;
     grid-template-rows: auto 1fr;
     height: 100vh;
 }
+
 .docs-page {
     --docs-page-color-primary: #1397B9;
     --docs-page-color-highlight: #33C5A0;
 }
 
+
+
+
 hr {
     border: transparent;
     border: 1px dotted rgba(128, 128, 128, 0.75);
@@ -168,10 +210,9 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
     text-decoration: underline;
 }
 .docs-page__header {
-    background: #5eadc8;
-    background: #22385a;
+    background: var(--docs-page-color-bg__header);
     color: white;
-    padding: 0 24px;
+    padding: 0 8px 0 24px;
     height: 64px;
     grid-column: 1 / 3;
     grid-row: 1 / 2;
@@ -180,6 +221,32 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
     box-shadow: 0 1px 6px rgba(0,0,0,0.2), 0 1px 1px rgba(0,0,0,0.12);
     z-index: 2;
 }
+.docs-page__header-button {
+    background: transparent;
+    color: white;
+    padding: 0;
+    height: 40px;
+    width: 40px;
+    border-radius: 999px;
+    margin-inline-start: 0px;
+    margin-inline-end: 8px;
+    display: flex;  
+    align-items: center;
+    justify-content: center;
+    opacity: 0.8;
+    transition: all 0.2s ease;
+}
+.docs-page__header-button i {
+    color: white !important;
+}
+.docs-page__header-button:hover {
+    background: hsla(0, 0%, 0%, 0.2);
+    opacity: 1;
+}
+.docs-page__header-button:active {
+    background: var(--sd-colour-interactive);
+    opacity: 1;
+}
 .docs-page__header-logo {
     height: 40px;
     width: 40px;
@@ -188,7 +255,8 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
     background-size: 100%;
 }
 .docs-page__header-nav {
-    margin-left: auto;
+    margin-inline-start: auto;
+    margin-inline-end: 16px;
     display: flex;
     flex-direction: row;
     align-items: stretch;
@@ -245,7 +313,7 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
     grid-column: 1 / 2;
     grid-row: 2 / 3;
     width: 280px;
-    background-color: #ebebeb;
+    background-color: var(--docs-page-color-bg__aside);
     overflow-y: auto;
 }
 .docs-page__sidebar.scroll {
@@ -257,6 +325,7 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
     grid-row: 2 / 3;
     overflow-y: auto;
     position: relative;
+    background-color: var(--docs-page-color-bg-00);
 }
 .docs-page__masthead {
     display: flex;
@@ -301,29 +370,74 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
 }
 .docs-page__nav-title {
     text-transform: uppercase;
-    color: #222;
+    color: var(--color-text);
     font-size: 12px;
     font-weight: 500;
     letter-spacing: 0.1em;
     display: inline-block;
-    margin-top: 20px;
-    margin-bottom: 6px;
-    padding-left: 20px;
+    margin-block-start: 20px;
+    margin-block-end: 6px;
+    padding-inline-start: 20px;
 }
 .docs-page__nav > li:first-child .docs-page__nav-title {
-    margin-top: 0;
+    margin-block-start: 0;
 }
 
 .docs-page__button-grid {
-    margin: 2.4rem 0;
+    margin-block-start: 2.4rem;
+    margin-block-end: 2.4rem;
     display: flex;
     flex-direction: row;
     align-items: center;
 }
+
+.docs-page__fla-button-container {
+    position: fixed;
+    top: 90px;
+    right:32px;
+    z-index: 10;
+    height: 4.8rem;
+    width: 4.8rem;
+}
+.docs-page__fla-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9999px;
+    cursor: pointer;
+    height: 4.8rem;
+    width: 4.8rem;
+    /* position: fixed;
+    top: 90px;
+    right:32px;
+    z-index: 10; */
+    /* left: calc(100vw - 380px); */
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 6px 24px rgba(0, 0, 0, 0.16);
+    transition: all 0.2s ease;
+    background-color: var(--sd-colour-background__base--00);
+}
+.docs-page__fla-button i[class^="icon-"] {
+    color: var(--color-text);
+    transition: all 0.2s ease;
+    opacity: 0.8;
+}
+.docs-page__fla-button:hover {
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16), 0 6px 32px rgba(0, 0, 0, 0.18);
+}
+.docs-page__fla-button:hover i[class^="icon-"] {
+    opacity: 1;
+}
+.docs-page__fla-button:active {
+    background-color: var(--docs-page-color-highlight);
+    box-shadow: 0 0px 2px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.24);
+}
+.docs-page__fla-button:active i[class^="icon-"] {
+    color: hsl(0, 0%, 100%);
+}
 .docs-page__graphic-btn {
     min-width: 240px;
     margin-right: 16px;
-    background-color: #fff;
+    background-color: var(--docs-page-color-bg__graphic-btn);
     box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
     transition: 0.2s ease-in-out;
     height: 72px;
@@ -342,7 +456,7 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
 .docs-page__graphic-btn-graphic {
     width: 56px;
     border-radius: 3px;
-    background: linear-gradient(180deg, rgba(233,249,245,1) 4%, rgba(200,231,238,1) 96%);
+    background: var(--docs-page-color-bg__graphic-btn-graphic);
     position: relative;
 }
 .docs-page__graphic-btn-graphic img {
@@ -363,7 +477,7 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
 .docs-page__small-text {
     font-size: 1.3rem;
     font-weight: 300;
-    color: #333;
+    color: var(--color-text-light);
     opacity: 0.7;
 }
 
@@ -372,37 +486,37 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
     font-size: 16px;
     line-height: 24px;
     font-weight: 300;
-    color: #444;
-    border-left: 4px solid transparent;
+    color: var(--color-text);
+    border-inline-start: 4px solid transparent;
 }
 .docs-page__nav-item a {
     font-size: 14px;
     line-height: 32px;
     display: block;
-    padding-left: 24px;
-    color: #444;
+    padding-inline-start: 24px;
+    color: var(--color-text-light);
     background-color: rgba(255, 255, 255, 0);
     cursor: pointer;
     text-decoration: none;
     transition: all ease-in-out 0.2s;
 }
 .docs-page__nav-item a:hover {
-    color: #333;
-    background-color: rgba(255, 255, 255, 0.4);
+    color: var(--color-text);
+    background-color: var(--docs-page-color-bg-00);
 }
 .docs-page__nav-item a:active {
-    color: #333;
-    background-color: rgba(94, 169, 200, 0.2);
+    color: var(--color-text-light);
+    background-color: var(--sd-colour-interactive--alpha-20);
 }
 
 .docs-page__nav-item.docs-page__nav-item--active {
-    border-color: rgba(94, 169, 200, 1);
-    background-color: rgba(255, 255, 255, 0.7);
+    border-color: var(--sd-colour-interactive);
+    background-color: var(--docs-page-color-bg-00);
     font-weight: 400;
 }
 
 .docs-page__nav-item.docs-page__nav-item--active a {
-    color: rgba(94, 169, 200, 1);
+    color: var(--sd-colour-interactive);
 }
 
 .docs-page__section {
@@ -433,9 +547,9 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
 }
 .docs-page__window-bar {
     padding: 10px;
-    border-top: 1px solid #eaeae9;
-    border-bottom: 1px solid #dfdfde;
-    background: #ebebeb;
+    border-top: 1px solid var(--docs-page-border__window-bar--top);
+    border-bottom: 1px solid var(--docs-page-border__window-bar--bottom);
+    background: var(--docs-page-color-bg__window-bar);
 }
 .docs-page__window-bar>a, .docs-page__window-bar>span {
     font-size: 16px;
@@ -483,15 +597,15 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
     border-radius: 4px;
 }
 .docs-page__content-row--white {
-    background: #fff;
+    background: var(--docs-page-color-bg__content-row--white);
 }
 .docs-page__content-row--gray {
-    background: #F2F2F2;
+    background: var(--docs-page-color-bg__content-row--grey);;
     padding: 10px;
 }
 .docs-page__code-markup {
     display: none;
-    background-color: #272822;
+    background-color: hsl(214, 13%, 10%);
     padding: 16px 16px 16px 36px;
     overflow-y: scroll;
 }
@@ -509,11 +623,14 @@ pre.prettyprint {
 
 .docs-page__paragraph code {
     font-size: 85%;
-    padding: 0.2em 0.4em;
-    background-color: rgba(0,0,0,0.07);
+    padding: 0 0.4em;
+    background-color: var(--sd-colour-interactive--alpha-20);
     border-radius: 3px;
     font-family: 'Source Code Pro', monospace;
     font-weight: 400;
+    line-height: inherit;
+    vertical-align: baseline;
+    color: var(--color-text);
 }
 
 .docs-page__unordered-list {
@@ -555,7 +672,7 @@ pre.prettyprint {
     padding: 20px;
 }
 .docs-page__code-example .flex-grid.flex-grid--boxed .flex-grid__item {
-    background-color: #fff !important;
+    background-color: var(--docs-page-color-bg-10) !important;
     border:none;
     border-radius: 2px;
     box-shadow: 0 1px 4px rgba(0,0,0,.12) !important;
@@ -565,6 +682,7 @@ pre.prettyprint {
     max-width: 1200px;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+    transition: all 0.2s ease;
 }
 .docs-page__icon-font-list li {
     display: flex;
@@ -577,12 +695,11 @@ pre.prettyprint {
     transition: all 0.2s ease-in-out;
 }
 .docs-page__icon-font-list li:hover {
-    box-shadow: 0 1px 6px rgba(0,0,0,.24);
+    box-shadow: 0 0 0 1px var(--sd-shadow-outline), 0 1px 2px hsla(0, 0%, 0%, 0.12), 0 1px 6px hsla(0, 0%, 0%, 0.24);
 }
 
 .docs-page__icon-font-list li i {
     margin-bottom: 8px;
-    color: #000;
 }
 
 .docs-page__container {
@@ -694,7 +811,7 @@ pre.prettyprint {
 }
 
 .docs-page__playground_picker {
-    text-align: right;
+    text-align: end;
 }
 
 .docs-page__playground_picker .dropdown__toggle {
@@ -713,9 +830,9 @@ pre.prettyprint {
 .docs-page__grid-page-example {
     position: relative;
     min-height: 600px;
-    background-color: rgb(239, 239, 239);
+    background-color: var(--sd-colour-background__main-list);
     overflow: hidden;
-    border: 1px solid rgb(218, 218, 218);
+    border: 1px solid var(--color-border-line--light);
     display: grid;
     grid-template-rows: auto 1fr;
     grid-template-columns: auto 1fr;
@@ -735,6 +852,13 @@ pre.prettyprint {
     grid-row: 2/3;
     grid-column: 2/3;
 }
+
+#scrollContainer {
+    overflow: scroll;
+    scroll-behavior: smooth;
+}
+
+.
 /* ---------------- COLOR SWATCHES ---------------- */
 
 .doc-swatches__grid {
@@ -777,7 +901,7 @@ pre.prettyprint {
 }
 
 .docs-page__example-box {
-    background-color: #fff;
+    background-color: var(--docs-page-color-bg__example-box);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -800,7 +924,7 @@ pre.prettyprint {
     font-size: 15px;
     font-weight: 300;
     line-height: 150%;
-    color: #646464;
+    color: var(--color-text-light);
 }
 .docs-page__color--primary {
     color: var(--docs-page-color-primary) !important;
@@ -825,22 +949,57 @@ doc-gif-img:hover img {
     cursor: pointer;
 }
 
-.docs-page__container table{
+.docs-page__container table {
     margin-bottom: 32px;
+    border-color: var(--docs-page-border__table) !important;
 }
-/* -------------- END COLOR SWATCHES -------------- */
+.docs-page__container table th,
+.docs-page__container table td {
+    border-color: var(--docs-page-border__table) !important;
+}
+
 
+/* -------------- END COLOR SWATCHES -------------- */
 /* -------------- PrismJS overrides -------------- */
+
 code[class*="language-"],
 pre[class*="language-"] {
     font-family: 'Source Code Pro', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
     font-size: 1.1em;
     border-radius: 0.4rem;
 }
+pre[class*="language-"] {
+    background: hsl(214, 13%, 8%);
+}
 
 /*// extra large screen media query /100em = 1600px/*/
 @media only screen and (min-width: 100em) {
     .docs-page__section {
         max-width: 80%;
     } 
-}
+}
+
+
+/* -------------- DOC PAGE SPECIFIC OVERRIDES -------------- */
+
+doc-react-playground {
+    display: contents;
+}
+
+.docs-page doc-react-playground .sd-main-content-grid {
+    grid-column: 2 / 3;
+    overflow: auto;
+}
+
+.docs-page .sd-editor-grid {
+    grid-row: 2 / 3;
+    grid-column: 2 / 3;
+    overflow-y: auto;
+}
+.docs-page doc-react-playground .sd-editor-grid {
+    grid-row: 2 / 3;
+    grid-column: 2 / 3;
+    overflow-y: auto;
+}
+
+/* ------------ END DOC PAGE SPECIFIC OVERRIDES ------------ */

package/examples/index.html

@@ -1,14 +1,11 @@
 <!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <title>Superdesk UI Framework</title>
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
-</head>
-
-<body>
-    <div class="docs-page" ng-app="ui-docs" doc-playground ng-view></div>
-</body>
-
+<html dir="auto" lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>Superdesk UI Framework</title>
+        <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    </head>
+    <body>
+        <div class="docs-page" ng-app="ui-docs" doc-playground ng-view></div>
+    </body>
 </html>

package/examples/index.js

@@ -336,6 +336,10 @@ export default angular.module('ui-docs', [
                 name: 'Master Desk',
                 page: 'master-desk.html'
             },
+            'editor-3-test': {
+                name: 'Editor grid',
+                page: 'editor-3-test.html'
+            },
         },
         // Publisher playgrounds
         publisher: {
@@ -386,6 +390,22 @@ export default angular.module('ui-docs', [
             'test-ground': {
                 name: 'Test Ground',
                 component: 'TestGround'
+            },
+            'ui-playground': {
+                name: 'UI',
+                component: 'UiPlayground'
+            },
+            'pagelayout-test': {
+                name: 'PageLayout Test',
+                component: 'PageLayoutTest'
+            },
+            'editor-test': {
+                name: 'Editor Layout Test',
+                component: 'EditorTest'
+            },
+            'personal-profile': {
+                name: 'Personal Profile',
+                component: 'PersonalProfile'
             }
         }
     }))

package/examples/pages/components/basic-grid.html

@@ -93,7 +93,7 @@
         <div class="docs-page__window-content">
             <div class="docs-page__code-example">
                 <p class="docs-page__paragraph">// Boxed grid example with six columns.</p>
-                <div class="flex-grid flex-grid--boxed flex-grid--wrap-items flex-grid--small-6">
+                <div class="flex-grid flex-grid--boxed flex-grid--wrap-items flex-grid--small-1 flex-grid--medium-3 flex-grid--large-4 flex-grid--xlarge-6">
                     <div class="flex-grid__item">1</div>
                     <div class="flex-grid__item">2</div>
                     <div class="flex-grid__item">3</div>

package/examples/pages/components/checkbox.html

@@ -45,7 +45,7 @@
                     <sd-check ng-model="def6" label-position="inside" data-icon="th-list">Button style with icon</sd-check>
                     <sd-check ng-model="def7" label-position="inside" data-icon="th" ng-checked="true">I have an icon!</sd-check>
                     <sd-check ng-model="def8" label-position="inside" data-icon="th-large">Yeah, me too!</sd-check>
-                    <sd-check ng-model="def9" data-icon="star">I have an icon :) </sd-check>
+                    <sd-check ng-model="def9" data-icon="star" disabled="disabled">I have an icon :) </sd-check>
                 </div>
             </div>
 

package/examples/pages/playgrounds/boxed-list.html

@@ -79,7 +79,7 @@
                         </div>
                     </li>
 
-                    <li class="boxed-list__item boxed-list__item--selcted boxed-list__item--clickable">
+                    <li class="boxed-list__item boxed-list__item--selected boxed-list__item--clickable">
                         <div class="boxed-list__item-media">
                             <figure class="avatar sd-margin--0 pink--600">mm</figure>
                         </div>

package/examples/pages/playgrounds/cards.html

@@ -2,10 +2,15 @@
     <a class="sd-top-menu__collapse-nav"><i class="icon-collapse icon--white"></i></a>
     <p class="sd-top-menu__header">Cards</p>
 </header>
-<main class="sd-page">
+<main class="sd-page" ng-init="darkUI = false" data-theme="{{darkUI ? 'dark-ui' : 'light-ui'}}">
     <section class="sd-page__main-content">
-        <div class="sd-page__header sd-page__header--white">
-            <h2 class="sd-page__page-heading">Card options</h2>
+        <div class="subnav">
+            <h2 class="subnav__page-title">Card options</h2>
+            <div class="button-group button-group--right">
+                <button class="sd-navbtn" ng-click="darkUI = !darkUI">
+                    <i class="icon-adjust"></i>
+                </button>
+            </div>
         </div>
         <div class="sd-page__content">
 
@@ -35,7 +40,7 @@
                 </div>
 
                 <div class="sd-card flex-grid__item">
-                    <div class="sd-card__header sd-card__header--white">
+                    <div class="sd-card__header sd-card__header--light">
                         <div class="sd-card__heading">Features Desk</div>
                         <a class="icn-btn sd-card__actions"><i class="icon-pencil"></i></a>
                     </div>

package/examples/pages/playgrounds/editor-3-test.html

@@ -0,0 +1,15 @@
+
+<div class="sd-padding--4">
+    <button class="btn btn--primary btn--loading" tabindex="0" aria-label="">
+        <div class="btn__state--loading">
+            <svg class="sd-spinner sd-spinner--mini" viewBox="0 0 48 48">
+                <circle class="sd-spinner__path" cx="24" cy="24" r="18" fill="none" stroke-width="6"></circle>
+            </svg>
+        </div>
+            primary
+    </button>
+</div>
+
+<svg class="sd-spinner sd-spinner sd-spinner--large" viewBox="0 0 48 48">
+    <circle class="sd-spinner__path" cx="24" cy="24" r="18" fill="none" stroke-width="6"></circle>
+</svg>

package/examples/pages/playgrounds/form-layout.html

@@ -16,13 +16,15 @@
             <div style="width: 70%; margin: 100px auto; max-width: 900px;" class="docs-page__code-window">
 
                 <div class="sd-form-element" style="padding: 30px;" data-theme="{{darkTheme ? 'dark-ui' : 'ligh-ui'}}">
-                    <div class="form__item">
-                        <div class="sd-input">
-                            <label class="sd-input__label">input field label 1</label>
-                            <input class="sd-input__input" type="text">
-                            <div class="sd-input__char-count">00/90</div>
-                            <div class="sd-input__message-box">
-                                <div class="sd-input__hint">Hendrerit in vulputate.</div>
+                    <div class="form__group">
+                        <div class="form__item">
+                            <div class="sd-input">
+                                <label class="sd-input__label">input field label 1</label>
+                                <input class="sd-input__input" type="text">
+                                <div class="sd-input__char-count">00/90</div>
+                                <div class="sd-input__message-box">
+                                    <div class="sd-input__hint">Hendrerit in vulputate.</div>
+                                </div>
                             </div>
                         </div>
                     </div>