Yii Framework Forum: [EXTENSION] Bootstrap - Yii Framework Forum

Jump to content

  • (45 Pages)
  • +
  • « First
  • 28
  • 29
  • 30
  • 31
  • 32
  • Last »
  • You cannot start a new topic
  • You cannot reply to this topic

[EXTENSION] Bootstrap Bringing together Yii and Twitter Bootstrap Rate Topic: ***** 23 Votes

#581 User is offline   makro 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 71
  • Joined: 05-November 09
  • Location:Novara, IT

Posted 01 August 2012 - 02:06 AM

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?
0

#582 User is offline   Chris83 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 440
  • Joined: 27-February 10
  • Location:Helsinki, Finland

Posted 01 August 2012 - 02:24 AM

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.

View Postgdesmedt1, 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,

Best regards,
Chris

My contribution to the Yii community:
Account | Yiistrap | Auth | Bootstrap | NordCms | Rights | LESS | SEO | Img

Follow me:
Twitter | GitHub | Bitbucket
0

#583 User is offline   Chris83 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 440
  • Joined: 27-February 10
  • Location:Helsinki, Finland

Posted 01 August 2012 - 02:25 AM

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. :)

View Postmakro, 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?

Best regards,
Chris

My contribution to the Yii community:
Account | Yiistrap | Auth | Bootstrap | NordCms | Rights | LESS | SEO | Img

Follow me:
Twitter | GitHub | Bitbucket
0

#584 User is offline   makro 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 71
  • Joined: 05-November 09
  • Location:Novara, IT

Posted 01 August 2012 - 03:16 AM

View PostChris83, 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.
0

#585 User is offline   digitalwingx 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 4
  • Joined: 29-July 12

Posted 01 August 2012 - 06:40 AM

@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?
0

#586 User is offline   gdesmedt1 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 20
  • Joined: 05-January 12
  • Location:South Africa

Posted 01 August 2012 - 07:50 AM

Me again Posted Image

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 :)
Joojooberry - Simple, Smart, Webdesign
0

#587 User is offline   lightglitch 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 33
  • Joined: 05-January 10

Posted 01 August 2012 - 08:30 AM

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.
0

#588 User is offline   Chris83 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 440
  • Joined: 27-February 10
  • Location:Helsinki, Finland

Posted 01 August 2012 - 11:31 AM

Hey lightglitch,

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

View Postlightglitch, 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.

Best regards,
Chris

My contribution to the Yii community:
Account | Yiistrap | Auth | Bootstrap | NordCms | Rights | LESS | SEO | Img

Follow me:
Twitter | GitHub | Bitbucket
0

#589 User is offline   lightglitch 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 33
  • Joined: 05-January 10

Posted 01 August 2012 - 12:29 PM

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;

0

#590 User is offline   Chris83 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 440
  • Joined: 27-February 10
  • Location:Helsinki, Finland

Posted 01 August 2012 - 02:04 PM

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.

View Postlightglitch, 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;


Best regards,
Chris

My contribution to the Yii community:
Account | Yiistrap | Auth | Bootstrap | NordCms | Rights | LESS | SEO | Img

Follow me:
Twitter | GitHub | Bitbucket
0

#591 User is offline   Chris83 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 440
  • Joined: 27-February 10
  • Location:Helsinki, Finland

Posted 01 August 2012 - 02:13 PM

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)

View Postdigitalwingx, 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?

Best regards,
Chris

My contribution to the Yii community:
Account | Yiistrap | Auth | Bootstrap | NordCms | Rights | LESS | SEO | Img

Follow me:
Twitter | GitHub | Bitbucket
0

#592 User is offline   digitalwingx 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 4
  • Joined: 29-July 12

Posted 01 August 2012 - 09:31 PM

View PostChris83, 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)


0

#593 User is offline   Don Felipe 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 113
  • Joined: 02-January 11
  • Location:Saigon, Vietnam

Posted 01 August 2012 - 11:54 PM

View Postdigitalwingx, 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?


View PostChris83, 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.
0

#594 User is offline   Chris83 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 440
  • Joined: 27-February 10
  • Location:Helsinki, Finland

Posted 02 August 2012 - 01:10 AM

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.

View PostDon 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.

Best regards,
Chris

My contribution to the Yii community:
Account | Yiistrap | Auth | Bootstrap | NordCms | Rights | LESS | SEO | Img

Follow me:
Twitter | GitHub | Bitbucket
0

#595 User is offline   Chris83 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 440
  • Joined: 27-February 10
  • Location:Helsinki, Finland

Posted 02 August 2012 - 01:12 AM

@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.
Best regards,
Chris

My contribution to the Yii community:
Account | Yiistrap | Auth | Bootstrap | NordCms | Rights | LESS | SEO | Img

Follow me:
Twitter | GitHub | Bitbucket
0

#596 User is offline   digitalwingx 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 4
  • Joined: 29-July 12

Posted 02 August 2012 - 01:54 AM

View PostDon 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.
0

#597 User is offline   Don Felipe 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 113
  • Joined: 02-January 11
  • Location:Saigon, Vietnam

Posted 02 August 2012 - 05:29 AM

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.
0

#598 User is offline   allegramente 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 1
  • Joined: 02-August 12

Posted 02 August 2012 - 08:32 AM

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.
0

#599 User is offline   yiistudent 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 15
  • Joined: 15-November 10

Posted 02 August 2012 - 01:02 PM

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??
0

#600 User is offline   yiistudent 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 15
  • Joined: 15-November 10

Posted 02 August 2012 - 01:08 PM

View Postdigitalwingx, 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?
0

Share this topic:


  • (45 Pages)
  • +
  • « First
  • 28
  • 29
  • 30
  • 31
  • 32
  • Last »
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users