diff --git a/.gitignore b/.gitignore index 190dc4dd..dd0e076c 100644 --- a/.gitignore +++ b/.gitignore @@ -21,6 +21,13 @@ src/ yarn.lock build +.history/ +.github +.vscode +.idea + +.DS_Store + # VIM related files *.swo *.swp diff --git a/client/components/Analytics/Analytics.jsx b/client/components/Analytics/Analytics.jsx index c09c9fc5..9f1ea800 100644 --- a/client/components/Analytics/Analytics.jsx +++ b/client/components/Analytics/Analytics.jsx @@ -3,7 +3,7 @@ import PropTypes from "prop-types"; import classNames from "classnames"; import _ from "lodash"; -import { CheckButtonGroup, RadioButton } from "superdesk-ui-framework/react"; +import { CheckButtonGroup, RadioButtonGroup } from "superdesk-ui-framework/react"; import SitesSideNav from "../generic/SitesSideNav"; import FiltersPanel from "./FiltersPanel"; @@ -254,7 +254,7 @@ class Analytics extends React.Component {
- { - if (inputValue && inputValue.length < 3) return this.state.authors; + loadAuthors = (inputValue = null, callback = null) => { + if (inputValue && inputValue.length < 2) callback(this.state.authors); - return this.props.publisher + this.props.publisher .queryAuthors({ term: inputValue, limit: 30 }) .then((response) => { let authorsOptions = []; response._embedded._items.forEach((item) => { authorsOptions.push({ - value: item.id, - label: item.name, + value: { + value: item.id, + label: item.name, + } }); }); this.setState({ authors: authorsOptions }); - return authorsOptions; + callback(authorsOptions); }) .catch((err) => { - return this.state.authors; + callback(this.state.authors); }); + + return () => { }; }; handleAuthorChange = (arr) => { @@ -161,49 +163,58 @@ class FiltersPanel extends React.Component { this.props.routes.map((route) => { routesOptions.push({ - value: route.id, - label: route.name, + value: { + value: route.id, + label: route.name, + }, + label: route.name }); }); return (
-
- - - -

- Filter -

+
+
+
+

+ Filter +

+
+
+ +
+
-
- +
this.handleRouteChange(values)} + label="Category" + onChange={(values) => this.handleRouteChange(values)} options={routesOptions} - selectedOptions={ - this.state.filters.routes ? this.state.filters.routes : [] - } + optionLabel={(option) => option.label} + value={this.state.filters.routes} + emptyFilterMessage="No routes found" />
-
- - this.handleAuthorChange(values)} - loadOptions={(inputValue) => this.loadAuthors(inputValue)} - selectedOptions={ - this.state.filters.author ? this.state.filters.author : [] - } +
+ item.label} + getId={(item) => item} + allowMultiple={true} + searchOptions={this.loadAuthors} + onChange={(values) => this.handleAuthorChange(values)} />
@@ -234,9 +245,9 @@ class FiltersPanel extends React.Component { value={ this.state.filters.published_after ? moment( - this.state.filters.published_after, - "YYYY-MM-DD" - ).toDate() + this.state.filters.published_after, + "YYYY-MM-DD" + ).toDate() : null } dateFormat="YYYY-MM-DD" @@ -260,9 +271,9 @@ class FiltersPanel extends React.Component { value={ this.state.filters.published_before ? moment( - this.state.filters.published_before, - "YYYY-MM-DD" - ).toDate() + this.state.filters.published_before, + "YYYY-MM-DD" + ).toDate() : null } dateFormat="YYYY-MM-DD" @@ -283,12 +294,12 @@ class FiltersPanel extends React.Component {
-
+
} + loader={} scrollableTarget="scrollableDiv" > {this.state.reports.map((item, index) => ( diff --git a/client/components/ContentLists/Automatic/Automatic.jsx b/client/components/ContentLists/Automatic/Automatic.jsx index 22effe0a..4d112a45 100644 --- a/client/components/ContentLists/Automatic/Automatic.jsx +++ b/client/components/ContentLists/Automatic/Automatic.jsx @@ -183,7 +183,7 @@ class Automatic extends React.Component { return (
-
+
- +
+ +
) : ( -
- {list.name} +
+
{list.name}
{list.enabled && ( -
diff --git a/client/components/ContentLists/Listing.jsx b/client/components/ContentLists/Listing.jsx index 6bc1b5b1..db3c8526 100644 --- a/client/components/ContentLists/Listing.jsx +++ b/client/components/ContentLists/Listing.jsx @@ -4,7 +4,7 @@ import PropTypes from "prop-types"; import ListCard from "./ListCard"; import Dropdown from "../UI/Dropdown"; import SearchBar from "../UI/SearchBar"; -import { CheckButtonGroup, RadioButton } from "superdesk-ui-framework/react"; +import { CheckButtonGroup, RadioButtonGroup } from "superdesk-ui-framework/react"; class Listing extends React.Component { constructor(props) { @@ -53,7 +53,7 @@ class Listing extends React.Component { />
- { - if (inputValue && inputValue.length < 3) return this.state.authors; + loadAuthors = (inputValue = null, callback = null) => { + if (inputValue && inputValue.length < 2) callback(this.state.authors); - return this.props.publisher + this.props.publisher .queryAuthors({ term: inputValue, limit: 30 }) .then((response) => { let authorsOptions = []; response._embedded._items.forEach((item) => { authorsOptions.push({ - value: item.id, - label: item.name, + value: { + value: item.id, + label: item.name, + } }); }); this.setState({ authors: authorsOptions }); - return authorsOptions; + callback(authorsOptions); }) .catch((err) => { - return this.state.authors; + callback(this.state.authors); }); + + return () => { }; }; handleAuthorChange = (arr) => { @@ -67,6 +69,7 @@ class FilterPanel extends React.Component { let filters = { ...this.state.filters }; filters.route = arr ? arr : []; + this.setState({ filters }); }; @@ -109,8 +112,11 @@ class FilterPanel extends React.Component { this.state.routes.map((route) => { routesOptions.push({ - value: parseInt(route.id), - label: route.name, + value: { + value: parseInt(route.id), + label: route.name, + }, + label: route.name }); }); @@ -125,7 +131,7 @@ class FilterPanel extends React.Component { return (
-
+
-
-
- +
+
this.handleRoutesChange(values)} + label="Routes" + onChange={(values) => this.handleRoutesChange(values)} options={routesOptions} - selectedOptions={this.state.filters.route} + optionLabel={(option) => option.label} + value={this.state.filters.route} + emptyFilterMessage="No routes found" />
-
-
- - this.handleAuthorChange(values)} - loadOptions={(inputValue) => this.loadAuthors(inputValue)} - selectedOptions={ - this.state.filters.author ? this.state.filters.author : [] - } +
+
+ item.label} + getId={(item) => item} + allowMultiple={true} + searchOptions={this.loadAuthors} + onChange={(values) => this.handleAuthorChange(values)} />
diff --git a/client/components/ContentLists/Manual/Manual.jsx b/client/components/ContentLists/Manual/Manual.jsx index a5df6283..35ad7534 100644 --- a/client/components/ContentLists/Manual/Manual.jsx +++ b/client/components/ContentLists/Manual/Manual.jsx @@ -357,9 +357,16 @@ class Manual extends React.Component { getList = (id) => this.state[this.id2List[id]].items; - onDragEnd = (result) => { - const { source, destination } = result; + getIndexInList = (list, draggableId) => { + let ids = draggableId.split('_'); + let id = parseInt(ids[ids.length - 1]); + + return list.findIndex(item => ids.length > 2 ? item.content.id === id : item.id === id); + } + onDragEnd = (result) => { + const { source, destination, draggableId } = result; + // dropped outside the list if (!destination) { return; @@ -377,7 +384,7 @@ class Manual extends React.Component { let list = { ...this.state.list }; list.items = items; - this.recordChange("move", destination.index, [...list.items]); + this.recordChange("move", this.getIndexInList(list.items, draggableId), [...list.items]); this.setState({ list }); } else { const result = move( @@ -392,7 +399,8 @@ class Manual extends React.Component { list.items = this.fixPinnedItemsPosition(result.contentList); articles.items = result.articles; - this.recordChange("add", destination.index, [...list.items]); + + this.recordChange("add", this.getIndexInList(list.items, draggableId), [...list.items]); this.setState({ list, articles, @@ -488,7 +496,7 @@ class Manual extends React.Component {
-
+
{store.isLanguagesEnabled && (
-
)} diff --git a/client/components/Output/FilterPane.jsx b/client/components/Output/FilterPane.jsx index a7d02fa5..6c89dc91 100644 --- a/client/components/Output/FilterPane.jsx +++ b/client/components/Output/FilterPane.jsx @@ -3,10 +3,8 @@ import PropTypes from "prop-types"; import classNames from "classnames"; import moment from "moment"; import _ from "lodash"; -import { Button, IconButton, DatePicker } from "superdesk-ui-framework/react"; +import { Button, IconButton, DatePicker, MultiSelect, TreeSelect } from "superdesk-ui-framework/react"; -import MultiSelect from "../UI/MultiSelect"; -import AsyncMultiSelect from "../UI/AsyncMultiSelect"; import Store from "./Store"; class FilterPane extends React.Component { @@ -88,27 +86,31 @@ class FilterPane extends React.Component { }); }; - loadAuthors = (inputValue = null) => { - if (inputValue && inputValue.length < 3) return this.state.authors; + loadAuthors = (inputValue = null, callback = null) => { + if (inputValue && inputValue.length < 2) callback(this.state.authors); - return this.props.publisher + this.props.publisher .queryAuthors({ term: inputValue, limit: 30 }) .then((response) => { let authorsOptions = []; response._embedded._items.forEach((item) => { authorsOptions.push({ - value: item.id, - label: item.name, + value: { + value: item.id, + label: item.name, + } }); }); this.setState({ authors: authorsOptions }); - return authorsOptions; + callback(authorsOptions); }) .catch((err) => { - return this.state.authors; + callback(this.state.authors); }); + + return () => { }; }; handleAuthorChange = (arr) => { @@ -164,8 +166,11 @@ class FilterPane extends React.Component { this.state.routes.map((route) => { routesOptions.push({ - value: parseInt(route.id), - label: route.name, + value: { + value: parseInt(route.id), + label: route.name, + }, + label: route.name }); }); @@ -173,8 +178,11 @@ class FilterPane extends React.Component { this.state.ingestSources.items.map((source) => { ingestSourceOptions.push({ - value: source.name, - label: source.name, + value: { + value: source.name, + label: source.name, + }, + label: source.name }); }); @@ -190,40 +198,48 @@ class FilterPane extends React.Component { } )} > -
-
- - - -

- Advanced Filter -

+
+
+
+
+

+ Advanced Filter +

+
+
+ +
+
-
-
- +
+
this.handleRoutesChange(values)} + label="Routes" + onChange={(values) => this.handleRoutesChange(values)} options={routesOptions} - selectedOptions={this.state.filters.route} + optionLabel={(option) => option.label} + value={this.state.filters.route} + emptyFilterMessage="No routes found" />
-
-
- - this.handleAuthorChange(values)} - loadOptions={(inputValue) => - this.loadAuthors(inputValue) - } - selectedOptions={this.state.filters.author} +
+
+ item.label} + getId={(item) => item} + allowMultiple={true} + searchOptions={this.loadAuthors} + onChange={(values) => this.handleAuthorChange(values)} />
@@ -236,9 +252,9 @@ class FilterPane extends React.Component { value={ this.state.filters.published_after ? moment( - this.state.filters.published_after, - "YYYY-MM-DD" - ).toDate() + this.state.filters.published_after, + "YYYY-MM-DD" + ).toDate() : null } dateFormat="YYYY-MM-DD" @@ -263,9 +279,9 @@ class FilterPane extends React.Component { value={ this.state.filters.published_before ? moment( - this.state.filters.published_before, - "YYYY-MM-DD" - ).toDate() + this.state.filters.published_before, + "YYYY-MM-DD" + ).toDate() : null } dateFormat="YYYY-MM-DD" @@ -288,19 +304,19 @@ class FilterPane extends React.Component { Ingest source this.handleSourceChange(values)} + onChange={(values) => this.handleSourceChange(values)} options={ingestSourceOptions} - selectedOptions={this.state.filters.source} + optionLabel={(option) => option.label} + value={this.state.filters.source} + filterPlaceholder="No options found" />
-
-
+
diff --git a/client/components/Output/PreviewPane.jsx b/client/components/Output/PreviewPane.jsx index dedf457b..6d2aaa3c 100644 --- a/client/components/Output/PreviewPane.jsx +++ b/client/components/Output/PreviewPane.jsx @@ -73,7 +73,7 @@ class PreviewPane extends React.Component { let body = this.props.package.body_html; if (this.state.loading) { - body = renderToString(); + body = renderToString(); } let article = { diff --git a/client/components/Output/PublishPane/Destination.jsx b/client/components/Output/PublishPane/Destination.jsx index 9a1af7ce..a62fc320 100644 --- a/client/components/Output/PublishPane/Destination.jsx +++ b/client/components/Output/PublishPane/Destination.jsx @@ -133,11 +133,6 @@ class Destination extends React.Component { ? destination.route.name : null} - {!!destination.is_published_fbia && ( - - - - )} {!!destination.paywall_secured && ( @@ -238,7 +233,6 @@ class Destination extends React.Component {
)}
- {
- {!!remainingSites.length && ( -
-

+

{{ newSite.output_channel.type }} settings

@@ -115,7 +115,7 @@

-

PWA settings

+

PWA settings

{{ uploadError }} Error: Something went wrong. Try again.Error: Something went wrong. Try again.
-
-
+
+
-
-
+ +
{this.state.ninjsError && ( @@ -123,6 +125,7 @@ class Publishing extends React.Component { !this.state.ninjsError && !this.state.evaluateError && ( { + this.setState({ + overlayOpen: !this.state.overlayOpen, + }) + }} + overlayOpen={this.state.overlayOpen} apiUrl={this.state.apiUrl} apiHeader={this.state.apiHeader} item={this.state.item} diff --git a/client/images/PWA_logo_dark.svg b/client/images/PWA_logo_dark.svg new file mode 100644 index 00000000..86158dac --- /dev/null +++ b/client/images/PWA_logo_dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/styles/_publisher.scss b/client/styles/_publisher.scss index 78639e0c..4fbffb9c 100644 --- a/client/styles/_publisher.scss +++ b/client/styles/_publisher.scss @@ -52,3 +52,7 @@ border-top: 2px dashed red; color: red; } +.filter-type { + display: flex; + gap: var(--gap--small); +} diff --git a/client/styles/articlePreview.scss b/client/styles/articlePreview.scss index 3570d186..25431cef 100644 --- a/client/styles/articlePreview.scss +++ b/client/styles/articlePreview.scss @@ -94,6 +94,11 @@ } } +// Side panel inner background color fix +.side-panel .side-panel__content-block-overlay .side-panel { + background-color: var(--sd-colour-panel-bg--000) !important; +} + // typography stuff in preview pane .side-panel__content-block-text { ul { diff --git a/client/styles/dragNdrop.scss b/client/styles/dragNdrop.scss index 3e62ebff..a9595882 100644 --- a/client/styles/dragNdrop.scss +++ b/client/styles/dragNdrop.scss @@ -2,37 +2,36 @@ ul[dnd-list] { min-height: 42px; .dndPlaceholder { - border: 2px dashed $sd-blue; - background-color: $sd-hover; + border: 2px dashed var(--sd-colour-interactive); + background-color: var(--sd-colour-interactive--alpha-10); display: block; min-height: 42px; } li.selected .listElement { - background-color: $sd-hover; + background-color: hsla(0, 0%, 60%, 0.06); } } .dropZone { &--empty { - border: 2px dashed #adadad; - background-color: #ebebeb; + border: 2px dashed var(--color-border-line--medium); + background-color: hsla(0, 0%, 60%, 0.06); } &--active { - border: 2px dashed $sd-blue; - background-color: $sd-hover; - } - - &__heading { - display: inline-block; - position: absolute; - top: calc(50% - 25px); - left: 50%; - transform: translateY(-50%); - transform: translateX(-50%); - font-size: 2rem; - font-weight: 200; - color: $grayLight; + border: 2px dashed var(--sd-colour-interactive); + background-color: var(--sd-colour-interactive--alpha-10); } } +.dropZone__heading { + display: inline-block; + position: absolute; + top: calc(50% - 25px); + left: 50%; + transform: translateY(-50%); + transform: translateX(-50%); + font-size: 2rem; + font-weight: 300; + color: var(--color-text-light); +} diff --git a/client/styles/helperElements.scss b/client/styles/helperElements.scss index d9dfd0a3..fd020afc 100644 --- a/client/styles/helperElements.scss +++ b/client/styles/helperElements.scss @@ -17,6 +17,10 @@ background: transparent url(../images/PWA_logo.svg) center center no-repeat; } +body[data-theme="dark-ui"] .sp-logo-pwa { + background: transparent url(../images/PWA_logo_dark.svg) center center no-repeat; +} + .absPosition { position: absolute; @@ -268,6 +272,7 @@ select[disabled] > option { cursor: move; } + .sp-listSerialNumberMinWidth { min-width: 1.2em; text-align: center; @@ -288,7 +293,7 @@ select[disabled] > option { font-size: 13px; word-break: break-all; word-wrap: break-word; - background-color: #f2f2f2; + background-color: var(--sd-item__main-Bg); border-radius: 3px; line-height: 140%; font-family: "Courier New", Courier, monospace; diff --git a/client/styles/listElement.scss b/client/styles/listElement.scss index cc62a914..ee993f29 100644 --- a/client/styles/listElement.scss +++ b/client/styles/listElement.scss @@ -1,22 +1,13 @@ .listElement { - border: 1px solid $tableBorder; - border-left: 4px solid #4d646f; + border: 1px solid var(--sd-colour-line--light); + border-left: 4px solid hsl(199, 18%, 37%); border-top: 0; padding: 12px 5px 12px 15px; - background-color: #fff; + background-color: var(--sd-item__main-Bg); position: relative; display: flex; align-items: center; - &--dark { - background-color: #444545; - border-color: #3b3b3b; - } - - &--lightDark { - background-color: #535454; - } - &--noBorder { border: none; margin-top: 2px; @@ -31,7 +22,7 @@ } &--noLeftBorder { - border-left: 1px solid $tableBorder; + border-left: 1px solid var(--sd-colour-line--light); } &--bold { @@ -42,7 +33,7 @@ opacity: 0.4; } - &__icon { + .listElement__icon { flex: 0 0 auto; display: inline-block; margin-right: 10px; @@ -51,40 +42,23 @@ align-items: center; &:hover i { - color: $blue; + color: var(--sd-colour-interactive); } - &--active { + &.listElement__icon--active { i { - color: $blue; + color: var(--sd-colour-interactive); } &:hover i { - color: $grayLight; + color: var(--sd-colour-interactive); } } } - &__content { + .listElement__content { width: 100%; - color: $gray; - - &--dark { - color: #eaeaea; - - .dropdown__toggle { - color: #eaeaea; - - option { - color: black; - } - - &.line-input { - border-bottom:1px solid rgba(255, 255, 255, 0.3) !important; - } - } - } - + color: var(--color-text); button { border: 0; background: none; @@ -104,18 +78,7 @@ } } - &__right { - flex: 0 0 auto; - align-items: center; - .dropdown__toggle { - opacity: .3; - } - &:hover { - .dropdown__toggle { - opacity: 1; - } - } - } + .countLabel { margin-right: 10px; @@ -125,3 +88,16 @@ display: inline-block; } } + +.listElement__right { + flex: 0 0 auto; + align-items: center; + .dropdown__toggle { + opacity: .3; + } + &:hover { + .dropdown__toggle { + opacity: 1; + } + } +} \ No newline at end of file diff --git a/client/styles/uploadFix.scss b/client/styles/uploadFix.scss index fb49c2c1..faf6cc1e 100644 --- a/client/styles/uploadFix.scss +++ b/client/styles/uploadFix.scss @@ -4,11 +4,11 @@ left: 5px; bottom: 5px; right: 5px; - border: 3px dashed $background-main; + border: 3px dashed var(--sd-colour-line--medium); overflow-y: auto; @include user-select(none); &.dragover { - border-color: #e7e7e7; + border-color: var(--sd-colour-interactive); } .title { @@ -20,7 +20,7 @@ margin-left: -200px; padding-top: 100px; text-align: center; - color: #a0a0a0; + color: var(--color-text-light); font-size: 24px; font-weight: 300; } diff --git a/client/styles/wizardThemeBox.scss b/client/styles/wizardThemeBox.scss index cc41709e..b91fab10 100644 --- a/client/styles/wizardThemeBox.scss +++ b/client/styles/wizardThemeBox.scss @@ -1,13 +1,18 @@ .wizardThemeBox { - background-color: $white; + background-color: var(--sd-item__main-Bg); position: relative; + border: 2px solid var(--sd-item__main-Bg); + border-radius: var(--b-radius--medium); &--active { - background-color: $green; + background-color: var(--sd-colour-interactive); + border: 2px solid var(--sd-colour-interactive); color: $white; } - &__image { + .wizardThemeBox__image { width: 100%; + border-radius: var(--b-radius--medium); + overflow: hidden; img { display: block; object-fit: cover; @@ -15,19 +20,17 @@ width: 100%; } } - &__name { + .wizardThemeBox__name { display: block; text-align: center; line-height: 2.5em; } - &__overlay { + .wizardThemeBox__overlay { opacity: 0; - background-color: rgba(255, 255, 255, 0.8); + border-radius: var(--b-radius--medium); + background-color: var(--sd-colour-overlay-actioning); position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset: 0; transition: opacity .2s linear; display: flex; align-items: flex-end; @@ -40,22 +43,26 @@ opacity: 1; } - &--upload { + &.wizardThemeBox--upload { height: 222px; background: none; - border: 2px dashed rgba(51, 51, 51, 0.25); - border-radius: 3px; + border: none; + .drag-area { + inset: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 1rem; + transition: all 0.2s ease; + border: 2px dashed var(--sd-colour-line--medium) !important; + border-radius: var(--b-radius--medium); - &.dragover{ - border: none; - background-color: rgba(255,255,255,.7); + &.dragover { + border: 2px dashed var(--sd-colour-interactive) !important; + background-color: var(--sd-colour-interactive--alpha-10); } .title { width: auto; diff --git a/client/styles/wizardThemeDetails.scss b/client/styles/wizardThemeDetails.scss index ff66d918..77d4bbcb 100644 --- a/client/styles/wizardThemeDetails.scss +++ b/client/styles/wizardThemeDetails.scss @@ -2,17 +2,17 @@ z-index: 1; overflow: hidden; margin: -2rem; - &__header { - padding: 1.2rem; - border-bottom: 1px solid #e4e4e4; - min-height: 48px; - .icn-btn:disabled { - opacity: .2; - cursor: not-allowed; - } - } - &__content { - overflow-y: auto; - padding: 2rem 0; +} +.wizardThemeDetails__header { + padding: 1.2rem; + border-bottom: 1px solid #e4e4e4; + min-height: 48px; + .icn-btn:disabled { + opacity: .2; + cursor: not-allowed; } } +.wizardThemeDetails__content { + overflow-y: auto; + padding: 2rem 0; +} \ No newline at end of file diff --git a/client/views/settings/rules/index.html b/client/views/settings/rules/index.html index c46bdb7f..77dc4d3b 100644 --- a/client/views/settings/rules/index.html +++ b/client/views/settings/rules/index.html @@ -128,7 +128,7 @@

No rules so far.

>{{webPublisherSettings.getTenantNameByCode(code)}} Rules {{webPublisherSettings.getTenantOutputChannelNameByCode(code)}} diff --git a/client/views/settings/rules/rule-add-tenant.html b/client/views/settings/rules/rule-add-tenant.html index 8a9413f5..760d42f7 100644 --- a/client/views/settings/rules/rule-add-tenant.html +++ b/client/views/settings/rules/rule-add-tenant.html @@ -139,7 +139,6 @@
Auto Publish - Publish on Facebook
Paywall Secured diff --git a/client/views/settings/rules/rule-add.html b/client/views/settings/rules/rule-add.html index 801a236a..531f662f 100644 --- a/client/views/settings/rules/rule-add.html +++ b/client/views/settings/rules/rule-add.html @@ -1,7 +1,13 @@
- -

Add Rule

-

Edit Rule

+
+
+

Add Rule

+

Edit Rule

+
+
+ +
+
@@ -15,7 +21,7 @@

Edit Rule