WIP Поправила часть иконок

2023-07-25 15:42:24 +03:00
parent 14b67dde2b
commit 759d6953a2
16 changed files with 12563 additions and 101 deletions
--- a/src/pages/clients/components/ClientsTableHat.vue
+++ b/src/pages/clients/components/ClientsTableHat.vue
@@ -11,7 +11,7 @@
          :icon-left="!searchClient"
        )
          template(v-slot:iconLeft, v-if="!searchClient")
-            q-icon(name="app:search", size="18px")
+            q-icon.search-icon(name="app:search", size="20px")
      base-button(
        v-if="createdClientName === ''",
        @click="searchLastName",
@@ -31,12 +31,12 @@
        type="secondary",
        width="64px"
      )
-        q-icon(name="app:export", size="16px")
+        q-icon.export(name="app:export", size="20px")
      base-button(
        @click="openForm",
        width="144px"
      )
-        q-icon(name="app:plus", size="12px", left)
+        q-icon.plus(name="app:plus", size="24px", left)
        span Создать
 </template>

@@ -96,7 +96,16 @@ export default {
 .input
  min-width: 280px
 .on-left
-  margin-right: 10px
+  margin-right: 6px
 .search :deep(.q-field__prepend)
  padding-right: 6px !important
+
+.search-icon :deep(path)
+  fill: var(--font-grey-color)
+
+.export :deep(path)
+  fill: var(--btn-blue-color)
+
+.plus :deep(path)
+  fill: var(--default-white)
 </style>
--- a/src/pages/clients/utils/tableConfig.js
+++ b/src/pages/clients/utils/tableConfig.js
@@ -67,23 +67,23 @@ export const column = [
    settings: [
      {
        id: "VK",
-        icon: "app:icon-vk",
+        icon: "app:vk",
      },
      {
        id: "TELEGRAM",
-        icon: "app:icon-tg",
+        icon: "app:tg",
      },
      {
        id: "GMAIL",
-        icon: "app:icon-google",
+        icon: "app:google",
      },
      {
        id: "SLACK",
-        icon: "app:icon-slack",
+        icon: "app:slack",
      },
      {
        id: "DISCORD",
-        icon: "app:icon-discord",
+        icon: "app:discord",
      },
      {
        id: "VIBER",
--- a/src/pages/newCalendar/components/CalendarHeader.vue
+++ b/src/pages/newCalendar/components/CalendarHeader.vue
@@ -8,7 +8,7 @@
      icon-left
    )
      template(v-slot:iconLeft)
-        q-icon(name="app:search", size="20px")
+        q-icon.search-icon(name="app:search", size="20px")
    .flex.gap-x-4.items-center.justify-center
      q-btn(
        color="secondary",
@@ -26,8 +26,9 @@
        v-model="currentWeek",
      )
        .h-5.w-5.flex.items-center.justify-center
-          q-icon.text.cursor-pointer(:name="calendarVisibility ? 'app:cancel' : 'app:calendar'",
-            :size="calendarVisibility ? '12px' : '18px'",
+          q-icon.calendar-icon.text.cursor-pointer(
+            :name="calendarVisibility ? 'app:cancel-mini' : 'app:calendar'",
+            size="20px",
          )
            q-menu(
              :style="{'margin-top': '8px !important'}"
@@ -181,6 +182,12 @@ export default {

 .search :deep(.q-field__prepend)
  padding-right: 6px !important
+
+.search-icon :deep(path)
+  fill: var(--font-grey-color)
+
+.calendar-icon :deep(path)
+  fill: var(--font-dark-blue-color)
 </style>
 <style lang="sass">
 .q-field--outlined.q-field--readonly .q-field__control:before
--- a/src/pages/newCalendar/components/CalendarOpenSidebar.vue
+++ b/src/pages/newCalendar/components/CalendarOpenSidebar.vue
@@ -13,7 +13,7 @@
        width="100%",
        @click="createForm",
      )
-        q-icon(name="app:plus", size="12px", left)
+        q-icon.plus(name="app:plus", size="24px", left)
        span Создать запись
    .flex.flex-col.gap-y-px
      q-expansion-item.expansion.font-bold.text-xm(
@@ -353,4 +353,9 @@ export default {
  right: 0px
  bottom: 0px
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--default-white) 100%)
+
+.on-left
+  margin-right: 8px
+.plus :deep(path)
+  fill: var(--default-white)
 </style>
--- a/src/pages/newCalendar/components/CalendarRecordCard.vue
+++ b/src/pages/newCalendar/components/CalendarRecordCard.vue
@@ -3,16 +3,16 @@
    .header.w-full.flex.gap-x-2px.text-sm
      .first-item.color-black.justify-center.gap-x-2(:class="timeClass")
        span.font-semibold.color-black(v-if="expandedType || expandedTime") {{ recordTime }}
-        q-icon.cursor-pointer(
-          name="arrow_back_ios_new",
-          size="10px",
+        q-icon.cursor-pointer.arrow-icon(
+          name="app:left-arrow",
+          size="16px",
          v-if="expandedTime",
          @click.stop="changeTimeDisplay(false)"
        )
-        q-icon.cursor-pointer(
+        q-icon.cursor-pointer.time-icon(
          v-if="!expandedType && !expandedTime",
          name="app:time",
-          size="16px",
+          size="20px",
          @click.stop="changeTimeDisplay(true)"
        )
      .color-black.pl-4.flex-1.font-semibold.py-6px.relative(
@@ -32,7 +32,7 @@
          v-for="contact in contacts",
          :key="contact.value",
        )
-          q-icon(:name="contact.icon", size="14px")
+          q-icon.network-icon(:name="contact.icon", size="16px")
          .text-xxs {{ contact.value }}
          .h-6.w-6.color-black.background-dark-grey.text-xxs.rounded.flex.items-center.justify-center(
            v-if="collapsedDisplayCondition"
@@ -199,4 +199,10 @@ export default {
 .body
  border-bottom-left-radius: 4px
  border-bottom-right-radius: 4px
+.network-icon :deep(path)
+  fill: var(--font-dark-blue-color-0)
+.arrow-icon :deep(path)
+  fill: var(--font-dark-blue-color)
+.time-icon :deep(path)
+  fill: var(--font-grey-color)
 </style>
--- a/src/pages/newCalendar/components/CalendarRecordPreview.vue
+++ b/src/pages/newCalendar/components/CalendarRecordPreview.vue
@@ -3,8 +3,8 @@
    .header.flex.mb-6
      .title.font-bold.text-xl.color-dark-blue Запись на {{ date }}, {{ time }}
      .icons.flex.items-center.gap-x-3.-mt-5.-mr-4.p-1
-        q-icon.cursor-pointer(name="app:dots", size="18px", color="dark")
-        q-icon.cursor-pointer(name="app:cancel", size="18px", color="dark", @click="hidePreview")
+        q-icon.cursor-pointer.header-icon(name="app:dots", size="24px", color="dark")
+        q-icon.cursor-pointer.header-icon(name="app:cancel", size="24px", color="dark", @click="hidePreview")
    .body.gap-y-4.text.text-sm
      .flex.items-center.gap-x-3(v-for="field in previewConfig", :key="field?.title")
        .field.color-grey.flex.items-center.justify-start.font-semibold {{ field?.title }}:
@@ -25,7 +25,7 @@
            :style="{'font-weight': 500}"
            size="14px"
          )
-            q-icon.arrow(name="app:long-arrow", size="18px", right)
+            q-icon.arrow.ml-1(name="app:long-arrow", size="20px")
        .flex.gap-x-1.flex-1.h-full(v-if="field?.title === 'Услуги'")
          .rounded.h-full.services.flex.flex-wrap.gap-1.p-1
            .py-2.px-4.color-dark-blue.rounded.h-7.relative(
@@ -156,6 +156,8 @@ export default {
  border-bottom: 4px solid var(--bg-aqua-blue)
 .arrow
  transform: rotate(180deg)
+  :deep(path)
+    fill: var(--default-white)
 .cost
  width: 82px
 .services
@@ -173,4 +175,6 @@ export default {
  white-space: nowrap
 .gradient
  display: none
+.header-icon :deep(path)
+  fill: var(--font-dark-blue-color)
 </style>
--- a/src/pages/newCalendar/components/CalendarSidebar.vue
+++ b/src/pages/newCalendar/components/CalendarSidebar.vue
@@ -9,7 +9,7 @@
        img(:src="arrow")
    .button.flex
      base-button(width="40px", @click="createForm")
-        q-icon(name="app:plus", size="12px")
+        q-icon.plus(name="app:plus", size="24px")
    .button.flex.relative.btn-sidebar.button-svg.cursor-pointer(
      @click="()=>showActive(svg.name)",
      v-for="svg in patientData.arrSvg"
@@ -376,6 +376,8 @@ export default {
 .q-btn :deep(.q-ripple)
  display: none

+.plus :deep(path)
+  fill: var(--default-white)
 .button-svg
  &:hover
    .svg :deep(.hover)
--- a/src/pages/newCalendar/utils/calendarConfig.js
+++ b/src/pages/newCalendar/utils/calendarConfig.js
@@ -10,23 +10,23 @@ import not_filled from "@/assets/icons/medcard_not_filled.svg";
 export const networks = [
  {
    id: "VK",
-    icon: "app:icon-vk",
+    icon: "app:vk",
  },
  {
    id: "TELEGRAM",
-    icon: "app:icon-tg",
+    icon: "app:tg",
  },
  {
    id: "GMAIL",
-    icon: "app:icon-google",
+    icon: "app:google",
  },
  {
    id: "SLACK",
-    icon: "app:icon-slack",
+    icon: "app:slack",
  },
  {
    id: "DISCORD",
-    icon: "app:icon-discord",
+    icon: "app:discord",
  },
  {
    id: "VIBER",
@@ -226,7 +226,7 @@ export const patientData = {
      {
        kind: {
          id: "TELEGRAM",
-          icon: "app:icon-tg",
+          icon: "app:tg",
        },
        username: "",
      },