superdesk-ui-framework 3.0.0-beta.0 → 3.0.1-beta.1

package/examples/css/docs-page.css

@@ -2,15 +2,17 @@
 @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:200,300,400&subset=latin-ext');
 
 :root {
-    color: hsla(214, 13%, 12%, 1);
+    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(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%);
 
@@ -25,12 +27,14 @@
     --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(0, 0%, 18%, 1);
-    --docs-page-color-bg__graphic-btn: hsla(0, 0%, 19%, 1);
-    --docs-page-color-bg__graphic-btn-graphic: linear-gradient(180deg, hsla(165, 57%, 95%, 0.1) 4%, hsla(191, 53%, 86%, 0.1) 96%);
+    --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);
@@ -206,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;
@@ -218,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;
@@ -226,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;
@@ -283,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 {
@@ -340,7 +370,7 @@ 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;
@@ -456,7 +486,7 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
     font-size: 16px;
     line-height: 24px;
     font-weight: 300;
-    color: #444;
+    color: var(--color-text);
     border-inline-start: 4px solid transparent;
 }
 .docs-page__nav-item a {
@@ -464,29 +494,29 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
     line-height: 32px;
     display: block;
     padding-inline-start: 24px;
-    color: #444;
+    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 {
@@ -575,7 +605,7 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
 }
 .docs-page__code-markup {
     display: none;
-    background-color: #272822;
+    background-color: hsl(214, 13%, 10%);
     padding: 16px 16px 16px 36px;
     overflow-y: scroll;
 }
@@ -593,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 {
@@ -649,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;
@@ -661,7 +695,7 @@ 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 {
@@ -818,6 +852,13 @@ pre.prettyprint {
     grid-row: 2/3;
     grid-column: 2/3;
 }
+
+#scrollContainer {
+    overflow: scroll;
+    scroll-behavior: smooth;
+}
+
+.
 /* ---------------- COLOR SWATCHES ---------------- */
 
 .doc-swatches__grid {
@@ -883,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;
@@ -916,19 +957,49 @@ doc-gif-img:hover img {
 .docs-page__container table td {
     border-color: var(--docs-page-border__table) !important;
 }
-/* -------------- END COLOR SWATCHES -------------- */
 
+
+/* -------------- 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.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: {
@@ -390,6 +394,18 @@ export default angular.module('ui-docs', [
             '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/components/modals.html

@@ -20,6 +20,7 @@
                     <div class="modal__body">
                         <p>This is sample message inside modal!</p>
                         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
+                        <button class="btn" ng-click="openModal('modalActive6')">Open modal inside modal</button>
                     </div>
                     <div class="modal__footer">
                         <button class="btn" ng-click="closeModal('modalActive')">Cancel</button>

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>

package/examples/pages/playgrounds/master-desk.html

@@ -40,10 +40,8 @@
                 </ul>
             </div>
         </div>
-
-
-
     </header>
+    
     <section class="sd-content sd-content-wrapper">
         <div class="sd-sidebar-menu sd-content-wrapper__left-tabs">
             <ul class="authoring-active">