Поправлены стили формы добавления ивента, исправлены зависимости package.json
This commit is contained in:
DwCay
@@ -1,61 +0,0 @@
|
||||
<template lang="pug">
|
||||
.flex.gap-2.py-2.px-4.container(@click="selectOpen")
|
||||
.relative.flex.flex-col
|
||||
.not-italic.text-base.select {{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.icon-down-arrow.icon
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "BaseSelect",
|
||||
props: {
|
||||
id: String,
|
||||
optionData: String,
|
||||
listData: Array,
|
||||
chooseOption: Function,
|
||||
isOpen: Boolean,
|
||||
selectOpen: Function
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.container
|
||||
align-items: center
|
||||
cursor: pointer
|
||||
border-radius: 4px
|
||||
width: fit-content
|
||||
background-color: var(--bg-ligth-blue-color)
|
||||
.select
|
||||
appearance: none
|
||||
border: none
|
||||
outline: none
|
||||
cursor: pointer
|
||||
color: rgba(9, 10, 21, 0.5)
|
||||
background-color: rgba(9, 10, 21, 0)
|
||||
&::-webkit-calendar-picker-indicator
|
||||
display: none
|
||||
-webkit-appearance: none
|
||||
.options
|
||||
z-index: 3
|
||||
width: max-content
|
||||
background-color: var(--bg-ligth-blue-color)
|
||||
.option
|
||||
color: var(--font-black-color)
|
||||
&:hover
|
||||
background-color: var(--btn-blue-color)
|
||||
.select-form-separator
|
||||
background-color: rgba(65, 105, 225, 0.2)
|
||||
height: 24px
|
||||
width: 1px
|
||||
border-radius: 1px
|
||||
.icon
|
||||
text-align: center
|
||||
color: var(--font-dark-blue-color)
|
||||
&:hover
|
||||
color: var(--btn-blue-color)
|
||||
</style>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
.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")
|
||||
img.icon-wrapper.flex.justify-center.items-center.loupe(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
|
||||
.options-wrapper.flex.flex-col.box-border.p-4.mt-1(v-if="isOpen")
|
||||
@@ -14,98 +14,98 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "HeaderInputs",
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
selectedFilter: "Календарь",
|
||||
filters: ["Календарь", "Клиенты"],
|
||||
isOpen: false
|
||||
}
|
||||
export default {
|
||||
name: "HeaderInputs",
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
selectedFilter: "Календарь",
|
||||
filters: ["Календарь", "Клиенты"],
|
||||
isOpen: false,
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
changeState() {
|
||||
this.isOpen = !this.isOpen;
|
||||
},
|
||||
computed: {
|
||||
|
||||
selectFilter(filter) {
|
||||
this.selectedFilter = filter;
|
||||
},
|
||||
methods: {
|
||||
changeState() {
|
||||
this.isOpen = !this.isOpen
|
||||
},
|
||||
selectFilter(filter) {
|
||||
this.selectedFilter = filter
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.open
|
||||
.arrow
|
||||
transform: rotate(180deg)
|
||||
|
||||
.header-inputs-wrapper
|
||||
background-color: var(--bg-white-color)
|
||||
|
||||
.select-container
|
||||
border-radius: 4px 0 0 4px
|
||||
border: 1px solid var(--border-light-grey-color)
|
||||
border-right: none
|
||||
|
||||
.icon-wrapper
|
||||
width: 24px
|
||||
height: 24px
|
||||
|
||||
.loupe
|
||||
font-size: 21px
|
||||
|
||||
.custom-input
|
||||
border: none
|
||||
outline: none
|
||||
background-color: transparent
|
||||
color: var(--btn-blue-color)
|
||||
height: 100%
|
||||
|
||||
.select-wrapper
|
||||
position: relative
|
||||
z-index: 2
|
||||
cursor: pointer
|
||||
|
||||
.select-input
|
||||
width: 100px
|
||||
|
||||
.options-wrapper
|
||||
width: 172px
|
||||
background-color: var(--bg-white-color)
|
||||
color: var(--font-dark-blue-color)
|
||||
border-radius: 4px
|
||||
position: absolute
|
||||
box-shadow: var(--default-shadow)
|
||||
|
||||
.search-input
|
||||
border-radius: 0 4px 4px 0
|
||||
border: 1px solid var(--border-light-grey-color)
|
||||
&::placeholder
|
||||
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
|
||||
|
||||
.open
|
||||
.arrow
|
||||
font-size: 8px
|
||||
transform: rotate(180deg)
|
||||
|
||||
.wrapper
|
||||
background-color: var(--bg-white-color)
|
||||
display: flex
|
||||
align-items: center
|
||||
|
||||
.select-container
|
||||
border-radius: 4px 0 0 4px
|
||||
border: 1px solid var(--border-light-grey-color)
|
||||
border-right: none
|
||||
|
||||
.icon-wrapper
|
||||
width: 24px
|
||||
height: 24px
|
||||
|
||||
.loupe
|
||||
font-size: 21px
|
||||
|
||||
.custom-input
|
||||
border: none
|
||||
outline: none
|
||||
background-color: transparent
|
||||
color: var(--btn-blue-color)
|
||||
height: 100%
|
||||
|
||||
.select-wrapper
|
||||
position: relative
|
||||
z-index: 2
|
||||
cursor: pointer
|
||||
|
||||
.select-input
|
||||
width: 100px
|
||||
|
||||
.options-wrapper
|
||||
width: 172px
|
||||
background-color: var(--bg-white-color)
|
||||
color: var(--font-dark-blue-color)
|
||||
border-radius: 4px
|
||||
position: absolute
|
||||
box-shadow: var(--default-shadow)
|
||||
|
||||
.search-input
|
||||
border-radius: 0 4px 4px 0
|
||||
border: 1px solid var(--border-light-grey-color)
|
||||
&::placeholder
|
||||
color: var(--font-grey-color)
|
||||
|
||||
.option-list
|
||||
cursor: pointer
|
||||
&:last-child
|
||||
margin: 0
|
||||
&:hover
|
||||
color: var(--btn-blue-color)
|
||||
|
||||
.icon-ok
|
||||
font-size: 13px
|
||||
.options-text
|
||||
display: flex
|
||||
align-items: center
|
||||
|
||||
.icon-down-arrow
|
||||
width: 16px
|
||||
height: 16px
|
||||
</style>
|
||||
.arrow
|
||||
font-size: 8px
|
||||
color: var(--btn-blue-color)
|
||||
|
||||
.icon-ok
|
||||
font-size: 13px
|
||||
|
||||
.icon-down-arrow
|
||||
width: 16px
|
||||
height: 16px
|
||||
</style>
|
||||
|
||||
@@ -13,52 +13,52 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import img from "@/assets/images/avatar.svg"
|
||||
import HeaderInputs from "./HeaderInputs.vue"
|
||||
export default {
|
||||
name: "TheHeader",
|
||||
components: {HeaderInputs},
|
||||
data() {
|
||||
return {
|
||||
avatarSrc: img
|
||||
}
|
||||
}
|
||||
}
|
||||
import img from "@/assets/images/avatar.svg";
|
||||
import HeaderInputs from "./HeaderInputs.vue";
|
||||
export default {
|
||||
name: "TheHeader",
|
||||
components: { HeaderInputs },
|
||||
data() {
|
||||
return {
|
||||
avatarSrc: img,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.header-buttons
|
||||
outline: none
|
||||
border: none
|
||||
background-color: transparent
|
||||
cursor: pointer
|
||||
color: var(--font-dark-blue-color)
|
||||
.header-buttons
|
||||
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)
|
||||
position: relative
|
||||
z-index: 2
|
||||
.header-wrapper
|
||||
width: 100%
|
||||
background-color: var(--bg-white-color)
|
||||
position: relative
|
||||
z-index: 2
|
||||
|
||||
.left-side
|
||||
cursor: pointer
|
||||
.left-side
|
||||
cursor: pointer
|
||||
|
||||
.logo-img
|
||||
height: 32px
|
||||
width: 70px
|
||||
.logo-img
|
||||
height: 32px
|
||||
width: 70px
|
||||
|
||||
.icon-down-arrow
|
||||
width: 24px
|
||||
height: 24px
|
||||
font-size: 12px
|
||||
.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)
|
||||
.icon-bell
|
||||
width: 24px
|
||||
height: 24px
|
||||
font-size: 24px
|
||||
color: var(--font-dark-blue-color)
|
||||
|
||||
.avatar-img
|
||||
width: 32px
|
||||
height: 32px
|
||||
</style>
|
||||
.avatar-img
|
||||
width: 32px
|
||||
height: 32px
|
||||
</style>
|
||||
|
||||
@@ -13,16 +13,16 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TheButtonSidebar from "@/components/base/buttons/BaseSidebarButton";
|
||||
import TheButtonSidebar from "@/components/base/buttons/BaseSidebarButton";
|
||||
|
||||
export default {
|
||||
name: "TheSidebar",
|
||||
components: {TheButtonSidebar},
|
||||
}
|
||||
export default {
|
||||
name: "TheSidebar",
|
||||
components: { TheButtonSidebar },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.sidebar
|
||||
max-width: 80px
|
||||
background-color: #F8F8FF
|
||||
.sidebar
|
||||
max-width: 80px
|
||||
background-color: #F8F8FF
|
||||
</style>
|
||||
|
||||
63
src/components/base/BaseSelect.vue
Normal file
63
src/components/base/BaseSelect.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template lang="pug">
|
||||
.flex.gap-2.py-2.px-4.w-full.container(@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}")
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "BaseSelect",
|
||||
props: {
|
||||
id: String,
|
||||
width: String,
|
||||
optionData: String,
|
||||
listData: Array,
|
||||
chooseOption: Function,
|
||||
isOpen: Boolean,
|
||||
selectOpen: Function,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.container
|
||||
align-items: center
|
||||
cursor: pointer
|
||||
border-radius: 4px
|
||||
width: fit-content
|
||||
background-color: var(--bg-ligth-blue-color)
|
||||
.select
|
||||
appearance: none
|
||||
border: none
|
||||
outline: none
|
||||
cursor: pointer
|
||||
color: rgba(9, 10, 21, 0.5)
|
||||
background-color: rgba(9, 10, 21, 0)
|
||||
&::-webkit-calendar-picker-indicator
|
||||
display: none
|
||||
-webkit-appearance: none
|
||||
.options
|
||||
z-index: 3
|
||||
width: max-content
|
||||
background-color: var(--bg-ligth-blue-color)
|
||||
.option
|
||||
color: var(--font-black-color)
|
||||
&:hover
|
||||
background-color: var(--btn-blue-color)
|
||||
.select-form-separator
|
||||
background-color: rgba(65, 105, 225, 0.2)
|
||||
height: 24px
|
||||
width: 1px
|
||||
border-radius: 1px
|
||||
.icon
|
||||
text-align: center
|
||||
color: var(--font-dark-blue-color)
|
||||
&:hover
|
||||
color: var(--btn-blue-color)
|
||||
&.open
|
||||
transform: rotate(180deg)
|
||||
</style>
|
||||
@@ -3,18 +3,18 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "AddEventButton"
|
||||
}
|
||||
export default {
|
||||
name: "AddEventButton",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.event-button
|
||||
outline: none
|
||||
border: none
|
||||
cursor: pointer
|
||||
width: fit-content
|
||||
color: var(--bg-white-color)
|
||||
background-color: var(--btn-blue-color)
|
||||
border-radius: 4px
|
||||
.event-button
|
||||
outline: none
|
||||
border: none
|
||||
cursor: pointer
|
||||
width: fit-content
|
||||
color: var(--bg-white-color)
|
||||
background-color: var(--btn-blue-color)
|
||||
border-radius: 4px
|
||||
</style>
|
||||
|
||||
@@ -3,20 +3,20 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ButtonPlus",
|
||||
}
|
||||
export default {
|
||||
name: "ButtonPlus",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.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)
|
||||
border-radius: 50%
|
||||
.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)
|
||||
border-radius: 50%
|
||||
</style>
|
||||
|
||||
@@ -5,39 +5,39 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ButtonSidebar",
|
||||
props: {
|
||||
path: String,
|
||||
id: String,
|
||||
changeStyle: Function
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
selectedStyle: false
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
name: "ButtonSidebar",
|
||||
props: {
|
||||
path: String,
|
||||
id: String,
|
||||
changeStyle: Function,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectedStyle: false,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.button
|
||||
width: fit-content
|
||||
cursor: pointer
|
||||
background-color: rgb(65, 105, 225, 0)
|
||||
border-radius: 0 4px 4px 0
|
||||
border-left-color: rgb(65, 105, 225, 0)
|
||||
border-left-width: 4px
|
||||
border-right: none
|
||||
border-top: none
|
||||
border-bottom: none
|
||||
border-left-style: solid
|
||||
.button:focus
|
||||
background-color: rgb(65, 105, 225, 0.3)
|
||||
border-left-color: rgb(65, 105, 225, 1)
|
||||
color: #4169E1
|
||||
.button:hover
|
||||
background-color: rgb(65, 105, 225, 0.3)
|
||||
border-left-color: rgb(65, 105, 225, 1)
|
||||
color: #4169E1
|
||||
.button
|
||||
width: fit-content
|
||||
cursor: pointer
|
||||
background-color: rgba(65, 105, 225, 0)
|
||||
border-radius: 0 4px 4px 0
|
||||
border-left-color: rgba(65, 105, 225, 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
|
||||
.button:hover
|
||||
background-color: rgba(65, 105, 225, 0.3)
|
||||
border-left-color: rgba(65, 105, 225, 1)
|
||||
color: #4169E1
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user