Restrukturyzacja kodu

2026-05-03 21:38:13 +00:00 · 2020-08-22 15:18:59 +02:00
parent 3cc9381d83
commit c6e3e3f779
15 changed files with 371 additions and 788 deletions
@@ -0,0 +1,151 @@
+<template>
+  <div class="options">
+    <div class="options-actions">
+      <button
+        class="action-btn"
+        :class="{'open': filterCardOpen}"
+        @click="() => toggleCardsState('filter')"
+      >
+        <img :src="require('@/assets/icon-filter2.svg')" alt="icon-filter" />
+        <p>FILTRY</p>
+      </button>
+
+      <button
+        class="action-btn"
+        :class="{'open': legendCardOpen}"
+        @click="() => toggleCardsState('legend')"
+      >
+        <img :src="require('@/assets/icon-legend.svg')" alt="icon legend" />
+        <p>LEGENDA</p>
+      </button>
+    </div>
+
+    <div class="options-content">
+      <transition name="card-anim">
+        <OptionCard v-if="filterCardOpen" :exit="() => toggleCardsState('filter')" />
+      </transition>
+
+      <transition name="card-anim">
+        <LegendCard v-if="legendCardOpen" :exit="() => toggleCardsState('legend')" />
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from "vue-property-decorator";
+import OptionCard from "@/components/StationsView/OptionCard.vue";
+import LegendCard from "@/components/StationsView/LegendCard.vue";
+
+@Component({
+  components: { OptionCard, LegendCard },
+})
+export default class Options extends Vue {
+  filterCardOpen: boolean = false;
+  legendCardOpen: boolean = false;
+
+  toggleCardsState(name: string): void {
+    if (name == "filter") {
+      this.legendCardOpen = false;
+      this.filterCardOpen = !this.filterCardOpen;
+    }
+
+    if (name == "legend") {
+      this.filterCardOpen = false;
+      this.legendCardOpen = !this.legendCardOpen;
+    }
+  }
+
+  toggleCardState(): void {
+    this.filterCardOpen = !this.filterCardOpen;
+  }
+
+  toggleLegendCardState(): void {
+    this.legendCardOpen = !this.legendCardOpen;
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+@import "../../styles/variables.scss";
+@import "../../styles/responsive.scss";
+
+.options {
+  display: flex;
+  z-index: 5;
+}
+
+.card-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.25s ease-in-out;
+  }
+
+  &-enter,
+  &-leave-to {
+    transform: translate(-45%, -50%);
+    opacity: 0;
+  }
+}
+
+.options {
+  font-size: calc(0.6rem + 0.9vw);
+
+  &-actions {
+    display: flex;
+  }
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+
+  background: #333;
+  border: none;
+
+  color: #e0e0e0;
+  font-size: 0.75em;
+
+  padding: 0.3em;
+
+  outline: none;
+  cursor: pointer;
+
+  transition: all 0.3s;
+
+  img {
+    width: 1.3em;
+    margin-right: 0.2em;
+  }
+
+  p {
+    max-width: 0;
+    font-size: 1em;
+    overflow: hidden;
+
+    transition: max-width 0.35s ease-in-out;
+  }
+
+  &:hover > p,
+  &.open > p {
+    max-width: 500px;
+    color: $accentCol;
+  }
+
+  &:hover {
+    background: rgba(#e0e0e0, 0.4);
+  }
+}
+
+@include smallScreen {
+  .options {
+    display: flex;
+    justify-content: center;
+  }
+
+  .action-btn {
+    font-size: 1rem;
+  }
+}
+</style>