admin/astra-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP Изменила стиль кнопок, расставила запятые

Browse Source
This commit is contained in:
Daria Golova
2022-11-21 18:56:11 +03:00
parent e182844074
commit 733c4c536d
13 changed files with 106 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/base/BaseButton.vue
View File

@@ -14,7 +14,7 @@
.split(v-if="split")
span.icon-container(
:class="rightIcon",
v-if="rightIcon"
v-if="rightIcon",
:style="{fontSize: iconRightSize + 'px', marginLeft: marginLeftIcon + 'px'}"
)
</template>

3
src/components/base/BaseInput.vue
View File

@@ -50,10 +50,11 @@ export default {
.right
order: 1
.input-wrapper
border: 2px solid var(--border-light-grey-color)
border: 1.5px solid var(--border-light-grey-color)
border-radius: 4px
background-color: var(--default-white)
color: var(--font-black-color)
height: 40px
.date
background: url("../../assets/icons/calendar-input.svg") no-repeat 100% 50%
&::-webkit-calendar-picker-indicator

56
src/pages/calendar/TheCalendar.vue
View File

@@ -1,46 +1,46 @@
<template lang="pug">
.calendar-container.flex
calendar-sidebar(
@width="changeWidth"
:team-data="employeesData"
:open-form-create="openFormCreateEvent"
@width="changeWidth",
:team-data="employeesData",
:open-form-create="openFormCreateEvent",
:event-types="eventTypes"
)
calendar-schedule(
:owners-data="employeesData"
:current-date="currentDate"
:time-information="timeInformation"
:events-data="eventsData"
:members-data="membersData"
:sidebar-width="sidebarWidth"
:event-types="eventTypes"
:change-form-was-closed="changeFormWasClosed"
@previous-date="switchPreviousDate"
@next-date="switchNextDate"
@selected-layout="changeCalendarLayout"
@open-change-form="openFormCreateEvent"
@reset-change-form="resetChangeFormState"
@selected-event="writeEventData"
:owners-data="employeesData",
:current-date="currentDate",
:time-information="timeInformation",
:events-data="eventsData",
:members-data="membersData",
:sidebar-width="sidebarWidth",
:event-types="eventTypes",
:change-form-was-closed="changeFormWasClosed",
@previous-date="switchPreviousDate",
@next-date="switchNextDate",
@selected-layout="changeCalendarLayout",
@open-change-form="openFormCreateEvent",
@reset-change-form="resetChangeFormState",
@selected-event="writeEventData",
@delete-event="openModal"
)
calendar-form-add-event(
v-if="isOpenForm"
:close-form="closeFormCreateEvent"
:owners-data="employeesData"
:members-data="membersData"
:selected-event-data="selectedEvent"
:event-types="eventTypes"
@clear-selected-event-data="clearSelectedEvent"
v-if="isOpenForm",
:close-form="closeFormCreateEvent",
:owners-data="employeesData",
:members-data="membersData",
:selected-event-data="selectedEvent",
:event-types="eventTypes",
@clear-selected-event-data="clearSelectedEvent",
@close-change-form="setChangeFormState"
)
base-modal(
v-model="showModal"
v-model="showModal",
title="Удаление события"
)
calendar-delete-modal(
:event-types="eventTypes"
:owner-event="selectedEvent"
:close-modal="changeShowModal"
:event-types="eventTypes",
:owner-event="selectedEvent",
:close-modal="changeShowModal",
@update-events="fetchEventsData"
)
</template>

2
src/pages/calendar/components/CalendarBackground.vue
View File

@@ -5,7 +5,7 @@
.flex.flex-col
.line-wrapper
.line.flex.items-center(
v-for="hour in timeCoil"
v-for="hour in timeCoil",
:key="hour"
)
.middle-line

4
src/pages/calendar/components/CalendarClockColumn.vue
View File

@@ -1,8 +1,8 @@
<template lang="pug">
.calendar-clock-column.flex.flex-col.items-end.gap-y-43.pb-5.px-3
span.text-base(
v-for="hour in timeCoil"
:key="hour"
v-for="hour in timeCoil",
:key="hour",
:class="currentHourStyle(hour)"
) {{ hour }}
</template>

24
src/pages/calendar/components/CalendarColumn.vue
View File

@@ -4,8 +4,8 @@
.flex.items-center
base-avatar.mr-2(:size="32", :color="ownerData.color")
img(
:src="ownerData.avatar"
alt="Team member"
:src="ownerData.avatar",
alt="Team member",
v-if="ownerData.avatar"
)
span(v-if="!ownerData.avatar") {{ defaultAvatar }}
@@ -14,16 +14,16 @@
column-header-checkbox
.body.pl-1
calendar-event-card(
v-for="event in dayEvents"
:key="event.id"
:id="event.id"
:ownerEvent="event"
:event-types="eventTypes"
:style="eventCardPosition(event.start, event.end)"
:change-form-was-closed="changeFormWasClosed"
@selected-event="transmitEventData"
@reset-change-form="transmitResetChangeForm"
@delete-event="transmitDeleteEvent"
v-for="event in dayEvents",
:key="event.id",
:id="event.id",
:ownerEvent="event",
:event-types="eventTypes",
:style="eventCardPosition(event.start, event.end)",
:change-form-was-closed="changeFormWasClosed",
@selected-event="transmitEventData",
@reset-change-form="transmitResetChangeForm",
@delete-event="transmitDeleteEvent",
:schedule-body-ref="scheduleBodyRef"
)
</template>

2
src/pages/calendar/components/CalendarColumnHeaderCheckbox.vue
View File

@@ -1,6 +1,6 @@
<template lang="pug">
div.icon-wrap.flex.items-center.justify-center.cursor-pointer.py-1.px-2(
:class="{disable: !isChecked}"
:class="{disable: !isChecked}",
@click="changeState"
)
.icon-doc-ok.text-xxl

12
src/pages/calendar/components/CalendarEventCard.vue
View File

@@ -22,12 +22,12 @@
ul
li.mt-2(v-for="elem in descriptionColumns.rightColumn" :key="elem") {{ elem }}
calendar-event-description-card(
v-if="isOpenDescriptionCard"
:owner-event="ownerEvent"
:event-types="eventTypes"
@selected-event="transmitEventData"
@close-description-card="closeDescriptionCard"
@delete-event="transmitDeleteEvent"
v-if="isOpenDescriptionCard",
:owner-event="ownerEvent",
:event-types="eventTypes",
@selected-event="transmitEventData",
@close-description-card="closeDescriptionCard",
@delete-event="transmitDeleteEvent",
:schedule-body-ref="scheduleBodyRef"
)
</template>

2
src/pages/calendar/components/CalendarEventDescriptionCard.vue
View File

@@ -2,7 +2,7 @@
.wrapper.px-4.pt-14px.pb-4.font-medium.cursor-auto(
:style="{...typeColor, ...position, ...constantWidth}",
v-click-outside="close",
:class="{'shadow': !disabled}"
:class="{'shadow': !disabled}",
ref="descriptionCard"
)
.flex.justify-between.items-center.mb-2

6
src/pages/calendar/components/CalendarFormAddEvent.vue
View File

@@ -10,8 +10,8 @@
.flex.flex-col.gap-y-2
span.text-xs.opacity-40.font-bold.leading-3 Вид события
base-custom-select.select(
v-model="kind"
:items="kindEvents"
v-model="kind",
:items="kindEvents",
placeholder="Вид события"
)
.flex.flex-col(class="gap-y-1.5")
@@ -52,7 +52,7 @@
v-if="!selectedEventData.id",
:size="40",
:disabled="disabledCreateButton",
@click="sendEventData"
@click="sendEventData",
) Создать событие
base-button.update-button.text-base.font-semibold(
v-else,

4
src/pages/calendar/components/CalendarLayoutSwitch.vue
View File

@@ -1,11 +1,11 @@
<template lang="pug">
.layout-switch-wrapper.inline-block
button#day.py-2.px-3(
:class="dayLayoutState"
:class="dayLayoutState",
@click="changeSelectedLayout"
) День
button#week.py-2.px-3(
:class="weekLayoutState"
:class="weekLayoutState",
@click="changeSelectedLayout"
) Неделя
</template>

48
src/pages/calendar/components/CalendarSchedule.vue
View File

@@ -1,55 +1,55 @@
<template lang="pug">
.schedule.mx-2.pb-22px(
ref="schedule"
ref="schedule",
:style="scheduleWidth"
)
calendar-header(
:current-date="currentDate"
:is-current-date="isCurrentDate"
@previous-date="previousDate"
@next-date="nextDate"
:current-date="currentDate",
:is-current-date="isCurrentDate",
@previous-date="previousDate",
@next-date="nextDate",
@selected-layout="selectedLayout"
)
.schedule-body(
@scroll="changeScrollingState"
@scroll="changeScrollingState",
ref="scheduleBody"
)
.hiding-container.fixed(v-if="isScrolling")
.column-wrapper.flex.ml-20(:style="columnWrapperWidth")
calendar-column(
v-for="(owner, index) in filteredOwners"
:key="owner.id"
:owner-data="owner"
:day-events="filterEventsByOwner(owner)"
:day-start-time="validateStartTime"
:day-end-time="validateEndTime"
:style="columnSize"
:event-types="eventTypes"
:change-form-was-closed="changeFormWasClosed"
@selected-event="transmitEventData"
@reset-change-form="transmitResetChangeForm"
@delete-event="transmitDeleteEvent"
v-for="(owner, index) in filteredOwners",
:key="owner.id",
:owner-data="owner",
:day-events="filterEventsByOwner(owner)",
:day-start-time="validateStartTime",
:day-end-time="validateEndTime",
:style="columnSize",
:event-types="eventTypes",
:change-form-was-closed="changeFormWasClosed",
@selected-event="transmitEventData",
@reset-change-form="transmitResetChangeForm",
@delete-event="transmitDeleteEvent",
:schedule-body-ref="$refs.scheduleBody"
)
.flex.w-full.relative
.time-coil-wrapper.left-0.-mt-12.pt-9
calendar-clock-column(
:timeCoil="timeCoil"
:current-time="currentTime"
:is-current-date="isCurrentDate"
:timeCoil="timeCoil",
:current-time="currentTime",
:is-current-date="isCurrentDate",
:day-end-time="validateEndTime"
)
.time-circle-indicator.left-74px(
v-if="isShownIndicator"
v-if="isShownIndicator",
:style="circleIndicatorLocation"
)
span.time-line-indicator.block.left-20(
v-if="isShownIndicator"
v-if="isShownIndicator",
:style="lineIndicatorLocation"
)
.flex(:class="calendarBackgroundWidth")
calendar-background(
:time-coil="timeCoil"
:time-coil="timeCoil",
:owners-count="ownersCount"
)
</template>

34
src/pages/clients/components/ClientsTableHat.vue
View File

@@ -2,18 +2,28 @@
.flex.justify-between.w-full.h-fit
.flex.gap-2.w-fit.h-fit
.input
base-input(:with-icon="true", icon-position="left", v-model:value="searchClient")
.icon-search
button.filter-button.flex.items-center.justify-center.box-border(
class="px-2.5"
@click="searchLastName"
base-input(
:with-icon="true",
icon-position="left",
v-model:value="searchClient",
placeholder="Введите фамилию"
)
.icon-filter.text-xl.leading-4
button.filter-button.flex.items-center.justify-center.px-10px(@click="resetLastName") Очистить
clients-table-header-actions(v-if="!!isOpenActions" :is-selected-one="isOpenActions===1")
.icon-search
base-button(
outlined,
@click="searchLastName",
:size=40
) Поиск
base-button(
v-if="searchClient.length > 0",
secondary,
@click="resetLastName",
:size=40
) Очистить
clients-table-header-actions(v-if="!!isOpenActions", :is-selected-one="isOpenActions===1")
.flex.w-fit.h-fit.gap-x-2
base-button(left-icon="icon-download" :icon-left-size="16" :size="40" :outlined="true")
base-button(left-icon="icon-plus" :icon-left-size="13" :size="40" @click="openForm")
base-button(left-icon="icon-download", :icon-left-size="16", :size="40", :outlined="true")
base-button(left-icon="icon-plus", :icon-left-size="13", :size="40", @click="openForm")
span.font-semibold Создать
</template>
@@ -53,8 +63,4 @@ export default {
<style lang="sass" scoped>
.input
width: 280px
height: fit-content
.filter-button
border-radius: 4px
border: 2px solid var(--border-light-grey-color)
</style>