[makro]

Hi Chris,
could I suggest to add a bool property to TbAlert class that controls the rendering of close button [x] of an alert box?

[Chris83]

Hey gdesmedt1,

The quickest fix is to add 'htmlOptions'=>array('class'=>'slide') to the widget config, and it should fix the issue. In the upcoming version you won't need to do this anymore.

gdesmedt1, on 31 July 2012 - 05:44 PM, said:

Hi Guys,

I've implemented bootstrap.widgets.BootCarousel ... but my images do not slide in... they just change instantly.

How do I get the slide, or a fade to work?

Below is my code in the view file...

<hr class="soften">
<section id="Carousel">
	<?php $this->widget('bootstrap.widgets.BootCarousel', array(
		'items'=>array(
			array('image'=>Yii::app()->request->getBaseUrl(true).'/images/sa_flag.gif', 'label'=>'South African Flag', 'caption'=>'Childs representation of our South African flag.'),
			array('image'=>Yii::app()->request->getBaseUrl(true).'/images/lisakhani_car.gif', 'label'=>'Lisakhani (5)', 'caption'=>'The tracktor plows through the field.'),
			array('image'=>Yii::app()->request->getBaseUrl(true).'/images/sine_boat.gif', 'label'=>'Sine (6)', 'caption'=>'What you often sea berthing at the Buffalo River harbour.'),
		),
		'events'=>array(
			'slide'=>"js:function() { console.log('Carousel slide.'); }",
			'slid'=>"js:function() { console.log('Carousel slid.'); }",
		),
	)); ?>
</section>

Regards,

[Chris83]

That sounds like a good idea. Any particular reason why you want this?

Edit: I accidentally ended up rewriting the whole alert widget because it didn't really support any configuration at all. Now it's great.

makro, on 01 August 2012 - 02:06 AM, said:

Hi Chris,
could I suggest to add a bool property to TbAlert class that controls the rendering of close button [x] of an alert box?

[makro]

Chris83, on 01 August 2012 - 02:25 AM, said:

That sounds like a good idea. Any particular reason why you want this?

Sure!
stupid example: user clicks on a link and you want to show "please login" in an alert.

on that page you can user Yii::app()->user->setFlash and then TbAlert with an hide class to initially hide the alert box, instead "rebuild" an alert using divs with alert-* classes

Then you can show alert by javascript. If you click (x) to close alert, it will be destroyed forever. In some cases it could be useful that an alert stays on page.

[digitalwingx]

@Chris83

First thanks for the great work I just used the 0.9.x version on a recent project and it ended up wonderfully.

3 questions:

- Do you plan to integrate widgets with TbActiveForm? for example to be able to use TbButtonGroup as TbActiveForm's radioButtonRow?
- Do you plan to integrate this extension to the popular Giix?
- Is there any way to extend bootstrap's Gii template, so I can make modification of the template to suit my need without changing the extension's source code?

[gdesmedt1]

Me again

I have finally uploaded the complete redesign of my moms site using yii, user, rights, this awesome TBootstrap and blog... and all working well, excepting 2 issues:

1.) I viewed the site on my mobile phone (Samsung galaxy S1) and all worked well, excepting that I pressed on the menu button and nothing happened, I could not get the menu to slide down... therefore one cannot go anywhere but the home page! (is this a phone issue, or a bootstrap responsive theme issue? (i did have javascript enabled on my phones browser)

2.) When screen in tablet size or smaller... I can't seem to find the css code that i need to change in order to change the menu colours, and it's not looking good!

And here's the site that's just been uploaded Learn and Play Junior Academy (my mom's creche in East London in South Africa)

@chris, thanks for that slide help... it's working great, as you'll see in above site

[lightglitch]

Hi chris, nice work but on BootGridView and BootListView

                $afterAjaxUpdate = "js:function() {
                        jQuery('.popover').remove();
                        jQuery('{$popover}').popover();
                        jQuery('.tooltip').remove();
                        jQuery('{$tooltip}').tooltip();
                }";

                if (isset($this->afterAjaxUpdate))
                        $this->afterAjaxUpdate .= ' '.$afterAjaxUpdate;
                else
                        $this->afterAjaxUpdate = $afterAjaxUpdate;

this code is wrong because I can't add any javascript in the afterAjaxUpdate property.
Here is a fix:

		if (isset($this->afterAjaxUpdate) && strpos($this->afterAjaxUpdate, 'js:') !== false) {
			$patterns = array('/^js:\s*function\s*\(\s*\w*\s*,*\s*\w*\s*\)\s*\{/', '/\}\s*;*\s*$/');
			$this->afterAjaxUpdate = preg_replace($patterns, array('',''), $this->afterAjaxUpdate);
		}
		$afterAjaxUpdate = "js:function() {
			jQuery('.popover').remove();
			jQuery('{$popover}').popover();
			jQuery('.tooltip').remove();
			jQuery('{$tooltip}').tooltip();
			{$this->afterAjaxUpdate}
		}";

		$this->afterAjaxUpdate = $afterAjaxUpdate;

And you can't use CJavaScriptExpression that was added in the latest version.

[Chris83]

Hey lightglitch,

The afterAjaxUpdate issue in grid view has already been fixed a while ago.

lightglitch, on 01 August 2012 - 08:30 AM, said:

Hi chris, nice work but on BootGridView and BootListView

                $afterAjaxUpdate = "js:function() {
                        jQuery('.popover').remove();
                        jQuery('{$popover}').popover();
                        jQuery('.tooltip').remove();
                        jQuery('{$tooltip}').tooltip();
                }";

                if (isset($this->afterAjaxUpdate))
                        $this->afterAjaxUpdate .= ' '.$afterAjaxUpdate;
                else
                        $this->afterAjaxUpdate = $afterAjaxUpdate;

this code is wrong because I can't add any javascript in the afterAjaxUpdate property.
Here is a fix:

		if (isset($this->afterAjaxUpdate) && strpos($this->afterAjaxUpdate, 'js:') !== false) {
			$patterns = array('/^js:\s*function\s*\(\s*\w*\s*,*\s*\w*\s*\)\s*\{/', '/\}\s*;*\s*$/');
			$this->afterAjaxUpdate = preg_replace($patterns, array('',''), $this->afterAjaxUpdate);
		}
		$afterAjaxUpdate = "js:function() {
			jQuery('.popover').remove();
			jQuery('{$popover}').popover();
			jQuery('.tooltip').remove();
			jQuery('{$tooltip}').tooltip();
			{$this->afterAjaxUpdate}
		}";

		$this->afterAjaxUpdate = $afterAjaxUpdate;

And you can't use CJavaScriptExpression that was added in the latest version.

[lightglitch]

Ok, I was looking a old version but even in the new one if I use it like:

$this->widget('ext.bootstrap.widgets.TbGridView', array(
	'id' => 'user-grid',
	'type' => 'striped',
	'ajaxUpdate' => 'user-grid,alerts-box',
	'dataProvider' => $model->search(),
	'filter' => $model,
	'afterAjaxUpdate' =>'js:function (id, data) {setTimeout(function () { $(".alert.alert-success [data-dismiss=\"alert\"]").trigger("click");}, 1500);};',
	'columns' => $columns
));

it doesn't add the tooltips and popovers refresh. My patch does.

Here is optimization to refresh only the grid ones:

                if (isset($this->afterAjaxUpdate) && strpos($this->afterAjaxUpdate, 'js:') !== false) {
                        $patterns = array('/^js:\s*function\s*\(\s*\w*\s*,*\s*\w*\s*\)\s*\{/', '/\}\s*;*\s*$/');
                        $this->afterAjaxUpdate = preg_replace($patterns, array('',''), $this->afterAjaxUpdate);
                }
                $afterAjaxUpdate = "js:function(id, data) {
                        jQuery('#'+ id +'.popover').remove();
                        jQuery('#'+ id +'{$popover}').popover();
                        jQuery('#'+ id +'.tooltip').remove();
                        jQuery('#'+ id +'{$tooltip}').tooltip();
                        {$this->afterAjaxUpdate}
                }";

                $this->afterAjaxUpdate = $afterAjaxUpdate;

[Chris83]

I understand what you're trying to achieve but I wouldn't go this far. I'd rather keep the logic simple and leave rebinding of plugins up to the developer if they override the afterAjaxUpdate property. Simplicity and usability (for developers) are two key focuses in this extension in order to make it easy for anyone to use.

lightglitch, on 01 August 2012 - 12:29 PM, said:

Ok, I was looking a old version but even in the new one if I use it like:

$this->widget('ext.bootstrap.widgets.TbGridView', array(
	'id' => 'user-grid',
	'type' => 'striped',
	'ajaxUpdate' => 'user-grid,alerts-box',
	'dataProvider' => $model->search(),
	'filter' => $model,
	'afterAjaxUpdate' =>'js:function (id, data) {setTimeout(function () { $(".alert.alert-success [data-dismiss=\"alert\"]").trigger("click");}, 1500);};',
	'columns' => $columns
));

it doesn't add the tooltips and popovers refresh. My patch does.

Here is optimization to refresh only the grid ones:

                if (isset($this->afterAjaxUpdate) && strpos($this->afterAjaxUpdate, 'js:') !== false) {
                        $patterns = array('/^js:\s*function\s*\(\s*\w*\s*,*\s*\w*\s*\)\s*\{/', '/\}\s*;*\s*$/');
                        $this->afterAjaxUpdate = preg_replace($patterns, array('',''), $this->afterAjaxUpdate);
                }
                $afterAjaxUpdate = "js:function(id, data) {
                        jQuery('#'+ id +'.popover').remove();
                        jQuery('#'+ id +'{$popover}').popover();
                        jQuery('#'+ id +'.tooltip').remove();
                        jQuery('#'+ id +'{$tooltip}').tooltip();
                        {$this->afterAjaxUpdate}
                }";

                $this->afterAjaxUpdate = $afterAjaxUpdate;

[Chris83]

Hey digitalwingx,

You're welcome and as I've said many times I have really enjoyed working on this project.

To answer your questions quickly:

1. Maybe (depends on how useful it would - provide me with some use-cases and I'll consider it)
2. Probably not (if someone wants to do this feel free to do so)
3. It should possible to import the class and extend it like any other class (remember to add your generator to gii's generatorPaths or it won't find it)

digitalwingx, on 01 August 2012 - 06:40 AM, said:

@Chris83

First thanks for the great work I just used the 0.9.x version on a recent project and it ended up wonderfully.

3 questions:

- Do you plan to integrate widgets with TbActiveForm? for example to be able to use TbButtonGroup as TbActiveForm's radioButtonRow?
- Do you plan to integrate this extension to the popular Giix?
- Is there any way to extend bootstrap's Gii template, so I can make modification of the template to suit my need without changing the extension's source code?

[digitalwingx]

Chris83, on 01 August 2012 - 02:13 PM, said:

Hey digitalwingx,

You're welcome and as I've said many times I have really enjoyed working on this project.

To answer your questions quickly:

1. Maybe (depends on how useful it would - provide me with some use-cases and I'll consider it)
2. Probably not (if someone wants to do this feel free to do so)
3. It should possible to import the class and extend it like any other class (remember to add your generator to gii's generatorPaths or it won't find it)

Ok here is an example, see in the first screenshot the form is plain and simple tbform result.
If you look at the 2nd screenshot, the dropdown list and radio button are replaced with widgets (BootButtonGroup in this case).

They function the same but it definitely brings in the bootstrap's nice look more to the generated form.

More integration could be done for example use modal instead of plain alert on the "Delete" icon click event of admin pages.

Attached File(s)

•  tbform.png (41.56K)
  Number of downloads: 47
•  tbwidget.png (40.52K)
  Number of downloads: 47

[Don Felipe]

digitalwingx, on 01 August 2012 - 09:31 PM, said:

- Do you plan to integrate widgets with TbActiveForm? for example to be able to use TbButtonGroup as TbActiveForm's radioButtonRow?

Chris83, on 01 August 2012 - 02:13 PM, said:

1. Maybe (depends on how useful it would - provide me with some use-cases and I'll consider it)

Everybody knows and is used to the look of traditional radio buttons and check boxes. It's not just a matter of design but of user-friendliness. Who's the target audience? Do they need fancy or what they are used to?

Besides, the distinction between checked and unchecked radios is much higher than the difference between the 2 states (up/down) of a ButtonGroup element.

[Chris83]

I must say that I somewhat agree with Don here. I would say that this is a "nice to have" feature (maybe - need to think a bit more about this). However, this got me thinking about using button groups in e.g. grids for actions. I think it could be a nice feature.

Don Felipe, on 01 August 2012 - 11:54 PM, said:

Everybody knows and is used to the look of traditional radio buttons and check boxes. It's not just a matter of design but of user-friendliness. Who's the target audience? Do they need fancy or what they are used to?

Besides, the distinction between checked and unchecked radios is much higher than the difference between the 2 states (up/down) of a ButtonGroup element.

[Chris83]

@Makro Did you try out the new alert widget in the latest alpha release. If so, please let me know if you like it or not.

[digitalwingx]

Don Felipe, on 01 August 2012 - 11:54 PM, said:

Everybody knows and is used to the look of traditional radio buttons and check boxes. It's not just a matter of design but of user-friendliness. Who's the target audience? Do they need fancy or what they are used to?

Besides, the distinction between checked and unchecked radios is much higher than the difference between the 2 states (up/down) of a ButtonGroup element.

I think whether the traditional radio button is more user-friendly vesus buttongroup is arguable: buttongroup brings more colours to the form elements which helps the elements to stand out more. Look at Button Dropdowns for example, I could trigger colour change based on option selected (e.g. look at my screenshot, a (newly) Created job status can be blue, if it's "Closed" the colour can be green). Some people responde much better to colour than reading the text. And personally I also think the looks fit better on mobile phone.

To me it seems obvious the Twitter's bootstrap provide very good user-friendliness but it doesn't stop there, it also brings the "fanciness" to be visually pleasing. Whether it fits my target audience, should be developers and their client's decision, but the option is there in Twitter's bootstrap.

And like Chris83 mentioned using buttongroup for action in grids. My point is there is a lot more potential in further integrate bootstrap's elements to the interface.

[Don Felipe]

Just wanted to provide food for thought.

It clearly is a subjective matter. Especially when it comes to changing basic elements and the use of colors. Of course, I wouldn't mind having the additional option to use ButtonGroups in TbActiveForm and TbGridView. Maybe one day it'll come in handy.

[allegramente]

Hi! A newbie here... and got stuck already...



I would like to ask if I'd be able to put a sort of login-form as one of navbar's dropdown items.
In the example/documentation, there is a search form (string-type item). I've tried 'similar' trick, but it wasn't even rendered in the html output.

$this->widget('bootstrap.widgets.TbNavbar', array(
    'type'=>null, 
    'brand'=>'HUBris',
    'brandUrl'=>'#',
    'collapse'=>true, // requires bootstrap-responsive.css
    'items'=>array(
        array(
            'class'=>'bootstrap.widgets.TbMenu',
            'items'=>array(
                array('label'=>'Home', 'url'=>'#', 'active'=>true),
                array('label'=>'Link', 'url'=>'#'),
                array('label'=>'Dropdown', 'url'=>'#', 'items'=>array(
                    array('label'=>'Action', 'url'=>'#'),
                    array('label'=>'Another action', 'url'=>'#'),
                    array('label'=>'Something else here', 'url'=>'#'),
                    '---',
                    array('label'=>'NAV HEADER'),

                    array('label'=>'Separated link', 'url'=>'#'),
                    array('label'=>'One more separated link', 'url'=>'#'),
                )),
            ),
        ),
        '<form class="navbar-search pull-left" action=""><input type="text" class="search-query span2" placeholder="Search"></form>',
           
        array(
            'class'=>'bootstrap.widgets.TbMenu',
            'htmlOptions'=>array('class'=>'pull-right'),
            'items'=>array(

                array('label'=>'Link', 'url'=>'#'),
                '---',

              array('label' => 'Hi, '.Yii::app()->user->name, 'url'=>'#',
                   'items' => array(
                       array('label'=> 'Logout',
                       'url' => array('/site/logout'), 
                       'visible'=>!Yii::app()->user->isGuest),
                       
                   )
                   ),
               
                array('label'=>'Login', 'url'=>'#', 
                    'items'=>array(
              
                   /* LOGIN FORM */   
                      '<form><input type="text" placeholder="user id" id="userid"/><input type="password" placeholder="password" name="userpassword"/></form>'


                     ), 'visible' => Yii::app()->user->isGuest),
                
                

            ),
        ),
    ),
)); 

How can I attach a login form in dropdown navbar link?

Thanks.

[yiistudent]

Hello Newbie Here..

I try Use new release of these extention,

and I got some problem whit this code

echo $form->textFieldRow($model, 'textField', array('class'=>'span3')); 

that code give me error message like this

Quote

LoginForm.textField" is not defined

What I missing whit this error message??

[yiistudent]

digitalwingx, on 01 August 2012 - 09:31 PM, said:

Ok here is an example, see in the first screenshot the form is plain and simple tbform result.
If you look at the 2nd screenshot, the dropdown list and radio button are replaced with widgets (BootButtonGroup in this case).

They function the same but it definitely brings in the bootstrap's nice look more to the generated form.

More integration could be done for example use modal instead of plain alert on the "Delete" icon click event of admin pages.

can I see ur code of that example?