tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-06-26 14:39:25 +02:00
Code Issues Projects Releases Wiki Activity

MINOR Misc style improvements around batch actions and content tools display

Browse Source
This commit is contained in:
Ingo Schommer 2011-04-24 11:05:59 +12:00
parent 2c6e0c277b
commit 035b68fc32
9 changed files with 203 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
admin/code/LeftAndMain.php
View File

@ -954,7 +954,7 @@ class LeftAndMain extends Controller {
new FormAction('submit', "Go")
)
);
$form->addExtraClass('cms-batch-actions');
$form->addExtraClass('cms-batch-actions nostyle');
$form->unsetValidator();
return $form;

2
admin/code/ModelAdmin.php
View File

@ -413,7 +413,7 @@ class ModelAdmin_CollectionController extends Controller {
$form->setHTMLID("Form_SearchForm_" . $this->modelClass);
$form->disableSecurityToken();
$clearAction->useButtonTag = true;
$clearAction->addExtraClass('minorAction');
$clearAction->addExtraClass('ss-ui-action-minor');
return $form;
}

126
admin/css/screen.css
View File

@ -241,7 +241,7 @@ li.jstree-closed > ul { display: none; }
/* line 19, ../scss/_menu.scss */
.cms-menu-list li a { display: block; height: 32px; vertical-align: middle; font-size: 14px; text-shadow: #aaaaaa 1px 1px 1px; color: #333333; padding: 5px; }
/* line 28, ../scss/_menu.scss */
.cms-menu-list li a .icon { display: block; float: left; margin-right: 5px; background: url('../images/icons-32.png?1303452911') no-repeat; width: 32px; height: 32px; overflow: hidden; background-position: 0px 0px; }
.cms-menu-list li a .icon { display: block; float: left; margin-right: 5px; background: url('../images/icons-32.png?1303510063') no-repeat; width: 32px; height: 32px; overflow: hidden; background-position: 0px 0px; }
/* line 36, ../scss/_menu.scss */
.cms-menu-list li a .text { display: block; padding-top: 10px; }
/* line 42, ../scss/_menu.scss */
@ -276,34 +276,44 @@ li.jstree-closed > ul { display: none; }
.cms .field .middleColumn .field { display: inline; padding: 0; border: none; }
/* line 29, ../scss/_forms.scss */
.cms .field .middleColumn label { float: none; width: auto; }
/* line 37, ../scss/_forms.scss */
/* line 38, ../scss/_forms.scss */
.cms form.nostyle .field { display: inline; padding: 0; border: 0; }
/* line 44, ../scss/_forms.scss */
.cms form.nostyle label { float: none; width: auto; }
/* line 49, ../scss/_forms.scss */
.cms form.nostyle .middleColumn { margin-left: 0; }
/* line 55, ../scss/_forms.scss */
.cms .field.nolabel .middleColumn { margin-left: 0; }
/* line 42, ../scss/_forms.scss */
/* line 60, ../scss/_forms.scss */
.cms input, .cms textarea { -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #ebeff1), color-stop(50%, #ffffff), color-stop(100%, #ebeff1)); background-image: -moz-linear-gradient(top, #ebeff1 0%, #ffffff 50%, #ebeff1 100%); background-image: linear-gradient(top, #ebeff1 0%, #ffffff 50%, #ebeff1 100%); border: 1px solid #aaaaaa; padding: 3px; }
/* line 53, ../scss/_forms.scss */
/* line 71, ../scss/_forms.scss */
.cms input.loading { padding-left: 16px; background: #ebeff1 url(../../images/network-save.gif) no-repeat center left; }
/* line 61, ../scss/_forms.scss */
.cms .ss-ui-action-constructive, .cms .ui-widget-content .ss-ui-action-constructive, .cms .ui-widget-header .ss-ui-action-constructive { background: none; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #77b53f), color-stop(100%, #456925)); background-image: -moz-linear-gradient(top, #77b53f 0%, #456925 100%); background-image: linear-gradient(top, #77b53f 0%, #456925 100%); color: white; }
/* line 72, ../scss/_forms.scss */
.cms .ss-ui-action-destructive, .cms .ui-widget-content .ss-ui-action-destructive, .cms .ui-widget-header .ss-ui-action-destructive { color: red; }
/* line 76, ../scss/_forms.scss */
/* line 79, ../scss/_forms.scss */
.cms .ss-ui-button.ss-ui-action-constructive, .cms .ui-widget-content .ss-ui-button.ss-ui-action-constructive, .cms .ui-widget-header .ss-ui-button.ss-ui-action-constructive { background: none; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #77b53f), color-stop(100%, #456925)); background-image: -moz-linear-gradient(top, #77b53f 0%, #456925 100%); background-image: linear-gradient(top, #77b53f 0%, #456925 100%); color: white; }
/* line 90, ../scss/_forms.scss */
.cms .ss-ui-button.ss-ui-action-destructive, .cms .ui-widget-content .ss-ui-button.ss-ui-action-destructive, .cms .ui-widget-header .ss-ui-button.ss-ui-action-destructive { color: red; }
/* line 96, ../scss/_forms.scss */
.cms .ss-ui-button.ss-ui-action-minor, .cms .ui-widget-content .ss-ui-button.ss-ui-action-minor .ui-widget-header .ss-ui-button.ss-ui-action-minor { background: none; padding: 0; border: 0; color: #333333; text-decoration: underline; }
/* line 104, ../scss/_forms.scss */
.cms .cms-edit-form { padding-bottom: 20px; }
/* line 80, ../scss/_forms.scss */
/* line 108, ../scss/_forms.scss */
.cms .cms-edit-form .Actions { text-align: right; }
/* line 87, ../scss/_forms.scss */
/* line 115, ../scss/_forms.scss */
.cms .cms-content-tools .field label { float: none; width: auto; }
/* line 92, ../scss/_forms.scss */
/* line 120, ../scss/_forms.scss */
.cms .cms-content-tools .field .middleColumn { margin-left: 0; }
/** This file defines CMS-specific customizations to the jQuery UI theme. Every rule in this file should be wrapped in the '.cms' selector (to make it more specific), and contain ONLY overwritten jQuery UI rules (with 'ui-' prefix). This file should be fairly short, as we're using our own custom jQuery UI theme already. TODO Add theme reference Use _style.scss to add more generic style information, and read the jQuery UI theming API: http://jqueryui.com/docs/Theming/API */
/* line 14, ../scss/_uitheme.scss */
.cms .ui-tabs { padding: 0; }
/* line 19, ../scss/_uitheme.scss */
.cms .ui-widget-content, .cms .ui-tabs .ui-tabs-panel { color: #444444; font-size: 1em; border: 0; background: none; }
/* line 26, ../scss/_uitheme.scss */
.cms .ui-widget-header { background: none; border: 0; }
/* line 17, ../scss/_uitheme.scss */
.cms .ui-tabs .ui-widget-header { border: 0; background: none; }
/* line 24, ../scss/_uitheme.scss */
.cms .ui-widget-content, .cms .ui-tabs .ui-tabs-panel { color: #444444; font-size: 1em; border: 0; background: #ebeff1; }
/* line 31, ../scss/_uitheme.scss */
.cms .ss-ui-button { padding: 5px; }
.cms .ui-widget-header { background: #ebeff1; border: 0; }
/* line 36, ../scss/_uitheme.scss */
.cms .ss-ui-button { padding: 5px; text-decoration: none; }
/** This file defines the 'theme' of the CMS: Colors, fonts, backgrounds, and detailed alignments. Together with _layout.css it provides the presentational backbone to the CMS. Ideally a developer should be able to exchange this file with his own theme easily. Please don't put any dimension, display or float information on major structural components like '.cms-container' or '.cms-header' in here, use the _layout.scss file instead. Use SCSS variable definitions in screen.css to avoid repeating styles like background colours or padding dimensions. See _colours.scss to get started. To avoid this file getting too large and complicated, it is encouraged to create new SCSS files for larger components like the CMS menu or tree (see _tree.scss and _menu.scss). */
/* line 18, ../scss/_style.scss */
@ -331,56 +341,86 @@ body * { font-size: 13px; }
/* line 29, ../scss/_style.scss */
body .ui-widget { font-size: 1em; }
/* line 35, ../scss/_style.scss */
.cms-content-header { background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #afbfc7), color-stop(100%, #91a7b2)); background-image: -moz-linear-gradient(top, #afbfc7 0%, #91a7b2 100%); background-image: linear-gradient(top, #afbfc7 0%, #91a7b2 100%); }
/* line 41, ../scss/_style.scss */
.cms-content-header h2 { float: left; padding: 10px; font-size: 14px; font-weight: bold; }
/* line 48, ../scss/_style.scss */
.cms-content-header .cms-content-header-tabs { float: left; }
/* line 52, ../scss/_style.scss */
.cms-content-header .ui-tabs-nav li { height: 40px; }
/* line 33, ../scss/_style.scss */
strong { font-weight: bold; }
/* line 61, ../scss/_style.scss */
/* line 39, ../scss/_style.scss */
.cms-content-header { background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #afbfc7), color-stop(100%, #91a7b2)); background-image: -moz-linear-gradient(top, #afbfc7 0%, #91a7b2 100%); background-image: linear-gradient(top, #afbfc7 0%, #91a7b2 100%); }
/* line 45, ../scss/_style.scss */
.cms-content-header h2 { float: left; padding: 10px; font-size: 14px; font-weight: bold; }
/* line 52, ../scss/_style.scss */
.cms-content-header .cms-content-header-tabs { float: left; }
/* line 59, ../scss/_style.scss */
.ui-tabs .cms-content-header .ui-tabs-nav li { height: 40px; }
/* line 62, ../scss/_style.scss */
.ui-tabs .cms-content-header .ui-tabs-nav li a { font-weight: bold; font-size: 11px; padding-top: 1em; }
/* line 71, ../scss/_style.scss */
.ui-tabs .cms-content-header .ui-state-default, .ui-tabs .cms-content-header .ui-widget-content .ui-state-default, .ui-tabs .cms-content-header .ui-widget-header .ui-state-default { background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(100%, #b7b7b7)); background-image: -moz-linear-gradient(top, #dddddd 0%, #b7b7b7 100%); background-image: linear-gradient(top, #dddddd 0%, #b7b7b7 100%); }
/* line 80, ../scss/_style.scss */
.ui-tabs .cms-content-header .ui-state-active, .ui-tabs .cms-content-header .ui-widget-content .ui-state-active, .ui-tabs .cms-content-header .ui-widget-header .ui-state-active { background: #ebeff1; }
/* line 85, ../scss/_style.scss */
.cms-content-tools { background-color: #dce3e6; }
/* line 67, ../scss/_style.scss */
/* line 91, ../scss/_style.scss */
.cms-header { padding: 10px; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #00111d), color-stop(50%, #003050), color-stop(100%, #00111d)); background-image: -moz-linear-gradient(top, #00111d 0%, #003050 50%, #00111d 100%); background-image: linear-gradient(top, #00111d 0%, #003050 50%, #00111d 100%); }
/* line 75, ../scss/_style.scss */
/* line 99, ../scss/_style.scss */
.cms-header * { color: white; }
/* line 82, ../scss/_style.scss */
/* line 106, ../scss/_style.scss */
.cms-logo .version { display: none; }
/* line 86, ../scss/_style.scss */
/* line 110, ../scss/_style.scss */
.cms-logo * { color: #3ebae0; }
/* line 90, ../scss/_style.scss */
/* line 114, ../scss/_style.scss */
.cms-logo a { display: inline-block; height: 25px; width: 25px; float: left; margin-right: 10px; background: url(../images/logo_small.png) no-repeat; text-indent: -9999em; }
/* line 103, ../scss/_style.scss */
/* line 127, ../scss/_style.scss */
.cms-login-status .logout-link { display: inline-block; height: 25px; width: 25px; float: left; margin-right: 10px; background: url(../images/logout.png) no-repeat; text-indent: -9999em; }
/* line 117, ../scss/_style.scss */
/* line 141, ../scss/_style.scss */
.ss-loading-screen, .ss-loading-screen .loading-logo { width: 100%; height: 100%; overflow: hidden; position: absolute; background: #fff; background: -moz-radial-gradient(50% 50% 180deg, circle cover, white, #efefef, #c7c7c7 100%); background: -webkit-gradient(radial, 50% 50%, 350, 50% 50%, 0, from(#e3e3e3), to(white)); z-index: 100000; margin: 0; padding: 0; }
/* line 132, ../scss/_style.scss */
/* line 156, ../scss/_style.scss */
.ss-loading-screen .loading-logo { background-url: url(../images/logo.gif); background-repeat: no-repeat; background-color: transparent; background-position: 50% 50%; }
/* line 138, ../scss/_style.scss */
/* line 162, ../scss/_style.scss */
.ss-loading-screen p { width: 100%; text-align: center; position: absolute; bottom: 80px; }
/* line 144, ../scss/_style.scss */
/* line 168, ../scss/_style.scss */
.ss-loading-screen p span.notice { display: inline-block; font-size: 14px; padding: 10px 20px; color: #dc7f00; border: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; }
/* line 154, ../scss/_style.scss */
/* line 178, ../scss/_style.scss */
.ss-loading-screen .loading-animation { display: none; position: absolute; left: 49%; top: 75%; }
/** Messages (see sapphire/css/Form.css) */
/* line 173, ../scss/_style.scss */
/* line 197, ../scss/_style.scss */
.message { margin: 1em 0; padding: 0.5em; font-weight: bold; border: 1px black solid; }
/* line 179, ../scss/_style.scss */
/* line 203, ../scss/_style.scss */
.message.notice { background-color: #ffbe66; border-color: #ff9300; }
/* line 184, ../scss/_style.scss */
/* line 208, ../scss/_style.scss */
.message.warning { background-color: #ffbe66; border-color: #ff9300; }
/* line 188, ../scss/_style.scss */
/* line 212, ../scss/_style.scss */
.message.error { background-color: #ffbe66; border-color: #ff9300; }
/* line 197, ../scss/_style.scss */
/* line 221, ../scss/_style.scss */
.ModelAdmin .cms-content-tools { width: 300px; }
/* line 202, ../scss/_style.scss */
/* line 226, ../scss/_style.scss */
.ModelAdmin .ResultAssemblyBlock { display: none; }
/* line 233, ../scss/_style.scss */
.cms-page-add-form-dialog #PageType li { clear: left; height: 40px; border-bottom: 1px solid #333333; }
/* line 238, ../scss/_style.scss */
.cms-page-add-form-dialog #PageType li:hover, .cms-page-add-form-dialog #PageType li.selected { background-color: #ffff99; }
/* line 242, ../scss/_style.scss */
.cms-page-add-form-dialog #PageType li input, .cms-page-add-form-dialog #PageType li label, .cms-page-add-form-dialog #PageType li .icon, .cms-page-add-form-dialog #PageType li .title { float: left; }
/* line 246, ../scss/_style.scss */
.cms-page-add-form-dialog #PageType li .icon { width: 20px; }
/* line 250, ../scss/_style.scss */
.cms-page-add-form-dialog #PageType li .title { width: 100px; font-weight: bold; }
/* line 255, ../scss/_style.scss */
.cms-page-add-form-dialog #PageType li .description { font-style: italic; }
/* line 263, ../scss/_style.scss */
.cms-content-toolbar > * { display: inline-block; }
/* line 267, ../scss/_style.scss */
.cms-content-toolbar .cms-tree-view-modes * { display: inline-block; }
/* line 271, ../scss/_style.scss */
.cms-content-toolbar .cms-content-batchactions form * { display: inline-block; }

4
admin/javascript/LeftAndMain.BatchActions.js
View File

@ -44,7 +44,7 @@
self.serializeFromTree();
});
$('.cms-tree-tools :input[name=view-mode]').bind('click', function(e) {
$('.cms-tree-view-modes :input[name=view-mode]').bind('click', function(e) {
if($(e.target).val() == 'multiselect') {
tree.addClass('multiple');
self.serializeFromTree();
@ -100,7 +100,7 @@
* (boolean)
*/
_isActive: function() {
return $('#TreeActions-batchactions').is(':visible');
return $('.cms-content-batchactions').is(':visible');
},
/**

2
admin/javascript/LeftAndMain.Tree.js
View File

@ -298,7 +298,7 @@
}
});
$('.cms-tree-tools :input[name=view-mode]').entwine({
$('.cms-tree-view-modes :input[name=view-mode]').entwine({
onmatch: function() {
// set active by default
this.trigger('click');

1
admin/scss/_colours.scss
View File

@ -9,6 +9,7 @@ $color-widget-bg: lighten($color-base, 20%);
$color-dark-bg: #003050;
$color-shadow-light: #aaa;
$color-shadow-dark: #333;
$color-highlight: #FFFF66;
$color-menu-button: #338DC1; // darkened and desaturated as required
$color-text: #444;
$color-text-light: white;

40
admin/scss/_forms.scss
View File

@ -33,6 +33,24 @@
}
}
// TODO Change to mixin?
form.nostyle {
.field {
display: inline;
padding: 0;
border: 0;
}
label {
float: none;
width: auto;
}
.middleColumn {
margin-left: 0;
}
}
.field.nolabel {
.middleColumn {
margin-left: 0;
@ -56,9 +74,9 @@
}
// Buttons
.ss-ui-action-constructive,
.ui-widget-content .ss-ui-action-constructive,
.ui-widget-header .ss-ui-action-constructive {
.ss-ui-button.ss-ui-action-constructive,
.ui-widget-content .ss-ui-button.ss-ui-action-constructive,
.ui-widget-header .ss-ui-button.ss-ui-action-constructive {
background: none; // avoid overwritten gradient from jQuery UI styles
@include linear-gradient(color-stops(
$color-button-constructive,
@ -67,12 +85,22 @@
color: $color-text-light;
}
.ss-ui-action-destructive,
.ui-widget-content .ss-ui-action-destructive,
.ui-widget-header .ss-ui-action-destructive {
.ss-ui-button.ss-ui-action-destructive,
.ui-widget-content .ss-ui-button.ss-ui-action-destructive,
.ui-widget-header .ss-ui-button.ss-ui-action-destructive {
color: $color-button-destructive;
}
.ss-ui-button.ss-ui-action-minor,
.ui-widget-content .ss-ui-button.ss-ui-action-minor
.ui-widget-header .ss-ui-button.ss-ui-action-minor {
background: none;
padding: 0;
border: 0;
color: $color-text-dark;
text-decoration: underline;
}
.cms-edit-form {
padding-bottom: 20px;

73
admin/scss/_style.scss
View File

@ -30,6 +30,10 @@ body .ui-widget {
font-size: 1em;
}
strong {
font-weight: bold;
}
// ######################### Misc Panels #########################
.cms-content-header {
@ -49,12 +53,32 @@ body .ui-widget {
float: left;
}
}
.ui-tabs .cms-content-header {
.ui-tabs-nav li {
height: 40px;
a {
font-weight: bold;
font-size: 11px;
padding-top: 1em;
}
}
.cms-content-header-actions {
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
@include linear-gradient(color-stops(
lighten($color-shadow-light, 20%),
lighten($color-shadow-light, 5%)
));
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
background: $color-widget-bg;
}
}
@ -202,4 +226,49 @@ body .ui-widget {
.ResultAssemblyBlock {
display: none;
}
}
// ######################### "Add page" dialog #########################
.cms-page-add-form-dialog {
#PageType li {
clear: left;
height: 40px;
border-bottom: 1px solid $color-shadow-dark;
&:hover, &.selected {
background-color: lighten($color-highlight, 10%);
}
input, label, .icon, .title {
float: left;
}
.icon {
width: 20px;
}
.title {
width: 100px;
font-weight: bold;
}
.description {
font-style: italic;
}
}
}
// ######################### Content toolbar #########################
.cms-content-toolbar {
& > * {
display: inline-block;
}
.cms-tree-view-modes * {
display: inline-block;
}
.cms-content-batchactions form * {
display: inline-block;
}
}

12
admin/scss/_uitheme.scss
View File

@ -12,7 +12,12 @@
.cms {
.ui-tabs {
padding: 0
padding: 0;
.ui-widget-header {
border: 0;
background: none;
}
}
.ui-widget-content,
@ -20,15 +25,16 @@
color: $color-text;
font-size: 1em;
border: 0;
background: none; // avoid overwritten background properties from jQuery UI
background: $color-widget-bg;
}
.ui-widget-header {
background: none;
background: $color-widget-bg;
border: 0;
}
.ss-ui-button {
padding: 5px;
text-decoration: none;
}
}