superdesk-ui-framework 3.1.6 → 3.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app/styles/_expand-button.scss +31 -0
- package/app/styles/_helpers.scss +3 -0
- package/app/styles/app.scss +1 -0
- package/app/styles/components/_subnav.scss +1 -0
- package/app/styles/design-tokens/_design-tokens-general.scss +1 -0
- package/dist/components/utilities/TextUtilities.tsx +4 -0
- package/dist/examples.bundle.js +39 -1
- package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +16 -1
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +44 -2
- package/dist/superdesk-ui.bundle.css +31 -1
- package/examples/pages/components/utilities/TextUtilities.tsx +4 -0
- package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +16 -1
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +44 -2
- package/package.json +1 -1
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
.expand-button {
|
|
2
|
+
--sd-btn-bg: var(--sd-colour-btn-bg-neutral);
|
|
3
|
+
--sd-btn-bg--hover: var(--sd-colour-btn-bg-neutral--hover);
|
|
4
|
+
--sd-btn-bg--active: var(--sd-colour-btn-bg-neutral--active);
|
|
5
|
+
display: inline-flex;
|
|
6
|
+
justify-content: center;
|
|
7
|
+
align-items: center;
|
|
8
|
+
height: 3.2rem;
|
|
9
|
+
transition: all 0.2s ease;
|
|
10
|
+
outline: none;
|
|
11
|
+
padding-inline: var(--space--0-5);
|
|
12
|
+
background-color: var(--sd-btn-bg);
|
|
13
|
+
border-radius: 0 var(--b-radius--medium) var(--b-radius--medium) 0;
|
|
14
|
+
opacity: 0.75;
|
|
15
|
+
color: var(--color-text);
|
|
16
|
+
[class^="icon-"], [class*=" icon-"] {
|
|
17
|
+
transition: transform 0.2s ease;
|
|
18
|
+
color: currentColor;
|
|
19
|
+
}
|
|
20
|
+
&:hover {
|
|
21
|
+
padding-inline: var(--space--1);
|
|
22
|
+
}
|
|
23
|
+
&:active {
|
|
24
|
+
opacity: 1;
|
|
25
|
+
}
|
|
26
|
+
&.expand-button--expanded {
|
|
27
|
+
[class^="icon-"], [class*=" icon-"] {
|
|
28
|
+
transform: rotate(180deg);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
package/app/styles/_helpers.scss
CHANGED
|
@@ -1402,6 +1402,9 @@ h6 {
|
|
|
1402
1402
|
// ==================== TYPOGRAPHY =================== //
|
|
1403
1403
|
|
|
1404
1404
|
// FONT SIZE
|
|
1405
|
+
.text-2xs {
|
|
1406
|
+
font-size: calc(var(--text-size--base) * 1); // 12px;
|
|
1407
|
+
}
|
|
1405
1408
|
.sd-font-size--x-small,
|
|
1406
1409
|
.text-xs {
|
|
1407
1410
|
font-size: calc(var(--text-size--base) * 1.2); // 12px;
|
package/app/styles/app.scss
CHANGED
|
@@ -62,6 +62,7 @@
|
|
|
62
62
|
|
|
63
63
|
// TEXT SIZE
|
|
64
64
|
--text-size--base: 1rem;
|
|
65
|
+
--text-size-xx-small: calc(var(--text-size--base) * 1); // 10px;
|
|
65
66
|
--text-size-x-small: calc(var(--text-size--base) * 1.2); // 12px;
|
|
66
67
|
--text-size-small: calc(var(--text-size--base) * 1.4); // 14px;
|
|
67
68
|
--text-size-medium: calc(var(--text-size--base) * 1.6); // 16px;
|
|
@@ -23,6 +23,10 @@ class TextUtilitiesDoc extends React.Component {
|
|
|
23
23
|
</tr>
|
|
24
24
|
</thead>
|
|
25
25
|
<tbody>
|
|
26
|
+
<tr>
|
|
27
|
+
<td>text-2xs</td>
|
|
28
|
+
<td>{'font-size: var(--text-size-x-small);'} <span className="doc-text--highlight">/* 10px */</span></td>
|
|
29
|
+
</tr>
|
|
26
30
|
<tr>
|
|
27
31
|
<td>text-xs</td>
|
|
28
32
|
<td>{'font-size: var(--text-size-x-small);'} <span className="doc-text--highlight">/* 12px */</span></td>
|
package/dist/examples.bundle.js
CHANGED
|
@@ -158040,6 +158040,9 @@ var RundownEditor = /** @class */ (function (_super) {
|
|
|
158040
158040
|
__extends(RundownEditor, _super);
|
|
158041
158041
|
function RundownEditor(props) {
|
|
158042
158042
|
var _this = _super.call(this, props) || this;
|
|
158043
|
+
_this.toggleExpand = function () {
|
|
158044
|
+
_this.setState(function (prevState) { return ({ isExpanded: !prevState.isExpanded }); });
|
|
158045
|
+
};
|
|
158043
158046
|
_this.state = {
|
|
158044
158047
|
theme: 'light',
|
|
158045
158048
|
itemType: 'itemtype01',
|
|
@@ -158113,6 +158116,7 @@ var RundownEditor = /** @class */ (function (_super) {
|
|
|
158113
158116
|
},
|
|
158114
158117
|
],
|
|
158115
158118
|
activeTab: null,
|
|
158119
|
+
isExpanded: false,
|
|
158116
158120
|
};
|
|
158117
158121
|
_this.handleTheme = _this.handleTheme.bind(_this);
|
|
158118
158122
|
return _this;
|
|
@@ -158135,6 +158139,9 @@ var RundownEditor = /** @class */ (function (_super) {
|
|
|
158135
158139
|
return (React.createElement(Layout.LayoutContainer, null,
|
|
158136
158140
|
React.createElement(Layout.HeaderPanel, null,
|
|
158137
158141
|
React.createElement(index_1.SubNav, null,
|
|
158142
|
+
React.createElement(index_1.Tooltip, { text: this.state.isExpanded ? "Revert Authoring" : "Expand Authoring", flow: 'right', appendToBody: true },
|
|
158143
|
+
React.createElement("button", { className: "expand-button ".concat(this.state.isExpanded ? "expand-button--expanded" : ""), onClick: this.toggleExpand },
|
|
158144
|
+
React.createElement(index_1.Icon, { name: 'chevron-left-thin' }))),
|
|
158138
158145
|
React.createElement(index_1.ButtonGroup, { align: 'end' },
|
|
158139
158146
|
React.createElement(index_1.Button, { text: "Cancel", onClick: function () { return false; }, type: "default" }),
|
|
158140
158147
|
React.createElement(index_1.Button, { text: "Save Rundown", onClick: function () { return false; }, type: "primary" }),
|
|
@@ -177041,6 +177048,9 @@ var TestGround = /** @class */ (function (_super) {
|
|
|
177041
177048
|
thisTheme: _this.state.thisTheme === 'light-ui' ? 'dark-ui' : 'light-ui',
|
|
177042
177049
|
});
|
|
177043
177050
|
};
|
|
177051
|
+
_this.toggleExpand = function () {
|
|
177052
|
+
_this.setState(function (prevState) { return ({ isExpanded: !prevState.isExpanded }); });
|
|
177053
|
+
};
|
|
177044
177054
|
_this.state = {
|
|
177045
177055
|
itemType: 'itemtype01',
|
|
177046
177056
|
itemSelected1: false,
|
|
@@ -177065,6 +177075,7 @@ var TestGround = /** @class */ (function (_super) {
|
|
|
177065
177075
|
value: undefined,
|
|
177066
177076
|
valueS2: undefined,
|
|
177067
177077
|
thisTheme: 'light-ui',
|
|
177078
|
+
isExpanded: false,
|
|
177068
177079
|
};
|
|
177069
177080
|
return _this;
|
|
177070
177081
|
}
|
|
@@ -177118,6 +177129,27 @@ var TestGround = /** @class */ (function (_super) {
|
|
|
177118
177129
|
React.createElement(Components.MainPanel, null,
|
|
177119
177130
|
React.createElement(index_1.ButtonGroup, { align: 'end' },
|
|
177120
177131
|
React.createElement(index_1.IconButton, { icon: "adjust", ariaValue: "Toggle theme", onClick: this.toggleTheme, toolTipFlow: 'left' })),
|
|
177132
|
+
React.createElement("hr", null),
|
|
177133
|
+
React.createElement(index_1.SubNav, { color: 'darker' },
|
|
177134
|
+
React.createElement(index_1.Tooltip, { text: this.state.isExpanded ? "Revert Authoring" : "Expand Authoring", flow: 'right', appendToBody: true },
|
|
177135
|
+
React.createElement("button", { className: "expand-button ".concat(this.state.isExpanded ? "expand-button--expanded" : ""), onClick: this.toggleExpand },
|
|
177136
|
+
React.createElement(index_1.Icon, { name: 'chevron-left-thin' }))),
|
|
177137
|
+
React.createElement("div", { className: 'text-2xs text-uppercase sd-display--flex ms-2 gap-0-5' },
|
|
177138
|
+
React.createElement("span", { className: 'font-medium' }, "News desk"),
|
|
177139
|
+
React.createElement("span", { className: 'font-light text-color-subdued' }, "/"),
|
|
177140
|
+
React.createElement("span", { className: 'text-color-muted' }, "Working stage")),
|
|
177141
|
+
React.createElement(index_1.ButtonGroup, { align: 'end' },
|
|
177142
|
+
React.createElement(index_1.Button, { text: "Cancel", onClick: function () { return false; }, type: "default" }),
|
|
177143
|
+
React.createElement(index_1.Button, { text: "Save", onClick: function () { return false; }, type: "primary" }),
|
|
177144
|
+
React.createElement(index_1.Divider, { size: "mini" }),
|
|
177145
|
+
React.createElement(index_1.ButtonGroup, { subgroup: true, spaces: "no-space" },
|
|
177146
|
+
React.createElement(index_1.Tooltip, { text: 'Minimize', flow: 'left' },
|
|
177147
|
+
React.createElement(index_1.NavButton, { type: 'default', icon: 'minimize', iconSize: 'big', text: 'Minimize', onClick: function () { return false; } })),
|
|
177148
|
+
React.createElement(index_1.Tooltip, { text: 'More actions', flow: 'left' },
|
|
177149
|
+
React.createElement(index_1.NavButton, { type: 'default', icon: 'dots-vertical', text: 'More actions', onClick: function () { return false; } })),
|
|
177150
|
+
React.createElement(index_1.Tooltip, { text: 'Send to / Publish', flow: 'left' },
|
|
177151
|
+
React.createElement(index_1.NavButton, { type: 'highlight', icon: 'send-to', iconSize: 'big', text: 'Send to / Publish', onClick: function () { return false; } }))))),
|
|
177152
|
+
React.createElement("hr", null),
|
|
177121
177153
|
React.createElement("div", { className: 'sd-grid-list sd-grid-list--xx-small sd-grid-list--gap-s sd-grid-list--no-margin', style: { width: '290px' } },
|
|
177122
177154
|
React.createElement(index_1.IllustrationButton, { text: 'Headlines', onClick: function () { return false; } },
|
|
177123
177155
|
React.createElement(index_1.SvgIconIllustration, { illustration: 'headlines' })),
|
|
@@ -182472,6 +182504,12 @@ var TextUtilitiesDoc = /** @class */ (function (_super) {
|
|
|
182472
182504
|
React.createElement("th", null, "Class"),
|
|
182473
182505
|
React.createElement("th", null, "Properties"))),
|
|
182474
182506
|
React.createElement("tbody", null,
|
|
182507
|
+
React.createElement("tr", null,
|
|
182508
|
+
React.createElement("td", null, "text-2xs"),
|
|
182509
|
+
React.createElement("td", null,
|
|
182510
|
+
'font-size: var(--text-size-x-small);',
|
|
182511
|
+
" ",
|
|
182512
|
+
React.createElement("span", { className: "doc-text--highlight" }, "/* 10px */"))),
|
|
182475
182513
|
React.createElement("tr", null,
|
|
182476
182514
|
React.createElement("td", null, "text-xs"),
|
|
182477
182515
|
React.createElement("td", null,
|
|
@@ -183022,7 +183060,7 @@ exports.ThreePaneLayoutPattern = ThreePaneLayoutPattern;
|
|
|
183022
183060
|
/* 921 */
|
|
183023
183061
|
/***/ (function(module, exports) {
|
|
183024
183062
|
|
|
183025
|
-
module.exports = {"name":"superdesk-ui-framework","version":"3.1.
|
|
183063
|
+
module.exports = {"name":"superdesk-ui-framework","version":"3.1.7","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@popperjs/core":"^2.4.0","@superdesk/common":"0.0.28","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-scrollspy":"^3.4.3"}}
|
|
183026
183064
|
|
|
183027
183065
|
/***/ }),
|
|
183028
183066
|
/* 922 */
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { ButtonGroup, Button, NavButton, SubNav, Input, IconButton, Divider, Tooltip, Select, Option, Text, SlidingToolbar, Container, Label, IconLabel } from '../../../../app-typescript/index';
|
|
2
|
+
import { ButtonGroup, Button, NavButton, SubNav, Input, IconButton, Divider, Tooltip, Select, Option, Text, SlidingToolbar, Container, Label, IconLabel, Icon } from '../../../../app-typescript/index';
|
|
3
3
|
import * as Layout from '../../../../app-typescript/components/Layouts';
|
|
4
4
|
import * as Form from '../../../../app-typescript/components/Form';
|
|
5
5
|
import * as Nav from '../../../../app-typescript/components/Navigation';
|
|
@@ -29,6 +29,7 @@ interface IState {
|
|
|
29
29
|
array: any;
|
|
30
30
|
inputValue: string;
|
|
31
31
|
activeTab: string | null;
|
|
32
|
+
isExpanded: boolean;
|
|
32
33
|
}
|
|
33
34
|
|
|
34
35
|
export class RundownEditor extends React.Component<IProps, IState> {
|
|
@@ -117,6 +118,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
|
117
118
|
},
|
|
118
119
|
],
|
|
119
120
|
activeTab: null,
|
|
121
|
+
isExpanded: false,
|
|
120
122
|
}
|
|
121
123
|
this.handleTheme = this.handleTheme.bind(this);
|
|
122
124
|
}
|
|
@@ -134,11 +136,24 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
|
134
136
|
item.status.push(status);
|
|
135
137
|
}
|
|
136
138
|
}
|
|
139
|
+
|
|
140
|
+
toggleExpand = () => {
|
|
141
|
+
this.setState(prevState => ({ isExpanded: !prevState.isExpanded }));
|
|
142
|
+
}
|
|
143
|
+
|
|
137
144
|
render() {
|
|
138
145
|
return (
|
|
139
146
|
<Layout.LayoutContainer>
|
|
140
147
|
<Layout.HeaderPanel>
|
|
141
148
|
<SubNav>
|
|
149
|
+
<Tooltip text={this.state.isExpanded ? "Revert Authoring" : "Expand Authoring"} flow='right' appendToBody={true}>
|
|
150
|
+
<button
|
|
151
|
+
className={`expand-button ${this.state.isExpanded ? "expand-button--expanded" : ""}`}
|
|
152
|
+
onClick={this.toggleExpand}
|
|
153
|
+
>
|
|
154
|
+
<Icon name='chevron-left-thin' />
|
|
155
|
+
</button>
|
|
156
|
+
</Tooltip>
|
|
142
157
|
<ButtonGroup align='end'>
|
|
143
158
|
<Button text="Cancel" onClick={()=> false} type="default" />
|
|
144
159
|
<Button text="Save Rundown" onClick={()=> false} type="primary" />
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import * as Components from './components/Index';
|
|
3
|
-
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';
|
|
3
|
+
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';
|
|
4
4
|
import { IAvatarInGroup } from '../../../../app-typescript/components/avatar/avatar-group';
|
|
5
5
|
import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
|
|
6
6
|
|
|
@@ -32,6 +32,7 @@ interface IState {
|
|
|
32
32
|
value: any;
|
|
33
33
|
valueS2: any;
|
|
34
34
|
thisTheme: string;
|
|
35
|
+
isExpanded: boolean;
|
|
35
36
|
}
|
|
36
37
|
|
|
37
38
|
let options2 = [
|
|
@@ -73,6 +74,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
73
74
|
value: undefined,
|
|
74
75
|
valueS2: undefined,
|
|
75
76
|
thisTheme: 'light-ui',
|
|
77
|
+
isExpanded: false,
|
|
76
78
|
}
|
|
77
79
|
}
|
|
78
80
|
|
|
@@ -88,7 +90,11 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
88
90
|
this.setState( {
|
|
89
91
|
thisTheme: this.state.thisTheme === 'light-ui' ? 'dark-ui' : 'light-ui',
|
|
90
92
|
});
|
|
91
|
-
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
toggleExpand = () => {
|
|
96
|
+
this.setState(prevState => ({ isExpanded: !prevState.isExpanded }));
|
|
97
|
+
}
|
|
92
98
|
|
|
93
99
|
render() {
|
|
94
100
|
const avatars: Array<IAvatarInGroup> = [
|
|
@@ -145,6 +151,42 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
145
151
|
<IconButton icon="adjust" ariaValue="Toggle theme" onClick={this.toggleTheme} toolTipFlow='left' />
|
|
146
152
|
</ButtonGroup>
|
|
147
153
|
|
|
154
|
+
<hr />
|
|
155
|
+
|
|
156
|
+
<SubNav color='darker'>
|
|
157
|
+
<Tooltip text={this.state.isExpanded ? "Revert Authoring" : "Expand Authoring"} flow='right' appendToBody={true}>
|
|
158
|
+
<button
|
|
159
|
+
className={`expand-button ${this.state.isExpanded ? "expand-button--expanded" : ""}`}
|
|
160
|
+
onClick={this.toggleExpand}
|
|
161
|
+
>
|
|
162
|
+
<Icon name='chevron-left-thin' />
|
|
163
|
+
</button>
|
|
164
|
+
</Tooltip>
|
|
165
|
+
<div className='text-2xs text-uppercase sd-display--flex ms-2 gap-0-5'>
|
|
166
|
+
<span className='font-medium'>News desk</span>
|
|
167
|
+
<span className='font-light text-color-subdued'>/</span>
|
|
168
|
+
<span className='text-color-muted'>Working stage</span>
|
|
169
|
+
</div>
|
|
170
|
+
<ButtonGroup align='end'>
|
|
171
|
+
<Button text="Cancel" onClick={()=> false} type="default" />
|
|
172
|
+
<Button text="Save" onClick={()=> false} type="primary" />
|
|
173
|
+
<Divider size="mini" />
|
|
174
|
+
<ButtonGroup subgroup={true} spaces="no-space">
|
|
175
|
+
<Tooltip text='Minimize' flow='left'>
|
|
176
|
+
<NavButton type='default' icon='minimize' iconSize='big' text='Minimize' onClick={()=> false} />
|
|
177
|
+
</Tooltip>
|
|
178
|
+
<Tooltip text='More actions' flow='left'>
|
|
179
|
+
<NavButton type='default' icon='dots-vertical' text='More actions' onClick={()=> false} />
|
|
180
|
+
</Tooltip>
|
|
181
|
+
<Tooltip text='Send to / Publish' flow='left'>
|
|
182
|
+
<NavButton type='highlight' icon='send-to' iconSize='big' text='Send to / Publish' onClick={()=> false} />
|
|
183
|
+
</Tooltip>
|
|
184
|
+
</ButtonGroup>
|
|
185
|
+
</ButtonGroup>
|
|
186
|
+
</SubNav>
|
|
187
|
+
|
|
188
|
+
<hr />
|
|
189
|
+
|
|
148
190
|
<div className='sd-grid-list sd-grid-list--xx-small sd-grid-list--gap-s sd-grid-list--no-margin' style={{width:'290px'}}>
|
|
149
191
|
|
|
150
192
|
<IllustrationButton text='Headlines' onClick={()=> false}>
|
|
@@ -11698,6 +11698,7 @@
|
|
|
11698
11698
|
--width__modal--large: 80rem;
|
|
11699
11699
|
--width__modal--x-large: 80vw;
|
|
11700
11700
|
--text-size--base: 1rem;
|
|
11701
|
+
--text-size-xx-small: calc(var(--text-size--base) * 1);
|
|
11701
11702
|
--text-size-x-small: calc(var(--text-size--base) * 1.2);
|
|
11702
11703
|
--text-size-small: calc(var(--text-size--base) * 1.4);
|
|
11703
11704
|
--text-size-medium: calc(var(--text-size--base) * 1.6);
|
|
@@ -18162,6 +18163,9 @@ h6 {
|
|
|
18162
18163
|
.sd-border-width--3 {
|
|
18163
18164
|
border-width: 3px; }
|
|
18164
18165
|
|
|
18166
|
+
.text-2xs {
|
|
18167
|
+
font-size: calc(var(--text-size--base) * 1); }
|
|
18168
|
+
|
|
18165
18169
|
.sd-font-size--x-small,
|
|
18166
18170
|
.text-xs {
|
|
18167
18171
|
font-size: calc(var(--text-size--base) * 1.2); }
|
|
@@ -38445,6 +38449,31 @@ input.sd-inset-search__input {
|
|
|
38445
38449
|
background-color: currentColor;
|
|
38446
38450
|
margin-block: auto; }
|
|
38447
38451
|
|
|
38452
|
+
.expand-button {
|
|
38453
|
+
--sd-btn-bg: var(--sd-colour-btn-bg-neutral);
|
|
38454
|
+
--sd-btn-bg--hover: var(--sd-colour-btn-bg-neutral--hover);
|
|
38455
|
+
--sd-btn-bg--active: var(--sd-colour-btn-bg-neutral--active);
|
|
38456
|
+
display: inline-flex;
|
|
38457
|
+
justify-content: center;
|
|
38458
|
+
align-items: center;
|
|
38459
|
+
height: 3.2rem;
|
|
38460
|
+
transition: all 0.2s ease;
|
|
38461
|
+
outline: none;
|
|
38462
|
+
padding-inline: var(--space--0-5);
|
|
38463
|
+
background-color: var(--sd-btn-bg);
|
|
38464
|
+
border-radius: 0 var(--b-radius--medium) var(--b-radius--medium) 0;
|
|
38465
|
+
opacity: 0.75;
|
|
38466
|
+
color: var(--color-text); }
|
|
38467
|
+
.expand-button [class^="icon-"], .expand-button [class*=" icon-"] {
|
|
38468
|
+
transition: transform 0.2s ease;
|
|
38469
|
+
color: currentColor; }
|
|
38470
|
+
.expand-button:hover {
|
|
38471
|
+
padding-inline: var(--space--1); }
|
|
38472
|
+
.expand-button:active {
|
|
38473
|
+
opacity: 1; }
|
|
38474
|
+
.expand-button.expand-button--expanded [class^="icon-"], .expand-button.expand-button--expanded [class*=" icon-"] {
|
|
38475
|
+
transform: rotate(180deg); }
|
|
38476
|
+
|
|
38448
38477
|
.side-panel {
|
|
38449
38478
|
margin: 0;
|
|
38450
38479
|
display: grid;
|
|
@@ -47859,7 +47888,8 @@ textarea.sd-media-carousel__media-title {
|
|
|
47859
47888
|
z-index: 3;
|
|
47860
47889
|
align-items: center;
|
|
47861
47890
|
color: var(--color-text);
|
|
47862
|
-
flex-shrink: 0;
|
|
47891
|
+
flex-shrink: 0;
|
|
47892
|
+
flex-grow: 1; }
|
|
47863
47893
|
.subnav .sd-check__group {
|
|
47864
47894
|
padding: 0;
|
|
47865
47895
|
display: flex;
|
|
@@ -23,6 +23,10 @@ class TextUtilitiesDoc extends React.Component {
|
|
|
23
23
|
</tr>
|
|
24
24
|
</thead>
|
|
25
25
|
<tbody>
|
|
26
|
+
<tr>
|
|
27
|
+
<td>text-2xs</td>
|
|
28
|
+
<td>{'font-size: var(--text-size-x-small);'} <span className="doc-text--highlight">/* 10px */</span></td>
|
|
29
|
+
</tr>
|
|
26
30
|
<tr>
|
|
27
31
|
<td>text-xs</td>
|
|
28
32
|
<td>{'font-size: var(--text-size-x-small);'} <span className="doc-text--highlight">/* 12px */</span></td>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { ButtonGroup, Button, NavButton, SubNav, Input, IconButton, Divider, Tooltip, Select, Option, Text, SlidingToolbar, Container, Label, IconLabel } from '../../../../app-typescript/index';
|
|
2
|
+
import { ButtonGroup, Button, NavButton, SubNav, Input, IconButton, Divider, Tooltip, Select, Option, Text, SlidingToolbar, Container, Label, IconLabel, Icon } from '../../../../app-typescript/index';
|
|
3
3
|
import * as Layout from '../../../../app-typescript/components/Layouts';
|
|
4
4
|
import * as Form from '../../../../app-typescript/components/Form';
|
|
5
5
|
import * as Nav from '../../../../app-typescript/components/Navigation';
|
|
@@ -29,6 +29,7 @@ interface IState {
|
|
|
29
29
|
array: any;
|
|
30
30
|
inputValue: string;
|
|
31
31
|
activeTab: string | null;
|
|
32
|
+
isExpanded: boolean;
|
|
32
33
|
}
|
|
33
34
|
|
|
34
35
|
export class RundownEditor extends React.Component<IProps, IState> {
|
|
@@ -117,6 +118,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
|
117
118
|
},
|
|
118
119
|
],
|
|
119
120
|
activeTab: null,
|
|
121
|
+
isExpanded: false,
|
|
120
122
|
}
|
|
121
123
|
this.handleTheme = this.handleTheme.bind(this);
|
|
122
124
|
}
|
|
@@ -134,11 +136,24 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
|
134
136
|
item.status.push(status);
|
|
135
137
|
}
|
|
136
138
|
}
|
|
139
|
+
|
|
140
|
+
toggleExpand = () => {
|
|
141
|
+
this.setState(prevState => ({ isExpanded: !prevState.isExpanded }));
|
|
142
|
+
}
|
|
143
|
+
|
|
137
144
|
render() {
|
|
138
145
|
return (
|
|
139
146
|
<Layout.LayoutContainer>
|
|
140
147
|
<Layout.HeaderPanel>
|
|
141
148
|
<SubNav>
|
|
149
|
+
<Tooltip text={this.state.isExpanded ? "Revert Authoring" : "Expand Authoring"} flow='right' appendToBody={true}>
|
|
150
|
+
<button
|
|
151
|
+
className={`expand-button ${this.state.isExpanded ? "expand-button--expanded" : ""}`}
|
|
152
|
+
onClick={this.toggleExpand}
|
|
153
|
+
>
|
|
154
|
+
<Icon name='chevron-left-thin' />
|
|
155
|
+
</button>
|
|
156
|
+
</Tooltip>
|
|
142
157
|
<ButtonGroup align='end'>
|
|
143
158
|
<Button text="Cancel" onClick={()=> false} type="default" />
|
|
144
159
|
<Button text="Save Rundown" onClick={()=> false} type="primary" />
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import * as Components from './components/Index';
|
|
3
|
-
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';
|
|
3
|
+
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';
|
|
4
4
|
import { IAvatarInGroup } from '../../../../app-typescript/components/avatar/avatar-group';
|
|
5
5
|
import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
|
|
6
6
|
|
|
@@ -32,6 +32,7 @@ interface IState {
|
|
|
32
32
|
value: any;
|
|
33
33
|
valueS2: any;
|
|
34
34
|
thisTheme: string;
|
|
35
|
+
isExpanded: boolean;
|
|
35
36
|
}
|
|
36
37
|
|
|
37
38
|
let options2 = [
|
|
@@ -73,6 +74,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
73
74
|
value: undefined,
|
|
74
75
|
valueS2: undefined,
|
|
75
76
|
thisTheme: 'light-ui',
|
|
77
|
+
isExpanded: false,
|
|
76
78
|
}
|
|
77
79
|
}
|
|
78
80
|
|
|
@@ -88,7 +90,11 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
88
90
|
this.setState( {
|
|
89
91
|
thisTheme: this.state.thisTheme === 'light-ui' ? 'dark-ui' : 'light-ui',
|
|
90
92
|
});
|
|
91
|
-
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
toggleExpand = () => {
|
|
96
|
+
this.setState(prevState => ({ isExpanded: !prevState.isExpanded }));
|
|
97
|
+
}
|
|
92
98
|
|
|
93
99
|
render() {
|
|
94
100
|
const avatars: Array<IAvatarInGroup> = [
|
|
@@ -145,6 +151,42 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
145
151
|
<IconButton icon="adjust" ariaValue="Toggle theme" onClick={this.toggleTheme} toolTipFlow='left' />
|
|
146
152
|
</ButtonGroup>
|
|
147
153
|
|
|
154
|
+
<hr />
|
|
155
|
+
|
|
156
|
+
<SubNav color='darker'>
|
|
157
|
+
<Tooltip text={this.state.isExpanded ? "Revert Authoring" : "Expand Authoring"} flow='right' appendToBody={true}>
|
|
158
|
+
<button
|
|
159
|
+
className={`expand-button ${this.state.isExpanded ? "expand-button--expanded" : ""}`}
|
|
160
|
+
onClick={this.toggleExpand}
|
|
161
|
+
>
|
|
162
|
+
<Icon name='chevron-left-thin' />
|
|
163
|
+
</button>
|
|
164
|
+
</Tooltip>
|
|
165
|
+
<div className='text-2xs text-uppercase sd-display--flex ms-2 gap-0-5'>
|
|
166
|
+
<span className='font-medium'>News desk</span>
|
|
167
|
+
<span className='font-light text-color-subdued'>/</span>
|
|
168
|
+
<span className='text-color-muted'>Working stage</span>
|
|
169
|
+
</div>
|
|
170
|
+
<ButtonGroup align='end'>
|
|
171
|
+
<Button text="Cancel" onClick={()=> false} type="default" />
|
|
172
|
+
<Button text="Save" onClick={()=> false} type="primary" />
|
|
173
|
+
<Divider size="mini" />
|
|
174
|
+
<ButtonGroup subgroup={true} spaces="no-space">
|
|
175
|
+
<Tooltip text='Minimize' flow='left'>
|
|
176
|
+
<NavButton type='default' icon='minimize' iconSize='big' text='Minimize' onClick={()=> false} />
|
|
177
|
+
</Tooltip>
|
|
178
|
+
<Tooltip text='More actions' flow='left'>
|
|
179
|
+
<NavButton type='default' icon='dots-vertical' text='More actions' onClick={()=> false} />
|
|
180
|
+
</Tooltip>
|
|
181
|
+
<Tooltip text='Send to / Publish' flow='left'>
|
|
182
|
+
<NavButton type='highlight' icon='send-to' iconSize='big' text='Send to / Publish' onClick={()=> false} />
|
|
183
|
+
</Tooltip>
|
|
184
|
+
</ButtonGroup>
|
|
185
|
+
</ButtonGroup>
|
|
186
|
+
</SubNav>
|
|
187
|
+
|
|
188
|
+
<hr />
|
|
189
|
+
|
|
148
190
|
<div className='sd-grid-list sd-grid-list--xx-small sd-grid-list--gap-s sd-grid-list--no-margin' style={{width:'290px'}}>
|
|
149
191
|
|
|
150
192
|
<IllustrationButton text='Headlines' onClick={()=> false}>
|