From a629f4b66e8fe00fd6379c1810a5c28f62b56be5 Mon Sep 17 00:00:00 2001 From: Ryan O'Hara Date: Wed, 8 Aug 2012 12:17:20 +1200 Subject: [PATCH] ENHANCEMENT: Move Actions into a FieldGroup and style these. TODO - Toggle each individual action detail when clicking the respective button. Currently when clicking a button this hides the whole panel --- code/DMSDocument.php | 11 ++++++++-- css/DMSDocumentCMSFields.css | 11 +++++++--- css/DMSMainCMS.css | 1 + javascript/DMSDocumentCMSFields.js | 9 +++++--- scss/DMSDocumentCMSFields.scss | 34 ++++++++++++++++++++++++++---- scss/DMSMainCMS.scss | 7 ++++-- 6 files changed, 59 insertions(+), 14 deletions(-) diff --git a/code/DMSDocument.php b/code/DMSDocument.php index aefc35e..a422884 100644 --- a/code/DMSDocument.php +++ b/code/DMSDocument.php @@ -481,9 +481,16 @@ class DMSDocument extends DataObject implements DMSDocumentInterface { ); $fields->add(new LiteralField('BottomTaskSelection',"
")); - $fields->add($uploadField); - $fields->add($pagesGrid); + //$fields->add($uploadField); + // 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($group = new FieldGroup( + $uploadField, + $pagesGrid + )); + $group->setName("ActionsPanel")->addExtraClass('dmsupload ss-upload ss-uploadfield'); return $fields; } diff --git a/css/DMSDocumentCMSFields.css b/css/DMSDocumentCMSFields.css index 7798f5a..5aab9f3 100644 --- a/css/DMSDocumentCMSFields.css +++ b/css/DMSDocumentCMSFields.css @@ -9,18 +9,23 @@ form.small .field input.text, form.small .field textarea, form.small .field sele #DocumentTypeID ul { padding: 0; } #DocumentTypeID ul input[type="radio"] { display: none; } -#DocumentTypeID ul li { display: inline-block; padding: 0; width: 94px; margin-right: -1px; border-radius: 0; } +#DocumentTypeID ul li { display: inline-block; padding: 0; width: 90px; margin-right: -1px; border-radius: 0; } #DocumentTypeID ul li.val1 { width: 130px; } +#DocumentTypeID ul li.val1 label { max-width: 105px; } #DocumentTypeID ul li:first-child { border-radius: 6px 0 0 6px; border-left: 1px solid #C0C0C2; } #DocumentTypeID ul li:last-child { border-radius: 0 6px 6px 0; } #DocumentTypeID 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); box-shadow: 0 1px 1px 0 #A0A0A0 inset; } #DocumentTypeID ul li.selected :after { box-shadow: 0 1px 1px 0 #DDD; } -#DocumentTypeID ul li label { padding: .4em 1em; display: block; line-height: 1.4; white-space: normal; } +#DocumentTypeID ul li label { padding: .4em 1em; display: inline-block; line-height: 1.4; white-space: normal; max-width: 60px; } #Actions li { margin-left: 2px; } #Actions li:first-child { margin-left: 0; } -#ReplaceFile { display: none; } +#ActionsPanel .middleColumn { margin-left: 184px; } +#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; } #Form_ItemEditForm fieldset table.ss-gridfield-table { width: auto; } #Form_ItemEditForm fieldset table.ss-gridfield-table tr th.main { min-width: 200px; } diff --git a/css/DMSMainCMS.css b/css/DMSMainCMS.css index 68551f0..db4f185 100644 --- a/css/DMSMainCMS.css +++ b/css/DMSMainCMS.css @@ -9,4 +9,5 @@ .DMSDocumentAddController .ui-tabs ul.ui-tabs-nav li { padding-bottom: 1px; border: 1px solid #C0C0C2; } .DMSDocumentAddController .ui-tabs ul.ui-tabs-nav li a { padding: 8px 20px 8px; } +#Form_EditForm_Documents { padding: 1em 0; } #Form_EditForm_Documents input[name="filter[LastChanged]"] { display: none; } diff --git a/javascript/DMSDocumentCMSFields.js b/javascript/DMSDocumentCMSFields.js index b681354..aab3041 100644 --- a/javascript/DMSDocumentCMSFields.js +++ b/javascript/DMSDocumentCMSFields.js @@ -12,13 +12,15 @@ $('#DocumentTypeID input[type=radio]').entwine({ onadd: function() { + // Checks to see what radio button is selected if (this.is(':checked')) { this.change(); } }, onchange: function(e) { + // Remove selected class from radio buttons $('#DocumentTypeID').find('li').removeClass('selected'); - + //If radio button is checked then add the selected class if (this.is(':checked')) { this.parent('li').addClass('selected'); } @@ -27,8 +29,9 @@ $('#Actions ul li').entwine({ onclick: function(e) { - e.preventDefault(); - this.parents('fieldset').find('#ReplaceFile').show(); + //TODO - Fix so when clicking on an action it toggles the correct details inside the ActionsPanel + // Currently this just hides the whole ActionsPanel when you click an action button + this.parents('fieldset').find('#ActionsPanel').hide(); } }); diff --git a/scss/DMSDocumentCMSFields.scss b/scss/DMSDocumentCMSFields.scss index 80b3543..8e4b370 100644 --- a/scss/DMSDocumentCMSFields.scss +++ b/scss/DMSDocumentCMSFields.scss @@ -48,11 +48,14 @@ form.small .field .TreeDropdownField, li{ display:inline-block; padding:0; - width:94px; + width:90px; margin-right: -1px; border-radius:0; &.val1{ width:130px; + label{ + max-width:105px; + } } &:first-child{ border-radius: 6px 0 0 6px; @@ -76,9 +79,10 @@ form.small .field .TreeDropdownField, } label{ padding: .4em 1em; - display: block; + display: inline-block; line-height: 1.4; white-space:normal; + max-width:60px; } } } @@ -91,8 +95,30 @@ form.small .field .TreeDropdownField, } } } -#ReplaceFile{ - display:none; + +#ActionsPanel{ + .middleColumn{ + margin-left:184px; + } + label.fieldholder-small-label{ + display: none; + } + .fieldgroup-field{ + float:none; + width:auto; + .fieldholder-small{ + label{ + float:none; + width:auto; + margin:0; + padding:0; + &.ss-ui-button{ + float: left; + margin: 0 10px 0 0; + } + } + } + } } #Form_ItemEditForm{ diff --git a/scss/DMSMainCMS.scss b/scss/DMSMainCMS.scss index 190bdb8..f5166ad 100644 --- a/scss/DMSMainCMS.scss +++ b/scss/DMSMainCMS.scss @@ -41,6 +41,9 @@ } -#Form_EditForm_Documents input[name="filter[LastChanged]"] { - display: none; +#Form_EditForm_Documents { + padding: 1em 0; + input[name="filter[LastChanged]"] { + display: none; + } } \ No newline at end of file