@eturnity/eturnity_reusable_components 7.4.4-qa-16-02-05 → 7.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.4.4-qa-16-02-05",
+  "version": "7.6.0",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/assets/theme.js

@@ -13,7 +13,6 @@ const theme = {
     blue: '#48a2d0',
     red: '#ff5656',
     blue1: '#e4efff',
-    brightBlue: '#0068DE',
     grey1: '#666',
     grey2: '#c4c4c4',
     grey3: '#b2b9c5',

package/src/components/modals/modal/index.vue

@@ -3,6 +3,7 @@
     :position="position"
     :isOpen="isOpen"
     :class="{ visible: isOpen, hidden: !isOpen }"
+    @click.native="onOutsideClose()"
     :backdrop="backdrop"
   >
     <modal-container @click.stop>
@@ -26,7 +27,7 @@
 // import Modal from "@eturnity/eturnity_reusable_components/src/components/modals/modal"
 // This is a more flexible modal box, where the parent can decide how the body of the modal looks
 // To use:
-// <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :isLoading="true" :hideClose="true">
+// <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :preventOutsideClose="true" :isLoading="true" :hideClose="true">
 //   <div>Data....</div>
 // </modal>
 
@@ -85,6 +86,22 @@ const ModalContainer = styled.div`
   min-width: 100px;
   min-height: 100px;
 
+  ::-webkit-scrollbar {
+    width: 0.3em;
+    height: 100%;
+    background-color: ${(props) => props.theme.colors.grey5};
+  }
+
+  /* Make scrollbar visible when needed */
+  ::-webkit-scrollbar-thumb {
+    background-color: ${(props) => props.theme.colors.grey3};
+  }
+
+  /* Make scrollbar track visible when needed */
+  ::-webkit-scrollbar-track {
+    background-color: ${(props) => props.theme.colors.grey5};
+  }
+
   .close {
     position: absolute;
     right: 20px;
@@ -120,6 +137,10 @@ export default {
       required: true,
       default: false
     },
+    preventOutsideClose: {
+      required: false,
+      default: false
+    },
     isLoading: {
       required: false,
       default: false
@@ -137,27 +158,20 @@ export default {
       default: 'fixed'
     }
   },
-  beforeDestroy() {
-    window.removeEventListener('keydown', this.handleKeyDown)
-  },
   methods: {
     onCloseModal() {
       this.$emit('on-close')
     },
-    handleKeyDown({ key }) {
-      if (key === 'Escape') {
-        this.onCloseModal()
+    onOutsideClose() {
+      // If true, then only allow closing to come from clicking the X or wherever the onCloseModal is called
+      if (!this.preventOutsideClose) {
+        this.$emit('on-close')
       }
     }
   },
   watch: {
-    isOpen: function (isOpen) {
-      document.body.style.overflow = isOpen ? 'hidden' : ''
-      if (isOpen) {
-        window.addEventListener('keydown', this.handleKeyDown)
-      } else {
-        window.removeEventListener('keydown', this.handleKeyDown)
-      }
+    isOpen: function (newVal) {
+      document.body.style.overflow = newVal ? 'hidden' : ''
     }
   }
 }

package/src/components/pagination/index.vue

@@ -7,11 +7,7 @@
       @click="fetchPage(paginationParams.previous)"
     >
       <arrowIconContainer>
-        <icon
-          name="arrow_left"
-          :color="getTheme.colors.brightBlue"
-          size="12px"
-        />
+        <icon name="arrow_left" color="#0068de" size="12px" />
       </arrowIconContainer>
       <arrowText>{{ $gettext('back') }}</arrowText>
     </paginationLink>
@@ -59,11 +55,7 @@
     >
       <arrowText>{{ $gettext('forward') }}</arrowText>
       <arrowIconContainer>
-        <icon
-          name="arrow_right"
-          :color="getTheme.colors.brightBlue"
-          size="12px"
-        />
+        <icon name="arrow_right" color="#0068de" size="12px" />
       </arrowIconContainer>
     </paginationLink>
   </paginationWrapper>
@@ -72,10 +64,8 @@
 <script>
 import styled from 'vue-styled-components'
 import icon from '../icon'
-import theme from '@/assets/theme.js'
-
 const paginationWrapper = styled.nav`
-  color: ${(props) => props.theme.brightBlue};
+  color: #0068de;
   font-size: 13px;
   display: flex;
   flex-wrap: wrap;
@@ -95,7 +85,7 @@ const paginationLink = styled.div`
 
   &.active {
     color: #fff;
-    background-color: ${(props) => props.theme.brightBlue};
+    background-color: #0068de;
     padding: 7px 12px;
     border-radius: 4px;
   }
@@ -116,11 +106,6 @@ export default {
     arrowIconContainer
   },
   props: ['fetchPage', 'currentPage', 'paginationParams'],
-  computed: {
-    getTheme() {
-      return theme
-    }
-  },
   methods: {
     getNewProjects(num) {
       this.$emit('on-pagination-change', num)

package/src/components/tables/mainTable/index.vue

@@ -72,7 +72,7 @@ const TableWrapper = styled('div', wrapperAttrs)`
   overflow-y: hidden;
 
   ::-webkit-scrollbar {
-    height: 10px; //height of the whole scrollbar area
+    height: 5px; //height of the whole scrollbar area
   }
 
   ::-webkit-scrollbar-track {
@@ -81,7 +81,7 @@ const TableWrapper = styled('div', wrapperAttrs)`
   }
 
   ::-webkit-scrollbar-thumb {
-    border-bottom: 10px solid ${(props) => props.theme.colors.brightBlue}; // width of the actual scrollbar
+    border-bottom: 5px solid ${(props) => props.theme.colors.purple}; // width of the actual scrollbar
     border-radius: 4px;
   }
 `