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.091 seconds

Awards for the best Joomla app. This product is gonna win an award for this amazing job. Cook Self Service is the the best application from all over the Joomla universe ! It brings Joomla to a professional level really advanced for developers. It is a real fun to develop with it. The ACL part and security checks implementation are just... so much hours saved. I can now concentrate myself more on the design part and the creative works. Thank you so much. Guys I offer you all my congratulation ! Keep up the works because Joomla is needing it to increase the quality of extensions availables on the JED. I also learned a lot because I can see how to code at the proper place and I found all my answers reading the forum.
lack_hanson (JED)
          

Get Started