Skip to content

GitLab

S
scratch-www
Commit a16ef0c3 authored by Eric Rosenbaum's avatar Eric Rosenbaum
Browse files
Options

first step of transfer ownership modal

parent 2a3a5052
Hide whitespace changes
Inline Side-by-side
Showing with 220 additions and 9 deletions
src/redux/studio-permissions.js
View file @ a16ef0c3
......@@ -54,6 +54,9 @@ const selectCanRemoveManager = (state, managerId) =>
!selectIsMuted(state) && (selectIsAdmin(state) || isManager(state)) && managerId !== state.studio.owner;
const selectCanPromoteCurators = state => !selectIsMuted(state) && isManager(state);
const selectCanTransferOwnership = (state, managerId) =>
managerId === state.studio.owner && isCreator(state);
const selectCanRemoveProject = (state, creatorUsername, actorId) => {
if (selectIsMuted(state)) return false;
......@@ -99,6 +102,7 @@ export {
selectCanRemoveCurator,
selectCanRemoveManager,
selectCanPromoteCurators,
selectCanTransferOwnership,
selectCanRemoveProject,
selectShowCommentsList,
selectShowCommentsGloballyOffError,
......
src/views/studio/l10n.json
View file @ a16ef0c3
......@@ -88,10 +88,18 @@
"studio.managerThresholdInfo": "This studio has {numberOfManagers} managers. Studios can have a maximum of {managerLimit} managers.",
"studio.managerThresholdRemoveManagers": "Before you can add another manager, you will need to remove managers until there are fewer than {managerLimit}.",
"studio.transferOwnership.youAreAboutToGive": "You are about to give your studio ownership to another Scratcher.",
"studio.transferOwnership.cannotUndo": "You cannot undo this.",
"studio.transferOwnership.thisMeans": "This means...",
"studio.transferOwnership.noLongerEdit": "You will no longer be able to edit the studio",
"studio.transferOwnership.noLongerDelete": "You will no longer be able to delete the studio",
"studio.remove": "Remove",
"studio.promote": "Promote",
"studio.transferOwnership": "Transfer ownership",
"studio.cancel": "Cancel",
"studio.okay": "Okay",
"studio.next": "Next",
"studio.commentsHeader": "Comments",
"studio.commentsNotAllowed": "Commenting for this studio has been turned off.",
......
src/views/studio/modals/transfer-ownership-modal.jsx 0 → 100644
View file @ a16ef0c3
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 AlertComponent from '../../../components/alert/alert-component.jsx';
import errorIcon from '../../../components/alert/icon-alert-error.svg';
import './transfer-ownership-modal.scss';
const TransferOwnershipModal = ({
handleClose
}) => {
return <Modal
isOpen
className="transfer-ownership-modal"
onRequestClose={handleClose}
>
<ModalTitle
className="transfer-ownership-title"
title={<FormattedMessage id="studio.transferOwnership" />}
/>
<div className="content">
<img
src="/svgs/studio/transfer-ownership.svg"
className="transfer-ownership-image"
/>
<ModalInnerContent
className="inner"
>
<h2>
<FormattedMessage id="studio.transferOwnership.youAreAboutToGive" />
</h2>
<div className='transfer-ownership-alert-wrapper'>
<AlertComponent
className='alert-error transfer-ownership-alert'
icon={errorIcon}
id='studio.transferOwnership.cannotUndo'
/>
</div>
<span
className="list-header"
>
<FormattedMessage id="studio.transferOwnership.thisMeans" />
</span>
<ul>
<li><FormattedMessage id="studio.transferOwnership.noLongerEdit" /></li>
<li><FormattedMessage id="studio.transferOwnership.noLongerDelete" /></li>
</ul>
<div
className="transfer-ownership-button-row"
>
<button
className="button cancel-button"
onClick={handleClose}
>
<FormattedMessage id="studio.cancel" />
</button>
<button
className="button next-button"
// onClick={}
>
<FormattedMessage id="studio.next" />
</button>
</div>
</ModalInnerContent>
</div>
</Modal>
};
TransferOwnershipModal.propTypes = {
handleClose: PropTypes.func,
handlePromote: PropTypes.func,
username: PropTypes.string
};
export default TransferOwnershipModal;
src/views/studio/modals/transfer-ownership-modal.scss 0 → 100644
View file @ a16ef0c3
@import "../../../colors";
.transfer-ownership-modal {
.transfer-ownership-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;
}
.list-header {
font-weight: bold;
}
ul {
line-height: 1rem;
margin-top: 0px;
}
.content {
display: flex;
align-items: flex-start;
}
.transfer-ownership-image {
margin-top: 2rem;
}
.inner {
padding: 2rem;
}
.transfer-ownership-alert-wrapper .alert-wrapper {
position: relative;
display: block;
margin-bottom: 2rem;
}
.transfer-ownership-alert .alert-msg {
font-size: 16px;
}
.transfer-ownership-button-row {
display: flex;
justify-content: flex-end;
padding-top: 1.5rem;
}
.button {
margin-left: 0.5rem;
}
.cancel-button {
background-color: $ui-white;
color: $ui-blue;
box-shadow: 0px 0px 0 1px $ui-blue;
}
.next-button {
min-width: 5rem;
}
}
\ No newline at end of file
src/views/studio/studio-member-tile.jsx
View file @ a16ef0c3
......@@ -7,9 +7,11 @@ import {FormattedMessage} from 'react-intl';
import PromoteModal from './modals/promote-modal.jsx';
import ManagerLimitModal from './modals/manager-limit-modal.jsx';
import TransferOwnershipModal from './modals/transfer-ownership-modal.jsx';
import {
selectCanRemoveCurator, selectCanRemoveManager, selectCanPromoteCurators
selectCanRemoveCurator, selectCanRemoveManager, selectCanPromoteCurators,
selectCanTransferOwnership
} from '../../redux/studio-permissions';
import {
Errors,
......@@ -26,11 +28,12 @@ import removeIcon from './icons/remove-icon.svg';
import promoteIcon from './icons/curator-icon.svg';
const StudioMemberTile = ({
canRemove, canPromote, onRemove, onPromote, isCreator, hasReachedManagerLimit, // mapState props
canRemove, canPromote, onRemove, canTransferOwnership, onPromote, isCreator, hasReachedManagerLimit, // mapState props
username, image // own props
}) => {
const [submitting, setSubmitting] = useState(false);
const [modalOpen, setModalOpen] = useState(false);
const [promoteModalOpen, setPromoteModalOpen] = useState(false);
const [transferOwnershipModalOpen, setTransferOwnershipModalOpen] = useState(false);
const [managerLimitReached, setManagerLimitReached] = useState(false);
const {errorAlert, successAlert} = useAlertContext();
const userUrl = `/users/${username}`;
......@@ -49,12 +52,12 @@ const StudioMemberTile = ({
>{username}</a>
{isCreator && <div className="studio-member-role"><FormattedMessage id="studio.creatorRole" /></div>}
</div>
{(canRemove || canPromote) &&
{(canRemove || canPromote || canTransferOwnership) &&
<OverflowMenu>
{canPromote && <li>
<button
onClick={() => {
setModalOpen(true);
setPromoteModalOpen(true);
}}
>
<img src={promoteIcon} />
......@@ -82,15 +85,26 @@ const StudioMemberTile = ({
<FormattedMessage id="studio.remove" />
</button>
</li>}
{canTransferOwnership && <li>
<button
className="studio-member-tile-menu-wide"
onClick={() => {
setTransferOwnershipModalOpen(true);
}}
>
<img src={promoteIcon} />
<FormattedMessage id="studio.transferOwnership" />
</button>
</li>}
</OverflowMenu>
}
{modalOpen &&
{promoteModalOpen &&
((hasReachedManagerLimit || managerLimitReached) ?
<ManagerLimitModal
handleClose={() => setModalOpen(false)}
handleClose={() => setPromoteModalOpen(false)}
/> :
<PromoteModal
handleClose={() => setModalOpen(false)}
handleClose={() => setPromoteModalOpen(false)}
handlePromote={() => {
onPromote(username)
.then(() => {
......@@ -102,7 +116,7 @@ const StudioMemberTile = ({
.catch(error => {
if (error === Errors.MANAGER_LIMIT) {
setManagerLimitReached(true);
setModalOpen(true);
setPromoteModalOpen(true);
} else {
errorAlert({
id: 'studio.alertManagerPromoteError',
......@@ -115,6 +129,11 @@ const StudioMemberTile = ({
/>
)
}
{transferOwnershipModalOpen &&
<TransferOwnershipModal
handleClose={() => setTransferOwnershipModalOpen(false)}
/>
}
</div>
);
};
......@@ -122,6 +141,7 @@ const StudioMemberTile = ({
StudioMemberTile.propTypes = {
canRemove: PropTypes.bool,
canPromote: PropTypes.bool,
canTransferOwnership: PropTypes.bool,
onRemove: PropTypes.func,
onPromote: PropTypes.func,
username: PropTypes.string,
......@@ -134,6 +154,7 @@ const ManagerTile = connect(
(state, ownProps) => ({
canRemove: selectCanRemoveManager(state, ownProps.id),
canPromote: false,
canTransferOwnership: selectCanTransferOwnership(state, ownProps.id),
isCreator: state.studio.owner === ownProps.id
}),
{
......
src/views/studio/studio.scss
View file @ a16ef0c3
......@@ -399,6 +399,11 @@ $radius: 8px;
background: transparent;
border: none;
}
.studio-member-tile-menu-wide {
white-space: nowrap;
padding-right: 2rem !important;
}
}
.studio-members + .studio-members {
......
static/svgs/studio/icon-alert-error.svg 0 → 100644
View file @ a16ef0c3
<svg width="28" height="20" viewBox="-2 -1 15 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.40571 6.50912C1.50472 6.50912 0.775271 7.23857 0.775271 8.13956C0.775271 9.04055 1.50472 9.77 2.40571 9.77C3.3067 9.77 4.03615 9.04055 4.03615 8.13956C4.03615 7.23857 3.3067 6.50912 2.40571 6.50912ZM3.34168 5.02359C2.92699 5.9523 1.88444 5.9523 1.46975 5.02359L0.145744 2.07519C-0.268945 1.15289 0.250665 0 1.08171 0H3.72972C4.56076 0 5.08037 1.15289 4.66568 2.07519L3.34168 5.02359Z" fill="#FF8C1A"/>
</svg>
static/svgs/studio/transfer-ownership.svg 0 → 100644
View file @ a16ef0c3
<svg width="206" height="323" viewBox="0 0 206 323" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="206" height="323">
<rect width="206" height="323" fill="#C4C4C4"/>
</mask>
<g mask="url(#mask0)">
<path opacity="0.45" fill-rule="evenodd" clip-rule="evenodd" d="M57.1698 75.3667C119.614 75.3667 180.669 157.21 162.54 212.897C144.41 268.583 110.255 301.467 47.8103 301.467C-14.6341 301.467 -67.2962 234.576 -77.5995 162.852C-87.9028 91.1287 -5.27449 75.3667 57.1698 75.3667Z" fill="#FFBF00"/>
<path opacity="0.45" d="M154.499 271.613C141.292 275.215 125.324 290.465 129.612 300.739C133.899 311.014 148.067 308.614 154.499 304.403C164.309 297.98 169.704 290.21 173.137 283.848C176.571 272.592 167.707 268.011 154.499 271.613Z" fill="#FFBF00"/>
<path d="M109.228 147.374C111.25 146.822 112.833 145.262 113.367 143.244L114.607 138.658C115.198 136.488 118.269 136.488 118.86 138.658L120.1 143.244C120.653 145.262 122.217 146.841 124.239 147.374L128.836 148.611C131.01 149.201 131.01 152.265 128.836 152.855L124.239 154.092C122.217 154.644 120.634 156.205 120.1 158.222L118.86 162.809C118.269 164.979 115.198 164.979 114.607 162.809L113.367 158.222C112.814 156.205 111.25 154.625 109.228 154.092L104.631 152.855C102.456 152.265 102.456 149.201 104.631 148.611L109.228 147.374Z" fill="#FF8C1A"/>
<path d="M166.619 101.223C167.847 100.887 168.808 99.94 169.132 98.7151L169.885 95.9303C170.244 94.6131 172.108 94.6131 172.467 95.9303L173.22 98.7151C173.556 99.94 174.505 100.899 175.733 101.223L178.524 101.974C179.844 102.332 179.844 104.192 178.524 104.55L175.733 105.302C174.505 105.637 173.544 106.584 173.22 107.809L172.467 110.594C172.108 111.911 170.244 111.911 169.885 110.594L169.132 107.809C168.796 106.584 167.847 105.625 166.619 105.302L163.828 104.55C162.508 104.192 162.508 102.332 163.828 101.974L166.619 101.223Z" fill="#FF8C1A"/>
<path d="M48.9051 37.6014C50.1327 37.2663 51.0939 36.3188 51.4181 35.0939L52.1709 32.3091C52.5299 30.9918 54.3944 30.9918 54.7534 32.3091L55.5061 35.0939C55.8419 36.3188 56.7916 37.2778 58.0191 37.6014L60.8101 38.3525C62.1303 38.7107 62.1303 40.571 60.8101 40.9293L58.0191 41.6803C56.7916 42.0154 55.8304 42.963 55.5061 44.1878L54.7534 46.9726C54.3944 48.2899 52.5299 48.2899 52.1709 46.9726L51.4181 44.1878C51.0823 42.963 50.1327 42.0039 48.9051 41.6803L46.1142 40.9293C44.794 40.571 44.794 38.7107 46.1142 38.3525L48.9051 37.6014Z" fill="#FF8C1A"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M127.045 21.2856C127.16 21.1631 127.254 21.0263 127.324 20.8756C128.125 19.1612 125.59 16.2891 121.663 14.4616C117.735 12.6341 113.901 12.5427 113.099 14.2571C113.029 14.4079 112.984 14.5673 112.964 14.7342L112.892 14.7007L43.781 162.583C42.0064 166.38 37.6087 168.12 33.5809 166.956C12.3419 160.817 -6.9133 164.521 -17.5507 187.283C-29.5732 213.008 -13.2696 234.633 13.4903 247.084C40.2502 259.535 68.1618 256.322 79.3551 232.371C89.8032 210.014 80.0619 192.274 61.2653 179.762C57.7657 177.432 56.2595 172.938 58.0399 169.128L108.047 62.1249L139.982 76.9837C141.985 77.9156 144.367 77.0486 145.302 75.0473L156.425 51.247C157.36 49.2456 156.495 46.8677 154.492 45.9358L122.557 31.077L127.117 21.3191L127.045 21.2856ZM21.012 223.698C23.5333 223.086 26.3479 224.396 27.4991 226.716C29.6332 231.017 33.1916 234.651 37.8904 236.838C48.8793 241.95 61.9422 237.206 67.0664 226.242C72.1906 215.277 67.4361 202.243 56.4472 197.13C51.7484 194.944 46.6712 194.56 41.9972 195.693C39.476 196.305 36.6614 194.995 35.5102 192.675C33.376 188.374 29.8176 184.74 25.1188 182.554C14.1299 177.441 1.06704 182.185 -4.05717 193.149C-9.18138 204.114 -4.42689 217.148 6.56202 222.261C11.2608 224.447 16.338 224.831 21.012 223.698Z" fill="#FFBF00"/>
<path d="M-6.37977 204.619C-6.63611 201.027 -6.00652 197.321 -4.37292 193.825C0.751294 182.86 13.8142 178.116 24.8031 183.229C29.533 185.43 33.1073 189.098 35.2366 193.436C36.3559 195.717 39.1183 197.002 41.5887 196.392C46.2882 195.231 51.4015 195.605 56.1315 197.806C62.4675 200.754 66.7309 206.335 68.2231 212.635C67.6754 204.959 63.0827 197.8 55.5971 194.317C50.8671 192.117 45.7539 191.742 41.0543 192.903C38.5839 193.514 35.8215 192.228 34.7022 189.948C32.5729 185.609 28.9986 181.942 24.2687 179.741C13.2798 174.628 0.216909 179.372 -4.9073 190.337C-7.07697 194.979 -7.47558 199.993 -6.37977 204.619Z" fill="#CC9900"/>
<path d="M-20.8038 208.14C-19.1334 224.807 -5.25479 238.599 14.0857 247.597C40.8456 260.048 68.7571 256.835 79.9505 232.884C84.1145 223.974 85.0717 215.797 83.5268 208.392C84.1648 214.854 82.9365 221.862 79.4161 229.395C68.2227 253.347 40.3112 256.559 13.5513 244.109C-4.42293 235.746 -17.6797 223.243 -20.8038 208.14Z" fill="#CC9900"/>
<path d="M-12.9281 187.813C-6.51721 174.095 10.7994 164.834 29.8539 171.54" stroke="white" stroke-width="3" stroke-linecap="round"/>
<line x1="1.5" y1="-1.5" x2="7.31257" y2="-1.5" transform="matrix(-0.423386 0.90595 -0.906665 -0.421852 114.315 18.6029)" stroke="white" stroke-width="3" stroke-linecap="round"/>
<line x1="1.5" y1="-1.5" x2="62.1464" y2="-1.5" transform="matrix(-0.423386 0.90595 -0.906665 -0.421852 108.512 31.0221)" stroke="white" stroke-width="3" stroke-linecap="round"/>
<path d="M116.048 65.8478L107.315 61.7843L105.38 60.884L119.89 29.8361L152.784 45.1412C149.606 49.4222 140.747 57.7921 130.741 57.0243C120.734 56.2565 115.818 62.1406 116.048 65.8478Z" fill="#E6AC00"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M127.315 20.8927C127.246 21.0367 127.155 21.1678 127.044 21.2856L127.116 21.3191L57.973 169.269C57.5544 170.165 57.3215 171.1 57.2568 172.034C56.495 170.052 56.1157 166.798 57.0671 164.762L125.789 17.2112C127.141 18.529 127.774 19.8796 127.331 20.8584L127.315 20.8927Z" fill="#CC9900"/>
</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