From 9b42effeb5a4b211bd059ceb6d8a91710bc958f4 Mon Sep 17 00:00:00 2001 From: Robbie Averill Date: Mon, 22 May 2017 14:06:06 +1200 Subject: [PATCH] FIX Refactor SCSS, convert to more BEM-like names, add admin icon * Remove "small" class from inline edit form for documents * Swap relationeditor GridFieldConfig for record editor to ensure that document sets can be deleted from a page context rather than unlinked (natively) * Fix to ensure that related documents can be autocompleted via partial matching on filename * Add 2 space indentation rule to editorconfig for .js and .scss files --- .editorconfig | 2 +- code/cms/DMSDocumentAdmin.php | 2 + code/cms/DMSUploadField_ItemHandler.php | 1 - code/extensions/DMSSiteTreeExtension.php | 4 +- code/model/DMSDocument.php | 16 +- code/model/DMSDocumentSet.php | 8 +- dist/css/cmsbundle.css | 356 +++++++----------- images/app_icons/drawer.png | Bin 0 -> 273 bytes javascript/DMSDocumentCMSFields.js | 24 +- scss/_mixins.scss | 7 + scss/_variables.scss | 5 + ...SDocumentCMSFields.scss => cmsfields.scss} | 172 ++++----- scss/main.scss | 5 +- scss/{DMSMainCMS.scss => upload.scss} | 114 +----- templates/DMSDocumentAddExistingField.ss | 2 +- tests/DMSDocumentTest.php | 4 +- 16 files changed, 292 insertions(+), 430 deletions(-) create mode 100644 images/app_icons/drawer.png create mode 100644 scss/_mixins.scss rename scss/{DMSDocumentCMSFields.scss => cmsfields.scss} (63%) rename scss/{DMSMainCMS.scss => upload.scss} (69%) diff --git a/.editorconfig b/.editorconfig index 47ae637..f2b28c1 100644 --- a/.editorconfig +++ b/.editorconfig @@ -10,7 +10,7 @@ indent_style = space insert_final_newline = true trim_trailing_whitespace = true -[{*.yml,package.json}] +[{*.yml,package.json,*.scss,*.js}] indent_size = 2 # The indent size used in the package.json file cannot be changed: diff --git a/code/cms/DMSDocumentAdmin.php b/code/cms/DMSDocumentAdmin.php index 998bfef..b52eb68 100644 --- a/code/cms/DMSDocumentAdmin.php +++ b/code/cms/DMSDocumentAdmin.php @@ -10,6 +10,8 @@ class DMSDocumentAdmin extends ModelAdmin private static $menu_title = 'Documents'; + private static $menu_icon = 'dms/images/app_icons/drawer.png'; + /** * Remove the default "add" button and replace it with a customised version for DMS * diff --git a/code/cms/DMSUploadField_ItemHandler.php b/code/cms/DMSUploadField_ItemHandler.php index 6ea3e1a..374a4ab 100644 --- a/code/cms/DMSUploadField_ItemHandler.php +++ b/code/cms/DMSUploadField_ItemHandler.php @@ -37,7 +37,6 @@ class DMSUploadField_ItemHandler extends UploadField_ItemHandler $validator ); $form->loadDataFrom($file); - $form->addExtraClass('small'); return $form; } diff --git a/code/extensions/DMSSiteTreeExtension.php b/code/extensions/DMSSiteTreeExtension.php index b612a42..71a2eb3 100644 --- a/code/extensions/DMSSiteTreeExtension.php +++ b/code/extensions/DMSSiteTreeExtension.php @@ -20,12 +20,10 @@ class DMSSiteTreeExtension extends DataExtension 'Document Sets', false, $this->owner->DocumentSets(), //->Sort('DocumentSort'), - new GridFieldConfig_RelationEditor + new GridFieldConfig_RecordEditor ); $gridField->addExtraClass('documentsets'); - $gridField->getConfig()->removeComponentsByType('GridFieldAddExistingAutocompleter'); - $fields->addFieldToTab( 'Root.Document Sets (' . $this->owner->DocumentSets()->count() . ')', $gridField diff --git a/code/model/DMSDocument.php b/code/model/DMSDocument.php index 523bc92..d4e503b 100644 --- a/code/model/DMSDocument.php +++ b/code/model/DMSDocument.php @@ -514,9 +514,8 @@ class DMSDocument extends DataObject implements DMSDocumentInterface { if ($this->getField('Filename')) { return $this->getField('Filename'); - } else { - return ASSETS_DIR . '/'; } + return ASSETS_DIR . '/'; } /** @@ -529,6 +528,8 @@ class DMSDocument extends DataObject implements DMSDocumentInterface /** + * Returns the filename of a document without the prefix, e.g. 0~filename.jpg -> filename.jpg + * * @return string */ public function getFilenameWithoutID() @@ -898,7 +899,7 @@ class DMSDocument extends DataObject implements DMSDocumentInterface ); $actionsPanel->setName("ActionsPanel"); - $actionsPanel->addExtraClass("DMSDocumentActionsPanel"); + $actionsPanel->addExtraClass('dmsdocument-actionspanel'); $fields->push($actionsPanel); $this->extend('updateCMSFields', $fields); @@ -1130,7 +1131,7 @@ class DMSDocument extends DataObject implements DMSDocumentInterface )->setName("FilePreview")->addExtraClass('cms-file-info') ); - $fields->setName('FileP'); + $fields->addExtraClass('dmsdocument-documentdetails'); $urlField->dontEscape = true; return $fields; @@ -1211,7 +1212,8 @@ class DMSDocument extends DataObject implements DMSDocumentInterface $addExisting->setSearchList($this->getRelatedDocumentsForAutocompleter()); // Restrict search fields to specific fields only - $addExisting->setSearchFields(array('Title', 'Filename')); + $addExisting->setSearchFields(array('Title:PartialMatch', 'Filename:PartialMatch')); + $addExisting->setResultsFormat('$Filename'); $this->extend('updateRelatedDocumentsGridField', $gridField); @@ -1304,12 +1306,12 @@ class DMSDocument extends DataObject implements DMSDocumentInterface */ public function getActionTaskHtml() { - $html = '
' + $html = '
' . '' . '
    '; foreach ($this->actionTasks as $panelKey => $title) { - $html .= '
  • ' + $html .= '
  • ' . _t('DMSDocument.ACTION_' . strtoupper($panelKey), $title) . '
    • '; } diff --git a/code/model/DMSDocumentSet.php b/code/model/DMSDocumentSet.php index e0cb159..586eed3 100644 --- a/code/model/DMSDocumentSet.php +++ b/code/model/DMSDocumentSet.php @@ -32,6 +32,11 @@ class DMSDocumentSet extends DataObject ), ); + private static $summary_fields = array( + 'Title' => 'Title', + 'Documents.Count' => 'No. Documents' + ); + /** * Retrieve a list of the documents in this set. An extension hook is provided before the result is returned. * @@ -85,6 +90,7 @@ class DMSDocumentSet extends DataObject // Document listing $gridFieldConfig = GridFieldConfig::create() ->addComponents( + new GridFieldButtonRow('before'), new GridFieldToolbarHeader(), new GridFieldFilterHeader(), new GridFieldSortableHeader(), @@ -139,7 +145,7 @@ class DMSDocumentSet extends DataObject $gridField->addExtraClass('documents'); $gridFieldConfig->addComponent( - $addNewButton = new DMSGridFieldAddNewButton, + $addNewButton = new DMSGridFieldAddNewButton('buttons-before-left'), 'GridFieldExportButton' ); $addNewButton->setDocumentSetId($self->ID); diff --git a/dist/css/cmsbundle.css b/dist/css/cmsbundle.css index bbba63a..a8f59e3 100644 --- a/dist/css/cmsbundle.css +++ b/dist/css/cmsbundle.css @@ -1,3 +1,137 @@ +.dmsdocument-documentdetails .fieldgroup-field .cms-file-info-preview { + box-shadow: none; } + +.dmsdocument-documentdetails .fieldgroup-field .cms-file-info-data { + width: 400px; } + +.dmsdocument-documentdetails .fieldgroup-field .fieldholder-small { + margin-top: 5px; } + .dmsdocument-documentdetails .fieldgroup-field .fieldholder-small .fieldholder-small-label { + font-weight: bold; + float: left; } + .dmsdocument-documentdetails .fieldgroup-field .fieldholder-small .readonly { + font-style: italic; } + +.dmsdocment-actions { + border: none; + box-shadow: none; + margin-bottom: 0; + padding: 0; } + .dmsdocment-actions label.left { + padding: 6px 0 0 0; } + .dmsdocment-actions .ss-ui-button { + border: none; + background: none; + border-radius: 0; + font-weight: normal; } + .dmsdocment-actions .ss-ui-button .ui-button-text { + padding-bottom: 1em; } + .dmsdocment-actions .ss-ui-button.dms-active, .dmsdocment-actions .ss-ui-button.dms-active:hover { + border-bottom: 4px solid #66727d; } + .dmsdocment-actions .ss-ui-button:hover, .dmsdocment-actions .ss-ui-button:active { + background: none; + border: none; + box-shadow: none; } + +.dmsdocument-actionspanel { + margin-top: 0; } + .dmsdocument-actionspanel .fieldgroup { + border: 1px solid #d0d3d5; + display: none; + margin-left: 0; + padding: 5px 15px; } + .dmsdocument-actionspanel .fieldgroup .fieldholder-small label { + padding: 0; } + .dmsdocument-actionspanel .fieldgroup .embargo li, + .dmsdocument-actionspanel .fieldgroup .expiry li { + margin-left: 8px; + width: 100%; } + .dmsdocument-actionspanel .fieldgroup .embargo li label, + .dmsdocument-actionspanel .fieldgroup .expiry li label { + padding-left: 10px; } + .dmsdocument-actionspanel .fieldgroup .embargo .embargoDatetime, + .dmsdocument-actionspanel .fieldgroup .embargo .expiryDatetime, + .dmsdocument-actionspanel .fieldgroup .expiry .embargoDatetime, + .dmsdocument-actionspanel .fieldgroup .expiry .expiryDatetime { + float: left; + margin-top: 0; + margin-left: 34px; + overflow: hidden; } + .dmsdocument-actionspanel .fieldgroup .embargo .embargoDatetime .field.date, .dmsdocument-actionspanel .fieldgroup .embargo .embargoDatetime .field.time, + .dmsdocument-actionspanel .fieldgroup .embargo .expiryDatetime .field.date, + .dmsdocument-actionspanel .fieldgroup .embargo .expiryDatetime .field.time, + .dmsdocument-actionspanel .fieldgroup .expiry .embargoDatetime .field.date, + .dmsdocument-actionspanel .fieldgroup .expiry .embargoDatetime .field.time, + .dmsdocument-actionspanel .fieldgroup .expiry .expiryDatetime .field.date, + .dmsdocument-actionspanel .fieldgroup .expiry .expiryDatetime .field.time { + display: inline-block; + margin: 0; + padding: 0; + width: auto; } + .dmsdocument-actionspanel .fieldgroup .embargo .embargoDatetime .field.date .middleColumn, .dmsdocument-actionspanel .fieldgroup .embargo .embargoDatetime .field.time .middleColumn, + .dmsdocument-actionspanel .fieldgroup .embargo .expiryDatetime .field.date .middleColumn, + .dmsdocument-actionspanel .fieldgroup .embargo .expiryDatetime .field.time .middleColumn, + .dmsdocument-actionspanel .fieldgroup .expiry .embargoDatetime .field.date .middleColumn, + .dmsdocument-actionspanel .fieldgroup .expiry .embargoDatetime .field.time .middleColumn, + .dmsdocument-actionspanel .fieldgroup .expiry .expiryDatetime .field.date .middleColumn, + .dmsdocument-actionspanel .fieldgroup .expiry .expiryDatetime .field.time .middleColumn { + overflow: hidden; } + .dmsdocument-actionspanel .fieldgroup .embargo .embargoDatetime .field.date .middleColumn, + .dmsdocument-actionspanel .fieldgroup .embargo .expiryDatetime .field.date .middleColumn, + .dmsdocument-actionspanel .fieldgroup .expiry .embargoDatetime .field.date .middleColumn, + .dmsdocument-actionspanel .fieldgroup .expiry .expiryDatetime .field.date .middleColumn { + background: url(../../images/calendar-month.png) 90px 7px no-repeat; } + .dmsdocument-actionspanel .fieldgroup .embargo .embargoDatetime .field.time .middleColumn, + .dmsdocument-actionspanel .fieldgroup .embargo .expiryDatetime .field.time .middleColumn, + .dmsdocument-actionspanel .fieldgroup .expiry .embargoDatetime .field.time .middleColumn, + .dmsdocument-actionspanel .fieldgroup .expiry .expiryDatetime .field.time .middleColumn { + background: url(../../images/clock-frame.png) 90px 7px no-repeat; } + .dmsdocument-actionspanel .fieldgroup .embargo .embargoDatetime .middleColumn, + .dmsdocument-actionspanel .fieldgroup .embargo .expiryDatetime .middleColumn, + .dmsdocument-actionspanel .fieldgroup .expiry .embargoDatetime .middleColumn, + .dmsdocument-actionspanel .fieldgroup .expiry .expiryDatetime .middleColumn { + border: none; + margin-left: 0; + width: auto; } + .dmsdocument-actionspanel .fieldgroup .embargo .embargoDatetime .middleColumn input.date, + .dmsdocument-actionspanel .fieldgroup .embargo .embargoDatetime .middleColumn input.time, + .dmsdocument-actionspanel .fieldgroup .embargo .expiryDatetime .middleColumn input.date, + .dmsdocument-actionspanel .fieldgroup .embargo .expiryDatetime .middleColumn input.time, + .dmsdocument-actionspanel .fieldgroup .expiry .embargoDatetime .middleColumn input.date, + .dmsdocument-actionspanel .fieldgroup .expiry .embargoDatetime .middleColumn input.time, + .dmsdocument-actionspanel .fieldgroup .expiry .expiryDatetime .middleColumn input.date, + .dmsdocument-actionspanel .fieldgroup .expiry .expiryDatetime .middleColumn input.time { + margin-right: 40px; + width: 80px; } + .dmsdocument-actionspanel .fieldgroup .fieldgroup-field label { + margin: 0; } + .dmsdocument-actionspanel .ss-uploadfield-files .ss-uploadfield-item-preview { + background: url(../../images/app_icons/generic_32.png) -10px -6px no-repeat; } + .dmsdocument-actionspanel .ss-uploadfield-files .ss-uploadfield-item-name span.name { + width: 260px; } + .dmsdocument-actionspanel .ss-uploadfield-files .ss-uploadfield-item-actions .ss-uploadfield-item-cancel { + text-indent: 0; + width: auto; } + .dmsdocument-actionspanel .ss-uploadfield-files .ss-uploadfield-item-actions .ss-uploadfield-item-cancel .btn-icon-deleteLight { + background-position: 0 -128px; + display: inline-block; } + .dmsdocument-actionspanel .ss-uploadfield-files .ss-uploadfield-item-actions .ss-uploadfield-item-cancel .ui-button-text { + color: #66727d; + display: block; + float: right; + padding: 0 0 0 2em; + position: relative; } + .dmsdocument-actionspanel > .fieldgroup.middleColumn { + display: block; + overflow: hidden; } + .dmsdocument-actionspanel > .fieldgroup.middleColumn .fieldgroup-field { + width: 100%; } + .dmsdocument-actionspanel .permissions .fieldholder-small { + clear: both; } + +#ui-datepicker-div { + border: 1px solid #d0d3d5; } + form.small .field input.text, form.small .field textarea, form.small .field select, @@ -8,190 +142,11 @@ form.small .field .TreeDropdownField, .field.small .TreeDropdownField { width: 100%; } -#FileP .fieldgroup-field { - width: 100%; } - #FileP .fieldgroup-field .cms-file-info-preview { - box-shadow: none; } - #FileP .fieldgroup-field .cms-file-info-data { - width: 400px; } - #FileP .fieldgroup-field .fieldholder-small { - margin-top: 5px; } - #FileP .fieldgroup-field .fieldholder-small label { - width: auto; - margin-left: 0; - padding-top: 0; - margin-right: 10px; - font-weight: bold; - float: left; } - #FileP .fieldgroup-field .fieldholder-small .readonly { - font-style: italic; - color: #666; } - -#Actions { - box-shadow: none; - border: none; - padding: 0; } - #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; } - -.DMSDocumentActionsPanel .fieldgroup { - display: none; - float: none; - width: auto; - background: #f8f8f8; - padding: 15px; - border: 1px solid #d0d3d5; } - .DMSDocumentActionsPanel .fieldgroup .fieldholder-small label { - float: none; - width: auto; - margin: 0; - padding: 0; } - .DMSDocumentActionsPanel .fieldgroup .fieldholder-small label.ss-ui-button { - float: left; - margin: 0 10px 0 0; } - .DMSDocumentActionsPanel .fieldgroup .embargo li, - .DMSDocumentActionsPanel .fieldgroup .expiry li { - float: none; - width: 100%; - margin-left: 8px; } - .DMSDocumentActionsPanel .fieldgroup .embargo li label, - .DMSDocumentActionsPanel .fieldgroup .expiry li label { - padding-left: 10px; } - .DMSDocumentActionsPanel .fieldgroup .embargo .embargoDatetime, - .DMSDocumentActionsPanel .fieldgroup .embargo .expiryDatetime, - .DMSDocumentActionsPanel .fieldgroup .expiry .embargoDatetime, - .DMSDocumentActionsPanel .fieldgroup .expiry .expiryDatetime { - margin-top: 0; - margin-left: 34px; - overflow: hidden; } - .DMSDocumentActionsPanel .fieldgroup .embargo .embargoDatetime .field.date, .DMSDocumentActionsPanel .fieldgroup .embargo .embargoDatetime .field.time, - .DMSDocumentActionsPanel .fieldgroup .embargo .expiryDatetime .field.date, - .DMSDocumentActionsPanel .fieldgroup .embargo .expiryDatetime .field.time, - .DMSDocumentActionsPanel .fieldgroup .expiry .embargoDatetime .field.date, - .DMSDocumentActionsPanel .fieldgroup .expiry .embargoDatetime .field.time, - .DMSDocumentActionsPanel .fieldgroup .expiry .expiryDatetime .field.date, - .DMSDocumentActionsPanel .fieldgroup .expiry .expiryDatetime .field.time { - display: inline-block; - width: auto; - margin: 0; - padding: 0; } - .DMSDocumentActionsPanel .fieldgroup .embargo .embargoDatetime .field.date .middleColumn, - .DMSDocumentActionsPanel .fieldgroup .embargo .expiryDatetime .field.date .middleColumn, - .DMSDocumentActionsPanel .fieldgroup .expiry .embargoDatetime .field.date .middleColumn, - .DMSDocumentActionsPanel .fieldgroup .expiry .expiryDatetime .field.date .middleColumn { - background: url(../../images/calendar-month.png) 90px 7px no-repeat; - overflow: hidden; } - .DMSDocumentActionsPanel .fieldgroup .embargo .embargoDatetime .field.time .middleColumn, - .DMSDocumentActionsPanel .fieldgroup .embargo .expiryDatetime .field.time .middleColumn, - .DMSDocumentActionsPanel .fieldgroup .expiry .embargoDatetime .field.time .middleColumn, - .DMSDocumentActionsPanel .fieldgroup .expiry .expiryDatetime .field.time .middleColumn { - background: url(../../images/clock-frame.png) 90px 7px no-repeat; - overflow: hidden; } - .DMSDocumentActionsPanel .fieldgroup .embargo .embargoDatetime .middleColumn, - .DMSDocumentActionsPanel .fieldgroup .embargo .expiryDatetime .middleColumn, - .DMSDocumentActionsPanel .fieldgroup .expiry .embargoDatetime .middleColumn, - .DMSDocumentActionsPanel .fieldgroup .expiry .expiryDatetime .middleColumn { - margin-left: 0; - width: auto; - border: none; } - .DMSDocumentActionsPanel .fieldgroup .embargo .embargoDatetime .middleColumn input, - .DMSDocumentActionsPanel .fieldgroup .embargo .expiryDatetime .middleColumn input, - .DMSDocumentActionsPanel .fieldgroup .expiry .embargoDatetime .middleColumn input, - .DMSDocumentActionsPanel .fieldgroup .expiry .expiryDatetime .middleColumn input { - width: 80px; - margin-right: 40px; } - -.DMSDocumentActionsPanel #Embargo { - border: none; - box-shadow: none; - -moz-box-shadow: none; - -webkit-box-shadow: none; } - -.DMSDocumentActionsPanel .ss-uploadfield-files .ss-uploadfield-item-preview { - background: url(../../images/app_icons/generic_32.png) -10px -6px no-repeat; } - -.DMSDocumentActionsPanel .ss-uploadfield-files .ss-uploadfield-item-name span.name { - width: 260px; } - -.DMSDocumentActionsPanel .ss-uploadfield-files .ss-uploadfield-item-actions .ss-uploadfield-item-cancel { - width: auto; - text-indent: 0; } - .DMSDocumentActionsPanel .ss-uploadfield-files .ss-uploadfield-item-actions .ss-uploadfield-item-cancel .btn-icon-deleteLight { - background-position: 0 -128px; - display: inline-block; } - .DMSDocumentActionsPanel .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; } - -.DMSDocumentActionsPanel > .fieldgroup.middleColumn { - overflow: hidden; - display: block; } - .DMSDocumentActionsPanel > .fieldgroup.middleColumn .fieldgroup-field { - width: 100%; } - -#Form_ItemEditForm fieldset table.ss-gridfield-table { - width: 494px; } - #Form_ItemEditForm fieldset table.ss-gridfield-table tr th.main { - min-width: 175px; } - #Form_ItemEditForm fieldset table.ss-gridfield-table tr th.main.col-action_SetOrderID { - width: 60px; - min-width: 60px; } - #Form_ItemEditForm fieldset table.ss-gridfield-table tr td { - white-space: normal; } - -#ui-datepicker-div { - border: 1px solid #DDD; } - -.ui-autocomplete { - border: 1px solid #DDD; - box-shadow: 0 1px 2px 0px #AFAFAF; +.dmsdocument-addexisting .ui-autocomplete { + border: 1px solid #d0d3d5; max-height: 300px; overflow: scroll; } -.cms fieldset.documents table td, -.cms fieldset.relatedLinks table td { - white-space: normal; } - -.cms fieldset.documents table td.col-buttons, -.cms fieldset.relatedLinks table td.col-buttons { - white-space: nowrap; } - .cms fieldset.documents table td.col-buttons .dms-delete-link-only .ui-icon, - .cms fieldset.relatedLinks table td.col-buttons .dms-delete-link-only .ui-icon { - background: url(../../images/chain-unchain.png) no-repeat; } - -.cms fieldset.documents table tr.dms-document-hidden-row.odd, -.cms fieldset.relatedLinks table tr.dms-document-hidden-row.odd { - background-color: rgba(242, 220, 222, 0.6); } - -.cms fieldset.documents table tr.dms-document-hidden-row.even, -.cms fieldset.relatedLinks table tr.dms-document-hidden-row.even { - background-color: rgba(243, 202, 204, 0.675); } - -.cms fieldset.documents table tr.dms-document-hidden-row:hover, -.cms fieldset.relatedLinks table tr.dms-document-hidden-row:hover { - background-color: rgba(245, 172, 173, 0.8) !important; } - -.DMSDocumentAddController .ui-tabs ul.ui-tabs-nav { - border-bottom: none; - float: right; - margin: 8px 0 -1px 0; - padding: 0 24px 0 0; } - .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; } - .ss-add .document-add-existing input.document-autocomplete { position: absolute; z-index: 9999; @@ -203,20 +158,16 @@ form.small .field .TreeDropdownField, box-sizing: border-box; -moz-box-sizing: border-box; } .ss-add .document-add-existing input.document-autocomplete[disabled] { - color: #C0C0C2; - text-shadow: 0 -1px 0 #FFF; - background: #EEE; + color: #d0d3d5; + text-shadow: 0 -1px 0 #ffffff; + background: #f8f8f8; background-image: none; - box-shadow: inset 0 1px 8px 0 #C4C4C4; + box-shadow: inset 0 1px 8px 0 #d0d3d5; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } -.ss-add .document-add-existing .TreeDropdownField { - border: none; - width: 100%; - max-width: 512px; - box-sizing: border-box; - cursor: pointer; } +.ss-add .document-add-existing .treedropdown { + border: none; } .ss-add .document-add-existing .treedropdownfield-toggle-panel-link { padding: 5px 9px 9px; @@ -241,13 +192,11 @@ form.small .field .TreeDropdownField, .ss-add .document-add-existing .document-list { width: 510px; - border: 1px solid #DDD; + border: 1px solid #d0d3d5; border-top: none; background: #ffffff; display: none; - box-shadow: 0 2px 4px 1px #DDD; max-height: 300px; - border-radius: 6px; background-clip: padding-box; overflow: scroll; } .ss-add .document-add-existing .document-list p { @@ -259,10 +208,10 @@ form.small .field .TreeDropdownField, .ss-add .document-add-existing .document-list ul li a { display: block; padding: 4px 8px; - border: 1px solid #FFF; + border: 1px solid #ffffff; color: black; } .ss-add .document-add-existing .document-list ul li a:hover { - border: 1px solid #CCC; + border: 1px solid #d0d3d5; border-radius: 4px; background: rgba(203, 203, 203, 0.4); cursor: pointer; @@ -326,20 +275,7 @@ form.small .field .TreeDropdownField, .cms .ss-add .treedropdownfield-panel ul li a.jstree-hovered, .cms .selectiongroup .treedropdownfield-panel ul li a.jstree-hovered { background: rgba(203, 203, 203, 0.4); - border: 1px solid #CCC; } - -@-moz-document url-prefix() .ss-add .document-add-existing input { - padding: 10px 7px; } - -#Form_EditForm_Documents { - padding: 1em 0; } - #Form_EditForm_Documents input[name="filter[LastChanged]"] { - display: none; } - -#Form_EditForm_RelatedLinks table { - padding: 1em 0; } - #Form_EditForm_RelatedLinks table thead h2 { - display: none; } + border: 1px solid #d0d3d5; } #Form_ItemEditForm h3:first-child { display: inline-block; diff --git a/images/app_icons/drawer.png b/images/app_icons/drawer.png new file mode 100644 index 0000000000000000000000000000000000000000..c7c46bed01efa543dbfcda230c1db5f59a804ec7 GIT binary patch literal 273 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`H#}V&LoEE~PGS^nau9Ic%i_hf zu~AJxTH+v^7qb$ObQ2I>!Mm<;mcxJf@_Y%l53kSuvE(be|L?AHk6kv?-M5inXuZhfRMua)^yh%5V?tAeLyHL%9TxUv@?iCwVZUiErIrW^l*w%p^h z7Cs=Kahow?_iL%VlM3&j%L^N?7n*4McVa'); //hide all inner field sections - var panel = $('.DMSDocumentActionsPanel:first'); + var panel = $('.dmsdocument-actionspanel:first'); panel.find('> .fieldgroup > .fieldgroup-field').hide(); //show the correct group of controls @@ -94,7 +94,7 @@ } }); - $('.DMSDocumentActionsPanel').entwine({ + $('.dmsdocument-actionspanel').entwine({ onadd: function () { //do an initial show of the entire panel this.show(); @@ -103,17 +103,17 @@ this.find('.replace').closest('div.fieldgroup-field').addClass('ss-upload').addClass('ss-uploadfield'); // add class and hide - $('.DMSDocumentActionsPanel .embargo input.date').closest('.fieldholder-small').addClass('embargoDatetime').hide(); - $('.DMSDocumentActionsPanel .expiry input.date').closest('.fieldholder-small').addClass('expiryDatetime').hide(); + $('.dmsdocument-actionspanel .embargo input.date').closest('.fieldholder-small').addClass('embargoDatetime').hide(); + $('.dmsdocument-actionspanel .expiry input.date').closest('.fieldholder-small').addClass('expiryDatetime').hide(); // We need to duplicate the above functions to work when Adding documents // $('#Form_EditForm_EmbargoedUntilDate_date').closest('.fieldholder-small').addClass('embargoDatetime').hide(); // $('#Form_EditForm_ExpireAtDate_date').closest('.fieldholder-small').addClass('expiryDatetime').hide(); //Add placeholder attribute to date and time fields - $('.DMSDocumentActionsPanel .embargo input.date').attr('placeholder', 'dd-mm-yyyy'); - $('.DMSDocumentActionsPanel .embargo input.time').attr('placeholder', 'hh:mm:ss'); - $('.DMSDocumentActionsPanel .expiry input.date').attr('placeholder', 'dd-mm-yyyy'); - $('.DMSDocumentActionsPanel .expiry input.time').attr('placeholder', 'hh:mm:ss'); + $('.dmsdocument-actionspanel .embargo input.date').attr('placeholder', 'dd-mm-yyyy'); + $('.dmsdocument-actionspanel .embargo input.time').attr('placeholder', 'hh:mm:ss'); + $('.dmsdocument-actionspanel .expiry input.date').attr('placeholder', 'dd-mm-yyyy'); + $('.dmsdocument-actionspanel .expiry input.time').attr('placeholder', 'hh:mm:ss'); // We need to duplicate to work when adding documents // $('#Form_EditForm_EmbargoedUntilDate_date').attr('placeholder', 'dd-mm-yyyy'); // $('#Form_EditForm_EmbargoedUntilDate_time').attr('placeholder', 'hh:mm:ss'); @@ -124,8 +124,8 @@ $('li[data-panel="embargo"]').click(); //set the initial state of the radio button and the associated dropdown hiding - $('.DMSDocumentActionsPanel .embargo input[type="radio"][checked]').change(); - $('.DMSDocumentActionsPanel .expiry input[type="radio"][checked]').change(); + $('.dmsdocument-actionspanel .embargo input[type="radio"][checked]').change(); + $('.dmsdocument-actionspanel .expiry input[type="radio"][checked]').change(); //Again we need to duplicate the above function to work when adding documents // $('#Form_EditForm_Embargo input[checked]').change(); // $('#Form_EditForm_Expiry input[checked]').change(); diff --git a/scss/_mixins.scss b/scss/_mixins.scss new file mode 100644 index 0000000..195b8e7 --- /dev/null +++ b/scss/_mixins.scss @@ -0,0 +1,7 @@ +//** Generate a state for an active list item link +// +// @param {string} $color - the colour to use for the border +// @param {string} $size - the size the border should be, e.g. "8px" +@mixin dmsdocument-actions-active($color, $size: "4px") { + border-bottom: #{$size} solid #{$color}; +} diff --git a/scss/_variables.scss b/scss/_variables.scss index 0b9d306..027ba43 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -3,3 +3,8 @@ // Colours $color-button-generic: #e6e6e6 !default; $color-zebra: #F0F4F7 !default; + +$color-grey-lighter: #f8f8f8 !default; +$color-grey-light: #d0d3d5 !default; +$color-grey-dark: #66727d !default; +$color-white: #ffffff !default; diff --git a/scss/DMSDocumentCMSFields.scss b/scss/cmsfields.scss similarity index 63% rename from scss/DMSDocumentCMSFields.scss rename to scss/cmsfields.scss index cca8dd8..cdd52ad 100644 --- a/scss/DMSDocumentCMSFields.scss +++ b/scss/cmsfields.scss @@ -1,18 +1,6 @@ -form.small .field input.text, -form.small .field textarea, -form.small .field select, -form.small .field .TreeDropdownField, -.field.small input.text, -.field.small textarea, -.field.small select, -.field.small .TreeDropdownField { - width: 100%; -} - -#FileP { +//** The DMS document details/information on an edit page +.dmsdocument-documentdetails { .fieldgroup-field { - width: 100%; - .cms-file-info-preview { box-shadow: none; } @@ -20,73 +8,78 @@ form.small .field .TreeDropdownField, .cms-file-info-data { width: 400px; } + .fieldholder-small { margin-top: 5px; - label { - width: auto; - margin-left: 0; - padding-top: 0; - margin-right: 10px; + + .fieldholder-small-label { font-weight: bold; float: left; } - .readonly{ + + .readonly { font-style: italic; - color: #666; } } } } -#Actions { - box-shadow:none; - border:none; - padding:0; - li { - margin-left: 2px; - &:first-child { - margin-left: 0; +//** The actions panel buttons when editing a DMS document +.dmsdocment-actions { + border: none; + box-shadow: none; + margin-bottom: 0; + padding: 0; + + label.left { + padding: 6px 0 0 0; + } + + .ss-ui-button { + border: none; + background: none; + border-radius: 0; + font-weight: normal; + + .ui-button-text { + padding-bottom: 1em; } - &.delete-button-appended { - display: inline-block; - position: relative; - margin-left: 0; + + &.dms-active, + &.dms-active:hover { + @include dmsdocument-actions-active($color-grey-dark); + } + + &:hover, + &:active { + background: none; + border: none; + box-shadow: none; } - // &.dms-active{ - // @include active-actions-btn; - // } } } -.DMSDocumentActionsPanel { +//** The actions panel, containing mini forms for each DMS document action +.dmsdocument-actionspanel { + margin-top: 0; + .fieldgroup { + border: 1px solid $color-grey-light; display: none; - float: none; - width: auto; - background: #f8f8f8; - padding: 15px; - border: 1px solid #d0d3d5; + margin-left: 0; + padding: 5px 15px; .fieldholder-small { label { - float: none; - width: auto; - margin: 0; padding: 0; - - &.ss-ui-button { - float: left; - margin: 0 10px 0 0; - } } } .embargo, .expiry { li { - float: none; - width: 100%; margin-left: 8px; + width: 100%; label { padding-left: 10px; @@ -95,6 +88,7 @@ form.small .field .TreeDropdownField, .embargoDatetime, .expiryDatetime { + float: left; margin-top: 0; margin-left: 34px; overflow: hidden; @@ -103,45 +97,45 @@ form.small .field .TreeDropdownField, &.date, &.time { display: inline-block; - width: auto; margin: 0; padding: 0; + width: auto; + + .middleColumn { + overflow: hidden; + } } &.date { - .middleColumn{ + .middleColumn { background: url('../images/calendar-month.png') 90px 7px no-repeat; - overflow: hidden; } } &.time { .middleColumn { background: url('../images/clock-frame.png') 90px 7px no-repeat; - overflow: hidden; } } } .middleColumn { + border: none; margin-left: 0; width: auto; - border: none; - input { - width: 80px; + input.date, + input.time { margin-right: 40px; + width: 80px; } } } } - } - #Embargo { - border: none; - box-shadow: none; - -moz-box-shadow: none; - -webkit-box-shadow: none; + .fieldgroup-field label { + margin: 0; + } } .ss-uploadfield-files { @@ -157,8 +151,8 @@ form.small .field .TreeDropdownField, .ss-uploadfield-item-actions { .ss-uploadfield-item-cancel { - width: auto; text-indent: 0; + width: auto; .btn-icon-deleteLight { background-position: 0 -128px; @@ -166,50 +160,44 @@ form.small .field .TreeDropdownField, } .ui-button-text { + color: $color-grey-dark; display: block; - position: relative; float: right; - color: #555; - padding:0; - padding-left: 2em; + padding: 0 0 0 2em; + position: relative; } } } } & > .fieldgroup.middleColumn { - overflow: hidden; display: block; + overflow: hidden; .fieldgroup-field { width: 100%; } } -} -#Form_ItemEditForm { - fieldset { - table.ss-gridfield-table { - width: 494px; - - tr { - th.main { - min-width: 175px; - - &.col-action_SetOrderID { - width: 60px; - min-width: 60px; - } - } - - td { - white-space: normal; - } - } + .permissions { + .fieldholder-small { + clear: both; } } } #ui-datepicker-div { - border: 1px solid #DDD; + border: 1px solid $color-grey-light; +} + +//** Overrides for the inline edit screen +form.small .field input.text, +form.small .field textarea, +form.small .field select, +form.small .field .TreeDropdownField, +.field.small input.text, +.field.small textarea, +.field.small select, +.field.small .TreeDropdownField { + width: 100%; } diff --git a/scss/main.scss b/scss/main.scss index e213d5d..b5d9a4e 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -1,3 +1,4 @@ @import "_variables"; -@import "DMSDocumentCMSFields"; -@import "DMSMainCMS"; +@import "_mixins"; +@import "cmsfields"; +@import "upload"; diff --git a/scss/DMSMainCMS.scss b/scss/upload.scss similarity index 69% rename from scss/DMSMainCMS.scss rename to scss/upload.scss index 8a2dc82..84ac952 100644 --- a/scss/DMSMainCMS.scss +++ b/scss/upload.scss @@ -1,58 +1,8 @@ -.ui-autocomplete{ - border: 1px solid #DDD; - box-shadow: 0 1px 2px 0px #AFAFAF; - max-height: 300px; - overflow: scroll; -} - -.cms fieldset.documents, -.cms fieldset.relatedLinks { - table { - td { - white-space: normal; - } - - td.col-buttons { - white-space: nowrap; - - .dms-delete-link-only { - .ui-icon { - background: url(../images/chain-unchain.png) no-repeat; - } - } - } - - tr.dms-document-hidden-row { - &.odd { - background-color: mix($color-zebra, rgba(255, 4, 0, 0.2)); - } - - &.even { - background-color: mix($color-zebra, rgba(255, 4, 0, 0.35)); - } - - &:hover { - background-color: mix($color-zebra, rgba(255, 4, 0, 0.6)) !important; - } - } - } -} - -.DMSDocumentAddController .ui-tabs { - ul.ui-tabs-nav { - border-bottom: none; - float: right; - margin: 8px 0 -1px 0; - padding: 0 24px 0 0; - - li { - padding-bottom: 1px; - border: 1px solid #C0C0C2; - - a { - padding: 8px 20px 8px; - } - } +.dmsdocument-addexisting { + .ui-autocomplete { + border: 1px solid $color-grey-light; + max-height: 300px; + overflow: scroll; } } @@ -70,22 +20,18 @@ -moz-box-sizing: border-box; &[disabled] { - color: #C0C0C2; - text-shadow: 0 -1px 0 #FFF; - background: #EEE; + color: $color-grey-light; + text-shadow: 0 -1px 0 $color-white; + background: $color-grey-lighter; background-image:none; - box-shadow: inset 0 1px 8px 0 #C4C4C4; + box-shadow: inset 0 1px 8px 0 $color-grey-light; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } } - .TreeDropdownField { + .treedropdown { border: none; - width: 100%; - max-width: 512px; - box-sizing: border-box; - cursor:pointer; } .treedropdownfield-toggle-panel-link { @@ -116,13 +62,11 @@ .document-list { width: 510px; - border: 1px solid #DDD; + border: 1px solid $color-grey-light; border-top: none; - background: #ffffff; + background: $color-white; display: none; - box-shadow: 0 2px 4px 1px #DDD; max-height: 300px; - border-radius: 6px; background-clip: padding-box; overflow: scroll; @@ -139,11 +83,11 @@ a { display: block; padding: 4px 8px; - border: 1px solid #FFF; + border: 1px solid $color-white; color: black; &:hover { - border: 1px solid #CCC; + border: 1px solid $color-grey-light; border-radius: 4px; background: rgba(203, 203, 203, 0.4); cursor: pointer; @@ -222,7 +166,7 @@ padding: 4px 0; li { - border: 1px solid #ffffff; + border: 1px solid $color-white; a { display: block; @@ -230,7 +174,7 @@ &.jstree-hovered { background: rgba(203, 203, 203, 0.4); - border: 1px solid #CCC; + border: 1px solid $color-grey-light; } } } @@ -239,32 +183,6 @@ } } - -// Hack for Firefox to fix padding on adding document input. -// FF renders the size different and pushes it out by 2px compared to webkit -@-moz-document url-prefix() .ss-add .document-add-existing input { - padding: 10px 7px; -} - -#Form_EditForm_Documents { - padding: 1em 0; - - input[name="filter[LastChanged]"] { - display: none; - } -} - -#Form_EditForm_RelatedLinks { - table { - padding: 1em 0; - thead { - h2 { - display: none; - } - } - } -} - #Form_ItemEditForm { h3:first-child { display: inline-block; diff --git a/templates/DMSDocumentAddExistingField.ss b/templates/DMSDocumentAddExistingField.ss index fd36fc2..cc995e6 100644 --- a/templates/DMSDocumentAddExistingField.ss +++ b/templates/DMSDocumentAddExistingField.ss @@ -1,4 +1,4 @@ -
    +
    <% if $useFieldContext %>

    <% else %>
    <% end_if %> diff --git a/tests/DMSDocumentTest.php b/tests/DMSDocumentTest.php index 6973d35..53be3d7 100644 --- a/tests/DMSDocumentTest.php +++ b/tests/DMSDocumentTest.php @@ -84,7 +84,7 @@ class DMSDocumentTest extends SapphireTest $this->assertNotContains('test-file-file-doesnt-exist-1', $jsonResult); $this->assertContains('test-file-file-doesnt-exist-2', $jsonResult); - $this->assertEquals(array('Title', 'Filename'), $autocompleter->getSearchFields()); + $this->assertEquals(array('Title:PartialMatch', 'Filename:PartialMatch'), $autocompleter->getSearchFields()); } /** @@ -118,7 +118,7 @@ class DMSDocumentTest extends SapphireTest $result = $document->getActionTaskHtml(); $this->assertContains('', $result); - $this->assertContains('