Commit ddd1f537 authored by Matěj Lang's avatar Matěj Lang
Browse files

Header icons are working.

parent 819735cd

src/components/header/Header.vue

+35 −15
Original line number Diff line number Diff line
@@ -3,18 +3,28 @@ 
    <div class="top-bar">

      <h1 style="margin-top: auto; margin-bottom: auto;">ANTARSTICK</h1>

      <help-circle-icon

        v-if="!showHelp"

        v-if="!showHelpDialog"

        class="icon"

        @click="showHelp = true"

        @click="showHelpDialog = true"

      />

      <help-circle-outline-icon class="icon" v-else @click="showHelp = false" />

      <help-circle-outline-icon

        class="icon"

        v-else

        @click="showHelpDialog = false"

      />

      <div class="popup-container">

        <filter-icon

          class="icon"

          v-if="!showFilters"

          @click="showFilters = true"

        />

        <filter-off-icon class="icon" v-else @click="showFilters = false" />

        <Filters class="popup" v-show="showFilters" />

      </div>

      <div class="popup-container">

        <map-legend-icon class="icon" @click="showLegend = !showLegend" />

        <Legend class="popup" v-if="showLegend" />

      </div>

      <content-save-icon

        class="icon"

        @click="commitChangesToDisk"
@@ -82,8 +92,8 @@ export default { 
  components: {

    ContextMap,

    AveragesMap,

    // Filters,

    // Legend,

    Filters,

    Legend,



    ContentSaveIcon,

    FilterIcon,
@@ -127,12 +137,12 @@ export default { 
        this.$store.dispatch('setShowLegend', value)

      }

    },

    showHelp: {

    showHelpDialog: {

      get() {

        return this.$store.getters.showHelp

        return this.$store.getters.showHelpDialog

      },

      set(value) {

        this.$store.dispatch('setShowHelp', value)

        this.$store.dispatch('setShowHelpDialog', value)

      }

    },

    cameraIDs() {
@@ -196,6 +206,18 @@ export default { 
  grid-template-columns: auto 50px 50px 50px 50px 20px;

}



.popup-container {

  position: relative;

  margin: auto;

}



.popup-container .popup {

  position: absolute;

  z-index: 20;

  top: 40px;

  right: -10px;

}



.charts {

  padding-left: 10px;

  display: grid;
@@ -205,14 +227,12 @@ export default { 
}



.averages-container {

  // grid-area: averages-map;

  grid-column: 1/3;

  display: grid;

  grid-template-columns: 30px 100px auto 150px;

}



.context-container {

  // grid-area: averages-map;

  grid-column: 1/3;

  display: grid;

  grid-template-columns: 30px 100px auto 150px;