Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

NEW Side by side editing functionality - first cut (os#7412)

Introduces a preview window that appears when the screen is wide enough,
removes old preview button, adds a draft-public switch, adds variety of
preview options which are not hooked up yet.

Goes along with cms commit fa3738a9f4c5181eabf18a77ca89792d31592250
  • Loading branch information...
commit f4b080ee06b677aa82ec0dbbe73e1503ec93005e 1 parent fa84c2d
@mateusz mateusz authored chillu committed
View
1  admin/code/LeftAndMain.php
@@ -294,6 +294,7 @@ public function init() {
'leftandmain.js',
array_unique(array_merge(
array(
+ FRAMEWORK_ADMIN_DIR . '/javascript/LeftAndMain.Layout.js',
FRAMEWORK_ADMIN_DIR . '/javascript/LeftAndMain.js',
FRAMEWORK_ADMIN_DIR . '/javascript/LeftAndMain.Panel.js',
FRAMEWORK_ADMIN_DIR . '/javascript/LeftAndMain.Tree.js',
View
171 admin/css/screen.css
136 additions, 35 deletions not shown
View
BIN  admin/images/logo_small.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  admin/images/preview.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  admin/images/preview_icons.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
2  admin/javascript/LeftAndMain.Content.js
@@ -93,7 +93,7 @@
if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
// Fix dimensions to actual extents, in preparation for a relayout via jslayout.
- this.height('auto');
+ this.height('28px');
this.height(this.innerHeight()-this.css('padding-top')-this.css('padding-bottom'));
}
});
View
96 admin/javascript/LeftAndMain.Layout.js
@@ -0,0 +1,96 @@
+/**
+ * File: LeftAndMain.Layout.js
+ */
+
+(function($) {
+
+ $.fn.layout.defaults.resize = false;
+
+ var minMenuWidth = 40;
+ var maxMenuWidth = 150;
+ var prefContentWidth = 820;
+ var prefPreviewWidth = 500;
+ var minPreviewWidth = 400;
+
+ jLayout = (typeof jLayout === 'undefined') ? {} : jLayout;
+
+ jLayout.threeColumnCompressor = function (spec) {
+ var obj = {}, menu = $.jLayoutWrap(spec.menu), content = $.jLayoutWrap(spec.content), preview = $.jLayoutWrap(spec.preview);
+
+ obj.layout = function (container) {
+ var contentHidden = (content.item.is('.is-collapsed'));
+
+ var size = container.bounds(),
+ insets = container.insets(),
+ top = insets.top,
+ bottom = size.height - insets.bottom,
+ left = insets.left,
+ right = size.width - insets.right;
+
+ var menuWidth = $('#cms-menu.cms-panel').hasClass('collapsed') ? minMenuWidth : maxMenuWidth;
+ var contentWidth = contentHidden ? 0 : prefContentWidth;
+ var previewWidth = right - left - (menuWidth + contentWidth);
+
+ if (!contentHidden) {
+ var previewWidth = right - left - (menuWidth + contentWidth);
+ var previewUnderlay = false;
+
+ // If preview width is less than the minimum size, take some off the menu
+ if (previewWidth < prefPreviewWidth) {
+ if (previewWidth < minPreviewWidth) {
+ contentWidth = right - left - menuWidth;
+ previewWidth = right - left - menuWidth;
+ previewUnderlay = true;
+
+ if (contentWidth < prefContentWidth) {
+ contentWidth = right - left - menuWidth;
+ previewWidth = right - left - menuWidth;
+ }
+ }
+ }
+
+ else if (previewWidth > 500) {
+ contentWidth = (right - left - menuWidth) / 2;
+ previewWidth = right - left - (menuWidth + contentWidth);
+ }
+ }
+
+ menu.bounds({'x': left, 'y': top, 'height': bottom - top, 'width': menuWidth});
+ menu.doLayout();
+ left += menuWidth;
+
+ content.bounds({'x': left, 'y': top, 'height': bottom - top, 'width': contentWidth});
+ content.item.css({display: contentHidden ? 'none' : 'block'});
+ content.doLayout();
+ if (!previewUnderlay) left += contentWidth;
+
+ preview.bounds({'x': left, 'y': top, 'height': bottom - top, 'width': previewWidth});
+ preview.doLayout();
+
+
+ return container;
+ };
+
+ function typeLayout(type) {
+ var func = type + 'Size';
+
+ return function (container) {
+ var menuSize = menu[func](), contentSize = content[func](), previewSize = preview[func](), insets = container.insets();
+
+ width = menuSize.width + contentSize.width + previewSize.width;
+ height = Math.max(menuSize.height, contentSize.height, previewSize.height);
+
+ return {
+ 'width': insets.left + insets.right + width,
+ 'height': insets.top + insets.bottom + height
+ };
+ };
+ }
+
+ obj.preferred = typeLayout('preferred');
+ obj.minimum = typeLayout('minimum');
+ obj.maximum = typeLayout('maximum');
+ return obj;
+ };
+
+}(jQuery));
View
2  admin/javascript/LeftAndMain.Panel.js
@@ -79,8 +79,6 @@
var newWidth = bool ? this.getWidthExpanded() : this.getWidthCollapsed();
this.width(newWidth); // the content panel width always stays in "expanded state" to avoid floating elements
- this.find('.toggle-collapse')[bool ? 'show' : 'hide']();
- this.find('.toggle-expand')[bool ? 'hide' : 'show']();
// If an alternative collapsed view exists, toggle it as well
var collapsedContent = this.find('.cms-panel-content-collapsed');
View
168 admin/javascript/LeftAndMain.Preview.js
@@ -10,7 +10,7 @@
* The admin UI itself is collapsible, leaving most screen space to this panel.
*
* Relies on the server responses to indicate if a preview URL is available for the
- * currently loaded admin interface. If no preview is available, the panel is "blocked"
+ * currently loaded admin interface. If no preview is available, the panel is "blocked"
* automatically.
*
* Internal links within the preview iframe trigger a refresh of the admin panel as well,
@@ -40,11 +40,9 @@
// Load edit view for new page, but only if the preview is activated at the moment.
// This avoids e.g. force-redirections of the edit view on RedirectorPage instances.
- if(!self.is('.is-collapsed')) self.loadCurrentPage();
+ self.loadCurrentPage();
});
- if(this.hasClass('is-expanded')) this.expand();
- else this.collapse();
this.data('cms-preview-initialized', true);
// Preview might not be available in all admin interfaces - block/disable when necessary
@@ -53,21 +51,18 @@
$('.cms-preview-toggle-link')[this.canPreview() ? 'show' : 'hide']();
self._fixIframeLinks();
-
+ this.updatePreview();
+
this._super();
},
+
loadUrl: function(url) {
this.find('iframe').attr('src', url);
},
- updateAfterXhr: function(){
- $('.cms-preview-toggle-link')[this.canPreview() ? 'show' : 'hide']();
-
- // Only load when panel is visible (see details in iframe load event handler).
- if(this.is('.is-collapsed')) return;
-
- // var url = ui.xmlhttp.getResponseHeader('x-frontend-url');
+ updatePreview: function() {
var url = $('.cms-edit-form').choosePreviewLink();
+
if(url) {
this.loadUrl(url);
this.unblock();
@@ -77,6 +72,11 @@
}
},
+ updateAfterXhr: function(){
+ $('.cms-preview-toggle-link')[this.canPreview() ? 'show' : 'hide']();
+ this.updatePreview();
+ },
+
'from .cms-container': {
onaftersubmitform: function(){
this.updateAfterXhr();
@@ -86,15 +86,6 @@
}
},
- // Toggle preview when new menu entry is selected.
- // Only do this when preview is actually shown,
- // to avoid auto-expanding the menu in normal CMS mode
- 'from .cms-menu-list li': {
- onselect: function(){
- if(!this.hasClass('is-collapsed')) this.collapse();
- }
- },
-
/**
* Loads the matching edit form for a page viewed in the preview iframe,
* based on metadata sent along with this document.
@@ -130,7 +121,13 @@
},
_fixIframeLinks: function() {
- var doc = this.find('iframe')[0].contentDocument;
+ var iframe = this.find('iframe')[0];
+ if(iframe){
+ var doc = iframe.contentDocument;
+ }else{
+ return;
+ }
+
if(!doc) return;
// Block outside links from going anywhere
@@ -151,40 +148,7 @@
var naviMsg = doc.getElementById('SilverStripeNavigatorMessage');
if(naviMsg) naviMsg.style.display = 'none';
},
-
- expand: function(inclMenu) {
- var self = this, containerEl = this.getLayoutContainer(), contentEl = containerEl.find('.cms-content');
- this.show();
- this.removeClass('east').addClass('center').removeClass('is-collapsed');
- // this.css('overflow', 'auto');
- contentEl.removeClass('center').hide();
- this.find('iframe').show();
- this.find('.cms-preview-toggle a').html('&raquo;');
- this.find('.cms-preview-controls').show();
-
- if(this.data('cms-preview-initialized')) {
- containerEl.find('.cms-menu').collapsePanel();
- }
-
- containerEl.redraw();
- },
-
- collapse: function() {
- var self = this, containerEl = this.getLayoutContainer(), contentEl = containerEl.find('.cms-content');
- this.addClass('east').removeClass('center').addClass('is-collapsed').width(10);
- // this.css('overflow', 'hidden');
- contentEl.addClass('center').show().css('visibility', 'visible');
- this.find('iframe').hide();
- this.find('.cms-preview-toggle a').html('&laquo;');
- this.find('.cms-preview-controls').hide();
- if(this.data('cms-preview-initialized')) {
- containerEl.find('.cms-menu').expandPanel();
- }
-
- containerEl.redraw();
- },
-
block: function() {
this.addClass('blocked');
},
@@ -197,13 +161,8 @@
return this.parents('.cms-container');
},
- toggle: function(bool) {
- this[this.hasClass('is-collapsed') ? 'expand' : 'collapse']();
- },
redraw: function() {
if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
-
- this.layout({resize: false});
}
});
@@ -238,73 +197,56 @@
}
});
- $('.cms-preview .cms-preview-toggle').entwine({
- onclick: function(e) {
- e.preventDefault();
- this.parents('.cms-preview').toggle();
- }
- });
-
- $('.cms-switch-view a').entwine({
- onclick: function(e) {
- e.preventDefault();
+ $('.switch-options a').entwine({
+ onclick: function(e) {
var preview = $('.cms-preview');
- preview.toggle(true);
- preview.loadUrl($(e.target).attr('href'));
+ var loadSibling = $(this).siblings('a');
+ var checkbox = $(this).closest('.cms-preview-states').find('input');
+ if(checkbox.attr('checked') !== undefined){
+ checkbox.attr('checked', false);
+ }else{
+ checkbox.attr('checked', true);
+ }
+ preview.loadUrl($(loadSibling).attr('href'));
+ return false;
}
- });
+ });
- $('.cms-menu li').entwine({
- onclick: function(e) {
- // Prevent reloading of interface when opening the edit panel
- if(this.hasClass('Menu-CMSMain')) {
- var preview = $('.cms-preview');
- preview.toggle(true);
- e.preventDefault();
+
+ $('#cms-preview-mode-dropdown').entwine({
+ onchange: function(e) {
+ e.preventDefault();
+
+ var content = $('.cms-content');
+ var state = $(this).val();
+ if (state == 'split') {
+ content.removeClass('is-collapsed');
+ } else {
+ content.addClass('is-collapsed');
}
+ content.parent().redraw();
}
});
- $('.cms-preview .cms-preview-states').entwine({
- onmatch: function() {
- this.find('a').addClass('disabled');
- this.find('.active a').removeClass('disabled');
- this.find('.cms-preview-watermark').show();
- this.find('.active .cms-preview-watermark').hide();
- this._super();
- },
- onunmatch: function() {
- this._super();
- }
- });
- $('.cms-preview .cms-preview-states a').entwine({
+ // Preview selectors (screen size, screen mode)
+ $('.preview-selector .preview-selected').entwine({
onclick: function(e) {
e.preventDefault();
- this.parents('.cms-preview').loadUrl(this.attr('href'));
- this.addClass('disabled');
- this.parents('.cms-preview-states').find('a').not(this).removeClass('disabled');
- //This hides all watermarks
- this.parents('.cms-preview-states').find('.cms-preview-watermark').hide();
- //Show the watermark for the current state
- this.siblings('.cms-preview-watermark').show();
+ this.parents('.preview-selector').toggleClass('active');
}
});
-
- $('.cms-preview-toggle-link').entwine({
+ $(".preview-selector .preview-size-menu li").entwine({
onclick: function(e) {
- e.preventDefault();
-
- var preview = $('.cms-preview'),
- url = $('.cms-edit-form').choosePreviewLink();
-
- if(url) {
- preview.loadUrl(url);
- preview.unblock();
- preview.toggle();
- }
+ var text = $(this).html();
+ this.parents('.preview-selector').removeClass('active').find('.preview-selected').html(text);
+ this.siblings().removeClass('active');
+ this.addClass('active');
}
- });
+ });
+
+
+
$('.cms-edit-form').entwine({
/**
View
23 admin/javascript/LeftAndMain.js
@@ -4,6 +4,7 @@ jQuery.noConflict();
* File: LeftAndMain.js
*/
(function($) {
+
// setup jquery.entwine
$.entwine.warningLevel = $.entwine.WARN_LEVEL_BESTPRACTISE;
$.entwine('ss', function($) {
@@ -147,16 +148,22 @@ jQuery.noConflict();
redraw: function() {
if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
- // Move from inner to outer layouts. Some of the elements might not exist.
- // Not all edit forms are layouted, so qualify by their data value.
+ // Use the three column compressor layout, which squishes preview, then menu, then content
+ this.data('jlayout', jLayout.threeColumnCompressor({
+ menu: this.children('.cms-menu'),
+ content: this.children('.cms-content'),
+ preview: this.children('.cms-preview')}
+ ));
+
+ // Do the layout - this also lays out children. We move from outside to inside, resizing to fit the parent
+ this.layout();
- this.layout({resize: false});
- this.find('.cms-panel-layout').redraw();
- this.find('.cms-content-fields[data-layout-type]').redraw();
- this.find('.cms-edit-form[data-layout-type]').redraw();
+ // Redraw on all the children that need it
+ this.find('.cms-panel-layout').redraw();
+ this.find('.cms-content-fields[data-layout-type]').redraw();
+ this.find('.cms-edit-form[data-layout-type]').redraw();
this.find('.cms-preview').redraw();
this.find('.cms-content').redraw();
- this.layout({resize: false});
},
/**
@@ -800,8 +807,6 @@ jQuery.noConflict();
$(".cms-panel-layout").entwine({
redraw: function() {
if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
-
- this.layout({resize: false});
}
});
View
2  admin/scss/_forms.scss
@@ -293,7 +293,7 @@ form.small .field, .field.small {
}
.Actions {
- min-height: 30px;
+ max-height: 28px;
overflow: auto;
}
View
35 admin/scss/_menu.scss
@@ -8,16 +8,16 @@
*/
.cms-logo-header {
- background-color: darken($color-dark-bg, 10%);
+ background-color: $color-dark-bg;
position: relative !important;
top:auto !important;
height:auto !important;
- padding: 0 8px 0 4px;
+ padding: 0 8px;
line-height: 24px;
@include background-image(
- linear-gradient(darken($color-dark-bg, 10%), $color-dark-bg, darken($color-dark-bg, 10%)
- ));
+ linear-gradient(lighten($color-dark-bg,20%), $color-dark-bg)
+ );
span {
color: $color-text-light;
@@ -32,12 +32,13 @@
}
.cms-logo {
- border-bottom: 1px solid darken($color-dark-separator, 20%);
+ border-bottom: 1px solid lighten($color-dark-bg,4%);
overflow: hidden;
- padding: $grid-y 0;
+ padding: $grid-y+2 0 $grid-y+1; /* should come to 40px with border bottom and line-height */
position: relative;
vertical-align: middle;
font-size: $font-base-size;
+ min-height: 20px;
.collapsed &{
padding:0;
@@ -51,27 +52,25 @@
position: absolute;
top: $grid-y;
bottom: $grid-y;
- left: 4px;
display: block;
width: 24px;
background: $application-logo-small no-repeat left center;
text-indent: -9999em;
- padding-right: 7px;
- border-right: 1px solid $color-dark-separator;
+ padding: 0 1px;
}
span {
font-weight: bold;
- font-size: 14px;
- line-height: 20px;
+ font-size: $font-base-size;
+ line-height: 16px;
padding: 2px 0;
- margin-left: 44px;
+ margin-left: 30px;
}
}
.cms-login-status {
border-top: 1px solid $color-dark-separator;
- padding: 7px 4px;
+ padding: $grid-y*1.5 0 17px;
line-height: 16px;
font-size: $font-base-size - 1;
@@ -80,7 +79,7 @@
height: 16px;
width: 16px;
float: left;
- margin: 0 8px 0 3px;
+ margin: 0 8px 0 5px;
background: sprite($sprites32, logout) no-repeat;
text-indent: -9999em;
}
@@ -90,6 +89,7 @@
z-index: 80;
background: $color-base;
width: ($grid-x * 24); // Removed right border as it clashes with different blues
+
@include box-shadow($color-shadow-blacker 0 0 3px);
a {
text-decoration: none;
@@ -105,7 +105,7 @@
}
&.collapsed {
- width: 40px;
+ width: 40px !important;
cursor: auto;
z-index: 1000;
@@ -140,7 +140,8 @@
}
.cms-logo {
- height:24px;
+ height:20px;
+ padding: 10px 0 9px;
}
&.cms-panel .cms-panel-content {
@@ -242,7 +243,7 @@
color: $color-text-light;
text-shadow: darken($color-menu-button, 20%) 0 -1px 0;
border-top: 1px solid lighten($color-menu-button, 10%);
- border-bottom: 1px solid darken($color-menu-button, 20%);
+ border-bottom: 1px solid darken($color-menu-button, 15%);
background-color: $color-menu-button;
@include background-image(linear-gradient(
$color-menu-button,
View
8 admin/scss/_mixins.scss
@@ -101,5 +101,9 @@
*:first-child &{ zoom:1;}
}
-
-
+@mixin transition($properties: margin 0.3s ease-in 0s){
+ -moz-transition: $properties;
+ -webkit-transition: $properties;
+ -o-transition: $properties;
+ transition: $properties;
+}
View
243 admin/scss/_preview.scss
@@ -0,0 +1,243 @@
+/* -------------------------- */
+
+.cms-preview-controls {
+ z-index: 1;
+ background: $color-widget-bg;
+ min-height: 28px;
+ padding: $grid-y*1.5 $grid-y*1.5;
+}
+
+
+.cms-navigator {
+ width: 100%;
+
+ /* Old selecter - to delete */
+ .chzn-results li {
+ display: list-item;
+ }
+ .field {
+ display: inline-block;
+ float: right;
+ margin-right: $grid-x/2;
+ }
+}
+
+/* Preview selector */
+ul.preview-selector {
+ li {
+ position: relative;
+ float: right;
+ margin: 1px 0 0;
+ .preview-selected span {
+ display: none;
+ }
+ a {
+ padding: 6px 6px 6px 30px;
+ width: 0px;
+ text-indent: 299px;
+ overflow: hidden;
+ background: {
+ color: #FFF;
+ image: url(../images/preview_icons.png);
+ repeat: no-repeat;
+ }
+ &.icon-auto {
+ background-position: -3px -246px;
+ }
+ &.icon-desktop {
+ background-position: -3px -62px;
+ }
+ &.icon-tablet {
+ background-position: -3px -33px;
+ }
+ &.icon-mobile {
+ background-position: -3px -1px;
+ }
+ &.icon-split {
+ background-position: -3px -214px;
+ }
+ &.icon-edit {
+ background-position: -3px -184px;
+ }
+ &.icon-preview {
+ background-position: -3px -154px;
+ }
+ &.icon-window {
+ background-position: -3px -124px;
+ }
+ &:hover {
+ background-color: lighten($color-widget-bg,2%);
+ text-decoration: none;
+ }
+ }
+ li {
+ border: none;
+ margin: 0;
+
+ a {
+ display: block;
+ line-height: 18px;
+ height: auto;
+ border-bottom: 1px solid $color-light-separator;
+ width: 90px;
+ text-indent: 0;
+
+ &.icon-auto {
+ background-position: -3px -242px;
+ }
+ &.icon-desktop {
+ background-position: -3px -58px;
+ }
+ &.icon-tablet {
+ background-position: -3px -29px;
+ }
+ &.icon-mobile {
+ background-position: -3px 3px;
+ }
+ &.icon-split {
+ background-position: -3px -211px;
+ }
+ &.icon-edit {
+ background-position: -3px -182px;
+ }
+ &.icon-preview {
+ background-position: -3px -152px;
+ }
+ &.icon-window {
+ background-position: -3px -122px;
+ }
+
+ }
+ &.last a {
+ border-bottom: none;
+ }
+ &.active a {
+ background-color: $color-widget-bg;
+ }
+ }
+ .preview-selected {
+ a {
+ float:left;
+ display: inline;
+ height: 16px;
+ width:1px;
+ background-color: transparent;
+ padding-right: 0;
+ }
+ }
+
+ .preview-size-menu {
+ display: none;
+ @include border-radius(4px 4px 0 4px);
+ border: 1px solid $color-light-separator;
+ background-color: #FFF;
+ overflow: hidden;
+ position: absolute;
+ right: 0px;
+ top: -125px; /* height for 4 items */
+ }
+ }
+ li:hover, &.active {
+ .preview-size-menu {
+ display: block;
+ }
+ }
+ li:hover .preview-selected a, &.active .preview-selected a {
+ background-color: darken($color-widget-bg,6%);
+ @include border-radius(0 0 4px 4px);
+ }
+}
+
+/* Preview selector - Override for double label */
+ul.double-label li {
+ li a {
+ line-height: 12px;
+ padding: 5px 6px 5px 30px;
+ span {
+ color: lighten($color-text,10%);
+ font-size: 10px;
+ display: block;
+ }
+ }
+ .preview-size-menu {
+ top: -141px; /* height for 4 items */
+ }
+}
+
+/* On Off Switch*/
+.cms-preview-states {
+ float: right;
+ margin-top: 2px;
+ margin-right: 7px;
+ position: relative;
+ width: 100px;
+ label {
+ display: block;
+ overflow: hidden;
+ cursor: pointer;
+ border: 1px solid darken($color-menu-button, 15%);
+ @include border-radius(3px);
+ }
+}
+
+.switch-options{
+ display:block;
+ width: 200%;
+ margin-left: -100%;
+ @include transition(margin 0.3s ease-in 0s);
+ a {
+ text-align: right;
+ width: 50%;
+ float: left;
+ display: block;
+ padding: 0 6px 0 0;
+ height: 24px;
+ line-height: 24px;
+ color: #FFF;
+ background-color: $color-menu-button;
+ @include background-image(linear-gradient(
+ darken($color-menu-button, 10%),
+ $color-menu-button
+ ));
+ @include box-shadow(darken($color-menu-button, 15%) 0 0 2px inset);
+ @include box-sizing(border-box);
+ &:hover {
+ text-decoration: none;
+ }
+ &.first, &:first-child {
+ text-align: left;
+ padding-left: 8px;
+ padding-right: 0;
+ }
+
+ }
+}
+.switch {
+ display:block;
+ width: 8px;
+ margin: 0px;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ right: 90px;
+ border: 1px solid lighten($color-medium-separator,10%);
+ @include box-shadow(#FFF 0 0 2px inset);
+ @include border-radius(3px);
+ background: $color-widget-bg;
+ @include background-image(linear-gradient(
+ rgba(0,0,0,0.2) 0%,
+ rgba(0,0,0,0) 100%
+ ));
+ @include transition(all 0.3s ease-in 0s);
+}
+input.hide{
+ display:none;
+}
+input:checked + label {
+ .switch-options {
+ margin-left: 0;
+ }
+ .switch {
+ right: 0px;
+ }
+}
View
331 admin/scss/_style.scss
@@ -69,7 +69,8 @@ body.cms {
* -------------------------------------------- */
.cms-container {
height: 100%;
- background: $tab-panel-texture-background;
+ /*background: $tab-panel-texture-background;*/
+ background: $tab-panel-texture-color;
}
.cms-preview,
@@ -132,6 +133,10 @@ body.cms {
}
}
+#Form_EditForm.CMSMain {
+ padding: 0; /* fixs the double padding around the edit panel - move to framework? */
+}
+
/** --------------------------------------------
* Tabs
* -------------------------------------------- */
@@ -146,6 +151,7 @@ body.cms {
.ui-tabs-panel {
padding: $grid-x 0;
+ background: transparent; // default it's white
}
.ui-widget-header {
@@ -153,17 +159,13 @@ body.cms {
background: none;
}
- .ui-tabs-panel {
- background: transparent; // default it's white
- }
-
.ui-tabs-nav {
float: right;
margin: 0 0 -1px 0;
padding: 0 $grid-x*2 0 0;
border-bottom: none;
- & ~ .ui-tabs-panel {
+ ~ .ui-tabs-panel {
border-top:1px solid $color-button-generic-border;
clear: both;
}
@@ -279,6 +281,7 @@ body.cms {
.ui-tabs.cms-tabset-primary .ui-tabs-nav, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary {
li {
margin-right: 0; // tabs are directly adjacent
+ margin-top: 0;
a {
margin: 0;
// overlap divider line below
@@ -307,7 +310,8 @@ body.cms {
.ui-state-active {
@include box-shadow(none);
background: darken($color-widget-bg, 2%);
- background: $tab-panel-texture-background;
+ background: $tab-panel-texture-color;
+ /*background: $tab-panel-texture-background;*/
border-top: none;
border: {
right-color: darken($color-tab, 15%); // same color as divider between header and body, needed for IE
@@ -404,15 +408,17 @@ body.cms {
* Actions
* -------------------------------------------- */
-.cms-content-actions {
+.cms-content-actions, .cms-preview-controls {
margin: 0;
padding: $grid-y*1.5 $grid-y*2;
z-index: 0;
border-top: 1px solid $color-light-separator;
border-top: 1px solid #FAFAFA;
- @include box-shadow(#CCC 0 -1px 1px);
+ @include box-shadow(1px 0 0 $tab-panel-texture-color, #CCC 0 -1px 1px);
+ height: 28px;
}
+
/** --------------------------------------------
* Messages
* -------------------------------------------- */
@@ -445,10 +451,6 @@ body.cms {
background-color: lighten($color-good,40%);
border-color: $color-good;
}
- /* // Orange
- background: lighten($color-optional,16%);
- border-color: $color-optional;
- */
p {
margin: 0;
@@ -509,74 +511,73 @@ body.cms {
.parent-mode {
padding: $grid-x;
overflow: auto;
- }
-
- #PageType {
+ }
+}
+#PageType {
ul {
- padding-left: 20px;
- li {
- float: none;
- width: 100%;
- padding: 9px 0 9px 15px;
- overflow: hidden;
- border-bottom-width: 2px;
- border-bottom: 2px groove lighten($color-shadow-light, 95%);
- -webkit-border-image: url(../images/textures/bg_fieldset_elements_border.png) 2 stretch stretch;
- border-image: url(../images/textures/bg_fieldset_elements_border.png) 2 stretch stretch;
-
- &:last-child {
- border-bottom: none;
- }
-
- &:hover, &.selected {
- background-color: $color-highlight-opacity;
- }
+ padding-left: 20px;
+ li {
+ float: none;
+ width: 100%;
+ padding: 9px 0 9px 15px;
+ overflow: hidden;
+ border-bottom-width: 2px;
+ border-bottom: 2px groove lighten($color-shadow-light, 95%);
+ -webkit-border-image: url(../images/textures/bg_fieldset_elements_border.png) 2 stretch stretch;
+ border-image: url(../images/textures/bg_fieldset_elements_border.png) 2 stretch stretch;
- &.disabled {
- color: $color-text-disabled;
- &:hover {
- background: none;
- }
- }
+ &:last-child {
+ border-bottom: none;
+ }
+
+ &:hover, &.selected {
+ background-color: $color-highlight-opacity;
+ }
- input {
- margin: inherit;
+ &.disabled {
+ color: $color-text-disabled;
+ &:hover {
+ background: none;
}
+ }
- label {
- padding-left: 0;
- padding-bottom: 0;
- }
-
- input, label, .page-icon, .title {
- float: left;
- line-height: 1.3em;
- }
-
- .page-icon {
- margin: 0 4px;
- }
-
- .title {
- width: 120px;
- font-weight: bold;
- padding-right: 10px;
- }
-
- .description {
- font-style: italic;
- }
+ input {
+ margin: inherit;
}
- }
+
+ label {
+ padding-left: 0;
+ padding-bottom: 0;
+ }
+
+ input, label, .page-icon, .title {
+ float: left;
+ line-height: 1.3em;
+ }
+
+ .page-icon {
+ margin: 0 4px;
+ }
+
+ .title {
+ width: 120px;
+ font-weight: bold;
+ padding-right: 10px;
+ }
+
+ .description {
+ font-style: italic;
+ }
+ }
}
-}
+}
/** --------------------------------------------
* Content toolbar
* -------------------------------------------- */
.cms-content-toolbar {
- min-height:35px;
+ min-height: 29px;
display: block;
margin: 0 0 15px 0;
@@ -625,7 +626,7 @@ body.cms {
}
div {
- background:url(../images/btn-icon/settings.png) 5px 4px no-repeat;
+ /*background:url(../images/btn-icon/settings.png) 5px 4px no-repeat;*/
@halkyon Owner
halkyon added a note

Why was this commented out? The cool little cog icon on the batch actions dropdown is now missing :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
border-left:none;
width:100%;
}
@@ -644,10 +645,8 @@ body.cms {
* panel
*/
.cms-content-tools {
- background-color: #F1F4F5;
- background: $tab-panel-texture-background; // Pages bg panel look like same as pages view
+ background: $tab-panel-texture-color;
width: $grid-x * 24;
- border-right: 1px solid darken($color-widget-bg, 15%);
overflow-y: auto;
overflow-x: hidden;
z-index: 70;
@@ -873,123 +872,30 @@ body.cms {
padding-right: 1em;
}
}
+
+/* Necessary because when chosen is initialised the selects are not part of cms-preview
+ and so the sizes are wrong. */
+select.preview-dropdown {
+ display: inline;
+ width: auto;
+ padding-right: 20px;
+}
+
.cms-preview {
- display: none;
- width: 1px; // collapsed by default
- z-index: 100;
-
- .cms-preview-toggle {
- width: 10px;
- cursor: pointer;
-
- a {
- display: block;
- padding: 2px 12px 2px 6px;
- height: 16px;
- position: relative;
- top: 48%;
- background-color: $color-base;
- color: $color-text-light;
- font-weight: bold;
- text-decoration: none;
- z-index: 2000;
- line-height: 16px;
-
- @include border-bottom-right-radius(4px);
- @include border-top-right-radius(4px);
-
- @include box-shadow(0 0 10px rgba(180, 180,180,0.4));
- }
- }
-
+ background: #FFF url(../images/preview.png) no-repeat center center;
&.is-collapsed {
.cms-preview-toggle {
a {
left: -15px; // point left
}
}
- }
-
+ }
iframe {
width: 100%;
height: 100%;
- }
-
- .cms-preview-watermark {
- z-index: 99;
- position: fixed;
- right: 60px;
- top: 30px;
- opacity: 0.3;
- padding: .4em 1em;
- cursor: default;
- font-weight: bold;
- text-decoration: none;
- line-height: $grid-y * 2;
- color: lighten($color-text-dark, 10%);
- border: 1px solid #AAAAAA;
- border-radius:12px;
- background-color: white;
- text-shadow: lighten($color-tab, 5%) 0 1px 0;
- }
-
- .cms-preview-controls {
- z-index: 99;
- background: $color-widget-bg;
- padding: 10px;
- min-height: 30px;
-
- .cms-navigator {
- width: 100%;
-
- * {
- display: inline-block;
- }
- }
-
- li{
- margin: 0 2px;
- }
-
- a.disabled {
- padding:.4em 1em;
- color: lighten($color-text-dark, 20%);
- border: 1px solid;
- border-color: darken($color-button-disabled, 20%);
- border-radius:12px;
- cursor: default;
- background:$color-base;
- }
-
- .cms-preview-states {
- margin-right: 10px;
- margin-left: 10px;
- }
-
- .cms-preview-popup-link {
- display: inline-block;
- }
-
- .cms-preview-toggle-link {
- float: right;
- }
-
- }
-
+ }
}
-.cms-preview-toggle-link {
- display: block;
- float: right;
- font-size: 12px;
- text-decoration: none;
-}
-
-.cms-preview-header {
- background-color: #FFBE66;
- padding: 10px;
- font-weight: bold;
-}
/** --------------------------------------------
* Member Profile
@@ -1026,12 +932,10 @@ form.member-profile-form {
.advanced h4 {
margin-bottom: .5em;
}
-
.Actions {
text-align: left;
border: 0;
- }
-
+ }
input.customFormat {
width: $grid-x * 10;
border: 1px solid #ccc !important;
@@ -1079,13 +983,16 @@ form.member-profile-form {
}
}
}
-
}
.cms {
.cms-content {
- @include box-shadow(3px 0 4px rgba(0,0,0,0.15));
+ @include box-shadow(1px 0 0 #BBB);
@include border-radius(0);
+ /*background: $tab-panel-texture-background;*/
+ background: $tab-panel-texture-color;
+ width: 800px;
+ z-index: 40;
}
.cms-content-fields {
@@ -1114,8 +1021,7 @@ form.member-profile-form {
ul.optionset li {
float:none;
}
- }
-
+ }
.field {
.fieldholder-small { // Small fields have a second set of headers
margin-top: $grid-y;
@@ -1131,7 +1037,6 @@ form.member-profile-form {
}
}
}
-
form.member-profile-form {
#Root .ui-tabs-nav {
display: none;
@@ -1140,8 +1045,7 @@ form.member-profile-form {
#Root_Main, #Root_Permissions {
border: none;
}
- }
-
+ }
}
/** --------------------------------------------
@@ -1169,7 +1073,6 @@ form.member-profile-form {
.cms-panel {
overflow: hidden;
-
.cms-panel-toggle {
@include box-shadow(0 0 1px rgba(107, 120, 123, 0.5));
&.south {
@@ -1190,6 +1093,7 @@ form.member-profile-form {
&.toggle-expand {
width: 40px; // will set the collapsed width
+ display: none;
}
}
}
@@ -1197,27 +1101,27 @@ form.member-profile-form {
&.south {
border-top: 1px solid #FFF;
}
- }
-
+ }
&.collapsed {
-
cursor: pointer;
-
+ %display-none{
+ display:none;
+ }
.cms-panel-header * {
- display: none;
+ @extend %display-none;
}
.cms-panel-content {
- display: none;
+ @extend %display-none;
+ }
+
+ .cms-panel-toggle a.toggle-expand {
+ display: block;
+ }
+
+ .cms-panel-toggle a.toggle-collapse {
+ @extend %display-none;
}
-
- //.cms-panel-header {
- // @include rotate(-90deg);
- // position: relative;
- // top: $grid-y * 10;
- // border: none;
- // padding: 0;
- //}
}
@@ -1278,7 +1182,6 @@ form.member-profile-form {
margin-top: -8px;
display: none; /* To be shown by javascript, see LeftAndMain.Panel.js */
}
-
.collapsed-flyout {
display: block !important;
left: 41px;
@@ -1290,12 +1193,11 @@ form.member-profile-form {
display: block !important;
}
}
-
}
.cms {
.cms-panel-padded {
- padding: $grid-y $grid-x*2;
+ padding: $grid-y $grid-x*2 $grid-y*2;
margin:0;
}
}
@@ -1332,13 +1234,13 @@ form.member-profile-form {
// Elements with this class can either frame inline markup or an iframe,
// most styles should be applied to .cms-dialog instead (which declares the content in the frame)
.ui-dialog {
- background: url("../images/textures/bg_cms_main_content.png") repeat left top #F0F3F4;
- border: 3px solid #000 !important;
+ background: url("../images/textures/bg_cms_main_content.png") repeat left top #F0F3F4;
+ border: 3px solid #000 !important;
border-radius: $grid-y;
- overflow: visible;
- padding: 0;
+ overflow: visible;
+ padding: 0;
- // Titlebar for pop-up dialog.
+ // Titlebar for pop-up dialog.
.ui-dialog-titlebar.ui-widget-header {
font-size: $font-base-size+2;
padding: 0;
@@ -1426,10 +1328,10 @@ body.cms-dialog {
position: relative;
label {
- position: absolute;
- left: 8px;
- top: 13px;
- font-weight: normal; color: #888;
+ position: absolute;
+ left: 8px;
+ top: 13px;
+ font-weight: normal; color: #888;
}
.middleColumn {
@@ -1464,7 +1366,6 @@ body.cms-dialog {
}
}
}
-
.loading button.add-url .ui-icon {
background-image: url(../images/throbber.gif);
background-position: 50% 50%;
View
1  admin/scss/screen.scss
@@ -54,5 +54,6 @@ $experimental-support-for-svg: true;
@import "style.scss";
@import "tree.scss";
@import "menu.scss";
+@import "preview.scss";
@import "ModelAdmin.scss";
@import "SecurityAdmin.scss";
View
4 admin/scss/themes/_default.scss
@@ -10,7 +10,7 @@
$color-base: #b0bec7 !default;
$color-widget-bg: lighten($color-base, 20%) !default;
-$color-dark-bg: #003050 !default;
+$color-dark-bg: #142136 /*#003050*/ !default;
$color-dark-separator: #19435c !default;
$color-medium-separator: #808080 !default;
$color-light-separator: rgba(201, 205, 206, 0.8) !default;
@@ -66,7 +66,7 @@ $color-cms-batchactions-menu-selected-background: #efe999 !default;
/** -----------------------------------------------
* Textures
* ----------------------------------------------- */
-$tab-panel-texture-color: #f0f3f4 !default;
+$tab-panel-texture-color: /*#f0f3f4*/ #ECEFF1 !default;
$tab-panel-texture-background: $tab-panel-texture-color url(../images/textures/bg_cms_main_content.png) repeat top left !default;
/** -----------------------------------------------
View
68 admin/templates/Includes/LeftAndMain_SilverStripeNavigator.ss
@@ -1,12 +1,68 @@
<div class="cms-navigator">
- <a href="#" class="ss-ui-button cms-preview-toggle-link" data-icon="preview">
- &laquo; <% _t('SilverStripeNavigator.Edit', 'Edit') %>
- </a>
- <ul class="cms-preview-states">
+ <ul class="preview-selector select-mode">
+ <li>
+ <span class="preview-selected">
+ <a href="" class="icon-split">
+ <% _t('SilverStripeNavigator.SplitView', 'Split mode') %>
+ </a>
+ </span>
+ <ul class="preview-size-menu">
+ <li class="active">
+ <a class="icon-split" href="">Split mode</a>
+ </li>
+ <li>
+ <a class="icon-preview" href="">Preview mode</a>
+ </li>
+ <li>
+ <a class="icon-edit" href="">Edit mode</a>
+ </li>
+ <li class="last">
+ <a class="icon-window" href="">Dual window</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+
+ <ul class="preview-selector double-label select-size">
+ <li>
+ <span class="preview-selected">
+ <a href="" class="icon-auto">Auto <span>Responsive</span></a>
+ </span>
+ <ul class="preview-size-menu">
+ <li class="active">
+ <a class="icon-auto" href="">Auto <span>Responsive</span></a>
+ </li>
+ <li>
+ <a class="icon-desktop" href="">Desktop <span>1024px width</span></a>
+ </li>
+ <li>
+ <a class="icon-tablet" href="">Tablet <span>800px width</span></a>
+ </li>
+ <li class="last">
+ <a class="icon-mobile" href="">Mobile <span>400px width</span></a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+
+
+ <% include Switch %>
+
+
+ <!-- To remove
+ <span class="field dropdown">
+ <select id="cms-preview-mode-dropdown" class="preview-dropdown dropdown nolabel" autocomplete="off" name="Action">
+ <option value="split"><% _t('SilverStripeNavigator.SplitView', 'Split mode') %></option>
+ <option value="preview"><% _t('SilverStripeNavigator.Preview View', 'Preview mode') %></option>
+ </select>
+ </span>
+ -->
+
+ <!-- To remove
+ <ul class="cms-preview-states">
<% loop Items %>
<li class="<% if isActive %> active<% end_if %>">$HTML
- <% if Watermark %><span class="cms-preview-watermark">$Watermark</span><% end_if %>
</li>
<% end_loop %>
- </ul>
+ </ul>-->
</div>
View
13 admin/templates/Includes/Switch.ss
@@ -0,0 +1,13 @@
+<div class="cms-preview-states">
+ <input type="checkbox" name="cms-preview" class="hide cms-preview" id="cms-preview-state" checked>
+ <label for="cms-preview-state">
+ <span class="switch-options">
+ <% loop Items %>
+ <a href="$Link" class="$FirstLast <% if isActive %> active<% end_if %>">
+ $Title
+ </a>
+ <% end_loop %>
+ </span>
+ <span class="switch"></span>
+ </label>
+</div>
View
2  admin/templates/LeftAndMain.ss
@@ -9,7 +9,7 @@
<body class="loading cms" lang="$Locale.RFC1766" data-frameworkpath="$ModulePath(framework)">
<% include CMSLoadingScreen %>
- <div class="cms-container center" data-layout-type="border">
+ <div class="cms-container center" data-layout-type="custom">
$Menu
$Content
View
25 admin/thirdparty/jlayout/lib/jquery.jlayout.js
@@ -12,8 +12,14 @@ if (jQuery && jLayout) {
* This wraps jQuery objects in another object that supplies
* the methods required for the layout algorithms.
*/
- function wrap(item, resize) {
+ // CUSTOM hfriedlander 2012-10-26 for side-by-side editing.
+ // function wrap(item, resize) {
+ var wrap = $.jLayoutWrap = function(item, resize) {
+ // CUSTOM END
var that = {};
+ // CUSTOM hfriedlander 2012-10-26 for side-by-side editing.
+ that.item = item;
+ // CUSTOM END
$.each(['min', 'max'], function (i, name) {
that[name + 'imumSize'] = function (value) {
@@ -29,11 +35,20 @@ if (jQuery && jLayout) {
$.extend(that, {
doLayout: function () {
- var l = item.data('jlayout');
-
- if (l) {
- l.layout(that);
+ // CUSTOM hfriedlander 2012-10-26 for side-by-side editing.
+ //var l = item.data('jlayout');
+ //
+ //if (l) {
+ // l.layout(that);
+ //}
+ //
+ var l = item.data('jlayout');
+ if (l) l.layout(that);
+ else if (item.is('[data-layout-type]')) {
+ item.layout({resize: false});
}
+ // CUSTOM END
+
item.css({position: 'absolute'});
},
isVisible: function () {
View
5 css/AssetUploadField.css
@@ -1,5 +1,6 @@
/** This file contains the default theme definitions for the admin interface. Please put mostly SCSS variable definitions in here, and leave the actual styling to _style.scss and auxilliary files. */
/** ----------------------------------------------- Colours ------------------------------------------------ */
+/*$color-optional: #a1d2eb !default; */
/** ----------------------------------------------- Textures ----------------------------------------------- */
/** ----------------------------------------------- Typography. ------------------------------------------------ */
/** ----------------------------------------------- Grid Units (px) We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */
@@ -31,12 +32,12 @@ body.cms.ss-uploadfield-edit-iframe .fieldholder-small label, .composite.ss-asse
.ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info { background-color: #c11f1d; padding-right: 130px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c11f1d), color-stop(4%, #bf1d1b), color-stop(8%, #b71b1c), color-stop(15%, #b61e1d), color-stop(27%, #b11d1d), color-stop(31%, #ab1d1c), color-stop(42%, #a51b1b), color-stop(46%, #9f1b19), color-stop(50%, #9f1b19), color-stop(54%, #991c1a), color-stop(58%, #971a18), color-stop(62%, #911b1b), color-stop(65%, #911b1b), color-stop(88%, #7e1816), color-stop(92%, #771919), color-stop(100%, #731817)); background-image: -webkit-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: -moz-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: -o-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); }
.ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name { width: 100%; cursor: default; background: #bcb9b9; background: rgba(201, 198, 198, 0.9); }
.ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name .name { text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.7); }
-.ss-assetuploadfield .ss-uploadfield-files .ui-state-warning .ss-uploadfield-item-info { background-color: #e09d66; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dbb99e), color-stop(8%, #d4ac8b), color-stop(50%, #ce9f78), color-stop(54%, #cd9d77), color-stop(96%, #d18261), color-stop(100%, #d27154)); background-image: -webkit-linear-gradient(top, #dbb99e 0%, #d4ac8b 8%, #ce9f78 50%, #cd9d77 54%, #d18261 96%, #d27154 100%); background-image: -moz-linear-gradient(top, #dbb99e 0%, #d4ac8b 8%, #ce9f78 50%, #cd9d77 54%, #d18261 96%, #d27154 100%); background-image: -o-linear-gradient(top, #dbb99e 0%, #d4ac8b 8%, #ce9f78 50%, #cd9d77 54%, #d18261 96%, #d27154 100%); background-image: linear-gradient(top, #dbb99e 0%, #d4ac8b 8%, #ce9f78 50%, #cd9d77 54%, #d18261 96%, #d27154 100%); }
+.ss-assetuploadfield .ss-uploadfield-files .ui-state-warning .ss-uploadfield-item-info { background-color: #e9d104; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e5d33b), color-stop(8%, #e2ce24), color-stop(50%, #d1be1c), color-stop(54%, #d1bc1b), color-stop(96%, #d09a1a), color-stop(100%, #ce8719)); background-image: -webkit-linear-gradient(top, #e5d33b 0%, #e2ce24 8%, #d1be1c 50%, #d1bc1b 54%, #d09a1a 96%, #ce8719 100%); background-image: -moz-linear-gradient(top, #e5d33b 0%, #e2ce24 8%, #d1be1c 50%, #d1bc1b 54%, #d09a1a 96%, #ce8719 100%); background-image: -o-linear-gradient(top, #e5d33b 0%, #e2ce24 8%, #d1be1c 50%, #d1bc1b 54%, #d09a1a 96%, #ce8719 100%); background-image: linear-gradient(top, #e5d33b 0%, #e2ce24 8%, #d1be1c 50%, #d1bc1b 54%, #d09a1a 96%, #ce8719 100%); }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name { position: relative; z-index: 1; margin: 3px 0 3px 50px; width: 50%; color: #5e5e5e; background: #eeeded; background: rgba(255, 255, 255, 0.8); -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; line-height: 24px; height: 22px; padding: 0 5px; text-align: left; cursor: pointer; display: table; table-layout: fixed; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .name { text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5); display: inline; float: left; max-width: 50%; font-weight: normal; padding: 0 5px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status { position: relative; float: right; padding: 0 0 0 5px; max-width: 30%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5); }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-error-text { max-width: 70%; position: absolute; right: 5px; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6); color: #cc0000; }
-.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-warning-text { color: #d7823c; }
+.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-warning-text { color: #b7a403; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-success-text { color: #1f9433; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions { position: absolute; top: 0; right: 0; left: 0; z-index: 0; color: #f00; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button { background: none; border: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-shadow: none; color: white; float: right; }
View
1  css/GridField.css
@@ -1,6 +1,7 @@
/** Core styles for the basic GridField form field without any specific style. @package framework @subpackage scss @todo Add radial gradient to default delete button state @todo Create SASS mixin-function to simply swap the from/to, to to/from colours in grsdient mixins? */
/** This file contains the default theme definitions for the admin interface. Please put mostly SCSS variable definitions in here, and leave the actual styling to _style.scss and auxilliary files. */
/** ----------------------------------------------- Colours ------------------------------------------------ */
+/*$color-optional: #a1d2eb !default; */
/** ----------------------------------------------- Textures ----------------------------------------------- */
/** ----------------------------------------------- Typography. ------------------------------------------------ */
/** ----------------------------------------------- Grid Units (px) We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */
View
3  css/UploadField.css
@@ -1,5 +1,6 @@
/** This file contains the default theme definitions for the admin interface. Please put mostly SCSS variable definitions in here, and leave the actual styling to _style.scss and auxilliary files. */
/** ----------------------------------------------- Colours ------------------------------------------------ */
+/*$color-optional: #a1d2eb !default; */
/** ----------------------------------------------- Textures ----------------------------------------------- */
/** ----------------------------------------------- Typography. ------------------------------------------------ */
/** ----------------------------------------------- Grid Units (px) We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */
@@ -17,7 +18,7 @@
.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name .name { font-size: 11px; color: #848484; width: 290px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; display: inline; float: left; }
.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name .ss-uploadfield-item-status { float: right; padding: 0 0 0 5px; width: 100px; text-align: right; }
.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-error-text { color: red; font-weight: bold; }
-.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-warning-text { color: #d7823c; }
+.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-warning-text { color: #b7a403; }
.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-success-text { color: #1f9433; }
.ss-uploadfield .ss-ui-button { display: block; float: left; margin: 0 10px 0 0; }
.ss-uploadfield .ss-ui-button.ss-uploadfield-fromcomputer { position: relative; overflow: hidden; }
Please sign in to comment.
Something went wrong with that request. Please try again.