Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1

TOPIC:

Bootstrap Toolbar.css in dom/assets/toolbar/css/ 16 Aug 2013 22:17 #10798

  • VeCrea
  • VeCrea's Avatar Topic Author
  • Offline
  • Platinum Member
  • Platinum Member
  • Absolute JCook fan
  • Posts: 473
  • Thank you received: 100
Bootstrap being included in Joomla, I think this toolbar.css could be removed and the toolbar button should be styled with bootstrap classes. Bootstrap 3 even allows to use other icons than those of Glyphicons. What do you think of this ? It sure would be easier for templating and integrating the component in an existing site.

Please Log in or Create an account to join the conversation.

Bootstrap Toolbar.css in dom/assets/toolbar/css/ 16 Aug 2013 23:34 #10799

  • VeCrea
  • VeCrea's Avatar Topic Author
  • Offline
  • Platinum Member
  • Platinum Member
  • Absolute JCook fan
  • Posts: 473
  • Thank you received: 100
my proposition :

in dom/html/link/button/toolbar.php, the parseVars($vars) function is modified like this :
	protected function parseVars($vars)
	{
		$alignStyle = null;
				
		switch($this->align)
		{
			case 'left':
			case 'right':
				$alignStyle = "float: " . $this->align . ";";
				break;

			case 'center':
				$alignStyle = "display: inline-block;";
				break;
		}

		$this->jsCommand();
		
		$btn_type="btn";
		$glyph="";
		switch ($this->name){
		case 'save' : 
                     $gliph = "<i class='icon-ok'></i>"; 
                     $btn_type="btn btn-success";
                     break;
		case 'save-new' : 
                     $gliph = "<i class='icon-plus'></i>";
                      $btn_type="btn btn-success";
                     break;
		case 'cancel' : 
                     $gliph = "<i class='icon-remove'></i>";
                      $btn_type="btn btn-danger";
                     break;
		}
		
		return parent::parseVars(array_merge(array(
			'LI_STYLE' 		=> "list-style:none; " . $alignStyle,
			'LI_ID' 		=> 'toolbar-' . $this->task,
			'BUTTON_STYLE' 	=> 'cursor:pointer',
			'COMMAND' 		=> ($this->link_js?htmlspecialchars($this->link_js):""),
			'ICON_CLASS' 	=>  $gliph,
			'BTN_TYPE'		=> $btn_type,
			'TEXT' 			=> $this->JText($this->text),
			'CLASS'		=> $this->buildDomClass(),
		), $vars));
	}
the 'ICON_CLASS' is modified and now takes the value of the new $glyph var under jsCommand();
the 'BTN_TYPE' is added to add a class to the button that corresponds to bootstrap classes

More cases are to be set in the switch

Then in in dom/html/link/button/toolbar/standard.php, the build() function is modified like this :
	function build()
	{
		$this->addClass('button');

		$html =		'<li class="<%BTN_TYPE%>" id="<%LI_ID%>" onclick="<%COMMAND%>"></i>'
				.	$gliph.LN
				.	'<%ICON_CLASS%> <%TEXT%>'.LN
				.	'</li>' .LN;
		return $html;
	}

Those were my 2 cents of the day

The following user(s) said Thank You: admin

Please Log in or Create an account to join the conversation.

Last edit: by VeCrea.

Bootstrap Toolbar.css in dom/assets/toolbar/css/ 17 Aug 2013 14:08 #10801

I totally agree. I just did that last week on a project.

+1

Please Log in or Create an account to join the conversation.

Bootstrap Toolbar.css in dom/assets/toolbar/css/ 18 Aug 2013 13:37 #10804

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Administrator
  • Chef
  • Posts: 3711
  • Thank you received: 986
Accepted.

It was transmission of thoughs because this week I was particulary bored of the Cook (front) toolbar.
It is not ugly so we can keep it for legacy (those who like and uses it), but I will integrate this new toolbar soon.
I do not like the colors you propose so let's see.. (maybe grey and green for the add button, same as Joomla back-end)

Toolbars in Joomla are not handled very nice. I do not like the way we are not able to add custom parameters for the tasks.
For instance, the color of the button cannot be prepared in the view file. This is stupid coding.

Joomla is not perfect, but I cannot critisize too much because not participant of the core for the moment. Anyways, a huge thank you to the core community.
Coding is now a piece of cake

Please Log in or Create an account to join the conversation.

Bootstrap Toolbar.css in dom/assets/toolbar/css/ 18 Aug 2013 18:05 #10805

  • VeCrea
  • VeCrea's Avatar Topic Author
  • Offline
  • Platinum Member
  • Platinum Member
  • Absolute JCook fan
  • Posts: 473
  • Thank you received: 100
I do not propose any colors : those are the colors of bootstrap, but the beauty of it is everyone can choose its color in the css.

The idea beyond all this is i find myself editing many files to get what i want, and there are far to many css files, and this one was really not usefull

Please Log in or Create an account to join the conversation.

Bootstrap Toolbar.css in dom/assets/toolbar/css/ 18 Aug 2013 18:30 #10806

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Administrator
  • Chef
  • Posts: 3711
  • Thank you received: 986
Upgraded.

Now if you want to use the previous version of toolbar, you need to set it in JDom, or to send aditional parameters:
<?php echo JDom::_('html.toolbar', array(
	"bar" => JToolBar::getInstance('toolbar'),
	'align' => 'center',

//To use legacy toolbar
	'ui' => null,

//To join the buttons together (bootstrap only)
	'domClass' => 'btn-group',

// To display ONLY icons
	'display' => 'icon'

));?>
Coding is now a piece of cake

Please Log in or Create an account to join the conversation.

Last edit: by admin.
  • Page:
  • 1
Time to create page: 0.060 seconds

Hi All just wanted to add one more "thank you" voice to all those who discovered the value of this amazing application. The website I was working on went to production few days ago and I do not want to even try to imagine what would it take to build it without j-cook. So - endless thanks keep it running and evolving I believe it deserves to be the core tool for any joomla application! Thanks!
Michael (bmk028 - Forum)  

Get Started