From 8e2870b62f77359a88cb831c332a45cc5dd4b59b Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Tue, 4 Feb 2020 12:02:04 -0500
Subject: [PATCH] Add max width to CTA footer in the TO builder form - Created
 a new mixin (ExpandSidenavMixin) that sets the defaultVisible prop that can
 be used in both the root component and the SidenavToggler. This makes it so
 that the Root knows whether or not the sidenav is collapsed or expanded, so
 then child components can use this to calculate margins/paddings/offsets/etc.
 - Added new classes for the .action-group-footer that set the elements
 padding based on whether or not the sidenav is expanded. - Added a nested div
 (.action-group-footer--container) inside .action-group-footer which sets the
 max width

---
 js/components/sidenav_toggler.js        | 21 +++++----------
 js/index.js                             | 12 +++++++++
 js/mixins/expand_sidenav.js             | 15 +++++++++++
 styles/elements/_action_group.scss      | 35 +++++++++++++++++--------
 templates/task_orders/builder_base.html | 10 ++++---
 5 files changed, 63 insertions(+), 30 deletions(-)
 create mode 100644 js/mixins/expand_sidenav.js

diff --git a/js/components/sidenav_toggler.js b/js/components/sidenav_toggler.js
index faba4c3b..11717849 100644
--- a/js/components/sidenav_toggler.js
+++ b/js/components/sidenav_toggler.js
@@ -1,30 +1,21 @@
+import ExpandSidenavMixin from '../mixins/expand_sidenav'
 import ToggleMixin from '../mixins/toggle'
 
-const cookieName = 'expandSidenav'
-
 export default {
   name: 'sidenav-toggler',
 
-  mixins: [ToggleMixin],
+  mixins: [ExpandSidenavMixin, ToggleMixin],
 
-  props: {
-    defaultVisible: {
-      type: Boolean,
-      default: function() {
-        if (document.cookie.match(cookieName)) {
-          return !!document.cookie.match(cookieName + ' *= *true')
-        } else {
-          return true
-        }
-      },
-    },
+  mounted: function() {
+    this.$parent.$emit('sidenavToggle', this.isVisible)
   },
 
   methods: {
     toggle: function(e) {
       e.preventDefault()
       this.isVisible = !this.isVisible
-      document.cookie = cookieName + '=' + this.isVisible + '; path=/'
+      document.cookie = this.cookieName + '=' + this.isVisible + '; path=/'
+      this.$parent.$emit('sidenavToggle', this.isVisible)
     },
   },
 }
diff --git a/js/index.js b/js/index.js
index fb5cdd6e..6495268b 100644
--- a/js/index.js
+++ b/js/index.js
@@ -32,12 +32,14 @@ import ToForm from './components/forms/to_form'
 import ClinFields from './components/clin_fields'
 import PopDateRange from './components/pop_date_range'
 import ToggleMenu from './components/toggle_menu'
+import ExpandSidenav from './mixins/expand_sidenav'
 
 Vue.config.productionTip = false
 
 Vue.use(VTooltip)
 
 Vue.mixin(Modal)
+Vue.mixin(ExpandSidenav)
 
 const app = new Vue({
   el: '#app-root',
@@ -67,6 +69,12 @@ const app = new Vue({
     ToggleMenu,
   },
 
+  data: function() {
+    return {
+      sidenavExpanded: this.defaultVisible,
+    }
+  },
+
   mounted: function() {
     this.$on('modalOpen', data => {
       if (data['isOpen']) {
@@ -105,6 +113,10 @@ const app = new Vue({
         }
       })
     })
+
+    this.$on('sidenavToggle', data => {
+      this.sidenavExpanded = data
+    })
   },
   delimiters: ['!{', '}'],
 
diff --git a/js/mixins/expand_sidenav.js b/js/mixins/expand_sidenav.js
new file mode 100644
index 00000000..7553b7d4
--- /dev/null
+++ b/js/mixins/expand_sidenav.js
@@ -0,0 +1,15 @@
+export default {
+  props: {
+    cookieName: 'expandSidenav',
+    defaultVisible: {
+      type: Boolean,
+      default: function() {
+        if (document.cookie.match(this.cookieName)) {
+          return !!document.cookie.match(this.cookieName + ' *= *true')
+        } else {
+          return true
+        }
+      },
+    },
+  },
+}
diff --git a/styles/elements/_action_group.scss b/styles/elements/_action_group.scss
index fe375f67..c2d11049 100644
--- a/styles/elements/_action_group.scss
+++ b/styles/elements/_action_group.scss
@@ -32,22 +32,35 @@
 }
 
 .action-group-footer {
-  @extend .action-group;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-  margin-top: 0;
-  margin-bottom: 0;
   padding-top: $gap;
   padding-bottom: $gap;
-
+  padding-right: $gap * 4;
   position: fixed;
   bottom: $footer-height;
+  left: 0;
   background: white;
-  right: 0;
-  padding-right: $gap * 4;
   border-top: 1px solid $color-gray-lighter;
-  width: 100%;
   z-index: 1;
+  width: 100%;
+
+  &.action-group-footer--expand-offset {
+    padding-left: $sidenav-expanded-width;
+  }
+
+  &.action-group-footer--collapse-offset {
+    padding-left: $sidenav-collapsed-width;
+  }
+
+  .action-group-footer--container {
+    @extend .action-group;
+
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-left: $large-spacing;
+    max-width: $max-panel-width;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 }
diff --git a/templates/task_orders/builder_base.html b/templates/task_orders/builder_base.html
index 9ee8dd0c..66e84d53 100644
--- a/templates/task_orders/builder_base.html
+++ b/templates/task_orders/builder_base.html
@@ -31,7 +31,10 @@
       <div class="task-order">
         {% block to_builder_form_field %}{% endblock %}
       </div>
-       <span class="action-group-footer">
+      <div
+        class="action-group-footer"
+        v-bind:class="{'action-group-footer--expand-offset': this.$root.sidenavExpanded, 'action-group-footer--collapse-offset': !this.$root.sidenavExpanded}">
+        <div class="action-group-footer--container">
           {% block next_button %}
             <input
               type="submit"
@@ -58,14 +61,13 @@
               </a>
             {%- endif %}
           {% endif %}
-
           <a
             v-on:click="openModal('cancel')"
             class="action-group__action icon-link">
             {{ "common.cancel" | translate }}
           </a>
-        </span>
-
+        </div>
+      </div>
     </form>
   </to-form>
 {% endblock %}