fix: implement review feedback on ListLabels and ShowTasks
- Move edit button to replace delete button in ListLabels - Remove separate delete button (edit button now uses delete icon styling) - Remove Icon import and unused styles from ListLabels - Add tooltip to clear label filter button - Add translation key for clear filter tooltip - Remove bold font-weight from filter label text Co-authored-by: kolaente <13721712+kolaente@users.noreply.github.com>
This commit is contained in:
parent
42fb36e409
commit
ae19962f59
|
|
@ -808,7 +808,8 @@
|
||||||
"fromuntil": "Tasks from {from} until {until}",
|
"fromuntil": "Tasks from {from} until {until}",
|
||||||
"select": "Select a date range",
|
"select": "Select a date range",
|
||||||
"noTasks": "Nothing to do — Have a nice day!",
|
"noTasks": "Nothing to do — Have a nice day!",
|
||||||
"filterByLabel": "Filtering by label {label}"
|
"filterByLabel": "Filtering by label {label}",
|
||||||
|
"clearLabelFilter": "Clear label filter"
|
||||||
},
|
},
|
||||||
"detail": {
|
"detail": {
|
||||||
"chooseDueDate": "Click here to set a due date",
|
"chooseDueDate": "Click here to set a due date",
|
||||||
|
|
|
||||||
|
|
@ -39,18 +39,10 @@
|
||||||
:label="label"
|
:label="label"
|
||||||
:clickable="true"
|
:clickable="true"
|
||||||
/>
|
/>
|
||||||
<BaseButton
|
|
||||||
v-if="userInfo.id === label.createdBy.id"
|
|
||||||
class="edit-button"
|
|
||||||
:style="{'color': label.textColor}"
|
|
||||||
@click="editLabel(label)"
|
|
||||||
>
|
|
||||||
<Icon icon="pen" />
|
|
||||||
</BaseButton>
|
|
||||||
<BaseButton
|
<BaseButton
|
||||||
v-if="userInfo.id === label.createdBy.id"
|
v-if="userInfo.id === label.createdBy.id"
|
||||||
class="delete is-small"
|
class="delete is-small"
|
||||||
@click="showDeleteDialoge(label)"
|
@click="editLabel(label)"
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -141,7 +133,6 @@ import BaseButton from '@/components/base/BaseButton.vue'
|
||||||
import Editor from '@/components/input/AsyncEditor'
|
import Editor from '@/components/input/AsyncEditor'
|
||||||
import ColorPicker from '@/components/input/ColorPicker.vue'
|
import ColorPicker from '@/components/input/ColorPicker.vue'
|
||||||
import XLabel from '@/components/tasks/partials/Label.vue'
|
import XLabel from '@/components/tasks/partials/Label.vue'
|
||||||
import Icon from '@/components/misc/Icon'
|
|
||||||
|
|
||||||
import LabelModel from '@/models/label'
|
import LabelModel from '@/models/label'
|
||||||
import type {ILabel} from '@/modelTypes/ILabel'
|
import type {ILabel} from '@/modelTypes/ILabel'
|
||||||
|
|
@ -149,7 +140,6 @@ import {useAuthStore} from '@/stores/auth'
|
||||||
import {useLabelStore} from '@/stores/labels'
|
import {useLabelStore} from '@/stores/labels'
|
||||||
|
|
||||||
import { useTitle } from '@/composables/useTitle'
|
import { useTitle } from '@/composables/useTitle'
|
||||||
import {useLabelStyles} from '@/composables/useLabelStyles'
|
|
||||||
|
|
||||||
const {t} = useI18n({useScope: 'global'})
|
const {t} = useI18n({useScope: 'global'})
|
||||||
|
|
||||||
|
|
@ -168,7 +158,6 @@ const labelStore = useLabelStore()
|
||||||
labelStore.loadAllLabels()
|
labelStore.loadAllLabels()
|
||||||
|
|
||||||
const loading = computed(() => labelStore.isLoading)
|
const loading = computed(() => labelStore.isLoading)
|
||||||
const {getLabelStyles} = useLabelStyles()
|
|
||||||
|
|
||||||
function deleteLabel(label?: ILabel) {
|
function deleteLabel(label?: ILabel) {
|
||||||
if (!label) {
|
if (!label) {
|
||||||
|
|
@ -223,16 +212,5 @@ function showDeleteDialoge(label: ILabel) {
|
||||||
&.disabled {
|
&.disabled {
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-button {
|
|
||||||
padding: 0.25rem 0.5rem;
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -24,6 +24,7 @@
|
||||||
</template>
|
</template>
|
||||||
</i18n-t>
|
</i18n-t>
|
||||||
<BaseButton
|
<BaseButton
|
||||||
|
v-tooltip="$t('task.show.clearLabelFilter')"
|
||||||
class="clear-filter-button"
|
class="clear-filter-button"
|
||||||
@click="clearLabelFilter"
|
@click="clearLabelFilter"
|
||||||
>
|
>
|
||||||
|
|
@ -307,7 +308,6 @@ watchEffect(() => setTitle(pageTitle.value))
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
|
|
||||||
.filter-label-text {
|
.filter-label-text {
|
||||||
font-weight: 600;
|
|
||||||
color: var(--grey-700);
|
color: var(--grey-700);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue