From 6bb47eb6958ecc55d44f11e7eecd2c5594dd62f0 Mon Sep 17 00:00:00 2001 From: Alexander Lee Date: Wed, 18 Nov 2020 17:07:17 +0800 Subject: [PATCH 1/9] Fix: updated styling for folder --- src/components/FolderCard.jsx | 2 +- src/styles/isomer-cms/pages/Content.module.scss | 15 +++++++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/src/components/FolderCard.jsx b/src/components/FolderCard.jsx index bab7153a3..cd2c12fbe 100644 --- a/src/components/FolderCard.jsx +++ b/src/components/FolderCard.jsx @@ -22,7 +22,7 @@ const FolderCard = ({ return (
- + {displayText} { isHomepage diff --git a/src/styles/isomer-cms/pages/Content.module.scss b/src/styles/isomer-cms/pages/Content.module.scss index 0d8f04173..07a1f66dc 100644 --- a/src/styles/isomer-cms/pages/Content.module.scss +++ b/src/styles/isomer-cms/pages/Content.module.scss @@ -133,6 +133,7 @@ .boxesContainer{ @include cardFormat; + overflow: hidden; .card{ width: $component-card-width; @@ -161,6 +162,17 @@ margin-bottom: $component-folder-margin; min-width: 250px; color:black; + text-overflow: ellipsis; + .componentIcon{ + display: flex; + flex-direction: column; + justify-content: center; + align-content: flex-end; + + .bx{ + font-size: 20px; + } + } } } } @@ -241,6 +253,9 @@ @extend .componentInfo; flex-direction: row; width: 100%; + height: 100%; + white-space: nowrap; + text-overflow: ellipsis; } } From 6aef2a50fc717ecb69d19d8f72b9e93f0a68e197 Mon Sep 17 00:00:00 2001 From: Alexander Lee Date: Wed, 18 Nov 2020 17:07:27 +0800 Subject: [PATCH 2/9] Fix: updated styling for media card --- src/styles/isomer-cms/pages/Media.module.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/styles/isomer-cms/pages/Media.module.scss b/src/styles/isomer-cms/pages/Media.module.scss index 47084bfe7..c5bb0aa0f 100644 --- a/src/styles/isomer-cms/pages/Media.module.scss +++ b/src/styles/isomer-cms/pages/Media.module.scss @@ -111,6 +111,9 @@ font-size: .9em; color: $body-text; margin-bottom: 5px; + overflow:hidden; + white-space: nowrap; + text-overflow: ellipsis; } .mediaCardDate{ From a578bd3e64d22da1ff2b36b7b0e1d8e26c14987a Mon Sep 17 00:00:00 2001 From: Alexander Lee Date: Thu, 19 Nov 2020 14:37:25 +0800 Subject: [PATCH 3/9] Fix: handle modal closing on blur for OverviewCard --- src/components/OverviewCard.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/OverviewCard.jsx b/src/components/OverviewCard.jsx index b9ad9aa76..323502b37 100644 --- a/src/components/OverviewCard.jsx +++ b/src/components/OverviewCard.jsx @@ -221,7 +221,7 @@ const OverviewCard = ({
} {canShowFileMoveDropdown && -
+
Move to
From 002095059b9089e5fa23fb861fe55e13cdc51dac Mon Sep 17 00:00:00 2001 From: Alexander Lee Date: Thu, 19 Nov 2020 14:55:43 +0800 Subject: [PATCH 4/9] Feat: add folderModal to allow users to change name of folders --- src/components/FolderCard.jsx | 72 ++++++++++++++++++++++------------ src/components/FolderModal.jsx | 67 +++++++++++++++++++++++++++++++ 2 files changed, 113 insertions(+), 26 deletions(-) create mode 100644 src/components/FolderModal.jsx diff --git a/src/components/FolderCard.jsx b/src/components/FolderCard.jsx index cd2c12fbe..9e84ffbde 100644 --- a/src/components/FolderCard.jsx +++ b/src/components/FolderCard.jsx @@ -1,8 +1,9 @@ -import React from 'react'; +import React, { useState } from 'react'; import { Link } from 'react-router-dom'; import PropTypes from 'prop-types'; import elementStyles from '../styles/isomer-cms/Elements.module.scss'; import contentStyles from '../styles/isomer-cms/pages/Content.module.scss'; +import FolderModal from './FolderModal'; const FolderCard = ({ displayText, @@ -13,6 +14,8 @@ const FolderCard = ({ siteName, category, }) => { + const [isFolderModalOpen, setIsFolderModalOpen] = useState(false) + const generateLink = () => { if (isHomepage) return `/sites/${siteName}/homepage` if (isCollection) return `/sites/${siteName}/collections/${category}` @@ -20,31 +23,48 @@ const FolderCard = ({ } return ( - -
- - {displayText} - { - isHomepage - ? '' - : ( -
- -
- ) - } -
- + <> + { + isFolderModalOpen + && ( + setIsFolderModalOpen(false)} + category={category} + siteName={siteName} + isCollection={isCollection} + /> + ) + } + +
+ + {displayText} + { + isHomepage + ? '' + : ( +
+ +
+ ) + } +
+ + ) } diff --git a/src/components/FolderModal.jsx b/src/components/FolderModal.jsx new file mode 100644 index 000000000..3feec97fa --- /dev/null +++ b/src/components/FolderModal.jsx @@ -0,0 +1,67 @@ +import React, { useState } from 'react'; +import axios from 'axios'; +import PropTypes from 'prop-types'; +import elementStyles from '../styles/isomer-cms/Elements.module.scss'; +import SaveDeleteButtons from './SaveDeleteButtons'; +import FormField from './FormField'; + +// axios settings +axios.defaults.withCredentials = true + +const FolderModal = ({ displayTitle, displayText, onClose, category, siteName, isCollection }) => { + const [newCategoryName, setNewCategoryName] = useState(category) + + const folderNameChangeHandler = (event) => { + const { value } = event.target + setNewCategoryName(value) + } + + const saveHandler = async () => { + try { + await axios.post(`${process.env.REACT_APP_BACKEND_URL}/sites/${siteName}/${isCollection ? 'collections' : 'resources'}/${category}/rename/${newCategoryName}`) + // Refresh page + window.location.reload(); + } catch (err) { + console.log(err); + } + } + + return ( +
+
+
+

+ {displayTitle} +

+ +
+
+ +
+ +
+ +
+
+ ) +}; + +FolderModal.propTypes = { + displayTitle: PropTypes.string.isRequired, + displayText: PropTypes.string.isRequired, + onProceed: PropTypes.func.isRequired, + onCancel: PropTypes.func.isRequired, +}; + +export default FolderModal; From 7fb8d0f183721e8089daa4504f95db9a7432096d Mon Sep 17 00:00:00 2001 From: Alexander Lee Date: Thu, 19 Nov 2020 15:06:46 +0800 Subject: [PATCH 5/9] Fix: remove resource room name change from settings --- src/layouts/Settings.jsx | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/src/layouts/Settings.jsx b/src/layouts/Settings.jsx index d7da5d8ce..cc944cccf 100644 --- a/src/layouts/Settings.jsx +++ b/src/layouts/Settings.jsx @@ -17,7 +17,6 @@ import { validateSocialMedia } from '../utils/validators'; const stateFields = { title: '', favicon: '', - resources_name: '', colors: { 'primary-color': '', 'secondary-color': '', @@ -218,14 +217,11 @@ export default class Settings extends Component { const { title, favicon, - // eslint-disable-next-line camelcase - resources_name, colors, } = this.state; const configSettings = { title, favicon, - resources_name, colors, }; @@ -349,7 +345,6 @@ export default class Settings extends Component { siteName, title, favicon, - resources_name: resourcesName, colors, socialMediaContent, otherFooterSettings, @@ -365,7 +360,7 @@ export default class Settings extends Component { const { location } = this.props; // retrieve errors - const hasConfigErrors = _.some([errors.title, errors.favicon, errors.resources_name]); + const hasConfigErrors = _.some([errors.favicon]); const hasColorErrors = _.some([errors.colors.primaryColor, errors.colors.secondaryColor]); const hasMediaColorErrors = _.some(errors.colors['media-colors'].map((mediaColor) => mediaColor.color)); const hasSocialMediaErrors = _.some(Object.values(errors.socialMediaContent)); @@ -410,15 +405,6 @@ export default class Settings extends Component { placeholder=" " type="image" /> - {/* Resource room name field */} - {/* Color fields */}

Colors

From 80aabb12690ecd67986860b5e668a101efa90121 Mon Sep 17 00:00:00 2001 From: Alexander Lee Date: Thu, 19 Nov 2020 17:12:15 +0800 Subject: [PATCH 6/9] Feat: add dropdown to FolderCard --- src/components/FolderCard.jsx | 92 +++++++++++++++---- .../isomer-cms/pages/Content.module.scss | 5 +- 2 files changed, 79 insertions(+), 18 deletions(-) diff --git a/src/components/FolderCard.jsx b/src/components/FolderCard.jsx index 9e84ffbde..83951d39d 100644 --- a/src/components/FolderCard.jsx +++ b/src/components/FolderCard.jsx @@ -1,9 +1,16 @@ -import React, { useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { Link } from 'react-router-dom'; import PropTypes from 'prop-types'; +import axios from 'axios'; + +import FolderModal from './FolderModal'; +import DeleteWarningModal from './DeleteWarningModal' + import elementStyles from '../styles/isomer-cms/Elements.module.scss'; import contentStyles from '../styles/isomer-cms/pages/Content.module.scss'; -import FolderModal from './FolderModal'; + +// axios settings +axios.defaults.withCredentials = true const FolderCard = ({ displayText, @@ -15,37 +22,76 @@ const FolderCard = ({ category, }) => { const [isFolderModalOpen, setIsFolderModalOpen] = useState(false) + const [canShowDropdown, setCanShowDropdown] = useState(false) + const [canShowDeleteWarningModal, setCanShowDeleteWarningModal] = useState(false) + const dropdownRef = useRef(null) + useEffect(() => { + if (canShowDropdown) dropdownRef.current.focus() + }, [canShowDropdown]) + const generateLink = () => { if (isHomepage) return `/sites/${siteName}/homepage` if (isCollection) return `/sites/${siteName}/collections/${category}` return `/sites/${siteName}/resources/${category}` } + const MenuItem = ({handler, id, children}) => { + return ( +
{ + e.stopPropagation(); + e.preventDefault(); + if (handler) handler(e); + }} + className={`${elementStyles.dropdownItem}`} + > + {children} +
+ ) + } + + const deleteHandler = async () => { + try { + const apiUrl = `${process.env.REACT_APP_BACKEND_URL}/sites/${siteName}/${isCollection ? `/collections/${category}` : `/resources/${category}`}` + await axios.delete(apiUrl); + + // Refresh page + window.location.reload(); + } catch (err) { + console.log(err); + } + } + return ( <> - { - isFolderModalOpen - && ( - setIsFolderModalOpen(false)} - category={category} - siteName={siteName} - isCollection={isCollection} - /> - ) + { isFolderModalOpen && + setIsFolderModalOpen(false)} + category={category} + siteName={siteName} + isCollection={isCollection} + /> + } + { canShowDeleteWarningModal && + setCanShowDeleteWarningModal(false)} + onDelete={deleteHandler} + type="folder" + /> } -
+
{displayText} { isHomepage ? '' : ( -
+
+ { canShowDropdown && +
setCanShowDropdown(false)}> + {dropdownRef.current.blur(); setIsFolderModalOpen(true)}} id={`folderSettings-${itemIndex}`}> + +
Rename
+ + {dropdownRef.current.blur(); setCanShowDeleteWarningModal(true)}} id={`folderDelete-${itemIndex}`}> + +
Delete folder
+ +
+ }
) } diff --git a/src/styles/isomer-cms/pages/Content.module.scss b/src/styles/isomer-cms/pages/Content.module.scss index 07a1f66dc..b422349eb 100644 --- a/src/styles/isomer-cms/pages/Content.module.scss +++ b/src/styles/isomer-cms/pages/Content.module.scss @@ -191,7 +191,6 @@ flex-direction: column; justify-content: space-between; align-content: center; - overflow: hidden; .componentCategory{ text-transform: uppercase; @@ -256,6 +255,10 @@ height: 100%; white-space: nowrap; text-overflow: ellipsis; + i { + vertical-align: middle; + line-height:inherit; + } } } From 9aececa5cd1c7dce8e06d74e50eeb553379c9ca1 Mon Sep 17 00:00:00 2001 From: Alexander Lee Date: Thu, 19 Nov 2020 17:12:35 +0800 Subject: [PATCH 7/9] Fix: close dropdown on OverviewCard when delete button is used --- src/components/OverviewCard.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/OverviewCard.jsx b/src/components/OverviewCard.jsx index 323502b37..4fa3ffd29 100644 --- a/src/components/OverviewCard.jsx +++ b/src/components/OverviewCard.jsx @@ -215,7 +215,7 @@ const OverviewCard = ({
Move to
- setCanShowDeleteWarningModal(true)}> + {dropdownRef.current.blur(); setCanShowDeleteWarningModal(true)}}>
Delete item
 From 697b4c7cbed36050b2a91809324cf3fc3fb5200b Mon Sep 17 00:00:00 2001 From: Alexander Lee Date: Fri, 20 Nov 2020 10:32:03 +0800 Subject: [PATCH 8/9] Fix: adjust FolderModal proptypes --- src/components/FolderModal.jsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/FolderModal.jsx b/src/components/FolderModal.jsx index 3feec97fa..960eb9eda 100644 --- a/src/components/FolderModal.jsx +++ b/src/components/FolderModal.jsx @@ -44,13 +44,11 @@ const FolderModal = ({ displayTitle, displayText, onClose, category, siteName, i value={newCategoryName} onFieldChange={folderNameChangeHandler} /> -
- -
+
@@ -60,8 +58,10 @@ const FolderModal = ({ displayTitle, displayText, onClose, category, siteName, i FolderModal.propTypes = { displayTitle: PropTypes.string.isRequired, displayText: PropTypes.string.isRequired, - onProceed: PropTypes.func.isRequired, - onCancel: PropTypes.func.isRequired, + onClose: PropTypes.func.isRequired, + category: PropTypes.string.isRequired, + siteName: PropTypes.string.isRequired, + isCollection: PropTypes.bool, }; export default FolderModal; From 583bedc98151581efcf6afe1a21147cf9d1bbcc9 Mon Sep 17 00:00:00 2001 From: Alexander Lee Date: Fri, 20 Nov 2020 10:32:22 +0800 Subject: [PATCH 9/9] Fix: right align modal buttons --- src/styles/isomer-cms/elements/modal.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/isomer-cms/elements/modal.scss b/src/styles/isomer-cms/elements/modal.scss index eb2d8ee10..bd6c69d58 100644 --- a/src/styles/isomer-cms/elements/modal.scss +++ b/src/styles/isomer-cms/elements/modal.scss @@ -79,6 +79,7 @@ display: flex; flex-direction: row; justify-content: flex-start; + margin-left: auto; } } }