Skip to content

Commit

Permalink
Merge pull request #15 from Rhym/feature/ui-update
Browse files Browse the repository at this point in the history 
Updated visual style
  • Loading branch information
@stevie-mayhew
stevie-mayhew authored Dec 13, 2017
2 parents f35b76f + be292e1 commit f8a5536
Show file tree
Hide file tree
Showing 8 changed files with 94 additions and 78 deletions.
4 changes: 4 additions & 0 deletions .editorconfig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@ indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

[*.js]
indent_size = 2
indent_style = space

[{*.yml,package.json}]
indent_size = 2

Expand Down
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ interface.

Edit inline, or download a CSV export and import changes.

![SilverStripe SEO Editor](https://raw.github.com/little-giant/silverstripe-seo-editor/master/images/preview.jpg)
![SilverStripe SEO Editor](https://raw.github.com/little-giant/silverstripe-seo-editor/master/images/preview.png)

## Installation

Expand Down
64 changes: 35 additions & 29 deletions client/css/seo-editor.css
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,49 @@
.cms table.ss-gridfield-table tbody td.col-Title {
max-width: 100px;
.cms table.grid-field__table tbody td.col-Title {
max-width: 8rem;
}

.seo-editor-valid {
background-color: #70AE6E;
/**
* @desc Remove the hover background color from the grid-field items, as they're distracting.
*/
.cms tbody tr:hover,
.cms .table tbody tr.even:hover,
.cms .table tbody tr:hover {
background-color: transparent;
}

.seo-editor-error {
background-color: #F15F60;
position: relative;
/**
* @desc Add a border, and box-shadow to the inputs in an error state.
*/
.cms .seo-editor-error input,
.cms .seo-editor-error input:hover,
.cms .seo-editor-error input:focus,
.cms .seo-editor-error textarea,
.cms .seo-editor-error textarea:hover,
.cms .seo-editor-error textarea:focus {
border-color: #dc3545;
box-shadow: 0 0 0 0.3em rgba(220, 53, 69, .5);
}

.seo-editor-error:hover {
background-color: #f2a1a2;
}


.seo-editor-errors {
position: absolute;
bottom: 100%;
font-size: smaller;
margin-top: 1em;
color: #dc3545;
}

/* Hide the messages until the parent has the appropriate class */
.seo-editor-message {
display: none;
position: relative;
background-color: #373737;
color: #FFFFFF;
border: 1px solid #727272;
border-radius: 10px;
padding: 10px;
display: none;
}

/* Error Message States */
.seo-editor-error-too-short:hover .seo-editor-message-too-short {
display: block;
.seo-editor-error-too-short .seo-editor-message-too-short {
display: block;
}
.seo-editor-error-too-long:hover .seo-editor-message-too-long {
display: block;

.seo-editor-error-too-long .seo-editor-message-too-long {
display: block;
}
.seo-editor-error-duplicate:hover .seo-editor-message-duplicate {
display: block;
}

.seo-editor-error-duplicate .seo-editor-message-duplicate {
display: block;
}

79 changes: 42 additions & 37 deletions client/javascript/seo-editor.js
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,47 @@
(function ($) {

$.entwine('ss', function ($) {

$('.ss-seo-editor .ss-gridfield-item input, .ss-seo-editor .ss-gridfield-item textarea').entwine({

onchange: function () {

// kill the popup for form changes
$('.cms-edit-form').removeClass('changed');

var $this = $(this);
var id = $this.closest('tr').attr('data-id');
var url = $this.closest('.ss-gridfield').attr('data-url') + "/update" + $this.attr('data-name') + "/" + id;
var data = encodeURIComponent($this.attr('name')) + '=' + encodeURIComponent($(this).val());

// statusMessage('Saving changes', 'good');

$.post(
url,
data,
function (data, textStatus) {
// statusMessage(data.message, data.type);
$this.closest('td').removeClass();
if (data.errors.length) {
$this.closest('td').addClass('seo-editor-error');
data.errors.forEach(function(error) {
$this.closest('td').addClass(error)
});
} else {
$this.closest('td').addClass('seo-editor-valid');
}

},
'json'
);
}
$.entwine('ss', function ($) {
$('.ss-seo-editor .ss-gridfield-item input, .ss-seo-editor .ss-gridfield-item textarea').entwine({

onchange: function () {
// kill the popup for form changes
$('.cms-edit-form').removeClass('changed');

var $this = $(this);
var id = $this.closest('tr').attr('data-id');
var url = $this.closest('.ss-gridfield').attr('data-url') + "/update" + $this.attr('data-name') + "/" + id;
var data = encodeURIComponent($this.attr('name')) + '=' + encodeURIComponent($(this).val());

$.noticeAdd({
text: 'Saving changes',
type: 'notice',
stayTime: 5000,
inEffect: {left: '0', opacity: 'show'},
});

$.post(
url,
data,
function (data, textStatus) {
$.noticeAdd({
text: data.message,
type: data.type,
stayTime: 5000,
inEffect: {left: '0', opacity: 'show'},
});

$this.closest('td').removeClass();
if (data.errors.length) {
$this.closest('td').addClass('seo-editor-error');
data.errors.forEach(function (error) {
$this.closest('td').addClass(error)
});
} else {
$this.closest('td').addClass('seo-editor-valid');
}
},
'json'
);
}
});

});
}(jQuery));
Binary file removed images/preview.jpg
View file
Binary file not shown.
Binary file added images/preview.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 6 additions & 6 deletions src/Forms/GridField/SEOEditorMetaDescriptionColumn.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ public function augmentColumns($gridField, &$columns)
public function getColumnsHandled($gridField)
{
return [
'MetaDescription'
'MetaDescription',
];
}

Expand All @@ -66,7 +66,7 @@ public function getColumnAttributes($gridField, $record, $columnName)
return [
'class' => count($errors)
? 'seo-editor-error ' . implode(' ', $errors)
: 'seo-editor-valid'
: 'seo-editor-valid',
];
}

Expand Down Expand Up @@ -203,16 +203,16 @@ public function handleAction($gridField, $request)
}

return json_encode([
'type' => 'good',
'type' => 'success',
'message' => $fieldName . ' saved',
'errors' => $this->getErrors($page)
'errors' => $this->getErrors($page),
]);
}
}

return json_encode([
'type' => 'bad',
'message' => 'An error occurred while saving'
'type' => 'error',
'message' => 'An error occurred while saving',
]);
}
}
11 changes: 6 additions & 5 deletions src/Forms/GridField/SEOEditorMetaTitleColumn.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ public function augmentColumns($gridField, &$columns)
public function getColumnsHandled($gridField)
{
return [
'MetaTitle'
'MetaTitle',
];
}

Expand All @@ -62,6 +62,7 @@ public function getColumnsHandled($gridField)
public function getColumnAttributes($gridField, $record, $columnName)
{
$errors = $this->getErrors($record);

return [
'class' => count($errors)
? 'seo-editor-error ' . implode(' ', $errors)
Expand Down Expand Up @@ -200,16 +201,16 @@ public function handleAction($gridField, $request)
}

return json_encode([
'type' => 'good',
'type' => 'success',
'message' => $fieldName . ' saved',
'errors' => $this->getErrors($page)
'errors' => $this->getErrors($page),
]);
}
}

return json_encode([
'type' => 'bad',
'message' => 'An error occurred while saving'
'type' => 'error',
'message' => 'An error occurred while saving',
]);
}
}

0 comments on commit f8a5536

Please sign in to comment.