Merge pull request #72 from dderbentsov/new_button

New button

src/assets/sass/variables.sass

@@ -6,6 +6,10 @@
   --font-black-color-0: rgba(9, 10, 21, 0)
   --font-black-color-1: rgba(9, 10, 21, 0.5)
   --btn-blue-color: #4772f2
+  --btn-blue-sec-color: #c6d2f6
+  --btn-blue-color-hover: #7e9cf6
+  --btn-blue-sec-color-hover: #a0b4f0
+  --btn-blue-color-disabled: #c8d5fb
   --btn-blue-color-0: rgba(65, 105, 225, 0)
   --btn-blue-color-1: rgba(65, 105, 225, 0.3)
   --btn-blue-color-2: rgba(65, 105, 225, 0.5)

src/components/base/BaseButton.vue

@@ -0,0 +1,125 @@
+<template lang="pug">
+  button.base-button.text-base(
+    :disabled="disabled",
+    :class="{'rounded': rounded, 'outlined': outlined, 'secondary': secondary}"
+    :style="{height: size + 'px', minWidth: size + 'px'}"
+    )
+    .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'}"
+        )
+</template>
+
+<script>
+export default {
+  name: "BaseButton",
+  props: {
+    outlined: Boolean,
+    rounded: Boolean,
+    disabled: Boolean,
+    split: Boolean,
+    secondary: Boolean,
+    rightIcon: {
+      type: String,
+      default: "",
+    },
+    leftIcon: {
+      type: String,
+      default: "",
+    },
+    iconLeftSize: {
+      type: Number,
+      default: 10,
+    },
+    iconRightSize: {
+      type: Number,
+      default: 10,
+    },
+    size: {
+      type: Number,
+      default: 24,
+    },
+  },
+};
+</script>
+
+<style scoped lang="sass">
+.base-button
+  padding: 8px 23px
+  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
+  &: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]
+    background-color: var(--btn-blue-color-disabled)
+    border: 1px solid var(--btn-blue-color-disabled)
+
+.rounded
+  padding: 0
+  border-radius: 50%
+
+.outlined
+  background-color: var(--default-white)
+  border: 1px solid var(--btn-blue-color)
+  color: var(--btn-blue-color)
+  &:active
+    background-color: var(--default-white)
+    border: 1px solid var(--font-dark-blue-color)
+    color: var(--font-dark-blue-color)
+  &:hover
+    background-color: var(--default-white)
+    border: 1px solid var(--btn-blue-color-hover)
+    color: var(--btn-blue-color-hover)
+  &:disabled, &[disabled]
+    background-color: var(--default-white)
+    border: 1px solid var(--btn-blue-color-1)
+    color: var(--btn-blue-color-1)
+
+.secondary
+  background-color: var(--btn-blue-sec-color)
+  border: 1px solid var(--btn-blue-sec-color)
+  color: var(--btn-blue-color)
+  &:hover
+    background-color: var(--btn-blue-color-hover)
+    border: 1px solid var(--btn-blue-color-hover)
+    color: var(--btn-blue-color)
+  &:disabled, &[disabled]
+    background-color: var(--btn-blue-sec-color)
+    border: 1px solid var(--btn-blue-sec-color)
+    color: var(--btn-blue-color)
+
+.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
+</style>

src/pages/calendar/components/CalendarSidebar.vue

@@ -2,28 +2,24 @@
   .sidebar.flex.flex-col.bg-white(:class="openSidebar")
     .sidebar-wrapper.h-full.my-13px.flex.flex-col.justify-between(:style="sidebarWidth")
       .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px(v-if="!isOpen")
-        base-button-plus(:size="40")
+        base-button(left-icon="icon-plus", rounded, size="40", icon-left-size="10" )
         .flex.flex-col.items-center(v-if="!isOpen")
-          base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
+          base-button(left-icon="icon-plus", rounded, size="24", icon-left-size="10", secondary )
           .flex.flex-col.gap-y-2.items-center.mt-4
             .event.flex.items-center.justify-center(v-for="event in events" :key="event.id")
               .event-type(:style="{ background: event.color }")
         .flex.flex-col.items-center.gap-y-2.justify-center
-          base-button-plus.mb-2(:class="buttonStyled" :size="24" :icon-size="10")
+          base-button.mb-2(left-icon="icon-plus", rounded, size="24", icon-left-size="10", secondary )
           .team-card(v-for="teammate in teamData" :key="teammate.id")
             img.avatar-wrapper(:src="avatar" alt="Team member")
       .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px(v-else)
         .create-event.flex.items-center.justify-center
-          base-create-button.pl-15px.pb-2.pr-3.pt-2.items-center.h-10(
-            text-styled="createEvent"
-            :icon-size="10"
-            text="Создать событие"
-            :with-icon="true"
-            icon-position="right")
+          base-button(right-icon="icon-plus", split, size="40", icon-right-size="10" ) Создать событие
+
         .flex.items-center.flex-col.gap-y-4
           .events-wrapper.flex.items-center.justify-between
             .flex {{ "Виды событий" }}
-            base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
+            base-button(left-icon="icon-plus", rounded, size="24", icon-left-size="10", secondary )
           .flex.flex-col.gap-y-2
             .relative.flex.items-center.gap-x-3.h-8(v-for="event in events")
               input.custom-input.py-2.pl-6.h-full.not-italic.font-medium.text-xxs(
@@ -34,7 +30,7 @@
         .flex.flex-col.gap-y-4
           .events-wrapper.flex.items-center.justify-between
             .flex {{ "Команды" }}
-            base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
+            base-button(left-icon="icon-plus", rounded, size="24", icon-left-size="10", secondary )
           .box-team.flex.flex-col.gap-y-2
             .team-card.flex.items-center.justify-between.cursor-pointer(
               v-for="teammate in teamData"
@@ -44,7 +40,7 @@
                 .flex.ml-2.not-italic.font-medium.text-xxs {{ changeName(teammate.last_name, teammate.first_name, teammate.patronymic) }}
               span.icon-change-place.cursor-pointer.w-5
       .button-wrapper.flex.justify-center.mb-23px
-        base-open-button(@click="changeSize" :style="{ transform: `rotate(${turnButton})`}")
+        base-button(left-icon="icon-long-arrow", rounded, size="40", icon-left-size="18", secondary, :style="{ transform: `rotate(${turnButton})`}", @click="changeSize")
 </template>
 
 <script>
@@ -52,10 +48,12 @@ import BaseButtonPlus from "../../../components/base/buttons/BaseButtonPlus.vue"
 import BaseOpenButton from "../../../components/base/buttons/BaseOpenButton.vue";
 import BaseCreateButton from "../../../components/base/buttons/BaseCreateButton.vue";
 import img from "../../../assets/images/team-member.svg";
+import BaseButton from "@/components/base/BaseButton";
 
 export default {
   name: "CalendarSidebar",
   components: {
+    BaseButton,
     BaseButtonPlus,
     BaseOpenButton,
     BaseCreateButton,
@@ -187,7 +185,7 @@ export default {
   width: 169px
 
 .team-card
-  border-radius:16px
+  border-radius: 16px
   &:hover
     background: var(--font-dark-blue-color)
     color: var(--default-white)