@fmidev/smartmet-alert-client 4.2.7 → 4.7.0-alpha.0

package/src/components/GrayScaleToggle.vue

@@ -1,5 +1,9 @@
 <template>
-  <div v-if="grayScaleSelector" id="gray-scale-select-row" :class="theme">
+  <div
+    v-if="grayScaleSelector"
+    id="gray-scale-select-row"
+    :class="theme"
+  >
     <div id="gray-scale-select-text">{{ grayScaleText }}</div>
     <div id="gray-scale-select-container">
       <div
@@ -8,11 +12,19 @@
           'focus-ring',
           grayScale ? 'gray-scale-selected' : 'gray-scale-unselected',
         ]"
+        role="button"
         tabindex="0"
+        :aria-pressed="grayScale ? 'true' : 'false'"
+        :aria-label="grayScaleText"
         @mousedown="preventEvents"
         @click="toggleGrayScale"
         @keydown.enter="toggleGrayScale"
-        @keydown.space="toggleGrayScale" />
+        @keydown.space="toggleGrayScale"
+      >
+        <span>
+          {{ toggleText }}
+        </span>
+      </div>
     </div>
   </div>
 </template>
@@ -48,6 +60,9 @@ export default {
     grayScaleText() {
       return this.t('grayScale')
     },
+    toggleText() {
+      return this.grayScale ? this.t('toggleOn') : this.t('toggleOff')
+    },
   },
   methods: {
     toggleGrayScale(event) {
@@ -89,54 +104,46 @@ div#gray-scale-select-text {
   padding-right: 5px;
   vertical-align: middle;
   line-height: normal;
+  word-break: break-word;
+  hyphens: auto;
 }
 
 div#gray-scale-select-container {
   display: table-cell;
-  width: 30px;
+  width: 55px;
   height: $symbol-list-line-height;
   vertical-align: middle;
 }
 
 div#gray-scale-select {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   height: $symbol-list-select-height;
   margin: 0;
   background-repeat: no-repeat;
   background-position: center;
   cursor: pointer;
-}
-
-.light-theme .gray-scale-selected {
-  background-image: url($ui-image-path + 'toggle-selected-blue' + $image-extension);
-}
-
-.dark-theme .gray-scale-selected {
-  background-image: url($ui-image-path + 'toggle-selected-light' + $image-extension);
-}
-
-.light-gray-theme .gray-scale-selected {
-  background-image: url($ui-image-path + 'toggle-selected-dark' + $image-extension);
-}
-
-.dark-gray-theme .gray-scale-selected {
-  background-image: url($ui-image-path + 'toggle-selected-light' + $image-extension);
-}
-
-.light-theme .gray-scale-unselected {
-  background-image: url($ui-image-path + 'toggle-unselected-light' + $image-extension);
-}
-
-.dark-theme .gray-scale-unselected {
-  background-image: url($ui-image-path + 'toggle-unselected-dark' + $image-extension);
-}
-
-.light-gray-theme .gray-scale-unselected {
-  background-image: url($ui-image-path + 'toggle-unselected-light' + $image-extension);
-}
-
-.dark-gray-theme .gray-scale-unselected {
-  background-image: url($ui-image-path + 'toggle-unselected-dark' + $image-extension);
+  &.gray-scale-selected {
+    padding-right: 18px;
+    background-image: url($ui-image-path + 'toggle-selected' + $image-extension);
+    span {
+      color: $toggle-on-text;
+    }
+  }
+  &.gray-scale-unselected {
+    padding-left: 18px;
+    background-image: url($ui-image-path + 'toggle-unselected' + $image-extension);
+    span {
+      color: $toggle-off-text;
+    }
+  }
+  span {
+    font-family: $symbol-font-family;
+    font-size: $font-size;
+    forced-color-adjust: none;
+  }
 }
 
 @media (max-width: 767px) {

package/src/components/Legend.vue

@@ -1,59 +1,56 @@
 <template>
-  <div class="sticky-top" :class="theme">
+  <div
+    class="sticky-top"
+    :class="theme"
+  >
     <GrayScaleToggle
       class="narrow-screen"
       :language="language"
       :gray-scale-selector="grayScaleSelector"
       :theme="theme"
-      @themeChanged="onThemeChanged" />
+      @theme-changed="onThemeChanged"
+    />
     <div class="row symbol-list-header-row">
       <nav class="symbol-list-header bold-text">
         {{ warningSymbolsText }}
-        <br v-if="input.length > 0" class="symbol-list-header-line-break" />
+        <br
+          v-if="input.length > 0"
+          class="symbol-list-header-line-break"
+        />
       </nav>
     </div>
-    <b-card no-body class="mb-1 d-md-none legends-panel">
-      <b-card-header header-tag="header" class="legends-heading p-1">
-        <div class="legends-header">
-          <span class="legends-text">
-            {{ toggleLegendsText }}
-          </span>
-        </div>
-        <b-button
-          block
-          :class="['legends-toggle', visible ? '' : 'collapsed']"
-          @click="onLegendToggle" />
-      </b-card-header>
-      <b-collapse
-        id="legends-collapse"
-        v-model="visible"
-        class="legends-collapse-item focus-ring"
-        tabindex="0">
-        <b-card-body body-class="p-0">
-          <div class="legends-container">
-            <Warnings
-              :input="input"
-              :visible-warnings="visibleWarnings"
-              :theme="theme"
-              :language="language" />
-          </div>
-        </b-card-body>
-      </b-collapse>
-    </b-card>
-    <div ref="warningsContainer" class="d-md-block d-none">
+    <CollapsiblePanel
+      :visible="visible"
+      :title="toggleLegendsText"
+      :theme="theme"
+      @toggle="onLegendToggle"
+    >
       <Warnings
         :input="input"
         :visible-warnings="visibleWarnings"
         :theme="theme"
         :language="language"
-        @warningsToggled="onWarningsToggled"
-        @showAllWarnings="onShowAllWarnings" />
+      />
+    </CollapsiblePanel>
+    <div
+      ref="warningsContainer"
+      class="desktop-only"
+    >
+      <Warnings
+        :input="input"
+        :visible-warnings="visibleWarnings"
+        :theme="theme"
+        :language="language"
+        @warnings-toggled="onWarningsToggled"
+        @show-all-warnings="onShowAllWarnings"
+      />
     </div>
     <GrayScaleToggle
       :language="language"
       :gray-scale-selector="grayScaleSelector"
       :theme="theme"
-      @themeChanged="onThemeChanged" />
+      @theme-changed="onThemeChanged"
+    />
   </div>
 </template>
 
@@ -61,11 +58,15 @@
 import { onMounted, onUnmounted, ref } from 'vue'
 
 import i18n from '../mixins/i18n'
+import CollapsiblePanel from './CollapsiblePanel.vue'
+import GrayScaleToggle from './GrayScaleToggle.vue'
 import Warnings from './Warnings.vue'
 
 export default {
   name: 'Legend',
   components: {
+    CollapsiblePanel,
+    GrayScaleToggle,
     Warnings,
   },
   mixins: [i18n],
@@ -166,211 +167,6 @@ div.symbol-list-header-row {
   }
 }
 
-.legends-panel {
-  border-radius: 0;
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.light-theme .legends-panel {
-  border: 2px solid $light-legend-background-color;
-}
-
-.dark-theme .legends-panel {
-  border: 2px solid $dark-legend-background-color;
-}
-
-.light-gray-theme .legends-panel {
-  border: 2px solid $light-gray-legend-background-color;
-}
-
-.dark-gray-theme .legends-panel {
-  border: 2px solid $dark-gray-legend-background-color;
-}
-
-.legends-heading {
-  height: $current-warning-height;
-  padding: 0 0 0 15px !important;
-  line-height: $current-warning-height;
-  border: none;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
-}
-
-.light-theme .legends-heading {
-  background-color: $light-legend-heading-background-color;
-}
-
-.dark-theme .legends-heading {
-  background-color: $dark-legend-heading-background-color;
-}
-
-.light-gray-theme .legends-heading {
-  background-color: $light-gray-legend-heading-background-color;
-}
-
-.dark-gray-theme .legends-heading {
-  background-color: $dark-gray-legend-heading-background-color;
-}
-
-.legends-header {
-  position: absolute;
-  left: 0;
-  right: 38px;
-}
-
-.light-theme .legends-header {
-  background: $light-legend-heading-background-color;
-}
-
-.dark-theme .legends-header {
-  background: $dark-legend-heading-background-color;
-}
-
-.light-gray-theme .legends-header {
-  background: $light-gray-legend-heading-background-color;
-}
-
-.dark-gray-theme .legends-header {
-  background: $dark-gray-legend-heading-background-color;
-}
-
-.legends-text {
-  display: block;
-  text-align: left;
-  line-height: $current-warning-height;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin-left: 15px;
-}
-
-.light-theme .legends-text {
-  background-color: $light-legend-heading-background-color;
-}
-
-.dark-theme .legends-text {
-  background-color: $dark-legend-heading-background-color;
-}
-
-.light-gray-theme .legends-text {
-  background-color: $light-gray-legend-heading-background-color;
-}
-
-.dark-gray-theme .legends-text {
-  background-color: $dark-gray-legend-heading-background-color;
-}
-
-.legends-toggle {
-  position: relative;
-  height: $current-warning-height;
-  width: $current-warning-height;
-  min-width: $current-warning-height;
-  background-image: url($ui-image-path + 'arrow-up.svg');
-  background-repeat: no-repeat;
-  background-position: center;
-  border-radius: 0;
-  border-style: none;
-  float: right;
-  padding: $image-padding;
-  margin-left: 5px;
-
-  &.collapsed {
-    background-image: url($ui-image-path + 'arrow-down.svg');
-  }
-}
-
-.light-theme .legends-toggle {
-  background-color: $light-legend-toggle-background-color;
-
-  &:hover {
-    background-color: $light-legend-toggle-background-color;
-  }
-
-  &:active {
-    background-color: $light-legend-toggle-background-color;
-  }
-
-  &:not(:disabled):not(.disabled):active {
-    background-color: $light-current-warning-toggle-active-color;
-  }
-}
-
-.dark-theme .legends-toggle {
-  background-color: $dark-legend-toggle-background-color;
-
-  &:hover {
-    background-color: $dark-legend-toggle-background-color;
-  }
-
-  &:active {
-    background-color: $dark-legend-toggle-background-color;
-  }
-
-  &:not(:disabled):not(.disabled):active {
-    background-color: $dark-current-warning-toggle-active-color;
-  }
-}
-
-.light-gray-theme .legends-toggle {
-  background-color: $light-gray-legend-toggle-background-color;
-
-  &:hover {
-    background-color: $light-gray-legend-toggle-background-color;
-  }
-
-  &:active {
-    background-color: $light-gray-legend-toggle-background-color;
-  }
-
-  &:not(:disabled):not(.disabled):active {
-    background-color: $light-gray-current-warning-toggle-active-color;
-  }
-}
-
-.dark-gray-theme .legends-toggle {
-  background-color: $dark-gray-legend-toggle-background-color;
-
-  &:hover {
-    background-color: $dark-gray-legend-toggle-background-color;
-  }
-
-  &:active {
-    background-color: $dark-gray-legend-toggle-background-color;
-  }
-
-  &:not(:disabled):not(.disabled):active {
-    background-color: $dark-gray-current-warning-toggle-active-color;
-  }
-}
-
-.legends-container {
-  padding: 15px;
-}
-
-.light-theme .legends-container {
-  background-color: $light-legend-container-background-color;
-  border-top: 2px solid $light-legend-background-color;
-}
-
-.dark-theme .legends-container {
-  background-color: $dark-legend-container-background-color;
-  border-top: 2px solid $dark-legend-background-color;
-}
-
-.light-gray-theme .legends-container {
-  background-color: $light-gray-legend-container-background-color;
-  border-top: 2px solid $light-gray-legend-background-color;
-}
-
-.dark-gray-theme .legends-container {
-  background-color: $dark-gray-legend-container-background-color;
-  border-top: 2px solid $dark-gray-legend-background-color;
-}
-
-div#legends-collapse div.card-body {
-  padding: 0;
-}
-
 nav.symbol-list-header {
   padding-left: 0;
   text-align: left;