Refactor infobox component

CartoDB · Aug 7, 2018 · 4672d70 · 4672d70
1 parent a8456da
commit 4672d70
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 85 deletions.
diff --git a/assets/stylesheets/editor-3/_infobox.scss b/assets/stylesheets/editor-3/_infobox.scss
@@ -66,16 +66,14 @@
 .Infobox-buttons {
   display: flex;
   flex: 10;
+  align-items: center;
+  justify-content: flex-end;
 }
 
 .Infobox-buttons--quota {
   flex: 1;
 }
 
-.Infobox-button {
-  flex: 1;
-
-  &.Infobox-button--right {
-    text-align: right;
-  }
+.Infobox-button + .Infobox-button {
+  margin-left: 16px;
 }
diff --git a/lib/assets/javascripts/builder/components/infobox/infobox-button.tpl b/lib/assets/javascripts/builder/components/infobox/infobox-button.tpl
@@ -1,13 +1,3 @@
-<% if (type === 'primary') { %>
-  <button class="CDB-Button CDB-Button--primary CDB-Button--medium <% if (disabled) { %>is-disabled<% } %> js-<%- action %> js-action">
-    <span class="CDB-Button-Text CDB-Text is-semibold u-upperCase CDB-Size-small"><%= label %></span>
-  </button>
-<% } else if (type === 'secondary') { %>
-  <button class="CDB-Button CDB-Button--secondary CDB-Button--medium <% if (disabled) { %>is-disabled<% } %> js-<%- action %> js-action">
-    <span class="CDB-Button-Text CDB-Text is-semibold u-upperCase CDB-Size-small"><%= label %></span>
-  </button>
-<% } else { %>
-  <button class="Infobox-buttonLink u-upperCase <% if (disabled) { %>is-disabled<% } %> js-<%- action %> js-action CDB-Text is-semibold CDB-Size-small">
-    <%= label %>
-  </button>
-<% } %>
+<button class="CDB-Button CDB-Button--secondary CDB-Button--medium <% if (disabled) { %>is-disabled<% } %> js-<%- action %> js-action">
+  <span class="CDB-Button-Text CDB-Text is-semibold u-upperCase CDB-Size-small"><%= label %></span>
+</button>
diff --git a/lib/assets/javascripts/builder/components/infobox/infobox-factory.js b/lib/assets/javascripts/builder/components/infobox/infobox-factory.js
@@ -22,17 +22,10 @@ module.exports = {
       klass: opts.className
     };
 
-    if (opts.mainAction) {
-      options.mainAction = {
-        label: opts.mainAction.label,
-        type: opts.mainAction.type
-      };
-    }
-
-    if (opts.secondAction) {
-      options.secondAction = {
-        label: opts.secondAction.label,
-        type: opts.secondAction.type
+    if (opts.action) {
+      options.action = {
+        label: opts.action.label,
+        type: opts.action.type
       };
     }
 

diff --git a/lib/assets/javascripts/builder/components/infobox/infobox-item-view.js b/lib/assets/javascripts/builder/components/infobox/infobox-item-view.js
@@ -14,9 +14,8 @@ var INFOBOX_TYPE = {
 
 module.exports = CoreView.extend({
   events: {
-    'click .js-mainAction': '_onMainClick',
-    'click .js-secondAction': '_onSecondClick',
-    'click .js-close': '_onClose'
+    'click .js-action': '_onActionClick',
+    'click .js-close': '_onCloseClick'
   },
 
   initialize: function (opts) {
@@ -33,16 +32,10 @@ module.exports = CoreView.extend({
       this._quota = opts.quota;
     }
 
-    if (opts.mainAction) {
-      this._mainLabel = opts.mainAction.label;
-      this._mainType = opts.mainAction.type;
-      this._mainDisabled = opts.mainAction.disabled;
-    }
-
-    if (opts.secondAction) {
-      this._secondLabel = opts.secondAction.label;
-      this._secondType = opts.secondAction.type;
-      this._secondDisabled = opts.secondAction.disabled;
+    if (opts.action) {
+      this._actionLabel = opts.action.label;
+      this._actionType = opts.action.type;
+      this._actionDisabled = opts.action.disabled;
     }
 
     this._type = INFOBOX_TYPE[opts.type || 'default'];
@@ -56,7 +49,6 @@ module.exports = CoreView.extend({
   },
 
   _initViews: function () {
-    var hasButtons = this._mainLabel || this._secondLabel;
     var hasQuota = !_.isEmpty(this._quota);
     var isLoading = this._loading;
 
@@ -67,28 +59,22 @@ module.exports = CoreView.extend({
       type: this._type,
       isLoading: isLoading,
       hasQuota: hasQuota,
-      hasButtons: hasButtons,
-      isClosable: this._isClosable
+      hasButtons: this._actionLabel,
+      isClosable: this._isClosable,
+      closeLabel: _t('editor.messages.common.cancel')
     });
 
     this.setElement(view);
 
-    if (this._mainLabel) {
-      this.$('.js-leftPosition').html(templateButton({
-        action: 'mainAction',
-        label: this._mainLabel,
-        type: this._mainType,
-        disabled: this._mainDisabled
-      }));
-    }
-
-    if (this._secondLabel) {
-      this.$('.js-rightPosition').html(templateButton({
-        action: 'secondAction',
-        label: this._secondLabel,
-        type: this._secondType,
-        disabled: this._secondDisabled
-      }));
+    if (this._actionLabel) {
+      this.$('.js-actionPosition').html(
+        templateButton({
+          action: 'action',
+          label: this._actionLabel,
+          type: this._actionType,
+          disabled: this._actionDisabled
+        })
+      );
     }
 
     if (hasQuota) {
@@ -112,15 +98,11 @@ module.exports = CoreView.extend({
     }
   },
 
-  _onMainClick: function (e) {
+  _onActionClick: function (e) {
     this.trigger('action:main');
   },
 
-  _onSecondClick: function (e) {
-    this.trigger('action:second');
-  },
-
-  _onClose: function (e) {
+  _onCloseClick: function (e) {
     this.trigger('action:close');
   }
 });
diff --git a/lib/assets/javascripts/builder/components/infobox/infobox-view.js b/lib/assets/javascripts/builder/components/infobox/infobox-view.js
@@ -50,23 +50,17 @@ module.exports = CoreView.extend({
   },
 
   _initSubviewBinds: function () {
-    this.listenTo(this.infoboxView, 'action:main', this._onMainAction);
-    this.listenTo(this.infoboxView, 'action:second', this._onSecondAction);
+    this.listenTo(this.infoboxView, 'action:main', this._onAction);
     this.listenTo(this.infoboxView, 'action:close', this._onClose);
   },
 
-  _onMainAction: function () {
-    var action = this._selectedModel.get('mainAction');
-    action && action();
-  },
-
-  _onSecondAction: function () {
-    var action = this._selectedModel.get('secondAction');
+  _onAction: function () {
+    var action = this._selectedModel.get('onAction');
     action && action();
   },
 
   _onClose: function () {
-    var action = this._selectedModel.get('closeAction');
+    var action = this._selectedModel.get('onClose');
     if (action) {
       action();
     } else {

diff --git a/lib/assets/javascripts/builder/components/infobox/infobox.tpl b/lib/assets/javascripts/builder/components/infobox/infobox.tpl
@@ -2,11 +2,7 @@
   <div class="u-flex u-justifySpace u-bSpace--m">
     <h2 class="Infobox-title CDB-Text is-semibold CDB-Size-small u-upperCase u-bSpace--m u-rSpace--m"><%- title %></h2>
 
-    <% if (isClosable) { %>
-    <button class="CDB-Shape js-close">
-      <div class="CDB-Shape-close is-large js-theme is-blue"></div>
-    </button>
-    <% } %>
+
   </div>
 
   <div class="CDB-Text CDB-Size-medium u-bSpace--xl u-flex">
@@ -28,8 +24,14 @@
     <% } %>
     <% if (hasButtons) { %>
       <ul class="Infobox-buttons <% if (hasQuota) { %>Infobox-buttons--quota<% } %>">
-        <li class="Infobox-button js-leftPosition"></li>
-        <li class="Infobox-button Infobox-button--right js-rightPosition"></li>
+        <% if (isClosable) { %>
+          <li class="Infobox-button">
+            <button class="Infobox-buttonLink CDB-Text is-semibold CDB-Size-small u-upperCase js-close">
+              <%= closeLabel %>
+            </button>
+          </li>
+        <% } %>
+        <li class="Infobox-button Infobox-button--right js-actionPosition"></li>
       </ul>
     <% } %>
   </div>

diff --git a/lib/assets/javascripts/locale/en.json b/lib/assets/javascripts/locale/en.json
@@ -1677,6 +1677,9 @@
       "label": "Fix them"
     },
     "messages": {
+      "common": {
+        "cancel": "Cancel"
+      },
       "deleting-analysis": {
         "title": "Delete nested analysis",
         "body": "The selected analysis has one or more nested analysis that would be removed once this analysis is deleted. Proceed?",