From 44387e0f2a5cd4d40761b83d77b336bb14724039 Mon Sep 17 00:00:00 2001 From: Brittany Feenstra Date: Fri, 10 Apr 2020 15:24:09 -0700 Subject: [PATCH 1/6] sort dropdown base --- assets/src/dashboard/app/api/apiProvider.js | 20 +++- .../dashboard/app/views/myStories/index.js | 44 +++++--- .../app/views/shared/bodyViewOptions.js | 104 ++++++++++++++++++ .../src/dashboard/app/views/shared/index.js | 2 +- .../app/views/shared/listBarContainer.js | 26 ----- .../app/views/templatesGallery/index.js | 28 +++-- .../src/dashboard/components/viewStyleBar.js | 2 +- assets/src/dashboard/constants.js | 31 ++++++ 8 files changed, 199 insertions(+), 58 deletions(-) create mode 100644 assets/src/dashboard/app/views/shared/bodyViewOptions.js delete mode 100644 assets/src/dashboard/app/views/shared/listBarContainer.js diff --git a/assets/src/dashboard/app/api/apiProvider.js b/assets/src/dashboard/app/api/apiProvider.js index a01083b85eeb..e922ef04a3f8 100644 --- a/assets/src/dashboard/app/api/apiProvider.js +++ b/assets/src/dashboard/app/api/apiProvider.js @@ -31,7 +31,7 @@ import apiFetch from '@wordpress/api-fetch'; * Internal dependencies */ import { useConfig } from '../config'; -import { STORY_STATUSES } from '../../constants'; +import { STORY_STATUSES, STORY_SORT_OPTIONS } from '../../constants'; import getAllTemplates from '../../templates'; export const ApiContext = createContext({ state: {}, actions: {} }); @@ -69,6 +69,14 @@ export function reshapeTemplateObject({ id, title, pages }) { }; } +const ORDER_BY_SORT = { + [STORY_SORT_OPTIONS.NAME]: 'asc', + [STORY_SORT_OPTIONS.DATE_CREATED]: 'desc', + [STORY_SORT_OPTIONS.LAST_MODIFIED]: 'desc', + [STORY_SORT_OPTIONS.LAST_OPENED]: 'desc', + [STORY_SORT_OPTIONS.NAME]: 'asc', +}; + export default function ApiProvider({ children }) { const { api, editStoryURL, pluginDir } = useConfig(); const [stories, setStories] = useState([]); @@ -79,16 +87,22 @@ export default function ApiProvider({ children }) { ); const fetchStories = useCallback( - async ({ status = STORY_STATUSES[0].value, searchTerm }) => { + async ({ + status = STORY_STATUSES[0].value, + orderby = STORY_SORT_OPTIONS.LAST_MODIFIED, + searchTerm, + }) => { if (!api.stories) { return []; } const perPage = '100'; // TODO set up pagination const query = { status, - per_page: perPage, context: 'edit', search: searchTerm || undefined, + orderby, + per_page: perPage, + order: ORDER_BY_SORT[orderby], }; try { diff --git a/assets/src/dashboard/app/views/myStories/index.js b/assets/src/dashboard/app/views/myStories/index.js index 058b5d1463ae..277e393afb93 100644 --- a/assets/src/dashboard/app/views/myStories/index.js +++ b/assets/src/dashboard/app/views/myStories/index.js @@ -28,8 +28,12 @@ import { useCallback, useContext, useEffect, useState, useMemo } from 'react'; /** * Internal dependencies */ -import { FloatingTab, ListBar } from '../../../components'; -import { VIEW_STYLE, STORY_STATUSES } from '../../../constants'; +import { FloatingTab } from '../../../components'; +import { + VIEW_STYLE, + STORY_STATUSES, + STORY_SORT_OPTIONS, +} from '../../../constants'; import { ApiContext } from '../../api/apiProvider'; import { UnitsProvider } from '../../../../edit-story/units'; import { TransformProvider } from '../../../../edit-story/components/transform'; @@ -38,21 +42,17 @@ import usePagePreviewSize from '../../../utils/usePagePreviewSize'; import { ReactComponent as PlayArrowSvg } from '../../../icons/playArrow.svg'; import { BodyWrapper, + BodyViewOptions, PageHeading, NoResults, StoryGridView, - ListBarContainer, } from '../shared'; const FilterContainer = styled.div` - padding: 0 20px 20px 0; margin: ${({ theme }) => `0 ${theme.pageGutter.desktop}px`}; + padding-bottom: 20px; border-bottom: ${({ theme: t }) => t.subNavigationBar.border}; - @media ${({ theme }) => theme.breakpoint.smallDisplayPhone} { - margin: ${({ theme }) => `0 ${theme.pageGutter.min}px`}; - } - @media ${({ theme }) => theme.breakpoint.min} { & > label { border-radius: 0; @@ -80,6 +80,9 @@ function MyStories() { const [status, setStatus] = useState(STORY_STATUSES[0].value); const [typeaheadValue, setTypeaheadValue] = useState(''); const [viewStyle, setViewStyle] = useState(VIEW_STYLE.GRID); + const [currentStorySort, setCurrentStorySort] = useState( + STORY_SORT_OPTIONS.LAST_MODIFIED + ); const { pageSize } = usePagePreviewSize(); const { actions: { fetchStories }, @@ -87,8 +90,12 @@ function MyStories() { } = useContext(ApiContext); useEffect(() => { - fetchStories({ status, searchTerm: typeaheadValue }); - }, [fetchStories, status, typeaheadValue]); + fetchStories({ + orderby: currentStorySort, + searchTerm: typeaheadValue, + status, + }); + }, [currentStorySort, fetchStories, status, typeaheadValue]); const filteredStories = useMemo(() => { return stories.filter((story) => { @@ -123,13 +130,14 @@ function MyStories() { if (filteredStoriesCount > 0) { return ( - - - + + ))} + {BodyContent} diff --git a/assets/src/dashboard/app/views/shared/bodyViewOptions.js b/assets/src/dashboard/app/views/shared/bodyViewOptions.js new file mode 100644 index 000000000000..735cf644c338 --- /dev/null +++ b/assets/src/dashboard/app/views/shared/bodyViewOptions.js @@ -0,0 +1,104 @@ +/* + * Copyright 2020 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +/** + * External dependencies + */ +import styled from 'styled-components'; +import PropTypes from 'prop-types'; + +/** + * Internal dependencies + */ +import { Dropdown, ListBar } from '../../../components'; +import { STORY_SORT_MENU_ITEMS } from '../../../constants'; + +const DisplayFormatContainer = styled.div` + margin: ${({ theme }) => `${theme.pageGutter.desktop}px 0`}; + padding-bottom: 20px; + padding-left: 15px; + + border-bottom: ${({ theme: t }) => t.subNavigationBar.border}; + display: flex; + align-items: space-between; + align-content: center; + + @media ${({ theme }) => theme.breakpoint.smallDisplayPhone} { + flex-direction: column; + align-items: flex-start; + } +`; + +const StorySortDropdownContainer = styled.div` + margin: auto 0 auto auto; + align-self: flex-end; + @media ${({ theme }) => theme.breakpoint.smallDisplayPhone} { + align-self: flex-start; + margin: 20px 0 0; + } +`; + +const SortDropdown = styled(Dropdown)` + width: 147px; + ul { + right: 20px; + width: 147px; + } + + @media ${({ theme }) => theme.breakpoint.smallDisplayPhone} { + ul { + left: 20px; + } + } +`; + +const BodyViewOptions = ({ + currentSort, + handleLayoutSelect, + handleSortChange, + listBarLabel, + layoutStyle, +}) => ( + + + + handleSortChange(newSort.value)} + /> + + +); + +BodyViewOptions.propTypes = { + currentSort: PropTypes.string.isRequired, + handleLayoutSelect: PropTypes.func.isRequired, + handleSortChange: PropTypes.func.isRequired, + layoutStyle: PropTypes.string.isRequired, + listBarLabel: PropTypes.string.isRequired, +}; +export default BodyViewOptions; diff --git a/assets/src/dashboard/app/views/shared/index.js b/assets/src/dashboard/app/views/shared/index.js index 8f9946afbd01..8c1de8ac41e0 100644 --- a/assets/src/dashboard/app/views/shared/index.js +++ b/assets/src/dashboard/app/views/shared/index.js @@ -15,7 +15,7 @@ */ export { default as BodyWrapper } from './bodyWrapper'; -export { default as ListBarContainer } from './listBarContainer'; +export { default as BodyViewOptions } from './bodyViewOptions'; export { default as NoResults } from './noResults'; export { default as PageHeading } from './pageHeading'; export { default as StoryGridView } from './storyGridView'; diff --git a/assets/src/dashboard/app/views/shared/listBarContainer.js b/assets/src/dashboard/app/views/shared/listBarContainer.js deleted file mode 100644 index 2aea696d2b7d..000000000000 --- a/assets/src/dashboard/app/views/shared/listBarContainer.js +++ /dev/null @@ -1,26 +0,0 @@ -/* - * Copyright 2020 Google LLC - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * https://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/** - * External dependencies - */ -import styled from 'styled-components'; - -const ListBarContainer = styled.div` - margin-top: 10px; -`; - -export default ListBarContainer; diff --git a/assets/src/dashboard/app/views/templatesGallery/index.js b/assets/src/dashboard/app/views/templatesGallery/index.js index cab84d82d161..ae1b962c1f05 100644 --- a/assets/src/dashboard/app/views/templatesGallery/index.js +++ b/assets/src/dashboard/app/views/templatesGallery/index.js @@ -28,9 +28,13 @@ import styled from 'styled-components'; /** * Internal dependencies */ -import { Dropdown, ListBar } from '../../../components'; +import { Dropdown } from '../../../components'; import { DropdownContainer } from '../../../components/dropdown'; -import { VIEW_STYLE, DROPDOWN_TYPES } from '../../../constants'; +import { + VIEW_STYLE, + DROPDOWN_TYPES, + STORY_SORT_OPTIONS, +} from '../../../constants'; import { ApiContext } from '../../api/apiProvider'; import { UnitsProvider } from '../../../../edit-story/units'; import { TransformProvider } from '../../../../edit-story/components/transform'; @@ -41,7 +45,7 @@ import { PageHeading, NoResults, StoryGridView, - ListBarContainer, + BodyViewOptions, } from '../shared'; const ExploreFiltersContainer = styled.div` @@ -58,6 +62,9 @@ const ExploreFiltersContainer = styled.div` function TemplatesGallery() { const [typeaheadValue, setTypeaheadValue] = useState(''); const [viewStyle, setViewStyle] = useState(VIEW_STYLE.GRID); + const [currentTemplateSort, setCurrentTemplateSort] = useState( + STORY_SORT_OPTIONS.LAST_MODIFIED + ); const { pageSize } = usePagePreviewSize(); const { state: { templates }, @@ -95,13 +102,13 @@ function TemplatesGallery() { if (filteredTemplatesCount > 0) { return ( - - - + Date: Fri, 10 Apr 2020 16:17:53 -0700 Subject: [PATCH 2/6] tweaks to sort dropdown set up --- assets/src/dashboard/app/api/apiProvider.js | 14 +++++--------- assets/src/dashboard/app/views/myStories/index.js | 4 ++++ .../dashboard/app/views/shared/bodyViewOptions.js | 13 +++++-------- .../dashboard/app/views/templatesGallery/index.js | 4 ++++ assets/src/dashboard/constants.js | 10 +++++++++- 5 files changed, 27 insertions(+), 18 deletions(-) diff --git a/assets/src/dashboard/app/api/apiProvider.js b/assets/src/dashboard/app/api/apiProvider.js index e922ef04a3f8..bc413afe26b1 100644 --- a/assets/src/dashboard/app/api/apiProvider.js +++ b/assets/src/dashboard/app/api/apiProvider.js @@ -31,7 +31,11 @@ import apiFetch from '@wordpress/api-fetch'; * Internal dependencies */ import { useConfig } from '../config'; -import { STORY_STATUSES, STORY_SORT_OPTIONS } from '../../constants'; +import { + STORY_STATUSES, + STORY_SORT_OPTIONS, + ORDER_BY_SORT, +} from '../../constants'; import getAllTemplates from '../../templates'; export const ApiContext = createContext({ state: {}, actions: {} }); @@ -69,14 +73,6 @@ export function reshapeTemplateObject({ id, title, pages }) { }; } -const ORDER_BY_SORT = { - [STORY_SORT_OPTIONS.NAME]: 'asc', - [STORY_SORT_OPTIONS.DATE_CREATED]: 'desc', - [STORY_SORT_OPTIONS.LAST_MODIFIED]: 'desc', - [STORY_SORT_OPTIONS.LAST_OPENED]: 'desc', - [STORY_SORT_OPTIONS.NAME]: 'asc', -}; - export default function ApiProvider({ children }) { const { api, editStoryURL, pluginDir } = useConfig(); const [stories, setStories] = useState([]); diff --git a/assets/src/dashboard/app/views/myStories/index.js b/assets/src/dashboard/app/views/myStories/index.js index 277e393afb93..5d4984261863 100644 --- a/assets/src/dashboard/app/views/myStories/index.js +++ b/assets/src/dashboard/app/views/myStories/index.js @@ -136,6 +136,10 @@ function MyStories() { handleLayoutSelect={handleViewStyleBarButtonSelected} currentSort={currentStorySort} handleSortChange={setCurrentStorySort} + sortDropdownAriaLabel={__( + 'Choose sort option for display', + 'web-stories' + )} /> theme.breakpoint.smallDisplayPhone} { @@ -76,6 +71,7 @@ const BodyViewOptions = ({ handleSortChange, listBarLabel, layoutStyle, + sortDropdownAriaLabel, }) => ( handleSortChange(newSort.value)} @@ -100,5 +96,6 @@ BodyViewOptions.propTypes = { handleSortChange: PropTypes.func.isRequired, layoutStyle: PropTypes.string.isRequired, listBarLabel: PropTypes.string.isRequired, + sortDropdownAriaLabel: PropTypes.string.isRequired, }; export default BodyViewOptions; diff --git a/assets/src/dashboard/app/views/templatesGallery/index.js b/assets/src/dashboard/app/views/templatesGallery/index.js index ae1b962c1f05..046b9b44bc86 100644 --- a/assets/src/dashboard/app/views/templatesGallery/index.js +++ b/assets/src/dashboard/app/views/templatesGallery/index.js @@ -108,6 +108,10 @@ function TemplatesGallery() { handleLayoutSelect={handleViewStyleBarButtonSelected} currentSort={currentTemplateSort} handleSortChange={setCurrentTemplateSort} + sortDropdownAriaLabel={__( + 'Choose sort option for display', + 'web-stories' + )} /> Date: Mon, 13 Apr 2020 08:17:22 -0700 Subject: [PATCH 3/6] no need to rename theme since not importing at top level --- assets/src/dashboard/app/views/shared/bodyViewOptions.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/src/dashboard/app/views/shared/bodyViewOptions.js b/assets/src/dashboard/app/views/shared/bodyViewOptions.js index 05bbe8af3c7e..436612b9458f 100644 --- a/assets/src/dashboard/app/views/shared/bodyViewOptions.js +++ b/assets/src/dashboard/app/views/shared/bodyViewOptions.js @@ -31,7 +31,7 @@ const DisplayFormatContainer = styled.div` padding-bottom: 20px; padding-left: 15px; - border-bottom: ${({ theme: t }) => t.subNavigationBar.border}; + border-bottom: ${({ theme }) => theme.subNavigationBar.border}; display: flex; align-items: space-between; align-content: center; From 4caa4fe472368b0e63cd3ec5ec66671baaf69afa Mon Sep 17 00:00:00 2001 From: Brittany Feenstra Date: Mon, 13 Apr 2020 10:39:12 -0700 Subject: [PATCH 4/6] fixing typo in dropdown checking which type of dropdown is being asked for instead of checking for a contant that would block the rest of functionality - this is why the menu was not closing on sort --- assets/src/dashboard/components/dropdown/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/src/dashboard/components/dropdown/index.js b/assets/src/dashboard/components/dropdown/index.js index 56b2b9caac89..b0c385ff0eed 100644 --- a/assets/src/dashboard/components/dropdown/index.js +++ b/assets/src/dashboard/components/dropdown/index.js @@ -121,14 +121,14 @@ const Dropdown = ({ }; const handleMenuItemSelect = (item) => { - if (DROPDOWN_TYPES.PANEL) { + if (type === DROPDOWN_TYPES.PANEL) { onChange(item); return; } - if (!item.value) { return; } + if (onChange) { onChange(item); } From 5902af9e8fcedf649b0925aa43cd8985c66ea878 Mon Sep 17 00:00:00 2001 From: Brittany Feenstra Date: Mon, 13 Apr 2020 10:46:03 -0700 Subject: [PATCH 5/6] removing bottom border between dashboard grid view filters and grid and removing bg color on dropdown (transparent type) --- assets/src/dashboard/app/views/shared/bodyViewOptions.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/assets/src/dashboard/app/views/shared/bodyViewOptions.js b/assets/src/dashboard/app/views/shared/bodyViewOptions.js index 436612b9458f..90ccf2aa0f36 100644 --- a/assets/src/dashboard/app/views/shared/bodyViewOptions.js +++ b/assets/src/dashboard/app/views/shared/bodyViewOptions.js @@ -24,14 +24,12 @@ import PropTypes from 'prop-types'; * Internal dependencies */ import { Dropdown, ListBar } from '../../../components'; -import { STORY_SORT_MENU_ITEMS } from '../../../constants'; +import { STORY_SORT_MENU_ITEMS, DROPDOWN_TYPES } from '../../../constants'; const DisplayFormatContainer = styled.div` margin: ${({ theme }) => `${theme.pageGutter.desktop}px 0`}; padding-bottom: 20px; padding-left: 15px; - - border-bottom: ${({ theme }) => theme.subNavigationBar.border}; display: flex; align-items: space-between; align-content: center; @@ -83,6 +81,7 @@ const BodyViewOptions = ({ handleSortChange(newSort.value)} /> From c973f891c5469cfaa22d999305544fdb2184a3cb Mon Sep 17 00:00:00 2001 From: Brittany Feenstra Date: Mon, 13 Apr 2020 10:56:11 -0700 Subject: [PATCH 6/6] sort dropdown and transparent dropdown for that matter, should have gray arrow not blue --- assets/src/dashboard/theme.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/src/dashboard/theme.js b/assets/src/dashboard/theme.js index e6242d60d4c9..1d8c9c7dfdef 100644 --- a/assets/src/dashboard/theme.js +++ b/assets/src/dashboard/theme.js @@ -91,7 +91,7 @@ const theme = { activeBackground: 'transparent', borderRadius: 0, border: 'none', - arrowColor: colors.bluePrimary, + arrowColor: colors.gray300, height: '40px', }, },