Răsfoiți Sursa

HUE-9485 [frontend] Add a Vue modal component

Johan Ahlen 5 ani în urmă
părinte
comite
b04127cfe3

+ 31 - 0
desktop/core/src/desktop/js/components/Modal.test.ts

@@ -0,0 +1,31 @@
+// 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 { shallowMount } from '@vue/test-utils'
+import Modal from './Modal.vue'
+
+describe('Modal.vue', () => {
+  it('should render a modal', () => {
+    const wrapper = shallowMount(Modal, {
+      scopedSlots: {
+        header: '<div id="test-header">Some Header</div>',
+        body: '<div id="test-body">Some Body</div>',
+        footer: '<div id="test-footer">Some Footer</div>'
+      }
+    });
+    expect(wrapper.element).toMatchSnapshot();
+  })
+})

+ 107 - 0
desktop/core/src/desktop/js/components/Modal.vue

@@ -0,0 +1,107 @@
+<!--
+  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.
+-->
+
+<template>
+  <transition name="modal">
+    <div class="modal-mask">
+      <div class="modal-wrapper">
+        <div class="modal-container">
+          <div class="modal-header">
+            <slot name="header"></slot>
+            <i class="fa fa-times" aria-hidden="true" @click="$emit('close')"></i>
+          </div>
+          <div class="modal-body">
+            <slot name="body"></slot>
+          </div>
+          <div class="modal-footer">
+            <slot name="footer">
+              <button class="modal-default-button" @click="$emit('close')">CLOSE</button>
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script lang="ts">
+  import Vue from 'vue';
+  import Component from 'vue-class-component';
+
+  // Based on https://vuejs.org/v2/examples/modal.html
+
+  @Component
+  export default class Modal extends Vue {}
+</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>

+ 54 - 0
desktop/core/src/desktop/js/components/__snapshots__/Modal.test.ts.snap

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Modal.vue should render a modal 1`] = `
+<transition-stub
+  name="modal"
+>
+  <div
+    class="modal-mask"
+  >
+    <div
+      class="modal-wrapper"
+    >
+      <div
+        class="modal-container"
+      >
+        <div
+          class="modal-header"
+        >
+          <div
+            id="test-header"
+          >
+            Some Header
+          </div>
+           
+          <i
+            aria-hidden="true"
+            class="fa fa-times"
+          />
+        </div>
+         
+        <div
+          class="modal-body"
+        >
+          <div
+            id="test-body"
+          >
+            Some Body
+          </div>
+        </div>
+         
+        <div
+          class="modal-footer"
+        >
+          <div
+            id="test-footer"
+          >
+            Some Footer
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</transition-stub>
+`;