Browse Source

[frontend] Finalize the Modal component

The modal component was just a skeleton up until now, this adds proper styling and events to make it usable.
Johan Ahlen 4 years ago
parent
commit
c81dbce508

+ 120 - 0
desktop/core/src/desktop/js/components/Modal.scss

@@ -0,0 +1,120 @@
+/*
+ Licensed to Cloudera, Inc. under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  Cloudera, Inc. licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+@import './styles/colors';
+@import './styles/mixins';
+
+.hue-modal-mask {
+  @include transition(opacity 0.3s ease);
+
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: table;
+}
+
+.hue-modal-enter {
+  opacity: 0;
+}
+
+.hue-modal-leave-active {
+  opacity: 0;
+}
+
+.hue-modal-enter .modal-container,
+.hue-modal-leave-active .modal-container {
+  @include hue-transform(scale(1.1));
+}
+
+.hue-modal-wrapper {
+  display: table-cell;
+  vertical-align: middle;
+  opacity: 1;
+
+  .hue-modal-container {
+    @include display-flex;
+    @include flex-direction(column);
+    @include box-shadow(0, 2px, 8px, rgba(0, 0, 0, 0.33));
+    @include transition(all 0.3s ease);
+
+    width: 500px;
+    margin: 0 auto;
+    background-color: $fluid-white;
+    border-radius: $hue-panel-border-radius;
+
+    .hue-modal-header {
+      @include flex(0 1 auto);
+
+      padding: 15px;
+
+      h3 {
+        float: left;
+        margin-top: 0;
+        color: $hue-primary-color-dark;
+      }
+
+      .hue-modal-close-button {
+        float: right;
+        padding: 4px;
+        font-size: 28px;
+        font-weight: bold;
+        line-height: 20px;
+        opacity: 0.2;
+        border: none;
+        background-color: transparent;
+
+        &:active,
+        &:focus,
+        &:focus-visible,
+        &:hover {
+          border: none;
+          outline: none;
+        }
+
+        &:hover {
+          opacity: 0.7;
+        }
+      }
+    }
+
+    .hue-modal-body {
+      @include flex(1 1 100%);
+
+      padding: 5px 15px;
+    }
+
+    .hue-modal-footer {
+      @include flex(0 1 auto);
+
+      padding: 15px;
+      text-align: right;
+
+      button {
+        margin-left: 5px;
+      }
+    }
+  }
+}
+
+
+
+

+ 27 - 69
desktop/core/src/desktop/js/components/Modal.vue

@@ -17,20 +17,27 @@
 -->
 
 <template>
-  <transition name="modal">
-    <div class="modal-mask">
-      <div class="modal-wrapper">
-        <div class="modal-container">
-          <div class="modal-header">
-            <slot name="header" />
-            <i class="fa fa-times" aria-hidden="true" @click="$emit('close')" />
+  <transition name="hue-modal">
+    <div class="hue-modal-mask">
+      <div class="hue-modal-wrapper">
+        <div class="hue-modal-container">
+          <div class="hue-modal-header">
+            <h3>{{ header }}</h3>
+            <button
+              class="hue-modal-close-button"
+              type="button"
+              aria-label="{{ I18n('Close') }}"
+              @click="$emit('close')"
+            >
+              <span aria-hidden="true">×</span>
+            </button>
           </div>
-          <div class="modal-body">
+          <div class="hue-modal-body">
             <slot name="body" />
           </div>
-          <div class="modal-footer">
+          <div class="hue-modal-footer">
             <slot name="footer">
-              <button class="modal-default-button" @click="$emit('close')">CLOSE</button>
+              <button class="hue-modal-default-button" @click="$emit('close')">CLOSE</button>
             </slot>
           </div>
         </div>
@@ -42,67 +49,18 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
 
-  // Based on https://vuejs.org/v2/examples/modal.html
+  import './Modal.scss';
+  import I18n from 'utils/i18n';
 
   export default defineComponent({
     name: 'Modal',
-    emits: ['close']
+    props: {
+      header: {
+        type: String,
+        default: ''
+      }
+    },
+    emits: ['close'],
+    methods: { I18n }
   });
 </script>
-
-<style lang="scss" scoped>
-  .modal-mask {
-    position: fixed;
-    z-index: 9998;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    display: table;
-    transition: opacity 0.3s ease;
-  }
-
-  .modal-wrapper {
-    display: table-cell;
-    vertical-align: middle;
-  }
-
-  .modal-container {
-    width: 300px;
-    margin: 0px auto;
-    padding: 20px 30px;
-    background-color: #fff;
-    border-radius: 2px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
-    transition: all 0.3s ease;
-    font-family: Helvetica, Arial, sans-serif;
-  }
-
-  .modal-header h3 {
-    margin-top: 0;
-    color: #42b983;
-  }
-
-  .modal-body {
-    margin: 20px 0;
-  }
-
-  .modal-default-button {
-    float: right;
-  }
-
-  .modal-enter {
-    opacity: 0;
-  }
-
-  .modal-leave-active {
-    opacity: 0;
-  }
-
-  .modal-enter .modal-container,
-  .modal-leave-active .modal-container {
-    -webkit-transform: scale(1.1);
-    transform: scale(1.1);
-  }
-</style>

+ 19 - 13
desktop/core/src/desktop/js/components/__snapshots__/Modal.test.ts.snap

@@ -3,36 +3,42 @@
 exports[`Modal.vue should render a modal 1`] = `
 <transition-stub>
   <div
-    class="modal-mask"
+    class="hue-modal-mask"
   >
     <div
-      class="modal-wrapper"
+      class="hue-modal-wrapper"
     >
       <div
-        class="modal-container"
+        class="hue-modal-container"
       >
         <div
-          class="modal-header"
+          class="hue-modal-header"
         >
-          
-          
-          <i
-            aria-hidden="true"
-            class="fa fa-times"
-          />
+          <h3 />
+          <button
+            aria-label="{{ I18n('Close') }}"
+            class="hue-modal-close-button"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+            >
+              ×
+            </span>
+          </button>
         </div>
         <div
-          class="modal-body"
+          class="hue-modal-body"
         >
           
           
         </div>
         <div
-          class="modal-footer"
+          class="hue-modal-footer"
         >
           
           <button
-            class="modal-default-button"
+            class="hue-modal-default-button"
           >
             CLOSE
           </button>