diff --git a/src/components/include.scss b/src/components/include.scss index 90a7d2927..07bddf8e0 100644 --- a/src/components/include.scss +++ b/src/components/include.scss @@ -2,16 +2,19 @@ $color-features: #0093e7; $color-features-active: #0357a5; $color-red: #ca3b3b; +$color-light-red: #f26666; $color-yellow: #ffd439; $color-yellow-hover: #ffc904; $color-yellow-bg: #ffeca8; $color-orange: #ffba5d; +$color-dark-orange: #864c00; $color-green: #c5dd60; $color-purple: #b944cc; $very-light-gray: #ececec; $light-gray: #dadada; $gray: #9a9a9a; +$moderate-gray: #797979; $extremely-dark-gray: #333; $color-background-dark: #21232a; diff --git a/src/components/modal.jsx b/src/components/modal.jsx index 3b6f84361..50fc0f91e 100644 --- a/src/components/modal.jsx +++ b/src/components/modal.jsx @@ -33,7 +33,7 @@ const Modal = (props) => { X + onClick={props.onClose}>✕
{props.children}
diff --git a/src/components/my-widgets-collaborate-dialog.jsx b/src/components/my-widgets-collaborate-dialog.jsx index a5fef91b2..558d218d6 100644 --- a/src/components/my-widgets-collaborate-dialog.jsx +++ b/src/components/my-widgets-collaborate-dialog.jsx @@ -257,7 +257,8 @@ const MyWidgetsCollaborateDialog = ({onClose, inst, myPerms, otherUserPerms, set onChange={(e) => setState({...state, searchText: e.target.value})} className='user-add' type='text' - placeholder="Enter a Materia user's name or e-mail"/> + placeholder="Enter a user's name or e-mail"/> + Only individuals who have previously used Materia will show up in search. { searchResultsRender } ) @@ -273,33 +274,41 @@ const MyWidgetsCollaborateDialog = ({onClose, inst, myPerms, otherUserPerms, set mainContentRender = if (containsUser) { - const mainContentElements = Array.from(state.updatedAllUserPerms).map(([userId, userPerms]) => { + + const mainContentElements = [] + let userContentElement = null + + Array.from(state.updatedAllUserPerms).forEach(([userId, userPerms]) => { if (userPerms.remove === true) return let user = collabUsers[userId] - if (!user) - { - return
- } - - user.is_owner = user.id === inst.user_id; - - return updatePerms(userId, perms)} - readOnly={myPerms?.can?.share === false} - /> + if (!user) return + + user.is_owner = user.id === inst.user_id + const rowElement = ( + updatePerms(userId, perms)} + readOnly={myPerms?.can?.share === false} + /> + ) + + if (currentUser.id === user.id) userContentElement = rowElement + else mainContentElements.push(rowElement) }) mainContentRender = ( <> - { mainContentElements } +
You
+ { userContentElement } +
Users With Access
+ { mainContentElements.length > 0 ? mainContentElements : No other users have access to your widget. } ) } @@ -342,12 +351,14 @@ const MyWidgetsCollaborateDialog = ({onClose, inst, myPerms, otherUserPerms, set {/* Calendar portal used to bring calendar popup out of access-list to avoid cutting off the overflow */}

- Users with full access can edit or copy this widget and can + Users with full access can edit this widget and can add or remove people in this list. {onlyOneFullPermHolder && myPerms.accessLevel == access.FULL && ( - - {'\u00A0'}Note: There must be at least one user with full access. - + + + { '\u00A0'}Note: There must be at least one user with full access. + + )}

diff --git a/src/components/my-widgets-collaborate-dialog.scss b/src/components/my-widgets-collaborate-dialog.scss index 97bc25c62..5d66e12dc 100644 --- a/src/components/my-widgets-collaborate-dialog.scss +++ b/src/components/my-widgets-collaborate-dialog.scss @@ -9,11 +9,13 @@ font-weight: 400; .title { + width: 100%; + left: -10px; margin: 0; - padding: 0; + padding: 0 10px; font-size: 1.3em; - color: #555; - border-bottom: #999 dotted 1px; + color: $extremely-dark-gray; + border-bottom: $light-gray solid 1px; padding-bottom: 20px; margin-bottom: 20px; position: relative; @@ -27,15 +29,24 @@ position: relative; display: flex; align-items: center; - justify-content: center; + justify-content: space-between; + flex-wrap: wrap; width: 100%; margin-bottom: 20px; text-align: left; .collab-input-label { - font-size: 19px; + font-size: 1em; + font-weight: 400; margin-right: auto; } + + .collab-input-disclaimer { + flex-basis: 100%; + margin: 0.5em 0.5em 0.5em 0; + font-size: 0.7em; + text-align: right; + } } .user-add { @@ -43,9 +54,10 @@ flex-grow: 2; height: 30px; margin-left: 1em; - padding-left: 0.5em; + padding: 0.25em 0.5em; border: solid 1px #c9c9c9; - font-size: 16px; + border-radius: 0.3em; + font-size: 0.9em; } .shareNotAllowed { @@ -135,7 +147,7 @@ .access-list { min-height: 250px; max-height: 420px; - padding: 0; + padding: 1em 0 1em 0; margin-top: 0px; overflow: auto; @@ -148,6 +160,20 @@ align-items: center; justify-content: center; } + + span.not-shared { + display: block; + margin-top: 2em; + text-align: center; + + font-size: 0.9em; + font-weight: 700; + color: $moderate-gray; + } + + .deleted { + display: none; + } } .btn-box { @@ -167,50 +193,73 @@ color: #575757; font-size: 14px; margin-top: 10px; + + span { + display: block; + margin-top: 0.5em; + } } .warning { - font-weight: bold; + font-weight: 400; } .access-list { - .deleted { - display: none !important; + + header.access-list-header { + width: auto; + height: auto; + min-height: 0; + margin: 0 0 1em 0; + padding: 0 1rem; + font-weight: 700; + font-size: 0.7em; + color: $moderate-gray; + text-transform: uppercase; + background: none; } .user-perm { display: flex; align-items: center; position: relative; - margin: 25px 10px; + margin: 1.5em 1em 1em 1em; - &::after { - content: ' '; - width: 70%; - margin-left: 15%; // (100% - 70%) / 2 - display: block; - border-bottom: 1px solid #d2d2d2; - position: absolute; - bottom: -12.5px; + &.current-user { + padding: 0 1.25em 1em 0; + margin-bottom: 1.5em 1em 0 1em; + border-bottom: solid 1px $light-gray; } &.provisional { flex-wrap: wrap; div.provisional-access-container { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; flex-grow: 4; + margin-top: 1em; padding: 0.5em; font-size: 0.8em; + background: #fff; + color: $color-dark-orange; + border: solid 1px $color-yellow-bg; + border-radius: 0.5em; span { display: block; + max-width: 60%; margin-left: 0.5em; } button.action_button { + width: fit-content; + height: fit-content; margin: 0.5em; - font-size: 16px; + font-size: 1em; } } } @@ -220,24 +269,22 @@ } .demote-dialog { + position: absolute; + z-index: 10000; + margin-left: 25%; + border-radius: 4px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); padding: 1em; - width: 310px; font-family: 'Lucida Grande', sans-serif; - font-size: 9pt; + font-size: 0.75em; color: black; text-align: center; background: #fcdbdb; - height: 40px; - z-index: 10000; - position: absolute; - margin-left: 125px; .arrow { background: url(/static/img/pink-arrow-left.png) no-repeat 0 center; width: 13px; - //height: 23px; display: inline-block; top: 0; left: -13px; @@ -259,7 +306,7 @@ .no-button { color: #555; text-decoration: underline; - font-size: 12pt; + font-size: 1.1em; cursor: pointer; } @@ -267,7 +314,8 @@ background: #e10000; border-color: #747474; color: #ffffff; - padding: 3px 15px; + padding: 0.5em 1.5em; + font-size: 1.1em; } .yes-button:hover { @@ -277,14 +325,14 @@ } .remove { - display: flex; - justify-content: center; - align-items: center; - margin-right: 0.25em; - padding: 0 0.25em; - color: #bfbfbf; + width: 1.25em; + height: 1.25em; + align-self: flex-start; + margin-left: 0.25em; + padding: 0; + color: $moderate-gray; text-decoration: none; - font-size: 24px; + font-size: 1.25em; user-select: none; border: none; background: transparent; @@ -323,18 +371,14 @@ &.user-match-student:after { content: 'Student'; - position: absolute; - top: -12px; - left: 0; + display: block; font-size: 11px; color: gray; } &.user-match-owner:after { content: 'Owner'; - position: absolute; - top: -12px; - left: 0; + display: block; font-size: 11px; color: gray; } @@ -343,16 +387,23 @@ .options { margin-left: auto; - margin-right: 10%; + margin-right: 0; text-align: left; select { display: inline-block; - padding: 0.25em; + padding: 0.5em 1em; margin-bottom: 5px; cursor: pointer; - border-width: 1px; + border: solid 1px $gray; + border-radius: 0.5em; + + background: #fff; + + &:disabled { + cursor: auto; + } } .expires { @@ -436,6 +487,42 @@ } } } + + .options-for-self { + display: flex; + gap: 1em; + align-items: center; + justify-content: flex-end; + margin-left: auto; + margin-right: 0; + + .self-status { + color: $gray; + font-size: 0.8em; + font-weight: 400; + } + + .leave { + background: #fff; + color: $color-red; + border: solid 1px $color-light-red; + font-size: 0.9em; + padding: 0.5em 0.8em; + cursor: pointer; + + &:disabled { + color: $gray; + background: $very-light-gray; + border-color: $gray; + cursor: auto; + } + + &:hover &:not(:disabled) { + background: $color-light-red; + color: #fff; + } + } + } } } } @@ -483,11 +570,25 @@ } .access-list { + + header.access-list-header { + color: $light-gray; + } + .user-perm { &::after { border-bottom: 1px solid #181920; } + .self-status { + color: $light-gray; + } + + button.leave { + color: #fff; + background-color: $color-red; + } + .demote-dialog { box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); color: black; diff --git a/src/components/my-widgets-collaborate-user-row.jsx b/src/components/my-widgets-collaborate-user-row.jsx index 48e5f3bfb..84c8bd40b 100644 --- a/src/components/my-widgets-collaborate-user-row.jsx +++ b/src/components/my-widgets-collaborate-user-row.jsx @@ -5,8 +5,8 @@ import DatePicker from 'react-datepicker' import './my-widgets-collaborate-dialog.scss' const accessLevels = { - [access.VISIBLE]: { value: access.VISIBLE, text: 'View Scores' }, - [access.FULL]: { value: access.FULL, text: 'Full' } + [access.VISIBLE]: { value: access.VISIBLE, text: 'Can View Scores' }, + [access.FULL]: { value: access.FULL, text: 'Full Access' } } const initRowState = () => { @@ -94,7 +94,7 @@ const CollaborateUserRow = ({user, perms, myPerms, isCurrentUser, onlyOneFullPer
- Are you sure you want to limit your access? + Are you sure you want to remove your access?
No Yes @@ -145,6 +145,57 @@ const CollaborateUserRow = ({user, perms, myPerms, isCurrentUser, onlyOneFullPer } } + let optionsContent = null + if (!isCurrentUser) { + const disableRemoveOptions = (onlyOneFullPermHolder && (perms.accessLevel === access.FULL)) + if (myPerms.accessLevel === access.FULL) { + optionsContent = ( + <> +
+ +
+ Expires: + { expirationSettingRender } +
+
+ { + disableRemoveOptions ? <> : ( + + ) + } + + ) + } + + } else { + optionsContent = ( +
+ { perms.accessLevel == access.FULL ? 'Full Access' : 'Can View Scores' } + +
+ ) + } + let provisionalAccess = null if ((state.contexts != null || state.provisionalAccessRemoved == true) && !readOnly ) { provisionalAccess = ( @@ -152,8 +203,8 @@ const CollaborateUserRow = ({user, perms, myPerms, isCurrentUser, onlyOneFullPer { state.provisionalAccessRemoved == false ? ( <> - This user has provisional access due to the widget being embedded in their course. They can only see scores associated - with that course. Selecting Unrestrict Access will allow them to view all scores the widget has collected. + Provisional Access: This user can view scores from a course the widget was embedded in. They can only see scores associated + with that course. Unrestricted Access will allow them to view all scores the widget has collected. +
@@ -186,20 +228,8 @@ const CollaborateUserRow = ({user, perms, myPerms, isCurrentUser, onlyOneFullPer
{ selfDemoteWarningRender } -
- -
- Expires: - { expirationSettingRender } -
-
+ { optionsContent } + { provisionalAccess }
)