From ff04a9f493d44d818888532a98d6e15b6abfcd6e Mon Sep 17 00:00:00 2001 From: James Ayers Date: Tue, 12 Nov 2013 20:09:32 +1300 Subject: [PATCH] fixed CMSfields js and css issues --- code/DMSDocument.php | 69 +++++++++++++++++++++++------- css/DMSDocumentCMSFields.css | 50 +++++++++++++--------- javascript/DMSDocumentCMSFields.js | 13 ++++-- scss/DMSDocumentCMSFields.scss | 30 ++++++++++--- 4 files changed, 117 insertions(+), 45 deletions(-) diff --git a/code/DMSDocument.php b/code/DMSDocument.php index 7573c55..1ec9d51 100755 --- a/code/DMSDocument.php +++ b/code/DMSDocument.php @@ -612,6 +612,7 @@ class DMSDocument extends DataObject implements DMSDocumentInterface { //new GridFieldEditButton(), new GridFieldDetailForm() ); + $gridFieldConfig->getComponentByType('GridFieldDataColumns') ->setDisplayFields(array( 'Title'=>'Title', @@ -624,6 +625,7 @@ class DMSDocument extends DataObject implements DMSDocumentInterface { singleton('CMSPageEditController')->Link('show') ) )); + $pagesGrid = GridField::create( 'Pages', _t('DMSDocument.RelatedPages', 'Related Pages'), @@ -656,7 +658,7 @@ class DMSDocument extends DataObject implements DMSDocumentInterface { $versionsGridFieldConfig ); $extraTasks .= '
  • Versions
    • '; - $extraFields = $versionsGrid->addExtraClass('find-versions'); + //$extraFields = $versionsGrid->addExtraClass('find-versions'); } $fields->add(new LiteralField('BottomTaskSelection', @@ -686,20 +688,57 @@ class DMSDocument extends DataObject implements DMSDocumentInterface { // This adds all the actions details into a group. // Embargo, History, etc to go in here // These are toggled on and off via the Actions Buttons above - $fields->add(FieldGroup::create( - FieldGroup::create( - $embargo, - $embargoDatetime - )->addExtraClass('embargo'), - FieldGroup::create( - $expiry, - $expiryDatetime - )->addExtraClass('expiry'), - $uploadField->addExtraClass('replace'), - $pagesGrid->addExtraClass('find-usage'), - $referencesGrid->addExtraClass('find-references'), - $extraFields - )->setName("ActionsPanel")->addExtraClass('dmsupload ss-uploadfield')); + // exit('hit'); + $actionsPanel = FieldGroup::create( + + FieldGroup::create( + $embargo, + $embargoDatetime + )->addExtraClass('embargo'), + + FieldGroup::create( + $expiry, + $expiryDatetime + )->addExtraClass('expiry'), + + FieldGroup::create( + $uploadField + )->addExtraClass('replace'), + + FieldGroup::create( + $pagesGrid + )->addExtraClass('find-usage'), + + FieldGroup::create( + $referencesGrid + )->addExtraClass('find-references'), + + FieldGroup::create( + $versionsGrid + )->addExtraClass('find-versions') + + ); + + $actionsPanel->setName("ActionsPanel"); + $actionsPanel->addExtraClass("ActionsPanel"); + + $fields->push($actionsPanel); + + // $fields->add(FieldGroup::create( + // FieldGroup::create( + // $embargo, + // $embargoDatetime + // )->addExtraClass('embargo'), + // FieldGroup::create( + // $expiry, + // $expiryDatetime + // )->addExtraClass('expiry'), + // $uploadField->addExtraClass('replace'), + // $pagesGrid->addExtraClass('find-usage'), + // $referencesGrid->addExtraClass('find-references'), + // $extraFields + // )->setName("ActionsPanel")->addExtraClass('dmsupload ss-uploadfield')); + $this->extend('updateCMSFields', $fields); diff --git a/css/DMSDocumentCMSFields.css b/css/DMSDocumentCMSFields.css index 1ddfd7f..1aba0a4 100644 --- a/css/DMSDocumentCMSFields.css +++ b/css/DMSDocumentCMSFields.css @@ -13,7 +13,7 @@ form.small .field input.text, form.small .field textarea, form.small .field sele #DocumentTypeID .middleColumn ul li { display: table; padding: 0; width: 125px; height: 40px; white-space: normal; margin-right: -1px; border-radius: 0; } #DocumentTypeID .middleColumn ul li:first-child { border-radius: 6px 0 0 6px; border-left: 1px solid #C0C0C2; } #DocumentTypeID .middleColumn ul li:last-child { border-radius: 0 6px 6px 0; } -#DocumentTypeID .middleColumn ul li.selected, .ie8 #DocumentTypeID .middleColumn ul li.selected { border-bottom: 1px solid #C0C0C2; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c0c0c0), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#c0c0c0, #e6e6e6); background: -moz-linear-gradient(#c0c0c0, #e6e6e6); background: -o-linear-gradient(#c0c0c0, #e6e6e6); background: -ms-linear-gradient(#c0c0c0, #e6e6e6); background: linear-gradient(#c0c0c0, #e6e6e6); background-color: silver; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */ box-shadow: 0 1px 1px 0 #A0A0A0 inset; } +#DocumentTypeID .middleColumn ul li.selected, .ie8 #DocumentTypeID .middleColumn ul li.selected { border-bottom: 1px solid #C0C0C2; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c0c0c0), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#c0c0c0, #e6e6e6); background: -moz-linear-gradient(#c0c0c0, #e6e6e6); background: -o-linear-gradient(#c0c0c0, #e6e6e6); background: linear-gradient(#c0c0c0, #e6e6e6); background-color: silver; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */ box-shadow: 0 1px 1px 0 #A0A0A0 inset; } #DocumentTypeID .middleColumn ul li.selected :after, .ie8 #DocumentTypeID .middleColumn ul li.selected :after { box-shadow: 0 1px 1px 0 #DDD; } #DocumentTypeID .middleColumn ul li label { display: table-cell; vertical-align: middle; text-align: center; padding: 0 10px; } @@ -21,28 +21,36 @@ form.small .field input.text, form.small .field textarea, form.small .field sele #Actions li { margin-left: 2px; } #Actions li:first-child { margin-left: 0; } #Actions li.delete-button-appended { display: inline-block; position: relative; margin-left: 0; } -#Actions li.dms-active { border-bottom: 1px solid #C0C0C2; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c0c0c0), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#c0c0c0, #e6e6e6); background: -moz-linear-gradient(#c0c0c0, #e6e6e6); background: -o-linear-gradient(#c0c0c0, #e6e6e6); background: -ms-linear-gradient(#c0c0c0, #e6e6e6); background: linear-gradient(#c0c0c0, #e6e6e6); background-color: silver; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */ box-shadow: 0 1px 1px 0 #A0A0A0 inset; } +#Actions li.dms-active { border-bottom: 1px solid #C0C0C2; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c0c0c0), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#c0c0c0, #e6e6e6); background: -moz-linear-gradient(#c0c0c0, #e6e6e6); background: -o-linear-gradient(#c0c0c0, #e6e6e6); background: linear-gradient(#c0c0c0, #e6e6e6); background-color: silver; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */ box-shadow: 0 1px 1px 0 #A0A0A0 inset; } #Actions li.dms-active:after { content: ''; display: block; position: absolute; top: 33px; left: 50%; margin-left: -6px; width: 12px; height: 12px; background: #F8F8F8; border-right: 1px solid #B3B3B3; border-top: 1px solid #B3B3B3; -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); pointer-events: none; z-index: 10; } -#ActionsPanel .middleColumn { margin-left: 184px; width: 510px; } -form.small #ActionsPanel .middleColumn { margin-left: 120px; } -#ActionsPanel label.fieldholder-small-label { display: none; } -#ActionsPanel .fieldgroup-field { float: none; width: auto; } -#ActionsPanel .fieldgroup-field .fieldholder-small label { float: none; width: auto; margin: 0; padding: 0; } -#ActionsPanel .fieldgroup-field .fieldholder-small label.ss-ui-button { float: left; margin: 0 10px 0 0; } -#ActionsPanel .fieldgroup-field .embargo li, #ActionsPanel .fieldgroup-field .expiry li { float: none; width: 100%; margin-left: 8px; } -#ActionsPanel .fieldgroup-field .embargo li label, #ActionsPanel .fieldgroup-field .expiry li label { padding-left: 10px; } -#ActionsPanel .fieldgroup-field .embargo .embargoDatetime, #ActionsPanel .fieldgroup-field .embargo .expiryDatetime, #ActionsPanel .fieldgroup-field .expiry .embargoDatetime, #ActionsPanel .fieldgroup-field .expiry .expiryDatetime { margin-top: 0; margin-left: 34px; } -#ActionsPanel .fieldgroup-field .embargo .embargoDatetime .field.date, #ActionsPanel .fieldgroup-field .embargo .embargoDatetime .field.time, #ActionsPanel .fieldgroup-field .embargo .expiryDatetime .field.date, #ActionsPanel .fieldgroup-field .embargo .expiryDatetime .field.time, #ActionsPanel .fieldgroup-field .expiry .embargoDatetime .field.date, #ActionsPanel .fieldgroup-field .expiry .embargoDatetime .field.time, #ActionsPanel .fieldgroup-field .expiry .expiryDatetime .field.date, #ActionsPanel .fieldgroup-field .expiry .expiryDatetime .field.time { display: inline-block; width: auto; } -#ActionsPanel .fieldgroup-field .embargo .embargoDatetime .field.date .middleColumn, #ActionsPanel .fieldgroup-field .embargo .expiryDatetime .field.date .middleColumn, #ActionsPanel .fieldgroup-field .expiry .embargoDatetime .field.date .middleColumn, #ActionsPanel .fieldgroup-field .expiry .expiryDatetime .field.date .middleColumn { background: url("../images/calendar-month.png") 90px 7px no-repeat; } -#ActionsPanel .fieldgroup-field .embargo .embargoDatetime .field.time .middleColumn, #ActionsPanel .fieldgroup-field .embargo .expiryDatetime .field.time .middleColumn, #ActionsPanel .fieldgroup-field .expiry .embargoDatetime .field.time .middleColumn, #ActionsPanel .fieldgroup-field .expiry .expiryDatetime .field.time .middleColumn { background: url("../images/clock-frame.png") 90px 7px no-repeat; } -#ActionsPanel .fieldgroup-field .embargo .embargoDatetime .middleColumn, #ActionsPanel .fieldgroup-field .embargo .expiryDatetime .middleColumn, #ActionsPanel .fieldgroup-field .expiry .embargoDatetime .middleColumn, #ActionsPanel .fieldgroup-field .expiry .expiryDatetime .middleColumn { margin-left: 0; width: auto; border: none; } -#ActionsPanel .fieldgroup-field .embargo .embargoDatetime .middleColumn input, #ActionsPanel .fieldgroup-field .embargo .expiryDatetime .middleColumn input, #ActionsPanel .fieldgroup-field .expiry .embargoDatetime .middleColumn input, #ActionsPanel .fieldgroup-field .expiry .expiryDatetime .middleColumn input { width: 80px; margin-right: 40px; } -#ActionsPanel .ss-uploadfield-files .ss-uploadfield-item-preview { background: url("../images/app_icons/generic_32.png") -10px -6px no-repeat; } -#ActionsPanel .ss-uploadfield-files .ss-uploadfield-item-name span.name { width: 260px; } -#ActionsPanel .ss-uploadfield-files .ss-uploadfield-item-actions .ss-uploadfield-item-cancel { width: auto; text-indent: 0; } -#ActionsPanel .ss-uploadfield-files .ss-uploadfield-item-actions .ss-uploadfield-item-cancel .btn-icon-deleteLight { background-position: 0 -128px; display: inline-block; } -#ActionsPanel .ss-uploadfield-files .ss-uploadfield-item-actions .ss-uploadfield-item-cancel .ui-button-text { display: block; position: relative; float: right; color: #555; padding: 0; padding-left: 2em; } +.ActionsPanel { /*.middleColumn{ + margin-left:184px; + width: 510px; + form.small &{ + margin-left: 120px; + } +} +*/ /*label.fieldholder-small-label{ + display: none; +}*/ } +.ActionsPanel .fieldgroup { display: none; float: none; width: auto; background: #f8f8f8; padding: 15px; border: 1px solid #d0d3d5; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } +.ActionsPanel .fieldgroup .fieldholder-small label { float: none; width: auto; margin: 0; padding: 0; } +.ActionsPanel .fieldgroup .fieldholder-small label.ss-ui-button { float: left; margin: 0 10px 0 0; } +.ActionsPanel .fieldgroup .embargo li, .ActionsPanel .fieldgroup .expiry li { float: none; width: 100%; margin-left: 8px; } +.ActionsPanel .fieldgroup .embargo li label, .ActionsPanel .fieldgroup .expiry li label { padding-left: 10px; } +.ActionsPanel .fieldgroup .embargo .embargoDatetime, .ActionsPanel .fieldgroup .embargo .expiryDatetime, .ActionsPanel .fieldgroup .expiry .embargoDatetime, .ActionsPanel .fieldgroup .expiry .expiryDatetime { margin-top: 0; margin-left: 34px; } +.ActionsPanel .fieldgroup .embargo .embargoDatetime .field.date, .ActionsPanel .fieldgroup .embargo .embargoDatetime .field.time, .ActionsPanel .fieldgroup .embargo .expiryDatetime .field.date, .ActionsPanel .fieldgroup .embargo .expiryDatetime .field.time, .ActionsPanel .fieldgroup .expiry .embargoDatetime .field.date, .ActionsPanel .fieldgroup .expiry .embargoDatetime .field.time, .ActionsPanel .fieldgroup .expiry .expiryDatetime .field.date, .ActionsPanel .fieldgroup .expiry .expiryDatetime .field.time { display: inline-block; width: auto; } +.ActionsPanel .fieldgroup .embargo .embargoDatetime .field.date .middleColumn, .ActionsPanel .fieldgroup .embargo .expiryDatetime .field.date .middleColumn, .ActionsPanel .fieldgroup .expiry .embargoDatetime .field.date .middleColumn, .ActionsPanel .fieldgroup .expiry .expiryDatetime .field.date .middleColumn { background: url("../images/calendar-month.png") 90px 7px no-repeat; } +.ActionsPanel .fieldgroup .embargo .embargoDatetime .field.time .middleColumn, .ActionsPanel .fieldgroup .embargo .expiryDatetime .field.time .middleColumn, .ActionsPanel .fieldgroup .expiry .embargoDatetime .field.time .middleColumn, .ActionsPanel .fieldgroup .expiry .expiryDatetime .field.time .middleColumn { background: url("../images/clock-frame.png") 90px 7px no-repeat; } +.ActionsPanel .fieldgroup .embargo .embargoDatetime .middleColumn, .ActionsPanel .fieldgroup .embargo .expiryDatetime .middleColumn, .ActionsPanel .fieldgroup .expiry .embargoDatetime .middleColumn, .ActionsPanel .fieldgroup .expiry .expiryDatetime .middleColumn { margin-left: 0; width: auto; border: none; } +.ActionsPanel .fieldgroup .embargo .embargoDatetime .middleColumn input, .ActionsPanel .fieldgroup .embargo .expiryDatetime .middleColumn input, .ActionsPanel .fieldgroup .expiry .embargoDatetime .middleColumn input, .ActionsPanel .fieldgroup .expiry .expiryDatetime .middleColumn input { width: 80px; margin-right: 40px; } +.ActionsPanel #Embargo { border: none; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } +.ActionsPanel .ss-uploadfield-files .ss-uploadfield-item-preview { background: url("../images/app_icons/generic_32.png") -10px -6px no-repeat; } +.ActionsPanel .ss-uploadfield-files .ss-uploadfield-item-name span.name { width: 260px; } +.ActionsPanel .ss-uploadfield-files .ss-uploadfield-item-actions .ss-uploadfield-item-cancel { width: auto; text-indent: 0; } +.ActionsPanel .ss-uploadfield-files .ss-uploadfield-item-actions .ss-uploadfield-item-cancel .btn-icon-deleteLight { background-position: 0 -128px; display: inline-block; } +.ActionsPanel .ss-uploadfield-files .ss-uploadfield-item-actions .ss-uploadfield-item-cancel .ui-button-text { display: block; position: relative; float: right; color: #555; padding: 0; padding-left: 2em; } #Form_ItemEditForm fieldset table.ss-gridfield-table { width: 494px; } #Form_ItemEditForm fieldset table.ss-gridfield-table tr th.main { min-width: 175px; } diff --git a/javascript/DMSDocumentCMSFields.js b/javascript/DMSDocumentCMSFields.js index 56a89e3..4bbffcd 100644 --- a/javascript/DMSDocumentCMSFields.js +++ b/javascript/DMSDocumentCMSFields.js @@ -35,17 +35,22 @@ $('#Actions ul li').entwine({ onclick: function(e) { + + console.log('LI CLICKED'); + //add active state to the current button $('#Actions ul li').removeClass('dms-active'); this.addClass('dms-active'); //$('li.dms-active').append(''); //hide all inner field sections - var panel = $('#ActionsPanel'); - panel.find('div.fieldgroup-field').hide(); + var panel = $('.ActionsPanel:first'); + panel.find('div.fieldgroup').hide(); //show the correct group of controls - panel.find('.'+this.data('panel')).closest('div.fieldgroup-field').show(); + //panel.find('.'+this.data('panel')).closest('div.fieldgroup').show(); + panel.find('.'+this.data('panel')).show(); + } }); @@ -73,7 +78,7 @@ } }); - $('#ActionsPanel').entwine({ + $('.ActionsPanel').entwine({ onadd: function() { //do an initial show of the entire panel this.show(); diff --git a/scss/DMSDocumentCMSFields.scss b/scss/DMSDocumentCMSFields.scss index 6f27202..6fc237f 100644 --- a/scss/DMSDocumentCMSFields.scss +++ b/scss/DMSDocumentCMSFields.scss @@ -1,4 +1,5 @@ @import "compass/css3"; + @import '_mixins'; $color-button-generic: #e6e6e6 !default; @@ -63,20 +64,31 @@ form.small .field .TreeDropdownField, } } -#ActionsPanel{ - .middleColumn{ +.ActionsPanel{ + + /*.middleColumn{ margin-left:184px; width: 510px; form.small &{ margin-left: 120px; } } - label.fieldholder-small-label{ + */ + + /*label.fieldholder-small-label{ + display: none; + }*/ + + + .fieldgroup { display: none; - } - .fieldgroup-field{ float:none; width:auto; + background: #f8f8f8; + padding: 15px; + border: 1px solid #d0d3d5; + @include border-radius(5px); + .fieldholder-small{ label{ float:none; @@ -129,6 +141,14 @@ form.small .field .TreeDropdownField, } } } + + #Embargo { + border: none; + box-shadow: none; + -moz-box-shadow: none; + -webkit-box-shadow: none; + } + .ss-uploadfield-files{ .ss-uploadfield-item-preview{ background: url('../images/app_icons/generic_32.png') -10px -6px no-repeat;