Skip to content

E
edx-platform
Commit d8eaa881 by marcotuts
Options

Merge pull request #2276 from edx/studio/duplicate/visuals 

Updates Studio's visual styling of action buttons on components and static pages
parents 7e8d700b cf67c132
Showing with 157 additions and 24 deletions
cms/djangoapps/contentstore/features/static-pages.py
......@@ -34,7 +34,7 @@ def not_see_any_static_pages(step):
@step(u'I "(edit|delete)" the static page$')
def click_edit_or_delete(step, edit_or_delete):
button_css = 'div.component-actions a.%s-button' % edit_or_delete
button_css = 'ul.component-actions a.%s-button' % edit_or_delete
world.css_click(button_css)
......
cms/static/js/spec/views/unit_spec.js
......@@ -32,19 +32,19 @@ define(["coffee/src/views/unit", "js/models/module_info", "js/spec/create_sinon"
<ol class="components"> \
<li class="component" data-locator="loc_1"> \
<div class="wrapper wrapper-component-editor"/> \
<div class="component-actions"> \
<a href="#" class="duplicate-button standard"><span class="duplicate-icon icon-copy"></span>Duplicate</a> \
</div> \
<ul class="component-actions"> \
<a href="#" data-tooltip="Duplicate" class="duplicate-button action-button"><i class="icon-copy"></i><span class="sr"></span>Duplicate</span></a> \
</ul> \
</li> \
<li class="component" data-locator="loc_2"> \
<div class="wrapper wrapper-component-editor"/> \
<div class="component-actions"> \
<a href="#" class="duplicate-button standard"><span class="duplicate-icon icon-copy"></span>Duplicate</a> \
</div> \
<ul class="component-actions"> \
<a href="#" data-tooltip="Duplicate" class="duplicate-button action-button"><i class="icon-copy"></i><span class="sr"></span>Duplicate</span></a> \
</ul> \
</li> \
</ol> \
</div>';
var unit;
var clickDuplicate = function (index) {
unit.$(".duplicate-button")[index].click();
......
cms/static/sass/views/_assets.scss
......@@ -325,6 +325,7 @@
}
}
// uses similar styling as unit.scss, static-pages.scss
.action-item {
display: inline-block;
margin: ($baseline/4) 0 ($baseline/4) ($baseline/4);
......
cms/static/sass/views/_static-pages.scss
......@@ -116,10 +116,66 @@
}
}
.component-actions {
// uses similar styling as assets.scss, unit.scss
.wrapper-component-action-header {
@include box-sizing(border-box);
position: absolute;
top: 20px;
right: 44px;
width: 100%;
padding: $baseline/4 $baseline/2;
top: 0;
left: 0;
}
.component-header {
display: none;
}
.component-actions {
display: inline-block;
float: right;
margin-right: $baseline*2;
padding: 8px 0px;
vertical-align: middle;
text-align: center;
.action-item {
display: inline-block;
margin: ($baseline/4) 0 ($baseline/4) ($baseline/4);
.action-button {
@include transition(all $tmg-f2 ease-in-out 0s);
display: block;
padding: 0 $baseline/2;
width: auto;
height: ($baseline*1.5);
border-radius: 3px;
color: $gray-l1;
&:hover {
background-color: $blue;
color: $gray-l6;
}
.action-button-text {
padding-left: 1px;
vertical-align: bottom;
line-height: 17px;
}
&.delete-button:hover {
background-color: $gray-l1;
}
}
[class^="icon-"] {
display: inline-block;
vertical-align: bottom;
}
&.action-duplicate {
display: none;
}
}
}
}
......@@ -163,10 +219,6 @@
margin-right: 12px;
}
}
.duplicate-button.standard {
display: none;
}
}
.edit-static-page {
......
cms/static/sass/views/_unit.scss
......@@ -867,20 +867,35 @@ body.course.unit,.view-unit {
// ====================
// Editing Units from Courseware
//uses similar styling as static-pages.scss
body.unit {
.component {
padding-top: 30px;
.component-actions {
.wrapper-component-action-header {
@include box-sizing(border-box);
position: absolute;
width: 100%;
padding: 15px;
padding: $baseline/4 $baseline/2;
top: 0;
left: 0;
border-bottom: 1px solid $lightBluishGrey2;
background: $lightGrey;
border-bottom: 1px solid $gray-l4;
background: $gray-l5;
}
.component-header {
display: inline-block;
width: 50%;
vertical-align: middle;
}
.component-actions {
display: inline-block;
float: right;
vertical-align: middle;
text-align: center;
}
&.editing {
......@@ -888,6 +903,53 @@ body.unit {
}
}
}
// ====================
// Component Header Actions
// uses similar styling as assets.scss, static-pages.scss
body.unit {
.component-actions {
.action-item {
display: inline-block;
margin: ($baseline/4) 0 ($baseline/4) ($baseline/4);
.action-button {
@include transition(all $tmg-f2 ease-in-out 0s);
display: block;
padding: 0 $baseline/2;
width: auto;
height: ($baseline*1.5);
border-radius: 3px;
color: $gray-l1;
&:hover {
background-color: $blue;
color: $gray-l6;
}
.action-button-text {
padding-left: 1px;
vertical-align: bottom;
line-height: 17px;
}
&.delete-button:hover {
background-color: $gray-l1;
}
}
[class^="icon-"] {
display: inline-block;
vertical-align: bottom;
}
}
}
}
// ====================
// Unit Page Sidebar
......
cms/templates/component.html
......@@ -26,11 +26,29 @@
</div> <!-- Module Actions-->
</div>
</div>
<div class="component-actions">
<a href="#" class="edit-button standard"><span class="edit-icon"></span>${_("Edit")}</a>
<a href="#" class="duplicate-button standard"><span class="duplicate-icon icon-copy"></span>${_("Duplicate")}</a>
<a href="#" class="delete-button standard"><span class="delete-icon"></span>${_("Delete")}</a>
<div class="wrapper wrapper-component-action-header">
<div class="component-header">
</div>
<ul class="component-actions">
<li class="action-item action-edit">
<a href="#" class="edit-button action-button">
<i class="icon-edit"></i>
<span class="action-button-text">${_("Edit")}</span>
</a>
</li>
<li class="action-item action-duplicate">
<a href="#" data-tooltip="Duplicate" class="duplicate-button action-button">
<i class="icon-copy"></i>
<span class="sr">${_("Duplicate this component")}</span>
</a>
</li>
<li class="action-item action-delete">
<a href="#" data-tooltip="Delete" class="delete-button action-button">
<i class="icon-trash"></i>
<span class="sr">${_("Delete this component")}</span>
</a>
</li>
</ul>
</div>
<span data-tooltip="${_("Drag to reorder")}" class="drag-handle"></span>
${preview}
......
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