feat: updated modal slot options

bloombergindustry · Jun 3, 2019 · 94065b5 · 94065b5
1 parent e3106bd
commit 94065b5
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/dev/views/Modals.vue b/dev/views/Modals.vue
@@ -58,6 +58,7 @@
  fixed
  >
  <Search32 slot="headingIcon"/>
+
  <template slot="headingExtra">
  <ButtonFeatureLabel >
  <template slot="icon"> <Home24/> </template>
@@ -68,12 +69,16 @@
  <template slot="label"> Set as Favorite </template>
  </ButtonFeatureLabel>
  </template>
- <FishTankText>Modal Content.</FishTankText>
+
+ <FishTankText> 
+ <LoremIpsum/> 
+ </FishTankText>
 
  <template slot="footerRight">
  <FishTankText>Clear All</FishTankText>
  <button-primary>Action</button-primary>
  </template>
+
  <template slot="footerLeft">
  <ButtonFeatureLabel >
  <template slot="icon"> <AlertAdd24/> </template>
@@ -131,8 +136,6 @@ export default Vue.extend({
  modal1: false,
  modal2: false,
  dialog: false,
-
- // enhanced modal
  modal3: false,
  }
  }

diff --git a/src/components/FishTankModal.vue b/src/components/FishTankModal.vue
@@ -78,12 +78,12 @@
  v-else-if="$slots.footerLeft || $slots.footerRight"
  class="modal__footer-container"
  >
- <div>
+ <div class="modal__footerLeft">
  <slot 
  name="footerLeft"
  />
  </div>
- <div>
+ <div class="modal__footerRight">
  <slot name="footerRight"/>
  </div>
  </div>
@@ -611,4 +611,19 @@ export default Vue.extend({
  display: block;
 }
 
+.modal__footerLeft{
+ width: 50%;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: center;
+}
+
+.modal__footerRight{
+ width: 50%;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-items: center;
+}
 </style>