From 513c29aa992117534fe9d66ed7981cff792d914a Mon Sep 17 00:00:00 2001 From: Robbie Averill Date: Tue, 9 May 2017 15:53:52 +1200 Subject: [PATCH] NEW Replace Compass with Webpack, update docs, remove unused @includes --- .gitignore | 4 +- code/cms/DMSDocumentAddController.php | 2 +- code/model/DMSDocument.php | 4 +- code/model/DMSDocumentSet.php | 2 +- config.rb | 20 - css/DMSDocumentCMSFields.css | 62 --- css/DMSMainCMS.css | 70 --- dist/css/cmsbundle.css | 393 ++++++++++++++++ docs/en/building-frontend-assets.md | 28 ++ docs/en/changelogs/2.0.0.md | 5 + docs/en/index.md | 1 + package.json | 36 ++ scss/DMSDocumentCMSFields.scss | 405 ++++++++--------- scss/DMSMainCMS.scss | 632 +++++++++++++------------- scss/_mixins.scss | 85 ---- scss/_variables.scss | 5 + scss/main.scss | 3 + webpack.config.js | 41 ++ 18 files changed, 1035 insertions(+), 763 deletions(-) delete mode 100644 config.rb delete mode 100644 css/DMSDocumentCMSFields.css delete mode 100644 css/DMSMainCMS.css create mode 100644 dist/css/cmsbundle.css create mode 100644 docs/en/building-frontend-assets.md create mode 100644 package.json delete mode 100644 scss/_mixins.scss create mode 100644 scss/_variables.scss create mode 100644 scss/main.scss create mode 100644 webpack.config.js diff --git a/.gitignore b/.gitignore index 5cd3d29..1ca9571 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,2 @@ -.sass-cache -.DS_Store \ No newline at end of file +node_modules/ +npm-debug.log diff --git a/code/cms/DMSDocumentAddController.php b/code/cms/DMSDocumentAddController.php index 03691ca..1258742 100644 --- a/code/cms/DMSDocumentAddController.php +++ b/code/cms/DMSDocumentAddController.php @@ -78,7 +78,7 @@ class DMSDocumentAddController extends LeftAndMain { Requirements::javascript(FRAMEWORK_DIR . '/javascript/AssetUploadField.js'); Requirements::css(FRAMEWORK_DIR . '/css/AssetUploadField.css'); - Requirements::css(DMS_DIR . '/css/DMSMainCMS.css'); + Requirements::css(DMS_DIR . '/dist/css/cmsbundle.css'); /** @var SiteTree $page */ $page = $this->currentPage(); diff --git a/code/model/DMSDocument.php b/code/model/DMSDocument.php index 1995033..9655137 100644 --- a/code/model/DMSDocument.php +++ b/code/model/DMSDocument.php @@ -884,8 +884,8 @@ class DMSDocument extends DataObject implements DMSDocumentInterface public function getCMSFields() { //include JS to handling showing and hiding of bottom "action" tabs - Requirements::javascript(DMS_DIR.'/javascript/DMSDocumentCMSFields.js'); - Requirements::css(DMS_DIR.'/css/DMSDocumentCMSFields.css'); + Requirements::javascript(DMS_DIR . '/javascript/DMSDocumentCMSFields.js'); + Requirements::css(DMS_DIR . '/dist/css/cmsbundle.css'); $fields = new FieldList(); //don't use the automatic scaffolding, it is slow and unnecessary here diff --git a/code/model/DMSDocumentSet.php b/code/model/DMSDocumentSet.php index 8e88967..77a5d6b 100644 --- a/code/model/DMSDocumentSet.php +++ b/code/model/DMSDocumentSet.php @@ -143,7 +143,7 @@ class DMSDocumentSet extends DataObject // Javascript to customize the grid field for the DMS document (overriding entwine // in FRAMEWORK_DIR.'/javascript/GridField.js' Requirements::javascript(DMS_DIR . '/javascript/DMSGridField.js'); - Requirements::css(DMS_DIR . '/css/DMSMainCMS.css'); + Requirements::css(DMS_DIR . '/dist/css/dmsbundle.css'); // Javascript for the link editor pop-up in TinyMCE Requirements::javascript(DMS_DIR . '/javascript/DocumentHtmlEditorFieldToolbar.js'); diff --git a/config.rb b/config.rb deleted file mode 100644 index 8baebea..0000000 --- a/config.rb +++ /dev/null @@ -1,20 +0,0 @@ -# Require any additional compass plugins here. -require 'compass-colors' - -project_type = :stand_alone -# Set this to the root of your project when deployed: -http_path = "/" -css_dir = "css" -sass_dir = "scss" -images_dir = "images" -javascripts_dir = "javascript" -output_style = :compact - -# To enable relative paths to assets via compass helper functions. Uncomment: -relative_assets = true - -# disable comments in the output. We want admin comments -# to be verbose -line_comments = false - -asset_cache_buster :none \ No newline at end of file diff --git a/css/DMSDocumentCMSFields.css b/css/DMSDocumentCMSFields.css deleted file mode 100644 index e3ced11..0000000 --- a/css/DMSDocumentCMSFields.css +++ /dev/null @@ -1,62 +0,0 @@ -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 .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; } - -#DocumentTypeID .middleColumn { overflow: auto; min-width: 800px; } -#DocumentTypeID .middleColumn ul { padding: 0; } -#DocumentTypeID .middleColumn ul input[type="radio"] { display: none; } -#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: -moz-linear-gradient(#c0c0c0, #e6e6e6); background: -webkit-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; } - -#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; } -#Actions li.dms-active { border-bottom: 1px solid #C0C0C2; background: -moz-linear-gradient(#c0c0c0, #e6e6e6); background: -webkit-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; } - -.DMSDocumentActionsPanel { /*.middleColumn{ - margin-left:184px; - width: 510px; - form.small &{ - margin-left: 120px; - } -} -*/ /*label.fieldholder-small-label{ - display: none; -}*/ } -.DMSDocumentActionsPanel .fieldgroup { display: none; float: none; width: auto; background: #f8f8f8; padding: 15px; border: 1px solid #d0d3d5; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } -.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; } diff --git a/css/DMSMainCMS.css b/css/DMSMainCMS.css deleted file mode 100644 index d17b162..0000000 --- a/css/DMSMainCMS.css +++ /dev/null @@ -1,70 +0,0 @@ -.ui-autocomplete { border: 1px solid #DDD; box-shadow: 0 1px 2px 0px #AFAFAF; 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(241, 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(242, 201, 203, 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(244, 171, 172, 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; width: 390px; padding: 9px 7px; border-bottom-right-radius: 0; border-top-right-radius: 0; outline: none; 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; background-image: none; box-shadow: inset 0 1px 8px 0 #C4C4C4; 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 .treedropdownfield-toggle-panel-link { padding: 5px 9px 9px; background: #fff; border: 1px solid #B3B3B3; float: right; z-index: 99999; position: relative; } -.ss-add .document-add-existing .treedropdownfield-toggle-panel-link.treedropdownfield-open-tree { background: #fff; border: 1px solid #B3B3B3; border-bottom: none; border-bottom-right-radius: 0; } -.ss-add .document-add-existing .treedropdownfield-title { width: auto; } -.ss-add .document-add-existing .treedropdownfield-toggle-panel-link a { display: inline-block; top: 4px; position: relative; } -.ss-add .document-add-existing .document-list { width: 510px; border: 1px solid #DDD; 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 { padding: 10px 10px 0; } -.ss-add .document-add-existing .document-list ul { padding: 4px 0; } -.ss-add .document-add-existing .document-list ul li { line-height: 18px; } -.ss-add .document-add-existing .document-list ul li a { display: block; padding: 4px 8px; border: 1px solid #FFF; color: black; } -.ss-add .document-add-existing .document-list ul li a:hover { border: 1px solid #CCC; border-radius: 4px; background: rgba(203, 203, 203, 0.4); cursor: pointer; text-decoration: none; outline: none; text-shadow: none; } -.ss-add .document-add-existing.link-editor-context label { float: left; display: block; width: 176px; padding: 8px 8px 8px 0; line-height: 16px; font-weight: bold; text-shadow: 1px 1px 0 white; } -.ss-add .document-add-existing.link-editor-context .middleColumn { margin-left: 184px; } -.ss-add .document-add-existing.link-editor-context .middleColumn input { background: white; border: 1px solid #B3B3B3; line-height: 16px; margin: 0; border-radius: 4px; background-size: 100%; max-width: 512px; } -.ss-add .ss-assetuploadfield.link-editor-context label { float: left; display: block; width: 176px; padding: 8px 8px 8px 0; line-height: 16px; font-weight: bold; text-shadow: 1px 1px 0 white; } -.ss-add .ss-assetuploadfield.link-editor-context .middleColumn { margin-left: 184px; display: block; padding: 8px 8px 8px 0; font-style: italic; min-height: 20px; } -.ss-add .ss-assetuploadfield .step4 { margin-bottom: 10px; } - -.cms .ss-add .treedropdownfield-panel, .cms .selectiongroup .treedropdownfield-panel { margin: -1px 0 0 0; box-sizing: border-box; } -.cms .ss-add .treedropdownfield-panel ul, .cms .selectiongroup .treedropdownfield-panel ul { padding: 4px 0; } -.cms .ss-add .treedropdownfield-panel ul li, .cms .selectiongroup .treedropdownfield-panel ul li { border: 1px solid #ffffff; } -.cms .ss-add .treedropdownfield-panel ul li a, .cms .selectiongroup .treedropdownfield-panel ul li a { display: block; padding: 4px 2px; } -.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; } - -#SectionID .middleColumn, #DocumentTypeID .middleColumn { overflow: auto; min-width: 800px; } -#SectionID .middleColumn ul, #DocumentTypeID .middleColumn ul { padding: 0; } -#SectionID .middleColumn ul input[type="radio"], #DocumentTypeID .middleColumn ul input[type="radio"] { display: none; } -#SectionID .middleColumn ul li, #DocumentTypeID .middleColumn ul li { display: table; padding: 0; width: 125px; height: 40px; white-space: normal; margin-right: -1px; border-radius: 0; } -#SectionID .middleColumn ul li:first-child, #DocumentTypeID .middleColumn ul li:first-child { border-radius: 6px 0 0 6px; border-left: 1px solid #C0C0C2; } -#SectionID .middleColumn ul li:last-child, #DocumentTypeID .middleColumn ul li:last-child { border-radius: 0 6px 6px 0; } -#SectionID .middleColumn ul li.selected, .ie8 #SectionID .middleColumn ul li.selected, #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; } -#SectionID .middleColumn ul li.selected :after, .ie8 #SectionID .middleColumn ul li.selected :after, #DocumentTypeID .middleColumn ul li.selected :after, .ie8 #DocumentTypeID .middleColumn ul li.selected :after { box-shadow: 0 1px 1px 0 #DDD; } -#SectionID .middleColumn ul li label, #DocumentTypeID .middleColumn ul li label { display: table-cell; vertical-align: middle; text-align: center; padding: 0 10px; } - -#Form_ItemEditForm h3:first-child { display: inline-block; float: left; width: 184px; } -#Form_ItemEditForm ul.SelectionGroup { display: inline-block; position: relative; padding: 0; margin-top: 9px; margin-left: 0; height: 110px; background: none; border: none; } -#Form_ItemEditForm ul.SelectionGroup li { width: auto; clear: none; display: inline; margin-right: 4px; } -#Form_ItemEditForm ul.SelectionGroup li input.selector { display: none; } -#Form_ItemEditForm ul.SelectionGroup li label.ui-button { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: -webkit-linear-gradient(#ffffff, #d9d9d9); background: -moz-linear-gradient(#ffffff, #d9d9d9); background: -o-linear-gradient(#ffffff, #d9d9d9); background: linear-gradient(#ffffff, #d9d9d9); font-weight: bold; border: 1px solid #C0C0C2; border-radius: 3px; padding: 0.8em 1.5em; } -#Form_ItemEditForm ul.SelectionGroup li label.ui-button:hover { box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); } -#Form_ItemEditForm ul.SelectionGroup li div.field { margin-left: 0px; margin-bottom: 1em; width: 600px; position: absolute; left: 0; margin-top: 13px; padding: 10px; background: white; border: 1px solid #B3B3B3; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(10%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #efefef)); background-image: -webkit-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -moz-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -o-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); } -#Form_ItemEditForm ul.SelectionGroup li.selected label.ui-button { 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; } -#Form_ItemEditForm ul.SelectionGroup li.selected label.ui-button: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; } -#Form_ItemEditForm ul.SelectionGroup li.selected label.ui-button:after { top: 43px; } -#Form_ItemEditForm ul.SelectionGroup .treedropdownfield-panel { margin: 1px 0 0 -1px; box-sizing: content-box; } -#Form_ItemEditForm ul.SelectionGroup .treedropdownfield-panel ul li { display: block; clear: both; width: 100%; margin: 0; } -#Form_ItemEditForm ul.SelectionGroup .treedropdownfield-panel ul li li { padding-left: 20px; } diff --git a/dist/css/cmsbundle.css b/dist/css/cmsbundle.css new file mode 100644 index 0000000..bbba63a --- /dev/null +++ b/dist/css/cmsbundle.css @@ -0,0 +1,393 @@ +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 .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; + 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; + width: 390px; + padding: 9px 7px; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + outline: none; + 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; + background-image: none; + box-shadow: inset 0 1px 8px 0 #C4C4C4; + 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 .treedropdownfield-toggle-panel-link { + padding: 5px 9px 9px; + background: #fff; + border: 1px solid #B3B3B3; + float: right; + z-index: 99999; + position: relative; } + .ss-add .document-add-existing .treedropdownfield-toggle-panel-link.treedropdownfield-open-tree { + background: #fff; + border: 1px solid #B3B3B3; + border-bottom: none; + border-bottom-right-radius: 0; } + +.ss-add .document-add-existing .treedropdownfield-title { + width: auto; } + +.ss-add .document-add-existing .treedropdownfield-toggle-panel-link a { + display: inline-block; + top: 4px; + position: relative; } + +.ss-add .document-add-existing .document-list { + width: 510px; + border: 1px solid #DDD; + 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 { + padding: 10px 10px 0; } + .ss-add .document-add-existing .document-list ul { + padding: 4px 0; } + .ss-add .document-add-existing .document-list ul li { + line-height: 18px; } + .ss-add .document-add-existing .document-list ul li a { + display: block; + padding: 4px 8px; + border: 1px solid #FFF; + color: black; } + .ss-add .document-add-existing .document-list ul li a:hover { + border: 1px solid #CCC; + border-radius: 4px; + background: rgba(203, 203, 203, 0.4); + cursor: pointer; + text-decoration: none; + outline: none; + text-shadow: none; } + +.ss-add .document-add-existing.link-editor-context label { + float: left; + display: block; + width: 176px; + padding: 8px 8px 8px 0; + line-height: 16px; + font-weight: bold; + text-shadow: 1px 1px 0 white; } + +.ss-add .document-add-existing.link-editor-context .middleColumn { + margin-left: 184px; } + .ss-add .document-add-existing.link-editor-context .middleColumn input { + background: white; + border: 1px solid #B3B3B3; + line-height: 16px; + margin: 0; + border-radius: 4px; + background-size: 100%; + max-width: 512px; } + +.ss-add .ss-assetuploadfield.link-editor-context label { + float: left; + display: block; + width: 176px; + padding: 8px 8px 8px 0; + line-height: 16px; + font-weight: bold; + text-shadow: 1px 1px 0 white; } + +.ss-add .ss-assetuploadfield.link-editor-context .middleColumn { + margin-left: 184px; + display: block; + padding: 8px 8px 8px 0; + font-style: italic; + min-height: 20px; } + +.ss-add .ss-assetuploadfield .step4 { + margin-bottom: 10px; } + +.cms .ss-add .treedropdownfield-panel, +.cms .selectiongroup .treedropdownfield-panel { + margin: -1px 0 0 0; + box-sizing: border-box; } + .cms .ss-add .treedropdownfield-panel ul, + .cms .selectiongroup .treedropdownfield-panel ul { + padding: 4px 0; } + .cms .ss-add .treedropdownfield-panel ul li, + .cms .selectiongroup .treedropdownfield-panel ul li { + border: 1px solid #ffffff; } + .cms .ss-add .treedropdownfield-panel ul li a, + .cms .selectiongroup .treedropdownfield-panel ul li a { + display: block; + padding: 4px 2px; } + .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; } + +#Form_ItemEditForm h3:first-child { + display: inline-block; + float: left; + width: 184px; } + +#Form_ItemEditForm ul.SelectionGroup { + display: inline-block; + position: relative; + padding: 0; + margin-top: 9px; + margin-left: 0; + height: 110px; + background: none; + border: none; } + #Form_ItemEditForm ul.SelectionGroup li { + width: auto; + clear: none; + display: inline; + margin-right: 4px; } + #Form_ItemEditForm ul.SelectionGroup li input.selector { + display: none; } + #Form_ItemEditForm ul.SelectionGroup li label.ui-button { + font-weight: bold; + border: 1px solid #C0C0C2; + border-radius: 3px; + padding: 0.8em 1.5em; } + #Form_ItemEditForm ul.SelectionGroup li label.ui-button:hover { + box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); } + #Form_ItemEditForm ul.SelectionGroup li div.field { + margin-left: 0px; + margin-bottom: 1em; + width: 600px; + position: absolute; + left: 0; + margin-top: 13px; + padding: 10px; + background: white; + border: 1px solid #B3B3B3; } + #Form_ItemEditForm ul.SelectionGroup li.selected label.ui-button:after { + top: 43px; } + #Form_ItemEditForm ul.SelectionGroup .treedropdownfield-panel { + margin: 1px 0 0 -1px; + box-sizing: content-box; } + #Form_ItemEditForm ul.SelectionGroup .treedropdownfield-panel ul li { + display: block; + clear: both; + width: 100%; + margin: 0; } + #Form_ItemEditForm ul.SelectionGroup .treedropdownfield-panel ul li li { + padding-left: 20px; } diff --git a/docs/en/building-frontend-assets.md b/docs/en/building-frontend-assets.md new file mode 100644 index 0000000..3ced9f3 --- /dev/null +++ b/docs/en/building-frontend-assets.md @@ -0,0 +1,28 @@ +# Building frontend assets + +This guide is intended for instructions on dealing with frontend asset files while contributing to this module. You +could also extend the Javascript and/or SCSS files using a combination of your own Webpack configurations and +`Requirements::block` calls (to block the default DMS assets), but this is not the primary intent of this document. + +## Javascript + +Javascript files use jQuery entwine, and live in the `javascript` folder. You can edit these files directly. + +## SASS/CSS + +CSS is build using Webpack and the sass-loader plugin. To install the required dependencies, you will need NodeJS and +npm installed on your local machine. You can then install by running `npm install` from the `dms` module folder. + +To make changes to CSS you need to first make the change in the relevant SCSS file in the `scss` folder. + +You can then compile the SCSS into CSS files: + +``` +npm run build +# or, to watch: +npm run watch +``` + +This will compile the SCSS files and produce a single compiled file under `dist/css/cmsbundle.css`. This file is named +this way to distinguish the fact that its contents are all related to the CMS rather than the frontend of a SilverStripe +website. diff --git a/docs/en/changelogs/2.0.0.md b/docs/en/changelogs/2.0.0.md index b983468..9077fd2 100644 --- a/docs/en/changelogs/2.0.0.md +++ b/docs/en/changelogs/2.0.0.md @@ -28,3 +28,8 @@ having a Document Set intermediary (@todo Add a build task for this). The default template entry point is now `DocumentSets.ss` (previously `Documents.ss`). As well as this change, `Documents.ss` has been renamed to `DocumentSet.ss`. + +## Frontend assets + +We've removed the configuration for using Compass to build SCSS. You can now use Webpack instead. +[See here](building-frontend-assets.md) for more information on this. diff --git a/docs/en/index.md b/docs/en/index.md index 3f4e4ae..0d791bc 100644 --- a/docs/en/index.md +++ b/docs/en/index.md @@ -10,6 +10,7 @@ * [Manage page relations](manage-page-relations.md) * [Manage tags](manage-tags.md) * [Manage related documents](manage-related-documents.md) +* [Building frontend assets](building-frontend-assets.md) ## CMS user help diff --git a/package.json b/package.json new file mode 100644 index 0000000..fe1d053 --- /dev/null +++ b/package.json @@ -0,0 +1,36 @@ +{ + "name": "silverstripe-dms", + "version": "2.0.0", + "description": "SilverStripe Document Management System", + "directories": { + "doc": "docs", + "test": "tests" + }, + "devDependencies": { + "css-loader": "^0.28.1", + "extract-text-webpack-plugin": "^2.1.0", + "file-loader": "^0.11.1", + "node-sass": "^4.5.2", + "sass-loader": "^6.0.3", + "style-loader": "^0.17.0", + "webpack": "^2.5.1" + }, + "scripts": { + "build": "webpack --bail --progress", + "watch": "webpack --watch --progress" + }, + "repository": { + "type": "git", + "url": "git://github.com/silverstripe/silverstripe-dms.git" + }, + "keywords": [ + "silverstripe", + "dms" + ], + "author": "SilverStripe Ltd", + "license": "BSD-3-Clause", + "bugs": { + "url": "https://github.com/silverstripe/silverstripe-dms/issues" + }, + "homepage": "https://github.com/silverstripe/silverstripe-dms#readme" +} diff --git a/scss/DMSDocumentCMSFields.scss b/scss/DMSDocumentCMSFields.scss index 33d30c1..cca8dd8 100644 --- a/scss/DMSDocumentCMSFields.scss +++ b/scss/DMSDocumentCMSFields.scss @@ -1,218 +1,215 @@ -@import "compass/css3"; - -@import '_mixins'; - -$color-button-generic: #e6e6e6 !default; - -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%; +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{ - .fieldgroup-field{ - width:100%; - .cms-file-info-preview{ - box-shadow:none; - } - .cms-file-info-data{ - width:400px; - } - .fieldholder-small{ - margin-top: 5px; - label{ - width:auto; - margin-left: 0; - padding-top: 0; - margin-right: 10px; - font-weight: bold; - float: left; - } - .readonly{ - font-style:italic; - color: #666; - } - } - } +#FileP { + .fieldgroup-field { + width: 100%; + + .cms-file-info-preview { + box-shadow: none; + } + + .cms-file-info-data { + width: 400px; + } + .fieldholder-small { + margin-top: 5px; + label { + width: auto; + margin-left: 0; + padding-top: 0; + margin-right: 10px; + font-weight: bold; + float: left; + } + .readonly{ + font-style: italic; + color: #666; + } + } + } } -#DocumentTypeID{ - @include tabButtons; +#Actions { + box-shadow:none; + border:none; + padding:0; + li { + margin-left: 2px; + &:first-child { + margin-left: 0; + } + &.delete-button-appended { + display: inline-block; + position: relative; + margin-left: 0; + } + // &.dms-active{ + // @include active-actions-btn; + // } + } } -#Actions{ - box-shadow:none; - border:none; - padding:0; - li{ - margin-left: 2px; - &:first-child{ - margin-left: 0; - } - &.delete-button-appended{ - display: inline-block; - position: relative; - margin-left: 0; - } - &.dms-active{ - @include active-actions-btn; - } - } +.DMSDocumentActionsPanel { + .fieldgroup { + display: none; + float: none; + width: auto; + background: #f8f8f8; + padding: 15px; + border: 1px solid #d0d3d5; + + .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; + + label { + padding-left: 10px; + } + } + + .embargoDatetime, + .expiryDatetime { + margin-top: 0; + margin-left: 34px; + overflow: hidden; + + .field { + &.date, + &.time { + display: inline-block; + width: auto; + margin: 0; + padding: 0; + } + + &.date { + .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 { + margin-left: 0; + width: auto; + border: none; + + input { + width: 80px; + margin-right: 40px; + } + } + } + } + } + + #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; + } + + .ss-uploadfield-item-name { + span.name { + width: 260px; + } + } + + .ss-uploadfield-item-actions { + .ss-uploadfield-item-cancel { + width: auto; + text-indent: 0; + + .btn-icon-deleteLight { + background-position: 0 -128px; + display: inline-block; + } + + .ui-button-text { + display: block; + position: relative; + float: right; + color: #555; + padding:0; + padding-left: 2em; + } + } + } + } + + & > .fieldgroup.middleColumn { + overflow: hidden; + display: block; + + .fieldgroup-field { + width: 100%; + } + } } -.DMSDocumentActionsPanel{ +#Form_ItemEditForm { + fieldset { + table.ss-gridfield-table { + width: 494px; - /*.middleColumn{ - margin-left:184px; - width: 510px; - form.small &{ - margin-left: 120px; - } - } - */ + tr { + th.main { + min-width: 175px; - /*label.fieldholder-small-label{ - display: none; - }*/ + &.col-action_SetOrderID { + width: 60px; + min-width: 60px; + } + } - - .fieldgroup { - display: none; - float:none; - width:auto; - background: #f8f8f8; - padding: 15px; - border: 1px solid #d0d3d5; - @include border-radius(5px); - - .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; - label{ - padding-left: 10px; - } - } - .embargoDatetime, .expiryDatetime{ - margin-top: 0; - margin-left: 34px; - overflow: hidden; - .field{ - &.date, &.time{ - display: inline-block; - width: auto; - margin: 0; - padding: 0; - } - &.date{ - .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{ - margin-left: 0; - width: auto; - border: none; - input{ - width: 80px; - margin-right: 40px; - } - } - } - } - } - - #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; - } - .ss-uploadfield-item-name{ - span.name{ - width: 260px; - } - } - .ss-uploadfield-item-actions{ - .ss-uploadfield-item-cancel{ - width: auto; - text-indent:0; - .btn-icon-deleteLight{ - background-position: 0 -128px; - display: inline-block; - } - .ui-button-text{ - display: block; - position: relative; - float: right; - color: #555; - padding:0; - padding-left: 2em; - } - } - } - } - - & > .fieldgroup.middleColumn { - overflow: hidden; - display: block; - .fieldgroup-field { - width: 100%; - } - } + td { + white-space: normal; + } + } + } + } } -#Form_ItemEditForm{ - fieldset{ - table.ss-gridfield-table{ - width: 494px; - //max-width:508px; - tr{ - th.main{ - min-width:175px; - &.col-action_SetOrderID{ - width:60px; - min-width:60px; - } - } - td{ - white-space:normal; - } - } - } - } +#ui-datepicker-div { + border: 1px solid #DDD; } - -#ui-datepicker-div{ - border: 1px solid #DDD; -} \ No newline at end of file diff --git a/scss/DMSMainCMS.scss b/scss/DMSMainCMS.scss index 8d084ca..8a2dc82 100644 --- a/scss/DMSMainCMS.scss +++ b/scss/DMSMainCMS.scss @@ -1,349 +1,349 @@ -@import '_mixins'; - -//data-icon="cross-circle" -$gf_colour_zebra: #F0F4F7; - .ui-autocomplete{ - border: 1px solid #DDD; - box-shadow: 0 1px 2px 0px #AFAFAF; - max-height: 300px; - overflow: scroll; + 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($gf_colour_zebra, rgba(255, 4, 0, 0.2)); - } - &.even { - background-color: mix($gf_colour_zebra, rgba(255, 4, 0, 0.35)); - } - &:hover { - background-color: mix($gf_colour_zebra, rgba(255, 4, 0, 0.6)) !important; - } - } - } +.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; -.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; - } - } - } + li { + padding-bottom: 1px; + border: 1px solid #C0C0C2; + + a { + padding: 8px 20px 8px; + } + } + } } .ss-add { - .document-add-existing { - input.document-autocomplete { - position: absolute; - z-index: 9999; - //top: 70px; - width: 390px; - padding: 9px 7px; - border-bottom-right-radius:0; - border-top-right-radius:0; - outline:none; - box-sizing:border-box; - -moz-box-sizing: border-box; - - &[disabled] { - color: #C0C0C2; - text-shadow: 0 -1px 0 #FFF; - background: #EEE; - background-image:none; - box-shadow: inset 0 1px 8px 0 #C4C4C4; - border-bottom-left-radius:0; - border-bottom-right-radius:0; - } - } - .TreeDropdownField { - border:none; - width: 100%; - max-width: 512px; - box-sizing: border-box; - cursor:pointer; - } + .document-add-existing { + input.document-autocomplete { + position: absolute; + z-index: 9999; + width: 390px; + padding: 9px 7px; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + outline: none; + box-sizing: border-box; + -moz-box-sizing: border-box; - .treedropdownfield-toggle-panel-link { - padding: 5px 9px 9px; - background: #fff; - border: 1px solid #B3B3B3; - float: right; - z-index: 99999; - position: relative; + &[disabled] { + color: #C0C0C2; + text-shadow: 0 -1px 0 #FFF; + background: #EEE; + background-image:none; + box-shadow: inset 0 1px 8px 0 #C4C4C4; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + } - &.treedropdownfield-open-tree { - background: #fff; - border: 1px solid #B3B3B3; - border-bottom:none; - border-bottom-right-radius:0; - } - } - .treedropdownfield-title { - width: auto; - } + .TreeDropdownField { + border: none; + width: 100%; + max-width: 512px; + box-sizing: border-box; + cursor:pointer; + } - .treedropdownfield-toggle-panel-link a { - display: inline-block; - top: 4px; - position: relative; - } + .treedropdownfield-toggle-panel-link { + padding: 5px 9px 9px; + background: #fff; + border: 1px solid #B3B3B3; + float: right; + z-index: 99999; + position: relative; - .document-list { - width: 510px; - border: 1px solid #DDD; - 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; + &.treedropdownfield-open-tree { + background: #fff; + border: 1px solid #B3B3B3; + border-bottom:none; + border-bottom-right-radius:0; + } + } - p { - padding: 10px 10px 0; - } + .treedropdownfield-title { + width: auto; + } - ul { - padding: 4px 0; + .treedropdownfield-toggle-panel-link a { + display: inline-block; + top: 4px; + position: relative; + } - li { - line-height:18px; + .document-list { + width: 510px; + border: 1px solid #DDD; + 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; - a { - display: block; - padding: 4px 8px; - border: 1px solid #FFF; - color: black; + p { + padding: 10px 10px 0; + } - &:hover { - border: 1px solid #CCC; - border-radius: 4px; - background: rgba(203, 203, 203, 0.4); - cursor: pointer; - text-decoration:none; - outline:none; - text-shadow:none; - } - } - } - } - } - &.link-editor-context{ - label{ - float: left; - display: block; - width: 176px; - padding:8px 8px 8px 0; - line-height: 16px; - font-weight: bold; - text-shadow: 1px 1px 0 white; - } - .middleColumn{ - margin-left: 184px; - input{ - background:white; - border: 1px solid #B3B3B3; - line-height: 16px; - margin: 0; - border-radius: 4px; - background-size: 100%; - max-width: 512px; - } - } - } - } - .ss-assetuploadfield{ - &.link-editor-context{ - label{ - float: left; - display: block; - width: 176px; - padding:8px 8px 8px 0; - line-height: 16px; - font-weight: bold; - text-shadow: 1px 1px 0 white; - } - .middleColumn{ - margin-left: 184px; - display: block; - padding: 8px 8px 8px 0; - font-style: italic; - min-height:20px; - } - } - .step4{ - margin-bottom: 10px; - } - } + ul { + padding: 4px 0; + + li { + line-height: 18px; + + a { + display: block; + padding: 4px 8px; + border: 1px solid #FFF; + color: black; + + &:hover { + border: 1px solid #CCC; + border-radius: 4px; + background: rgba(203, 203, 203, 0.4); + cursor: pointer; + text-decoration: none; + outline: none; + text-shadow: none; + } + } + } + } + } + + &.link-editor-context { + label { + float: left; + display: block; + width: 176px; + padding: 8px 8px 8px 0; + line-height: 16px; + font-weight: bold; + text-shadow: 1px 1px 0 white; + } + + .middleColumn { + margin-left: 184px; + + input { + background: white; + border: 1px solid #B3B3B3; + line-height: 16px; + margin: 0; + border-radius: 4px; + background-size: 100%; + max-width: 512px; + } + } + } + } + + .ss-assetuploadfield { + &.link-editor-context { + label { + float: left; + display: block; + width: 176px; + padding: 8px 8px 8px 0; + line-height: 16px; + font-weight: bold; + text-shadow: 1px 1px 0 white; + } + + .middleColumn { + margin-left: 184px; + display: block; + padding: 8px 8px 8px 0; + font-style: italic; + min-height: 20px; + } + } + + .step4 { + margin-bottom: 10px; + } + } } -//Styling for tree dropdown field -.cms{ - .ss-add, .selectiongroup{ - .treedropdownfield-panel { - margin: -1px 0 0 0; - box-sizing: border-box; +// Styling for tree dropdown field +.cms { + .ss-add, + .selectiongroup { + .treedropdownfield-panel { + margin: -1px 0 0 0; + box-sizing: border-box; - ul { - padding: 4px 0; - li { - border: 1px solid #ffffff; - a { - display: block; - padding: 4px 2px; + ul { + padding: 4px 0; - &.jstree-hovered { - background: rgba(203, 203, 203, 0.4); - border: 1px solid #CCC; - } - } - } - } - } - } + li { + border: 1px solid #ffffff; + + a { + display: block; + padding: 4px 2px; + + &.jstree-hovered { + background: rgba(203, 203, 203, 0.4); + border: 1px solid #CCC; + } + } + } + } + } + } } -// Hack for Firefox to fix padding on adding document input. +// 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; - } - } - } +@-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_Documents { + padding: 1em 0; + + input[name="filter[LastChanged]"] { + display: none; + } } -#Form_EditForm_RelatedLinks{ - table{ - padding: 1em 0; - thead{ - h2{ - display: none; - } - } - } +#Form_EditForm_RelatedLinks { + table { + padding: 1em 0; + thead { + h2 { + display: none; + } + } + } } -#SectionID, #DocumentTypeID{ - @include tabButtons; +#Form_ItemEditForm { + h3:first-child { + display: inline-block; + float: left; + width: 184px; + } + + ul.SelectionGroup { + display: inline-block; + position: relative; + padding: 0; + margin-top: 9px; + margin-left: 0; + height: 110px; + background: none; + border: none; + + li { + width: auto; + clear: none; + display: inline; + margin-right: 4px; + + input { + &.selector { + display: none; + } + } + + label { + &.ui-button { + font-weight: bold; + border: 1px solid #C0C0C2; + border-radius: 3px; + padding: 0.8em 1.5em; + + &:hover { + box-shadow: 0 0 5px rgba(0,0,0,0.3); + } + } + } + + div.field { + margin-left: 0px; + margin-bottom: 1em; + width: 600px; + position: absolute; + left: 0; + margin-top: 13px; + padding: 10px; + background: white; + border: 1px solid #B3B3B3; + } + + &.selected { + label.ui-button { + &:after { + top: 43px; + } + } + } + } + + .treedropdownfield-panel { + margin: 1px 0 0 -1px; + box-sizing: content-box; + + ul { + li { + display: block; + clear: both; + width: 100%; + margin: 0; + + li { + padding-left: 20px; + } + } + } + } + } } - -#Form_ItemEditForm{ - h3:first-child{ - display: inline-block; - float: left; - width: 184px; - } - ul.SelectionGroup{ - display: inline-block; - position: relative; - padding: 0; - margin-top: 9px; - margin-left: 0; - height: 110px; - background: none; - border: none; - li{ - width: auto; - clear: none; - display: inline; - margin-right: 4px; - input{ - &.selector{ - display:none; - } - } - label{ - &.ui-button{ - @include background( - linear-gradient(color-stops( - lighten($color-button-generic, 10%), - darken($color-button-generic, 5%) - )) - ); - font-weight: bold; - border: 1px solid #C0C0C2; - border-radius: 3px; - padding: 0.8em 1.5em; - - - &:hover { - box-shadow: 0 0 5px rgba(0,0,0,0.3); - } - } - } - div.field{ - margin-left: 0px; - margin-bottom: 1em; - width: 600px; - position: absolute; - left:0; - margin-top: 13px; - padding: 10px; - background: white; - border: 1px solid #B3B3B3; - @include border-radius(4px); - @include background-image(linear-gradient(#efefef, #fff 10%, #fff 90%, #efefef)); - } - &.selected{ - label.ui-button{ - @include active-actions-btn; - - &:after { - top: 43px; - } - } - } - } - .treedropdownfield-panel{ - margin: 1px 0 0 -1px; - box-sizing: content-box; - ul{ - li{ - display: block; - clear: both; - width: 100%; - margin: 0; - - li { - padding-left: 20px; - } - } - } - } - } -} \ No newline at end of file diff --git a/scss/_mixins.scss b/scss/_mixins.scss deleted file mode 100644 index 3c7f5ce..0000000 --- a/scss/_mixins.scss +++ /dev/null @@ -1,85 +0,0 @@ -@import "compass/css3"; -$color-button-generic: #e6e6e6 !default; - - -@mixin tabButtons{ - .middleColumn{ - overflow:auto; - min-width: 800px; - ul{ - padding:0; - input[type="radio"]{ - display:none; - } - li{ - display:table; - padding: 0; - width:125px; - height:40px; - white-space:normal; - margin-right: -1px; - border-radius: 0; - &:first-child{ - border-radius: 6px 0 0 6px; - border-left: 1px solid #C0C0C2; - } - &:last-child{ - border-radius: 0 6px 6px 0; - } - &.selected, .ie8 &.selected{ - border-bottom:1px solid #C0C0C2; - @include background( - linear-gradient(color-stops( - darken($color-button-generic, 15%), - $color-button-generic - )) - ); - background-color: darken($color-button-generic, 15%); - 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; - :after{ - box-shadow: 0 1px 1px 0 #DDD; - } - } - label{ - display: table-cell; - vertical-align: middle; - text-align: center; - padding: 0 10px; - } - } - } - } -} - -@mixin active-actions-btn{ - border-bottom:1px solid #C0C0C2; - @include background( - linear-gradient(color-stops( - darken($color-button-generic, 15%), - $color-button-generic - )) - ); - background-color: darken($color-button-generic, 15%); - 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; - &: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; - } -} \ No newline at end of file diff --git a/scss/_variables.scss b/scss/_variables.scss new file mode 100644 index 0000000..0b9d306 --- /dev/null +++ b/scss/_variables.scss @@ -0,0 +1,5 @@ +//** Default values for colours, sizes etc + +// Colours +$color-button-generic: #e6e6e6 !default; +$color-zebra: #F0F4F7 !default; diff --git a/scss/main.scss b/scss/main.scss new file mode 100644 index 0000000..e213d5d --- /dev/null +++ b/scss/main.scss @@ -0,0 +1,3 @@ +@import "_variables"; +@import "DMSDocumentCMSFields"; +@import "DMSMainCMS"; diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..0096f55 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,41 @@ +const ExtractTextPlugin = require("extract-text-webpack-plugin"); +const path = require('path'); + +const extractSass = new ExtractTextPlugin({ + filename: '[name].css', + allChunks: true +}); + +module.exports = [ + { + name: 'css', + entry: { + cmsbundle: './scss/main.scss', + }, + output: { + path: path.resolve(__dirname, 'dist/css'), + filename: '[name].css', + }, + module: { + rules: [{ + test: /\.scss$/, + use: extractSass.extract({ + use: [{ + loader: 'css-loader?discardComments' + }, { + loader: 'sass-loader' + }], + fallback: 'style-loader' + }) + }, { + test: /\.(jpg|gif|png|svg)$/, + use: [{ + loader: 'file-loader?emitFile=false&name=../../[path][name].[ext]' + }] + }] + }, + plugins: [ + extractSass + ] + } +];