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
This commit is contained in:
Robbie Averill 2017-05-22 14:06:06 +12:00
parent e8d46a90a5
commit 9b42effeb5
16 changed files with 292 additions and 430 deletions

View File

@ -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:

View File

@ -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
*

View File

@ -37,7 +37,6 @@ class DMSUploadField_ItemHandler extends UploadField_ItemHandler
$validator
);
$form->loadDataFrom($file);
$form->addExtraClass('small');
return $form;
}

View File

@ -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

View File

@ -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 = '<div id="Actions" class="field actions">'
$html = '<div class="field dmsdocment-actions">'
. '<label class="left">' . _t('DMSDocument.ACTIONS_LABEL', 'Actions') . '</label>'
. '<ul>';
foreach ($this->actionTasks as $panelKey => $title) {
$html .= '<li class="ss-ui-button" data-panel="' . $panelKey . '">'
$html .= '<li class="ss-ui-button dmsdocument-action" data-panel="' . $panelKey . '">'
. _t('DMSDocument.ACTION_' . strtoupper($panelKey), $title)
. '</li>';
}

View File

@ -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);

356
dist/css/cmsbundle.css vendored
View File

@ -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;

BIN
images/app_icons/drawer.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 273 B

View File

@ -51,16 +51,16 @@
this.trigger('change');
}
});
$('#Actions ul li').entwine({
$('.dmsdocment-actions ul li').entwine({
onclick: function (e) {
//add active state to the current button
$('#Actions ul li').removeClass('dms-active');
$('.dmsdocment-actions ul li').removeClass('dms-active');
this.addClass('dms-active');
//$('li.dms-active').append('<span class="arrow"></span>');
//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();

7
scss/_mixins.scss Normal file
View File

@ -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};
}

View File

@ -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;

View File

@ -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;
}
&.delete-button-appended {
display: inline-block;
position: relative;
margin-left: 0;
.ss-ui-button {
border: none;
background: none;
border-radius: 0;
font-weight: normal;
.ui-button-text {
padding-bottom: 1em;
}
&.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%;
}

View File

@ -1,3 +1,4 @@
@import "_variables";
@import "DMSDocumentCMSFields";
@import "DMSMainCMS";
@import "_mixins";
@import "cmsfields";
@import "upload";

View File

@ -1,58 +1,8 @@
.ui-autocomplete{
border: 1px solid #DDD;
box-shadow: 0 1px 2px 0px #AFAFAF;
.dmsdocument-addexisting {
.ui-autocomplete {
border: 1px solid $color-grey-light;
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;
}
}
}
}
@ -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;

View File

@ -1,4 +1,4 @@
<div id="document" class="ss-add field treedropdown searchable">
<div class="ss-add field treedropdown searchable dmsdocument-addexisting">
<div class="document-add-existing <% if $useFieldContext %>field<% else %>link-editor-context<% end_if %>">
<% if $useFieldContext %><h3><% else %><div><% end_if %>
<span class="step-label">

View File

@ -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('<label class="left">Actions</label>', $result);
$this->assertContains('<li class="ss-ui-button" data-panel="', $result);
$this->assertContains('<li class="ss-ui-button dmsdocument-action" data-panel="', $result);
$this->assertContains('permission', $result);
$this->assertContains('Example', $result);
}