Commits

Christoffer Niska committed c237377

added BootBadge and BootLabel widgets

Comments (0)

Files changed (6)

demo/css/styles.css

 .clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";}
 .clearfix:after{clear:both;}
 
+.hide-text{overflow:hidden;text-indent:100%;white-space:nowrap;}
 
 
-
-
-
-
+.input-block-level{display:block;width:100%;min-height:28px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}
 
 
 .php-hl-default{color:Black;}
 
 .navbar .add-this{margin:6px 0 6px 10px;padding:6px 0;}
 
-.subnav{border:1px solid #E5E5E5;font-size:12px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;width:100%;height:36px;background-color:#f2f2f2;background-image:-moz-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-ms-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#eeeeee));background-image:-webkit-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-o-linear-gradient(top, #f5f5f5, #eeeeee);background-image:linear-gradient(top, #f5f5f5, #eeeeee);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#eeeeee', GradientType=0);}.subnav.subnav-fixed{border-color:#D5D5D5;border-width:1px 0 0;bottom:0;left:0;position:fixed;right:0;z-index:1030;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;}
-.subnav .nav{margin:0 auto;max-width:1170px;}.subnav .nav >li>a{margin:0;padding:11px;border-left:1px solid whiteSmoke;border-right:1px solid #E5E5E5;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
-.subnav .nav >li:first-child>a{border-left:0;}
-.subnav .nav >li:last-child>a{border-right:0;}
-.subnav .nav >.active>a,.subnav .nav .action>a:hover{background-color:#E9E9E9;border-right-color:#DDD;color:#777;-webkit-box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.05);box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.05);}
-
+.subnav{font-size:12px;padding:9px 0;position:fixed;right:20px;top:60px;width:160px;z-index:1030;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.subnav .label{font-size:0.8em;line-height:16px;vertical-align:top;}
 
 footer .powered{color:#888;margin-bottom:20px;}
 footer .copy{color:#666;}
 
 #bootNavbar .navbar-inner>.container{width:auto;}
 #bootMenu .menuCol{min-height:140px;}
-#bootTabbable .tabbable{margin-bottom:20px;}#bootTabbable .tabbable.tabbable-placed{width:340px;}
+#bootTabbable .tabbable{margin-bottom:20px;}#bootTabbable .tabbable .tab-content{width:auto;}
+#bootTabbable .tabbable.tabbable-placed{width:340px;}
 
 #bootThumbnails .list-view{padding-top:30px;}
 #bootActiveForm .form-vertical .control-group>label{font-weight:bold;}

demo/less/styles.less

 }
 
 .subnav {
-	border: 1px solid #E5E5E5;
 	font-size: 12px;
+	padding: 9px 0;
+	position: fixed;
+	right: 20px;
+	top: 60px;
+	width: 160px;
+	z-index: 1030;
 	.border-radius(4px);
-	.size(36px, 100%);
-	#gradient > .vertical(#F5F5F5, #EEE);
 
-	&.subnav-fixed {
-		border-color: #D5D5D5;
-		border-width: 1px 0 0;
-		bottom: 0;
-		left: 0;
-		position: fixed;
-		right: 0;
-		z-index: 1030;
-		.border-radius(0);
-		.box-shadow(inset 0 1px 0 #FFF, 0 1px 5px rgba(0, 0, 0, .1));
-	}
-
-	.nav {
-        margin: 0 auto;
-        max-width: 1170px;
-
-		& > li > a {
-			margin: 0;
-			padding: 11px;
-			border-left: 1px solid whiteSmoke;
-			border-right: 1px solid #E5E5E5;
-			.border-radius(0);
-		}
-
-		& > li:first-child > a {
-			border-left: 0;
-		}
-
-		& > li:last-child > a {
-			border-right: 0;
-		}
-
-		& > .active >a, & .action > a:hover {
-			background-color: #E9E9E9;
-			border-right-color: #DDD;
-			color: #777;
-			.box-shadow(inset 0 3px 5px rgba(0, 0, 0, .05));
-		}
+	.label {
+	    font-size: 0.8em;
+	    line-height: 16px;
+		vertical-align: top;
 	}
 }
 
 #bootTabbable .tabbable {
 	margin-bottom: 20px;
 
+	.tab-content {
+		width: auto;
+	}
+
 	&.tabbable-placed {
 		width: 340px;
 	}

demo/protected/views/site/index.php

 )); ?>
 ~~~"); ?>
 
+	<div class="alert alert-block alert-warning">
+		<strong>Note!</strong>
+		Because of a bug in the current version of Bootstrap tab-content fall below the tabs even when it shouldn't. This can be fixed by setting tab-content width to auto.
+	</div>
+
 	<div class="row">
 
 		<div class="span6">
 
 </section>
 
+<section id="bootLabel">
+
+	<h2>Labels</h2>
+
+	<p>
+		<?php $this->widget('bootstrap.widgets.BootLabel', array('label'=>'Default')); ?>
+		<?php $this->widget('bootstrap.widgets.BootLabel', array('type'=>'success', 'label'=>'Success')); ?>
+		<?php $this->widget('bootstrap.widgets.BootLabel', array('type'=>'warning', 'label'=>'Warning')); ?>
+		<?php $this->widget('bootstrap.widgets.BootLabel', array('type'=>'important', 'label'=>'Important')); ?>
+		<?php $this->widget('bootstrap.widgets.BootLabel', array('type'=>'info', 'label'=>'Info')); ?>
+		<?php $this->widget('bootstrap.widgets.BootLabel', array('type'=>'inverse', 'label'=>'Inverse')); ?>
+	</p>
+
+	<h4>Source code</h4>
+
+	<?php echo $parser->safeTransform("~~~
+[php]
+<?php \$this->widget('bootstrap.widgets.BootLabel', array(
+	'type'=>'success', // '', 'success', 'warning', 'important', 'info' or 'inverse'
+	'label'=>'Success',
+)); ?>
+~~~"); ?>
+
+	<a class="top" href="#top">Back to top &uarr;</a>
+
+</section>
+
+<section id="bootBadge">
+
+	<h2>Badges</h2>
+
+	<p>
+		<?php $this->widget('bootstrap.widgets.BootBadge', array('label'=>'1')); ?>
+		<?php $this->widget('bootstrap.widgets.BootBadge', array('type'=>'success', 'label'=>'2')); ?>
+		<?php $this->widget('bootstrap.widgets.BootBadge', array('type'=>'warning', 'label'=>'4')); ?>
+		<?php $this->widget('bootstrap.widgets.BootBadge', array('type'=>'error', 'label'=>'6')); ?>
+		<?php $this->widget('bootstrap.widgets.BootBadge', array('type'=>'info', 'label'=>'8')); ?>
+		<?php $this->widget('bootstrap.widgets.BootBadge', array('type'=>'inverse', 'label'=>'10')); ?>
+	</p>
+
+	<h4>Source code</h4>
+
+	<?php echo $parser->safeTransform("~~~
+[php]
+<?php \$this->widget('bootstrap.widgets.BootBadge', array(
+	'type'=>'success', // '', 'success', 'warning', 'error', 'info' or 'inverse'
+	'label'=>'2',
+)); ?>
+~~~"); ?>
+
+	<a class="top" href="#top">Back to top &uarr;</a>
+
+</section>
+
 <section id="comments">
 
 	<h2>Comments</h2>
 
 </section>
 
-<div class="subnav subnav-fixed">
+<div class="subnav well">
 
 	<?php $this->widget('BootMenu', array(
-		'type'=>'pills',
+		'type'=>'list',
 		'scrollspy'=>array('spy'=>'.subnav', 'offset'=>50),
 		'items'=>array(
+			array('label'=>'WIDGETS'),
 			array('label'=>'Alert', 'url'=>'#bootAlert'),
 			array('label'=>'Breadcrumb', 'url'=>'#bootBreadcrumbs'),
 			array('label'=>'Navbar', 'url'=>'#bootNavbar'),
 			array('label'=>'Carousel', 'url'=>'#bootCarousel'),
 			array('label'=>'Progress', 'url'=>'#bootProgress'),
 			array('label'=>'Typeahead', 'url'=>'#bootTypeahead'),
+			array('label'=>'Labels <span class="label label-inverse">New</span>', 'encodeLabel'=>false, 'url'=>'#bootLabel'),
+			array('label'=>'Badges <span class="label label-inverse">New</span>', 'encodeLabel'=>false, 'url'=>'#bootBadge'),
 		),
 	)); ?>
 

demo/protected/views/site/setup.php

     .....
     'bootstrap'=>array(
         'class'=>'ext.bootstrap.components.Bootstrap', // assuming you extracted bootstrap under extensions
-        'coreCss'=>true, // whether to register the Bootstrap core CSS (bootstrap.min.css), defaults to true
-        'responsiveCss'=>false, // whether to register the Bootstrap responsive CSS (bootstrap-responsive.min.css), default to false
-        'plugins'=>array(
-            // Optionally you can configure the \"global\" plugins (button, popover, tooltip and transition)
-            // To prevent a plugin from being loaded set it to false as demonstrated below
-            'transition'=>false, // disable CSS transitions
-            'tooltip'=>array(
-                'selector'=>'a.tooltip', // bind the plugin tooltip to anchor tags with the 'tooltip' class
-                'options'=>array(
-                    'placement'=>'bottom', // place the tooltips below instead
-				),
-            ),
-            .....
-            // If you need help with configuring the plugins, please refer to Bootstrap's own documentation:
-			// http://twitter.github.com/bootstrap/javascript.html
-        ),
     ),
 ),
 ~~~"); ?>
 
 </section>
 
+<section id="config">
+
+	<h2>Configuration</h2>
+
+	<p>@todo</p>
+
+</section>
+
 <section id="less">
 
 	<h2>Using LESS</h2>
 		'scrollspy'=>array('spy'=>'.subnav', 'offset'=>50),
 		'items'=>array(
 			array('label'=>'Setup', 'url'=>'#setup'),
+			array('label'=>'Configuration', 'url'=>'#config'),
 			array('label'=>'Using LESS', 'url'=>'#less'),
 			array('label'=>'Plugin API', 'url'=>'#api')
 		),

widgets/BootBadge.php

+<?php
+/**
+ * BootBadge class file.
+ * @author Christoffer Niska <ChristofferNiska@gmail.com>
+ * @copyright  Copyright &copy; Christoffer Niska 2011-
+ * @license http://www.opensource.org/licenses/bsd-license.php New BSD License
+ * @package bootstrap.widgets
+ */
+
+Yii::import('bootstrap.widgets.BootWidget');
+
+/**
+ * Bootstrap badge widget.
+ */
+class BootBadge extends BootWidget
+{
+	// Badge types.
+	const TYPE_DEFAULT = '';
+	const TYPE_SUCCESS = 'success';
+	const TYPE_WARNING = 'warning';
+	const TYPE_ERROR = 'error';
+	const TYPE_INFO = 'info';
+	const TYPE_INVERSE = 'inverse';
+
+	/**
+	 * @var string the badge type (defaults to '').
+	 * Valid types are '', 'success', 'warning', 'error', 'info' and 'inverse'.
+	 */
+	public $type = self::TYPE_DEFAULT;
+	/**
+	 * @var string the badge text.
+	 */
+	public $label;
+	/**
+	 * @var boolean whether to encode the label.
+	 */
+	public $encodeLabel = true;
+
+	/**
+	 * Initializes the widget.
+	 */
+	public function init()
+	{
+		$classes = array('badge');
+
+		$validTypes = array(self::TYPE_SUCCESS, self::TYPE_WARNING,
+				self::TYPE_ERROR, self::TYPE_INFO, self::TYPE_INVERSE);
+
+		if (in_array($this->type, $validTypes))
+			$classes[] = 'badge-'.$this->type;
+
+		$cssClass = implode(' ', $classes);
+		if (isset($this->htmlOptions['class']))
+			$this->htmlOptions['class'] .= ' '.$cssClass;
+		else
+			$this->htmlOptions['class'] = $cssClass;
+
+		if ($this->encodeLabel === true)
+			$this->label = CHtml::encode($this->label);
+	}
+
+	/**
+	 * Runs the widget.
+	 */
+	public function run()
+	{
+		echo CHtml::tag('span', $this->htmlOptions, $this->label);
+	}
+}

widgets/BootLabel.php

+<?php
+/**
+ * BootLabel class file.
+ * @author Christoffer Niska <ChristofferNiska@gmail.com>
+ * @copyright  Copyright &copy; Christoffer Niska 2011-
+ * @license http://www.opensource.org/licenses/bsd-license.php New BSD License
+ * @package bootstrap.widgets
+ */
+
+Yii::import('bootstrap.widgets.BootWidget');
+
+/**
+ * Bootstrap label widget.
+ */
+class BootLabel extends BootWidget
+{
+	// Label types.
+	const TYPE_DEFAULT = '';
+	const TYPE_SUCCESS = 'success';
+	const TYPE_WARNING = 'warning';
+	const TYPE_IMPORTANT = 'important';
+	const TYPE_INFO = 'info';
+	const TYPE_INVERSE = 'inverse';
+
+	/**
+	 * @var string the label type (defaults to '').
+	 * Valid types are '', 'success', 'warning', 'important', 'info' and 'inverse'.
+	 */
+	public $type = self::TYPE_DEFAULT;
+	/**
+	 * @var string the label text.
+	 */
+	public $label;
+	/**
+	 * @var boolean whether to encode the label.
+	 */
+	public $encodeLabel = true;
+
+	/**
+	 * Initializes the widget.
+	 */
+	public function init()
+	{
+		$classes = array('label');
+
+		$validTypes = array(self::TYPE_SUCCESS, self::TYPE_WARNING,
+				self::TYPE_IMPORTANT, self::TYPE_INFO, self::TYPE_INVERSE);
+
+		if (in_array($this->type, $validTypes))
+			$classes[] = 'label-'.$this->type;
+
+		$cssClass = implode(' ', $classes);
+		if (isset($this->htmlOptions['class']))
+			$this->htmlOptions['class'] .= ' '.$cssClass;
+		else
+			$this->htmlOptions['class'] = $cssClass;
+
+		if ($this->encodeLabel === true)
+			$this->label = CHtml::encode($this->label);
+	}
+
+	/**
+	 * Runs the widget.
+	 */
+	public function run()
+	{
+		echo CHtml::tag('span', $this->htmlOptions, $this->label);
+	}
+}