Merge pull request #29 from C-Lodder/toolbar

Toolbar styling
wilsonge · Oct 3, 2016 · 5d47906 · 5d47906
2 parents c5623de + 17d662b
commit 5d47906
Show file tree

Hide file tree

Showing 16 changed files with 61 additions and 55 deletions.
diff --git a/administrator/templates/atum/_src/scss/template.scss b/administrator/templates/atum/_src/scss/template.scss
@@ -792,6 +792,12 @@ legend {
   .btn-toolbar {
     margin-bottom: 0;
 
+    .btn-group-sm > .btn,
+	.btn-sm {
+      padding: .25rem .75rem;
+      line-height: 1.5;
+    }
+
     .btn-success {
       width: 140px;
     }

diff --git a/administrator/templates/atum/css/template.css b/administrator/templates/atum/css/template.css
@@ -2487,7 +2487,7 @@ input[type="button"].btn-block {
 
 .custom-control {
   position: relative;
-  display: inline-block;
+  display: inline;
   padding-left: 1.5rem;
   cursor: pointer; }
   .custom-control + .custom-control {
@@ -2514,7 +2514,7 @@ input[type="button"].btn-block {
 
 .custom-control-indicator {
   position: absolute;
-  top: .25rem;
+  top: .0625rem;
   left: 0;
   display: block;
   width: 1rem;
@@ -2543,8 +2543,11 @@ input[type="button"].btn-block {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E"); }
 
 .custom-controls-stacked .custom-control {
-  float: left;
-  clear: left; }
+  display: inline; }
+  .custom-controls-stacked .custom-control::after {
+    display: block;
+    margin-bottom: 0.25rem;
+    content: ""; }
   .custom-controls-stacked .custom-control + .custom-control {
     margin-left: 0; }
 
@@ -2787,13 +2790,10 @@ input[type="button"].btn-block {
     content: "\00a0"; }
 
 .navbar-toggler {
-  width: 2.5em;
-  height: 2em;
   padding: .5rem .75rem;
   font-size: 1.25rem;
   line-height: 1;
-  background: transparent no-repeat center center;
-  background-size: 24px 24px;
+  background: none;
   border: 1px solid transparent;
   border-radius: 0.25rem; }
   .navbar-toggler:focus, .navbar-toggler:hover {
@@ -2834,9 +2834,6 @@ input[type="button"].btn-block {
 .navbar-light .navbar-nav .nav-link.active:hover {
   color: rgba(0, 0, 0, 0.8); }
 
-.navbar-light .navbar-toggler {
-  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.3)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); }
-
 .navbar-light .navbar-divider {
   background-color: rgba(0, 0, 0, 0.075); }
 
@@ -2862,9 +2859,6 @@ input[type="button"].btn-block {
 .navbar-dark .navbar-nav .nav-link.active:hover {
   color: white; }
 
-.navbar-dark .navbar-toggler {
-  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); }
-
 .navbar-dark .navbar-divider {
   background-color: rgba(255, 255, 255, 0.075); }
 
@@ -2951,15 +2945,14 @@ input[type="button"].btn-block {
 
 .card-header {
   padding: 0.75rem 1.25rem;
-  margin-bottom: 0;
   background-color: #f5f5f5;
   border-bottom: 1px solid rgba(0, 0, 0, 0.125); }
   .card-header::after {
     content: "";
     display: table;
     clear: both; }
   .card-header:first-child {
-    border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0; }
+    border-radius: 0.25rem 0.25rem 0 0; }
 
 .card-footer {
   padding: 0.75rem 1.25rem;
@@ -2970,7 +2963,7 @@ input[type="button"].btn-block {
     display: table;
     clear: both; }
   .card-footer:last-child {
-    border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px); }
+    border-radius: 0 0 0.25rem 0.25rem; }
 
 .card-header-tabs {
   margin-right: -0.625rem;
@@ -3066,7 +3059,7 @@ input[type="button"].btn-block {
   border-left: 0; }
 
 .card-img {
-  border-radius: calc(0.25rem - 1px); }
+  border-radius: 0.25rem; }
 
 .card-img-overlay {
   position: absolute;
@@ -3077,12 +3070,12 @@ input[type="button"].btn-block {
   padding: 1.25rem; }
 
 .card-img-top {
-  border-top-right-radius: calc(0.25rem - 1px);
-  border-top-left-radius: calc(0.25rem - 1px); }
+  border-top-right-radius: 0.25rem;
+  border-top-left-radius: 0.25rem; }
 
 .card-img-bottom {
-  border-bottom-right-radius: calc(0.25rem - 1px);
-  border-bottom-left-radius: calc(0.25rem - 1px); }
+  border-bottom-right-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem; }
 
 @media (min-width: 544px) {
   .card-deck {
@@ -3135,7 +3128,6 @@ input[type="button"].btn-block {
     column-count: 3;
     column-gap: 1.25rem; }
     .card-columns .card {
-      display: inline-block;
       width: 100%; } }
 
 .breadcrumb {
@@ -4615,12 +4607,6 @@ a.text-warning:focus, a.text-warning:hover {
 a.text-danger:focus, a.text-danger:hover {
   color: #c9302c !important; }
 
-.text-gray-dark {
-  color: #373a3c !important; }
-
-a.text-gray-dark:focus, a.text-gray-dark:hover {
-  color: #1f2021 !important; }
-
 .text-hide {
   font: 0/0 a;
   color: transparent;
@@ -7474,6 +7460,11 @@ legend {
   border-bottom: 1px solid #e3e3e3; }
   .subhead .btn-toolbar {
     margin-bottom: 0; }
+    .subhead .btn-toolbar .btn-group-sm > .btn,
+    .subhead .btn-toolbar .btn-sm,
+    .subhead .btn-toolbar .btn-group-sm > .btn {
+      padding: .25rem .75rem;
+      line-height: 1.5; }
     .subhead .btn-toolbar .btn-success {
       width: 140px; }
   .subhead.subhead-fixed {

diff --git a/administrator/templates/atum/css/template.css.map b/administrator/templates/atum/css/template.css.map
diff --git a/administrator/templates/atum/css/template.min.css b/administrator/templates/atum/css/template.min.css
diff --git a/administrator/templates/atum/css/template.min.css.map b/administrator/templates/atum/css/template.min.css.map
diff --git a/administrator/templates/atum/package.json b/administrator/templates/atum/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "author": "Joomla",
   "description": "Joomla CMS",
-  "license": "GPL v2",
+  "license": "GPLv2",
   "repository": {
     "type": "git",
     "url": "https://github.com/joomla/joomla-cms.git"
@@ -15,8 +15,8 @@
     "node": ">=4"
   },
   "devDependencies": {
-	"autoprefixer": "^6.4.1",
-    "cssnano": "^3.7.4",
+	"autoprefixer": "^6.5.0",
+    "cssnano": "^3.7.5",
     "grunt": "^1.0.1",
     "grunt-browser-sync": "^2.2.0",
     "grunt-contrib-clean": "^1.0.0",
@@ -28,10 +28,10 @@
     "grunt-postcss": "^0.8.0",
     "grunt-sass": "^1.2.1",
     "grunt-scss-lint": "^0.5.0",
-    "grunt-svgmin": "^3.3.0",
+    "grunt-svgmin": "^4.0.0",
     "jit-grunt": "^0.10.0",
     "jshint-stylish": "^2.2.1",
-    "postcss-scss": "^0.3.0",
+    "postcss-scss": "^0.3.1",
     "scss-lint": "0.0.0",
     "time-grunt": "^1.4.0"	
   }

diff --git a/layouts/joomla/toolbar/base.php b/layouts/joomla/toolbar/base.php
@@ -9,6 +9,4 @@
 
 defined('JPATH_BASE') or die;
 ?>
-<div class="btn-wrapper" <?php echo $displayData['id']; ?>>
-	<?php echo $displayData['action']; ?>
-</div>
+<?php echo $displayData['action']; ?>
diff --git a/layouts/joomla/toolbar/batch.php b/layouts/joomla/toolbar/batch.php
@@ -11,11 +11,11 @@
 
 JHtml::_('behavior.core');
 
-$title = $displayData['title'];
+$title   = $displayData['title'];
 $message = JText::_('JLIB_HTML_PLEASE_MAKE_A_SELECTION_FROM_THE_LIST');
 $message = addslashes($message);
 ?>
-<button data-toggle="modal" onclick="if (document.adminForm.boxchecked.value==0){alert('<?php echo $message; ?>');  }else{jQuery( '#collapseModal' ).modal('show'); return true;}" class="btn btn-small">
+<button data-toggle="modal" onclick="if(document.adminForm.boxchecked.value==0){alert('<?php echo $message; ?>');}else{jQuery('#collapseModal').modal('show'); return true;}" class="btn btn-outline-primary btn-sm">
 	<span class="icon-checkbox-partial" title="<?php echo $title; ?>"></span>
 	<?php echo $title; ?>
 </button>

diff --git a/layouts/joomla/toolbar/confirm.php b/layouts/joomla/toolbar/confirm.php
@@ -14,9 +14,8 @@
 $doTask = $displayData['doTask'];
 $class  = $displayData['class'];
 $text   = $displayData['text'];
-
 ?>
-<button onclick="<?php echo $doTask; ?>" class="btn btn-small">
+<button onclick="<?php echo $doTask; ?>" class="btn btn-sm btn-secondary">
 	<span class="<?php echo $class; ?>"></span>
 	<?php echo $text; ?>
 </button>
diff --git a/layouts/joomla/toolbar/help.php b/layouts/joomla/toolbar/help.php
@@ -13,9 +13,8 @@
 
 $doTask = $displayData['doTask'];
 $text   = $displayData['text'];
-
 ?>
-<button onclick="<?php echo $doTask; ?>" rel="help" class="btn btn-small">
+<button onclick="<?php echo $doTask; ?>" rel="help" class="btn btn-outline-info btn-sm pull-sm-right">
 	<span class="icon-question-sign"></span>
 	<?php echo $text; ?>
 </button>
diff --git a/layouts/joomla/toolbar/link.php b/layouts/joomla/toolbar/link.php
@@ -12,9 +12,8 @@
 $doTask = $displayData['doTask'];
 $class  = $displayData['class'];
 $text   = $displayData['text'];
-
 ?>
-<button onclick="location.href='<?php echo $doTask; ?>';" class="btn btn-small">
+<button onclick="location.href='<?php echo $doTask; ?>';" class="btn btn-outline-danger btn-sm pull-sm-right">
 	<span class="<?php echo $class; ?>"></span>
 	<?php echo $text; ?>
 </button>
diff --git a/layouts/joomla/toolbar/popup.php b/layouts/joomla/toolbar/popup.php
@@ -16,7 +16,7 @@
 $text   = $displayData['text'];
 $name   = $displayData['name'];
 ?>
-<button value="<?php echo $doTask; ?>" class="btn btn-small modal" data-toggle="modal" data-target="#modal-<?php echo $name; ?>">
+<button value="<?php echo $doTask; ?>" class="btn btn-sm btn-outline-primary modal" data-toggle="modal" data-target="#modal-<?php echo $name; ?>">
 	<span class="<?php echo $class; ?>"></span>
 	<?php echo $text; ?>
 </button>
diff --git a/layouts/joomla/toolbar/slider.php b/layouts/joomla/toolbar/slider.php
@@ -17,7 +17,7 @@
 $name    = $displayData['name'];
 $onClose = $displayData['onClose'];
 ?>
-<button onclick="<?php echo $doTask; ?>" class="btn btn-small" data-toggle="collapse" data-target="#collapse-<?php echo $name; ?>"<?php echo $onClose; ?>>
+<button onclick="<?php echo $doTask; ?>" class="btn btn-sm btn-secondary" data-toggle="collapse" data-target="#collapse-<?php echo $name; ?>"<?php echo $onClose; ?>>
 	<span class="icon-cog"></span>
 	<?php echo $text; ?>
 </button>
diff --git a/layouts/joomla/toolbar/standard.php b/layouts/joomla/toolbar/standard.php
@@ -15,7 +15,6 @@
 $class    = $displayData['class'];
 $text     = $displayData['text'];
 $btnClass = $displayData['btnClass'];
-
 ?>
 <button onclick="<?php echo $doTask; ?>" class="<?php echo $btnClass; ?>">
 	<span class="<?php echo trim($class); ?>"></span>

diff --git a/layouts/joomla/toolbar/versions.php b/layouts/joomla/toolbar/versions.php
@@ -14,6 +14,6 @@
 ?>
 <a rel="{handler: 'iframe', size: {x: <?php echo $displayData['height']; ?>, y: <?php echo $displayData['width']; ?>}}"
 	href="index.php?option=com_contenthistory&amp;view=history&amp;layout=modal&amp;tmpl=component&amp;item_id=<?php echo (int) $displayData['itemId']; ?>&amp;type_id=<?php echo $displayData['typeId']; ?>&amp;type_alias=<?php echo $displayData['typeAlias']; ?>&amp;<?php echo JSession::getFormToken(); ?>=1"
-	title="<?php echo $displayData['title']; ?>" class="btn btn-small modal_jform_contenthistory">
+	title="<?php echo $displayData['title']; ?>" class="btn btn-sm btn-secondary modal_jform_contenthistory">
 	<span class="icon-archive"></span> <?php echo $displayData['title']; ?>
 </a>
diff --git a/libraries/cms/toolbar/button/standard.php b/libraries/cms/toolbar/button/standard.php
@@ -46,12 +46,27 @@ public function fetchButton($type = 'Standard', $name = '', $text = '', $task =
 
 		if ($name == 'apply' || $name == 'new')
 		{
-			$options['btnClass'] = 'btn btn-small btn-success';
+			$options['btnClass'] = 'btn btn-sm btn-success';
 			$options['class'] .= ' icon-white';
 		}
+		elseif ($name == 'publish')
+		{
+			$options['btnClass'] = 'btn btn-sm btn-outline-success';
+			$options['class'] .= ' icon-green';
+		}
+		elseif ($name == 'unpublish')
+		{
+			$options['btnClass'] = 'btn btn-sm btn-outline-danger';
+			$options['class'] .= ' icon-red';
+		}
+		elseif ($name == 'featured')
+		{
+			$options['btnClass'] = 'btn btn-sm btn-outline-warning';
+			$options['class'] .= ' icon-yellow';
+		}
 		else
 		{
-			$options['btnClass'] = 'btn btn-small';
+			$options['btnClass'] = 'btn btn-sm btn-outline-primary';
 		}
 
 		// Instantiate a new JLayoutFile instance and render the layout