Zmiana w działaniu appbaru i zakładka legendy ikon

src/components/ui/AppBar.vue

@@ -3,12 +3,6 @@
     <div class="bar-content flex flex-spaced">
       <div class="bar-left">
         <Options />
-
-        <span class="legend">
-          <!-- <button class="button">
-            <img :src="require('@/assets/icon-legend.svg')" alt="icon legend" />
-          </button>-->
-        </span>
       </div>
 
       <div class="bar-center"></div>

src/components/ui/LegendCard.vue

@@ -0,0 +1,138 @@
+<template>
+  <section class="legend-card">
+    <div class="card-exit" @click="exit">
+      <img :src="require('@/assets/icon-exit.svg')" alt="exit icon" />
+    </div>
+
+    <div class="card-title flex">LEGENDA</div>
+
+    <div class="card-icons">
+      <div class="legend-icon" v-for="(icon, i) in icons" :key="i">
+        <img :src="require(`@/assets/icon-${icon.name}.svg`)" :alt="icon.name" />
+        <span>{{icon.desc}}</span>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from "vue-property-decorator";
+
+@Component
+export default class LegendCard extends Vue {
+  @Prop() exit!: void;
+
+  icons: { name: string; desc: string }[] = [
+    { name: "SPK", desc: "Sceneria sterowana za pomocą programu SPK" },
+    { name: "SCS", desc: "Sceneria sterowana za pomocą programu SCS" },
+    {
+      name: "SCS-SPK",
+      desc: "Sceneria sterowana za pomocą programu SCS lub SPK"
+    },
+    {
+      name: "mechaniczne",
+      desc: "Sceneria posiadająca urządzenia sterowane mechanicznie"
+    },
+    {
+      name: "mechaniczne+SPK",
+      desc:
+        "Sceneria posiadająca urządzenia sterowane mechanicznie zintegrowane z SPK"
+    },
+    {
+      name: "mechaniczne+SCS",
+      desc:
+        "Sceneria posiadająca urządzenia sterowane mechanicznie zintegrowane z SCS"
+    },
+    { name: "ręczne", desc: "Sceneria z ręcznie sterowanymi zwrotnicami" },
+    {
+      name: "ręczne+SPK",
+      desc: "Sceneria z ręcznie sterowanymi zwrotnicami zintegrowana z SPK"
+    },
+    {
+      name: "współczesna",
+      desc: "Sceneria ze współczesną sygnalizacją świetlną"
+    },
+    { name: "kształtowa", desc: "Sceneria ze sygnalizacją kształtową" },
+    { name: "historyczna", desc: "Sceneria ze sygnalizacją historyczną" },
+    {
+      name: "mieszana",
+      desc:
+        "Sceneria ze sygnalizacją mieszaną (kształtowe, historyczne lub/i współczesne)"
+    }
+  ];
+}
+</script>
+
+<style lang="scss">
+@import "../../styles/variables.scss";
+@import "../../styles/responsive.scss";
+
+.legend-card {
+  display: flex;
+  flex-direction: column;
+
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+
+  overflow: auto;
+  background: #262a2e;
+
+  box-shadow: 0 0 15px 5px #474747;
+
+  width: 65%;
+  max-width: 650px;
+  max-height: 95%;
+
+  font-size: calc(0.6rem + 0.5vw);
+
+  @include smallScreen {
+    width: 85%;
+  }
+}
+
+.card {
+  &-exit {
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    margin: 0.8em;
+
+    img {
+      width: 1.1em;
+    }
+
+    cursor: pointer;
+  }
+
+  &-title {
+    font-size: 2em;
+    font-weight: 700;
+    color: $accentCol;
+
+    margin: 0.5em 0;
+  }
+
+  &-icons {
+  }
+}
+
+.legend-icon {
+  display: flex;
+  align-items: center;
+
+  padding: 0.5em;
+
+  img {
+    width: 2em;
+    margin-right: 0.5em;
+  }
+
+  span {
+    font-size: 0.9em;
+  }
+}
+</style>

src/components/ui/List.vue

@@ -398,7 +398,7 @@ export default Vue.extend({
   &-head th {
     padding: 0.3rem;
     background-color: #444;
-    min-width: 140px;
+    min-width: 120px;
 
     cursor: pointer;
     user-select: none;

src/components/ui/Options.vue

@@ -1,32 +1,68 @@
 <template>
   <div class="options">
     <div class="options-actions">
-      <button class="action-btn button" :class="{'open': filterCardOpen}" @click="toggleCardState">
+      <button
+        class="action-btn"
+        :class="{'open': filterCardOpen}"
+        @click="() => toggleCardsState('filter')"
+      >
         <img :src="require('@/assets/icon-filter2.svg')" alt="icon-filter" />
+        <div>FILTRY</div>
+      </button>
+
+      <button
+        class="action-btn"
+        :class="{'open': legendCardOpen}"
+        @click="() => toggleCardsState('legend')"
+      >
+        <img :src="require('@/assets/icon-legend.svg')" alt="icon legend" />
+        <div>LEGENDA</div>
       </button>
     </div>
 
-    <keep-alive>
+    <div class="options-content">
       <transition name="card-anim">
-        <OptionCard v-if="filterCardOpen" :exit="toggleCardState" />
+        <OptionCard v-if="filterCardOpen" :exit="() => toggleCardsState('filter')" />
       </transition>
-    </keep-alive>
+
+      <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/ui/OptionCard.vue";
+import LegendCard from "@/components/ui/LegendCard.vue";
 
 @Component({
-  components: { OptionCard }
+  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>
 
@@ -48,6 +84,47 @@ export default class Options extends Vue {
   }
 }
 
+.action-btn {
+  display: flex;
+  align-items: center;
+
+  background: #333;
+  border: none;
+
+  color: #e0e0e0;
+  font-size: 0.9em;
+
+  padding: 0.3em;
+
+  outline: none;
+  cursor: pointer;
+
+  transition: all 0.3s;
+
+  img {
+    width: 1.3em;
+    margin-right: 0.2em;
+  }
+
+  div {
+    max-width: 0;
+    font-size: 1em;
+    overflow: hidden;
+
+    transition: max-width 0.35s ease-in-out;
+  }
+
+  &:hover > div,
+  &.open > div {
+    max-width: 500px;
+    color: $accentCol;
+  }
+
+  &:hover {
+    background: rgba(#e0e0e0, 0.4);
+  }
+}
+
 .options {
   font-size: calc(0.6rem + 0.9vw);
 
@@ -55,10 +132,4 @@ export default class Options extends Vue {
     display: flex;
   }
 }
-
-.action-btn {
-  img {
-    width: 1.3em;
-  }
-}
 </style>