Skip to content

E
edx-platform
Commit 4a2b5519 by Brian Talbot Committed by David Baumgold
Options

Studio: styles new user role controls and revamps course team UI

parent 8a10695d
Showing with 492 additions and 76 deletions
cms/static/sass/elements/_forms.scss
......@@ -95,6 +95,171 @@ form {
// ====================
// forms - archetype - add a new X form
.new-form {
@extend .ui-window;
@include box-sizing(border-box);
position: relative;
width: 100%;
margin-bottom: ($baseline*2);
border-radius: 2px;
background: $white;
.wrapper-form {
padding: $baseline ($baseline*1.5);
}
.title {
@extend .t-title4;
font-weight: 700;
margin-bottom: $baseline;
border-bottom: 1px solid $gray-l4;
padding-bottom: ($baseline/2);
}
fieldset {
margin-bottom: $baseline;
}
// form elements - need to make this more universal
.form-fields {
@extend .cont-no-list;
.field {
margin: 0 0 ($baseline*0.75) 0;
&:last-child {
margin-bottom: 0;
}
&.required {
label {
font-weight: 600;
}
label:after {
margin-left: ($baseline/4);
content: "*";
}
}
label, input, textarea {
display: block;
}
label {
@extend .t-copy-sub1;
@include transition(color, 0.15s, ease-in-out);
margin: 0 0 ($baseline/4) 0;
&.is-focused {
color: $blue;
}
}
//this section is borrowed from _account.scss - we should clean up and unify later
input, textarea {
@extend .t-copy-base;
height: 100%;
width: 100%;
padding: ($baseline/2);
&.long {
width: 100%;
}
&.short {
width: 25%;
}
::-webkit-input-placeholder {
color: $gray-l4;
}
:-moz-placeholder {
color: $gray-l3;
}
::-moz-placeholder {
color: $gray-l3;
}
:-ms-input-placeholder {
color: $gray-l3;
}
&:focus {
+ .tip {
color: $gray;
}
}
}
textarea.long {
height: ($baseline*5);
}
input[type="checkbox"] {
display: inline-block;
margin-right: ($baseline/4);
width: auto;
height: auto;
& + label {
display: inline-block;
}
}
.tip {
@extend .t-copy-sub2;
@include transition(color, 0.15s, ease-in-out);
display: block;
margin-top: ($baseline/4);
color: $gray-l3;
}
&.error {
label {
color: $red;
}
input {
border-color: $red;
}
}
}
}
.actions {
border-top: 1px solid $gray-l1;
padding: ($baseline*0.75) $baseline;
box-shadow: inset 0 1px 2px $shadow;
background: $gray-l6;
.action-primary {
@include blue-button;
@extend .t-action2;
@include transition(all $tmg-f2 linear 0);
display: inline-block;
padding: ($baseline/5) $baseline;
font-weight: 600;
}
.action-secondary {
@include grey-button;
@extend .t-action2;
@include transition(all $tmg-f2 linear 0);
display: inline-block;
padding: ($baseline/5) $baseline;
font-weight: 600;
}
}
}
// ====================
// forms - grandfathered
input.search {
padding: 6px 15px 8px 30px;
......
cms/static/sass/elements/_icons.scss
// studio - elements - icons
// studio - elements - icons & badges
// ====================
.icon {
......@@ -14,3 +14,42 @@
vertical-align: middle;
margin-right: ($baseline/4);
}
// ui - badges
.wrapper-ui-badge {
position: absolute;
top: -1px;
left: ($baseline*1.5);
}
.ui-badge {
@extend .t-title9;
position: relative;
border-bottom-right-radius: ($baseline/10);
border-bottom-left-radius: ($baseline/10);
padding: ($baseline/4) ($baseline/2) ($baseline/4) ($baseline/2);
font-weight: 600;
text-transform: uppercase;
* [class^="icon-"] {
margin-right: ($baseline/5);
}
// OPTION: add this class for a visual hanging display
&.is-hanging {
top: -($baseline/4);
&:after {
position: absolute;
top: 0;
right: -($baseline/4);
display: block;
height: 0;
width: 0;
border-bottom: ($baseline/4) solid $black-t3;
border-right: ($baseline/4) solid transparent;
content: "";
opacity: 0.5;
}
}
}
cms/static/sass/views/_textbooks.scss
......@@ -30,7 +30,7 @@ body.course.textbooks {
}
.textbook {
@extend .window;
@extend .ui-window;
position: relative;
.view-textbook {
......
cms/static/sass/views/_users.scss
......@@ -3,20 +3,56 @@
body.course.users {
// page layout
.content-primary, .content-supplementary {
@include box-sizing(border-box);
float: left;
}
.content-primary {
width: flex-grid(9, 12);
margin-right: flex-gutter();
}
.content-supplementary {
width: flex-grid(3, 12);
}
// content
.content {
.introduction {
@extend .t-copy-sub1;
margin: 0 0 ($baseline*2) 0;
}
}
// new user form
.add-user {
@extend .new-form;
display: none;
&.is-shown {
display: block;
}
}
// new user form (old)
.new-user-form {
display: none;
padding: 15px 20px;
padding: ($baseline*0.75) $baseline;
background-color: $lightBluishGrey2;
#result {
display: none;
float: left;
margin-bottom: 15px;
padding: 3px 15px;
margin-bottom: ($baseline*0.75);
padding: 3px ($baseline*0.75);
border-radius: 3px;
background: $error-red;
background: $red;
font-size: 14px;
color: #fff;
color: $white;
}
.form-elements {
......@@ -25,58 +61,165 @@ body.course.users {
label {
display: inline-block;
margin-right: 10px;
margin-right: ($baseline/2);
}
.email-input {
width: 350px;
padding: 8px 8px 10px;
border-color: $darkGrey;
border-color: $gray-d1;
}
.add-button {
@include blue-button;
padding: 5px 20px 9px;
padding: ($baseline/4) $baseline 9px;
}
.cancel-button {
@include white-button;
padding: 5px 20px 9px;
padding: ($baseline/4) $baseline 9px;
}
}
// listing of users
.user-list, .user-item, .item-metadata, .item-actions {
@include box-sizing(border-box);
}
.user-list {
border: 1px solid $mediumGrey;
background: #fff;
li {
.user-item {
@extend .ui-window;
@include clearfix();
position: relative;
padding: 20px;
border-bottom: 1px solid $mediumGrey;
width: flex-grid(9, 9);
margin: 0 0 ($baseline/2) 0;
padding: $baseline ($baseline*1.5) $baseline ($baseline*1.5);
&:last-child {
border-bottom: none;
margin-bottom: 0;
}
span {
.item-metadata, .item-actions {
display: inline-block;
vertical-align: middle;
}
.user-name {
margin-right: 10px;
font-size: 24px;
font-weight: 300;
// item - flag
.flag-role {
@extend .ui-badge;
color: $white;
.msg-you {
margin-left: ($baseline/5);
opacity: 0.65;
text-transform: none;
font-weight: 500;
}
&:after {
border-bottom-color: $black-t1;
}
&.flag-role-staff {
background: $gray-l2;
}
&.flag-role-admin {
background: $gray-d1;
}
}
.user-email {
font-size: 14px;
font-style: italic;
color: $mediumGrey;
// item - metadata
.item-metadata {
width: flex-grid(5, 9);
margin-right: flex-gutter();
.user-username, .user-email {
display: inline-block;
vertical-align: middle;
}
.user-username {
@extend .t-title4;
@include transition(color $tmg-f2 ease-in-out 0s);
margin: 0 ($baseline/2) ($baseline/10) 0;
color: $gray-d4;
font-weight: 600;
}
.user-email {
@extend .t-title6;
}
}
// item - actions
.item-actions {
top: 24px;
width: flex-grid(4, 9);
position: static; // nasty reset needed due to base.scss
text-align: right;
.action {
display: inline-block;
vertical-align: middle;
}
.action-role {
margin-right: ($baseline/2);
}
.action-delete {
}
.delete {
@extend .ui-btn-non;
}
// nasty reset needed due to base.scss
.delete-button {
margin-right: 0;
float: none;
color: inherit;
}
// admin role controls
.toggle-admin-role {
&.add-admin-role {
@include blue-button;
@extend .t-action2;
@include transition(all .15s);
display: inline-block;
padding: ($baseline/5) $baseline;
font-weight: 600;
}
&.remove-admin-role {
@include grey-button;
@extend .t-action2;
@include transition(all .15s);
display: inline-block;
padding: ($baseline/5) $baseline;
font-weight: 600;
}
}
}
// STATE: hover
&:hover {
.user-username {
}
.user-email {
}
.item-actions {
}
}
}
}
}
\ No newline at end of file
}
cms/templates/manage_users.html
......@@ -3,7 +3,7 @@
<%! from auth.authz import is_user_in_course_group_role %>
<%inherit file="base.html" />
<%block name="title">${_("Course Team Settings")}</%block>
<%block name="bodyclass">is-signedin course users settings team</%block>
<%block name="bodyclass">is-signedin course users team</%block>
<%block name="content">
......@@ -27,54 +27,122 @@
</header>
</div>
<div class="main-wrapper">
<div class="inner-wrapper">
<div class="details">
<p>${_("The following list of users have been designated as course staff. This means that these users will have permissions to modify course content. You may add additional course staff below, if you are the course instructor. Please note that they must have already registered and verified their account.")}</p>
<div class="wrapper-content wrapper">
<section class="content">
<div class="introduction">
<h2 class="title sr">Managing Your Course Team</h2>
<div class="copy">
<p>${_("[Introduction Message - Mark to Provide Copy.] Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.")}</p>
</div>
</div>
<article class="user-overview">
<article class="content-primary" role="main">
%if allow_actions:
<form class="new-user-form">
<div id="result"></div>
<div class="form-elements">
<label>${_("email: ")}</label><input type="text" id="email" class="email-input" autocomplete="off" placeholder="email@example.com">
<input type="submit" value="${_("Add User")}" id="add_user" class="add-button" />
<input type="button" value="${_("Cancel")}" class="cancel-button" />
<form class="new-form add-user" id="add-user-form" name="add-user-form">
<div class="wrapper-form">
<h3 class="title">${_("Add a User to Your Course's Team")}</h3>
<div id="add-user-error" class="message message-status message-status error" name="add-user-error">
</div>
<fieldset class="form-fields">
<legend class="sr">${_("Textbook information")}</legend>
<div class="field text required add-user-email">
<label for="user-email-input">${_("User's Email Address")}</label>
<input id="user-email-input" name="user-email" type="text" placeholder="${_('e.g. jane.doe@gmail.com')}" value="">
<span class="tip tip-stacked">${_("Please provide the email address of the course staff member you'd like to add")}</span>
</div>
</fieldset>
</div>
<div class="actions">
<button class="action action-primary" type="submit">${_("Add User")}</button>
<button class="action action-secondary action-cancel">${_("Cancel")}</button>
</div>
</form>
%endif
<div>
<ol class="user-list">
% for user in staff:
<li data-url="${reverse('course_team_user', kwargs=dict(
org=context_course.location.org,
course=context_course.location.course,
name=context_course.location.name,
email=user.email,
))}">
<span class="user-name">${user.username}</span>
<span class="user-email">${user.email}</span>
% if allow_actions:
<div class="item-actions">
<% is_instuctor = is_user_in_course_group_role(user, context_course.location, 'instructor', check_staff=False) %>
<ol class="user-list">
% for user in staff:
<li class="user-item" data-url="${reverse('course_team_user', kwargs=dict(
org=context_course.location.org,
course=context_course.location.course,
name=context_course.location.name,
email=user.email,
))}">
<% is_instuctor = is_user_in_course_group_role(user, context_course.location, 'instructor', check_staff=False) %>
% if is_instuctor and len(instructors) == 1:
<span class="wrapper-ui-badge">
<span class="flag flag-role flag-role-admin is-hanging">
<span class="label sr">${_("Current Role:")}</span>
<span class="value">
${_("Admin")}
% if request.user.id == user.id:
<span class="msg-you">${_("You!")}</span>
% endif
</span>
</span>
</span>
% else:
<span class="wrapper-ui-badge">
<span class="flag flag-role flag-role-staff is-hanging">
<span class="label sr">${_("Current Role:")}</span>
<span class="value">
${_("Staff")}
% if request.user.id == user.id:
<span class="msg-you">${_("You!")}</span>
% endif
</span>
</span>
</span>
% endif
<div class="item-metadata">
<h3 class="user-name">
<span class="user-username">${user.username}</span>
<span class="user-email">
<a class="action action-email" href="mailto:${user.email}" title="send an email message to ${user.email}">${user.email}</a>
</span>
</h3>
</div>
% if allow_actions:
<ul class="item-actions user-actions">
<li class="action action-role">
% if is_instuctor and len(instructors) == 1:
<span class="admin-role">Admin</span>
<span class="admin-role sr">${_("Admin (Since you are the only team member, you cannot remove your admin status.)")}</span>
% else:
<a href="#" class="admin-role toggle-admin-role ${'remove' if is_instuctor else 'add'}-admin-role">${_("Remove Admin") if is_instuctor else _("Add Admin")}</a>
% endif
% if request.user.id != user.id: ## can't remove yourself
<a href="#" class="delete-button remove-user" data-id="${user.email}"><span class="delete-icon"></span></a>
<a href="#" class="admin-role toggle-admin-role ${'remove' if is_instuctor else 'add'}-admin-role">${_("Remove Admin Access") if is_instuctor else _("Add Admin Access")}</a>
% endif
</div>
</li>
% if request.user.id != user.id: ## can't remove yourself
<li class="action action-delete">
<a href="#" class="delete remove-user action-icon" data-id="${user.email}"><i class="icon-trash"></i><span class="sr">${_("Delete the user,")} ${user.username}</span></a>
</li>
% endif
</li>
% endfor
</ol>
</div>
</ul>
% endif
</li>
% endfor
</ol>
</article>
</div>
<aside class="content-supplementary" role="complimentary">
<div class="bit">
<h3 class="title-3">${_("About Roles within Your Course Team")}</h3>
<p>${_("[Mark to provide copy] Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.")}</p>
</div>
% if is_instuctor and len(instructors) == 1:
<div class="bit">
<h3 class="title-3">${_("Tranferring Ownership")}</h3>
<p>${_("[Mark to provide copy] Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.")}</p>
</div>
% endif
</aside>
</section>
</div>
</%block>
......@@ -88,10 +156,10 @@
))}"
$(document).ready(function() {
var $newUserForm = $('.new-user-form');
var $newUserForm = $('#add-user-form');
$newUserForm.bind('submit', function(e) {
e.preventDefault();
var url = tplUserURL.replace("@@EMAIL@@", $('#email').val().trim())
var url = tplUserURL.replace("@@EMAIL@@", $('#user-email-input').val().trim())
$.ajax({
url: url,
type: 'POST',
......@@ -106,23 +174,25 @@
notifyOnError: false,
error: function(jqXHR, textStatus, errorThrown) {
data = JSON.parse(jqXHR.responseText);
$('#result').show().empty().append(data.error);
$('#add-user-error').toggleClass('is-shown').empty().append(data.error);
}
});
});
var $cancelButton = $newUserForm.find('.cancel-button');
var $cancelButton = $newUserForm.find('.action-cancel');
$cancelButton.bind('click', function(e) {
e.preventDefault();
$newUserForm.slideUp(150);
$('#result').hide();
$('#email').val('');
$('.new-user-button').removeClass('is-disabled');
$newUserForm.toggleClass('is-shown');
$('#add-user-error').removeClass('is-shown');
$('#user-email-input').val('');
});
$('.new-user-button').bind('click', function(e) {
e.preventDefault();
$newUserForm.slideDown(150);
$newUserForm.find('.email-input').focus();
$(this).addClass('is-disabled');
$newUserForm.toggleClass('is-shown');
$newUserForm.find('#user-email-input').focus();
});
$('body').bind('keyup', function(e) {
......
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