@eturnity/eturnity_reusable_components 7.4.4-EPDM-9677.0 → 7.4.4-qa-16-02-05

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eturnity/eturnity_reusable_components",
3
- "version": "7.4.4-EPDM-9677.0",
3
+ "version": "7.4.4-qa-16-02-05",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "dev": "vue-cli-service serve",
@@ -13,6 +13,7 @@ const theme = {
13
13
  blue: '#48a2d0',
14
14
  red: '#ff5656',
15
15
  blue1: '#e4efff',
16
+ brightBlue: '#0068DE',
16
17
  grey1: '#666',
17
18
  grey2: '#c4c4c4',
18
19
  grey3: '#b2b9c5',
@@ -3,7 +3,6 @@
3
3
  :position="position"
4
4
  :isOpen="isOpen"
5
5
  :class="{ visible: isOpen, hidden: !isOpen }"
6
- @click.native="onOutsideClose()"
7
6
  :backdrop="backdrop"
8
7
  >
9
8
  <modal-container @click.stop>
@@ -27,7 +26,7 @@
27
26
  // import Modal from "@eturnity/eturnity_reusable_components/src/components/modals/modal"
28
27
  // This is a more flexible modal box, where the parent can decide how the body of the modal looks
29
28
  // To use:
30
- // <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :preventOutsideClose="true" :isLoading="true" :hideClose="true">
29
+ // <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :isLoading="true" :hideClose="true">
31
30
  // <div>Data....</div>
32
31
  // </modal>
33
32
 
@@ -86,22 +85,6 @@ const ModalContainer = styled.div`
86
85
  min-width: 100px;
87
86
  min-height: 100px;
88
87
 
89
- ::-webkit-scrollbar {
90
- width: 0.3em;
91
- height: 100%;
92
- background-color: ${(props) => props.theme.colors.grey5};
93
- }
94
-
95
- /* Make scrollbar visible when needed */
96
- ::-webkit-scrollbar-thumb {
97
- background-color: ${(props) => props.theme.colors.grey3};
98
- }
99
-
100
- /* Make scrollbar track visible when needed */
101
- ::-webkit-scrollbar-track {
102
- background-color: ${(props) => props.theme.colors.grey5};
103
- }
104
-
105
88
  .close {
106
89
  position: absolute;
107
90
  right: 20px;
@@ -137,10 +120,6 @@ export default {
137
120
  required: true,
138
121
  default: false
139
122
  },
140
- preventOutsideClose: {
141
- required: false,
142
- default: false
143
- },
144
123
  isLoading: {
145
124
  required: false,
146
125
  default: false
@@ -158,20 +137,27 @@ export default {
158
137
  default: 'fixed'
159
138
  }
160
139
  },
140
+ beforeDestroy() {
141
+ window.removeEventListener('keydown', this.handleKeyDown)
142
+ },
161
143
  methods: {
162
144
  onCloseModal() {
163
145
  this.$emit('on-close')
164
146
  },
165
- onOutsideClose() {
166
- // If true, then only allow closing to come from clicking the X or wherever the onCloseModal is called
167
- if (!this.preventOutsideClose) {
168
- this.$emit('on-close')
147
+ handleKeyDown({ key }) {
148
+ if (key === 'Escape') {
149
+ this.onCloseModal()
169
150
  }
170
151
  }
171
152
  },
172
153
  watch: {
173
- isOpen: function (newVal) {
174
- document.body.style.overflow = newVal ? 'hidden' : ''
154
+ isOpen: function (isOpen) {
155
+ document.body.style.overflow = isOpen ? 'hidden' : ''
156
+ if (isOpen) {
157
+ window.addEventListener('keydown', this.handleKeyDown)
158
+ } else {
159
+ window.removeEventListener('keydown', this.handleKeyDown)
160
+ }
175
161
  }
176
162
  }
177
163
  }
@@ -7,7 +7,11 @@
7
7
  @click="fetchPage(paginationParams.previous)"
8
8
  >
9
9
  <arrowIconContainer>
10
- <icon name="arrow_left" color="#0068de" size="12px" />
10
+ <icon
11
+ name="arrow_left"
12
+ :color="getTheme.colors.brightBlue"
13
+ size="12px"
14
+ />
11
15
  </arrowIconContainer>
12
16
  <arrowText>{{ $gettext('back') }}</arrowText>
13
17
  </paginationLink>
@@ -55,7 +59,11 @@
55
59
  >
56
60
  <arrowText>{{ $gettext('forward') }}</arrowText>
57
61
  <arrowIconContainer>
58
- <icon name="arrow_right" color="#0068de" size="12px" />
62
+ <icon
63
+ name="arrow_right"
64
+ :color="getTheme.colors.brightBlue"
65
+ size="12px"
66
+ />
59
67
  </arrowIconContainer>
60
68
  </paginationLink>
61
69
  </paginationWrapper>
@@ -64,8 +72,10 @@
64
72
  <script>
65
73
  import styled from 'vue-styled-components'
66
74
  import icon from '../icon'
75
+ import theme from '@/assets/theme.js'
76
+
67
77
  const paginationWrapper = styled.nav`
68
- color: #0068de;
78
+ color: ${(props) => props.theme.brightBlue};
69
79
  font-size: 13px;
70
80
  display: flex;
71
81
  flex-wrap: wrap;
@@ -85,7 +95,7 @@ const paginationLink = styled.div`
85
95
 
86
96
  &.active {
87
97
  color: #fff;
88
- background-color: #0068de;
98
+ background-color: ${(props) => props.theme.brightBlue};
89
99
  padding: 7px 12px;
90
100
  border-radius: 4px;
91
101
  }
@@ -106,6 +116,11 @@ export default {
106
116
  arrowIconContainer
107
117
  },
108
118
  props: ['fetchPage', 'currentPage', 'paginationParams'],
119
+ computed: {
120
+ getTheme() {
121
+ return theme
122
+ }
123
+ },
109
124
  methods: {
110
125
  getNewProjects(num) {
111
126
  this.$emit('on-pagination-change', num)
@@ -72,7 +72,7 @@ const TableWrapper = styled('div', wrapperAttrs)`
72
72
  overflow-y: hidden;
73
73
 
74
74
  ::-webkit-scrollbar {
75
- height: 5px; //height of the whole scrollbar area
75
+ height: 10px; //height of the whole scrollbar area
76
76
  }
77
77
 
78
78
  ::-webkit-scrollbar-track {
@@ -81,7 +81,7 @@ const TableWrapper = styled('div', wrapperAttrs)`
81
81
  }
82
82
 
83
83
  ::-webkit-scrollbar-thumb {
84
- border-bottom: 5px solid ${(props) => props.theme.colors.purple}; // width of the actual scrollbar
84
+ border-bottom: 10px solid ${(props) => props.theme.colors.brightBlue}; // width of the actual scrollbar
85
85
  border-radius: 4px;
86
86
  }
87
87
  `