MDL-51880 atto/plugins/table: improve table borders

* Removed the "No borders" option from general borders setting
  since it's a style choice.
* Added inherit, initial and unset as border style options.
* Made the border settings disabled if "Theme default" is selected.
* Changed the transparent colour to be "Theme default" which means
  apply no colour at all.

lib/editor/atto/plugins/table/lang/en/atto_table.php

@@ -45,15 +45,22 @@
 $string['bordersize'] = 'Size of borders';
 $string['borderstyles'] = 'Style of borders';
 $string['borderstyles_desc'] = 'Allowed border styles, separated by commas';
-$string['borderstyles_default'] = 'solid,dashed,dotted';
 $string['caption'] = 'Caption';
 $string['captionposition'] = 'Caption position';
 $string['columns'] = 'Columns';
 $string['createtable'] = 'Create table';
 $string['deletecolumn'] = 'Delete column';
 $string['deleterow'] = 'Delete row';
+$string['dashed'] = 'Dashed';
+$string['dotted'] = 'Dotted';
+$string['double'] = 'Double';
 $string['edittable'] = 'Edit table';
+$string['groove'] = 'Groove';
 $string['headers'] = 'Define headers on';
+$string['hidden'] = 'Hidden';
+$string['inherit'] = 'Inherit';
+$string['initial'] = 'Initial';
+$string['inset'] = 'Inset';
 $string['movecolumnleft'] = 'Move column left';
 $string['movecolumnright'] = 'Move column right';
 $string['moverowdown'] = 'Move row down';
@@ -63,10 +70,14 @@
 $string['numberofcolumns'] = 'Number of columns';
 $string['numberofrows'] = 'Number of rows';
 $string['outer'] = 'Around table';
+$string['outset'] = 'Outset';
 $string['pluginname'] = 'Table';
+$string['ridge'] = 'Ridge';
 $string['rows'] = 'Rows';
 $string['settings'] = 'Table settings';
-$string['updatetable'] = 'Update table';
-$string['width'] = 'Table width (in %)';
+$string['solid'] = 'Solid';
 $string['themedefault'] = 'Theme default';
 $string['transparent'] = 'Transparent';
+$string['unset'] = 'Unset';
+$string['updatetable'] = 'Update table';
+$string['width'] = 'Table width (in %)';

lib/editor/atto/plugins/table/lib.php

@@ -60,8 +60,19 @@ function atto_table_strings_for_js() {
                                           'width',
                                           'outer',
                                           'noborder',
-                                          'transparent',
-                                          'themedefault'),
+                                          'inherit',
+                                          'themedefault',
+                                          'initial',
+                                          'unset',
+                                          'hidden',
+                                          'dotted',
+                                          'dashed',
+                                          'solid',
+                                          'double',
+                                          'groove',
+                                          'ridge',
+                                          'inset',
+                                          'outset'),
                                     'atto_table');
 
     $PAGE->requires->strings_for_js(array('top',

lib/editor/atto/plugins/table/settings.php

@@ -50,16 +50,18 @@
 
     $name = new lang_string('borderstyles', 'atto_table');
     $desc = new lang_string('borderstyles_desc', 'atto_table');
-    $default = ['none' => 'none',
-    'hidden' => 'hidden',
-    'dotted' => 'dotted',
-    'dashed' => 'dashed',
-    'solid' => 'solid',
-    'double' => 'double',
-    'groove' => 'groove',
-    'ridge' => 'ridge',
-    'inset' => 'inset',
-    'outset' => 'outset'];
+    $default = array('initial' => new lang_string('initial', 'atto_table'),
+    'unset' => new lang_string('unset', 'atto_table'),
+    'none' => new lang_string('none', 'atto_table'),
+    'hidden' => new lang_string('hidden', 'atto_table'),
+    'dotted' => new lang_string('dotted', 'atto_table'),
+    'dashed' => new lang_string('dashed', 'atto_table'),
+    'solid' => new lang_string('solid', 'atto_table'),
+    'double' => new lang_string('double', 'atto_table'),
+    'groove' => new lang_string('groove', 'atto_table'),
+    'ridge' => new lang_string('ridge', 'atto_table'),
+    'inset' => new lang_string('inset', 'atto_table'),
+    'outset' => new lang_string('outset', 'atto_table'));
 
     $setting = new admin_setting_configmultiselect('atto_table/borderstyles',
                                                 $name,

lib/editor/atto/plugins/table/tests/behat/table.feature

@@ -35,6 +35,71 @@ Feature: Atto tables
     And I press "Save changes"
     Then ".blog_entry table caption" "css_element" should be visible
 
+  @javascript
+  Scenario: Check table setting defaults on new table
+    Given the following config values are set as admin:
+    | config | value | plugin |
+    | allowborders | 1 | atto_table |
+    | allowborderstyles | 1 | atto_table |
+    | allowbordersize | 1 | atto_table |
+    | allowbordercolour | 1 | atto_table |
+    | allowbackgroundcolour | 1 | atto_table |
+    | allowwidth | 1 | atto_table |
+    And I log in as "admin"
+    And I follow "Profile" in the user menu
+    And I follow "Blog entries"
+    And I follow "Add a new entry"
+    And I set the field "Entry title" to "How to make a table"
+    And I set the field "Blog entry body" to "Table test"
+    And I select the text in the "Blog entry body" Atto editor
+    And I click on "Show more buttons" "button"
+    When I click on "Table" "button"
+    Then the ".moodle-dialogue-base .atto_form .borderstyle" "css_element" should be disabled
+    And the ".moodle-dialogue-base .atto_form .bordersize" "css_element" should be disabled
+    And the "borderColour" "radio" should be disabled
+    And the field "borders" matches value "default"
+    And the field "Theme default" matches value "1"
+    And the field "Table width (in %)" matches value ""
+
+  @javascript
+  Scenario: Edit a table restores settings
+    Given the following config values are set as admin:
+    | config | value | plugin |
+    | allowborders | 1 | atto_table |
+    | allowborderstyles | 1 | atto_table |
+    | allowbordersize | 1 | atto_table |
+    | allowbordercolour | 1 | atto_table |
+    | allowbackgroundcolour | 1 | atto_table |
+    | allowwidth | 1 | atto_table |
+    And I log in as "admin"
+    And I follow "Profile" in the user menu
+    And I follow "Blog entries"
+    And I follow "Add a new entry"
+    And I set the field "Entry title" to "How to make a table"
+    And I set the field "Blog entry body" to "<table><tr><td>Cell</td></tr></table>"
+    And I select the text in the "Blog entry body" Atto editor
+    And I click on "Show more buttons" "button"
+    And I click on "Table" "button"
+    And I click on "Edit table" "link"
+    And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .backgroundcolour" "css_element"
+    And I set the field "Table width (in %)" to "100"
+    And I set the field "Borders" to "Around table"
+    And I set the field "Style of borders" to "Dashed"
+    And I set the field "Size of borders" to "2"
+    And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .bordercolour" "css_element"
+    And I press "Update table"
+    And I select the text in the "Blog entry body" Atto editor
+    And I click on "Table" "button"
+    When I click on "Edit table" "link"
+    # Check that the background colour is set correctly.
+    Then the field with xpath "//label/input[@name='backgroundColour' and @value='#FFFFFF']" matches value "1"
+    And the field "Table width (in %)" matches value "100"
+    And the field "Borders" matches value "Around table"
+    And the field "Style of borders" matches value "dashed"
+    And the field "Size of borders" matches value "2"
+    # Check that the border colour is set correctly.
+    And the field with xpath "//label/input[@name='borderColour' and @value='#FFFFFF']" matches value "1"
+
   @javascript
   Scenario: Create a table with background colour and width with border settings off
     Given the following config values are set as admin:
@@ -67,7 +132,8 @@ Feature: Atto tables
     And I follow "Edit"
     And I click on "Show more buttons" "button"
     And I click on "HTML" "button"
-    Then I should see "style=\"background-color:#FFFFFF;width:100%;\""
+    Then I should see "background-color:rgb(255,255,255);"
+    And I should see "width:100%;"
 
   @javascript
   Scenario: Edit a table with background colour and width with border settings off
@@ -102,7 +168,8 @@ Feature: Atto tables
     And I follow "Edit"
     And I click on "Show more buttons" "button"
     And I click on "HTML" "button"
-    Then I should see "style=\"width:100%;background-color:rgb(255,255,255);\""
+    Then I should see "background-color:rgb(255,255,255);"
+    And I should see "width:100%;"
 
   @javascript
   Scenario: Create a table with background colour and width with borders on
@@ -137,7 +204,8 @@ Feature: Atto tables
     And I follow "Edit"
     And I click on "Show more buttons" "button"
     And I click on "HTML" "button"
-    Then I should see "style=\"border:1px solid #FFFFFF;background-color:#FFFFFF;width:100%;\""
+    Then I should see "background-color:rgb(255,255,255);"
+    And I should see "width:100%;"
 
   @javascript
   Scenario: Edit a table with background colour and width with borders on
@@ -167,13 +235,14 @@ Feature: Atto tables
     Then ".moodle-dialogue-base .atto_form .customwidth" "css_element" should exist
     And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .backgroundcolour" "css_element"
     And I set the field "Table width (in %)" to "100"
-    And I set the field "Borders" to "Around table"
+    And I set the field "Borders" to "Around each cell"
     And I press "Update table"
     And I press "Save changes"
     And I follow "Edit"
     And I click on "Show more buttons" "button"
     And I click on "HTML" "button"
-    Then I should see "style=\"border:1px solid rgb(255,255,255);width:100%;background-color:rgb(255,255,255);\""
+    Then I should see "background-color:rgb(255,255,255);"
+    And I should see "width:100%;"
 
   @javascript
   Scenario: Create a table with background colour and width with borders and border styling on
@@ -203,13 +272,15 @@ Feature: Atto tables
     And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .backgroundcolour" "css_element"
     And I set the field "Table width (in %)" to "100"
     And I set the field "Borders" to "Around table"
-    And I set the field "Style of borders" to "dashed"
+    And I set the field "Style of borders" to "Dashed"
     And I press "Create table"
     And I press "Save changes"
     And I follow "Edit"
     And I click on "Show more buttons" "button"
     And I click on "HTML" "button"
-    Then I should see "style=\"border:1px dashed #FFFFFF;background-color:#FFFFFF;width:100%;\""
+    Then I should see "background-color:rgb(255,255,255);"
+    And I should see "width:100%;"
+    And I should see "border-style:dashed;"
 
   @javascript
   Scenario: Edit a table with background colour and width with borders and border styling on
@@ -240,13 +311,15 @@ Feature: Atto tables
     And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .backgroundcolour" "css_element"
     And I set the field "Table width (in %)" to "100"
     And I set the field "Borders" to "Around table"
-    And I set the field "Style of borders" to "dashed"
+    And I set the field "Style of borders" to "Dashed"
     And I press "Update table"
     And I press "Save changes"
     And I follow "Edit"
     And I click on "Show more buttons" "button"
     And I click on "HTML" "button"
-    Then I should see "style=\"border:1px dashed rgb(255,255,255);width:100%;background-color:rgb(255,255,255);\""
+    Then I should see "background-color:rgb(255,255,255);"
+    And I should see "width:100%;"
+    And I should see "border-style:dashed;"
 
   @javascript
   Scenario: Create a table with background colour and width with borders, border styling, and border size on
@@ -276,14 +349,17 @@ Feature: Atto tables
     And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .backgroundcolour" "css_element"
     And I set the field "Table width (in %)" to "100"
     And I set the field "Borders" to "Around table"
-    And I set the field "Style of borders" to "dashed"
+    And I set the field "Style of borders" to "Dashed"
     And I set the field "Size of borders" to "2"
     And I press "Create table"
     And I press "Save changes"
     And I follow "Edit"
     And I click on "Show more buttons" "button"
     And I click on "HTML" "button"
-    Then I should see "style=\"border:2px dashed #FFFFFF;background-color:#FFFFFF;width:100%;\""
+    Then I should see "background-color:rgb(255,255,255);"
+    And I should see "width:100%;"
+    And I should see "border-style:dashed;"
+    And I should see "border-width:2px;"
 
   @javascript
   Scenario: Edit a table with background colour and width with borders, border styling, and border size on
@@ -314,14 +390,17 @@ Feature: Atto tables
     And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .backgroundcolour" "css_element"
     And I set the field "Table width (in %)" to "100"
     And I set the field "Borders" to "Around table"
-    And I set the field "Style of borders" to "dashed"
+    And I set the field "Style of borders" to "Dashed"
     And I set the field "Size of borders" to "2"
     And I press "Update table"
     And I press "Save changes"
     And I follow "Edit"
     And I click on "Show more buttons" "button"
     And I click on "HTML" "button"
-    Then I should see "style=\"border:2px dashed rgb(255,255,255);width:100%;background-color:rgb(255,255,255);\""
+    Then I should see "background-color:rgb(255,255,255);"
+    And I should see "width:100%;"
+    And I should see "border-style:dashed;"
+    And I should see "border-width:2px;"
 
   @javascript
   Scenario: Create a table with all settings on
@@ -351,15 +430,19 @@ Feature: Atto tables
     And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .backgroundcolour" "css_element"
     And I set the field "Table width (in %)" to "100"
     And I set the field "Borders" to "Around table"
-    And I set the field "Style of borders" to "dashed"
+    And I set the field "Style of borders" to "Dashed"
     And I set the field "Size of borders" to "2"
     And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .bordercolour" "css_element"
     And I press "Create table"
     And I press "Save changes"
     And I follow "Edit"
     And I click on "Show more buttons" "button"
     And I click on "HTML" "button"
-    Then I should see "style=\"border:2px dashed #FFFFFF;background-color:#FFFFFF;width:100%;\""
+    Then I should see "background-color:rgb(255,255,255);"
+    And I should see "width:100%;"
+    And I should see "dashed"
+    And I should see "2px"
+    And I should see "rgb(255,255,255)"
 
   @javascript
   Scenario: Edit a table with background colour and width with borders, border styling, and border size on
@@ -387,15 +470,19 @@ Feature: Atto tables
     Then ".moodle-dialogue-base .atto_form .bordercolour" "css_element" should exist
     Then ".moodle-dialogue-base .atto_form .backgroundcolour" "css_element" should exist
     Then ".moodle-dialogue-base .atto_form .customwidth" "css_element" should exist
-    And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .backgroundcolour" "css_element"
+    And I click on "FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .backgroundcolour" "css_element"
     And I set the field "Table width (in %)" to "100"
     And I set the field "Borders" to "Around table"
-    And I set the field "Style of borders" to "dashed"
+    And I set the field "Style of borders" to "Dashed"
     And I set the field "Size of borders" to "2"
-    And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .bordercolour" "css_element"
+    And I click on "FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .bordercolour" "css_element"
     And I press "Update table"
     And I press "Save changes"
     And I follow "Edit"
     And I click on "Show more buttons" "button"
     And I click on "HTML" "button"
-    Then I should see "style=\"border:2px dashed rgb(255,255,255);width:100%;background-color:rgb(255,255,255);\""
+    Then I should see "background-color:rgb(255,255,255);"
+    And I should see "width:100%;"
+    And I should see "dashed"
+    And I should see "2px"
+    And I should see "rgb(255,255,255)"