local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Fix task icons on kanban if there were multiple different ones

Browse source
This commit is contained in:
kolaente 2021-01-10 18:27:18 +01:00
parent c44a1af072
commit e87642026b
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
3 changed files with 64 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/tasks/partials/priorityLabel.vue
View file

@ -1,16 +1,19 @@
<template>
<span
:class="{'not-so-high': priority === priorities.HIGH, 'high-priority': priority >= priorities.HIGH}"
class="priority-label"
v-if="showAll || priority >= priorities.HIGH">
<span class="icon" v-if="priority >= priorities.HIGH">
<icon icon="exclamation"/>
</span>
<span>
<template v-if="priority === priorities.UNSET">Unset</template>
<template v-if="priority === priorities.LOW">Low</template>
<template v-if="priority === priorities.MEDIUM">Medium</template>
<template v-if="priority === priorities.HIGH">High</template>
<template v-if="priority === priorities.URGENT">Urgent</template>
<template v-if="priority === priorities.DO_NOW">DO NOW</template>
</span>
<span class="icon" v-if="priority === priorities.DO_NOW">
<icon icon="exclamation"/>
</span>
@ -40,9 +43,14 @@ export default {
}
</script>
<style lang="scss">
<style lang="scss" scoped>
@import '../../../styles/theme/variables';
.priority-label {
display: flex;
align-items: center;
}
span.high-priority {
color: $red;
width: auto !important; // To override the width set in tasks

56
src/styles/components/kanban.scss
View file

@ -85,8 +85,7 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 8px';
align-items: center;
.icon {
margin-right: 2px;
margin-left: 5px;
margin-right: .25rem;
}
&.overdue {
@ -102,16 +101,12 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 8px';
background: transparent;
padding: 0;
display: flex;
justify-content: space-between;
margin-top: 8px;
.items {
display: flex;
flex-wrap: wrap;
align-items: center;
> :not(:last-child) {
margin-right: .5em;
}
.tag, .assignees, .icon, .priority-label {
margin-top: .25rem;
margin-right: .25rem;
}
.assignees {
@ -119,36 +114,26 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 8px';
.user {
display: inline;
margin: 0 -12px 0 0;
margin: 0;
img {
margin-right: 0;
}
}
}
.icons-container {
display: flex;
align-items: flex-end;
.icon {
padding: 0px .4rem;
&:not(:first-child) {
margin-left: 4px;
}
svg {
margin: 0;
}
}
}
.icon {
svg {
margin: 4px 0 4px 4px;
fill: $dark;
&:not(.svg-inline--fa) {
width: 16px;
.tag {
margin-left: 0;
}
.priority-label {
font-size: .75rem;
height: 2em;
.icon {
height: 1rem;
padding: 0 .25rem;
margin-top: 0;
}
}
}
@ -158,12 +143,11 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 8px';
.priority-label {
background: darken($task-background, 5%);
border-radius: $radius;
padding-right: 5px;
padding: 0 .5rem;
}
.priority-label {
margin: .5em 0;
display: inline-block;
.due-date {
padding: 0 .25rem;
}
.task-id {

14
src/views/list/views/Kanban.vue
View file

@ -145,10 +145,15 @@
:value="task.percentDone * 100" max="100">
{{ task.percentDone * 100 }}%
</progress>
<labels :labels="task.labels"/>
<div class="footer">
<div class="items">
<priority-label :priority="task.priority" class="priority-label"/>
<span
:key="label.id"
:style="{'background': label.hexColor, 'color': label.textColor}"
class="tag"
v-for="label in task.labels">
<span>{{ label.title }}</span>
</span>
<priority-label :priority="task.priority"/>
<div class="assignees" v-if="task.assignees.length > 0">
<user
:avatar-size="24"
@ -158,8 +163,6 @@
v-for="u in task.assignees"
/>
</div>
</div>
<div class="icons-container">
<span class="icon" v-if="task.attachments.length > 0">
<icon icon="paperclip"/>
</span>
@ -168,7 +171,6 @@
</span>
</div>
</div>
</div>
</component>
</component>
</div>