Merge pull request #18 from DHTMLX/toolbar-restructuring-4915

[update] toolbar-related docs

Author: mafanya23

docs/api/spreadsheet_toolbarblocks_config.md

@@ -19,47 +19,47 @@ toolbarBlocks?: array;
 ### Default config
 
 ~~~jsx
-toolbarBlocks: ["undo", "colors", "decoration", "align", "format", "actions", "helpers"]
+toolbarBlocks: ["undo", "colors", "decoration", "align", "cell", "format", "actions"]
 ~~~
 
 ### Example
 
 ~~~jsx {3-15}
-const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
+const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
     // full toolbar
     toolbarBlocks: [
         "undo",
         "colors",
         "decoration",
         "align",
+        "cell",
+        "format",
+        "actions", 
         "lock",
         "clear",
-        "rows",
         "columns",
-        "helpers",
-        "format",
-        "file"
+        "rows",
+        "file",
+        "help"
     ]
 });
 ~~~
 
 ### Details
 
-You can specify your own structure of the toolbar by enumerating necessary elements in the **toolbarBlocks** array in the desired order, for example:
+You can specify your own structure of the toolbar by enumerating necessary elements in the `toolbarBlocks` array in the desired order, for example:
 
-~~~jsx {2}
-const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
-    toolbarBlocks: ["helpers", "colors", "align", "decoration", "lock", "clear"]
+~~~jsx
+const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
+    toolbarBlocks: ["colors", "align", "cell", "decoration", "lock", "clear"]
 });
 ~~~
 
-![Custom toolbar](../assets/custom_toolbar.png)
-
 Check how you can [customize the toolbar](customization.md/#toolbar).
 
 **Change log:**
-- The *"actions"* block was added in v5.0
-- The *"help"* block was renamed to *"helpers"* in v5.0
+- The *"actions"* block is added in v5.0 
+- The *"cell"* block is added in v5.2
 
 **Related articles:**
 - [Configuration](configuration.md#toolbar)

docs/configuration.md

@@ -10,13 +10,19 @@ You can adjust the desired settings of DHTMLX Spreadsheet to meet your needs. Th
 
 ## Toolbar
 
-The toolbar of the Spreadsheet consists of several blocks of controls that can be changed according to your needs. By default, there are the following blocks of controls in the toolbar: "undo", "colors", "decoration", "align", "format", "actions", "helpers". You can add more blocks from the list: "lock", "clear", "rows", "columns", "file".
+The toolbar of the Spreadsheet consists of several blocks of controls that can be changed according to your needs. By default, there are the following blocks of controls in the toolbar: "undo", "colors", "decoration", "align", "cell", "format", "actions". You can add more blocks from the list: "lock", "clear", "rows", "columns", "file", "help".
 
 <iframe src="https://snippet.dhtmlx.com/kpm017nx?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="450"></iframe>
 
 The structure of toolbar can be adjusted via the [](api/spreadsheet_toolbarblocks_config.md) configuration option of the component, which is an array with strings presenting the names of controls.
 
-You can also specify your own structure of the toolbar by enumerating necessary elements in the **toolbarBlocks** array in the desired order, for example: "helpers", "colors", "align", "decoration", "lock", "clear".
+You can also specify your own structure of the toolbar by enumerating necessary elements in the **toolbarBlocks** array in the desired order, for example: "colors", "align", "cell", "decoration", "lock", "clear".
+
+~~~jsx
+const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
+    toolbarBlocks: ["colors", "align", "cell", "decoration", "lock", "clear"]
+});
+~~~
 
 Toolbar is [highly customizable](customization.md). You can add new controls, change the icons of controls and apply the desired icon pack.
 

docs/customization.md

@@ -115,16 +115,16 @@ spreadsheet.toolbar.data.remove("control-id");
 The [default toolbar](/#toolbar) contains the following blocks of controls:
 
 - the **Undo** block
-  - the *Undo* button (id:"undo")
-  - the *Redo* button (id:"redo")
+  - the *Undo* button (id: "undo")
+  - the *Redo* button (id: "redo")
 - the **Colors** block
-  - the *Text color* button (id:"color")
-  - the *Background color* button (id:"background")
+  - the *Text color* button (id: "color")
+  - the *Background color* button (id: "background")
 - the **Decoration** block
-  - the *Bold* button (id:"font-weight-bold")
-  - the *Italic* button (id:"font-style-italic")
-  - the *Underline* button (id:"text-decoration-underline")
-  - the *Strikethrough* button (id:"text-decoration-line-through")
+  - the *Bold* button (id: "font-weight-bold")
+  - the *Italic* button (id: "font-style-italic")
+  - the *Underline* button (id: "text-decoration-underline")
+  - the *Strikethrough* button (id: "text-decoration-line-through")
 - the **Align** block
   - the **Horizontal align** sub-block
     - the *Left* button (id: "halign-left")
@@ -137,35 +137,37 @@ The [default toolbar](/#toolbar) contains the following blocks of controls:
   - the **Text wrapping** sub-block
     - the *Clip* button (id: "multiline-clip")
     - the *Wrap* button (id: "multiline-wrap")
-  - the **Merge/Unmerge** button (id: "merge")
+- the **Cell** block
+  - the *Border* button (id: "border")
+  - the *Merge/Unmerge* button (id: "merge")
 - the **Format** block
-  - the *Format* menuItem (id:"format")
+  - the *Format* menuItem (id: "format")
 - the **Actions** block
-  - the *Filter* button (id:"filter")
-- the **Helpers** block
-  - the *Link* button (id:"link")
-  - the *Help* button (id:"help")
+  - the *Filter* button (id: "filter")
+  - the *Insert link* button (id: "link")
 
 It is also possible to add the blocks enumerated below:
 
 - the **Lock** block
-    - the *Lock* button (id:"lock")
+    - the *Lock* button (id: "lock")
 - the **Clear** block
-  - the *Clear group* menuItem (id:"clear-group")
-    - the *Clear value* menuItem (id:"clear-value")
-    - the *Clear styles* menuItem (id:"clear-styles")
-    - the *Clear all* menuItem (id:"clear-all")
+  - the *Clear group* menuItem (id: "clear-group")
+    - the *Clear value* menuItem (id: "clear-value")
+    - the *Clear styles* menuItem (id: "clear-styles")
+    - the *Clear all* menuItem (id: "clear-all")
 - the **Rows** block
-  - the *Add row* button (id:"add-row")
-  - the *Remove row* button (id:"remove-row")
+  - the *Add row* button (id: "add-row")
+  - the *Remove row* button (id: "remove-row")
 - the **Columns** block
-  - the *Add column* button (id:"add-col")
-  - the *Remove column* button (id:"remove-col")
+  - the *Add column* button (id: "add-col")
+  - the *Remove column* button (id: "remove-col")
 - the **File** block
-  - the *Export* menuItem (id:"export")
-    - the *"Microsoft Excel(.xlsx)"* menuItem (id:"export-xlsx")
-  - the *Import* menuItem (id:"import")
-    - the *"Microsoft Excel(.xlsx)"* menuItem (id:"import-xlsx")
+  - the *Export* menuItem (id: "export")
+    - the *"Microsoft Excel(.xlsx)"* menuItem (id: "export-xlsx")
+  - the *Import* menuItem (id: "import")
+    - the *"Microsoft Excel(.xlsx)"* menuItem (id: "import-xlsx")
+- the **Help** block
+  - the *Help* button (id: "help")
 
 ### Adding controls
 

docs/index.md

@@ -17,7 +17,7 @@ There is a [User Guide](guides/#user-guides) provided to make work with Spreadsh
 
 ### Toolbar
 
-The **Toolbar** section is rather flexible. It contains 6 default blocks of controls: "undo", "colors", "decoration", "align", "format", "actions", "helpers". You can [change the toolbar structure](configuration.md#toolbar) and add more blocks, or change the order of the blocks.
+The **Toolbar** section is rather flexible. It contains several default blocks of controls: "undo", "colors", "decoration", "align", "cell", "format", "actions". You can [change the toolbar structure](configuration.md#toolbar) and add more blocks, or set your own order of the blocks.
 
 ![Spreadsheet Toolbar](assets/overview_toolbar.png)