WIP Сделала BaseButton

2023-07-11 17:29:43 +03:00
parent 8655620d65
commit d4d297846f
12 changed files with 214 additions and 236 deletions
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -7,52 +7,42 @@
        @click="redirectHomePage"
      )
      header-inputs
-    .flex.ml-auto
-      q-btn.mr-9(
-        color="primary",
-        outline,
-        dense,
-        padding="4px 22px",
+    .flex.ml-auto.items-center.gap-x-8
+      base-button(
+        type="secondary",
+        width="80px",
+        no-padding,
        @click="openForm"
      )
-        q-icon(
-          name="app:icon-plus",
-          size="10px",
-          style="margin-right: 4px",
-        )
-        q-icon(
-          name="app:icon-person",
-          size="18px",
-          style="margin-left: 4px"
-        )
+        q-icon(name="app:plus", size="12px")
+        q-icon(name="app:person", size="20px", right)
      base-client-form-create(
        v-model="isOpenFormInternal",
        :set-updated-clients="setUpdatedClients",
        :write-created-client-id="writeCreatedClientId",
      )
-      q-btn.mr-8(
+      q-btn(
        flat,
        dense,
-        style="color: var(--font-dark-blue-color)",
-        padding="4px 8px",
-        icon="app:icon-bell",
-        size="18px",
+        :style="{color: 'var(--font-dark-blue-color)', 'min-width': '24px', 'min-height': '24px'}",
        round,
-      )  
+      )
+        q-icon(name="app:icon-bell", size="20px")
      .flex.justify-centflexer.items-center.relative
-        base-avatar.mr-2(:size="36", :color="userData?.color", v-if="!userData?.photo") {{changeName}}       
-        base-avatar.mr-2(:size="32", v-else)
-          img.h-full.object-cover(:src="url + userData?.photo", alt="Avatar")
        q-btn(
-          @click="openPopup"
-          flat
-          icon="app:icon-down-arrow",
-          style="color: var(--font-dark-blue-color)",
-          size="10px",
-          padding="4px 2px 2px 2px"
-          dense,
+          @click="openPopup",
+          flat,
+          padding="0",
+          style="color: var(--font-grey-color)"
        )
-          q-menu(style="margin-top: 19px !important")
+          base-avatar(:size="36", :color="userData?.color", v-if="!userData?.photo") {{changeName}}       
+          base-avatar(:size="32", v-else)
+            img.h-full.object-cover(:src="url + userData?.photo", alt="Avatar")
+          .h-6.w-6.flex.items-center.justify-center.ml-2
+            q-icon(name="app:icon-down-arrow", size="12px")
+          q-menu(
+            :offset="[60, 6]"
+          )
            .menu.p-4
              .text-popup.flex.cursor-pointer.pl-2(@click="logout", v-close-popup) Выйти
 </template>
@@ -64,6 +54,7 @@ import HeaderInputs from "./HeaderInputs.vue";
 import BaseAvatar from "@/components/base/BaseAvatar";
 import BasePopup from "@/components/base/BasePopup.vue";
 import BaseClientFormCreate from "@/components/base/BaseClientFormCreate";
+import BaseButton from "@/components/base/BaseButton.vue";
 export default {
  name: "TheHeader",
  components: {
@@ -71,6 +62,7 @@ export default {
    BaseAvatar,
    BasePopup,
    BaseClientFormCreate,
+    BaseButton,
  },
  props: {
    url: String,
@@ -162,4 +154,10 @@ export default {
  max-width: 160px !important
  border-radius: 4px
  background-color: var(--default-white)
+.on-right
+  margin-left: 8px
+.q-btn :deep(.q-ripple)
+  display: none
+.q-btn :deep(.q-focus-helper)
+  display: none
 </style>
--- a/src/components/base/BaseButton.vue
+++ b/src/components/base/BaseButton.vue
@@ -1,180 +1,123 @@
 <template lang="pug">
-  button.base-button.text-base(
-    type="button",
-    :disabled="disabled",
-    :class="{'rounded': rounded, 'outlined': outlined, 'outlined-red': outlinedRed, 'secondary': secondary, 'confirm': confirm, 'added': added, 'added-border-none': addedBorderNone}"
-    :style="{height: size + 'px', minWidth: size + 'px'}"
+  q-btn(
+    :label="miniSize || round ? '' : label",
+    no-caps, 
+    :class="btnClass"
+    :style="{width: miniSize ? '40px' : width, 'min-width': (miniSize || round) && '0px', ...btnStyle}",
+    :round="miniSize || round",
+    :padding="computedPadding",
+    :disable="disable"
  )
-    .button-container
-      span.icon-container(
-        :class="leftIcon",
-        v-if="leftIcon",
-        :style="{fontSize: iconLeftSize + 'px'}"
-      )
-      slot
-      .split(v-if="split")
-      span.icon-container(
-        :class="rightIcon",
-        v-if="rightIcon",
-        :style="{fontSize: iconRightSize + 'px', marginLeft: marginLeftIcon + 'px'}"
-      )
+    q-icon(v-if="miniSize", name="app:ok", size="20px")
+    slot(v-else)
 </template>

 <script>
 export default {
  name: "BaseButton",
  props: {
-    confirm: Boolean,
-    outlined: Boolean,
-    outlinedRed: Boolean,
-    added: Boolean,
-    addedBorderNone: Boolean,
-    rounded: Boolean,
-    disabled: Boolean,
-    split: Boolean,
-    secondary: Boolean,
-    rightIcon: {
+    type: {
      type: String,
-      default: "",
-    },
-    leftIcon: {
-      type: String,
-      default: "",
-    },
-    iconLeftSize: {
-      type: Number,
-      default: 10,
-    },
-    iconRightSize: {
-      type: Number,
-      default: 10,
+      default: "primary",
    },
    size: {
-      type: Number,
-      default: 24,
+      type: String,
+      default: "M",
    },
-    marginLeftIcon: {
-      type: Number,
-      default: 0,
+    width: {
+      type: String,
+      default: "auto",
+    },
+    round: Boolean,
+    label: String,
+    disable: Boolean,
+    noPadding: Boolean,
+    padding: String,
+  },
+  computed: {
+    btnClass() {
+      return {
+        [this.type]: true,
+      };
+    },
+    btnStyle() {
+      if (this.size === "L")
+        return {
+          height: "48px",
+          "min-height": "48px",
+        };
+      return {
+        height: "40px",
+        "min-height": "40px",
+      };
+    },
+    miniSize() {
+      return this.type === "mini";
+    },
+    computedPadding() {
+      if (this.miniSize) return "2px 0 0 0";
+      if (this.noPadding) return "0";
+      if (this.padding) return this.padding;
+      return "";
    },
  },
 };
 </script>

 <style scoped lang="sass">
-.base-button
-  padding: 8px 23px
+.primary
+  color: white
  background-color: var(--btn-blue-color)
-  border: 1px solid var(--btn-blue-color)
-  color: var(--default-white)
-  display: flex
-  justify-content: center
-  align-items: center
-  border-radius: 4px
-  white-space: nowrap
+  &:hover
+    background-color: var(--btn-blue-color-hover)
  &:active
    background-color: var(--font-dark-blue-color)
-    border: 1px solid var(--font-dark-blue-color)
-  &:hover
-    background-color: var(--btn-blue-color-hover)
-    border: 1px solid var(--btn-blue-color-hover)
  &:disabled, &[disabled]
+    opacity: 1 !important
    background-color: var(--btn-blue-color-disabled)
-    border: 1px solid var(--btn-blue-color-disabled)
-  &:focus
-    outline: 0
-.rounded
-  padding: 0
-  border-radius: 50%

-.outlined
-  background-color: var(--default-white)
-  border: 1.5px solid var(--btn-blue-color)
-  color: var(--btn-blue-color)
-  &:active
-    background-color: var(--default-white)
-    border: 1.5px solid var(--font-dark-blue-color)
-    color: var(--font-dark-blue-color)
-  &:hover
-    background-color: var(--default-white)
-    border: 1.5px solid var(--btn-blue-color-hover)
-    color: var(--btn-blue-color-hover)
-  &:disabled, &[disabled]
-    background-color: var(--default-white)
-    border: 1.5px solid var(--btn-blue-color-1)
-    color: var(--btn-blue-color-1)
-
-.outlined-red
-  background-color: var(--default-white)
-  border: 1.5px solid var(--border-red-color)
-  color: var(--border-red-color)
-  &:active
-    background-color: var(--default-white)
-    border: 1.5px solid var(--bg-event-red-color)
-    color: var(--bg-event-red-color)
-  &:hover
-    background-color: var(--default-white)
-    border: 1.5px solid var(--bg-event-red-color-1)
-    color: var(--bg-event-red-color-1)
-  &:disabled, &[disabled]
-    background-color: var(--default-white)
-    border: 1.5px solid var(--bg-event-red-color-0)
-    color: var(--bg-event-red-color-0)
-
-.added
-  border: 2px solid var(--btn-blue-color)
-  &:hover
-    border: none
-    background-color: var(--btn-blue-color)
-    color: var(--default-white)
-.added-border-none
-    border: none
-    width: fit-content
-    background-color: var(--bg-opacity-0)
-    color: var(--btn-blue-color)
-    padding: 0
-    row-gap: 10px
-    &:hover
-      border: none
-      color: var(--btn-blue-color-hover)
-      background-color: var(--bg-opacity-0)
 .secondary
-  background-color: var(--btn-blue-sec-color)
-  border: 1px solid var(--btn-blue-sec-color)
  color: var(--btn-blue-color)
+  border: 1.5px solid var(--btn-blue-sec-border-color)
+  background-color: white
  &:hover
-    background-color: var(--btn-blue-color-hover)
-    border: 1px solid var(--btn-blue-color-hover)
-    color: var(--btn-blue-color)
+    background-color: var(--btn-blue-sec-color-hover)
+  &:active
+    background-color: var(--btn-blue-sec-color-active)
  &:disabled, &[disabled]
-    background-color: var(--btn-blue-sec-color)
-    border: 1px solid var(--btn-blue-sec-color)
-    color: var(--btn-blue-color)
+    opacity: 1 !important
+    color: var(--btn-blue-sec-color-disabled)
+    background-color: white
+    border: 1.5px solid var(--btn-blue-sec-border-color-disabled)

-.confirm
-  border-color: var(--btn-blue-color)
-  border: 2px solid var(--btn-blue-color)
+.remove
+  color: var(--border-red-color)
+  border: 1.5px solid var(--btn-red-border-color)
+  background-color: white
+  &:hover
+    background-color: var(--btn-red-color-hover)
+  &:active
+    background-color: var(--btn-red-color-active)
+  &:disabled, &[disabled]
+    opacity: 1 !important
+    color: var(--btn-red-color-disabled)
+    background-color: white
+    border: 1.5px solid var(--btn-red-border-color-disabled)
+
+.mini
+  color: var(--btn-blue-color)
+  border: 1.5px solid var(--btn-mini-color)
+  background-color: white
  &:hover
    border: none
-    background-color: var(--btn-blue-color)
-    color: var(--default-white)
+    background-color: var(--btn-mini-color)
  &:active
-    background-color: var(--btn-light-green-color)
-    color: var(--btn-green-color)
+    border: none
+    background-color: var(--btn-mini-color-active)
+    color: var(--bg-status-green)

-.button-container
-  display: flex
-  gap: 8px
-
-.split
-  height: 19px
-  width: 1px
-  border-radius: 1px
-  background-color: var(--default-white)
-  opacity: 0.3
-
-.icon-container
-  display: flex
-  align-items: center
-  justify-content: center
+.q-btn :deep(.q-focus-helper)
+  display: none
+.q-btn :deep(.q-ripple)
+  display: none
 </style>
--- a/src/components/base/BaseCategorySelection.vue
+++ b/src/components/base/BaseCategorySelection.vue
@@ -31,12 +31,26 @@
          )
          .name.flex.items-center.font-medium.text-xm {{benefit.name}}
      .buttons-group.flex.py-4.px-8.justify-center
-        base-button.text-base.font-semibold(outlined, :size="40", @click="closeModalCategories") Отменить
-        base-button.text-base.font-semibold(
+        q-btn(
+          color="primary",
+          outline,
+          size="16px",
+          no-caps,
+          label="Отменить",
+          :style="{width: '126px', height: '40px'}",
+          padding="0",
+          @click="closeModalCategories"
+        )
+        q-btn(
          v-if="selected[0]?.id",
-          :size="40",
+          color="primary",
+          size="16px",
+          no-caps,
+          label="Сохранить изменения",
+          :style="{width: '132px', height: '40px'}",
+          padding="0",
          @click="saveCategories(selected[0])"
-        ) Сохранить
+        )
    .right-side.flex.px-14.font-bold.relative
      q-icon(name="app:icon-cancel").text-sm.absolute.top-4.right-4.cursor-pointer(@click="closeModalCategories")
      .flex.py-10.gap-y-6.flex-col(v-if="selected[0]?.id && selected[0]?.name !== 'Без льготы'")