vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

feat: color the task color button when the task has a color set #2331

Merged
konrad merged 5 commits from feature/color-task-color-button into main 2022-09-15 12:46:13 +00:00
Conversation 12 Commits 5 Files Changed 6 +20 -6
2 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit bdf992c9bf - Show all commits

15
src/components/input/button.vue
View File

@ -9,9 +9,16 @@
}
]"
>
<icon :icon="icon" v-if="showIconOnly"/>
<icon
v-if="showIconOnly"
:icon="icon"
:style="{'color': iconColor !== '' ? iconColor : false}"
/>
<span class="icon is-small" v-else-if="icon !== ''">
<icon :icon="icon"/>
<icon
:icon="icon"
:style="{'color': iconColor !== '' ? iconColor : false}"
/>
</span>
<slot />
</BaseButton>
@ -42,6 +49,10 @@ const props = defineProps({
type: [String, Array],
default: '',
},
iconColor: {
dpschen commented 2022-09-15 12:26:25 +00:00
Review
Copy Link

What I still don't like here is that it's possible to choose a color that doesn't have any contrast to the button.

While the color dot has the same problem we could fix it there by adding a slim border.
The icon on the other hand has such slim lines that the contrast can get bad very easy.

What I still don't like here is that it's possible to choose a color that doesn't have any contrast to the button. While the color dot has the same problem we could fix it there by adding a slim border. The icon on the other hand has such slim lines that the contrast can get bad very easy.
konrad commented 2022-09-15 12:30:46 +00:00
Review
Copy Link

So we rather shouldn't set the color for the icon?

So we rather shouldn't set the color for the icon?
dpschen commented 2022-09-15 12:41:18 +00:00
Review
Copy Link

That's my personal opinion :)

That's my personal opinion :)
👍 1
type: String,
default: '',
},
loading: {
type: Boolean,
default: false,

11
src/views/tasks/TaskDetailView.vue
View File

@ -378,9 +378,8 @@
@click="setFieldActive('color')"
variant="secondary"
icon="fill-drip"
:icon-color="color"
v-shortcut="'c'"
:class="{'has-light-text': color !== TASK_DEFAULT_COLOR && !colorIsDark(color)}"
:style="{'background-color': color !== TASK_DEFAULT_COLOR ? color : false}"
>
{{ $t('task.detail.actions.color') }}
</x-button>
@ -600,9 +599,13 @@ export default defineComponent({
return this.$route.name.includes('kanban')
},
color() {
return this.task.getHexColor
const color = this.task.getHexColor
? this.task.getHexColor()
: TASK_DEFAULT_COLOR
: false
return color === TASK_DEFAULT_COLOR
? ''
: color
},
},
methods: {