Merge pull request #36 from guerler/fixradio

Fix radiobuttons, fix tabs in styleguide
jmchilton · Apr 5, 2018 · 438158d · 438158d
2 parents c27434b + beb8e52
commit 438158d
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 46 deletions.
diff --git a/client/galaxy/docs/galaxy-styles.md b/client/galaxy/docs/galaxy-styles.md
@@ -65,35 +65,38 @@ All the crazy permutations of menu button...
 As generated by layout.masthead.js
 
 ```
-    <nav id="masthead" class="navbar navbar-expand justify-content-center navbar-dark bg-dark">
-        <a class="navbar-brand">
-            <img class="navbar-brand-image"/>
-            <span class="navbar-brand-title">Title</span>
-        </a>
-        <ul class="navbar-nav">
-            <li class="nav-item">
-                <a class="nav-link">Header 1</a>
-            </li>
-            <li class="nav-item dropdown">
-                <a class="nav-link dropdown-toggle">Header 2</a>
-            </li>
-        </ul>
-    </nav>
+<nav id="masthead" class="navbar navbar-expand justify-content-center navbar-dark bg-dark">
+  <a class="navbar-brand">
+    <img class="navbar-brand-image"/>
+    <span class="navbar-brand-title">Title</span>
+  </a>
+  <ul class="navbar-nav">
+    <li class="nav-item">
+      <a class="nav-link">Header 1</a>
+    </li>
+    <li class="nav-item dropdown">
+      <a class="nav-link dropdown-toggle">Header 2</a>
+    </li>
+  </ul>
+</nav>
 ```
 
 ## Radio Buttons
 
 As generated by mvc.ui.ui-options
 
 ```
-<div class="btn-group ui-radiobutton" data-toggle="buttons" style="display: inline-block;">
-	<label class="btn btn-secondary ui-option" data-original-title="" title="">
-		<input name="field-uid-7" value="true" type="radio">Yes
-		</label>
-		<label class="btn btn-secondary ui-option" data-original-title="" title="">
-			<input name="field-uid-7" value="false" type="radio">No
-			</label>
-		</div>
+<div class="btn-group btn-group-toggle" data-toggle="buttons">
+  <label class="btn btn-secondary active">
+    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
+  </label>
+  <label class="btn btn-secondary">
+    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
+  </label>
+  <label class="btn btn-secondary">
+    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
+  </label>
+</div>
 ```
 
 ## Popup menus

diff --git a/client/galaxy/scripts/mvc/ui/ui-buttons.js b/client/galaxy/scripts/mvc/ui/ui-buttons.js
@@ -267,6 +267,7 @@ var ButtonMenu = ButtonDefault.extend({
         this.setElement(
             $("<div/>").append(
                 (this.$root = $("<div/>")
+                    .append((this.$icon = $("<i/>")))
                     .append((this.$title = $("<span/>"))))
             )
         );
@@ -295,10 +296,15 @@ var ButtonMenu = ButtonDefault.extend({
                 e.preventDefault();
                 options.onclick && options.onclick();
             });
+        this.$icon
+            .removeClass()
+            .addClass("icon fa")
+            .addClass(options.icon);
         this.$title
             .removeClass()
             .addClass("title")
             .html(options.title);
+        options.icon && options.title && this.$icon.addClass("ui-margin-right");
         this.$menu && this.$menu.remove();
         if (this.collection.length > 0) {
             this.$menu = $("<ul/>")

diff --git a/client/galaxy/scripts/mvc/ui/ui-options.js b/client/galaxy/scripts/mvc/ui/ui-options.js
@@ -285,7 +285,7 @@ RadioButton.View = Base.extend({
     /** Main template function */
     _template: function() {
         return $("<div/>")
-            .addClass("btn-group ui-radiobutton")
+            .addClass("btn-group btn-group-toggle")
             .attr("data-toggle", "buttons");
     }
 });

diff --git a/client/galaxy/scripts/mvc/ui/ui-select-content.js b/client/galaxy/scripts/mvc/ui/ui-select-content.js
@@ -333,7 +333,7 @@ var View = Backbone.View.extend({
         var button_width = 0;
         if (this.fields.length > 1) {
             this.$el.append(this.button_type.$el);
-            button_width = `${Math.max(0, this.fields.length * 36)}px`;
+            button_width = `${Math.max(0, this.fields.length * 40)}px`;
         }
         _.each(this.fields, field => {
             self.$el.append(field.$el.css({ "margin-left": button_width }));

diff --git a/client/galaxy/style/scss/ui.scss b/client/galaxy/style/scss/ui.scss
@@ -196,6 +196,9 @@ $ui-margin-horizontal-large: 10px;
     .dropdown-item {
         text-align: left;
     }
+    .dropdown-toggle::after {
+        display: none;
+    }
 }
 
 .ui-button-icon-plain {
@@ -804,19 +807,6 @@ $ui-margin-horizontal-large: 10px;
     }
 }
 
-.ui-radiobutton {
-    width: 100%;
-    label {
-        height: auto;
-        line-height: 1.5em;
-    }
-
-    i {
-        padding-right: $ui-margin-horizontal;
-        font-size: 1.1em;
-    }
-}
-
 .ui-button-check {
     .icon {
         font-size: 1.2em;

diff --git a/static/style/blue/base.css b/static/style/blue/base.css
@@ -10144,6 +10144,9 @@ html[dir="rtl"] .select2-container-multi .select2-search-choice-close {
 .ui-button-menu .dropdown-item, .ui-button-menu ul.dropdown-menu li, ul.dropdown-menu .ui-button-menu li {
   text-align: left; }
 
+.ui-button-menu .dropdown-toggle::after {
+  display: none; }
+
 .ui-button-icon-plain {
   border: none !important;
   background: none !important;
@@ -10603,15 +10606,6 @@ html[dir="rtl"] .select2-container-multi .select2-search-choice-close {
     top: 8px;
     left: 10px; }
 
-.ui-radiobutton {
-  width: 100%; }
-  .ui-radiobutton label {
-    height: auto;
-    line-height: 1.5em; }
-  .ui-radiobutton i {
-    padding-right: 5px;
-    font-size: 1.1em; }
-
 .ui-button-check {
   cursor: pointer;
   margin-bottom: 5px; }