Welcome, Guest
Username: Password: Remember me

TOPIC: Bootstrap Toolbar

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

  • VeCrea
  • VeCrea's Avatar
  • Offline
  • Platinum Member
  • Absolute JCook fan
  • Posts: 473
  • Thank you received: 100
  • Karma: 30
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.
The administrator has disabled public write access.

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

  • VeCrea
  • VeCrea's Avatar
  • Offline
  • Platinum Member
  • Absolute JCook fan
  • Posts: 473
  • Thank you received: 100
  • Karma: 30
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

Last Edit: 16 Aug 2013 23:38 by VeCrea.
The administrator has disabled public write access.
The following user(s) said Thank You: admin

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

  • Tomaselli
  • Tomaselli's Avatar
  • Offline
  • Elite Member
  • Posts: 293
  • Thank you received: 87
  • Karma: 46
I totally agree. I just did that last week on a project.

+1
The administrator has disabled public write access.

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

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Chef
  • Posts: 3711
  • Thank you received: 984
  • Karma: 140
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
The administrator has disabled public write access.

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

  • VeCrea
  • VeCrea's Avatar
  • Offline
  • Platinum Member
  • Absolute JCook fan
  • Posts: 473
  • Thank you received: 100
  • Karma: 30
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
The administrator has disabled public write access.

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

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Chef
  • Posts: 3711
  • Thank you received: 984
  • Karma: 140
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
Last Edit: 18 Aug 2013 18:30 by admin.
The administrator has disabled public write access.
Time to create page: 0.108 seconds

Get Started