From 187955ae559ee385f17f66a9d9e47120313d64ec Mon Sep 17 00:00:00 2001 From: marco Date: Wed, 22 Jan 2014 16:16:51 -0500 Subject: [PATCH] visual styling changes to components and static pages in order to use updated icon button styling for duplicate and delete actions --- cms/static/sass/views/_assets.scss | 1 + cms/static/sass/views/_static-pages.scss | 66 +++++++++++++++++++--- cms/static/sass/views/_unit.scss | 70 ++++++++++++++++++++++-- cms/templates/component.html | 28 ++++++++-- 4 files changed, 149 insertions(+), 16 deletions(-) diff --git a/cms/static/sass/views/_assets.scss b/cms/static/sass/views/_assets.scss index ec3a6954bb..bc23ba67ec 100644 --- a/cms/static/sass/views/_assets.scss +++ b/cms/static/sass/views/_assets.scss @@ -325,6 +325,7 @@ } } + // uses similar styling as assets.scss, static-pages.scss .action-item { display: inline-block; margin: ($baseline/4) 0 ($baseline/4) ($baseline/4); diff --git a/cms/static/sass/views/_static-pages.scss b/cms/static/sass/views/_static-pages.scss index d08329ff8e..5acd9f536d 100644 --- a/cms/static/sass/views/_static-pages.scss +++ b/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 { diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss index d240fd7be8..700b9bc959 100644 --- a/cms/static/sass/views/_unit.scss +++ b/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 diff --git a/cms/templates/component.html b/cms/templates/component.html index 46147ba27c..70cbe57509 100644 --- a/cms/templates/component.html +++ b/cms/templates/component.html @@ -26,11 +26,29 @@ - -
- ${_("Edit")} - ${_("Duplicate")} - ${_("Delete")} +
+
+
+
${preview}