Merge pull request #20 from dderbentsov/UC-5
Поправлены стили формы добавления ивента, исправлены зависимости pack…
This commit is contained in:
Алексей Дёмин
@@ -1,5 +1,3 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
presets: [
|
presets: ["@vue/cli-plugin-babel/preset"],
|
||||||
'@vue/cli-plugin-babel/preset'
|
};
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|||||||
2051
package-lock.json
generated
2051
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
14
package.json
14
package.json
@@ -8,7 +8,6 @@
|
|||||||
"lint": "vue-cli-service lint"
|
"lint": "vue-cli-service lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"core-js": "^3.8.3",
|
|
||||||
"vue": "^3.2.13",
|
"vue": "^3.2.13",
|
||||||
"vue-router": "^4.1.5",
|
"vue-router": "^4.1.5",
|
||||||
"vuex": "^4.0.2"
|
"vuex": "^4.0.2"
|
||||||
@@ -21,13 +20,13 @@
|
|||||||
"@vue/cli-service": "~5.0.0",
|
"@vue/cli-service": "~5.0.0",
|
||||||
"@webdiscus/pug-loader": "^2.9.4",
|
"@webdiscus/pug-loader": "^2.9.4",
|
||||||
"autoprefixer": "^10.4.12",
|
"autoprefixer": "^10.4.12",
|
||||||
"eslint": "^7.32.0",
|
"eslint": "^8.25.0",
|
||||||
"eslint-plugin-vue": "^8.0.3",
|
"eslint-config-prettier": "^8.3.0",
|
||||||
"node-sass": "^7.0.3",
|
"eslint-plugin-prettier": "^4.0.0",
|
||||||
|
"eslint-plugin-vue": "^9.6.0",
|
||||||
"postcss": "^8.4.17",
|
"postcss": "^8.4.17",
|
||||||
"postcss-loader": "^7.0.1",
|
"postcss-loader": "^7.0.1",
|
||||||
"pug": "^3.0.2",
|
"prettier": "^2.4.1",
|
||||||
"pug-plain-loader": "^1.1.0",
|
|
||||||
"sass-loader": "^13.0.2",
|
"sass-loader": "^13.0.2",
|
||||||
"tailwindcss": "^3.1.8"
|
"tailwindcss": "^3.1.8"
|
||||||
},
|
},
|
||||||
@@ -38,7 +37,8 @@
|
|||||||
},
|
},
|
||||||
"extends": [
|
"extends": [
|
||||||
"plugin:vue/vue3-essential",
|
"plugin:vue/vue3-essential",
|
||||||
"eslint:recommended"
|
"eslint:recommended",
|
||||||
|
"plugin:prettier/recommended"
|
||||||
],
|
],
|
||||||
"parserOptions": {
|
"parserOptions": {
|
||||||
"parser": "@babel/eslint-parser"
|
"parser": "@babel/eslint-parser"
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
const tailwind = require('tailwindcss')
|
const tailwind = require("tailwindcss");
|
||||||
const autoprefixer = require('autoprefixer')
|
const autoprefixer = require("autoprefixer");
|
||||||
const tailwindConfig = require('./tailwind.config')
|
const tailwindConfig = require("./tailwind.config");
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
plugins: [tailwind(tailwindConfig), autoprefixer],
|
plugins: [tailwind(tailwindConfig), autoprefixer],
|
||||||
}
|
};
|
||||||
|
|||||||
47
src/App.vue
47
src/App.vue
@@ -1,39 +1,30 @@
|
|||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
.app-container
|
.flex.flex-col.w-full.h-full.gap-y-2
|
||||||
the-header
|
the-header
|
||||||
.pages-container
|
.flex.flex-auto
|
||||||
the-sidebar
|
the-sidebar
|
||||||
router-view
|
router-view
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import TheHeader from "@/components/TheHeader";
|
import TheHeader from "@/components/TheHeader";
|
||||||
import TheSidebar from "@/components/TheSidebar";
|
import TheSidebar from "@/components/TheSidebar";
|
||||||
export default {
|
export default {
|
||||||
name: "App",
|
name: "App",
|
||||||
components: {TheHeader, TheSidebar}
|
components: { TheHeader, TheSidebar },
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="sass">
|
<style lang="sass">
|
||||||
#app
|
#app
|
||||||
font-feature-settings: "pnum" on, "lnum" on
|
font-feature-settings: 'pnum' on, 'lnum' on
|
||||||
-webkit-font-smoothing: antialiased
|
-webkit-font-smoothing: antialiased
|
||||||
-moz-osx-font-smoothing: grayscale
|
-moz-osx-font-smoothing: grayscale
|
||||||
height: 100%
|
height: 100%
|
||||||
width: 100%
|
width: 100%
|
||||||
line-height: normal
|
line-height: normal
|
||||||
.pages-container
|
body
|
||||||
display: flex
|
background-color: var(--bg-lavender-color)
|
||||||
flex: auto
|
margin: 0
|
||||||
.app-container
|
padding: 0
|
||||||
height: 100%
|
|
||||||
width: 100%
|
|
||||||
row-gap: 8px
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
body
|
|
||||||
background-color: var(--bg-lavender-color)
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -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 }")
|
.header-inputs-wrapper.flex.items-center.font-medium.text-base(:class="{ open: isOpen }")
|
||||||
.select-container(@click="changeState")
|
.select-container(@click="changeState")
|
||||||
.select-wrapper.flex.items-center.mx-4.my-2
|
.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 }}
|
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.flex.justify-center.items-center
|
||||||
.options-wrapper.flex.flex-col.box-border.p-4.mt-1(v-if="isOpen")
|
.options-wrapper.flex.flex-col.box-border.p-4.mt-1(v-if="isOpen")
|
||||||
@@ -14,98 +14,98 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "HeaderInputs",
|
name: "HeaderInputs",
|
||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
selectedFilter: "Календарь",
|
selectedFilter: "Календарь",
|
||||||
filters: ["Календарь", "Клиенты"],
|
filters: ["Календарь", "Клиенты"],
|
||||||
isOpen: false
|
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>
|
</script>
|
||||||
|
|
||||||
<style lang="sass" scoped>
|
<style lang="sass" scoped>
|
||||||
.open
|
.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
|
|
||||||
|
|
||||||
.arrow
|
.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)
|
color: var(--btn-blue-color)
|
||||||
|
|
||||||
.icon-ok
|
.options-text
|
||||||
font-size: 13px
|
display: flex
|
||||||
|
align-items: center
|
||||||
|
|
||||||
.icon-down-arrow
|
.arrow
|
||||||
width: 16px
|
font-size: 8px
|
||||||
height: 16px
|
color: var(--btn-blue-color)
|
||||||
</style>
|
|
||||||
|
.icon-ok
|
||||||
|
font-size: 13px
|
||||||
|
|
||||||
|
.icon-down-arrow
|
||||||
|
width: 16px
|
||||||
|
height: 16px
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -13,52 +13,52 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import img from "@/assets/images/avatar.svg"
|
import img from "@/assets/images/avatar.svg";
|
||||||
import HeaderInputs from "./HeaderInputs.vue"
|
import HeaderInputs from "./HeaderInputs.vue";
|
||||||
export default {
|
export default {
|
||||||
name: "TheHeader",
|
name: "TheHeader",
|
||||||
components: {HeaderInputs},
|
components: { HeaderInputs },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
avatarSrc: img
|
avatarSrc: img,
|
||||||
}
|
};
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="sass" scoped>
|
<style lang="sass" scoped>
|
||||||
.header-buttons
|
.header-buttons
|
||||||
outline: none
|
outline: none
|
||||||
border: none
|
border: none
|
||||||
background-color: transparent
|
background-color: transparent
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
color: var(--font-dark-blue-color)
|
color: var(--font-dark-blue-color)
|
||||||
|
|
||||||
.header-wrapper
|
.header-wrapper
|
||||||
width: 100%
|
width: 100%
|
||||||
background-color: var(--bg-white-color)
|
background-color: var(--bg-white-color)
|
||||||
position: relative
|
position: relative
|
||||||
z-index: 2
|
z-index: 2
|
||||||
|
|
||||||
.left-side
|
.left-side
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
|
|
||||||
.logo-img
|
.logo-img
|
||||||
height: 32px
|
height: 32px
|
||||||
width: 70px
|
width: 70px
|
||||||
|
|
||||||
.icon-down-arrow
|
.icon-down-arrow
|
||||||
width: 24px
|
width: 24px
|
||||||
height: 24px
|
height: 24px
|
||||||
font-size: 12px
|
font-size: 12px
|
||||||
|
|
||||||
.icon-bell
|
.icon-bell
|
||||||
width: 24px
|
width: 24px
|
||||||
height: 24px
|
height: 24px
|
||||||
font-size: 24px
|
font-size: 24px
|
||||||
color: var(--font-dark-blue-color)
|
color: var(--font-dark-blue-color)
|
||||||
|
|
||||||
.avatar-img
|
.avatar-img
|
||||||
width: 32px
|
width: 32px
|
||||||
height: 32px
|
height: 32px
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -13,16 +13,16 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import TheButtonSidebar from "@/components/base/buttons/BaseSidebarButton";
|
import TheButtonSidebar from "@/components/base/buttons/BaseSidebarButton";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "TheSidebar",
|
name: "TheSidebar",
|
||||||
components: {TheButtonSidebar},
|
components: { TheButtonSidebar },
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="sass" scoped>
|
<style lang="sass" scoped>
|
||||||
.sidebar
|
.sidebar
|
||||||
max-width: 80px
|
max-width: 80px
|
||||||
background-color: #F8F8FF
|
background-color: #F8F8FF
|
||||||
</style>
|
</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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "AddEventButton"
|
name: "AddEventButton",
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="sass" scoped>
|
<style lang="sass" scoped>
|
||||||
.event-button
|
.event-button
|
||||||
outline: none
|
outline: none
|
||||||
border: none
|
border: none
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
width: fit-content
|
width: fit-content
|
||||||
color: var(--bg-white-color)
|
color: var(--bg-white-color)
|
||||||
background-color: var(--btn-blue-color)
|
background-color: var(--btn-blue-color)
|
||||||
border-radius: 4px
|
border-radius: 4px
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -3,20 +3,20 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "ButtonPlus",
|
name: "ButtonPlus",
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="sass" scoped>
|
<style lang="sass" scoped>
|
||||||
.button-plus
|
.button-plus
|
||||||
outline: none
|
outline: none
|
||||||
border: none
|
border: none
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
width: 24px
|
width: 24px
|
||||||
height: 24px
|
height: 24px
|
||||||
max-height: 24px
|
max-height: 24px
|
||||||
color: #4772F2
|
color: #4772F2
|
||||||
background-color: rgba(65, 105, 225, 0.25)
|
background-color: rgba(65, 105, 225, 0.25)
|
||||||
border-radius: 50%
|
border-radius: 50%
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -5,39 +5,39 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "ButtonSidebar",
|
name: "ButtonSidebar",
|
||||||
props: {
|
props: {
|
||||||
path: String,
|
path: String,
|
||||||
id: String,
|
id: String,
|
||||||
changeStyle: Function
|
changeStyle: Function,
|
||||||
},
|
},
|
||||||
data(){
|
data() {
|
||||||
return {
|
return {
|
||||||
selectedStyle: false
|
selectedStyle: false,
|
||||||
}
|
};
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="sass" scoped>
|
<style lang="sass" scoped>
|
||||||
.button
|
.button
|
||||||
width: fit-content
|
width: fit-content
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
background-color: rgb(65, 105, 225, 0)
|
background-color: rgba(65, 105, 225, 0)
|
||||||
border-radius: 0 4px 4px 0
|
border-radius: 0 4px 4px 0
|
||||||
border-left-color: rgb(65, 105, 225, 0)
|
border-left-color: rgba(65, 105, 225, 0)
|
||||||
border-left-width: 4px
|
border-left-width: 4px
|
||||||
border-right: none
|
border-right: none
|
||||||
border-top: none
|
border-top: none
|
||||||
border-bottom: none
|
border-bottom: none
|
||||||
border-left-style: solid
|
border-left-style: solid
|
||||||
.button:focus
|
.button:focus
|
||||||
background-color: rgb(65, 105, 225, 0.3)
|
background-color: rgba(65, 105, 225, 0.3)
|
||||||
border-left-color: rgb(65, 105, 225, 1)
|
border-left-color: rgba(65, 105, 225, 1)
|
||||||
color: #4169E1
|
color: #4169E1
|
||||||
.button:hover
|
.button:hover
|
||||||
background-color: rgb(65, 105, 225, 0.3)
|
background-color: rgba(65, 105, 225, 0.3)
|
||||||
border-left-color: rgb(65, 105, 225, 1)
|
border-left-color: rgba(65, 105, 225, 1)
|
||||||
color: #4169E1
|
color: #4169E1
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
14
src/main.js
14
src/main.js
@@ -1,9 +1,9 @@
|
|||||||
import { createApp } from 'vue'
|
import { createApp } from "vue";
|
||||||
import App from './App.vue'
|
import App from "./App.vue";
|
||||||
import router from "./router";
|
import router from "./router";
|
||||||
import './assets/sass/fonts.sass'
|
import "./assets/sass/fonts.sass";
|
||||||
import './assets/sass/tailwind.sass'
|
import "./assets/sass/tailwind.sass";
|
||||||
import './assets/sass/variables.sass'
|
import "./assets/sass/variables.sass";
|
||||||
import './assets/css/iconfonts.css'
|
import "./assets/css/iconfonts.css";
|
||||||
|
|
||||||
createApp(App).use(router).mount('#app')
|
createApp(App).use(router).mount("#app");
|
||||||
|
|||||||
@@ -3,9 +3,9 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import CalendarFormAddEvent from "./components/CalendarFormAddEvent.vue";
|
import CalendarFormAddEvent from "./components/CalendarFormAddEvent.vue";
|
||||||
export default {
|
export default {
|
||||||
name: "TheCalendar",
|
name: "TheCalendar",
|
||||||
components: {CalendarFormAddEvent}
|
components: { CalendarFormAddEvent },
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,11 +1,12 @@
|
|||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
.flex.flex-col.gap-y-6.pt-5.pb-6.px-8.event-form(v-if="formOpen")
|
.flex.flex-col.gap-y-6.pt-5.pb-6.px-8.event-form(v-if="formOpen" )
|
||||||
.flex.flex-col.gap-y-2
|
.flex.flex-col.gap-y-2
|
||||||
.flex.justify-between.pt-2
|
.flex.justify-between.pt-2
|
||||||
span.not-italic.text-xs.opacity-40.leading-3 Ответственный
|
span.not-italic.text-xs.opacity-40.leading-3 Ответственный
|
||||||
.icon-cancel.close-icon.text-xs(@click="closeEventForm")
|
.icon-cancel.close-icon.text-xs(@click="closeEventForm")
|
||||||
base-select(
|
base-select(
|
||||||
id="responsible"
|
id="responsible"
|
||||||
|
width="205px"
|
||||||
:option-data="eventData.responsible"
|
:option-data="eventData.responsible"
|
||||||
:list-data="listResponsible"
|
:list-data="listResponsible"
|
||||||
:choose-option="chooseOption"
|
:choose-option="chooseOption"
|
||||||
@@ -38,6 +39,7 @@
|
|||||||
span.not-italic.text-xs.opacity-40.leading-3 Вид события
|
span.not-italic.text-xs.opacity-40.leading-3 Вид события
|
||||||
base-select(
|
base-select(
|
||||||
id="kind"
|
id="kind"
|
||||||
|
width="118px"
|
||||||
:option-data="eventData.kindEvent"
|
:option-data="eventData.kindEvent"
|
||||||
:list-data="kindEvents"
|
:list-data="kindEvents"
|
||||||
:choose-option="chooseOption"
|
:choose-option="chooseOption"
|
||||||
@@ -56,100 +58,104 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import BaseSelect from "@/components/BaseSelect";
|
import BaseSelect from "@/components/base/BaseSelect";
|
||||||
import AddEventButton from "@/components/base/buttons/BaseAddEvent";
|
import AddEventButton from "@/components/base/buttons/BaseAddEvent";
|
||||||
import ButtonPlus from "@/components/base/buttons/BaseButtonPlus";
|
import ButtonPlus from "@/components/base/buttons/BaseButtonPlus";
|
||||||
export default {
|
export default {
|
||||||
name: "FormChangeEvent",
|
name: "FormChangeEvent",
|
||||||
components: {AddEventButton, ButtonPlus, BaseSelect},
|
components: { AddEventButton, ButtonPlus, BaseSelect },
|
||||||
props: {
|
props: {
|
||||||
listResponsible: {
|
listResponsible: {
|
||||||
default: ["Захарова А.О.", "Коломойцев И.К.", "Ситников А.Г."]
|
default: ["Захарова А.О.", "Коломойцев И.К.", "Ситников А.Г."],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formOpen: true,
|
||||||
|
selectResponsibleOpen: false,
|
||||||
|
selectKindEventOpen: false,
|
||||||
|
listFriendInfo: [1],
|
||||||
|
listContacts: [1],
|
||||||
|
kindEvents: ["Встреча", "Планерка", "Интервью", "Важная работа"],
|
||||||
|
eventData: {
|
||||||
|
responsible: "Выберите ответственного",
|
||||||
|
eventClient: "",
|
||||||
|
timeEvent: {
|
||||||
|
firstTime: "11:00",
|
||||||
|
secondTime: "12:30",
|
||||||
|
},
|
||||||
|
friendInfo: {},
|
||||||
|
kindEvent: "Вид события",
|
||||||
|
contacts: {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
createEvent() {
|
||||||
|
this.formOpen = !this.formOpen;
|
||||||
|
},
|
||||||
|
addFriendInfo(e) {
|
||||||
|
if (e.currentTarget.id === "addInfo") {
|
||||||
|
this.listFriendInfo.push(
|
||||||
|
this.listFriendInfo[this.listFriendInfo.length - 1] + 1
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (e.currentTarget.id === "addContact") {
|
||||||
|
this.listContacts.push(
|
||||||
|
this.listContacts[this.listContacts.length - 1] + 1
|
||||||
|
);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
closeEventForm() {
|
||||||
return {
|
this.formOpen = !this.formOpen;
|
||||||
formOpen: true,
|
},
|
||||||
selectResponsibleOpen: false,
|
openSelectResponsible() {
|
||||||
selectKindEventOpen: false,
|
this.selectResponsibleOpen = !this.selectResponsibleOpen;
|
||||||
listFriendInfo: [1],
|
},
|
||||||
listContacts: [1],
|
openSelectKindEvent() {
|
||||||
kindEvents: ["Встреча", "Планерка", "Интервью","Важная работа"],
|
this.selectKindEventOpen = !this.selectKindEventOpen;
|
||||||
eventData: {
|
},
|
||||||
responsible: "Выберите ответственного",
|
chooseOption(event) {
|
||||||
eventClient: "",
|
if (event.currentTarget.id === "responsible") {
|
||||||
timeEvent: {
|
this.eventData.responsible = this.listResponsible[event.target.id];
|
||||||
firstTime: "11:00",
|
}
|
||||||
secondTime: "12:30",
|
if (event.currentTarget.id === "kind") {
|
||||||
},
|
this.eventData.kindEvent = this.kindEvents[event.target.id];
|
||||||
friendInfo: {},
|
|
||||||
kindEvent: "Вид события",
|
|
||||||
contacts: {}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
},
|
||||||
createEvent() {
|
};
|
||||||
this.formOpen = !this.formOpen
|
|
||||||
},
|
|
||||||
addFriendInfo(e) {
|
|
||||||
if(e.currentTarget.id === "addInfo") {
|
|
||||||
this.listFriendInfo.push(this.listFriendInfo[this.listFriendInfo.length-1]+1)
|
|
||||||
}
|
|
||||||
if(e.currentTarget.id === "addContact") {
|
|
||||||
this.listContacts.push(this.listContacts[this.listContacts.length-1]+1)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
closeEventForm() {
|
|
||||||
this.formOpen=!this.formOpen
|
|
||||||
},
|
|
||||||
openSelectResponsible() {
|
|
||||||
this.selectResponsibleOpen = !this.selectResponsibleOpen
|
|
||||||
},
|
|
||||||
openSelectKindEvent() {
|
|
||||||
this.selectKindEventOpen = !this.selectKindEventOpen
|
|
||||||
},
|
|
||||||
chooseOption(event) {
|
|
||||||
if(event.currentTarget.id === "responsible") {
|
|
||||||
this.eventData.responsible=this.listResponsible[event.target.id]
|
|
||||||
}
|
|
||||||
if(event.currentTarget.id === "kind") {
|
|
||||||
this.eventData.kindEvent=this.kindEvents[event.target.id]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="sass" scoped>
|
<style lang="sass" scoped>
|
||||||
.event-form
|
.event-form
|
||||||
height: fit-content
|
height: fit-content
|
||||||
min-width: 448px
|
min-width: 448px
|
||||||
background-color: var(--bg-white-color)
|
background-color: var(--bg-white-color)
|
||||||
box-shadow: -4px -4px 16px rgba(9, 10, 21, 0.25), 4px 4px 16px rgba(9, 10, 21, 0.25)
|
box-shadow: -4px -4px 16px rgba(9, 10, 21, 0.25), 4px 4px 16px rgba(9, 10, 21, 0.25)
|
||||||
border-radius: 4px
|
border-radius: 4px
|
||||||
.form-item
|
.form-item
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
border-radius: 4px
|
border-radius: 4px
|
||||||
width: fit-content
|
width: fit-content
|
||||||
background-color: var(--bg-ligth-blue-color)
|
background-color: var(--bg-ligth-blue-color)
|
||||||
.item-input
|
.item-input
|
||||||
appearance: none
|
appearance: none
|
||||||
border: none
|
border: none
|
||||||
outline: none
|
outline: none
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
color: rgba(9, 10, 21, 0.5)
|
color: rgba(9, 10, 21, 0.5)
|
||||||
background-color: rgba(9, 10, 21, 0)
|
background-color: rgba(9, 10, 21, 0)
|
||||||
&::-webkit-calendar-picker-indicator
|
&::-webkit-calendar-picker-indicator
|
||||||
display: none
|
display: none
|
||||||
-webkit-appearance: none
|
-webkit-appearance: none
|
||||||
.icon
|
.icon
|
||||||
width: 24px
|
width: 24px
|
||||||
height: 24px
|
height: 24px
|
||||||
color: var(--font-dark-blue-color)
|
color: var(--font-dark-blue-color)
|
||||||
.close-icon
|
.close-icon
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
color: var(--font-dark-blue-color)
|
color: var(--font-dark-blue-color)
|
||||||
&:hover
|
&:hover
|
||||||
color: var(--btn-blue-color)
|
color: var(--btn-blue-color)
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "TheHome"
|
name: "TheHome",
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "TheSettings"
|
name: "TheSettings",
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "TheUser"
|
name: "TheUser",
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import {createRouter, createWebHashHistory} from "vue-router";
|
import { createRouter, createWebHashHistory } from "vue-router";
|
||||||
import TheHome from "@/pages/home/TheHome.vue";
|
import TheHome from "@/pages/home/TheHome.vue";
|
||||||
import TheCalendar from "@/pages/calendar/TheCalendar";
|
import TheCalendar from "@/pages/calendar/TheCalendar";
|
||||||
import TheUser from "@/pages/user/TheUser";
|
import TheUser from "@/pages/user/TheUser";
|
||||||
@@ -10,6 +10,6 @@ export default createRouter({
|
|||||||
{ path: "/", component: TheHome },
|
{ path: "/", component: TheHome },
|
||||||
{ path: "/calendar", component: TheCalendar },
|
{ path: "/calendar", component: TheCalendar },
|
||||||
{ path: "/user", component: TheUser },
|
{ path: "/user", component: TheUser },
|
||||||
{ path: "/settings", component: TheSettings }
|
{ path: "/settings", component: TheSettings },
|
||||||
]
|
],
|
||||||
})
|
});
|
||||||
|
|||||||
@@ -1,25 +1,22 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
content: [
|
content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx,vue}"],
|
||||||
'./index.html',
|
|
||||||
'./src/**/*.{js,jsx,ts,tsx,vue}',
|
|
||||||
],
|
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
sans: ['Raleway', 'sans-serif'],
|
sans: ["Raleway", "sans-serif"],
|
||||||
},
|
},
|
||||||
fontSize: {
|
fontSize: {
|
||||||
xxs: ['12px', { lineHeight: '14px' }],
|
xxs: ["12px", { lineHeight: "14px" }],
|
||||||
xs: ['13px', { lineHeight: '15px' }],
|
xs: ["13px", { lineHeight: "15px" }],
|
||||||
sm: ['14px', { lineHeight: '16px' }],
|
sm: ["14px", { lineHeight: "16px" }],
|
||||||
base: ['16px', { lineHeight: '19px' }],
|
base: ["16px", { lineHeight: "19px" }],
|
||||||
m: ['16px', { lineHeight: '21.6px' }],
|
m: ["16px", { lineHeight: "21.6px" }],
|
||||||
lg: ['18px', { lineHeight: '21px' }],
|
lg: ["18px", { lineHeight: "21px" }],
|
||||||
xl: ['20px', { lineHeight: '23px' }],
|
xl: ["20px", { lineHeight: "23px" }],
|
||||||
'2xl': ['28px', { lineHeight: '33px' }],
|
"2xl": ["28px", { lineHeight: "33px" }],
|
||||||
'3xl': ['60px', { lineHeight: '70px' }],
|
"3xl": ["60px", { lineHeight: "70px" }],
|
||||||
'4xl': ['44px', { lineHeight: '48px' }],
|
"4xl": ["44px", { lineHeight: "48px" }],
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
plugins: [],
|
plugins: [],
|
||||||
|
|||||||
@@ -1,9 +1,8 @@
|
|||||||
const { defineConfig } = require('@vue/cli-service');
|
const { defineConfig } = require("@vue/cli-service");
|
||||||
|
|
||||||
module.exports = defineConfig({
|
module.exports = defineConfig({
|
||||||
|
|
||||||
chainWebpack: (config) => {
|
chainWebpack: (config) => {
|
||||||
const pugRule = config.module.rule('pug');
|
const pugRule = config.module.rule("pug");
|
||||||
|
|
||||||
pugRule.uses.clear();
|
pugRule.uses.clear();
|
||||||
pugRule.oneOfs.clear();
|
pugRule.oneOfs.clear();
|
||||||
@@ -17,30 +16,19 @@ module.exports = defineConfig({
|
|||||||
oneOf: [
|
oneOf: [
|
||||||
{
|
{
|
||||||
resourceQuery: /^\?vue/u,
|
resourceQuery: /^\?vue/u,
|
||||||
loader: '@webdiscus/pug-loader',
|
loader: "@webdiscus/pug-loader",
|
||||||
options: {
|
options: {
|
||||||
method: 'html',
|
method: "html",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
loader: '@webdiscus/pug-loader',
|
loader: "@webdiscus/pug-loader",
|
||||||
options: {
|
options: {
|
||||||
method: 'compile',
|
method: "compile",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
|
||||||
test: /\.scss$/,
|
|
||||||
use: [
|
|
||||||
{
|
|
||||||
loader: 'postcss-loader'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
loader: 'sass-loader'
|
|
||||||
},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user