From c66fe3ac10661b2098b100c983497ca69a440d96 Mon Sep 17 00:00:00 2001 From: Victor Lucas Date: Tue, 3 Sep 2019 08:41:08 -0300 Subject: [PATCH 1/8] Modal component --- src/components/Modal.vue | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 src/components/Modal.vue diff --git a/src/components/Modal.vue b/src/components/Modal.vue new file mode 100644 index 0000000..9b6f9d5 --- /dev/null +++ b/src/components/Modal.vue @@ -0,0 +1,40 @@ + + + \ No newline at end of file From bd95698588fcc432ba05c9d799cb2811c9252050 Mon Sep 17 00:00:00 2001 From: Victor Lucas Date: Tue, 3 Sep 2019 08:41:29 -0300 Subject: [PATCH 2/8] Modal component export, import and registration --- src/components/index.js | 4 +++- src/index.js | 3 ++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/index.js b/src/components/index.js index 3ca94a4..4c7bfcc 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -5,6 +5,7 @@ import SidenavLink from './SidenavLink.vue' import Card from './Card.vue'; import Graphic from './Graphic.vue'; import Input from './Input.vue'; +import Modal from './Modal.vue'; export const NavbarIntricately = Navbar; export const FooterIntricately = Footer; @@ -12,4 +13,5 @@ export const SidenavIntricately = Sidenav; export const SidenavLinkIntricately = SidenavLink; export const CardIntricately = Card; export const GraphicIntricately = Graphic; -export const InputIntricately = Input; \ No newline at end of file +export const InputIntricately = Input; +export const ModalIntricately = Modal; \ No newline at end of file diff --git a/src/index.js b/src/index.js index f7242a7..b574598 100644 --- a/src/index.js +++ b/src/index.js @@ -3,7 +3,7 @@ import router from 'Router' import App from './App.vue' import 'Styles/intricately.scss'; import store from './store'; -import { NavbarIntricately, FooterIntricately, SidenavIntricately, SidenavLinkIntricately, CardIntricately, GraphicIntricately, InputIntricately } from './components'; +import { NavbarIntricately, FooterIntricately, SidenavIntricately, SidenavLinkIntricately, CardIntricately, GraphicIntricately, InputIntricately, ModalIntricately } from './components'; Vue.component('navbar-intricately', NavbarIntricately); Vue.component('footer-intricately', FooterIntricately); @@ -12,6 +12,7 @@ Vue.component('sidenavlink-intricately', SidenavLinkIntricately); Vue.component('card-intricately', CardIntricately); Vue.component('graphic-intricately', GraphicIntricately); Vue.component('input-intricately', InputIntricately); +Vue.component('modal-intricately', ModalIntricately); new Vue({ render: createElement => createElement(App), From fc2cd3d7e4b155d55a0084238ae8cd13caa6493e Mon Sep 17 00:00:00 2001 From: Victor Lucas Date: Tue, 3 Sep 2019 08:41:58 -0300 Subject: [PATCH 3/8] Modal component css --- src/styles/_components.scss | 3 +- src/styles/modal.component.scss | 80 +++++++++++++++++++++++++++++++++ 2 files changed, 82 insertions(+), 1 deletion(-) create mode 100644 src/styles/modal.component.scss diff --git a/src/styles/_components.scss b/src/styles/_components.scss index 633805e..9330ae6 100644 --- a/src/styles/_components.scss +++ b/src/styles/_components.scss @@ -3,4 +3,5 @@ @import './sidenav.component.scss'; @import './card.component.scss'; @import './graphic.component.scss'; -@import './input.component.scss'; \ No newline at end of file +@import './input.component.scss'; +@import './modal.component.scss'; \ No newline at end of file diff --git a/src/styles/modal.component.scss b/src/styles/modal.component.scss new file mode 100644 index 0000000..68aeed0 --- /dev/null +++ b/src/styles/modal.component.scss @@ -0,0 +1,80 @@ +@import './colors.scss'; +@import './variables.scss'; + +@mixin close-icon-bar($color, $rotate) { + content: ''; + position: absolute; + width: 2px; + height: 100%; + left: 10px; + transform: rotate($rotate); + border-radius: $defaultradius; + background: $color; +} + +.modal { + .modal-overlay { + background: $overlayblack; + position: fixed; + left: 0; + top: 0; + z-index: 888; + width: 100%; + height: 100%; + } + + .modal-container { + background: $white; + border-radius: $defaultradius; + padding: 20px; + position: fixed; + z-index: 999; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + min-width: 40%; + box-shadow: 0 4px 5px 0 ($overlayblack + 30); + + .title { + display: flex; + align-items: center; + justify-content: space-between; + + h2 { + text-transform: uppercase; + color: $darkgray; + } + + .close { + position: relative; + width: 15px; + height: 15px; + + cursor: pointer; + + &:before { + @include close-icon-bar($lavender, 45deg); + } + + &:after { + @include close-icon-bar($lavender, -45deg); + } + + &:hover { + &:before { + @include close-icon-bar($lavender - 20, 45deg); + } + + &:after { + @include close-icon-bar($lavender - 20, -45deg); + } + } + + } + } + + .modal-content { + + } + } +} \ No newline at end of file From c2f9532256b1f47cca5e1767910e4f980bea4420 Mon Sep 17 00:00:00 2001 From: Victor Lucas Date: Tue, 3 Sep 2019 08:42:08 -0300 Subject: [PATCH 4/8] Overlay color --- src/styles/_colors.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss index dd04eaa..fcefbfd 100644 --- a/src/styles/_colors.scss +++ b/src/styles/_colors.scss @@ -12,4 +12,5 @@ $gainsboro: #d4d9e3; $dimgray: #585858; $lightgray: #c7c8d0; $lightbluegray: #ced2e0; -$lightred: #DCC2C2; \ No newline at end of file +$lightred: #DCC2C2; +$overlayblack: rgba(0,0,0,0.3); \ No newline at end of file From 48b5d4aeb9f4134173f374e6984f7a6a6b3bd9b2 Mon Sep 17 00:00:00 2001 From: Victor Lucas Date: Tue, 3 Sep 2019 08:54:07 -0300 Subject: [PATCH 5/8] Correction on emit input value --- src/components/Input.vue | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/src/components/Input.vue b/src/components/Input.vue index 7a5c08d..c28e938 100644 --- a/src/components/Input.vue +++ b/src/components/Input.vue @@ -15,7 +15,6 @@ data() { return { - inputValue: this.value || '', minValue: parseInt(this.min), maxValue: parseInt(this.max), error: { @@ -25,16 +24,18 @@ } }, - watch: { - value(val){ - if(this.type !== 'currency'){ - this.inputValue = value; - }else this.inputValue = parseInt(value) - }, + computed: { + inputValue: { + get(){ + return this.value || ''; + }, - inputValue(val){ - this.validate(); - }, + set(val){ + this.validate(); + console.log('oie') + this.$emit('input', val); + } + } }, methods: { From 72261bc493efd9591e89ed66ae760f9cd64486d0 Mon Sep 17 00:00:00 2001 From: Victor Lucas Date: Tue, 3 Sep 2019 08:54:32 -0300 Subject: [PATCH 6/8] Company Data page corrected --- src/pages/CompanyData.vue | 43 +++++++++++++++++++++++++++++---------- 1 file changed, 32 insertions(+), 11 deletions(-) diff --git a/src/pages/CompanyData.vue b/src/pages/CompanyData.vue index 3d696c6..b3b5a4f 100644 --- a/src/pages/CompanyData.vue +++ b/src/pages/CompanyData.vue @@ -1,21 +1,42 @@ export default { + data(){ + return { + modalOpened: false, + notes: '', + } + }, + methods: { openModal(){ - console.log("oie") + this.modalOpened = true; + }, + + closeModal(){ + this.modalOpened = false; } } From 018fa320979a3886b8625cad4cb06021c90c8850 Mon Sep 17 00:00:00 2001 From: Victor Lucas Date: Tue, 3 Sep 2019 09:15:39 -0300 Subject: [PATCH 7/8] Correction on company data --- src/pages/CompanyData.vue | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/pages/CompanyData.vue b/src/pages/CompanyData.vue index b3b5a4f..2d32433 100644 --- a/src/pages/CompanyData.vue +++ b/src/pages/CompanyData.vue @@ -7,11 +7,7 @@
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique pretium cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec quis est eu dui consequat aliquam. - - -
- TESTANDO ->> {{modalOpened}} From 8b30fe5771a7f8fe71faaab0c35117826ce38948 Mon Sep 17 00:00:00 2001 From: Victor Lucas Date: Tue, 3 Sep 2019 09:15:49 -0300 Subject: [PATCH 8/8] Modal test --- src/tests/index.js | 0 src/tests/modal.test.js | 0 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/tests/index.js create mode 100644 src/tests/modal.test.js diff --git a/src/tests/index.js b/src/tests/index.js new file mode 100644 index 0000000..e69de29 diff --git a/src/tests/modal.test.js b/src/tests/modal.test.js new file mode 100644 index 0000000..e69de29