Skip to content

GitLab

S
scratch-www
Unverified Commit ac2ee91d authored by Eric Rosenbaum's avatar Eric Rosenbaum Committed by GitHub
Browse files
Options

Merge pull request #5533 from LLK/develop 

merge develop into release branch (add promote to manager modal)
parents d86d7b4f be047a5a
Hide whitespace changes
Inline Side-by-side
Showing with 167 additions and 19 deletions
src/views/studio/l10n.json
View file @ ac2ee91d
...@@ -58,9 +58,16 @@ ...@@ -58,9 +58,16 @@
"studio.curatorErrors.alreadyCurator": "They are already part of the studio.", "studio.curatorErrors.alreadyCurator": "They are already part of the studio.",
"studio.curatorErrors.unknownUsername": "Could not invite a curator with that username.", "studio.curatorErrors.unknownUsername": "Could not invite a curator with that username.",
"studio.curatorErrors.tooFast": "You are adding curators too fast.", "studio.curatorErrors.tooFast": "You are adding curators too fast.",
"studio.curatorDoYouWantToPromote": "Do you want to promote this person to a manager?",
"studio.curatorManagersCan": "Managers can...",
"studio.curatorAddAndDeleteCurators": "add and delete curators",
"studio.curatorDeleteManagers": "delete other managers",
"studio.curatorAddAndDeleteProjects": "add and delete projects",
"studio.curatorIfYouTrust": "If you trust this person and you’re sure you want to give them extra permissions, click Promote.",
"studio.remove": "Remove", "studio.remove": "Remove",
"studio.promote": "Promote", "studio.promote": "Promote",
"studio.cancel": "Cancel",
"studio.commentsHeader": "Comments", "studio.commentsHeader": "Comments",
"studio.commentsNotAllowed": "Commenting for this studio has been turned off.", "studio.commentsNotAllowed": "Commenting for this studio has been turned off.",
......
src/views/studio/modals/promote-modal.jsx 0 → 100644
View file @ ac2ee91d
import React from 'react';
import PropTypes from 'prop-types';
import {FormattedMessage} from 'react-intl';
import Modal from '../../../components/modal/base/modal.jsx';
import ModalTitle from '../../../components/modal/base/modal-title.jsx';
import ModalInnerContent from '../../../components/modal/base/modal-inner-content.jsx';
import './promote-modal.scss';
const PromoteModal = ({
handleClose,
handlePromote,
username
}) => (
<Modal
isOpen
className="promote-modal"
onRequestClose={handleClose}
>
<ModalTitle
className="promote-title"
/>
<div
className="promote-content"
>
<img
src="/svgs/studio/promote-illustration.svg"
className="promote-image"
/>
<ModalInnerContent
className="promote-inner"
>
<h2>
<FormattedMessage id="studio.curatorDoYouWantToPromote" />
<br />
{username}
</h2>
<span><FormattedMessage id="studio.curatorManagersCan" /></span>
<ul>
<li><FormattedMessage id="studio.curatorAddAndDeleteCurators" /></li>
<li><FormattedMessage id="studio.curatorDeleteManagers" /></li>
<li><FormattedMessage id="studio.curatorAddAndDeleteProjects" /></li>
</ul>
<span><FormattedMessage id="studio.curatorIfYouTrust" /></span>
<div
className="promote-button-row"
>
<button
className="button cancel-button"
onClick={handleClose}
>
<FormattedMessage id="studio.cancel" />
</button>
<button
className="button"
onClick={handlePromote}
>
<FormattedMessage id="studio.promote" />
</button>
</div>
</ModalInnerContent>
</div>
</Modal>
);
PromoteModal.propTypes = {
handleClose: PropTypes.func,
handlePromote: PropTypes.func,
username: PropTypes.string
};
export default PromoteModal;
src/views/studio/modals/promote-modal.scss 0 → 100644
View file @ ac2ee91d
@import "../../../colors";
.promote-modal {
.promote-title {
background: $ui-blue;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
padding-top: .75rem;
width: 100%;
height: 3rem;
cursor: pointer;
}
h2 {
line-height: 2.5rem;
margin-bottom: 1rem;
}
ul {
line-height: 1rem;
}
.promote-content {
display: flex;
align-items: flex-start;
}
.promote-image {
margin-top: 2rem;
}
.promote-inner {
padding: 2rem;
}
.promote-button-row {
display: flex;
justify-content: flex-end;
}
.button {
margin-left: 0.5rem;
}
.cancel-button {
background-color: $ui-white;
color: $ui-blue;
box-shadow: 0px 0px 0 1px $ui-blue;
}
}
src/views/studio/studio-member-tile.jsx
View file @ ac2ee91d
...@@ -5,6 +5,8 @@ import {connect} from 'react-redux'; ...@@ -5,6 +5,8 @@ import {connect} from 'react-redux';
import classNames from 'classnames'; import classNames from 'classnames';
import {FormattedMessage} from 'react-intl'; import {FormattedMessage} from 'react-intl';
import PromoteModal from './modals/promote-modal.jsx';
import { import {
selectCanRemoveCurator, selectCanRemoveManager, selectCanPromoteCurators selectCanRemoveCurator, selectCanRemoveManager, selectCanPromoteCurators
} from '../../redux/studio-permissions'; } from '../../redux/studio-permissions';
...@@ -24,6 +26,7 @@ const StudioMemberTile = ({ ...@@ -24,6 +26,7 @@ const StudioMemberTile = ({
username, image // own props username, image // own props
}) => { }) => {
const [submitting, setSubmitting] = useState(false); const [submitting, setSubmitting] = useState(false);
const [modalOpen, setModalOpen] = useState(false);
const {errorAlert, successAlert} = useAlertContext(); const {errorAlert, successAlert} = useAlertContext();
const userUrl = `/users/${username}`; const userUrl = `/users/${username}`;
return ( return (
...@@ -45,26 +48,8 @@ const StudioMemberTile = ({ ...@@ -45,26 +48,8 @@ const StudioMemberTile = ({
<OverflowMenu> <OverflowMenu>
{canPromote && <li> {canPromote && <li>
<button <button
className={classNames({
'mod-mutating': submitting
})}
disabled={submitting}
onClick={() => { onClick={() => {
setSubmitting(true); setModalOpen(true);
onPromote(username)
.then(() => {
successAlert({
id: 'studio.alertManagerPromote',
values: {name: username}
});
})
.catch(() => {
errorAlert({
id: 'studio.alertManagerPromoteError',
values: {name: username}
});
setSubmitting(false);
});
}} }}
> >
<img src={promoteIcon} /> <img src={promoteIcon} />
...@@ -94,6 +79,27 @@ const StudioMemberTile = ({ ...@@ -94,6 +79,27 @@ const StudioMemberTile = ({
</li>} </li>}
</OverflowMenu> </OverflowMenu>
} }
{modalOpen &&
<PromoteModal
handleClose={() => setModalOpen(false)}
handlePromote={() => {
onPromote(username)
.then(() => {
successAlert({
id: 'studio.alertManagerPromote',
values: {name: username}
});
})
.catch(() => {
errorAlert({
id: 'studio.alertManagerPromoteError',
values: {name: username}
});
});
}}
username={username}
/>
}
</div> </div>
); );
}; };
......
static/svgs/studio/promote-illustration.svg 0 → 100644
View file @ ac2ee91d
<svg width="190" height="188" viewBox="0 0 190 188" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="190" height="188">
<rect width="190" height="187.853" fill="#C4C4C4"/>
</mask>
<g mask="url(#mask0)">
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M48.2863 7.01099C-26.1432 21.8371 -39.6529 68.6058 -22.1209 121.141C-2.67413 179.413 40.1423 187.854 72.0237 187.854C132.41 187.854 170.703 132.907 167.374 86.0398C162.702 20.2606 116.204 -11.8127 48.2863 7.01099Z" fill="#0FBD8C"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M85.9406 88.4502C84.1234 91.9029 80.5282 93.8792 76.7849 93.4857L65.4775 92.2973C65.4785 92.6363 65.4793 92.9739 65.4801 93.3101C65.5081 104.802 65.5319 114.605 71.0832 123.487C75.1376 129.974 79.2076 134.319 82.2838 137.602C85.5685 141.109 87.7201 143.406 87.5097 145.81C87.1025 150.465 73.354 147.95 60.968 138.266C48.5819 128.582 45.1431 117.469 43.7689 107.967C42.9683 102.431 42.896 95.1075 42.8678 89.9209L30.3232 88.6024C26.5741 88.2084 23.4684 85.5278 22.4146 81.7733C21.3556 78.0122 22.5737 73.9795 25.5155 71.4966L51.292 49.7461C53.2275 48.1124 55.6553 47.3518 58.1162 47.6104C60.5828 47.8697 62.7995 49.1185 64.3473 51.1182L85.0441 77.7533C87.3995 80.793 87.7584 84.9914 85.9406 88.4502Z" fill="white"/>
<path d="M139.916 120.504C135.073 116.185 132.034 109.965 132.034 103.051C132.034 90.0082 142.847 79.4351 156.186 79.4351C169.526 79.4351 180.339 90.0082 180.339 103.051C180.339 109.966 177.299 116.187 172.455 120.506C179.36 125.744 184.599 134.709 187.459 146.951C192.251 167.458 192.147 178.159 155.333 178.159C117.263 178.159 118.657 170.339 121.879 152.275L121.88 152.272C122.046 151.341 122.217 150.384 122.387 149.398C123.072 145.444 124.196 141.72 125.681 138.289C125.594 138.27 125.506 138.252 125.419 138.233C115.666 136.123 103.5 130.492 95.4593 116.666C92.9914 112.422 94.4308 106.981 98.6744 104.513C102.918 102.046 108.359 103.485 110.827 107.729C115.689 116.089 122.84 119.486 129.177 120.857C132.387 121.552 135.307 121.697 137.415 121.664C137.753 121.658 138.068 121.649 138.356 121.636C138.868 121.242 139.389 120.865 139.916 120.504Z" fill="#0EBD8C"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M115.996 44.6556L116.503 52.4363L110.381 57.269C108.294 58.9136 109.001 62.2351 111.575 62.8917L119.136 64.8123L121.837 72.1291C122.757 74.62 126.136 74.9753 127.553 72.7304L131.716 66.1345L139.51 65.8271C142.165 65.7208 143.544 62.6186 141.849 60.5752L136.861 54.5783L138.976 47.0717C139.697 44.5128 137.174 42.2402 134.706 43.2253L127.458 46.1116L120.975 41.7813C118.765 40.3088 115.826 42.0056 115.996 44.6556Z" fill="#0FBD8C"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M163.278 16.3101L160.308 17.2026L157.887 15.2625C157.063 14.6008 155.839 15.1719 155.815 16.2283L155.747 19.3303L153.153 21.0321C152.27 21.6115 152.434 22.9527 153.431 23.3011L156.36 24.3244L157.176 27.3175C157.455 28.337 158.781 28.594 159.421 27.7542L161.299 25.2845L164.398 25.4325C165.454 25.4828 166.109 24.3015 165.506 23.4333L163.739 20.8824L164.837 17.9824C165.21 16.9942 164.29 16.007 163.278 16.3101Z" fill="#0FBD8C"/>
</g>
</svg>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment