diff --git a/src/components/base/BaseCategorySelection.vue b/src/components/base/BaseCategorySelection.vue index 92f8b8f..622a161 100644 --- a/src/components/base/BaseCategorySelection.vue +++ b/src/components/base/BaseCategorySelection.vue @@ -15,7 +15,7 @@ iconLeft ) template(v-slot:iconLeft) - q-icon(name="app:icon-search", size="20px", style="color: var(--font-grey-color)") + q-icon.icon(name="app:search", size="20px", style="color: var(--font-grey-color)") .field.flex.flex-col.overflow-y-scroll(:class="{'filed-category': findSelected(selected?.id)}") .flex.items-center(v-for="benefit in benefitData", :key="benefit.id") q-item(tag="label", :style="{alignItems: benefit.name.length > 28 ? 'start' : 'center'}") @@ -43,7 +43,7 @@ @click="saveCategories(selected)" ) .right-side.flex.px-10.font-bold.relative - q-icon(name="app:icon-cancel").text-sm.absolute.top-4.right-4.cursor-pointer(@click="closeModalCategories") + q-icon(name="app:cancel").text-sm.absolute.top-4.right-4.cursor-pointer(@click="closeModalCategories") .flex.gap-y-6.flex-col.w-full(v-if="selected?.id && selected?.name !== 'Без льготы'") .right-header.flex span.text-6xl {{selected?.name}} @@ -185,6 +185,9 @@ export default { .grey-color color: var(--font-grey-color) +.icon :deep(path) + fill: var(--font-grey-color) + .q-item padding: 0 min-height: 40px diff --git a/src/components/base/BaseUploadPhoto.vue b/src/components/base/BaseUploadPhoto.vue index 142ecc8..3c911b9 100644 --- a/src/components/base/BaseUploadPhoto.vue +++ b/src/components/base/BaseUploadPhoto.vue @@ -21,7 +21,7 @@ round, padding="2px 0 0 0" ) - q-icon(name="app:ok", size="20px") + q-icon.icon(name="app:ok", size="40px") @@ -415,27 +404,25 @@ export default { .delete background-color: var(--btn-red-color) +.category + width: 324px -.categories :deep(.q-field__control) - height: 40px - color: var(--font-dark-blue-color) - padding: 0 16px - background: var(--bg-light-grey) !important - &:before - border: none !important - transition: none - &:after - border: none !important - transition: none - transform: none !important +.category-select + min-width: 276px -.categories :deep(.q-field__native) - font-weight: 500 - font-size: 16px - line-height: normal - color: var(--font-dark-blue-color) - padding: 8px 0 - background: var(--bg-light-grey) !important +.icon :deep(path) + fill: var(--font-grey-color) + +.icon-cancel :deep(path) + fill: var(--default-white) + +.copy :deep(path) + fill: var(--font-grey-color) + +.change + background: var(--bg-light-grey) + color: var(--font-grey-color) + border: 1px solid var(--gray-secondary) .q-field--outlined.q-field--readonly :deep(.q-field__control) background: var(--bg-light-grey) !important diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ClinicalForm.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ClinicalForm.vue index 3fa7b78..633d2ca 100644 --- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ClinicalForm.vue +++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ClinicalForm.vue @@ -27,19 +27,19 @@ icon-left ) template(v-slot:iconLeft) - q-icon(name="app:search", size="20px", style="color: var(--font-grey-color)") + q-icon.icon-grey(name="app:search", size="20px" ) .button q-btn( - icon="filter_alt", - :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}", + :style="{width: '40px', height: '40px'}", padding="0" ) + q-icon.icon-grey(name="app:filter", size="24px") .button q-btn( - icon="app:sort-number", - :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}", + :style="{width: '40px', height: '40px'}", padding="0" ) + q-icon.icon-grey(name="app:sort-number", size="24px") .field.flex.flex-col.overflow-y-scroll.gap-y-1(v-if="data.results.diseases") .letter.flex.items-center.font-bold.text-base Некоторые инфекционные и паразитарные болезни .checkbox.flex.gap-x-2.items-center(v-for="disease in data.results.diseases") @@ -171,4 +171,7 @@ export default { .search :deep(.q-field__prepend) padding-right: 6px + +.icon-grey :deep(path) + fill: var(--font-grey-color) diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue index 28ab9ce..5999765 100644 --- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue +++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue @@ -42,19 +42,19 @@ size="M", ) template(v-slot:iconLeft) - q-icon(name="app:search", size="20px", style="color: var(--font-grey-color)") + q-icon.icon-grey(name="app:search", size="20px" ) .button q-btn( - icon="filter_alt", - :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}", + :style="{width: '40px', height: '40px'}", padding="0" ) + q-icon.icon-grey(name="app:filter", size="24px") .button q-btn( - icon="app:sort-number", - :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}", + :style="{width: '40px', height: '40px'}", padding="0" ) + q-icon.icon-grey(name="app:sort-number", size="24px") .field.flex.flex-col.overflow-y-scroll .checkbox.flex.flex-col(v-for="complaint in textSorting(data.results.tags)") .letter.flex.items-center.font-bold.justify-center {{ complaint.sym }} @@ -71,7 +71,7 @@ width="40px", @click="showModal = true", ) - q-icon(name="app:plus", size="16px") + q-icon.icon-white(name="app:plus", size="24px") base-modal(v-model="showModal", title="Создание тега", modal-padding) tag-creation-form(:close-modal="closeModal", :create-tag="createTag") .flex.gap-x-20.w-full(v-if="change || fillInspection") @@ -365,4 +365,10 @@ export default { &::placeholder color: var(--font-grey-color) opacity: 1 + +.icon-grey :deep(path) + fill: var(--font-grey-color) + +.icon-white :deep(path) + fill: var(--default-white) diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue index e1ddb3d..8c9c143 100644 --- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue +++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue @@ -25,19 +25,19 @@ size="M" ) template(v-slot:iconLeft) - q-icon(name="app:search", size="20px", style="color: var(--font-grey-color)") + q-icon.icon-grey(name="app:search", size="20px" ) .button q-btn( - icon="filter_alt", - :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}", + :style="{width: '40px', height: '40px'}", padding="0" ) + q-icon.icon-grey(name="app:filter", size="24px") .button q-btn( - icon="app:sort-number", - :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}", + :style="{width: '40px', height: '40px'}", padding="0" ) + q-icon.icon-grey(name="app:sort-number", size="24px") .field.flex.flex-col.overflow-y-scroll(v-if="data.results.tags") .checkbox.flex.flex-col(v-for="complaint in textSorting(data.results.tags)") .letter.flex.items-center.font-bold.justify-center {{ complaint.sym }} @@ -54,12 +54,12 @@ width="40px", @click="showModal = true", ) - q-icon(name="app:plus", size="16px") + q-icon.icon-white(name="app:plus", size="24px") base-modal(v-model="showModal", title="Создание тега", modal-padding) tag-creation-form(:close-modal="closeModal", :create-tag="createTag") .flex(v-if="data.title === 'Осмотр полости рта' && (fillInspection || change)", :style="{color: 'var(--btn-blue-color)'}") q-btn(no-caps, flat, padding="2px 4px") - q-icon(left, name="app:plus", size="12px") + q-icon.icon-blue(left, name="app:plus", size="24px") span.font-medium Добавить описание зуба @@ -175,6 +175,8 @@ export default { cursor: pointer border-radius: 4px background: var(--bg-light-grey) + &:hover + background: var(--border-light-grey-color) .field margin-right: -10px @@ -214,7 +216,7 @@ export default { .q-btn :deep(.q-ripple) display: none .on-left - margin-right: 8px + margin-right: 4px .input :deep(.q-field__native) font-weight: 500 @@ -228,4 +230,13 @@ export default { .search :deep(.q-field__prepend) padding-right: 6px + +.icon-grey :deep(path) + fill: var(--font-grey-color) + +.icon-white :deep(path) + fill: var(--default-white) + +.icon-blue :deep(path) + fill: var(--btn-blue-color) diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/TagCreationForm.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/TagCreationForm.vue index 27feee1..49d0a29 100644 --- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/TagCreationForm.vue +++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/TagCreationForm.vue @@ -17,17 +17,16 @@ fit, anchor="bottom left", self="top left" - ) + ) + .tag.item.flex.py-2.px-4.items-center.cursor-pointer.w-full.gap-x-2( + @click="addCategory" + ) + span Добавить категорию .menu-wrapper.flex.flex-col.h-40.overflow-y-auto .options.flex(v-for="item in options") .item.flex.py-2.px-4.items-center.cursor-pointer( @click="selected(item.label)" ) {{item.label}} - .tag.item.flex.py-2.px-4.items-center.cursor-pointer.w-full.gap-x-2( - @click="addCategory" - ) - q-icon(name="app:icon-plus", size="10px",) - span Добавить категорию .flex.flex-col(class="gap-x-1.5") base-input( v-model="model.tag", diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue index d95dca9..c307614 100644 --- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue +++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue @@ -36,16 +36,16 @@ .toogle.flex.flex-toogle.h-10.p-1.rounded.absolute q-btn.w-12.h-full.rounded( size="12px", - :style="{'backgroundColor': !isShowSecondView ? 'var(--bg-aqua-blue)' : 'var(--bg-light-grey)'}", + :style="{'backgroundColor': !isShowSecondView ? 'var(--btn-blue-color)' : 'var(--bg-light-grey)'}", @click="()=>{ isShowSecondView=false }", ) - img(:src="teeth") + q-icon.tooth(:class="{'tooth-active': !isShowSecondView}", name="app:tooth-outline", size="24px") q-btn.w-12.h-full.rounded( size="12px", - :style="{'backgroundColor': isShowSecondView ? 'var(--bg-aqua-blue)' : 'var(--bg-light-grey)'}", + :style="{'backgroundColor': isShowSecondView ? 'var(--btn-blue-color)' : 'var(--bg-light-grey)'}", @click="()=>{isShowSecondView=true }", ) - img(:src="teeth_2") + q-icon.tooth(:class="{'tooth-active': isShowSecondView}", name="app:tooth", size="22px")