Files
portal/app/resources/js/components/projects/DaysBulkDialog.vue
T
Дмитрий 7c97980b3a fix(портал): читаемый текст зелёным и жёлтым — текстовые двойники брендовых цветов
Брендовые success и warning нечитаемы текстом: success даёт 4.25:1 на белой
карточке и 3.83:1 на ивори, warning — 2.25 и 2.03 при норме WCAG 2.1 AA 4.5:1.
Сами цвета не тронуты — остаются для заливок, иконок и рамок. Рядом добавлены
затемнённые текстовые двойники success-strong #256F46 и warning-strong #8A6410,
тон сохранён.

Все 15 мест text-success и 8 мест text-warning переведены на новые классы —
13 файлов: командный центр, биллинг и инциденты админки, система, тенанты,
интеграция с поставщиком, карточка тенанта, диалог баланса, рекламный
админ-экран, мастер рекламной кампании, массовые диалоги дней и регионов,
реквизиты в настройках.

Проверено: фронт 226 файлов / 1663 теста зелёные; Pa11y по всем 24 адресам —
рекламные и ВСЕ админские экраны дают 0 ошибок. Побочно вскрылось 12 старых
недочётов на клиентских экранах — записаны в находку, к этой правке отношения
не имеют.

Боевого не касается, в main не влито.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-07-27 11:02:26 +03:00

113 lines
3.9 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<v-dialog v-model="open" max-width="560" :fullscreen="isPhone" scrollable>
<v-card>
<v-card-title>Дни сбора лидов для {{ count }} проектов</v-card-title>
<v-card-text>
<div class="mb-4">
<div class="text-caption text-success-strong font-weight-medium mb-2"> Добавить дни</div>
<div class="d-flex ga-2 day-row">
<v-btn
v-for="d in WEEKDAYS"
:key="`add-${d.bit}`"
:data-testid="`day-add-${d.bit}`"
:color="addMask & d.bit ? 'success' : undefined"
:variant="addMask & d.bit ? 'flat' : 'outlined'"
size="small"
@click="toggleAdd(d.bit)"
>{{ d.short }}</v-btn
>
</div>
</div>
<div>
<div class="text-caption text-error font-weight-medium mb-2"> Убрать дни</div>
<div class="d-flex ga-2 day-row">
<v-btn
v-for="d in WEEKDAYS"
:key="`remove-${d.bit}`"
:data-testid="`day-remove-${d.bit}`"
:color="removeMask & d.bit ? 'error' : undefined"
:variant="removeMask & d.bit ? 'flat' : 'outlined'"
size="small"
@click="toggleRemove(d.bit)"
>{{ d.short }}</v-btn
>
</div>
</div>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn data-testid="cancel" @click="open = false">Отмена</v-btn>
<v-btn color="primary" data-testid="apply" :disabled="addMask === 0 && removeMask === 0" @click="apply"
>Применить к {{ count }}</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { WEEKDAYS } from '../../constants/weekdays';
import { useLayoutTier } from '../../composables/useLayoutTier';
// Телефон: на весь экран (ряд кнопок дней недели не влезал в узкий модал).
const { isPhone } = useLayoutTier();
const props = defineProps<{ modelValue: boolean; count: number }>();
const emit = defineEmits<{
'update:modelValue': [value: boolean];
apply: [payload: { add: number; remove: number }];
}>();
const open = ref(props.modelValue);
const addMask = ref(0);
const removeMask = ref(0);
watch(
() => props.modelValue,
(val) => {
open.value = val;
if (val) {
addMask.value = 0;
removeMask.value = 0;
}
},
);
watch(open, (val) => {
emit('update:modelValue', val);
});
function toggleAdd(bit: number) {
addMask.value ^= bit;
if (addMask.value & bit) removeMask.value &= ~bit;
}
function toggleRemove(bit: number) {
removeMask.value ^= bit;
if (removeMask.value & bit) addMask.value &= ~bit;
}
function apply() {
emit('apply', { add: addMask.value, remove: removeMask.value });
addMask.value = 0;
removeMask.value = 0;
open.value = false;
}
</script>
<style scoped>
/* Телефон: 7 кнопок дней (ПН…ВС) в d-flex не влезали — СБ/ВС уезжали за край.
Делим ряд поровну между кнопками, чтобы все семь помещались в ширину. */
@media (max-width: 599.98px) {
.day-row {
width: 100%;
}
.day-row > .v-btn {
flex: 1 1 0;
min-width: 0;
padding-inline: 0;
}
}
</style>