From 1613cb82a6ac5e5e4996ec5a98bd14dcaca99b52 Mon Sep 17 00:00:00 2001 From: dzonidoo Date: Thu, 14 Nov 2024 13:37:55 +0100 Subject: [PATCH 1/4] move refresh icon in last row --- assets/agenda/components/AgendaApp.tsx | 13 ++----------- .../components/AgendaListViewControls.tsx | 18 ++++++++++++++---- assets/search/components/NewItemsIcon.tsx | 2 +- assets/styles/navbar.scss | 10 +++++++++- assets/wire/components/ListViewControls.tsx | 15 ++++++++++++++- assets/wire/components/WireApp.tsx | 13 ++----------- 6 files changed, 42 insertions(+), 29 deletions(-) diff --git a/assets/agenda/components/AgendaApp.tsx b/assets/agenda/components/AgendaApp.tsx index 17862b4ea..efa92d681 100644 --- a/assets/agenda/components/AgendaApp.tsx +++ b/assets/agenda/components/AgendaApp.tsx @@ -57,7 +57,6 @@ import BookmarkTabs from 'components/BookmarkTabs'; import {setActiveDate, setAgendaDropdownFilter} from 'local-store'; import {previewConfigSelector, detailsConfigSelector} from 'ui/selectors'; import {SearchResultsBar} from 'search/components/SearchResultsBar'; -import NewItemsIcon from 'search/components/NewItemsIcon'; const modals = { shareItem: ShareItemModal, @@ -268,17 +267,9 @@ class AgendaApp extends SearchBase { toggleFeaturedFilter={this.props.toggleFeaturedFilter} featuredFilter={this.props.featuredOnly} hasAgendaFeaturedItems={this.props.hasAgendaFeaturedItems} + newItems={this.props.newItems} + fetchItems={this.props.fetchItems} /> - {!(this.props.newItems || []).length ? null : ( -
-
- -
-
- )} -
+
+ {!(newItems || []).length ? null : ( +
+ +
+ )} +
{!hideFeaturedToggle && hasAgendaFeaturedItems && DISPLAY_AGENDA_FEATURED_STORIES_ONLY && } @@ -26,6 +34,8 @@ AgendaListViewControls.propTypes = { hideFeaturedToggle: PropTypes.bool, featuredFilter: PropTypes.bool, hasAgendaFeaturedItems: PropTypes.bool, + newItems: PropTypes.array, + fetchItems: PropTypes.func, }; export default AgendaListViewControls; diff --git a/assets/search/components/NewItemsIcon.tsx b/assets/search/components/NewItemsIcon.tsx index 49ffeddad..8cdea420d 100644 --- a/assets/search/components/NewItemsIcon.tsx +++ b/assets/search/components/NewItemsIcon.tsx @@ -56,7 +56,7 @@ class NewItemsIcon extends React.Component { ref={(elem: any) => this.dom.tooltip = elem} title={gettext('refresh')} aria-label={gettext('refresh')} - className="button__reset-styles d-flex align-items-center ms-3" + className="button__reset-styles d-flex align-items-center" onClick={this.props.refresh} > diff --git a/assets/styles/navbar.scss b/assets/styles/navbar.scss index 509da2018..a1dd2d2b0 100644 --- a/assets/styles/navbar.scss +++ b/assets/styles/navbar.scss @@ -574,4 +574,12 @@ nav.search { display: none; } } -} \ No newline at end of file +} + +.navbar--list-controls:has(.navbar__inner--icon) { + display: flex; + + .navbar__inner--buttons { + display: none; + } +} diff --git a/assets/wire/components/ListViewControls.tsx b/assets/wire/components/ListViewControls.tsx index 8e70ec3e4..55ab95ed4 100644 --- a/assets/wire/components/ListViewControls.tsx +++ b/assets/wire/components/ListViewControls.tsx @@ -7,6 +7,7 @@ import NewsOnlyControl from './NewsOnlyControl'; import SearchAllVersionsControl from './SearchAllVersionsControl'; import ListViewOptions from '../../components/ListViewOptions'; import {ListSearchOptions} from './ListSearchOptions'; +import NewItemsIcon from 'search/components/NewItemsIcon'; function ListViewControls({ activeView, @@ -18,10 +19,20 @@ function ListViewControls({ hideSearchAllVersions, searchAllVersions, toggleSearchAllVersions, + newItems, + fetchItems, }: any) { return(
-
+ {!(newItems || []).length ? null : ( +
+ +
+ )} +
{hideSearchAllVersions ? null : ( { hideSearchAllVersions={!(this.props.context === 'wire' && DISPLAY_ALL_VERSIONS_TOGGLE)} searchAllVersions={this.props.searchAllVersions} toggleSearchAllVersions={this.props.toggleSearchAllVersions} + newItems={this.props.newItems} + fetchItems={this.props.fetchItems} /> - {!(this.props.newItems || []).length ? null : ( -
-
- -
-
- )}
Date: Thu, 21 Nov 2024 10:45:16 +0100 Subject: [PATCH 2/4] improve the logic --- .../components/AgendaListViewControls.tsx | 50 +++++++--- assets/styles/navbar.scss | 16 ---- assets/utils.tsx | 4 + assets/wire/components/ListViewControls.tsx | 93 ++++++++++++------- package-lock.json | 6 +- package.json | 4 +- 6 files changed, 109 insertions(+), 64 deletions(-) diff --git a/assets/agenda/components/AgendaListViewControls.tsx b/assets/agenda/components/AgendaListViewControls.tsx index 8dbbeef58..3b2a9ed43 100644 --- a/assets/agenda/components/AgendaListViewControls.tsx +++ b/assets/agenda/components/AgendaListViewControls.tsx @@ -1,28 +1,56 @@ import React from 'react'; import PropTypes from 'prop-types'; import AgendaFeaturedStoriesToogle from './AgendaFeaturedStoriesToogle'; -import {DISPLAY_AGENDA_FEATURED_STORIES_ONLY} from 'utils'; +import {DISPLAY_AGENDA_FEATURED_STORIES_ONLY, isMobilePhoneScreen} from 'utils'; import ListViewOptions from 'components/ListViewOptions'; import NewItemsIcon from 'search/components/NewItemsIcon'; +import {ResizeObserverComponent} from '@superdesk/common'; function AgendaListViewControls({activeView, setView, hideFeaturedToggle, toggleFeaturedFilter, featuredFilter, hasAgendaFeaturedItems, newItems, fetchItems}: any) { - return ( -
- {!(newItems || []).length ? null : ( + const Wrapper = ({children}: any) => { + if (children == null) { + return null; + } + return ( +
+ {children} +
+ ); + }; + + const renderRefreshButton = () => { + return (newItems || []).length + ? (
+ ) + : null; + }; + + return ( + + {(dimensions) => ( + isMobilePhoneScreen(dimensions.width) + ? ( + {renderRefreshButton()} + ) + : ( + + {renderRefreshButton()} +
+ {!hideFeaturedToggle && hasAgendaFeaturedItems && DISPLAY_AGENDA_FEATURED_STORIES_ONLY && + + } + +
+ + ) )} -
- {!hideFeaturedToggle && hasAgendaFeaturedItems && DISPLAY_AGENDA_FEATURED_STORIES_ONLY && - - } - -
-
+ ); } diff --git a/assets/styles/navbar.scss b/assets/styles/navbar.scss index a1dd2d2b0..a324fc749 100644 --- a/assets/styles/navbar.scss +++ b/assets/styles/navbar.scss @@ -567,19 +567,3 @@ nav.search { } } } - -.navbar { - &.navbar--list-controls { - @include phone { - display: none; - } - } -} - -.navbar--list-controls:has(.navbar__inner--icon) { - display: flex; - - .navbar__inner--buttons { - display: none; - } -} diff --git a/assets/utils.tsx b/assets/utils.tsx index 00134ec84..078713a1b 100644 --- a/assets/utils.tsx +++ b/assets/utils.tsx @@ -565,6 +565,10 @@ export function isMobilePhone() { return isTouchDevice() && screen.width < 768; } +export function isMobilePhoneScreen(dimensions: number) { + return dimensions < 575; +} + /** * Checks if wire context * @returns {boolean} diff --git a/assets/wire/components/ListViewControls.tsx b/assets/wire/components/ListViewControls.tsx index 55ab95ed4..7a9e78d39 100644 --- a/assets/wire/components/ListViewControls.tsx +++ b/assets/wire/components/ListViewControls.tsx @@ -8,6 +8,8 @@ import SearchAllVersionsControl from './SearchAllVersionsControl'; import ListViewOptions from '../../components/ListViewOptions'; import {ListSearchOptions} from './ListSearchOptions'; import NewItemsIcon from 'search/components/NewItemsIcon'; +import {isMobilePhoneScreen} from 'utils'; +import {ResizeObserverComponent} from '@superdesk/common'; function ListViewControls({ activeView, @@ -22,45 +24,72 @@ function ListViewControls({ newItems, fetchItems, }: any) { - return( -
- {!(newItems || []).length ? null : ( + const Wrapper = ({children}: any) => { + if (children == null) { + return null; + } + return ( +
+ {children} +
+ ); + }; + + const renderRefreshButton = () => { + return (newItems || []).length + ? (
+ ) + : null; + }; + + return ( + + {(dimensions) => ( + isMobilePhoneScreen(dimensions.width) + ? ( + {renderRefreshButton()} + ) + : ( + + {renderRefreshButton()} +
+ {hideSearchAllVersions ? null : ( + + )} + {!hideNewsOnly && } + + + {(!noNavigationSelected(activeNavigation) || (hideSearchAllVersions && hideNewsOnly)) ? null : ( +
+ +
+ )} +
+ + ) )} -
- {hideSearchAllVersions ? null : ( - - )} - {!hideNewsOnly && } - - - {(!noNavigationSelected(activeNavigation) || (hideSearchAllVersions && hideNewsOnly)) ? null : ( -
- -
- )} -
-
+ ); } diff --git a/package-lock.json b/package-lock.json index 062cd269c..1763b7675 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1476,9 +1476,9 @@ "dev": true }, "@superdesk/common": { - "version": "0.0.28", - "resolved": "https://registry.npmjs.org/@superdesk/common/-/common-0.0.28.tgz", - "integrity": "sha512-EhsYMm340r3FVrakH00lLvQbxVYYTzL61J5GXI3BI2xLN2dPI3N0AJEaMGqjbt0xUpUFxE3T08OtYvIC5koZvg==", + "version": "0.0.29", + "resolved": "https://registry.npmjs.org/@superdesk/common/-/common-0.0.29.tgz", + "integrity": "sha512-Fg/BlKxhkuxdVu6GtBk7SSSVdy67S+zUmB0Zun7atuswOzvM+ZDwlDFC8AIJKRG8Dqf3qRDO8JQhFKgB/M0kEg==", "requires": { "date-fns": "2.7.0", "lodash": "4.17.19", diff --git a/package.json b/package.json index a2fd79a59..ccafc99e1 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "@dnd-kit/core": "^6.0.8", "@dnd-kit/sortable": "^8.0.0", "@popperjs/core": "^2.11.4", - "@superdesk/common": "0.0.28", + "@superdesk/common": "0.0.29", "@types/bootstrap": "^5.2.6", "@types/lodash": "^4.17.6", "@types/react": "^17.0.2", @@ -40,7 +40,6 @@ "lodash": "^4.17.19", "moment": "2.30.1", "moment-timezone": "0.5.41", - "sass": "~1.3.0", "popper.js": "1.14.4", "primeicons": "^6.0.1", "primereact": "^10.8.4", @@ -56,6 +55,7 @@ "redux-logger": "3.0.6", "redux-thunk": "2.4.2", "reselect": "3.0.1", + "sass": "~1.3.0", "sass-loader": "~10.5.2", "store": "2.0.12", "style-loader": "~2.0.0", From 83f5bbe4af3456ab6d4bc42612a19e83c5ba0f46 Mon Sep 17 00:00:00 2001 From: dzonidoo Date: Wed, 18 Dec 2024 14:54:57 +0100 Subject: [PATCH 3/4] changes after reivew --- .../components/AgendaListViewControls.tsx | 93 +++++------- assets/wire/components/ListViewControls.tsx | 140 ++++++++---------- package-lock.json | 70 +++++++++ package.json | 1 + 4 files changed, 172 insertions(+), 132 deletions(-) diff --git a/assets/agenda/components/AgendaListViewControls.tsx b/assets/agenda/components/AgendaListViewControls.tsx index 3b2a9ed43..1e2333953 100644 --- a/assets/agenda/components/AgendaListViewControls.tsx +++ b/assets/agenda/components/AgendaListViewControls.tsx @@ -1,69 +1,54 @@ import React from 'react'; -import PropTypes from 'prop-types'; import AgendaFeaturedStoriesToogle from './AgendaFeaturedStoriesToogle'; import {DISPLAY_AGENDA_FEATURED_STORIES_ONLY, isMobilePhoneScreen} from 'utils'; import ListViewOptions from 'components/ListViewOptions'; import NewItemsIcon from 'search/components/NewItemsIcon'; -import {ResizeObserverComponent} from '@superdesk/common'; +import {WithScreenSizeObserver} from '@sourcefabric/common'; +import {IAgendaItem, IEvent} from 'interfaces'; -function AgendaListViewControls({activeView, setView, hideFeaturedToggle, toggleFeaturedFilter, featuredFilter, hasAgendaFeaturedItems, newItems, fetchItems}: any) { - const Wrapper = ({children}: any) => { - if (children == null) { - return null; - } - return ( -
- {children} -
- ); - }; +interface IProps { + activeView?: string; + hideFeaturedToggle?: boolean; + featuredFilter?: boolean; + hasAgendaFeaturedItems?: boolean; + newItems?: Array; + setView: (view: {type: string, label: string}) => void; + toggleFeaturedFilter: (event: IEvent) => void; + fetchItems: () => void; +} - const renderRefreshButton = () => { - return (newItems || []).length - ? ( -
- -
- ) - : null; - }; +function AgendaListViewControls({activeView, setView, hideFeaturedToggle, toggleFeaturedFilter, featuredFilter, hasAgendaFeaturedItems, newItems, fetchItems}: IProps) { + const renderRefreshButton = (newItems || []).length > 0 && ( +
+ +
+ ); return ( - + {(dimensions) => ( - isMobilePhoneScreen(dimensions.width) - ? ( - {renderRefreshButton()} - ) - : ( - - {renderRefreshButton()} -
- {!hideFeaturedToggle && hasAgendaFeaturedItems && DISPLAY_AGENDA_FEATURED_STORIES_ONLY && - - } - -
- - ) +
+ {isMobilePhoneScreen(dimensions.width) + ? renderRefreshButton + : ( + <> + {renderRefreshButton} +
+ {!hideFeaturedToggle && hasAgendaFeaturedItems && DISPLAY_AGENDA_FEATURED_STORIES_ONLY && + + } + +
+ + ) + } +
)} - + ); } - -AgendaListViewControls.propTypes = { - activeView: PropTypes.string, - setView: PropTypes.func.isRequired, - toggleFeaturedFilter: PropTypes.func.isRequired, - hideFeaturedToggle: PropTypes.bool, - featuredFilter: PropTypes.bool, - hasAgendaFeaturedItems: PropTypes.bool, - newItems: PropTypes.array, - fetchItems: PropTypes.func, -}; - export default AgendaListViewControls; diff --git a/assets/wire/components/ListViewControls.tsx b/assets/wire/components/ListViewControls.tsx index 7a9e78d39..a6639bc52 100644 --- a/assets/wire/components/ListViewControls.tsx +++ b/assets/wire/components/ListViewControls.tsx @@ -1,15 +1,27 @@ import React from 'react'; -import PropTypes from 'prop-types'; - import {noNavigationSelected} from 'search/utils'; - import NewsOnlyControl from './NewsOnlyControl'; import SearchAllVersionsControl from './SearchAllVersionsControl'; import ListViewOptions from '../../components/ListViewOptions'; import {ListSearchOptions} from './ListSearchOptions'; import NewItemsIcon from 'search/components/NewItemsIcon'; import {isMobilePhoneScreen} from 'utils'; -import {ResizeObserverComponent} from '@superdesk/common'; +import {WithScreenSizeObserver} from '@sourcefabric/common'; +import {IArticle} from 'interfaces'; + +interface IProps { + activeView?: string; + newsOnly?: boolean; + activeNavigation?: Array; + hideNewsOnly?: boolean; + hideSearchAllVersions?: boolean; + searchAllVersions?: boolean; + newItems?: Array; + setView: (view: {type: string, label: string}) => void; + toggleSearchAllVersions?: () => void; + toggleNews?: () => void; + fetchItems: () => void; +} function ListViewControls({ activeView, @@ -23,88 +35,60 @@ function ListViewControls({ toggleSearchAllVersions, newItems, fetchItems, -}: any) { - const Wrapper = ({children}: any) => { - if (children == null) { - return null; - } - return ( -
- {children} -
- ); - }; - - const renderRefreshButton = () => { - return (newItems || []).length - ? ( -
- -
- ) - : null; - }; +}: IProps) { + const renderRefreshButton = (newItems || []).length > 0 && ( +
+ +
+ ); return ( - + {(dimensions) => ( - isMobilePhoneScreen(dimensions.width) - ? ( - {renderRefreshButton()} - ) - : ( - - {renderRefreshButton()} -
- {hideSearchAllVersions ? null : ( - - )} - {!hideNewsOnly && } - - - {(!noNavigationSelected(activeNavigation) || (hideSearchAllVersions && hideNewsOnly)) ? null : ( -
- + {isMobilePhoneScreen(dimensions.width) + ? renderRefreshButton + : ( + <> + {renderRefreshButton} +
+ {hideSearchAllVersions ? null : ( + -
- )} -
- - ) + )} + {!hideNewsOnly && } + + + {(!noNavigationSelected(activeNavigation) || (hideSearchAllVersions && hideNewsOnly)) ? null : ( +
+ +
+ )} +
+ + ) + } +
)} - + ); } -ListViewControls.propTypes = { - activeView: PropTypes.string, - setView: PropTypes.func.isRequired, - newsOnly: PropTypes.bool, - toggleNews: PropTypes.func, - activeNavigation: PropTypes.arrayOf(PropTypes.string), - hideNewsOnly: PropTypes.bool, - hideSearchAllVersions: PropTypes.bool, - searchAllVersions: PropTypes.bool, - toggleSearchAllVersions: PropTypes.func, - newItems: PropTypes.array, - fetchItems: PropTypes.func, -}; - export default ListViewControls; diff --git a/package-lock.json b/package-lock.json index 1763b7675..a2e76414c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1475,6 +1475,76 @@ "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==", "dev": true }, + "@sourcefabric/common": { + "version": "0.0.37", + "resolved": "https://registry.npmjs.org/@sourcefabric/common/-/common-0.0.37.tgz", + "integrity": "sha512-LVtXJ3AKpU1tMveVkr//XmewZcNSJJrOtgprXOjdgwolcWkqF0ElzZFVH1JJyoeMPFenvcS7OKIlNjPxz/8etw==", + "requires": { + "date-fns": "2.7.0", + "lodash": "4.17.19", + "primereact": "^6.0.2", + "react": "16.9.0", + "react-dom": "16.9.0", + "react-sortable-hoc": "^1.11.0" + }, + "dependencies": { + "date-fns": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.7.0.tgz", + "integrity": "sha512-wxYp2PGoUDN5ZEACc61aOtYFvSsJUylIvCjpjDOqM1UDaKIIuMJ9fAnMYFHV3TQaDpfTVxhwNK/GiCaHKuemTA==" + }, + "lodash": { + "version": "4.17.19", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz", + "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==" + }, + "primereact": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/primereact/-/primereact-6.6.0.tgz", + "integrity": "sha512-onoowjhlOz9Kcjna1DYEKWTGjKah4MjqZchm9E3BkcWjeXoCLv3F5QnIo8eVF9q+xymEK/6Oh7zHlfCJYyWwDw==" + }, + "react": { + "version": "16.9.0", + "resolved": "https://registry.npmjs.org/react/-/react-16.9.0.tgz", + "integrity": "sha512-+7LQnFBwkiw+BobzOF6N//BdoNw0ouwmSJTEm9cglOOmsg/TMiFHZLe2sEoN5M7LgJTj9oHH0gxklfnQe66S1w==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2" + } + }, + "react-dom": { + "version": "16.9.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.9.0.tgz", + "integrity": "sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2", + "scheduler": "^0.15.0" + } + }, + "react-sortable-hoc": { + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/react-sortable-hoc/-/react-sortable-hoc-1.11.0.tgz", + "integrity": "sha512-v1CDCvdfoR3zLGNp6qsBa4J1BWMEVH25+UKxF/RvQRh+mrB+emqtVHMgZ+WreUiKJoEaiwYoScaueIKhMVBHUg==", + "requires": { + "@babel/runtime": "^7.2.0", + "invariant": "^2.2.4", + "prop-types": "^15.5.7" + } + }, + "scheduler": { + "version": "0.15.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.15.0.tgz", + "integrity": "sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + } + } + }, "@superdesk/common": { "version": "0.0.29", "resolved": "https://registry.npmjs.org/@superdesk/common/-/common-0.0.29.tgz", diff --git a/package.json b/package.json index ccafc99e1..de26a475d 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@dnd-kit/core": "^6.0.8", "@dnd-kit/sortable": "^8.0.0", "@popperjs/core": "^2.11.4", + "@sourcefabric/common": "0.0.37", "@superdesk/common": "0.0.29", "@types/bootstrap": "^5.2.6", "@types/lodash": "^4.17.6", From de5888b34e14ebb40e75cd57c7aa1184c68109af Mon Sep 17 00:00:00 2001 From: dzonidoo Date: Wed, 18 Dec 2024 14:55:45 +0100 Subject: [PATCH 4/4] change name of duplicated function --- assets/agenda/components/AgendaListItem.tsx | 4 ++-- assets/agenda/index.ts | 4 ++-- assets/am-news/index.ts | 4 ++-- assets/factcheck/index.ts | 4 ++-- assets/home/components/HomeApp.tsx | 4 ++-- assets/layout/components/SearchBase.tsx | 6 +++--- assets/market-place/index.ts | 4 ++-- assets/media-releases/index.ts | 4 ++-- assets/monitoring/index.ts | 4 ++-- assets/utils.tsx | 6 +++--- assets/wire/index.ts | 6 +++--- 11 files changed, 25 insertions(+), 25 deletions(-) diff --git a/assets/agenda/components/AgendaListItem.tsx b/assets/agenda/components/AgendaListItem.tsx index e4be185e4..c87b00b90 100644 --- a/assets/agenda/components/AgendaListItem.tsx +++ b/assets/agenda/components/AgendaListItem.tsx @@ -20,7 +20,7 @@ import { getInternalNote, } from '../utils'; import ActionMenu from '../../components/ActionMenu'; -import {LIST_ANIMATIONS, isMobilePhone, gettext} from 'utils'; +import {LIST_ANIMATIONS, isTablet, gettext} from 'utils'; import TopStoryLabel from './TopStoryLabel'; import ToBeConfirmedLabel from './ToBeConfirmedLabel'; import {LabelGroup} from 'ui/components/LabelGroup'; @@ -438,7 +438,7 @@ class AgendaListItem extends React.Component { } render() { - return isMobilePhone() ? + return isTablet() ? this.renderMobile() : this.renderNonMobile(); } diff --git a/assets/agenda/index.ts b/assets/agenda/index.ts index ac408c81e..853a815b4 100644 --- a/assets/agenda/index.ts +++ b/assets/agenda/index.ts @@ -1,5 +1,5 @@ import {IAgendaState} from 'interfaces'; -import {createStore, getInitData, isMobilePhone, closeItemOnMobile} from 'utils'; +import {createStore, getInitData, isTablet, closeItemOnMobile} from 'utils'; import {initWebSocket} from 'websocket'; import agendaReducer from './reducers'; @@ -28,7 +28,7 @@ if (localStorage.getItem('view')) { window.onpopstate = function(event: any) { if (event.state) { closeItemOnMobile(store.dispatch, event.state, openItemDetails, previewItem); - if (!isMobilePhone()) { + if (!isTablet()) { store.dispatch(setState(event.state)); store.dispatch(fetchItems()); } diff --git a/assets/am-news/index.ts b/assets/am-news/index.ts index a0749737c..24f9c2bbe 100644 --- a/assets/am-news/index.ts +++ b/assets/am-news/index.ts @@ -1,6 +1,6 @@ import {get, startsWith} from 'lodash'; -import {createStore, getInitData, closeItemOnMobile, isMobilePhone} from '../utils'; +import {createStore, getInitData, closeItemOnMobile, isTablet} from '../utils'; import {initWebSocket} from 'websocket'; import {getReadItems} from 'local-store'; @@ -45,7 +45,7 @@ if (navigationId) { window.onpopstate = function(event: any) { if (event.state) { closeItemOnMobile(store.dispatch, event.state, openItemDetails, previewItem); - if (!isMobilePhone()) { + if (!isTablet()) { store.dispatch(setState(event.state)); } } diff --git a/assets/factcheck/index.ts b/assets/factcheck/index.ts index 09e97a69b..0059d7f47 100644 --- a/assets/factcheck/index.ts +++ b/assets/factcheck/index.ts @@ -1,4 +1,4 @@ -import {createStore, getInitData, closeItemOnMobile, isMobilePhone} from '../utils'; +import {createStore, getInitData, closeItemOnMobile, isTablet} from '../utils'; import {initWebSocket} from 'websocket'; import {getReadItems} from 'local-store'; @@ -33,7 +33,7 @@ store.dispatch(initParams(params)); window.onpopstate = function(event: any) { if (event.state) { closeItemOnMobile(store.dispatch, event.state, openItemDetails, previewItem); - if (!isMobilePhone()) { + if (!isTablet()) { store.dispatch(setState(event.state)); } } diff --git a/assets/home/components/HomeApp.tsx b/assets/home/components/HomeApp.tsx index 3a040329c..c1c534568 100644 --- a/assets/home/components/HomeApp.tsx +++ b/assets/home/components/HomeApp.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {connect} from 'react-redux'; -import {gettext, isDisplayed, isMobilePhone} from 'utils'; +import {gettext, isDisplayed, isTablet} from 'utils'; import {getCard} from 'components/cards/utils'; import getItemActions from 'wire/item-actions'; import ItemDetails from 'wire/components/ItemDetails'; @@ -271,7 +271,7 @@ class HomeApp extends React.Component extends React.Component extends React.Component { window.onpopstate = function(event: any) { if (event.state) { closeItemOnMobile(store.dispatch, event.state, openItemDetails, previewItem); - if (!isMobilePhone()) { + if (!isTablet()) { store.dispatch(setState(event.state)); } } diff --git a/assets/media-releases/index.ts b/assets/media-releases/index.ts index daef6b5d6..6396dba46 100644 --- a/assets/media-releases/index.ts +++ b/assets/media-releases/index.ts @@ -1,4 +1,4 @@ -import {createStore, getInitData, closeItemOnMobile, isMobilePhone} from '../utils'; +import {createStore, getInitData, closeItemOnMobile, isTablet} from '../utils'; import {initWebSocket} from 'websocket'; import {render} from 'render-utils'; @@ -33,7 +33,7 @@ store.dispatch(initParams(params)); window.onpopstate = function(event: any) { if (event.state) { closeItemOnMobile(store.dispatch, event.state, openItemDetails, previewItem); - if (!isMobilePhone()) { + if (!isTablet()) { store.dispatch(setState(event.state)); } } diff --git a/assets/monitoring/index.ts b/assets/monitoring/index.ts index c4647deb4..37892b1fe 100644 --- a/assets/monitoring/index.ts +++ b/assets/monitoring/index.ts @@ -1,6 +1,6 @@ import {get, startsWith} from 'lodash'; -import {createStore, getInitData, closeItemOnMobile, isMobilePhone} from 'utils'; +import {createStore, getInitData, closeItemOnMobile, isTablet} from 'utils'; import {render} from 'render-utils'; import {initWebSocket} from 'websocket'; import {getReadItems} from 'local-store'; @@ -39,7 +39,7 @@ if (get(window.viewData, 'context', '') === 'monitoring') { window.onpopstate = function(event: any) { if (event.state) { closeItemOnMobile(store.dispatch, event.state, openItemDetails, previewItem); - if (!isMobilePhone()) { + if (!isTablet()) { store.dispatch(setState(event.state)); } } diff --git a/assets/utils.tsx b/assets/utils.tsx index 078713a1b..54ccffb9d 100644 --- a/assets/utils.tsx +++ b/assets/utils.tsx @@ -561,7 +561,7 @@ export function isTouchDevice() { || navigator.maxTouchPoints > 0; // works on IE10/11 and Surface } -export function isMobilePhone() { +export function isTablet() { return isTouchDevice() && screen.width < 768; } @@ -637,7 +637,7 @@ export function recordAction(item: any, action: any = 'open', section: any = 'wi } export function closeItemOnMobile(dispatch: any, state: any, openItemDetails: any, previewItem: any) { - if (isMobilePhone()) { + if (isTablet()) { dispatch(openItemDetails(null)); dispatch(previewItem(null)); } @@ -681,7 +681,7 @@ export function shouldShowListShortcutActionIcons(listConfig: any, isExtended: a mobile: false, }; - return isMobilePhone() ? + return isTablet() ? showActionIconsConfig.mobile : ( isExtended ? showActionIconsConfig.large : diff --git a/assets/wire/index.ts b/assets/wire/index.ts index d14c9279a..c9fd64432 100644 --- a/assets/wire/index.ts +++ b/assets/wire/index.ts @@ -1,4 +1,4 @@ -import {createStore, getInitData, closeItemOnMobile, isMobilePhone} from 'utils'; +import {createStore, getInitData, closeItemOnMobile, isTablet} from 'utils'; import {initWebSocket} from 'websocket'; import {render} from 'render-utils'; @@ -33,7 +33,7 @@ if (localStorage.getItem('view')) { window.onpopstate = function(event: any) { if (event.state) { closeItemOnMobile(store.dispatch, event.state, openItemDetails, previewItem); - if (!isMobilePhone()) { + if (!isTablet()) { store.dispatch(setState(event.state)); store.dispatch(fetchItems()); } @@ -58,4 +58,4 @@ document.addEventListener(WIRE_TOPIC_FOLDERS_UPDATED, (_e) => { const {companyId, userId} = e.detail; store.dispatch(fetchFoldersWire(companyId, userId)); -}); \ No newline at end of file +});