Merge branch 'release/1.0.2'

CHANGELOG.md

@@ -1,3 +1,19 @@
+## 1.0.2
+
+* Button::$rightIcon renamed into $iconRight to follow global pattern
+* Removed depreciated classes H2, Fields and MiniApp
+* Cleaned up demos/button.php
+* Added documentation for Button class
+* Refactored Button internals (simplified), now uses button.html
+* Added comments for a Form
+* Cleaned up Grid type-hinting
+* Added example for top/bottom attached buttons to Grid.
+* You can disable "header" for grid now
+
+## 1.0.1
+
+Qucik post-release bugfixes
+
 ## 1.0.0
 
 * Implement Grid

composer.json

@@ -1,9 +1,9 @@
 {
     "name": "atk4/ui",
     "type": "library",
-    "description": "Agile UI - User Interface Component Library",
-    "keywords": ["framework", "ui", "web", "form", "widget", "render", "gadget", "button", "grid", "crud"],
-    "homepage": "https://github.com/atk4/ui",
+    "description": "Agile UI - Web Component Framework written in PHP",
+    "keywords": ["framework", "ui", "web", "form", "component", "widget", "render", "gadget", "button", "grid", "crud"],
+    "homepage": "https://agiletoolkit.org/ui",
     "license": "MIT",
     "authors": [
         {
@@ -14,7 +14,7 @@
     ],
     "require": {
         "php": ">=5.6.0",
-        "atk4/data": "^1.1.9",
+        "atk4/data": "^1.1.11",
         "atk4/core": "^1.1.11"
     },
     "require-dev": {

demos/button.php

@@ -5,70 +5,79 @@
 require 'init.php';
 use \atk4\ui\Button;
 use \atk4\ui\Buttons;
-use \atk4\ui\H2;
+use \atk4\ui\Header;
 use \atk4\ui\Icon;
 use \atk4\ui\Label;
 use \atk4\ui\Template;
 use \atk4\ui\View;
 
-$layout->add(new H2('Basic Button'));
+$layout->add(new Header(['Basic Button', 'size'=>2]));
 $layout->add(new Button())->set('Click me');
 
-$layout->add(new H2('Properties'));
+$layout->add(new Header(['Properties', 'size'=>2]));
 
 $b1 = new Button();
 $b2 = new Button();
 $b3 = new Button();
+$b4 = new Button();
 
 $b1->set(['Load', 'primary']);
 $b2->set(['Load', 'labeled', 'icon'=>'pause']);
-$b3->set(['Next', 'right labeled', 'icon'=>'right arrow']);
+$b3->set(['Next', 'iconRight'=>'right arrow']);
+$b4->set([false, 'circular', 'icon'=>'settings']);
 $layout->add($b1);
 $layout->add($b2);
 $layout->add($b3);
+$layout->add($b4);
 
 $button = new Button();
 $button->set('Click me');
 $button->set(['primary' => true]);
 $button->set(['icon'=>'check']);
 $button->set(['size big'=>true]);
 
-$layout->add(new H2('Big Button'));
+$layout->add(new Header(['Big Button', 'size'=>2]));
 
 $layout->add($button);
 
-$layout->add(new H2('Button Intent'));
+$layout->add(new Header(['Button Intent', 'size'=>2]));
 
 $b_yes = new Button(['Yes', 'positive basic']);
 $b_no = new Button(['No', 'negative basic']);
 $layout->add($b_yes);
 $layout->add($b_no);
 
-$layout->add(new H2('Combining Buttons'));
+$layout->add(new Header(['Combining Buttons', 'size'=>2]));
 $bar = new Buttons('vertical');  // NOTE: class called Buttons, not Button
 $bar->add(new Button(['Play', 'icon'=>'play']));
 $bar->add(new Button(['Pause', 'icon'=>'pause']));
 $bar->add(new Button(['Shuffle', 'icon'=>'shuffle']));
 
 $layout->add($bar);
 
-$layout->add(new H2('Icon Bar'));
+$layout->add(new Header(['Icon Bar', 'size'=>2]));
 $bar = new Buttons('blue big');
 $bar->add(new Button(['icon'=>'file']));
 $bar->add(new Button(['icon'=>['save', 'yellow']]));
 $bar->add(new Button(['icon'=>'upload', 'disabled'=>true]));
 $layout->add($bar);
 
-$layout->add(new H2('Forks'));
+$layout->add(new Header(['Forks', 'size'=>2]));
 $forks = new Button(['labeled'=> true]); // Button, not Buttons!
 $forks->add(new Button(['Forks', 'blue']))->add(new Icon('fork'));
 $forks->add(new Label(['1,048', 'basic blue left pointing']));
 $layout->add($forks);
 
-$layout->add(new H2('Custom Template'));
+$layout->add(new Header(['Custom Template', 'size'=>2]));
 $view = new View(['template'=>new Template('Hello, {$tag1}, my name is {$tag2}')]);
 
 $view->add(new Button('World'), 'tag1');
 $view->add(new Button(['Agile UI', 'blue']), 'tag2');
 
 $layout->add($view);
+
+$layout->add(new Header(['Attaching', 'size'=>2]));
+
+$layout->add(['Button', 'Scroll Up', 'top attached']);
+$layout->add(['Grid', 'attached', 'header'=>false])->setSource(['One', 'Two', 'Three', 'Four']);
+$layout->add(['Button', 'Scroll Up', 'bottom attached']);

demos/checkbox.php

@@ -7,7 +7,7 @@
 try {
     $layout = new \atk4\ui\Layout\App(['defaultTemplate'=>'./templates/layout2.html']);
 
-    $layout->add(new \atk4\ui\H2('Checkboxes'));
+    $layout->add(new \atk4\ui\Header(['Checkboxes', 'size'=>2]));
 
     $layout->add(new \atk4\ui\FormField\Checkbox('Make my profile visible'));
 

demos/field.php

@@ -4,21 +4,21 @@
  */
 require 'init.php';
 
-$layout->add(new \atk4\ui\H2('Types'));
+$layout->add(new \atk4\ui\Header(['Types', 'size'=>2]));
 
 $layout->add(new \atk4\ui\FormField\Line(['placeholder'=>'Search']));
 $layout->add(new \atk4\ui\FormField\Line(['placeholder'=>'Search', 'loading'=>true]));
 $layout->add(new \atk4\ui\FormField\Line(['placeholder'=>'Search', 'loading'=>'left']));
 $layout->add(new \atk4\ui\FormField\Line(['placeholder'=>'Search', 'icon'=>'search', 'disabled'=>true]));
 $layout->add(new \atk4\ui\FormField\Line(['placeholder'=>'Search', 'error'=>true]));
 
-$layout->add(new \atk4\ui\H2('Icon Variations'));
+$layout->add(new \atk4\ui\Header(['Icon Variations', 'size'=>2]));
 
 $layout->add(new \atk4\ui\FormField\Line(['placeholder'=>'Search users', 'left'=>true, 'icon'=>'users']));
 $layout->add(new \atk4\ui\FormField\Line(['placeholder'=>'Search users', 'icon'=>'circular search link']));
 $layout->add(new \atk4\ui\FormField\Line(['placeholder'=>'Search users', 'icon'=>'inverted circular search link']));
 
-$layout->add(new \atk4\ui\H2('Labels'));
+$layout->add(new \atk4\ui\Header(['Labels', 'size'=>2]));
 
 $layout->add(new \atk4\ui\FormField\Line(['placeholder'=>'Search users', 'label'=>'http://']));
 
@@ -55,7 +55,7 @@
     'label'=> $label,
 ]))->addClass('corner');
 
-$layout->add(new \atk4\ui\H2('Actions'));
+$layout->add(new \atk4\ui\Header(['Actions', 'size'=>2]));
 
 $layout->add(new \atk4\ui\FormField\Line(['action'=>'Search']));
 
@@ -76,14 +76,14 @@
     ->add(new \atk4\ui\Button('Search'), 'AfterAfterInput');
 
 $layout->add(new \atk4\ui\FormField\Line(['action'=> new \atk4\ui\Button([
-    'Copy', 'rightIcon'=>'copy', 'teal',
+    'Copy', 'iconRight'=>'copy', 'teal',
 ])]));
 
 $layout->add(new \atk4\ui\FormField\Line(['action'=> new \atk4\ui\Button([
    'icon'=> 'search',
 ])]));
 
-$layout->add(new \atk4\ui\H2('Modifiers'));
+$layout->add(new \atk4\ui\Header(['Modifiers', 'size'=>2]));
 
 $layout->add(new \atk4\ui\FormField\Line(['icon'=>'search', 'transparent'=>true, 'placeholder'=>'transparent']));
 $layout->add(new \atk4\ui\FormField\Line(['icon'=>'search', 'fluid'=>true, 'placeholder'=>'fluid']));

demos/form.php

@@ -17,7 +17,7 @@
         'ui'=> 'ignored warning message',
     ]));
 
-    $layout->add(new \atk4\ui\H2('DefaultForm'));
+    $layout->add(new \atk4\ui\Header(['DefaultForm', 'size'=>2]));
 
     $a = [];
     $m_register = new \atk4\data\Model(new \atk4\data\Persistence_Array($a));
@@ -39,7 +39,7 @@
         }
     });
 
-    $layout->add(new \atk4\ui\H2('Another Form'));
+    $layout->add(new \atk4\ui\Header(['Another Form', 'size'=>2]));
 
     $f = $layout->add(new \atk4\ui\Form(['segment']));
     $f->setModel(new \atk4\data\Model());

demos/form2.php

@@ -26,7 +26,7 @@ public function init()
     'ui'=> 'ignored warning message',
 ]));
 
-$layout->add(new \atk4\ui\H2('Fully-interractive, responsive and slick-looking form in 20 lines of PHP code'));
+$layout->add(new \atk4\ui\Header(['Fully-interractive, responsive and slick-looking form in 20 lines of PHP code', 'size'=>2]));
 
 $form = $layout->add(new \atk4\ui\Form(['segment']));
 

docs/button.rst

@@ -0,0 +1,76 @@
+
+.. _button:
+
+======
+Button
+======
+
+.. php:namespace:: atk4\ui\Button
+
+.. php:class:: Button
+
+Implements a clickable button::
+
+    $button = $view->add(new \atk4\ui\Button('Click me'));
+
+Button will typically inherit all same properties of a :php:class:`View`. Functionality
+of View alone yields in many various usage patterns such as::
+
+    $b1 = new Button(['Load', 'primary']);
+
+    $button = new Button('Hello there');
+    $button->addClass('size big');
+
+Icons
+-----
+
+.. php:attr:: icon
+
+Includes icon on the button::
+
+    $bar = new Buttons('vertical');  // NOTE: class called Buttons, not Button
+    $bar->add(new Button(['Play', 'icon'=>'play']));
+    $bar->add(new Button(['Pause', 'icon'=>'pause']));
+    $bar->add(new Button(['Shuffle', 'icon'=>'shuffle']));
+
+Icon can also be specified as object::
+
+    $b1 = new Button(['Forks', 'blue', 'icon'=>new Icon('fork'));
+
+.. php:attr:: iconRight
+
+Setting this will display icon on the right of the button::
+
+
+    $b1 = new Button(['Next', 'iconRight'=>'right arrow']);
+
+Apart from being on the right, same rules apply as :php:attr:`Button::$icon`. Both
+icons cannot be specified simultaniously.
+
+Linking
+-------
+
+.. php:method:: link
+
+Will link button to a destination URL or page::
+
+    $button->link('http://google.com/');
+    // or
+    $button->link(['details', 'id'=>123]);
+
+If array is used, it's routed to :php:meth:`App::url`
+
+For other JavaScript actions you can use :ref:`js`::
+
+    $button->js('click', new jsExpression('document.location.reload()'));
+
+Complex Buttons
+---------------
+
+Knowledge of Semantic UI button (http://semantic-ui.com/elements/button.html) can help you
+in creating more complex buttons::
+
+    $forks = new Button(['labeled'=> true]); // Button, not Buttons!
+    $forks->add(new Button(['Forks', 'blue']))->add(new Icon('fork'));
+    $forks->add(new Label(['1,048', 'basic blue left pointing']));
+    $layout->add($forks);

docs/form.rst

@@ -111,7 +111,7 @@ a model. I will also add one extra checkbox where user can accept terms and cond
     $form->setModel(new Person($db));
 
     $form->addField(
-        'terms', 
+        'terms',
         ['type'=>'boolean', 'ui'=>['caption'=>'Accept Terms and Conditions']]
     );
 
@@ -120,7 +120,7 @@ Form Submit Handling
 
 .. php:method:: onSubmit($callback)
 
-    Specify a PHP call-back that will be executed on successful form submission. 
+    Specify a PHP call-back that will be executed on successful form submission.
 
 .. php:method:: error($field, $message)
 
@@ -268,4 +268,4 @@ form inside a segment (outline) and will make fields appear smaller::
 
     $f = new \atk4\ui\Form(['small segment']));
 
-For further styling see documentation on :php:class:`View`. 
+For further styling see documentation on :php:class:`View`.

docs/index.rst

@@ -14,6 +14,7 @@ Contents:
     view
     js
     callbacks
+    button
     field
     form
     grid
@@ -22,7 +23,7 @@ Contents:
 
 
 ..
-   
+
     base-components
     core
     layouts

docs/js.rst

@@ -1,10 +1,11 @@
 
 
 
-.. _js:
 
 .. php:namespace: atk4\\ui
 
+.. _js:
+
 ==================
 JavaScript Mapping
 ==================