Merge pull request #854 from fritzSF/develop

expand/collapse authoring button
superdesk · May 17, 2024 · 804b53f · 804b53f
2 parents f298a47 + 46ef6e2
commit 804b53f
Show file tree

Hide file tree

Showing 9 changed files with 102 additions and 4 deletions.
diff --git a/app/styles/_expand-button.scss b/app/styles/_expand-button.scss
@@ -0,0 +1,31 @@
+.expand-button {
+ --sd-btn-bg: var(--sd-colour-btn-bg-neutral);
+ --sd-btn-bg--hover: var(--sd-colour-btn-bg-neutral--hover);
+ --sd-btn-bg--active: var(--sd-colour-btn-bg-neutral--active);
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ height: 3.2rem;
+ transition: all 0.2s ease;
+ outline: none;
+ padding-inline: var(--space--0-5);
+ background-color: var(--sd-btn-bg);
+ border-radius: 0 var(--b-radius--medium) var(--b-radius--medium) 0;
+ opacity: 0.75;
+ color: var(--color-text);
+ [class^="icon-"], [class*=" icon-"] {
+ transition: transform 0.2s ease;
+ color: currentColor;
+ }
+ &:hover {
+ padding-inline: var(--space--1);
+ }
+ &:active {
+ opacity: 1;
+ }
+ &.expand-button--expanded {
+ [class^="icon-"], [class*=" icon-"] {
+ transform: rotate(180deg);
+ }
+ }
+}
diff --git a/app/styles/_helpers.scss b/app/styles/_helpers.scss
@@ -1402,6 +1402,9 @@ h6 {
 // ==================== TYPOGRAPHY =================== //
 
 // FONT SIZE
+.text-2xs {
+ font-size: calc(var(--text-size--base) * 1); // 12px;
+}
 .sd-font-size--x-small,
 .text-xs {
  font-size: calc(var(--text-size--base) * 1.2); // 12px;

diff --git a/app/styles/app.scss b/app/styles/app.scss
@@ -36,6 +36,7 @@
 @import 'table-list';
 @import 'hamburger';
 @import 'drag-handle';
+@import 'expand-button';
 
 // Interface elements
 @import 'interface-elements/side-panel';

diff --git a/app/styles/components/_subnav.scss b/app/styles/components/_subnav.scss
@@ -12,6 +12,7 @@
  align-items: center;
  color: $sd-text;
  flex-shrink: 0;
+ flex-grow: 1;
 
  .sd-check__group {
  padding: 0;

diff --git a/app/styles/design-tokens/_design-tokens-general.scss b/app/styles/design-tokens/_design-tokens-general.scss
@@ -62,6 +62,7 @@
 
  // TEXT SIZE
  --text-size--base: 1rem;
+ --text-size-xx-small: calc(var(--text-size--base) * 1); // 10px;
  --text-size-x-small: calc(var(--text-size--base) * 1.2); // 12px;
  --text-size-small: calc(var(--text-size--base) * 1.4); // 14px;
  --text-size-medium: calc(var(--text-size--base) * 1.6); // 16px;

diff --git a/examples/pages/components/utilities/TextUtilities.tsx b/examples/pages/components/utilities/TextUtilities.tsx
@@ -23,6 +23,10 @@ class TextUtilitiesDoc extends React.Component {
  </tr>
  </thead>
  <tbody>
+ <tr>
+ <td>text-2xs</td>
+ <td>{'font-size: var(--text-size-x-small);'} <span className="doc-text--highlight">/* 10px */</span></td>
+ </tr>
  <tr>
  <td>text-xs</td>
  <td>{'font-size: var(--text-size-x-small);'} <span className="doc-text--highlight">/* 12px */</span></td>

diff --git a/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx b/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ButtonGroup, Button, NavButton, SubNav, Input, IconButton, Divider, Tooltip, Select, Option, Text, SlidingToolbar, Container, Label, IconLabel } from '../../../../app-typescript/index';
+import { ButtonGroup, Button, NavButton, SubNav, Input, IconButton, Divider, Tooltip, Select, Option, Text, SlidingToolbar, Container, Label, IconLabel, Icon } from '../../../../app-typescript/index';
 import * as Layout from '../../../../app-typescript/components/Layouts';
 import * as Form from '../../../../app-typescript/components/Form';
 import * as Nav from '../../../../app-typescript/components/Navigation';
@@ -29,6 +29,7 @@ interface IState {
  array: any;
  inputValue: string;
  activeTab: string | null;
+ isExpanded: boolean;
 }
 
 export class RundownEditor extends React.Component<IProps, IState> {
@@ -117,6 +118,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
  },
  ],
  activeTab: null,
+ isExpanded: false,
  }
  this.handleTheme = this.handleTheme.bind(this);
  }
@@ -134,11 +136,24 @@ export class RundownEditor extends React.Component<IProps, IState> {
  item.status.push(status);
  }
  }
+
+ toggleExpand = () => {
+ this.setState(prevState => ({ isExpanded: !prevState.isExpanded }));
+ }
+
  render() {
  return (
  <Layout.LayoutContainer>
  <Layout.HeaderPanel>
  <SubNav>
+ <Tooltip text={this.state.isExpanded ? "Revert Authoring" : "Expand Authoring"} flow='right' appendToBody={true}>
+ <button 
+ className={`expand-button ${this.state.isExpanded ? "expand-button--expanded" : ""}`}
+ onClick={this.toggleExpand}
+ >
+ <Icon name='chevron-left-thin' />
+ </button>
+ </Tooltip>
  <ButtonGroup align='end'>
  <Button text="Cancel" onClick={()=> false} type="default" />
  <Button text="Save Rundown" onClick={()=> false} type="primary" />

diff --git a/examples/pages/playgrounds/react-playgrounds/TestGround.tsx b/examples/pages/playgrounds/react-playgrounds/TestGround.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as Components from './components/Index';
-import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, TreeSelect, DatePicker, ContentDivider, Select, Option, AvatarGroup, SvgIconIllustration, IllustrationButton } from '../../../../app-typescript/index';
+import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, TreeSelect, DatePicker, ContentDivider, Select, Option, AvatarGroup, SvgIconIllustration, IllustrationButton, SubNav, NavButton } from '../../../../app-typescript/index';
 import { IAvatarInGroup } from '../../../../app-typescript/components/avatar/avatar-group';
 import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
 
@@ -32,6 +32,7 @@ interface IState {
  value: any;
  valueS2: any;
  thisTheme: string;
+ isExpanded: boolean;
 }
 
 let options2 = [
@@ -73,6 +74,7 @@ export class TestGround extends React.Component<IProps, IState> {
  value: undefined,
  valueS2: undefined,
  thisTheme: 'light-ui',
+ isExpanded: false,
  }
  }
 
@@ -88,7 +90,11 @@ export class TestGround extends React.Component<IProps, IState> {
  this.setState( {
  thisTheme: this.state.thisTheme === 'light-ui' ? 'dark-ui' : 'light-ui',
  });
- };
+ };
+
+ toggleExpand = () => {
+ this.setState(prevState => ({ isExpanded: !prevState.isExpanded }));
+ }
 
  render() {
  const avatars: Array<IAvatarInGroup> = [
@@ -145,6 +151,42 @@ export class TestGround extends React.Component<IProps, IState> {
  <IconButton icon="adjust" ariaValue="Toggle theme" onClick={this.toggleTheme} toolTipFlow='left' />
  </ButtonGroup>
 
+ <hr />
+
+ <SubNav color='darker'>
+ <Tooltip text={this.state.isExpanded ? "Revert Authoring" : "Expand Authoring"} flow='right' appendToBody={true}>
+ <button 
+ className={`expand-button ${this.state.isExpanded ? "expand-button--expanded" : ""}`}
+ onClick={this.toggleExpand}
+ >
+ <Icon name='chevron-left-thin' />
+ </button>
+ </Tooltip>
+ <div className='text-2xs text-uppercase sd-display--flex ms-2 gap-0-5'>
+ <span className='font-medium'>News desk</span>
+ <span className='font-light text-color-subdued'>/</span>
+ <span className='text-color-muted'>Working stage</span>
+ </div>
+ <ButtonGroup align='end'>
+ <Button text="Cancel" onClick={()=> false} type="default" />
+ <Button text="Save" onClick={()=> false} type="primary" />
+ <Divider size="mini" />
+ <ButtonGroup subgroup={true} spaces="no-space">
+ <Tooltip text='Minimize' flow='left'>
+ <NavButton type='default' icon='minimize' iconSize='big' text='Minimize' onClick={()=> false} />
+ </Tooltip>
+ <Tooltip text='More actions' flow='left'>
+ <NavButton type='default' icon='dots-vertical' text='More actions' onClick={()=> false} />
+ </Tooltip>
+ <Tooltip text='Send to / Publish' flow='left'>
+ <NavButton type='highlight' icon='send-to' iconSize='big' text='Send to / Publish' onClick={()=> false} />
+ </Tooltip>
+ </ButtonGroup>
+ </ButtonGroup>
+ </SubNav>
+
+ <hr />
+
  <div className='sd-grid-list sd-grid-list--xx-small sd-grid-list--gap-s sd-grid-list--no-margin' style={{width:'290px'}}>
 
  <IllustrationButton text='Headlines' onClick={()=> false}>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "superdesk-ui-framework",
- "version": "3.1.6",
+ "version": "3.1.7",
  "license": "AGPL-3.0",
  "repository": {
  "type": "git",