Andal.LND/edx-platform
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #341 from edx/talbs/studio-authorship

Browse Source 
Studio: Authorship Rights Request UI + Dashboard Clean-up
This commit is contained in:
Christina Roberts
2013-07-26 03:59:07 -07:00
parent b143de1f99 8a715c1a16
commit 166aea62bb
20 changed files with 1209 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
cms/static/js/base.js
View File

@@ -597,11 +597,11 @@ function cancelNewSection(e) {
function addNewCourse(e) {
e.preventDefault();
$(e.target).hide();
$('.new-course-button').addClass('disabled');
$(e.target).addClass('disabled');
var $newCourse = $($('#new-course-template').html());
var $cancelButton = $newCourse.find('.new-course-cancel');
$('.inner-wrapper').prepend($newCourse);
$('.courses').prepend($newCourse);
$newCourse.find('.new-course-name').focus().select();
$newCourse.find('form').bind('submit', saveNewCourse);
$cancelButton.bind('click', cancelNewCourse);
@@ -646,7 +646,7 @@ function saveNewCourse(e) {
function cancelNewCourse(e) {
e.preventDefault();
$('.new-course-button').show();
$('.new-course-button').removeClass('disabled');
$(this).parents('section.new-course').remove();
}

54
cms/static/sass/_base.scss
View File

@@ -368,42 +368,6 @@ p, ul, ol, dl {
color: $gray-d3;
}
}
.introduction {
@include box-sizing(border-box);
@extend .t-copy-sub1;
width: flex-grid(12);
margin: 0 0 $baseline 0;
.copy strong {
font-weight: 600;
}
&.has-links {
@include clearfix();
.copy {
float: left;
width: flex-grid(8,12);
margin-right: flex-gutter();
}
.nav-introduction-supplementary {
@extend .t-copy-sub2;
float: right;
width: flex-grid(4,12);
display: block;
text-align: right;
.icon {
@extend .t-action3;
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
}
}
}
}
}
.content-primary, .content-supplementary {
@@ -482,6 +446,24 @@ p, ul, ol, dl {
}
}
// actions
.list-actions {
@extend .cont-no-list;
.action-item {
margin-bottom: ($baseline/4);
border-bottom: 1px dotted $gray-l4;
padding-bottom: ($baseline/4);
&:last-child {
margin-bottom: 0;
border: none;
padding-bottom: 0;
}
}
}
// navigation
.nav-related, .nav-page {

26
cms/static/sass/_shame.scss
View File

@@ -2,10 +2,32 @@
// // shame file - used for any bad-form/orphaned scss that knowingly violate edX FED architecture/standards (see - http://csswizardry.com/2013/04/shame-css/)
// ====================
// view - dashboard
body.dashboard {
// elements - authorship controls
.wrapper-authorshiprights {
.ui-toggle-control {
// needed to override general a element transition properties - need to fix.
transition-duration: 0.25s;
transition-timing-function: ease-in-out;
}
.icon-remove-sign {
// needed to override general a element transition properties - need to fix.
transition-duration: 0.25s;
transition-timing-function: ease-in-out;
}
}
}
// known things to do (paint the fence, sand the floor, wax on/off)
// ====================
// known things to do (paint the fence, sand the floor, wax on/off):
// * centralize and move form styling into forms.scss - cms/static/sass/views/_textbooks.scss and cms/static/sass/views/_settings.scss
// * move dialogue styles into cms/static/sass/elements/_modal.scss
// * use the @include placeholder Bourbon mixin (http://bourbon.io/docs/#placeholder) for any placeholder styling

42
cms/static/sass/elements/_system-feedback.scss
View File

@@ -1,4 +1,46 @@
// studio - elements - system feedback
// ====================
// messages
.message {
@extend .t-copy-sub1;
display: block;
}
.message-status {
display: none;
@include border-top-radius(2px);
@include box-sizing(border-box);
border-bottom: 2px solid $yellow-d2;
margin: 0 0 $baseline 0;
padding: ($baseline/2) $baseline;
font-weight: 500;
background: $yellow-d1;
color: $white;
[class^="icon-"] {
position: relative;
top: 1px;
@include font-size(16);
display: inline-block;
margin-right: ($baseline/2);
}
.text {
display: inline-block;
}
&.error {
border-color: $red-d3;
background: $red-l1;
}
&.is-shown {
display: block;
}
}
// alerts, notifications, prompts, and status communication
// ====================

169
cms/static/sass/elements/_system-help.scss
View File

@@ -1,40 +1,185 @@
// studio - elements - system help
// ====================
// notices - in-context: to be used as notices to users within the context of a form/action
.notice-incontext {
@extend .ui-well;
border-radius: ($baseline/10);
// view introductions - common greeting/starting points for the UI
.content .introduction {
@include box-sizing(border-box);
margin-bottom: $baseline;
.title {
@extend .t-title7;
margin-bottom: ($baseline/4);
@extend .t-title4;
font-weight: 600;
}
.copy {
@extend .t-copy-sub1;
@include transition(opacity $tmg-f2 ease-in-out 0s);
opacity: 0.75;
}
strong {
font-weight: 600;
}
&:hover {
// CASE: has links alongside
&.has-links {
@include clearfix();
.copy {
opacity: 1.0;
float: left;
width: flex-grid(8,12);
margin-right: flex-gutter();
}
.nav-introduction-supplementary {
@extend .t-copy-sub2;
float: right;
width: flex-grid(4,12);
display: block;
text-align: right;
.icon {
@extend .t-action3;
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
}
}
}
}
// particular warnings around a workflow for something
// notices - in-context: to be used as notices to users within the context of a form/action
.notice-incontext {
@extend .ui-well;
border-radius: ($baseline/10);
position: relative;
overflow: hidden;
margin-bottom: $baseline;
.title {
@extend .t-title7;
margin-bottom: ($baseline/4);
font-weight: 700;
}
.copy {
@extend .t-copy-sub1;
@include transition(opacity $tmg-f2 ease-in-out 0s);
opacity: 0.75;
margin-bottom: $baseline;
&:last-child {
margin-bottom: 0;
}
}
strong {
font-weight: 600;
}
&.has-status {
.status-indicator {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: ($baseline/4);
opacity: 0.40;
}
}
// CASE: notice has actions {
&.has-actions {
.list-actions {
margin-top: ($baseline*0.75);
.action-item {
}
.action-primary {
@extend .btn-primary-blue;
@extend .t-action3;
}
}
}
// list of notices all in one
&.list-notices {
.notice-item {
margin-bottom: $baseline;
border-bottom: 1px solid $gray-l3;
padding-bottom: $baseline;
&:last-child {
margin-bottom: 0;
border: none;
padding-bottom: 0;
}
}
}
}
// particular notice - warnings around a workflow for something
.notice-workflow {
background: $yellow-l5;
.copy {
.status-indicator {
background: $yellow;
}
title {
color: $gray-d1;
}
.copy {
color: $gray;
}
}
// particular notice - instructional
.notice-instruction {
background-color: $gray-l4;
.title {
color: $gray-d2;
}
.copy {
color: $gray-d2;
}
&.has-actions {
.list-actions {
.action-item {
}
.action-primary {
@extend .btn-primary-blue;
@extend .t-action3;
}
}
}
}
// particular notice - confirmation
.notice-confirmation {
background-color: $green-l5;
.status-indicator {
background: $green-s1;
}
.title {
color: $green;
}
.copy {
color: $gray;
}
}

41
cms/static/sass/views/_account.scss
View File

@@ -252,44 +252,3 @@ body.signup, body.signin {
}
}
}
// ====================
// messages
.message {
@extend .t-copy-sub1;
display: block;
}
.message-status {
display: none;
@include border-top-radius(2px);
@include box-sizing(border-box);
border-bottom: 2px solid $yellow-d2;
margin: 0 0 $baseline 0;
padding: ($baseline/2) $baseline;
font-weight: 500;
background: $yellow-d1;
color: $white;
[class^="icon-"] {
position: relative;
top: 1px;
@include font-size(16);
display: inline-block;
margin-right: ($baseline/2);
}
.text {
display: inline-block;
}
&.error {
border-color: shade($red, 50%);
background: tint($red, 20%);
}
&.is-shown {
display: block;
}
}

341
cms/static/sass/views/_dashboard.scss
View File

@@ -3,20 +3,309 @@
body.dashboard {
.my-classes {
margin-top: $baseline;
// temp
.content {
margin-bottom: ($baseline*5);
&:last-child {
margin-bottom: 0;
}
}
.class-list {
margin-top: 20px;
border-radius: 3px;
border: 1px solid $darkGrey;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
// ====================
li {
// basic 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);
}
// ====================
// elements - notices
.content .notice-incontext {
width: flexgrid(9, 9);
// CASE: notice has actions {
&.has-actions, &.list-notices .notice-item.has-actions {
.msg, .list-actions {
display: inline-block;
vertical-align: middle;
}
.msg {
width: flex-grid(6, 9);
margin-right: flex-gutter();
}
.list-actions {
width: flex-grid(3, 9);
text-align: right;
margin-top: 0;
.action-item {
}
.action-create-course {
@extend .btn-primary-green;
@extend .t-action3;
}
}
}
}
// elements - course creation rights controls
.wrapper-creationrights {
overflow: hidden;
.ui-toggle-control {
@extend .ui-depth2;
@extend .btn-secondary-gray;
@include clearfix();
display: block;
text-align: left;
// STATE: hover - syncing up colors with current so transition is smoother
&:hover {
background: $gray-d1;
color: $white;
}
.label {
@extend .t-action3;
float: left;
width: flex-grid(8, 9);
margin: 3px flex-gutter() 0 0;
}
.icon-remove-sign {
@extend .t-action1;
@include transform(rotate(45deg));
@include transform-origin(center center);
@include transition(all $tmg-f1 linear 0s);
float: right;
text-align: right;
}
}
.ui-toggle-target {
@extend .ui-depth1;
@include transition(opacity $tmg-f1 ease-in-out 0s);
position: relative;
border-bottom: 1px solid $mediumGrey;
top: -2px;
display: none;
opacity: 0;
}
// CASE: when the content area is shown
&.is-shown {
.ui-toggle-control {
@include border-bottom-radius(0);
.icon-remove-sign {
@include transform(rotate(90deg));
@include transform-origin(center center);
}
}
.ui-toggle-target {
display: block;
opacity: 1.0;
}
}
}
// elements - course creation rights controls
.status-creationrights {
margin-top: $baseline;
.title {
@extend .t-title7;
margin-bottom: ($baseline/4);
font-weight: 700;
color: $gray-d1;
}
.copy {
}
.list-actions, .form-actions {
margin-top: ($baseline*0.75);
.action-item {
}
.action-primary {
@extend .btn-primary-blue;
@extend .t-action3;
}
// specific - request button
// BT: should we abstract these states out for all buttons like this
.action-request {
position: relative;
overflow: hidden;
.icon-cog {
@include transition(all $tmg-f1 ease-in-out $tmg-f1);
@include font-size(20);
position: absolute;
top: ($baseline/2);
left: -($baseline);
visibility: hidden;
opacity: 0.0;
}
// state: submitting
&.is-submitting {
padding-left: ($baseline*2);
.icon-cog {
left: ($baseline*0.75);
visibility: visible;
opacity: 1.0;
}
}
// state: has an error
&.has-error {
padding-left: ($baseline*2);
background: $red;
border-color: $red-d1;
.icon-cog {
left: ($baseline*0.75);
visibility: visible;
opacity: 1.0;
}
}
}
}
.status-update {
.label {
@extend .cont-text-sr;
}
.value {
border-radius: ($baseline/4);
position: relative;
overflow: hidden;
padding: ($baseline/5) ($baseline/2);
background: $gray;
.status-indicator {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: ($baseline/4);
opacity: 0.40;
}
}
.value-formal, .value-description {
border-radius: ($baseline/10);
display: inline-block;
vertical-align: middle;
color: $white;
}
.value-formal {
@extend .t-title5;
margin: ($baseline/2);
font-weight: 700;
[class^="icon-"] {
margin-right: ($baseline/4);
}
}
.value-description {
@extend .t-copy-sub1;
position: relative;
color: $white;
opacity: 0.85;
}
}
// CASE: rights are not requested yet
&.is-unrequested {
.title {
@extend .cont-text-sr;
}
}
// CASE: status is pending
&.is-pending {
.status-update {
.value {
background: $orange;
}
.status-indicator {
background: $orange-d1;
}
}
}
// CASE: status is denied
&.is-denied {
.status-update {
.value {
background: $red-l1;
}
.status-indicator {
background: $red-s1;
}
}
}
}
// ====================
// course listings
.courses {
margin: $baseline 0;
}
.list-courses {
margin-top: $baseline;
border-radius: 3px;
border: 1px solid $gray;
background: $white;
box-shadow: 0 1px 2px $shadow-l1;
.course-item {
position: relative;
border-bottom: 1px solid $gray-l1;
&:last-child {
border-bottom: none;
@@ -56,7 +345,7 @@ body.dashboard {
.view-live-button {
z-index: 10000;
position: absolute;
top: 15px;
top: ($baseline*0.75);
right: $baseline;
padding: ($baseline/4) ($baseline/2);
opacity: 0.0;
@@ -70,17 +359,25 @@ body.dashboard {
}
.new-course {
padding: 15px 25px;
margin-top: 20px;
@include clearfix();
padding: ($baseline*0.75) ($baseline*1.25);
margin-top: $baseline;
border-radius: 3px;
border: 1px solid $darkGrey;
background: #fff;
border: 1px solid $gray;
background: $white;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
@include clearfix;
.title {
@extend .t-title4;
font-weight: 600;
margin-bottom: ($baseline/2);
border-bottom: 1px solid $gray-l3;
padding-bottom: ($baseline/2);
}
.row {
margin-bottom: 15px;
@include clearfix;
@include clearfix();
margin-bottom: ($baseline*0.75);
}
.column {
@@ -97,8 +394,8 @@ body.dashboard {
}
label {
@extend .t-title7;
display: block;
font-size: 13px;
font-weight: 700;
}
@@ -109,7 +406,7 @@ body.dashboard {
}
.new-course-name {
font-size: 19px;
@extend .t-title5;
font-weight: 300;
}
@@ -120,5 +417,9 @@ body.dashboard {
.new-course-cancel {
@include white-button;
}
.item-details {
padding-bottom: 0;
}
}
}