From b483a105662eb411baa3a50c264b80e84f5bb70c Mon Sep 17 00:00:00 2001 From: scott1702 Date: Wed, 12 Aug 2015 12:50:14 +1200 Subject: [PATCH] Cms styling for fieldgroups --- .gitignore | 1 + code/model/UserDefinedForm.php | 2 ++ config.rb | 12 ++++++++ css/UserForm.css | 55 +++++++++++++++++----------------- css/UserForm_cms.css | 46 +++++++++++++++------------- javascript/Gridfield.js | 23 ++++++++++++++ scss/UserForm.scss | 47 +++++++++++++++++++++++++++++ scss/UserForm_cms.scss | 50 +++++++++++++++++++++++++++++++ 8 files changed, 187 insertions(+), 49 deletions(-) create mode 100644 config.rb create mode 100644 javascript/Gridfield.js create mode 100644 scss/UserForm.scss create mode 100644 scss/UserForm_cms.scss diff --git a/.gitignore b/.gitignore index e43b0f9..92b0407 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ .DS_Store +.sass-cache/ diff --git a/code/model/UserDefinedForm.php b/code/model/UserDefinedForm.php index 69e0feb..9f0cccf 100755 --- a/code/model/UserDefinedForm.php +++ b/code/model/UserDefinedForm.php @@ -177,6 +177,8 @@ SQL; $config->addComponent(new GridFieldDetailForm()); $config->addComponent($export = new GridFieldExportButton()); $config->addComponent($print = new GridFieldPrintButton()); + + Requirements::javascript(USERFORMS_DIR . '/javascript/Gridfield.js'); /** * Support for {@link https://github.com/colymba/GridFieldBulkEditingTools} diff --git a/config.rb b/config.rb new file mode 100644 index 0000000..ad60521 --- /dev/null +++ b/config.rb @@ -0,0 +1,12 @@ +require 'compass/import-once/activate' +# Require any additional compass plugins here. + +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "css" +sass_dir = "scss" +images_dir = "images" +javascripts_dir = "javascript" + +line_comments = false + diff --git a/css/UserForm.css b/css/UserForm.css index cf667cf..612f290 100644 --- a/css/UserForm.css +++ b/css/UserForm.css @@ -1,38 +1,37 @@ /** * Lightweight base styles for the front-end form. */ -.userform-progress .step-buttons, -.step-navigation .step-buttons { - margin-left: 0; -} - -.userform-progress .step-buttons { - position: relative; -} - -.userform-progress .step-button-jump { - position: absolute; - top: 0; -} - -.userform-progress .step-buttons .step-button-wrapper, -.step-navigation .step-buttons .step-button-wrapper { - display: inline-block; - list-style-type: none; -} - .userform-progress .progress { - position: relative; - height: 1em; - background: #eee; + position: relative; + height: 1em; + background: #eee; +} +.userform-progress .progress .progress-bar { + position: absolute; + height: 1em; + background: #666; +} +.userform-progress .step-buttons { + margin-left: 0; + position: relative; +} +.userform-progress .step-buttons .step-button-wrapper { + display: inline-block; + list-style-type: none; +} +.userform-progress .step-button-jump { + position: absolute; + top: 0; } -.userform-progress .progress .progress-bar { - position: absolute; - height: 1em; - background: #666; +.step-navigation .step-buttons { + margin-left: 0; +} +.step-navigation .step-buttons .step-button-wrapper { + display: inline-block; + list-style-type: none; } .userform { - clear: both; + clear: both; } diff --git a/css/UserForm_cms.css b/css/UserForm_cms.css index 7953279..0280219 100644 --- a/css/UserForm_cms.css +++ b/css/UserForm_cms.css @@ -1,24 +1,28 @@ - -.cms .ss-gridfield > div.ss-gridfield-buttonrow-before { - margin-bottom: 10px; - overflow: auto; -} - /** - * Styles for page steps + * Styles for cms */ -.cms table.ss-gridfield-table .ss-gridfield-inline-new.uf-gridfield-steprow, -.cms table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFormStep'], -.cms table.ss-gridfield-table .ss-gridfield-inline-new.uf-gridfield-steprow:hover, -.cms table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFormStep']:hover -{ - background: #dae2e7; +.cms .ss-gridfield > div.ss-gridfield-buttonrow-before { + margin-bottom: 10px; + overflow: auto; +} +.cms table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFormStep'], .cms table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFormStep']:hover { + background: #dae2e7; +} +.cms table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFormStep'] label { + font-weight: bold; + color: #444; + font-size: 1.1em; +} +.cms table.ss-gridfield-table .ss-gridfield-item[data-class^='EditableFieldGroup'], .cms table.ss-gridfield-table .ss-gridfield-item[data-class^='EditableFieldGroup']:hover { + background: #E7EFF4; +} +.cms table.ss-gridfield-table .ss-gridfield-item[data-class^='EditableFieldGroup'] label { + font-weight: bold; +} +.cms table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroupEnd'] .col-Title input { + display: none; +} +.cms table.ss-gridfield-table .ss-gridfield-item.inFieldGroup .col-reorder, +.cms table.ss-gridfield-table .ss-gridfield-item.inFieldGroup .handle { + background: #E7EFF4; } - -.cms table.ss-gridfield-table .ss-gridfield-inline-new.uf-gridfield-steprow label, -.cms table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFormStep'] label -{ - font-weight: bold; - color: #393939; - font-size: 1.1em; -} \ No newline at end of file diff --git a/javascript/Gridfield.js b/javascript/Gridfield.js new file mode 100644 index 0000000..ffedf66 --- /dev/null +++ b/javascript/Gridfield.js @@ -0,0 +1,23 @@ +/** + * form builder behaviour. + */ + + (function($) { + $.entwine('ss', function($) { + $(".ss-gridfield-orderable tbody").entwine({ + onmatch: function() { + this._super(); + + this.find('.ss-gridfield-item') + .removeClass('inFieldGroup'); + + this.find('.ss-gridfield-item[data-class="EditableFieldGroup"]') + .nextUntil('.ss-gridfield-item[data-class="EditableFieldGroupEnd"]') + .addClass('inFieldGroup'); + }, + onunmatch: function () { + this._super(); + } + }); + }); +}(jQuery)); diff --git a/scss/UserForm.scss b/scss/UserForm.scss new file mode 100644 index 0000000..5842929 --- /dev/null +++ b/scss/UserForm.scss @@ -0,0 +1,47 @@ +/** + * Lightweight base styles for the front-end form. + */ + +.userform-progress { + .progress { + position: relative; + height: 1em; + background: #eee; + + .progress-bar { + position: absolute; + height: 1em; + background: #666; + } + } + + .step-buttons { + margin-left: 0; + position: relative; + + .step-button-wrapper { + display: inline-block; + list-style-type: none; + } + } + + .step-button-jump { + position: absolute; + top: 0; + } +} + +.step-navigation { + .step-buttons { + margin-left: 0; + + .step-button-wrapper { + display: inline-block; + list-style-type: none; + } + } +} + +.userform { + clear: both; +} diff --git a/scss/UserForm_cms.scss b/scss/UserForm_cms.scss new file mode 100644 index 0000000..52b2dad --- /dev/null +++ b/scss/UserForm_cms.scss @@ -0,0 +1,50 @@ +/** + * Styles for cms + */ + +.cms { + .ss-gridfield > div.ss-gridfield-buttonrow-before { + margin-bottom: 10px; + overflow: auto; + } + + table.ss-gridfield-table { + .ss-gridfield-item[data-class='EditableFormStep'] { + &, &:hover { + background: #dae2e7; + } + + label { + font-weight: bold; + color: #444; + font-size: 1.1em; + } + } + + .ss-gridfield-item[data-class^='EditableFieldGroup'] { + &, &:hover { + background: #E7EFF4; + } + + label { + font-weight: bold; + } + } + + .ss-gridfield-item[data-class='EditableFieldGroupEnd'] { + .col-Title input { + display: none; + } + } + + .ss-gridfield-item.inFieldGroup { + .col-reorder, + .handle { + background: #E7EFF4; + } + } + } +} + + +