Tweak box component heading

The header now supports markdown parsing, making it consistent with MarkBind’s rich formatting for headers. The old box component’s header style can be improved to support Markdown headers.
MarkBind · Jan 26, 2020 · b5132ef · b5132ef
1 parent caae4f5
commit b5132ef
Show file tree

Hide file tree

Showing 3 changed files with 162 additions and 41 deletions.
diff --git a/src/TipBox.vue b/src/TipBox.vue
@@ -1,16 +1,26 @@
 <template>
-    <div class="alert container" :class="[boxStyle, addClass, lightStyle]" :style="customStyle">
-        <div v-if="!isDefault" class="icon-wrapper">
-            <span v-html="iconType"></span>
+    <div class="alert box-container" :class="[boxStyle, addClass, lightStyle]" :style="customStyle" ref="boxContainer">
+        <div v-if="hasHeaderBool" :class="['tipbox-header-wrapper', headingStyle, { 'alert-dismissible': dismissible }]">
+            <div v-show="!isDefault" class="icon-wrapper">
+                <span v-html="iconType"></span>
+            </div>
+            <div class="box-heading" ref="headerContainer" v-html="headingContent"></div>
+            <button v-show="dismissible" type="button" class="close close-with-heading" data-dismiss="alert"
+                    aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+            </button>
         </div>
-        <div class="contents" :class="fontBlack">
-            <h6 v-if="heading" class="heading">{{ heading }}</h6>
-            <button v-if="dismissible" type="button" class="close dismiss-button" data-dismiss="alert" aria-label="Close">
+        <div :class="['tipbox-body-wrapper', { 'alert-dismissible': dismissible && !hasHeaderBool, 'tipbox-body-wrapper-with-heading': hasHeaderBool }]">
+            <div v-show="!isDefault && !hasHeaderBool" class="icon-wrapper">
+                <span v-html="iconType"></span>
+            </div>
+            <div class="contents" :class="fontBlack">
+                <slot></slot>
+            </div>
+            <button v-show="dismissible && !hasHeaderBool" type="button" class="close" data-dismiss="alert" aria-label="Close">
                 <span aria-hidden="true">&times;</span>
             </button>
-            <slot></slot>
         </div>
-
     </div>
 </template>
 
@@ -53,14 +63,17 @@
       },
       heading: {
         type: String,
-        default: null,
-      }, 
+        default: '',
+      },
       light: {
         type: Boolean,
         default: false,
       }
     },
     computed: {
+      hasHeaderBool() {
+        return !!this.heading;
+      },
       isDefault() {
         return this.type === 'none'
       },
@@ -83,24 +96,45 @@
       },
       lightStyle() {
         if (this.light) {
-            switch (this.type) {
+          switch (this.type) {
             case 'warning':
-                return 'border-warning text-warning alert-border-left';
+              return 'border-warning text-warning alert-border-left';
             case 'info':
             case 'definition':
-                return 'border-info text-info alert-border-left';
+              return 'border-info text-info alert-border-left';
             case 'success':
             case 'tip':
-                return 'border-sucess text-success alert-border-left';
+              return 'border-success text-success alert-border-left';
             case 'important':
             case 'wrong':
-                return 'border-danger text-danger alert-border-left';
+              return 'border-danger text-danger alert-border-left';
             default:
-                return '';
-            }
+              return 'alert-border-left';
+          }
         }
         return '';
       },
+      headingStyle() {
+        if (this.light) {
+          return '';
+        }
+
+        switch (this.type) {
+          case 'warning':
+            return 'alert-warning-darker';
+          case 'info':
+          case 'definition':
+            return 'alert-info-darker';
+          case 'success':
+          case 'tip':
+            return 'alert-success-darker';
+          case 'important':
+          case 'wrong':
+            return 'alert-danger-darker';
+          default:
+            return 'alert-default-darker';
+        }
+      },
       customStyle() {
         var style = {};
         if (this.backgroundColor) {
@@ -146,40 +180,47 @@
           default:
             return '<i class="fas fa-exclamation"></i>';
         }
+      },
+      headingContent() {
+        return md.renderInline(this.heading);
       }
     }
   }
 </script>
 
 <style scoped>
-    .container {
+    .box-container {
+        width: 100%;
+        padding: 0;
+        border-radius: 6px;
+    }
+
+    .tipbox-header-wrapper {
         display: flex;
         flex-direction: row;
+        align-items: center;
         width: 100%;
-        border-radius: 6px;
+        padding: 0.28em 1.25rem;
+        border-radius: 6px 6px 0 0;
+    }
+
+    .tipbox-body-wrapper {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        padding: 0.75rem 1.25rem;
     }
 
-    .heading {
-        display: inline;
-        float: right;
-        font-weight: normal;
-        color: inherit;
-        background-color: rgba(240, 240, 240, 0.6);
-        width: auto;
-        padding: 3px 5px 4px 5px;
-        border-width: 0;
-        border-radius: 0 6px 0 6px;
-        margin: -13px -27px 0 15px;
+    .tipbox-body-wrapper-with-heading {
+        padding-top: 0.5rem
     }
 
-    .dismiss-button {
-        position: relative;
-        top: -2px;
-        clear: right;
-        color: inherit;
-        height: 100%;
-        margin-right: -6px;
-        margin-left: 21px;
+    .alert-dismissible {
+        padding-right: 4rem;
+    }
+
+    .box-heading {
+        font-weight: 500;
     }
 
     .icon-wrapper {
@@ -189,6 +230,15 @@
         height: 22px;
     }
 
+    .close-with-heading {
+        top: auto;
+        padding: 0 1.25rem;
+    }
+
+    .close-with-heading > span {
+        vertical-align: text-top;
+    }
+
     .contents {
         padding: 0 6px;
         width: 100%;
@@ -197,16 +247,23 @@
     .alert-default {
         color: #24292e;
         background-color: #f6f8fa;
-        border-color: #e8ebef;
+        border-color: #e8ebef !important;
     }
-    
+
     .alert-border-left {
         background-color: #f9f8f8;
         border-left: solid;
         border-width: 0px 0px 0px 5px;
     }
-        
+
     .font-black {
         color: #24292e;
     }
 </style>
+
+<!-- TODO move this once we upgrade vue-loader version for scoped deep selectors -->
+<style>
+    div.box-heading > * {
+        margin-bottom: 0;
+    }
+</style>
diff --git a/src/index.js b/src/index.js
@@ -17,6 +17,7 @@ import tipBox from './TipBox.vue'
 import tooltip from './Tooltip.vue'
 import trigger from './trigger.vue'
 import typeahead from './Typeahead.vue'
+import stylesheetSwitcher from "./stylesheetSwitcher.vue";
 
 const components = {
   affix,
@@ -38,6 +39,7 @@ const components = {
   tooltip,
   trigger,
   typeahead,
+  styleswitcher: stylesheetSwitcher,
 }
 
 const directives = {

diff --git a/src/stylesheetSwitcher.vue b/src/stylesheetSwitcher.vue
@@ -0,0 +1,62 @@
+<template>
+  <div v-if="dev">
+    <div style="font-size: 1.5em; font-weight: bold;">
+      StyleSwitcher
+      <br/>
+      <span style="font-size: 0.67em;">Refresh the page to see the default style again</span>
+    </div>
+    <button @click="increaseIndex">
+      Increase
+    </button>
+    <button @click="decreaseIndex">
+      Decrease
+    </button>
+    <input
+      v-model="index"
+      type="text"
+      placeholder="1 to 16 (press enter)"
+      @change="changeStylesheet" />
+    Current: {{ index }}
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  props: {
+    dev: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      index: 0,
+      bootstrapThemeLink: null,
+      bootstrapExtraThemeLink: null,
+    };
+  },
+  methods: {
+    changeStylesheet() {
+      this.bootstrapThemeLink.attr('href', `markbind/dev/css/bootswatch/${this.index}/bootstrap.min.css`);
+      // eslint-disable-next-line max-len
+      this.bootstrapExtraThemeLink.attr('href', `markbind/dev/css/bootswatchExtras/${this.index}/bootstrap-markbind.css`);
+    },
+    increaseIndex() {
+      this.index += 1;
+      this.changeStylesheet();
+    },
+    decreaseIndex() {
+      this.index -= 1;
+      this.changeStylesheet();
+    },
+  },
+  mounted() {
+    // eslint-disable-next-line no-undef
+    this.bootstrapThemeLink = jQuery('link[href="markbind/css/bootstrap.min.css"]');
+    // eslint-disable-next-line no-undef
+    this.bootstrapExtraThemeLink = jQuery('link[href="markbind/css/bootstrap-markbind.css"]');
+  },
+};
+</script>