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

Merge branch 'master' into UC-13

Browse Source
This commit is contained in:
Алексей Дёмин
2022-10-13 21:08:56 +03:00
committed by GitHub
parent 56011797be c0fff7fda3
commit b41f093d9f
19 changed files with 197 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/icons/lock.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.8385 5.34315C15.028 5.71146 15.4802 5.85641 15.8486 5.6669C16.2169 5.47738 16.3618 5.02517 16.1723 4.65685L14.8385 5.34315ZM5 21H4.25C4.25 21.4142 4.58579 21.75 5 21.75V21ZM19 21V21.75C19.4142 21.75 19.75 21.4142 19.75 21H19ZM19 11H19.75C19.75 10.5858 19.4142 10.25 19 10.25V11ZM5 11V10.25C4.58579 10.25 4.25 10.5858 4.25 11H5ZM8.75 11V7H7.25V11H8.75ZM8.75 7C8.75 6.45335 8.92016 5.61668 9.40865 4.93823C9.8696 4.29802 10.6444 3.75 12 3.75V2.25C10.1556 2.25 8.9304 3.03532 8.19135 4.06177C7.47984 5.04998 7.25 6.21332 7.25 7H8.75ZM12 3.75C13.5991 3.75 14.4125 4.51517 14.8385 5.34315L16.1723 4.65685C15.5181 3.38547 14.2215 2.25 12 2.25V3.75ZM5 21.75H19V20.25H5V21.75ZM19.75 21V11H18.25V21H19.75ZM4.25 11V21H5.75V11H4.25ZM8 10.25H5V11.75H8V10.25ZM19 10.25H8V11.75H19V10.25Z" fill="#252850"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 908 B

15
src/assets/images/team-member.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

12
src/assets/sass/variables.sass
View File

@@ -1,13 +1,19 @@
\:root
--bg-lavender-color: #e9e9f6
--bg-white-color: #FFFFFF
--bg-ligth-blue-color: #e6eafc
--font-dark-blue-color: #252850
--font-black-color: #090a15
--font-black-color-0: rgba(9, 10, 21, 0)
--font-black-color-1: rgba(9, 10, 21, 0.5)
--btn-blue-color: #4772f2
--btn-light-blue-color: #c6d2f6
--btn-blue-color-0: rgba(65, 105, 225, 0)
--btn-blue-color-1: rgba(65, 105, 225, 0.3)
--btn-blue-color-2: rgba(65, 105, 225, 0.5)
--btn-blue-color-3: rgba(65, 105, 225, 0.2)
--btn-blue-color-4: rgba(65, 105, 225, 0.8)
--font-grey-color: #9294a7
--border-light-grey-color: #d3d4dc
--default-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)
--bg-hover-row-table: rgba(215, 217, 255, 0.25)
--btn-red-color: #FF6F6F
--default-white: #fff
--btn-red-color: #ff6f6f

33
src/components/HeaderInputs.vue
View File

@@ -1,15 +1,15 @@
<template lang="pug">
.header-inputs-wrapper.flex.items-center.font-medium.text-base(:class="{ open: isOpen }")
.select-container(@click="changeState")
.select-wrapper.flex.items-center.mx-4.my-2
img.icon-wrapper.flex.justify-center.items-center.loupe(src="@/assets/icons/search.svg" alt="Search")
.select-wrapper.flex.items-center.cursor-pointer.mx-4.my-2
img.icon-wrapper.flex.justify-center.items-center(src="@/assets/icons/search.svg" alt="Search")
span.custom-input.select-input.inline-block.box-border.align-middle.pl-2.pr-1 {{ selectedFilter }}
.arrow.icon-down-arrow.flex.justify-center.items-center
.arrow.icon-down-arrow.text-xsm.mt-px.flex.justify-center.items-center
.options-wrapper.flex.flex-col.box-border.p-4.mt-1(v-if="isOpen")
.option-list.flex.flex-row.mb-4(v-for="filter in filters" :key="filter" @click="selectFilter(filter)")
.option-list.cursor-pointer.flex.flex-row.mb-4(v-for="filter in filters" :key="filter" @click="selectFilter(filter)")
.icon-wrapper.mr-2.flex.justify-center
.icon-ok.flex.justify-center.items-center(v-if="filter === selectedFilter")
.options-text {{ filter }}
.icon-ok.text-xs.flex.justify-center.items-center(v-if="filter === selectedFilter")
.flex.items-center {{ filter }}
input.custom-input.search-input.inline-block.box-border.align-middle.px-4(class="py-2.5" placeholder="Искать ...")
</template>
@@ -41,10 +41,8 @@ export default {
.arrow
transform: rotate(180deg)
.wrapper
background-color: var(--bg-white-color)
display: flex
align-items: center
.header-inputs-wrapper
background-color: var(--default-white)
.select-container
border-radius: 4px 0 0 4px
@@ -55,9 +53,6 @@ export default {
width: 24px
height: 24px
.loupe
font-size: 21px
.custom-input
border: none
outline: none
@@ -68,14 +63,13 @@ export default {
.select-wrapper
position: relative
z-index: 2
cursor: pointer
.select-input
width: 100px
.options-wrapper
width: 172px
background-color: var(--bg-white-color)
background-color: var(--default-white)
color: var(--font-dark-blue-color)
border-radius: 4px
position: absolute
@@ -88,23 +82,14 @@ export default {
color: var(--font-grey-color)
.option-list
cursor: pointer
&:last-child
margin: 0
&:hover
color: var(--btn-blue-color)
.options-text
display: flex
align-items: center
.arrow
font-size: 8px
color: var(--btn-blue-color)
.icon-ok
font-size: 13px
.icon-down-arrow
width: 16px
height: 16px

14
src/components/TheHeader.vue
View File

@@ -1,15 +1,15 @@
<template lang="pug">
.header-wrapper.flex.flex-row.space-between.justify-between.box-border.py-2.px-6
.left-side.flex.items-center.box-border
.flex.items-center.box-border.cursor-pointer
img.logo-img(src="@/assets/images/logo.svg" alt="Logo")
.flex.flex-row
header-inputs.mr-10
button.header-buttons.flex.justify-center.items-center.mr-8.p-0
.icon-bell
.icon-bell.text-xxl
.flex.flex-row.justify-centflexer.items-center
img.avatar-img.mr-2(:src="avatarSrc")
button.header-buttons
.icon-down-arrow.flex.justify-center.items-center.p-0
.icon-down-arrow.text-xxs.flex.justify-center.items-center.p-0
</template>
<script>
@@ -31,18 +31,14 @@ export default {
outline: none
border: none
background-color: transparent
cursor: pointer
color: var(--font-dark-blue-color)
.header-wrapper
width: 100%
background-color: var(--bg-white-color)
background-color: var(--default-white)
position: relative
z-index: 2
.left-side
cursor: pointer
.logo-img
height: 32px
width: 70px
@@ -50,12 +46,10 @@ export default {
.icon-down-arrow
width: 24px
height: 24px
font-size: 12px
.icon-bell
width: 24px
height: 24px
font-size: 24px
color: var(--font-dark-blue-color)
.avatar-img

2
src/components/TheSidebar.vue
View File

@@ -25,6 +25,6 @@ export default {
.sidebar
max-width: 80px
min-width: 80px
background-color: #FFFFFF
background-color: var(--default-white)
border-top-right-radius: 4px
</style>

14
src/components/base/BaseSelect.vue
View File

@@ -1,11 +1,11 @@
<template lang="pug">
.flex.gap-2.py-2.px-4.w-full.container.cursor-pointer(@click="selectOpen")
.flex.gap-2.py-2.px-4.w-full.container.items-center.cursor-pointer(@click="selectOpen")
.relative.flex.flex-col
.not-italic.text-base.select.cursor-pointer(:style="{ minWidth : width}") {{optionData}}
.absolute.options(v-if="isOpen" :id="id" @click="(event)=>chooseOption(event)")
.not-italic.text-base.option(v-for="(responsible, index) in listData" :key="index" :id="index") {{responsible}}
.select-form-separator
.text-sm.ml-2.pt-1.icon-down-arrow.icon(:class="{ open: isOpen}")
.select-form-separator.cursor-pointer
.text-sm.ml-2.pt-1.icon-down-arrow.icon.text-center(:class="{ open: isOpen}")
</template>
<script>
@@ -25,7 +25,6 @@ export default {
<style lang="sass" scoped>
.container
align-items: center
border-radius: 4px
width: fit-content
background-color: var(--bg-ligth-blue-color)
@@ -33,8 +32,8 @@ export default {
appearance: none
border: none
outline: none
color: rgba(9, 10, 21, 0.5)
background-color: rgba(9, 10, 21, 0)
color: var(--font-black-color-1)
background-color: var(--font-black-color-0)
&::-webkit-calendar-picker-indicator
display: none
-webkit-appearance: none
@@ -47,12 +46,11 @@ export default {
&:hover
background-color: var(--btn-blue-color)
.select-form-separator
background-color: rgba(65, 105, 225, 0.2)
background-color: var(--btn-blue-color-3)
height: 24px
width: 1px
border-radius: 1px
.icon
text-align: center
color: var(--font-dark-blue-color)
&:hover
color: var(--btn-blue-color)

2
src/components/base/buttons/BaseAddEvent.vue
View File

@@ -13,7 +13,7 @@ export default {
outline: none
border: none
width: fit-content
color: var(--bg-white-color)
color: var(--default-white)
background-color: var(--btn-blue-color)
border-radius: 4px
</style>

7
src/components/base/buttons/BaseArrowButton.vue
View File

@@ -1,5 +1,5 @@
<template lang="pug">
button.arrow-button.flex.items-center.icon-down-arrow.px-2.pt-px
button.arrow-button.flex.items-center.icon-down-arrow.text-base.px-2.pt-1
</template>
<script>
@@ -15,10 +15,9 @@ export default {
.arrow-button
width: 32px
height: 32px
background: var(--btn-light-blue-color)
background-color: var(--btn-blue-color-1)
color: var(--btn-blue-color)
border-radius: 50%
font-size: 16px
&:hover
background: #a0b4f0
background-color: var(--btn-blue-color-2)
</style>

2
src/components/base/buttons/BaseButtonPlus.vue
View File

@@ -16,6 +16,6 @@ export default {
height: 24px
max-height: 24px
color: var(--btn-blue-color)
background-color: rgba(65, 105, 225, 0.25)
background-color: var(--bg-ligth-blue-color)
border-radius: 50%
</style>

37
src/components/base/buttons/BaseDocOkButton.vue Normal file
View File

@@ -0,0 +1,37 @@
<template lang="pug">
button.icon-wrap.flex.items-center.justify-center.py-1.px-2(:class="{disable: isDisable}")
span(v-if="numberIsVisible") 3
.icon-doc-ok.text-xxl
</template>
<script>
export default {
name: "DocOkButton",
data() {
return {
numberIsVisible: false,
isDisable: true,
};
},
};
</script>
<style lang="sass" scoped>
.disable
opacity: 0.5
.icon-wrap
height: 32px
background-color: var(--btn-blue-color-1)
color: var(--btn-blue-color)
border-radius: 4px
&:hover
background-color: var(--btn-blue-color-2)
&:active
background-color: var(--font-dark-blue-color)
color: var(--default-white)
.icon-doc-ok
width: 24px
height: 24px
</style>

12
src/components/base/buttons/BaseSidebarButton.vue
View File

@@ -23,20 +23,20 @@ export default {
<style lang="sass" scoped>
.button
width: fit-content
background-color: rgba(65, 105, 225, 0)
background-color: var(--btn-blue-color-0)
border-radius: 0 4px 4px 0
border-left-color: rgba(65, 105, 225, 0)
border-left-color: var(--btn-blue-color-0)
border-left-width: 4px
border-right: none
border-top: none
border-bottom: none
border-left-style: solid
.button:focus
background-color: rgba(65, 105, 225, 0.3)
border-left-color: rgba(65, 105, 225, 1)
background-color: var(--btn-blue-color-1)
border-left-color: var(--btn-blue-color)
color: var(--btn-blue-color)
.button:hover
background-color: rgba(65, 105, 225, 0.3)
border-left-color: rgba(65, 105, 225, 1)
background-color: var(--btn-blue-color-1)
border-left-color: var(--btn-blue-color)
color: var(--btn-blue-color)
</style>

2
src/main.js
View File

@@ -7,4 +7,6 @@ import "./assets/sass/tailwind.sass";
import "./assets/sass/variables.sass";
import "./assets/css/iconfonts.css";
moment.locale("ru");
createApp(App).use(router, moment).mount("#app");

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

@@ -1,20 +1,29 @@
<template lang="pug">
.calendar-container.ml-2
calendar-header(
:currentDay="currentDate"
@previous-date="switchPreviousDate"
@next-date="switchNextDate")
@next-date="switchNextDate"
@selectedLayout="changeCalendarLayout")
calendar-column(:info="columnInfo")
</template>
<script>
import * as moment from "moment/moment";
import CalendarHeader from "./components/CalendarHeader.vue";
moment.locale("ru");
import CalendarColumn from "./components/CalendarColumn.vue";
import teamMemberAvatar from "@/assets/images/team-member.svg";
export default {
name: "TheCalendar",
components: { CalendarHeader },
components: { CalendarHeader, CalendarColumn },
data() {
return {
currentDate: moment(),
calendarLayout: "",
columnInfo: {
name: "Захарова А.О.",
avatar: teamMemberAvatar,
},
};
},
methods: {
@@ -24,7 +33,14 @@ export default {
switchNextDate() {
this.currentDate = this.currentDate.clone().add(1, "day");
},
changeCalendarLayout(option) {
this.calendarLayout = option;
},
},
};
</script>
,
<style lang="sass" scoped>
.calendar-container
width: 100%
</style>

57
src/pages/calendar/components/CalendarColumn.vue Normal file
View File

@@ -0,0 +1,57 @@
<template lang="pug">
.calendar-column-wrapper.flex.flex-col
.header.flex.items-center.justify-between.py-2.px-6
.flex.items-center
img.avatar-wrapper.mr-2(:src="info.avatar" alt="Team member")
span.member-name.font-medium.text-base.mr-6 {{ info.name }}
img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
base-doc-ok-button
.body.flex.flex-col
.line.flex.items-center(v-for="hour in 10" :key="hour")
.middle-line
</template>
<script>
import BaseDocOkButton from "@/components/base/buttons/BaseDocOkButton.vue";
export default {
name: "CalendarColumn",
components: { BaseDocOkButton },
props: {
info: {
type: Object,
default() {
return {};
},
},
},
};
</script>
<style lang="sass" scoped>
.calendar-column-wrapper
width: 100%
background-color: var(--default-white)
.header
height: 48px
border-bottom: 1px solid var(--border-light-grey-color)
.avatar-wrapper
width: 32px
height: 32px
.icon-wrapper
width: 24px
height: 24px
.member-name
color: var(--font-dark-blue-color)
.line
border-bottom: 1px solid var(--border-light-grey-color)
height: 62px
.middle-line
border-top: 1px dashed var(--border-light-grey-color)
width: 100%
</style>

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

@@ -3,7 +3,7 @@
.flex.flex-col.gap-y-2
.flex.justify-between.pt-2
span.not-italic.text-xs.opacity-40.leading-3 Ответственный
.icon-cancel.close-icon.cursor-pointer.text-xs(@click="closeEventForm")
.icon-cancel.close-icon.text-xs.cursor-pointer(@click="closeEventForm")
base-select(
id="responsible"
width="205px"
@@ -18,11 +18,11 @@
.flex.gap-x-4.items-center
.icon-time.text-xl.icon
.flex.gap-x-2.items-center
.form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
input.item-input.cursor-pointer.no-italic.text-base(v-model="eventData.timeEvent.firstTime" type="time" min="08:00" max="18:00")
.form-item.flex.gap-x-2.px-4.py-2.items-center
input.item-input.no-italic.text-base.cursor-pointer(v-model="eventData.timeEvent.firstTime" type="time" min="08:00" max="18:00")
span —
.form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
input.item-input.cursor-pointer.no-italic.text-base(v-model="eventData.timeEvent.secondTime" type="time" min="08:00" max="18:00")
.form-item.flex.gap-x-2.px-4.py-2.items-center
input.item-input.no-italic.text-base.cursor-pointer(v-model="eventData.timeEvent.secondTime" type="time" min="08:00" max="18:00")
.flex.gap-x-4.items-center
.icon-person.text-xl.icon
.form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
@@ -131,26 +131,32 @@ export default {
.event-form
height: fit-content
min-width: 448px
background-color: var(--bg-white-color)
background-color: var(--default-white)
box-shadow: -4px -4px 16px rgba(9, 10, 21, 0.25), 4px 4px 16px rgba(9, 10, 21, 0.25)
border-radius: 4px
.form-item
border-radius: 4px
width: fit-content
background-color: var(--bg-ligth-blue-color)
.item-input
appearance: none
border: none
outline: none
color: rgba(9, 10, 21, 0.5)
background-color: rgba(9, 10, 21, 0)
color: var(--font-black-color)
background-color: var(--font-black-color-0)
&::-webkit-calendar-picker-indicator
display: none
-webkit-appearance: none
&::placeholder
color: var(--font-black-color-1)
.icon
width: 24px
height: 24px
color: var(--font-dark-blue-color)
.close-icon
color: var(--font-dark-blue-color)
&:hover

7
src/pages/calendar/components/CalendarHeader.vue
View File

@@ -1,5 +1,5 @@
<template lang="pug">
.calendar-header-wrapper.flex.items-center.justify-between.ml-2.py-3.pl-5.pr-6
.calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6
.flex
base-arrow-button.left-arrow.mr-4(@click="previousHandler")
base-arrow-button.right-arrow.mr-6(@click="nextHandler")
@@ -22,7 +22,6 @@ export default {
data() {
return {
isToday: true,
selectedLayout: "",
};
},
computed: {
@@ -39,7 +38,7 @@ export default {
},
methods: {
changeSelectedLayout(option) {
this.selectedLayout = option;
this.$emit("selectedLayout", option);
},
previousHandler() {
this.$emit("previous-date");
@@ -60,7 +59,7 @@ export default {
<style lang="sass" scoped>
.calendar-header-wrapper
width: 100%
background-color: var(--bg-white-color)
background-color: var(--default-white)
height: 56px
border-radius: 4px

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

@@ -36,8 +36,8 @@ export default {
<style lang="sass" scoped>
.active
background-color: #6787e7
color: var(--bg-white-color)
background-color: var(--btn-blue-color-4)
color: var(--default-white)
border-radius: 4px
.layout-switch-wrapper

1
tailwind.config.js
View File

@@ -14,6 +14,7 @@ module.exports = {
m: ["16px", { lineHeight: "21.6px" }],
lg: ["18px", { lineHeight: "21px" }],
xl: ["20px", { lineHeight: "23px" }],
xxl: ["24px", { lineHeight: "26px" }],
"2xl": ["28px", { lineHeight: "33px" }],
"3xl": ["60px", { lineHeight: "70px" }],
"4xl": ["44px", { lineHeight: "48px" }],