mirror of
https://github.com/alerta/alerta-webui.git
synced 2025-03-17 14:02:37 +00:00
fix: Make text color white if severity color is black (#506)
* fix: Make text color white if severity color is black * Pin node to version 12
This commit is contained in:
parent
870c1d95d4
commit
270dc1d7e1
2 changed files with 25 additions and 10 deletions
12
.github/workflows/test.yml
vendored
12
.github/workflows/test.yml
vendored
|
@ -18,6 +18,10 @@ jobs:
|
|||
steps:
|
||||
- id: checkout
|
||||
uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: '12'
|
||||
- run: npm version
|
||||
- id: build
|
||||
run: npm install
|
||||
- id: format-check
|
||||
|
@ -35,6 +39,10 @@ jobs:
|
|||
steps:
|
||||
- id: checkout
|
||||
uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: '12'
|
||||
- run: npm version
|
||||
- run: npm install
|
||||
- id: unit-test
|
||||
run: npm run test:unit
|
||||
|
@ -51,6 +59,10 @@ jobs:
|
|||
steps:
|
||||
- id: checkout
|
||||
uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: '12'
|
||||
- run: npm version
|
||||
- id: build
|
||||
run: |
|
||||
npm install
|
||||
|
|
|
@ -41,7 +41,7 @@
|
|||
/>
|
||||
<v-icon
|
||||
v-else-if="props.item.trendIndication == 'moreSevere'"
|
||||
class="trend-arrow"
|
||||
:class="['trend-arrow', textColor(props.item.severity)]"
|
||||
:size="fontSize"
|
||||
@click.stop="multiselect = true; props.selected = true"
|
||||
>
|
||||
|
@ -49,7 +49,7 @@
|
|||
</v-icon>
|
||||
<v-icon
|
||||
v-else-if="props.item.trendIndication == 'lessSevere'"
|
||||
class="trend-arrow"
|
||||
:class="['trend-arrow', textColor(props.item.severity)]"
|
||||
:size="fontSize"
|
||||
@click.stop="multiselect = true; props.selected = true"
|
||||
>
|
||||
|
@ -57,7 +57,7 @@
|
|||
</v-icon>
|
||||
<v-icon
|
||||
v-else
|
||||
class="trend-arrow"
|
||||
:class="['trend-arrow', textColor(props.item.severity)]"
|
||||
:size="fontSize"
|
||||
@click.stop="multiselect = true; props.selected = true"
|
||||
>
|
||||
|
@ -67,7 +67,7 @@
|
|||
<td
|
||||
v-for="col in $config.columns"
|
||||
:key="col"
|
||||
:class="['text-no-wrap', textColor]"
|
||||
:class="['text-no-wrap', textColor(props.item.severity)]"
|
||||
:style="fontStyle"
|
||||
>
|
||||
<span
|
||||
|
@ -280,7 +280,7 @@
|
|||
</span>
|
||||
</td>
|
||||
<td
|
||||
:class="['text-no-wrap', textColor]"
|
||||
:class="['text-no-wrap', textColor(props.item.severity)]"
|
||||
>
|
||||
<div
|
||||
class="action-buttons"
|
||||
|
@ -580,11 +580,6 @@ export default {
|
|||
this.headersMap[c] || { text: this.$options.filters.capitalize(c), value: 'attributes.' + c }
|
||||
)
|
||||
},
|
||||
textColor() {
|
||||
return this.$store.getters.getConfig('colors').text
|
||||
? `${this.$store.getters.getConfig('colors').text}--text`
|
||||
: ''
|
||||
},
|
||||
selectedItem() {
|
||||
return this.alerts.filter(a => a.id == this.selectedId)[0]
|
||||
},
|
||||
|
@ -634,6 +629,14 @@ export default {
|
|||
textWidth() {
|
||||
return this.$store.getters.getPreference('textWidth')
|
||||
},
|
||||
textColor(severity) {
|
||||
if (this.severityColor(severity) === 'black' || this.severityColor(severity) === '#000000') {
|
||||
return 'white--text'
|
||||
}
|
||||
return this.$store.getters.getConfig('colors').text
|
||||
? `${this.$store.getters.getConfig('colors').text}--text`
|
||||
: ''
|
||||
},
|
||||
severityColor(severity) {
|
||||
return this.$store.getters.getConfig('colors').severity[severity] || 'white'
|
||||
},
|
||||
|
|
Loading…
Reference in a new issue