diff --git a/.gitignore b/.gitignore index a6408e92..37c5b1d9 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,4 @@ _build/ - # IntelliJ IDEA *.iml -.idea -sulu-docs.iml +.idea \ No newline at end of file diff --git a/bundles/admin/javascript-hooks/header.rst b/bundles/admin/javascript-hooks/header.rst index d4eb6c0c..e863c18b 100644 --- a/bundles/admin/javascript-hooks/header.rst +++ b/bundles/admin/javascript-hooks/header.rst @@ -17,7 +17,7 @@ The header-hook in such a component could look something like: url: 'url/to/tabsData' }, toolbar: { - languageChanger: true + languageChanger: true, buttons: { save: {}, settings: { @@ -28,8 +28,8 @@ The header-hook in such a component could look something like: } } } - } - title: 'My title', + }, + title: 'My title' } What this hook does is essentially the following: @@ -39,12 +39,12 @@ What this hook does is essentially the following: tabs component is handled automatically if the data returned by ``tabs.url`` has the right format. * It initializes the toolbar with the defined buttons. For information on how to configure buttons - and even how to create your own buttons have look :doc:`here `. + and even how to create your own buttons have look :doc:`/bundles/admin/sulu-buttons`. * It injects the title into every tab (or into your current component if no tabs specified) .. note:: The header-hook can also be a function which returns the object seen in the example. Within this function - you have access on things like ``this.options`` + you have access to things like ``this.options`` List of all available options: @@ -83,7 +83,7 @@ List of all available options: - contains configuration-properties about the toolbar * - toolbar.buttons - Object - - an object of sulu-buttons. For the documentation on sulu-buttons have a look :doc:`here `. + - an object of sulu-buttons. For the documentation on sulu-buttons have a look :doc:`/bundles/admin/sulu-buttons`. * - toolbar.options - Object - an object of options to pass to the husky-toolbar-component @@ -97,14 +97,3 @@ List of all available options: * - toolbar.languageChanger.callback - Function - a callback function which gets executed when the language-changer-dropdown gets changed - - - - - - - - - - - diff --git a/bundles/admin/javascript-hooks/index.rst b/bundles/admin/javascript-hooks/index.rst index 87f05ba4..0829f18e 100644 --- a/bundles/admin/javascript-hooks/index.rst +++ b/bundles/admin/javascript-hooks/index.rst @@ -2,13 +2,12 @@ Javascript-Hooks ================ Javascript-hooks are just special-name-properties placed in the return-object of -javascript-components. The AdminBundle recognizes the hooks and does stuff, like rendering +javascript-components. The AdminBundle recognizes the hooks and executes functionality, like rendering a header with tabs or just manipulating the column-layout. .. toctree:: :maxdepth: 1 layout - view header load-component-data diff --git a/bundles/admin/javascript-hooks/layout.rst b/bundles/admin/javascript-hooks/layout.rst index 418e4a8e..b295ae2d 100644 --- a/bundles/admin/javascript-hooks/layout.rst +++ b/bundles/admin/javascript-hooks/layout.rst @@ -40,7 +40,7 @@ List of all available options: - contains properties affecting the navigation-column * - navigation.collapsed - Boolean - - If true the navigation merges to collapsed state + - If true the navigation transitions to collapsed state * - navigation.hidden - Boolean - If true the navigation gets hidden @@ -49,7 +49,7 @@ List of all available options: - contains properties affecting the content-column * - content.width - String - - 'fixed' to keep the column at a fixed width or 'max' to make the column take the maximum of the available space + - ``fixed` to keep the column at a fixed width or ``max`` to make the column take the maximum of the available space * - content.leftSpace - Boolean - If false the content-column has no padding on the left @@ -59,20 +59,40 @@ List of all available options: * - content.topSpace - Boolean - If false the content-column has no padding on the top - * - sidebar + * - sidebar' - Object|Boolean - - contains properties affecting the sidebar-column. If false the sidebar gets hidden. + - Contains properties affecting the sidebar-column. If false the sidebar gets hidden. * - sidebar.width - String - - 'fixed' to keep the column at a fixed width or 'max' to make the column take the maximum of the available space + - ``fixed`` to keep the column at a fixed width or ``max`` to make the column take the maximum of the available space * - sidebar.url - String - Url from which markup gets fetched and placed inside the sidebar + * - extendExisting + - Boolean + - If true the passed configurations for navigation, column and sidebar won't be merged with the defaults. So the existing layout stays the same and only the explicitly passed properties take effect. .. note:: - Either the sidebar-column or the content-column must have a 'fixed' width. If the width - of both columns is of type 'max' the behaviour is not specified. + Either the sidebar-column or the content-column must have a ``fixed`` width. If the width + of both columns is of type ``max`` the behaviour is not specified. +The defaults of the layout-hook are: +.. code-block:: javascript + layout: { + extendExisting: false, + navigation: { + collapsed: false, + hidden: false + }, + content: { + width: 'fixed', + leftSpace: true, + rightSpace: true, + topSpace: true + }, + sidebar: false + } +To get the default layout just write ``layout: {}``. diff --git a/bundles/admin/javascript-hooks/load-component-data.rst b/bundles/admin/javascript-hooks/load-component-data.rst index 87d4223e..b1812060 100644 --- a/bundles/admin/javascript-hooks/load-component-data.rst +++ b/bundles/admin/javascript-hooks/load-component-data.rst @@ -7,7 +7,7 @@ of your component startup and continuing only after the data has been loaded. The load-component-data-hook simplifies this task. Within the return-object of a javascript-component, you can specify a ``loadComponentData`` method where you load your data. This method must return a promise or your desired data straight away. If such a method is specified -the AdminBundle delays the startup of your component and sets ``this.data`` with your laoded data. +the AdminBundle delays the startup of your component and sets ``this.data`` with your laoded data (where ``this`` is the context of your component). So when your components ``initialize`` method gets called you can conveniently access your data via ``this.data`` and don't have to worry about asynchronicity. diff --git a/bundles/admin/javascript-hooks/view.rst b/bundles/admin/javascript-hooks/view.rst deleted file mode 100644 index 62904530..00000000 --- a/bundles/admin/javascript-hooks/view.rst +++ /dev/null @@ -1,23 +0,0 @@ -View -==== - -The view-hook is just a boolean flag which resets the layout to its default values (if no -own layout-hook is set). - -The defaults of the layout-hook are: - -.. code-block:: javascript - - layout: { - navigation: { - collapsed: false, - hidden: false - }, - content: { - width: 'fixed', - leftSpace: true, - rightSpace: true, - topSpace: true - }, - sidebar: false - } diff --git a/bundles/admin/sulu-buttons.rst b/bundles/admin/sulu-buttons.rst index 10dffe2f..eb62de4f 100644 --- a/bundles/admin/sulu-buttons.rst +++ b/bundles/admin/sulu-buttons.rst @@ -1,13 +1,13 @@ Sulu-Buttons ============ -The husky-toolbar-component needs to be passed data to which defines what buttons it should render or what happens -when somebody clicks on a button. Essentially Sulu-buttons are simply about how do I pass buttons to the -toolbar-component more easily and elegantly than just copying the same buttons all over the place. +The husky-toolbar-component needs to be passed data, which defines what buttons it should render or what happens +when somebody clicks on a button. Essentially Sulu-Buttons are about passing buttons to the toolbar-component in an +easier and more elegant way than just copying the same buttons all over the place. With Sulu-buttons you can define buttons in a specific place, extend other buttons and override properties really easily. -Where and what? ---------------- +Introduction +------------ The admin-bundle contains an aura-extension in which all default buttons are specified as well as methods to get buttons and add buttons to the pool of default buttons. @@ -28,7 +28,7 @@ An example for such a button is: } } -As you can see a button gets registered with a name and a template which is the actual button meeting the specifications +As you can see a button gets registered with a name and a template, which is the actual button meeting the specifications of the husky-framework. The same holds for dropdown-items, for which also defaults are specified in the admin-bundle. For example: @@ -45,8 +45,8 @@ The same holds for dropdown-items, for which also defaults are specified in the } } -How to get buttons? -------------------- +Retrieve buttons +---------------- The aura-extension in the admin-bundle extends every sandbox of a javascript-component with the method ``sulu.buttons.get``. In your own component you can call this function like for example: @@ -54,25 +54,26 @@ The aura-extension in the admin-bundle extends every sandbox of a javascript-com .. code-block:: javascript var generatedButtons = this.sandbox.sulu.buttons.get({ - edit: {}, - save: { - options: { - callback: function(){//do something//} - } - }, - settings: { - options: { - dropdownItems: { - delete: {} - } - } - } - }); + edit: {}, + save: { + options: { + callback: function() {//do something//} + } + }, + settings: { + options: { + dropdownItems: { + delete: {} + } + } + } + } + }); The ``sulu.buttons.get`` method returns an array of buttons which meet the specification of the husky-framework. In -our example this return-array contains the template of the 'edit'-button, the template of the 'save'-button but with the -callback-property replaced with our own one and the template of the 'settings'-button which has the template of the -'delete'-dropdownItem as the only dropdown-item. +our example this array contains the template of the ``edit``-button, the template of the ``save`-button but with the +callback-property replaced with our own one and the template of the ``settings``-button which has the template of the +``delete``-dropdownItem as the only dropdown-item. If you want the settings-button two times in the same toolbar with - let's say - different dropdown-items you can make use of the ``parent`` property; @@ -80,33 +81,34 @@ use of the ``parent`` property; .. code-block:: javascript var generatedButtons = this.sandbox.sulu.buttons.get({ - settings1: { - parent: 'settings' - options: { - dropdownItems: { - delete: {} - } - } - }, - settings2: { - parent: 'settings' - options: { - dropdownItems: { - table: {} - } - } - } - }); - -How to add your own buttons? ----------------------------- - -Additionally to the ``sulu.buttons.get`` method the aura-extension provides the following methods - -* ``sulu.buttons.add`` which takes a name and a button-template -* ``sulu.buttons.dropdownItems.add`` which takes a name and a dropdownItem-template -* ``sulu.buttons.push`` takes an array of objects which all must contain a name and a template property -* ``sulu.buttons.dropdownItems.push`` takes an array of objects which all must contain a name and a template property + settings1: { + parent: 'settings', + options: { + dropdownItems: { + delete: {} + } + } + }, + settings2: { + parent: 'settings', + options: { + dropdownItems: { + table: {} + } + } + } + }); + +Add your own buttons +-------------------- + +Additionally to the ``sulu.buttons.get`` method the aura-extension provides the following methods: + +* ``sulu.buttons.add``: takes a name and a button-template +* ``sulu.buttons.dropdownItems.add``: takes a name and a dropdownItem-template +* ``sulu.buttons.push``: takes an array of objects which all must contain a name and a template property +* ``sulu.buttons.dropdownItems.push``: takes an array of objects which all must contain a name and a template property +* ``sulu.buttons.getApiButton``: takes the name of a button-template and returns the actual template. Can be used to extend an existing button-template. So with this methods you can easily add your own buttons and dropdown-items to the pool. These buttons are then globally available via the ``sulu.buttons.get`` method. diff --git a/reference/content-types/text_line.rst b/reference/content-types/text_line.rst index 8b3cb5ba..01ea90ef 100644 --- a/reference/content-types/text_line.rst +++ b/reference/content-types/text_line.rst @@ -9,7 +9,15 @@ Shows a simple text line, the inserted content will be saved as simple string. Parameters ---------- -No parameters available +.. list-table:: + :header-rows: 1 + + * - Parameter + - Type + - Description + * - headline + - boolean + - If true the height and font size of the text line get increased. Example ------- @@ -20,4 +28,7 @@ Example Title + + +