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

Merge pull request #27 from dderbentsov/UC-10

Browse Source 
Внесла правки, подняла информацию из LayoutSwitch до родителя
This commit is contained in:
Daria Golova
2022-10-13 14:38:00 +03:00
committed by GitHub
parent 820d181527 df6ced8662
commit 9062695d1e
15 changed files with 65 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,14 +1,19 @@
\:root
--bg-lavender-color: #e9e9f6
--bg-white-color: #f8f8ff
--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)
--default-white: #FFFFFF
--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

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

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

@@ -1,11 +1,11 @@
<template lang="pug">
.flex.gap-2.py-2.px-4.w-full.container(@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(: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,8 +25,6 @@ export default {
<style lang="sass" scoped>
.container
align-items: center
cursor: pointer
border-radius: 4px
width: fit-content
background-color: var(--bg-ligth-blue-color)
@@ -34,9 +32,8 @@ export default {
appearance: none
border: none
outline: none
cursor: pointer
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
@@ -49,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)

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

@@ -12,9 +12,8 @@ export default {
.event-button
outline: none
border: none
cursor: pointer
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>

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

@@ -12,11 +12,10 @@ export default {
.button-plus
outline: none
border: none
cursor: pointer
width: 24px
height: 24px
max-height: 24px
color: #4772F2
background-color: rgba(65, 105, 225, 0.25)
color: var(--btn-blue-color)
background-color: var(--bg-ligth-blue-color)
border-radius: 50%
</style>

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

@@ -23,21 +23,20 @@ export default {
<style lang="sass" scoped>
.button
width: fit-content
cursor: pointer
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)
color: #4169E1
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)
color: #4169E1
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");

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

@@ -2,19 +2,20 @@
calendar-header(
:currentDay="currentDate"
@previous-date="switchPreviousDate"
@next-date="switchNextDate")
@next-date="switchNextDate"
@selectedLayout="changeCalendarLayout")
</template>
<script>
import * as moment from "moment/moment";
import CalendarHeader from "./components/CalendarHeader.vue";
moment.locale("ru");
export default {
name: "TheCalendar",
components: { CalendarHeader },
data() {
return {
currentDate: moment(),
calendarLayout: "",
};
},
methods: {
@@ -24,7 +25,9 @@ export default {
switchNextDate() {
this.currentDate = this.currentDate.clone().add(1, "day");
},
changeCalendarLayout(option) {
this.calendarLayout = option;
},
},
};
</script>
,

19
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.text-xs(@click="closeEventForm")
.icon-cancel.close-icon.text-xs.cursor-pointer(@click="closeEventForm")
base-select(
id="responsible"
width="205px"
@@ -14,15 +14,15 @@
:select-open="openSelectResponsible"
)
.flex.flex-col.gap-y-2
span.not-italic.text-xs.opacity-40.leading-3 Оновная информация
span.not-italic.text-xs.opacity-40.leading-3 Основная информация
.flex.gap-x-4.items-center
.icon-time.text-xl.icon
.flex.gap-x-2.items-center
.form-item.flex.gap-x-2.px-4.py-2.items-center
input.item-input.no-italic.text-base(v-model="eventData.timeEvent.firstTime" type="time" min="08:00" max="18:00")
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.flex.gap-x-2.px-4.py-2.items-center
input.item-input.no-italic.text-base(v-model="eventData.timeEvent.secondTime" type="time" min="08:00" max="18:00")
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.flex.gap-x-2.px-4.py-2.items-center
@@ -131,11 +131,10 @@ 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
cursor: pointer
border-radius: 4px
width: fit-content
background-color: var(--bg-ligth-blue-color)
@@ -143,18 +142,18 @@ export default {
appearance: none
border: none
outline: none
cursor: pointer
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
cursor: pointer
color: var(--font-dark-blue-color)
&:hover
color: var(--btn-blue-color)

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

@@ -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" }],