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

добавлен svg шрифт. Заменены импорты svg, на использование шрифта

Browse Source
This commit is contained in:
DwCay
2022-10-10 18:50:09 +03:00
parent 9841b06c15
commit 6f72f731d6
21 changed files with 231 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/baseComponents/buttons/ButtonPlus.vue
View File

@@ -1,15 +1,10 @@
<template lang="pug">
button(class="button-plus")
basic-icon(width="12" height="12" icon-color="#4169E1" )
plus-icon
button.icon-plus(class="button-plus")
</template>
<script>
import PlusIcon from "@/components/iconsComponents/PlusIcon"
import BasicIcon from "@/components/iconsComponents/basicIcon/BasicIcon";
export default {
name: "ButtonPlus",
components: {BasicIcon, PlusIcon}
}
</script>
@@ -17,9 +12,10 @@
.button-plus
outline: none
border: none
font-size: 12px
cursor: pointer
width: fit-content
color: #4772F2
padding: 7px 7px 5px 7px
background-color: rgba(65, 105, 225, 0.25)
padding: 7px 7px 3px 7px
border-radius: 50%
</style>

5
src/components/iconsComponents/ArrowDownIcon.vue
View File

@@ -1,5 +0,0 @@
<template>
<g>
<path d="M7.53033 9.46967C7.23744 9.17678 6.76256 9.17678 6.46967 9.46967C6.17678 9.76256 6.17678 10.2374 6.46967 10.5303L7.53033 9.46967ZM12 15L11.4697 15.5303C11.7626 15.8232 12.2374 15.8232 12.5303 15.5303L12 15ZM17.5303 10.5303C17.8232 10.2374 17.8232 9.76256 17.5303 9.46967C17.2374 9.17678 16.7626 9.17678 16.4697 9.46967L17.5303 10.5303ZM6.46967 10.5303L11.4697 15.5303L12.5303 14.4697L7.53033 9.46967L6.46967 10.5303ZM12.5303 15.5303L17.5303 10.5303L16.4697 9.46967L11.4697 14.4697L12.5303 15.5303Z"/>
</g>
</template>

5
src/components/iconsComponents/CalendarIcon.vue
View File

@@ -1,5 +0,0 @@
<template>
<g>
<path d="M6.66675 17.5833C6.25253 17.5833 5.91675 17.9191 5.91675 18.3333C5.91675 18.7475 6.25253 19.0833 6.66675 19.0833V17.5833ZM25.7501 5C25.7501 4.58579 25.4143 4.25 25.0001 4.25C24.5859 4.25 24.2501 4.58579 24.2501 5H25.7501ZM24.2501 11.6667C24.2501 12.0809 24.5859 12.4167 25.0001 12.4167C25.4143 12.4167 25.7501 12.0809 25.7501 11.6667H24.2501ZM15.7501 5C15.7501 4.58579 15.4143 4.25 15.0001 4.25C14.5859 4.25 14.2501 4.58579 14.2501 5H15.7501ZM14.2501 11.6667C14.2501 12.0809 14.5859 12.4167 15.0001 12.4167C15.4143 12.4167 15.7501 12.0809 15.7501 11.6667H14.2501ZM33.3334 17.5833H6.66675V19.0833H33.3334V17.5833ZM7.41675 31.6667V11.6667H5.91675V31.6667H7.41675ZM10.0001 34.25C8.57335 34.25 7.41675 33.0934 7.41675 31.6667H5.91675C5.91675 33.9218 7.74492 35.75 10.0001 35.75V34.25ZM10.0001 7.58333C7.74492 7.58333 5.91675 9.4115 5.91675 11.6667H7.41675C7.41675 10.2399 8.57335 9.08333 10.0001 9.08333V7.58333ZM34.0834 31.6667V18.3333H32.5834V31.6667H34.0834ZM34.0834 18.3333V11.6667H32.5834V18.3333H34.0834ZM30.0001 35.75C32.2552 35.75 34.0834 33.9218 34.0834 31.6667H32.5834C32.5834 33.0934 31.4268 34.25 30.0001 34.25V35.75ZM30.0001 9.08333C31.4268 9.08333 32.5834 10.2399 32.5834 11.6667H34.0834C34.0834 9.4115 32.2552 7.58333 30.0001 7.58333V9.08333ZM30.0001 7.58333H10.0001V9.08333H30.0001V7.58333ZM30.0001 34.25H10.0001V35.75H30.0001V34.25ZM24.2501 5V11.6667H25.7501V5H24.2501ZM14.2501 5V11.6667H15.7501V5H14.2501Z"/>
</g>
</template>

5
src/components/iconsComponents/ClockIcon.vue
View File

@@ -1,5 +0,0 @@
<template>
<g>
<path d="M10.75 6.5C10.75 6.08579 10.4142 5.75 10 5.75C9.58579 5.75 9.25 6.08579 9.25 6.5H10.75ZM10 10.5H9.25C9.25 10.6989 9.32902 10.8897 9.46967 11.0303L10 10.5ZM11.4697 13.0303C11.7626 13.3232 12.2374 13.3232 12.5303 13.0303C12.8232 12.7374 12.8232 12.2626 12.5303 11.9697L11.4697 13.0303ZM9.25 6.5V10.5H10.75V6.5H9.25ZM9.46967 11.0303L11.4697 13.0303L12.5303 11.9697L10.5303 9.96967L9.46967 11.0303ZM18.25 10.5C18.25 15.0563 14.5563 18.75 10 18.75V20.25C15.3848 20.25 19.75 15.8848 19.75 10.5H18.25ZM10 18.75C5.44365 18.75 1.75 15.0563 1.75 10.5H0.25C0.25 15.8848 4.61522 20.25 10 20.25V18.75ZM1.75 10.5C1.75 5.94365 5.44365 2.25 10 2.25V0.75C4.61522 0.75 0.25 5.11522 0.25 10.5H1.75ZM10 2.25C14.5563 2.25 18.25 5.94365 18.25 10.5H19.75C19.75 5.11522 15.3848 0.75 10 0.75V2.25Z"/>
</g>
</template>

5
src/components/iconsComponents/CloseIcon.vue
View File

@@ -1,5 +0,0 @@
<template>
<g>
<path d="M15.5303 1.53033C15.8232 1.23744 15.8232 0.762563 15.5303 0.46967C15.2374 0.176777 14.7626 0.176777 14.4697 0.46967L15.5303 1.53033ZM0.46967 14.4697C0.176777 14.7626 0.176777 15.2374 0.46967 15.5303C0.762563 15.8232 1.23744 15.8232 1.53033 15.5303L0.46967 14.4697ZM1.53034 0.46967C1.23745 0.176777 0.762577 0.176777 0.469684 0.46967C0.176791 0.762563 0.176791 1.23744 0.469684 1.53033L1.53034 0.46967ZM14.4697 15.5303C14.7626 15.8232 15.2375 15.8232 15.5304 15.5303C15.8232 15.2374 15.8232 14.7626 15.5304 14.4697L14.4697 15.5303ZM14.4697 0.46967L0.46967 14.4697L1.53033 15.5303L15.5303 1.53033L14.4697 0.46967ZM0.469684 1.53033L14.4697 15.5303L15.5304 14.4697L1.53034 0.46967L0.469684 1.53033Z"/>
</g>
</template>

5
src/components/iconsComponents/HomeIcon.vue
View File

@@ -1,5 +0,0 @@
<template>
<g>
<path d="M20 5L20.5303 4.46967C20.3897 4.32902 20.1989 4.25 20 4.25C19.8011 4.25 19.6103 4.32902 19.4697 4.46967L20 5ZM8.33331 16.6667L7.80298 16.1363C7.66233 16.277 7.58331 16.4678 7.58331 16.6667L8.33331 16.6667ZM31.6666 16.6667H32.4166C32.4166 16.4678 32.3376 16.277 32.197 16.1363L31.6666 16.6667ZM31.6667 33.3333V34.0833C31.8656 34.0833 32.0563 34.0043 32.197 33.8637C32.3376 33.723 32.4167 33.5322 32.4167 33.3333H31.6667ZM8.33332 33.3333H7.58332C7.58332 33.7475 7.91911 34.0833 8.33332 34.0833V33.3333ZM19.4697 4.46967L7.80298 16.1363L8.86364 17.197L20.5303 5.53033L19.4697 4.46967ZM32.197 16.1363L20.5303 4.46967L19.4697 5.53033L31.1363 17.197L32.197 16.1363ZM30.9166 16.6667L30.9167 33.3333H32.4167L32.4166 16.6667L30.9166 16.6667ZM31.6667 32.5833H8.33332V34.0833H31.6667V32.5833ZM9.08332 33.3333L9.08331 16.6667L7.58331 16.6667L7.58332 33.3333H9.08332Z"/>
</g>
</template>

5
src/components/iconsComponents/MailIcon.vue
View File

@@ -1,5 +0,0 @@
<template>
<g>
<path d="M8.58579 9.08574L9.11612 8.55541L9.11611 8.55541L8.58579 9.08574ZM11.4142 9.08574L10.8839 8.55541L10.8839 8.55541L11.4142 9.08574ZM2 2.25H18V0.75H2V2.25ZM18.25 2.5V14.5H19.75V2.5H18.25ZM18 14.75H2V16.25H18V14.75ZM1.75 14.5V2.5H0.25V14.5H1.75ZM2 14.75C1.86193 14.75 1.75 14.6381 1.75 14.5H0.25C0.25 15.4665 1.0335 16.25 2 16.25V14.75ZM18.25 14.5C18.25 14.6381 18.1381 14.75 18 14.75V16.25C18.9665 16.25 19.75 15.4665 19.75 14.5H18.25ZM2 0.75C1.51696 0.75 1.07843 0.946697 0.762563 1.26256L1.82322 2.32322C1.86929 2.27716 1.93076 2.25 2 2.25V0.75ZM0.762563 1.26256C0.446697 1.57843 0.25 2.01696 0.25 2.5H1.75C1.75 2.43076 1.77716 2.36929 1.82322 2.32322L0.762563 1.26256ZM18 2.25C18.0692 2.25 18.1307 2.27716 18.1768 2.32322L19.2374 1.26256C18.9216 0.946695 18.483 0.75 18 0.75V2.25ZM18.1768 2.32322C18.2228 2.36928 18.25 2.43076 18.25 2.5H19.75C19.75 2.01696 19.5533 1.57843 19.2374 1.26256L18.1768 2.32322ZM8.05546 9.61607C9.1294 10.69 10.8706 10.69 11.9445 9.61607L10.8839 8.55541C10.3957 9.04357 9.60427 9.04356 9.11612 8.55541L8.05546 9.61607ZM0.762565 2.32323L8.05546 9.61607L9.11611 8.55541L1.82322 1.26256L0.762565 2.32323ZM11.9445 9.61607L19.2374 2.32323L18.1768 1.26256L10.8839 8.55541L11.9445 9.61607Z"/>
</g>
</template>

5
src/components/iconsComponents/PlusIcon.vue
View File

@@ -1,5 +0,0 @@
<template>
<g>
<path d="M6.75 1C6.75 0.585786 6.41421 0.25 6 0.25C5.58579 0.25 5.25 0.585786 5.25 1H6.75ZM5.25 11C5.25 11.4142 5.58579 11.75 6 11.75C6.41421 11.75 6.75 11.4142 6.75 11H5.25ZM1 5.25C0.585786 5.25 0.25 5.58579 0.25 6C0.25 6.41421 0.585786 6.75 1 6.75V5.25ZM11 6.75C11.4142 6.75 11.75 6.41421 11.75 6C11.75 5.58579 11.4142 5.25 11 5.25V6.75ZM5.25 1V11H6.75V1H5.25ZM1 6.75H11V5.25H1V6.75Z"/>
</g>
</template>

5
src/components/iconsComponents/SettingsIcon.vue
View File

File diff suppressed because one or more lines are too long

5
src/components/iconsComponents/UserIcon.vue
View File

@@ -1,5 +0,0 @@
<template>
<g>
<path d="M33.3334 35V35.75C33.7476 35.75 34.0834 35.4142 34.0834 35H33.3334ZM6.66675 35H5.91675C5.91675 35.4142 6.25253 35.75 6.66675 35.75V35ZM13.3334 25.75H26.6667V24.25H13.3334V25.75ZM32.5834 31.6667V35H34.0834V31.6667H32.5834ZM7.41675 35V31.6667H5.91675V35H7.41675ZM26.6667 25.75C29.9344 25.75 32.5834 28.399 32.5834 31.6667H34.0834C34.0834 27.5706 30.7629 24.25 26.6667 24.25V25.75ZM13.3334 24.25C9.2373 24.25 5.91675 27.5706 5.91675 31.6667H7.41675C7.41675 28.399 10.0657 25.75 13.3334 25.75V24.25ZM25.9167 11.6667C25.9167 14.9344 23.2678 17.5833 20.0001 17.5833V19.0833C24.0962 19.0833 27.4167 15.7628 27.4167 11.6667H25.9167ZM20.0001 17.5833C16.7324 17.5833 14.0834 14.9344 14.0834 11.6667H12.5834C12.5834 15.7628 15.904 19.0833 20.0001 19.0833V17.5833ZM14.0834 11.6667C14.0834 8.39898 16.7324 5.75 20.0001 5.75V4.25C15.904 4.25 12.5834 7.57055 12.5834 11.6667H14.0834ZM20.0001 5.75C23.2678 5.75 25.9167 8.39898 25.9167 11.6667H27.4167C27.4167 7.57055 24.0962 4.25 20.0001 4.25V5.75ZM6.66675 35.75H33.3334V34.25H6.66675V35.75Z"/>
</g>
</template>

5
src/components/iconsComponents/UserSmallIcon.vue
View File

@@ -1,5 +0,0 @@
<template>
<g>
<path d="M17 19.5V20.25C17.4142 20.25 17.75 19.9142 17.75 19.5H17ZM1 19.5H0.25C0.25 19.9142 0.585786 20.25 1 20.25L1 19.5ZM5 14.25H13V12.75H5V14.25ZM16.25 17.5V19.5H17.75V17.5H16.25ZM1.75 19.5V17.5H0.25V19.5H1.75ZM13 14.25C14.7949 14.25 16.25 15.7051 16.25 17.5H17.75C17.75 14.8766 15.6234 12.75 13 12.75V14.25ZM5 12.75C2.37665 12.75 0.25 14.8766 0.25 17.5H1.75C1.75 15.7051 3.20507 14.25 5 14.25V12.75ZM12.25 5.5C12.25 7.29493 10.7949 8.75 9 8.75V10.25C11.6234 10.25 13.75 8.12335 13.75 5.5H12.25ZM9 8.75C7.20507 8.75 5.75 7.29493 5.75 5.5H4.25C4.25 8.12335 6.37665 10.25 9 10.25V8.75ZM5.75 5.5C5.75 3.70507 7.20507 2.25 9 2.25V0.75C6.37665 0.75 4.25 2.87665 4.25 5.5H5.75ZM9 2.25C10.7949 2.25 12.25 3.70507 12.25 5.5H13.75C13.75 2.87665 11.6234 0.75 9 0.75V2.25ZM1 20.25H17V18.75H1V20.25Z"/>
</g>
</template>

52
src/components/iconsComponents/basicIcon/BasicIcon.vue
View File

@@ -1,52 +0,0 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg"
:width="width"
:height="height"
:viewBox="viewBox"
:aria-labelledby="iconName"
role="presentation"
>
<title
:id="iconName"
lang="en"
>{{iconName}} icon</title>
<g :fill="iconColor">
<slot />
</g>
</svg>
</template>
<script>
export default {
props: {
iconName: {
type: String,
default: 'box'
},
width: {
type: [Number, String],
default: 40
},
height: {
type: [Number, String],
default: 40
},
iconColor: {
type: String,
default: 'currentColor'
},
},
computed: {
viewBox() {
return `0 0 ${this.width} ${this.height}`
}
}
}
</script>
<style scoped>
svg {
display: inline-block;
vertical-align: baseline;
}
</style>

42
src/components/pages/calendarPages/FormAddEvent.vue
View File

@@ -3,21 +3,18 @@
.form-item-container
.close-icon-position
span.title-form Ответственный
basic-icon.close-icon(width="16" height="16" icon-color="#252850" @click="closeEventForm")
close-icon
.icon-cancel.close-icon(@click="closeEventForm")
.input-container(@click="openSelectResponsible")
.form-select
.form-item-input.select-container-res {{eventData.responsible}}
.option-container(v-if="selectResponsibleOpen" id="responsible" @click="(event)=>chooseOption(event)")
.option-item(v-for="(responsible, index) in listResponsible" :key="index" :id="index") {{responsible}}
.select-form-separator
basic-icon(width="24" height="24" icon-color="#090A15")
arrow-down-icon
.icon-down-arrow.arrow-icon
.form-item-container
span.title-form Оновная информация
.form-inform-container
basic-icon(width="24" height="24" icon-color="#090A15" )
clock-icon
.icon-time.container-icon
.time-input-container
.input-container
input.form-item-input(v-model="eventData.timeEvent.firstTime" type="time" min="08:00" max="18:00")
@@ -25,8 +22,7 @@
.input-container
input.form-item-input(v-model="eventData.timeEvent.secondTime" type="time" min="08:00" max="18:00")
.form-inform-container
basic-icon(width="24" height="24" icon-color="#090A15")
user-icon
.icon-person.container-icon
.input-container
input.form-item-input(v-model="eventData.eventClient" type="text" placeholder="ФИО клиента")
.form-item-container(class='additional-information')
@@ -45,32 +41,24 @@
.option-container(v-if="selectKindEventOpen" id="kind" @click="(event)=>chooseOption(event)")
.option-item(v-for="(kind, index) in kindEvents" :key="index" :id="index") {{kind}}
.select-form-separator
basic-icon(width="24" height="24" icon-color="#090A15")
arrow-down-icon
.icon-down-arrow.arrow-icon
.form-item-container
.form-inform-container
span.title-form Контакты
button-plus(id="addContact" @click="(e)=>addFriendInfo(e)")
.form-inform-container(v-for="(contact, index) in listContacts" :key="index")
basic-icon(width="24" height="20" icon-color="#090A15")
mail-icon
.icon-mail.container-icon
.input-container
input.form-item-input(v-model="eventData.contacts[contact]" type="text" placeholder="E-mail")
add-event-button(@click="createEvent")
</template>
<script>
import BasicIcon from "@/components/iconsComponents/basicIcon/BasicIcon";
import ArrowDownIcon from "@/components/iconsComponents/ArrowDownIcon";
import ClockIcon from "@/components/iconsComponents/ClockIcon";
import UserIcon from "@/components/iconsComponents/UserSmallIcon";
import MailIcon from "@/components/iconsComponents/MailIcon";
import CloseIcon from "@/components/iconsComponents/CloseIcon"
import AddEventButton from "@/components/baseComponents/buttons/AddEventButton";
import ButtonPlus from "@/components/baseComponents/buttons/ButtonPlus";
export default {
name: "FormChangeEvent",
components: {ClockIcon, ArrowDownIcon, UserIcon, MailIcon, CloseIcon, BasicIcon, AddEventButton, ButtonPlus},
components: {AddEventButton, ButtonPlus},
props: {
listResponsible: {
default: ["Захарова А.О.", "Коломойцев И.К.", "Ситников А.Г."]
@@ -188,8 +176,24 @@ export default {
column-gap: 16px
.number-additional
margin-left: 6px
.arrow-icon
margin-bottom: -12px
text-align: center
font-size: 14px
color: var(--font-black-color)
&:hover
color: var(--btn-blue-color)
.container-icon
width: 24px
height: 24px
font-size: 21px
color: var(--font-black-color)
.close-icon
cursor: pointer
font-size: 14px
color: var(--font-black-color)
&:hover
color: var(--btn-blue-color)
.close-icon-position
display: flex
justify-content: space-between

12
src/components/theComponents/TheButtonSidebar.vue
View File

@@ -1,15 +1,12 @@
<template lang="pug">
a(:href="path")
button(:id="id" class='button-icon-item')
basic-icon(icon-color="#252850" width="40" height="40" )
slot
slot
</template>
<script>
import BasicIcon from "@/components/iconsComponents/basicIcon/BasicIcon";
export default {
name: "ButtonSidebar",
components: {BasicIcon},
props: {
path: String,
id: String,
@@ -28,6 +25,7 @@
width: fit-content
padding: 12px 16px 12px 12px
cursor: pointer
font-size: 40px
background-color: rgb(65, 105, 225, 0)
border-radius: 0 4px 4px 0
border-left-color: rgb(65, 105, 225, 0)
@@ -39,11 +37,9 @@
.button-icon-item:focus
background-color: rgb(65, 105, 225, 0.3)
border-left-color: rgb(65, 105, 225, 1)
path
fill: #4169E1
color: #4169E1
.button-icon-item:hover
background-color: rgb(65, 105, 225, 0.3)
border-left-color: rgb(65, 105, 225, 1)
path
fill: #4169E1
color: #4169E1
</style>

18
src/components/theComponents/TheSidebar.vue
View File

@@ -2,30 +2,28 @@
.sidebar-container
.top-button-container
the-button-sidebar(id="home" path="#/")
home-icon
.icon-home
the-button-sidebar(id="calendar" path="#/calendar")
calendar-icon
.icon-calendar-2
the-button-sidebar(id="user" path="#/user")
user-icon
.icon-person-2
.bottom-button-container
the-button-sidebar(id="settings" path="#/settings")
settings-icon
.icon-settings
</template>
<script>
import HomeIcon from '@/components/iconsComponents/HomeIcon';
import CalendarIcon from '@/components/iconsComponents/CalendarIcon';
import UserIcon from '@/components/iconsComponents/UserIcon';
import SettingsIcon from '@/components/iconsComponents/SettingsIcon';
import TheButtonSidebar from "@/components/theComponents/TheButtonSidebar";
export default {
name: "SidebarComponent",
components: {TheButtonSidebar, HomeIcon, CalendarIcon, UserIcon, SettingsIcon},
components: {TheButtonSidebar},
}
</script>
<style lang="sass">
#person
font-style: normal
.sidebar-container
display: flex
flex-direction: column
@@ -38,6 +36,8 @@
.top-button-container
display: flex
font-size: 40px
flex-direction: column
row-gap: 24px
color: #9C27B0
</style>