From 3bf2182e0b68e9c51e9a429e2806da3b81dea92f Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Sun, 1 Apr 2018 18:53:56 -0400
Subject: [PATCH] Improve styling, wording of rule editor buttons.

- Replace "Okay" with "Apply" on button labels.
- Create CSS style for buttons in rule editor part of the component.
- More consistency - right-align all the buttons, more consistent spacing.
- Make primary action that button blue to make the buttons look a little bland.
---
 .../components/RuleCollectionBuilder.vue      | 32 ++++++++++++-------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/client/galaxy/scripts/components/RuleCollectionBuilder.vue b/client/galaxy/scripts/components/RuleCollectionBuilder.vue
index b3d254e125ad..14723de361ff 100644
--- a/client/galaxy/scripts/components/RuleCollectionBuilder.vue
+++ b/client/galaxy/scripts/components/RuleCollectionBuilder.vue
@@ -194,20 +194,18 @@
                                     <span class="fa fa-times" @click="removeMapping(map.index)"></span>
                                 </column-selector>
                             </div>
-                            <div class="buttons">
-                                <div class="btn-group" v-if="unmappedTargets.length > 0">
-                                  <button type="button" class="primary-button dropdown-toggle" data-toggle="dropdown">
+                            <div class="buttons btn-group pull-right rule-edit-buttons" v-if="unmappedTargets.length > 0">
+                                <button type="button" class="dropdown-toggle btn btn-default" data-toggle="dropdown" style="margin-right: 5px;">
                                     <span class="fa fa-plus rule-add-mapping"></span> {{ "Add Definition" }}<span class="caret"></span>
-                                  </button>
-                                  <ul class="dropdown-menu" role="menu">
+                                </button>
+                                <ul class="dropdown-menu" role="menu">
                                     <li v-for="target in unmappedTargets"
                                         v-bind:index="target"
                                         v-bind:key="target">
                                       <a :class="'rule-add-mapping-' + target.replace(/_/g, '-')" @click="addIdentifier(target)">{{ mappingTargets()[target].label }}</a>
                                     </li>
-                                  </ul>
-                                </div>
-                               <button type="button" class="ui-button-default btn btn-default rule-mapping-ok" v-if="!hasActiveMappingEdit" @click="displayRuleType = null">Okay</button>
+                                </ul>
+                                <button type="button" class="btn btn-default btn-primary rule-mapping-ok" v-if="!hasActiveMappingEdit" @click="displayRuleType = null"> {{ l("Apply") }}</button>
                             </div>
                         </div>
                         <div class="rule-summary" v-if="displayRuleType == null">
@@ -235,7 +233,7 @@
                                                     @remove="removeMapping(index)"
                                                     @edit="displayRuleType = 'mapping'"
                                                     v-on:mouseover.native="map.columns.forEach((col) => highlightColumn(col))"
-                                                    v-on:mouseout.native="map.columns.forEach((col) =>unhighlightColumn(col))"
+                                                    v-on:mouseout.native="map.columns.forEach((col) => unhighlightColumn(col))"
                                                     :col-headers="colHeaders" />
                                 <div v-if="mapping.length == 0">
                                     One or more column definitions must be specified. These are required to specify how to build collections and datasets from rows and columns of the table. <a href="#" @click="displayRuleType = 'mapping'">Click here</a> to manage column definitions.
@@ -677,11 +675,17 @@ const RuleComponent = {
     template: `
     <div v-if="ruleType == displayRuleType" class="rule-editor" :class="typeToClass">
         <slot></slot>
-        <div class="buttons" style="margin: 5px; height: 25px;">
-           <button type="button" class="ui-button-default btn btn-default rule-editor-ok" @click="okay">Okay</button>
-           <button type="button" class="ui-button-default btn rule-editor-cancel" @click="cancel">Cancel</button>
+        <div class="buttons pull-right rule-edit-buttons">
+           <button type="button" class="btn rule-editor-cancel" @click="cancel">{{ cancelLabel }}</button>
+           <button type="button" class="btn btn-default btn-primary rule-editor-ok" @click="okay">{{ applyLabel }}</button>
         </div>
     </div>`,
+    data: function() {
+        return {
+            applyLabel: _l("Apply"),
+            cancelLabel: _l("Cancel"),
+        };
+    },
     props: {
         ruleType: {
             type: String,
@@ -1534,6 +1538,10 @@ export default {
     display: flex;
     flex-direction: column;
   }
+  .rule-edit-buttons {
+     margin: 5px;
+     height: 25px;
+  }
   .rules {
     flex-grow: 1;
     overflow-y: scroll;